Toggle all hotspots from add hotspot modal

Author: rawcomposition

frontend/modals/AddHotspot.tsx

@@ -12,8 +12,8 @@ import useTripMutation from "hooks/useTripMutation";
 export default function AddHotspot() {
   const [query, setQuery] = React.useState("");
   const [selectedIndex, setSelectedIndex] = React.useState(0);
-  const { open } = useModal();
-  const { trip } = useTrip();
+  const { open, close } = useModal();
+  const { trip, showAllHotspots, setShowAllHotspots } = useTrip();
   const { hotspots } = useFetchHotspots(true);
 
   const addHotspotMutation = useTripMutation<HotspotInput>({
@@ -87,6 +87,20 @@ export default function AddHotspot() {
               autoFocus
               onChange={(e: any) => setQuery(e.target.value)}
             />
+            {!showAllHotspots && (
+              <p className="text-[12px] text-gray-700 -mt-3">
+                <button
+                  type="button"
+                  className="text-sky-600 font-bold"
+                  onClick={() => {
+                    setShowAllHotspots(true);
+                    close();
+                  }}
+                >
+                  Or view hotspot map
+                </button>
+              </p>
+            )}
             <div className="flex flex-col gap-2">
               {!!slicedResults?.length && <p className="text-[13px] text-gray-600">Select a hotspot to add</p>}
               {slicedResults.map((it, index) => {

frontend/pages/[tripId]/index.tsx

@@ -17,14 +17,21 @@ import NotFound from "components/NotFound";
 
 export default function Trip() {
   const { open } = useModal();
-  const [showAll, setShowAll] = React.useState(false);
-  const [showSatellite, setShowSatellite] = React.useState(false);
-  const { trip, canEdit, is404, setSelectedSpecies } = useTrip();
+  const {
+    trip,
+    canEdit,
+    is404,
+    setSelectedSpecies,
+    showAllHotspots,
+    setShowAllHotspots,
+    showSatellite,
+    setShowSatellite,
+  } = useTrip();
   const { user } = useUser();
   const [isAddingMarker, setIsAddingMarker] = React.useState(false);
 
   const savedHotspots = trip?.hotspots || [];
-  const { hotspots, hotspotLayer } = useFetchHotspots(showAll);
+  const { hotspots, hotspotLayer } = useFetchHotspots(showAllHotspots);
 
   const savedHotspotMarkers = savedHotspots.map((it) => ({
     lat: it.lat,
@@ -49,7 +56,7 @@ export default function Trip() {
 
   React.useEffect(() => {
     if (tripIsLoaded && tripIsNew) {
-      setShowAll(true);
+      setShowAllHotspots(true);
     }
   }, [tripIsLoaded, tripIsNew]);
 
@@ -68,9 +75,9 @@ export default function Trip() {
       <main className="flex h-[calc(100%-60px-55px)] relative">
         <div className="absolute top-4 right-4 sm:left-4 sm:right-auto flex flex-col gap-3 z-10">
           <MapButton
-            onClick={() => setShowAll((prev) => !prev)}
-            tooltip={showAll ? "Hide hotspots" : "Show hotspots"}
-            active={showAll}
+            onClick={() => setShowAllHotspots((prev) => !prev)}
+            tooltip={showAllHotspots ? "Hide hotspots" : "Show hotspots"}
+            active={showAllHotspots}
           >
             <Icon name="mapFlatPin" />
           </MapButton>
@@ -114,15 +121,15 @@ export default function Trip() {
                     onHotspotClick={hotspotClick}
                     markers={markers}
                     customMarkers={customMarkers}
-                    hotspotLayer={showAll && hotspotLayer}
+                    hotspotLayer={showAllHotspots && hotspotLayer}
                     bounds={trip.bounds}
                     addingMarker={isAddingMarker}
                     onDisableAddingMarker={() => setIsAddingMarker(false)}
                     showSatellite={showSatellite}
                   />
                 )}
                 {isAddingMarker && (
-                  <div className="flex absolute top-0 left-1/2 bg-white text-gray-600 text-sm px-4 py-2 -translate-x-1/2 rounded-b-lg w-full max-w-xs z-10 text-center">
+                  <div className="flex absolute top-0 left-1/2 bg-white text-gray-600 text-sm px-4 py-2 -translate-x-1/2 rounded-b-lg w-full max-w-xs z-10 text-center justify-between">
                     <div>
                       Click anywhere on map to add marker
                       <br />
@@ -137,7 +144,7 @@ export default function Trip() {
                         enter coordinates
                       </button>
                     </div>
-                    <CloseButton onClick={() => setIsAddingMarker(false)} className="ml-auto" />
+                    <CloseButton onClick={() => setIsAddingMarker(false)} />
                   </div>
                 )}
               </div>

frontend/providers/trip.tsx

@@ -29,9 +29,13 @@ type ContextT = {
   selectedMarkerId?: string;
   halo?: HaloT;
   dateRangeLabel: string;
+  showAllHotspots: boolean;
+  showSatellite: boolean;
   setSelectedSpecies: (species?: SelectedSpecies) => void;
   setSelectedMarkerId: (id?: string) => void;
   setHalo: (data?: HaloT) => void;
+  setShowAllHotspots: (show: boolean | ((prev: boolean) => boolean)) => void;
+  setShowSatellite: (show: boolean | ((prev: boolean) => boolean)) => void;
   refetch: () => void;
 };
 
@@ -44,13 +48,17 @@ const initialState = {
   isOwner: false,
   is404: false,
   dateRangeLabel: "",
+  showAllHotspots: false,
+  showSatellite: false,
 };
 
 export const TripContext = React.createContext<ContextT>({
   ...initialState,
   setSelectedSpecies: () => {},
   setSelectedMarkerId: () => {},
   setHalo: () => {},
+  setShowAllHotspots: () => {},
+  setShowSatellite: () => {},
   refetch: () => {},
 });
 
@@ -93,6 +101,8 @@ const TripProvider = ({ children }: Props) => {
   const [selectedSpecies, setSelectedSpecies] = React.useState<SelectedSpecies>();
   const [selectedMarkerId, setSelectedMarkerId] = React.useState<string>();
   const [halo, setHalo] = React.useState<HaloT>(); // Used to highlight selected geoJSON feature
+  const [showAllHotspots, setShowAllHotspots] = React.useState(false);
+  const [showSatellite, setShowSatellite] = React.useState(false);
   const is404 = !!auth?.currentUser && !!id && !trip && !isLoading;
 
   const dateRangeLabel =
@@ -112,6 +122,8 @@ const TripProvider = ({ children }: Props) => {
         setSelectedSpecies,
         setSelectedMarkerId,
         setHalo,
+        setShowAllHotspots,
+        setShowSatellite,
         refetch,
         invites: invites || null,
         canEdit,
@@ -124,6 +136,8 @@ const TripProvider = ({ children }: Props) => {
         selectedMarkerId,
         halo,
         dateRangeLabel,
+        showAllHotspots,
+        showSatellite,
       }}
     >
       {children}