big database edits to make fun facts possible on map

src/app/exhibitsPage/page.tsx

@@ -1,24 +1,22 @@
-
 'use client';
 
 import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 import NavBar from '../../components/userComponents/navBar/navBar';
-import { ExhibitRow } from '../../types/types';
-import { fetchAllExhibits } from '../../supabase/exhibits/queries';
+import { CategoryRow } from '../../types/types';
+import { fetchAllCategories } from '../../supabase/category/queries';
 import Exhibit from '../../components/userComponents/Exhibit/Exhibit';
 import BackButton from '../../components/userComponents/BackButton/page';
 
-
 /**
  * @returns exhibit page
  */
 function App() {
-  const [exhibits, setExhibits] = useState<ExhibitRow[]>([]);
+  const [exhibits, setExhibits] = useState<CategoryRow[]>([]);
   useEffect(() => {
     // Get exhibits
     const getExhibits = async () => {
-      const fetchedExhibits: ExhibitRow[] = await fetchAllExhibits();
+      const fetchedExhibits: CategoryRow[] = await fetchAllCategories();
       setExhibits(fetchedExhibits);
     };
     getExhibits();
@@ -31,10 +29,12 @@ function App() {
       setTimeout(() => {
         const element = document.querySelector(hash);
         const yOffset = -50;
-        const y =
-          element.getBoundingClientRect().top + window.scrollY + yOffset;
-        // check on this offset later
-        window.scrollTo({ top: y, behavior: 'instant' });
+        if (element) {
+          const y =
+            element.getBoundingClientRect().top + window.scrollY + yOffset;
+          // check on this offset later
+          window.scrollTo({ top: y, behavior: 'instant' });
+        }
       }, 1000);
     }
   }, []);
@@ -64,7 +64,7 @@ function App() {
         <ul>
           {exhibits.map(exhibit => (
             <Exhibit
-              title={exhibit.title}
+              title={exhibit.category || ''}
               description={exhibit.description || ''}
               image={exhibit.image || ''}
               key={exhibit.id}
@@ -77,4 +77,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

src/components/userComponents/BackButton/page.tsx

@@ -18,13 +18,14 @@ export default function BackButton() {
     <button type="button" onClick={goBack}>
       {' '}
       <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 20 20"
-          fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
       >
-        <path className="stroke-scary-forest active:stroke-[#223a1d]"
+        <path
+          className="stroke-scary-forest active:stroke-[#223a1d]"
           d="M17.5 10H2.5M2.5 10L6.66667 14.1667M2.5 10L6.66667 5.83337"
           strokeWidth="1.65"
           strokeLinecap="round"

src/components/userComponents/Exhibit/Exhibit.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Image from 'next/image';
-  
+
 /**
  *
  * @param root0 passed in
@@ -19,7 +19,7 @@ export default function Exhibit({
   title: string;
   description: string;
   image: string;
-  id: string;
+  id: number;
 }) {
   return (
     <li key={id} id={`a${id}`}>

src/components/userComponents/SiteMap/DisplayPreviewCard.tsx

@@ -3,12 +3,11 @@ import { LatLngExpression } from 'leaflet';
 import { useMapEvents } from 'react-leaflet';
 import Link from 'next/link';
 import Image from 'next/image';
-import { ExhibitRow, TourRow } from '../../../types/types';
+import { ExhibitWithCategoryRow, TourRow } from '../../../types/types';
 import { fetchImagesForTour } from '../../../supabase/media/queries';
-import { fetchExhibitImage } from '../../../supabase/exhibits/queries';
 
 interface DisplayCardProps {
-  tour: TourRow | ExhibitRow;
+  tour: TourRow | ExhibitWithCategoryRow;
   handleClose: () => void;
   handleClick?: () => void;
 }
@@ -60,12 +59,12 @@ function DisplayPreviewCard({
         }
         displayName = tour.name;
       } else {
-        // Handle as an ExhibitRow
-        const imageObj = await fetchExhibitImage(tour.id);
-        if (imageObj) {
-          imageUrl = imageObj.image;
-        }
-        displayName = tour.title;
+        // Handle as an ExhibitWithCategoryRow
+        // const imageObj = await fetchExhibitImage(tour.id);
+        // if (imageObj) {
+        imageUrl = tour.image;
+        // }
+        displayName = tour.category;
       }
 
       // Set state variables
@@ -149,4 +148,4 @@ function DisplayPreviewCard({
   );
 }
 
-export default DisplayPreviewCard;
+export default DisplayPreviewCard;

src/components/userComponents/SiteMap/SiteMap.tsx

@@ -4,13 +4,10 @@ import L, { LatLngExpression } from 'leaflet';
 import React, { useEffect, useState } from 'react';
 import { LayersControl, MapContainer, TileLayer, Marker } from 'react-leaflet';
 import { fetchAllSpotlights } from '../../../supabase/tours/queries';
-import { ExhibitRow, TourRow } from '../../../types/types';
+import { ExhibitWithCategoryRow, TourRow } from '../../../types/types';
 import Control from './Control';
 import DisplayPreviewCard from './DisplayPreviewCard';
-import {
-  fetchExhibit,
-  fetchAllExhibits,
-} from '../../../supabase/exhibits/queries';
+import { fetchAllExhibits } from '../../../supabase/exhibits/queries';
 import { getCategoryColor1 } from '../../../supabase/category/queries';
 import RecenterMap from './MapInteractionHandler';
 
@@ -88,12 +85,12 @@ interface SiteMapProps {
  */
 function SiteMap({ mode }: SiteMapProps) {
   const [spotlightTours, setSpotlightTours] = useState<
-    TourRow[] | ExhibitRow[] | null
+    TourRow[] | ExhibitWithCategoryRow[] | null
   >(null);
   const [colorsMap, setColorsMap] = useState<{ [key: string]: string }>({});
-  const [selectedTour, setSelectedTour] = useState<TourRow | ExhibitRow | null>(
-    null,
-  );
+  const [selectedTour, setSelectedTour] = useState<
+    TourRow | ExhibitWithCategoryRow | null
+  >(null);
   const [mapCenter, setMapCenter] = useState<LatLngExpression>(center);
   const [selectedMarker, setSelectedMarker] = useState<number | null>(null);
   const [resetCenter, setResetCenter] = useState(center); // New state to trigger recentering
@@ -148,7 +145,7 @@ function SiteMap({ mode }: SiteMapProps) {
   }, [selectedTour]);
 
   const handleMarkerSelect = (
-    tour: TourRow | ExhibitRow,
+    tour: TourRow | ExhibitWithCategoryRow,
     markerIndex: number,
   ) => {
     setSelectedTour(tour);

src/supabase/category/queries.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { DisplayRow } from '../../types/types';
+import { CategoryRow } from '../../types/types';
 import supabase from '../client';
 
 // eslint-disable-next-line jsdoc/require-returns
@@ -22,6 +22,8 @@ import supabase from '../client';
 // Assume this function is in `supabase/category/queries.js`
 /**
  *
+ * @param category which category to get color from
+ * @returns color of category
  */
 // eslint-disable-next-line import/prefer-default-export
 export async function getCategoryColor1(category: string) {
@@ -46,3 +48,15 @@ export async function getCategoryColor1(category: string) {
     return null;
   }
 }
+
+/**
+ * Fetches all categories from the database.
+ * @returns A promise that resolves to an array of ExhibitRow objects.
+ */
+export async function fetchAllCategories(): Promise<CategoryRow[]> {
+  const { data, error } = await supabase.from('categories').select('*');
+  if (error) {
+    throw new Error(error.message);
+  }
+  return data;
+}

src/supabase/exhibits/queries.tsx

@@ -7,8 +7,8 @@ import { ExhibitRow } from '../../types/types';
  * Fetches all tours from the database.
  * @returns A promise that resolves to an array of ExhibitRow objects.
  */
-export async function fetchAllExhibits(): Promise<ExhibitRow[]> {
-  const { data, error } = await supabase.from('exhibits').select('*');
+export async function fetchAllExhibits() {
+  const { data, error } = await supabase.rpc('get_exhibits');
   if (error) {
     throw new Error(error.message);
   }
@@ -40,7 +40,7 @@ export async function fetchExhibitImage(
   exhibitId: string,
 ): Promise<{ image: string }> {
   const { data, error } = await supabase
-    .from('exhibits')
+    .from('categories')
     .select('image')
     .eq('id', exhibitId)
     .single();
@@ -121,4 +121,4 @@ export async function deleteExhibit(
     throw new Error(error.message);
   }
   return data;
-}
+}