refactor(source): reperation to merge map and landingpage (#209)

* adjustments to allow merge of map with landingpage

* 3.0.79

* 3.0.80

* version

* removed unused imports

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",

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/",

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 (
     <ContextWrapper>
       <div className='tw-flex tw-flex-col tw-h-full'>
-        <SetAppState assetsApi={assetsApi} />
+        <SetAppState assetsApi={assetsApi} embedded={embedded} />
         <NavBar appName={appName}></NavBar>
         <div id='app-content' className='tw-flex'>
           {children}

src/Components/AppShell/Content.tsx

@@ -12,7 +12,7 @@ export function Content({ children }: ContentProps) {
 
   return (
     <div
-      className={`${appState.sideBarOpen && !appState.sideBarSlim ? 'tw-ml-48' : appState.sideBarOpen && appState.sideBarSlim ? 'tw-ml-14' : ''} tw-flex tw-flex-col tw-w-full tw-h-full tw-bg-base-200 tw-relative tw-transition-all tw-duration-300`}
+      className={`${appState.sideBarOpen && !appState.sideBarSlim ? 'tw-ml-48' : appState.sideBarOpen && appState.sideBarSlim ? 'tw-ml-14' : ''} tw-w-full tw-h-full tw-bg-base-100 tw-relative tw-transition-all tw-duration-300`}
     >
       {children}
     </div>

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<HTMLHeadingElement>(null)
   const [nameWidth, setNameWidth] = useState<number>(0)
-  const location = useLocation()
-  const [showNav, setShowNav] = useState<boolean>(false)
 
   useEffect(() => {
-    showNav && nameRef.current && setNameWidth(nameRef.current.scrollWidth)
+    !appState.embedded && nameRef.current && setNameWidth(nameRef.current.scrollWidth)
-  }, [nameRef, appName, showNav])
+  }, [nameRef, appName, appState.embedded])
-
-  useEffect(() => {
-    const params = new URLSearchParams(location.search)
-    const embedded = params.get('embedded')
-    embedded !== 'true' && setShowNav(true)
-  }, [location])
 
   const onLogout = async () => {
     await toast.promise(logout(), {
@@ -66,7 +58,7 @@ export default function NavBar({ appName }: { appName: string }) {
     })
   }
 
-  if (showNav) {
+  if (!appState.embedded) {
     return (
       <>
         <div className='tw-navbar tw-bg-base-100 tw-z-[9998] tw-shadow-xl tw-relative'>

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, setAppState])
-  }, [assetsApi])
+
+  useEffect(() => {
+    setAppState({ embedded })
+  }, [embedded, setAppState])
 
   return <></>
 }

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<boolean>(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`}
     >
       <div
-        className={`tw-flex tw-flex-col  ${embedded ? 'tw-h-full' : 'tw-h-[calc(100dvh-64px)]'}`}
+        className={`tw-flex tw-flex-col  ${appState.embedded ? 'tw-h-full' : 'tw-h-[calc(100dvh-64px)]'}`}
       >
         <ul
           className='tw-menu tw-w-full tw-bg-base-100 tw-text-base-content tw-p-0'

src/Components/AppShell/hooks/useAppState.tsx

@@ -8,6 +8,7 @@ interface AppState {
   assetsApi: AssetsApi
   sideBarOpen: boolean
   sideBarSlim: boolean
+  embedded: boolean
 }
 
 type UseAppManagerResult = ReturnType<typeof useAppManager>
@@ -16,6 +17,7 @@ const initialAppState: AppState = {
   assetsApi: {} as AssetsApi,
   sideBarOpen: false,
   sideBarSlim: false,
+  embedded: false,
 }
 
 const AppContext = createContext<UseAppManagerResult>({

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<HTMLInputElement>(null)
-  const [embedded, setEmbedded] = useState<boolean>(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) && (
         <div className='tw-w-[calc(100vw-2rem)] tw-max-w-[22rem] '>
           <div className='tw-flex tw-flex-row'>
-            {embedded && <SidebarControl />}
+            {appState.embedded && <SidebarControl />}
             <div className='tw-relative'>
               <input
                 type='text'

src/Components/Map/UtopiaMapInner.tsx

@@ -181,9 +181,7 @@ export function UtopiaMapInner({
   }
 
   return (
-    <div
+    <div className={`tw-h-full ${selectNewItemPosition != null ? 'crosshair-cursor-enabled' : ''}`}>
-      className={`tw-h-full ${selectNewItemPosition != null ? 'crosshair-cursor-enabled' : undefined}`}
-    >
       <Outlet />
       <Control position='topLeft' zIndex='1000' absolute>
         <SearchControl />