diff --git a/README.md b/README.md index 9b27432f..4b0f5124 100644 --- a/README.md +++ b/README.md @@ -70,3 +70,7 @@ Tags, colors and clusters help to retain the overview. + +--- + +This project is tested with BrowserStack diff --git a/package-lock.json b/package-lock.json index 5f2c81c1..bdb936a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "utopia-ui", - "version": "3.0.78", + "version": "3.0.80", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "utopia-ui", - "version": "3.0.78", + "version": "3.0.80", "license": "GPL-3.0-only", "dependencies": { "@heroicons/react": "^2.0.17", diff --git a/package.json b/package.json index ea2ee04a..b05f967d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "utopia-ui", - "version": "3.0.78", + "version": "3.0.81", "description": "Reuseable React Components to build mapping apps for real life communities and networks", "repository": "https://github.com/utopia-os/utopia-ui", "homepage": "https://utopia-os.org/", diff --git a/src/Components/AppShell/AppShell.tsx b/src/Components/AppShell/AppShell.tsx index 24c7099f..7c2c482e 100644 --- a/src/Components/AppShell/AppShell.tsx +++ b/src/Components/AppShell/AppShell.tsx @@ -13,15 +13,17 @@ export function AppShell({ appName, children, assetsApi, + embedded, }: { appName: string children: React.ReactNode assetsApi: AssetsApi + embedded?: boolean }) { return (
- +
{children} diff --git a/src/Components/AppShell/Content.tsx b/src/Components/AppShell/Content.tsx index ace72351..f6d49fd9 100644 --- a/src/Components/AppShell/Content.tsx +++ b/src/Components/AppShell/Content.tsx @@ -12,7 +12,7 @@ export function Content({ children }: ContentProps) { return (
{children}
diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx index 593f6d39..c8d30de6 100644 --- a/src/Components/AppShell/NavBar.tsx +++ b/src/Components/AppShell/NavBar.tsx @@ -2,7 +2,7 @@ import Bars3Icon from '@heroicons/react/16/solid/Bars3Icon' import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon' import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon' import { useEffect, useRef, useState } from 'react' -import { Link, useLocation } from 'react-router-dom' +import { Link } from 'react-router-dom' import { toast } from 'react-toastify' import { useAuth } from '#components/Auth/useAuth' @@ -35,18 +35,10 @@ export default function NavBar({ appName }: { appName: string }) { const nameRef = useRef(null) const [nameWidth, setNameWidth] = useState(0) - const location = useLocation() - const [showNav, setShowNav] = useState(false) useEffect(() => { - showNav && nameRef.current && setNameWidth(nameRef.current.scrollWidth) - }, [nameRef, appName, showNav]) - - useEffect(() => { - const params = new URLSearchParams(location.search) - const embedded = params.get('embedded') - embedded !== 'true' && setShowNav(true) - }, [location]) + !appState.embedded && nameRef.current && setNameWidth(nameRef.current.scrollWidth) + }, [nameRef, appName, appState.embedded]) const onLogout = async () => { await toast.promise(logout(), { @@ -66,7 +58,7 @@ export default function NavBar({ appName }: { appName: string }) { }) } - if (showNav) { + if (!appState.embedded) { return ( <>
diff --git a/src/Components/AppShell/SetAppState.tsx b/src/Components/AppShell/SetAppState.tsx index ac52faea..055bc561 100644 --- a/src/Components/AppShell/SetAppState.tsx +++ b/src/Components/AppShell/SetAppState.tsx @@ -4,13 +4,22 @@ import { useSetAppState } from './hooks/useAppState' import type { AssetsApi } from '#types/AssetsApi' -export const SetAppState = ({ assetsApi }: { assetsApi: AssetsApi }) => { +export const SetAppState = ({ + assetsApi, + embedded, +}: { + assetsApi: AssetsApi + embedded?: boolean +}) => { const setAppState = useSetAppState() useEffect(() => { setAppState({ assetsApi }) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [assetsApi]) + }, [assetsApi, setAppState]) + + useEffect(() => { + setAppState({ embedded }) + }, [embedded, setAppState]) return <> } diff --git a/src/Components/AppShell/SideBar.tsx b/src/Components/AppShell/SideBar.tsx index 4ea07200..409aea71 100644 --- a/src/Components/AppShell/SideBar.tsx +++ b/src/Components/AppShell/SideBar.tsx @@ -1,5 +1,4 @@ import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon' -import { useState, useEffect } from 'react' import { NavLink, useLocation } from 'react-router-dom' import { useAppState, useSetAppState } from './hooks/useAppState' @@ -19,14 +18,6 @@ export interface Route { export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoutes?: Route[] }) { const location = useLocation() - const [embedded, setEmbedded] = useState(true) - - useEffect(() => { - const params = new URLSearchParams(location.search) - const embedded = params.get('embedded') - embedded !== 'true' && setEmbedded(false) - }, [location]) - const params = new URLSearchParams(window.location.search) const appState = useAppState() @@ -45,12 +36,12 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute id='sidenav' className={`${appState.sideBarOpen ? 'tw-translate-x-0' : '-tw-translate-x-full'} ${appState.sideBarSlim ? 'tw-w-14' : 'tw-w-48'} - ${embedded ? 'tw-mt-0 tw-h-[100dvh]' : 'tw-mt-16 tw-h-[calc(100dvh-64px)]'} + ${appState.embedded ? 'tw-mt-0 tw-h-[100dvh]' : 'tw-mt-16 tw-h-[calc(100dvh-64px)]'} tw-fixed tw-left-0 tw-transition-all tw-duration-300 tw-top-0 tw-z-[10035] tw-overflow-hidden tw-shadow-xl dark:tw-bg-zinc-800`} >
    @@ -16,6 +17,7 @@ const initialAppState: AppState = { assetsApi: {} as AssetsApi, sideBarOpen: false, sideBarSlim: false, + embedded: false, } const AppContext = createContext({ diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx index 8b785784..42ea7c56 100644 --- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx @@ -14,11 +14,12 @@ import FlagIcon from '@heroicons/react/24/outline/FlagIcon' import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon' import axios from 'axios' import { LatLng, LatLngBounds, marker } from 'leaflet' -import { useEffect, useRef, useState } from 'react' +import { useRef, useState } from 'react' import SVG from 'react-inlinesvg' import { useMap, useMapEvents } from 'react-leaflet' -import { useLocation, useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' +import { useAppState } from '#components/AppShell/hooks/useAppState' import { useDebounce } from '#components/Map/hooks/useDebounce' import { useAddFilterTag } from '#components/Map/hooks/useFilter' import { useItems } from '#components/Map/hooks/useItems' @@ -48,6 +49,7 @@ export const SearchControl = () => { const items = useItems() const leafletRefs = useLeafletRefs() const addFilterTag = useAddFilterTag() + const appState = useAppState() useMapEvents({ popupopen: () => { @@ -97,21 +99,13 @@ export const SearchControl = () => { } const searchInput = useRef(null) - const [embedded, setEmbedded] = useState(true) - - const location = useLocation() - useEffect(() => { - const params = new URLSearchParams(location.search) - const embedded = params.get('embedded') - embedded !== 'true' && setEmbedded(false) - }, [location]) return ( <> {!(windowDimensions.height < 500 && popupOpen && hideSuggestions) && (
    - {embedded && } + {appState.embedded && }
    +
    diff --git a/tsconfig.json b/tsconfig.json index ff453fb4..50c23024 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,7 +7,7 @@ "module": "esnext", "target": "ESNext", "lib": ["es6", "dom","es2015", "es2016", "es2017", "es2020"], - "sourceMap": true, + "sourceMap": false, "allowJs": false, "jsx": "react-jsx", "moduleResolution": "node",