From fce682329dca11d6198095c2894fd9789e94c697 Mon Sep 17 00:00:00 2001
From: jxmoose <justin.xue7@gmail.com>
Date: Tue, 9 Apr 2024 23:36:27 -0700
Subject: [PATCH] added linking from map

---
 src/app/exhibitsPage/page.tsx                 |  22 +++-
 .../userComponents/Exhibit/Exhibit.tsx        |   2 +-
 .../SiteMap/DisplayPreviewCard.tsx            | 122 +++++++++---------
 src/supabase/exhibits/queries.tsx             | 107 ++++-----------
 4 files changed, 108 insertions(+), 145 deletions(-)

diff --git a/src/app/exhibitsPage/page.tsx b/src/app/exhibitsPage/page.tsx
index 43c0a5c7..a8625104 100644
--- a/src/app/exhibitsPage/page.tsx
+++ b/src/app/exhibitsPage/page.tsx
@@ -1,3 +1,4 @@
+
 'use client';
 
 import React, { useEffect, useState } from 'react';
@@ -11,10 +12,9 @@ import Exhibit from '../../components/userComponents/Exhibit/Exhibit';
 /**
  * @param evt on click of button
  */
-function goBack(evt: React.SyntheticEvent) {
+function goBack(evt : React.SyntheticEvent) {
   // ignore the native anchor action
   evt.preventDefault();
-
   window.history.back();
 }
 
@@ -42,7 +42,21 @@ function App() {
       setExhibits(fetchedExhibits);
     };
     getExhibits();
+    // Detect the hash in URL and scroll to the element with the corresponding ID
   }, [exhibits]);
+
+  useEffect(() => {
+    const { hash } = window.location;
+    if (hash) {
+      setTimeout(() => {
+        const element = document.querySelector(hash);
+        const yOffset = -50;
+        const y =
+          element.getBoundingClientRect().top + window.scrollY + yOffset;
+        window.scrollTo({ top: y, behavior: 'smooth' });
+      }, 1000);
+    }
+  }, []);
   return (
     <div className="bg-ivory">
       <NavBar />
@@ -70,7 +84,7 @@ function App() {
           {exhibits.map(exhibit => (
             <Exhibit
               title={exhibit.title}
-              description={exhibit.description}
+              description={exhibit.description || ''}
               image={exhibit.image || ''}
               key={exhibit.id}
               id={exhibit.id}
@@ -82,4 +96,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/userComponents/Exhibit/Exhibit.tsx b/src/components/userComponents/Exhibit/Exhibit.tsx
index 59003abe..630d5981 100644
--- a/src/components/userComponents/Exhibit/Exhibit.tsx
+++ b/src/components/userComponents/Exhibit/Exhibit.tsx
@@ -56,7 +56,7 @@ export default function Exhibit({
   id: string;
 }) {
   return (
-    <li key={id}>
+    <li key={id} id={`a${id}`}>
       <div className="w-[100%] px-4 pt-6 pb-7 bg-mint-cream rounded flex-col justify-start items-start gap-2.5 inline-flex mt-6">
         <div className="flex-col justify-start items-start gap-5 flex">
           <div className="justify-start items-center gap-2 inline-flex">
diff --git a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
index 19353bab..b6e5fb32 100644
--- a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
@@ -48,101 +48,105 @@ function DisplayPreviewCard({
   useEffect(() => {
     const fetchDetails = async () => {
       setLoading(true);
-  
-      let imageUrl = ''; 
-      let displayName = ''; 
-  
-      if ('name' in tour) { 
+
+      let imageUrl = '';
+      let displayName = '';
+
+      if ('name' in tour) {
         // Fetch images for a tour
         const images = await fetchImagesForTour(tour.id);
         if (images && images.length > 0) {
-          imageUrl = images[0].url; 
+          imageUrl = images[0].url;
         }
-        displayName = tour.name; 
+        displayName = tour.name;
       } else {
         // Handle as an ExhibitRow
-        const imageObj = await fetchExhibitImage(tour.id); 
+        const imageObj = await fetchExhibitImage(tour.id);
         if (imageObj) {
-          imageUrl = imageObj.image; 
+          imageUrl = imageObj.image;
         }
-        displayName = tour.title; 
+        displayName = tour.title;
       }
-  
+
       // Set state variables
       setPreviewImage(imageUrl);
       setname1(displayName);
       setLoading(false);
     };
-  
+
     fetchDetails();
   }, [tour]);
-  
 
   /** route this to spotlights */
 
   return (
-      <div className="flex flex-col items-center justify-center w-[25rem] h-[8.25rem] max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto p-4 pb-[2.87rem] pr-[1.19rem] pl-[1.19rem] rounded-md">
-        <div
-          className="flex flex-row items-center rounded-md overflow-hidden bg-ivory cursor-pointer w-full sm:w-4/4 md:w-5/5 lg:w-2/2 xl:w-5/5 flex-shrink-0 shadow-xl" 
-          aria-hidden="true"
-        >
-          {!loading && 
+    <div className="flex flex-col items-center justify-center w-[25rem] h-[8.25rem] max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto p-4 pb-[2.87rem] pr-[1.19rem] pl-[1.19rem] rounded-md">
+      <div
+        className="flex flex-row items-center rounded-md overflow-hidden bg-ivory cursor-pointer w-full sm:w-4/4 md:w-5/5 lg:w-2/2 xl:w-5/5 flex-shrink-0 shadow-xl"
+        aria-hidden="true"
+      >
+        {!loading && (
           <div className="relative w-[7.8125rem] z-10 h-[8.25rem] shrink-0 rounded-tl-md rounded-tr-none rounded-br-none rounded-bl-md">
-           
             <Image
-            
               src={previewImage}
-              alt='placeholder'
+              alt="placeholder"
               layout="fill"
               objectFit="cover"
-            /> 
-            </div>
-          }
-          <div
-            className="justify-items-center align-middle z-20 overflow-hidden w-full h-full"
-            onClick={handleClick}
-            onKeyDown={e => {
-              if (handleClick && e.key === 'Enter') {
-                handleClick();
-              }
-            }}
-            role="button"
-            tabIndex={0}
-          >
-            <div className=""> 
-            <div className="flex justify-end items-center pt-2 pr-2" onClick={(e) => {
-                  e.stopPropagation(); // This prevents the click from propagating to the parent link
-                  handleClose(); // Then, your handleClose function is called
-                }}>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
-                    <path d="M10.0523 11.0274L3.35083 4.32596M10.0524 4.32596L3.35083 11.0275" stroke="#272929" strokeWidth="1.11692" strokeLinecap="round" strokeLinejoin="round"/>
-                  </svg>
-                </div>
-              <Link href={`/spotlightPage/${id}`}>
-              <h3
-                className="relative truncate text-asparagus pr-[0.31rem] pl-[0.75rem] pt-[0rem] uppercase font-light text-xs leading-normal"
-  
+            />
+          </div>
+        )}
+        <div
+          className="justify-items-center align-middle z-20 overflow-hidden w-full h-full"
+          onClick={handleClick}
+          onKeyDown={e => {
+            if (handleClick && e.key === 'Enter') {
+              handleClick();
+            }
+          }}
+          role="button"
+          tabIndex={0}
+        >
+          <div className="">
+            <div
+              className="flex justify-end items-center pt-2 pr-2"
+              onClick={e => {
+                e.stopPropagation(); // This prevents the click from propagating to the parent link
+                handleClose(); // Then, your handleClose function is called
+              }}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="15"
+                viewBox="0 0 14 15"
+                fill="none"
               >
+                <path
+                  d="M10.0523 11.0274L3.35083 4.32596M10.0524 4.32596L3.35083 11.0275"
+                  stroke="#272929"
+                  strokeWidth="1.11692"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </div>
+            <Link href={`/exhibitsPage/#a${id}`}>
+              <h3 className="relative truncate text-asparagus pr-[0.31rem] pl-[0.75rem] pt-[0rem] uppercase font-light text-xs leading-normal">
                 {category}
               </h3>
-              <h3
-                className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0.30rem] pb-[0rem] text-base leading-normal"
-
-              >
+              <h3 className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0.30rem] pb-[0rem] text-base leading-normal">
                 {name1}
               </h3>
-      
+
               <h4 className="relative font-lato h-[2rem] pr-[0.31rem] pt-[0rem] pl-[0.75rem] pb-[2.4rem] text-shadow line-clamp-2 text-sm">
                 {description}
               </h4>
-              </Link>
-            </div>
+            </Link>
           </div>
         </div>
       </div>
-
-
+    </div>
   );
 }
 
-export default DisplayPreviewCard;
+export default DisplayPreviewCard;
\ No newline at end of file
diff --git a/src/supabase/exhibits/queries.tsx b/src/supabase/exhibits/queries.tsx
index 90e6b8b5..93bdea29 100644
--- a/src/supabase/exhibits/queries.tsx
+++ b/src/supabase/exhibits/queries.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-<<<<<<< HEAD
 import supabase from '../client';
 import { ExhibitRow } from '../../types/types';
 
@@ -12,25 +11,10 @@ export async function fetchAllExhibits(): Promise<ExhibitRow[]> {
   const { data, error } = await supabase.from('exhibits').select('*');
   if (error) {
     throw new Error(error.message);
-=======
-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('*');
-  if (error) {
-    throw new Error(`An error occurred trying to read exhibits: ${error}`);
->>>>>>> b191485 (added database and page)
   }
   return data;
 }
 
-<<<<<<< HEAD
-
-
 /**
  * Fetches a single exhibit from the database.
  * @param exhibitId - The id of the exhibit to fetch.
@@ -52,21 +36,25 @@ export async function fetchExhibit(exhibitId: string): Promise<ExhibitRow> {
  * @param exhibitId - The id of the exhibit to fetch.
  * @returns A promise that resolves to a ExhibitRow object.
  */
-export async function fetchExhibitImage(exhibitId: string): Promise<{ image: string }> {
-    const { data, error } = await supabase
-        .from('exhibits')
-        .select('image')
-        .eq('id', exhibitId)
-        .single();
+export async function fetchExhibitImage(
+  exhibitId: string,
+): Promise<{ image: string }> {
+  const { data, error } = await supabase
+    .from('exhibits')
+    .select('image')
+    .eq('id', exhibitId)
+    .single();
 
-    if (error) {
-        throw new Error(error.message);
-    }
+  if (error) {
+    throw new Error(error.message);
+  }
 
-    // Provide a default image URL if the image is null
-    const imageUrl = data?.image ?? "https://buffer.com/cdn-cgi/image/w=1000,fit=contain,q=90,f=auto/library/content/images/size/w1200/2023/10/free-images.jpg"; // Adjust the default image path as needed
+  // Provide a default image URL if the image is null
+  const imageUrl =
+    data?.image ??
+    'https://buffer.com/cdn-cgi/image/w=1000,fit=contain,q=90,f=auto/library/content/images/size/w1200/2023/10/free-images.jpg'; // Adjust the default image path as needed
 
-    return { image: imageUrl };
+  return { image: imageUrl };
 }
 
 /**
@@ -74,7 +62,9 @@ export async function fetchExhibitImage(exhibitId: string): Promise<{ image: str
  * @param exhibitData - The exhibit to insert.
  * @returns A promise that resolves to a ExhibitRow object.
  */
-export async function insertExhibit(exhibitData: ExhibitRow): Promise<ExhibitRow | null> {
+export async function insertExhibit(
+  exhibitData: ExhibitRow,
+): Promise<ExhibitRow | null> {
   const { data, error } = await supabase.from('exhibits').insert(exhibitData);
   if (error) {
     throw new Error(error.message);
@@ -88,7 +78,7 @@ export async function insertExhibit(exhibitData: ExhibitRow): Promise<ExhibitRow
  * @returns A promise that resolves to a ExhibitRow object.
  */
 export async function updateExhibit(
-    newExhibitData: ExhibitRow,
+  newExhibitData: ExhibitRow,
 ): Promise<ExhibitRow | null> {
   const { data, error } = await supabase
     .from('exhibits')
@@ -105,54 +95,9 @@ export async function updateExhibit(
  * @param exhibitData - The exhibit to upsert.
  * @returns A promise that resolves to a ExhibitRow object.
  */
-export async function upsertTour(exhibitData: ExhibitRow): Promise<ExhibitRow | null> {
-  const { data, error } = await supabase.from('exhibits').upsert(exhibitData);
-  if (error) {
-    throw new Error(error.message);
-  }
-  return data;
-}
-
-/**
- * Deletes a single exhibit from the database.
- * @param exhibitId - The id of the exhibit to delete.
- * @returns A promise that resolves to a ExhibitRow object.
- */
-export async function deleteExhibit(exhibitId: string): Promise<ExhibitRow | null> {
-  const { data, error } = await supabase
-    .from('exhibits')
-    .delete()
-    .eq('id', exhibitId);
-  if (error) {
-    throw new Error(error.message);
-  }
-  return data;
-}
-=======
-/**
- * Updates a single exhibit in the database.
- * @param newExhibitData - The updated exhibit data.
- * @returns A promise that resolves to a ExhibitRow object.
- */
-export async function updateExhibit(
-    newExhibitData: ExhibitRow,
+export async function upsertTour(
+  exhibitData: ExhibitRow,
 ): Promise<ExhibitRow | null> {
-  const { data, error } = await supabase
-    .from('exhibits')
-    .update(newExhibitData)
-    .eq('id', newExhibitData.id);
-  if (error) {
-    throw new Error(error.message);
-  }
-  return data;
-}
-
-/**
- * Upserts a single exhibit into the database.
- * @param exhibitData - The exhibit to upsert.
- * @returns A promise that resolves to a ExhibitRow object.
- */
-export async function upsertTour(exhibitData: ExhibitRow): Promise<ExhibitRow | null> {
   const { data, error } = await supabase.from('exhibits').upsert(exhibitData);
   if (error) {
     throw new Error(error.message);
@@ -165,7 +110,9 @@ export async function upsertTour(exhibitData: ExhibitRow): Promise<ExhibitRow |
  * @param exhibitId - The id of the exhibit to delete.
  * @returns A promise that resolves to a ExhibitRow object.
  */
-export async function deleteExhibit(exhibitId: string): Promise<ExhibitRow | null> {
+export async function deleteExhibit(
+  exhibitId: string,
+): Promise<ExhibitRow | null> {
   const { data, error } = await supabase
     .from('exhibits')
     .delete()
@@ -174,6 +121,4 @@ export async function deleteExhibit(exhibitId: string): Promise<ExhibitRow | nul
     throw new Error(error.message);
   }
   return data;
-}
-
->>>>>>> b191485 (added database and page)
+}
\ No newline at end of file