From 0a2e2de53cd224fef0811136bc5fcb7edb19f2fe Mon Sep 17 00:00:00 2001
From: vmork <vallemork@gmail.com>
Date: Thu, 22 Aug 2024 17:26:30 +0200
Subject: [PATCH] add ability to copy current geojson in editor

---
 .../student/map/_components/BoothListItem.tsx |   1 -
 src/app/student/map/_components/Sidebar.tsx   | 119 +-----------------
 .../student/map/editor/EditorMapComponent.tsx |  36 +++++-
 src/app/student/map/page.tsx                  |   2 +-
 4 files changed, 35 insertions(+), 123 deletions(-)

diff --git a/src/app/student/map/_components/BoothListItem.tsx b/src/app/student/map/_components/BoothListItem.tsx
index 8974db4..3c91ca1 100644
--- a/src/app/student/map/_components/BoothListItem.tsx
+++ b/src/app/student/map/_components/BoothListItem.tsx
@@ -14,7 +14,6 @@ export function BoothListItem({
   onBoothClick: (boothId: BoothID) => void
   currentLocationId: LocationId
 }) {
-  console.log(booth.exhibitor.name, booth.location)
   const logoSrc = booth.exhibitor.logo_squared ?? booth.exhibitor.logo_freesize
   return (
     <Card className="cursor-pointer" onClick={() => onBoothClick(booth.id)}>
diff --git a/src/app/student/map/_components/Sidebar.tsx b/src/app/student/map/_components/Sidebar.tsx
index ff97bfe..b681ba0 100644
--- a/src/app/student/map/_components/Sidebar.tsx
+++ b/src/app/student/map/_components/Sidebar.tsx
@@ -13,123 +13,6 @@ import { cn } from "@/lib/utils"
 import { ArrowLeft, ChevronsLeft, ChevronsRight } from "lucide-react"
 import { useState } from "react"
 
-// import { ArrowLeft, ChevronsLeft, ChevronsRight } from "lucide-react"
-// import { useState } from "react"
-
-// export default function Sidebar({
-//   boothsById,
-//   activeBoothId,
-//   hoveredBoothId,
-//   setActiveBoothId,
-//   setHoveredBoothId,
-//   currentLocation
-// }: {
-//   boothsById: BoothMap
-//   activeBoothId: BoothID | null
-//   hoveredBoothId: BoothID | null
-//   setActiveBoothId: (id: BoothID | null) => void
-//   setHoveredBoothId: (id: BoothID | null) => void
-//   currentLocation: LocationId
-// }) {
-//   // Show booths in the current location first, then sort by location, then exhibitor name
-//   function sortBooths(booths: Booth[]) {
-//     return booths.sort((a, b) => {
-//       const c1 =
-//         (b.location === currentLocation ? 1 : 0) -
-//         (a.location === currentLocation ? 1 : 0)
-//       if (c1 !== 0) return c1
-//       const c2 = a.location.localeCompare(b.location)
-//       if (c2 !== 0) return c2
-//       const c3 = a.exhibitor.name.localeCompare(b.exhibitor.name)
-//       return c3
-//     })
-//   }
-
-// 	const booths = Array.from(boothsById.values())
-// 	const [filteredBooths, setFilteredBooths] = useState(booths)
-//   const displayedBooths = sortBooths(filteredBooths)
-
-//   const { width } = useScreenSize()
-//   const smallScreen = width ? width <= 800 : false
-
-//   if (activeBoothId != null) {
-//     const exhibitor = boothsById.get(activeBoothId)?.exhibitor
-//     if (!exhibitor) {
-//       console.error(`No exhibitor found for booth with id ${activeBoothId}`)
-//       return null
-//     }
-//     return (
-//       // <SidebarContainer smallScreen={smallScreen}>
-//       //   {!smallScreen && (
-//       //     <div className="flex">
-//       //       <button
-//       //         title="Back to list view"
-//       //         className="p-1 text-stone-400 transition hover:text-stone-200"
-//       //         onClick={() => setActiveBoothId(null)}>
-//       //         <List size={25} />
-//       //       </button>
-//       //     </div>
-//       //   )}
-//       //   <div className="p-3 pt-0 sm:pt-3">
-//       //     <ExhibitorDetails exhibitor={exhibitor} />
-//       //   </div>
-//       // </SidebarContainer>
-//       <SidebarContainer smallScreen={smallScreen}>
-// 				<div className="p-2">
-// 					<Button variant="ghost" onClick={() => setActiveBoothId(null)}>
-// 						<ArrowLeft size={30} />
-// 					</Button>
-// 					<ExhibitorDetails exhibitor={exhibitor} />
-// 				</div>
-// 			</SidebarContainer>
-
-//     )
-//   }
-
-//   return (
-//     // <SidebarContainer smallScreen={smallScreen}>
-//     //   <div className="mb-6 border-b border-stone-600 p-3">
-//     //     <ExhibitorFilters
-//     //       exhibitors={exhibitors}
-//     //       onChange={setFilteredExhibitors}
-//     //     />
-//     //   </div>
-//     //   <ul className="divide-y divide-neutral-400">
-//     //     {displayedBooths.map(({ id, exhibitor, location }) => (
-//     //       <li
-//     //         key={id}
-//     //         onClick={() => setActiveBoothId(id)}
-//     //         onMouseEnter={() => setHoveredBoothId(id)}
-//     //         onMouseLeave={() => setHoveredBoothId(null)}
-//     //         className="flex cursor-default p-2 hover:bg-slate-800">
-//     //         <div>{exhibitor.name}</div>
-//     //         <div className="ml-auto text-sm text-stone-400">
-//     //           {locations.find(loc => loc.id === location)?.label}
-//     //         </div>
-//     //       </li>
-//     //     ))}
-
-//     //   </ul>
-//     // </SidebarContainer>
-
-//     <SidebarContainer smallScreen={smallScreen}>
-// 			<div className="h-[72px] p-2 text-2xl">Search for the booths</div>
-// 			<div className="p-2">
-// 				<MapListFilteringHeader booths={Array.from(boothsById.values())} onChange={setFilteredBooths} />
-// 			</div>
-// 			{filteredBooths.map(booth => (
-// 				<BoothListItem
-// 					key={booth.id}
-// 					booth={booth}
-// 					onBoothClick={setActiveBoothId}
-// 				/>
-// 			))}
-// 		</SidebarContainer>
-
-//   )
-
-// =======
-
 export default function Sidebar({
   boothsById,
   activeBoothId,
@@ -190,10 +73,10 @@ export default function Sidebar({
       </div>
       {displayedBooths.map(booth => (
         <div
+          key={booth.id}
           onMouseEnter={() => setHoveredBoothId(booth.id)}
           onMouseLeave={() => setHoveredBoothId(null)}>
           <BoothListItem
-            key={booth.id}
             booth={booth}
             onBoothClick={setActiveBoothId}
             currentLocationId={currentLocation}
diff --git a/src/app/student/map/editor/EditorMapComponent.tsx b/src/app/student/map/editor/EditorMapComponent.tsx
index d320761..d12c97f 100644
--- a/src/app/student/map/editor/EditorMapComponent.tsx
+++ b/src/app/student/map/editor/EditorMapComponent.tsx
@@ -58,7 +58,6 @@ export default function EditorMapComponent({
   const [drawMode, setDrawMode] = useState<DrawMode>("simple_select")
 
   const [activeFeatureId, setActiveFeatureId] = useState<BoothID | null>(null)
-  console.log("activeFeatureId", activeFeatureId)
 
   const featureMap = useRef<FeatureMap>(
     new Map(geoJsonBoothData.features.map(feat => [feat.properties.id, feat]))
@@ -71,12 +70,12 @@ export default function EditorMapComponent({
   }
 
   function onModeChange(e: { mode: DrawMode }) {
-    console.log("Mode change", e)
+    console.log("Mode change", e.mode)
     setDrawMode(e.mode)
   }
 
   function onSelectionChange(e: { features: GeoJsonBooth[] }) {
-    console.log("Selection change", drawMode)
+    console.log("Selection change", drawMode, e)
     if (e.features.length === 0) return
     if (activeFeature == null) setActiveFeatureId(e.features[0].properties.id)
     else setActiveFeatureId(null)
@@ -291,6 +290,20 @@ export default function EditorMapComponent({
   }
 
   function Toolbar() {
+    const [showJson, setShowJson] = useState(false)
+    const json = JSON.stringify(
+      toFeatureCollection(featureMap.current),
+      null,
+      2
+    )
+    const copyToClipboard = () => {
+      navigator.clipboard
+        .writeText(json)
+        .then(() => setDidCopy(true))
+        .catch(() => console.error("Failed to copy to clipboard"))
+    }
+    const [didCopy, setDidCopy] = useState(false)
+
     return (
       <div className="absolute bottom-2 flex ">
         <Button
@@ -302,6 +315,23 @@ export default function EditorMapComponent({
           }}>
           Draw
         </Button>
+
+        <div className="relative flex justify-center">
+          <Button onClick={() => setShowJson(!showJson)}>
+            {showJson ? "Hide JSON" : "Show JSON"}
+          </Button>
+          {showJson && (
+            <div className="absolute bottom-[45px] h-[500px] w-[500px] overflow-auto rounded-md bg-stone-200 p-2 text-stone-900">
+              {!didCopy ? <Button
+                className=""
+                variant="ghost"
+                onClick={copyToClipboard}>
+                Copy to clipboard
+              </Button> : <div>Copied!</div>}
+              <pre>{json}</pre>
+            </div>
+          )}
+        </div>
       </div>
     )
   }
diff --git a/src/app/student/map/page.tsx b/src/app/student/map/page.tsx
index 918d565..fabbdc3 100644
--- a/src/app/student/map/page.tsx
+++ b/src/app/student/map/page.tsx
@@ -29,7 +29,7 @@ export default async function Page() {
     boothsByLocation.get(booth.location)!.set(id, booth)
   })
 
-  const editorMode = false
+  const editorMode = true
 
   return (
     // TODO: pt-16 is to account for the navbar, will break if navbar size changes