From 5ec9a8a07a56a236385bcda54e65e467a6dca771 Mon Sep 17 00:00:00 2001
From: Noah Hernandez <63211322+oahnh@users.noreply.github.com>
Date: Sat, 2 Dec 2023 15:36:55 -0800
Subject: [PATCH] feat(map): adds preview component, updates UI

---
 src/app/siteMapPage/page.tsx                  |  28 ++--
 .../FilterButton/FilterButton.tsx             |  21 ++-
 .../userComponents/SiteMap/Control.tsx        |  85 +++++++++++
 .../SiteMap/DisplayPreviewCard.tsx            | 102 +++++++++++++
 .../userComponents/SiteMap/SiteMap.tsx        | 124 +++++++++++-----
 src/supabase/media/queries.ts                 |  22 +++
 src/supabase/tours/queries.tsx                |  14 ++
 src/types/supabase.ts                         | 137 +++++++++++++++++-
 8 files changed, 476 insertions(+), 57 deletions(-)
 create mode 100644 src/components/userComponents/SiteMap/Control.tsx
 create mode 100644 src/components/userComponents/SiteMap/DisplayPreviewCard.tsx

diff --git a/src/app/siteMapPage/page.tsx b/src/app/siteMapPage/page.tsx
index f12e594d..6c3e9b6a 100644
--- a/src/app/siteMapPage/page.tsx
+++ b/src/app/siteMapPage/page.tsx
@@ -19,23 +19,33 @@ const SiteMap = dynamic(
   },
 );
 
+
+
 /**
  * @returns Page for the interactive map
  */
 function MapPage() {
+
+  // move tour logic here: need to share state between filter 
+  const handleFilter = () => {};
+
+  const renderFilterContainer = () => (
+    <div className="container mb-6 mt-9">
+      <p className="text-[#808080]">FILTER BY</p>
+      <div className="inline-flex flex-row items-center gap-x-2.5 w-full overflow-x-scroll no-scrollbar">
+        {filterButtonContent &&
+          filterButtonContent.map(text => (
+            <FilterButton key={text} content={text} onClick={handleFilter} />
+          ))}
+      </div>
+    </div>
+  );
+
   return (
     <>
       <NavBar />
       <div className="flex flex-col items-start pl-6">
-        <div className="container mb-6 mt-9">
-          <h1 style={{ fontSize: '2rem', fontWeight: 700 }}>Site Map</h1>
-          <div className="inline-flex flex-row items-center gap-x-2.5 w-full overflow-x-scroll no-scrollbar">
-            {filterButtonContent &&
-              filterButtonContent.map(text => (
-                <FilterButton key={text} content={text} />
-              ))}
-          </div>
-        </div>
+        {renderFilterContainer()}
         <div className=" w-full pr-6 flex h-2/3 mb-8">
           <SiteMap />
         </div>
diff --git a/src/components/userComponents/FilterButton/FilterButton.tsx b/src/components/userComponents/FilterButton/FilterButton.tsx
index cd304413..019ca7e9 100644
--- a/src/components/userComponents/FilterButton/FilterButton.tsx
+++ b/src/components/userComponents/FilterButton/FilterButton.tsx
@@ -5,11 +5,22 @@ interface FilterButtonProps {
   onClick?: () => void;
 }
 
-function FilterButton({ content, ...children }: FilterButtonProps) {
+/**
+ *
+ * @param onClick.content
+ * @param onClick function to handle the functionality we want to tie to our filter buttons
+ * @param content is the content to be rendered in the button
+ * @param root0.onClick
+ * @param onClick.onClick
+ */
+function FilterButton({ content, onClick, ...children }: FilterButtonProps) {
   const [isSelected, setIsSelected] = useState<boolean>(false);
 
-  const defaultStyle = 'bg-[#4b711d]/[0.13] text-[#4B711D] border-[#547829]';
-  const selectedStyle = 'bg-[#547829] text-white border-[#547829]';
+  const selectedStyle = 'bg-[#7ca24e]/[0.3]';
+
+  const buttonClass = `py-2 px-4 rounded-2xl whitespace-nowrap border-[0.8px] border-[#386131] border-solid flex-nowrap text-[#386131] ${
+    isSelected ? selectedStyle : ''
+  }`;
 
   const handleClick = () => {
     setIsSelected(!isSelected);
@@ -18,9 +29,7 @@ function FilterButton({ content, ...children }: FilterButtonProps) {
   return (
     <button
       type="button"
-      className={`${
-        isSelected ? selectedStyle : defaultStyle
-      } py-2 px-4 rounded-full whitespace-nowrap border border-solid flex-nowrap`}
+      className={buttonClass}
       onClick={handleClick}
       {...children}
     >
diff --git a/src/components/userComponents/SiteMap/Control.tsx b/src/components/userComponents/SiteMap/Control.tsx
new file mode 100644
index 00000000..c1cce089
--- /dev/null
+++ b/src/components/userComponents/SiteMap/Control.tsx
@@ -0,0 +1,85 @@
+/* eslint-disable jsdoc/require-returns */
+/* eslint-disable jsdoc/require-jsdoc */
+import L from 'leaflet';
+import React, { useState, createRef, useEffect } from 'react';
+import { useMap } from 'react-leaflet';
+
+interface ControlProps {
+  position: L.ControlPosition;
+  children?: React.ReactNode;
+  container?: React.HTMLAttributes<HTMLDivElement>;
+  prepend?: boolean;
+}
+
+const POSITION_CLASSES = {
+  bottomleft: 'leaflet-bottom leaflet-left',
+  bottomright: 'leaflet-bottom leaflet-right',
+  topleft: 'leaflet-top leaflet-left',
+  topright: 'leaflet-top leaflet-right',
+};
+
+function Control({
+  position,
+  children,
+  container,
+  prepend,
+}: ControlProps): JSX.Element {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [portalRoot, setPortalRoot] = useState<any>(
+    document.createElement('div'),
+  );
+  const positionClass =
+    (position && POSITION_CLASSES[position]) || POSITION_CLASSES.topright;
+  const controlContainerRef = createRef<HTMLDivElement>();
+  const map = useMap();
+
+  /**
+   * Whenever the control container ref is created,
+   * Ensure the click / scroll propagation is removed
+   * This way click/scroll events do not bubble down to the map
+   */
+  useEffect(() => {
+    if (controlContainerRef.current !== null) {
+      L.DomEvent.disableClickPropagation(controlContainerRef.current);
+      L.DomEvent.disableScrollPropagation(controlContainerRef.current);
+    }
+  }, [controlContainerRef]);
+
+  /**
+   * Whenever the position is changed, go ahead and get the container of the map and the first
+   * instance of the position class in that map container
+   */
+  useEffect(() => {
+    const mapContainer = map.getContainer();
+    const targetDiv = mapContainer.getElementsByClassName(positionClass);
+    setPortalRoot(targetDiv[0]);
+  }, [positionClass, map]);
+
+  /**
+   * Whenever the portal root is complete,
+   * append or prepend the control container to the portal root
+   */
+  useEffect(() => {
+    if (portalRoot !== null) {
+      if (prepend !== undefined && prepend === true) {
+        portalRoot.prepend(controlContainerRef.current);
+      } else {
+        portalRoot.append(controlContainerRef.current);
+      }
+    }
+  }, [portalRoot, prepend, controlContainerRef]);
+
+  /**
+   * Concatenate the props.container className to the class of the control div, per leaflet's built in styles.
+   * Will need to change styling of component itself based on screen breakpoints
+   */
+  const className = `${container?.className?.concat(' ') || ''}leaflet-control`;
+
+  return (
+    <div {...container} ref={controlContainerRef} className={className}>
+      {children}
+    </div>
+  );
+}
+
+export default Control;
diff --git a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
new file mode 100644
index 00000000..98293964
--- /dev/null
+++ b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from 'react';
+import { LatLngExpression } from 'leaflet';
+import { useMapEvents } from 'react-leaflet';
+import Link from 'next/link';
+import Image from 'next/image';
+import { TourRow } from '../../../types/types';
+import { fetchImagesForTour } from '../../../supabase/media/queries';
+
+interface DisplayCardProps {
+  tour: TourRow;
+  handleClose: () => void;
+  handleClick?: () => void;
+}
+
+/**
+ * @param DisplayCardProps.display display to preview
+ * @param DisplayCardProps.handleClick function to handle actions when clicked
+ * @param DisplayCardProps.handleClose function to handle closing of preview card
+ * @param DisplayCardProps.display.display
+ * @param DisplayCardProps.display.handleClick
+ * @param DisplayCardProps.display.handleClose
+ * @param DisplayCardProps.display.tour
+ * @returns preview card component to display within leaflet map container
+ */
+function DisplayPreviewCard({
+  tour,
+  handleClick,
+  handleClose,
+}: DisplayCardProps) {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [previewImage, setPreviewImage] = useState<string>('');
+  const { id, name, description, coordinates } = tour;
+
+  // Map Context
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const map = useMapEvents({
+    click: e => {
+      if (!e.latlng.equals(coordinates as LatLngExpression)) {
+        handleClose();
+      }
+    },
+  });
+
+  // fetch image to use for preview
+  useEffect(() => {
+    const fetchImages = async () => {
+      setLoading(true);
+      const images = await fetchImagesForTour(id);
+      if (images) {
+        setPreviewImage(images[0].url);
+      }
+      setLoading(false);
+    };
+
+    fetchImages();
+  }, [tour]);
+
+  /** route this to spotlights */
+
+  return (
+    <Link href={`/spotlightPage/${id}`}>
+      <div className="flex flex-col h-fit left-1/2 translate-x-5">
+        <div
+          className="flex flex-row align-center rounded-md shadow-[0_4px_21px_0_rgba(0, 0, 0, 0.25)] overflow-hidden w-80 max-h-28 absolute bottom-0"
+          onClick={handleClick}
+          aria-hidden="true"
+        >
+          {!loading && 
+            <Image
+              className="shrink"
+              src={previewImage}
+              alt="Placeholder for this input"
+            />
+          }
+          <div
+            className="bg-white rounded-r-md align-center justify-items-center align-middle pt-6 pb-4 px-3.5 w-10/12 overflow-hidden"
+            onClick={handleClick}
+            onKeyDown={e => {
+              if (handleClick && e.key === 'Enter') {
+                handleClick();
+              }
+            }}
+            role="button"
+            tabIndex={0}
+          >
+            <div className="w-full flex-col block gap-x-5 overflow-hidden text-base">
+              <h3
+                className="truncate text-black"
+                style={{ fontWeight: 'bolder' }}
+              >
+                {name}
+              </h3>
+              <h4 className="max-w-full line-clamp-2">{description}</h4>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+export default DisplayPreviewCard;
diff --git a/src/components/userComponents/SiteMap/SiteMap.tsx b/src/components/userComponents/SiteMap/SiteMap.tsx
index a8016d7a..f0eb5e95 100644
--- a/src/components/userComponents/SiteMap/SiteMap.tsx
+++ b/src/components/userComponents/SiteMap/SiteMap.tsx
@@ -1,17 +1,12 @@
 'use client';
 
-import { LatLngExpression } from 'leaflet';
+import L, { LatLngExpression } from 'leaflet';
 import React, { useEffect, useState } from 'react';
-import {
-  LayersControl,
-  MapContainer,
-  TileLayer,
-  Marker,
-  Popup,
-  ZoomControl,
-} from 'react-leaflet';
-import { fetchDisplays } from '../../../supabase/displays/queries';
-import { DisplayRow } from '../../../types/types';
+import { LayersControl, MapContainer, TileLayer, Marker } from 'react-leaflet';
+import { fetchSpotlightTours } from '../../../supabase/tours/queries';
+import { TourRow } from '../../../types/types';
+import Control from './Control';
+import DisplayPreviewCard from './DisplayPreviewCard';
 
 const center: LatLngExpression = {
   lat: 37.25323057233323,
@@ -19,62 +14,117 @@ const center: LatLngExpression = {
 };
 
 const tileLayer: { attribution: string; url: string } = {
-  attribution:
-    '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+  attribution: '',
   url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 };
 
+const defaultMarkerIcon = L.divIcon({
+  html: `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="30"
+      height="35"
+      viewBox="0 0 30 35"
+      fill="none"
+    >
+      <circle cx="15" cy="15" r="15" fill="#F17373" />
+      <circle cx="15" cy="15" r="12" fill="#FFFDF7" />
+      <path d="M15 35L18.5 31.5L24 27H6L11.5 31.5L15 35Z" fill="#F17373" />
+    </svg>
+  `,
+  className: 'default-icon',
+  iconSize: [30, 35],
+});
+
+const selectedMarkerIcon = L.divIcon({
+  html: `
+  <svg xmlns="http://www.w3.org/2000/svg" width="30" height="35" viewBox="0 0 30 35" fill="none">
+  <circle cx="15" cy="15" r="15" fill="#F17373"/>
+  <circle cx="15" cy="15" r="5" fill="#FFFDF7"/>
+  <path d="M15 35L18.5 31.5L24 27H6L11.5 31.5L15 35Z" fill="#F17373"/>
+</svg>`,
+  className: 'selected-icon',
+  iconSize: [30, 35],
+});
+
 /**
  * @returns Interactive map based on React Leaflet, holds the markers which lead to exhibits
  */
 function SiteMap() {
-  const [displays, setDisplays] = useState<DisplayRow[]>([]);
+  const [spotlightTours, setSpotlightTours] = useState<TourRow[] | null>(null);
+  const [selectedTour, setSelectedTour] = useState<TourRow | null>(
+    null,
+  );
+  const [mapCenter, setMapCenter] = useState<LatLngExpression>(center);
+  const [selectedMarker, setSelectedMarker] = useState<number | null>(null);
 
+  // fetch tours where spotlight == True
   useEffect(() => {
     /**
      *
      */
     async function fetchData() {
       try {
-        const data = await fetchDisplays();
-        setDisplays(data);
+        const data = await fetchSpotlightTours();
+        setSpotlightTours(data);
       } catch (error) {
-        console.error(error);
+        throw new Error(`Encountered an error fetching displays: ${error}`);
       }
     }
     fetchData();
   }, []);
+
   useEffect(() => {
-    // eslint-disable-next-line no-console
-    console.log('Displays in useEffect:', displays);
-  }, [displays]);
+    if (!selectedTour) {
+      setSelectedMarker(null);
+    }
+  }, [selectedTour]);
+
+  const handleMarkerSelect = (tour: TourRow, markerIndex: number) => {
+    setSelectedTour(tour);
+    setSelectedMarker(markerIndex);
+    setMapCenter(tour.coordinates as LatLngExpression);
+  };
+
+  const handlePreviewClose = () => {
+    setSelectedTour(null);
+  };
+
   return (
     <MapContainer
-      center={center}
+      center={mapCenter}
       zoom={18}
       zoomControl={false}
       scrollWheelZoom
-      style={{ height: '75vh', width: '100%', minHeight: '544px' }}
+      style={{
+        height: '75vh',
+        width: '100%',
+        minHeight: '544px',
+        zIndex: '10',
+      }}
       key={new Date().getTime()}
     >
-      <ZoomControl position="bottomright" />
       <TileLayer {...tileLayer} />
       <LayersControl position="topright">
-        {displays.map(display => (
-          <LayersControl.Overlay key={display.id} name={display.title}>
-            <Marker
-              key={display.id}
-              position={{
-                lat: (display.coordinates as { lat: number })?.lat ?? 0,
-                lng: (display.coordinates as { lng: number })?.lng ?? 0,
-              }}
-            >
-              <Popup>
-                {display.title} <br /> {display.description}
-              </Popup>
-            </Marker>
-          </LayersControl.Overlay>
+        {spotlightTours && spotlightTours.map((tour, i) => (
+          <Marker
+            key={tour.id}
+            position={{
+              lat: (tour.coordinates as { lat: number })?.lat ?? 0,
+              lng: (tour.coordinates as { lng: number })?.lng ?? 0,
+            }}
+            eventHandlers={{ click: () => handleMarkerSelect(tour, i) }}
+            icon={selectedMarker === i ? selectedMarkerIcon : defaultMarkerIcon}
+          />
         ))}
+        {selectedTour && (
+          <Control position="bottomleft">
+            <DisplayPreviewCard
+              tour={selectedTour}
+              handleClose={handlePreviewClose}
+            />
+          </Control>
+        )}
       </LayersControl>
     </MapContainer>
   );
diff --git a/src/supabase/media/queries.ts b/src/supabase/media/queries.ts
index 2edbb645..63b00a34 100644
--- a/src/supabase/media/queries.ts
+++ b/src/supabase/media/queries.ts
@@ -35,6 +35,28 @@ export async function fetchImagesForDisplay(
 
   return data; 
 }
+
+/**
+ *
+ * @param tourId id of the tour to fetch images for 
+ * @returns an array of image objects corresponding to the display
+ */
+export async function fetchImagesForTour(
+  tourId: string | undefined,
+): Promise<MediaRow[] | null> {
+  if (!tourId) {
+    return null;
+  }
+  const { data, error } = await supabase.rpc('fetchimagesfortour', {
+    tourid: tourId,
+  });
+
+  if (error) {
+    throw new Error(error.message);
+  }
+
+  return data; 
+}
 /**
  *
  * @param id of media to delete
diff --git a/src/supabase/tours/queries.tsx b/src/supabase/tours/queries.tsx
index e14342a7..65f31983 100644
--- a/src/supabase/tours/queries.tsx
+++ b/src/supabase/tours/queries.tsx
@@ -15,6 +15,20 @@ export async function fetchAllTours(): Promise<TourRow[]> {
   return data;
 }
 
+/**
+ * @returns all spotlight tours from the tours table
+ */
+export async function fetchSpotlightTours(): Promise<TourRow[] | null> {
+  const { data, error } = await supabase
+    .from('tours')
+    .select('*')
+    .is('spotlight', true);
+  if (error) {
+    throw new Error(`Error fetching spotlight tours: ${error.message}`);
+  }
+  return data;
+}
+
 /**
  * Fetches a single tour from the database.
  * @param tourId - The id of the tour to fetch.
diff --git a/src/types/supabase.ts b/src/types/supabase.ts
index 8f8196cd..ff4aa316 100644
--- a/src/types/supabase.ts
+++ b/src/types/supabase.ts
@@ -191,26 +191,35 @@ export interface Database {
       }
       tours: {
         Row: {
+          category: Database["public"]["Enums"]["tour_category"]
+          coordinates: Json | null
           created_at: string
           description: string | null
           id: string
           name: string | null
+          preview_text: string | null
           spotlight: boolean
           stop_count: number | null
         }
         Insert: {
+          category?: Database["public"]["Enums"]["tour_category"]
+          coordinates?: Json | null
           created_at?: string
           description?: string | null
           id?: string
           name?: string | null
+          preview_text?: string | null
           spotlight?: boolean
           stop_count?: number | null
         }
         Update: {
+          category?: Database["public"]["Enums"]["tour_category"]
+          coordinates?: Json | null
           created_at?: string
           description?: string | null
           id?: string
           name?: string | null
+          preview_text?: string | null
           spotlight?: boolean
           stop_count?: number | null
         }
@@ -221,13 +230,33 @@ export interface Database {
       [_ in never]: never
     }
     Functions: {
-      fetch_display_images: {
+      fetchimagesfordisplay: {
         Args: {
-          display_id: string
+          displayid: string
+        }
+        Returns: {
+          id: string
+          url: string
+          type: string
+          title: string
+          text: string
+          created_at: string
+        }[]
+      }
+      fetchimagesfortour: {
+        Args: {
+          tourid: string
         }
-        Returns: Record<string, unknown>
+        Returns: {
+          id: string
+          url: string
+          type: string
+          title: string
+          text: string
+          created_at: string
+        }[]
       }
-      joinspotlightswithmedia: {
+      join_spotlights_with_media: {
         Args: Record<PropertyKey, never>
         Returns: {
           id: string
@@ -236,15 +265,113 @@ export interface Database {
           created_at: string
           stop_count: number
           spotlight: boolean
+          preview_text: string
           media_url: string
         }[]
       }
+      join_tours_with_media: {
+        Args: Record<PropertyKey, never>
+        Returns: {
+          id: string
+          name: string
+          description: string
+          created_at: string
+          stop_count: number
+          spotlight: boolean
+          preview_text: string
+          url: string
+        }[]
+      }
     }
     Enums: {
       media_type: "image" | "video" | "link"
+      tour_category:
+        | "BuildingsAndServices"
+        | "ParksAviariesEnclosures"
+        | "SiteFeatures"
     }
     CompositeTypes: {
       [_ in never]: never
     }
   }
-}
\ No newline at end of file
+}
+
+export type Tables<
+  PublicTableNameOrOptions extends
+    | keyof (Database["public"]["Tables"] & Database["public"]["Views"])
+    | { schema: keyof Database },
+  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+    ? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+        Database[PublicTableNameOrOptions["schema"]]["Views"])
+    : never = never
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+  ? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+      Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
+      Row: infer R
+    }
+    ? R
+    : never
+  : PublicTableNameOrOptions extends keyof (Database["public"]["Tables"] &
+      Database["public"]["Views"])
+  ? (Database["public"]["Tables"] &
+      Database["public"]["Views"])[PublicTableNameOrOptions] extends {
+      Row: infer R
+    }
+    ? R
+    : never
+  : never
+
+export type TablesInsert<
+  PublicTableNameOrOptions extends
+    | keyof Database["public"]["Tables"]
+    | { schema: keyof Database },
+  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+    : never = never
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Insert: infer I
+    }
+    ? I
+    : never
+  : PublicTableNameOrOptions extends keyof Database["public"]["Tables"]
+  ? Database["public"]["Tables"][PublicTableNameOrOptions] extends {
+      Insert: infer I
+    }
+    ? I
+    : never
+  : never
+
+export type TablesUpdate<
+  PublicTableNameOrOptions extends
+    | keyof Database["public"]["Tables"]
+    | { schema: keyof Database },
+  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+    : never = never
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Update: infer U
+    }
+    ? U
+    : never
+  : PublicTableNameOrOptions extends keyof Database["public"]["Tables"]
+  ? Database["public"]["Tables"][PublicTableNameOrOptions] extends {
+      Update: infer U
+    }
+    ? U
+    : never
+  : never
+
+export type Enums<
+  PublicEnumNameOrOptions extends
+    | keyof Database["public"]["Enums"]
+    | { schema: keyof Database },
+  EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
+    ? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
+    : never = never
+> = PublicEnumNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
+  : PublicEnumNameOrOptions extends keyof Database["public"]["Enums"]
+  ? Database["public"]["Enums"][PublicEnumNameOrOptions]
+  : never