fixed eslint and prettier things for all pages pertaining to site maps

src/app/exhibits/page.tsx

@@ -39,7 +39,7 @@ function App() {
           const y =
             element.getBoundingClientRect().top + window.scrollY + yOffset;
           // check on this offset later
-          window.scrollTo({ top: y, behavior: 'instant' });
+          window.scrollTo({ top: y, behavior: 'auto' });
         }
       }, 1000);
     }
@@ -80,7 +80,6 @@ function App() {
                   image={exhibit.image || ''}
                   key={exhibit.id}
                   id={exhibit.id}
-                  web={false}
                 />
               ))}
             </ul>
@@ -128,7 +127,6 @@ function App() {
                   image={exhibit.image || ''}
                   key={exhibit.id}
                   id={exhibit.id}
-                  web
                 />
               ))}
             </div>

src/components/userComponents/SiteMap/Control.tsx

@@ -1,11 +1,9 @@
-/* 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;
+  position: 'bottomleft' | 'bottomright' | 'topleft' | 'topright';
   children?: React.ReactNode;
   container?: React.HTMLAttributes<HTMLDivElement>;
   prepend?: boolean;
@@ -18,14 +16,22 @@ const POSITION_CLASSES = {
   topright: 'leaflet-top leaflet-right',
 };
 
+/**
+ * Custom control component for Leaflet maps using React.
+ * @param props - The properties object.
+ * @param props.position - The position of the control on the map.
+ * @param [props.children] - The child elements to be rendered inside the control.
+ * @param [props.container] - Additional HTML attributes for the control container.
+ * @param [props.prepend] - Whether to prepend the control to the container.
+ * @returns The custom control component.
+ */
 function Control({
   position,
   children,
   container,
   prepend,
 }: ControlProps): JSX.Element {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [portalRoot, setPortalRoot] = useState<any>(
+  const [portalRoot, setPortalRoot] = useState<HTMLElement>(
     document.createElement('div'),
   );
   const positionClass =
@@ -35,8 +41,8 @@ function Control({
 
   /**
    * 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
+   * ensure the click/scroll propagation is removed.
+   * This way click/scroll events do not bubble down to the map.
    */
   useEffect(() => {
     if (controlContainerRef.current !== null) {
@@ -46,21 +52,23 @@ function Control({
   }, [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
+   * 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]);
+    const targetDiv = mapContainer.getElementsByClassName(positionClass)[0];
+    if (targetDiv) {
+      setPortalRoot(targetDiv as HTMLElement);
+    }
   }, [positionClass, map]);
 
   /**
    * Whenever the portal root is complete,
-   * append or prepend the control container to the portal root
+   * append or prepend the control container to the portal root.
    */
   useEffect(() => {
-    if (portalRoot !== null) {
+    if (portalRoot && controlContainerRef.current) {
       if (prepend !== undefined && prepend === true) {
         portalRoot.prepend(controlContainerRef.current);
       } else {
@@ -70,8 +78,9 @@ function Control({
   }, [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
+   * Concatenate the props.container className to the class of the control div,
+   * per Leaflet's built-in styles.
+   * Will need to change styling of the component itself based on screen breakpoints.
    */
   const className = `${container?.className?.concat(' ') || ''}leaflet-control`;
 

src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { LatLngExpression } from 'leaflet';
-import { useMapEvents } from 'react-leaflet';
+// import { LatLngExpression } from 'leaflet';
+// import { useMapEvents } from 'react-leaflet';
 import Link from 'next/link';
 import Image from 'next/image';
 import { ExhibitWithCategoryRow } from '../../../types/types';
@@ -14,18 +14,19 @@ interface ExhibitCardProps {
 
 /**
  * Props for ExhibitPreviewCard
- * @typedef {Object} ExhibitCardProps
- * @property {ExhibitWithCategoryRow} tour - The exhibit data.
- * @property {Function} handleClose - Function to close the preview card.
- * @property {Function} [handleClick] - Optional click handler for additional actions.
+ * tour - The exhibit data.
+ * handleClose - Function to close the preview card.
+ * [handleClick] - Optional click handler for additional actions.
  */
 
 /**
  * A component that renders a preview card for an exhibit within a Leaflet map container.
  * Includes image and details, with clickable areas for further interaction.
- *
- * @param {ExhibitCardProps} props - The props for the component.
- * @returns {JSX.Element} The rendered JSX for the exhibit preview card.
+ * @param props - The props for the component.
+ * @param props.tour - props for tour
+ * @param props.handleClick - Will handle when user clicks on the exhibit card
+ * @param props.handleClose - This will close the preview card
+ * @returns - The rendered JSX for the exhibit preview card.
  */
 function ExhibitPreviewCard({
   tour,
@@ -36,7 +37,7 @@ function ExhibitPreviewCard({
   const [previewImage, setPreviewImage] = useState<string>(tour.image || '');
   const [name1, setname1] = useState<string>(tour.category || '');
 
-  const { id, description, coordinates, category } = tour;
+  const { id, description } = tour;
   const [width, setWidth] = useState('20.06rem');
   const [height, setHeight] = useState('7.687rem');
   const isWebDevice = useWebDeviceDetection();
@@ -57,16 +58,6 @@ function ExhibitPreviewCard({
     return () => window.removeEventListener('resize', handleResize);
   }, [handleResize]);
 
-  // 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 fetchDetails = async () => {
@@ -128,6 +119,15 @@ function ExhibitPreviewCard({
                 e.stopPropagation();
                 handleClose();
               }}
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.stopPropagation();
+                  handleClose();
+                }
+              }}
+              role="button"
+              tabIndex={0}
+              aria-label="Close preview"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"

src/components/userComponents/SiteMap/MapInteractionHandler.tsx

@@ -1,11 +1,11 @@
 import { useMap } from 'react-leaflet';
-import React, { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { LatLngExpression } from 'leaflet';
 /**
  * A React component that recenters the map to a given coordinate. This component does not render any visual content.
- * @param {Object} props - Component props.
- * @param {L.LatLng} props.center - The center to which the map should fly. Must include 'lat' and 'lng' properties.
- * @returns {null} Nothing is rendered by this component.
+ * @param props - Component props.
+ * @param props.center - The center to which the map should fly. Must include 'lat' and 'lng' properties.
+ * @returns Nothing is rendered by this component.
  */
 function RecenterMap({ center }: { center: LatLngExpression }) {
   const map = useMap();

src/components/userComponents/SiteMap/SiteMap.tsx

@@ -71,7 +71,6 @@ function SiteMap({ mode }: SiteMapProps) {
     /**
      * This useEffect will manage fetching Data depending on if the chosen map is tours or exhibits.
      * It will also manage the initial state of the map when no marker is chosen
-     *
      * It will fetch tours when spotlights == True
      */
     async function fetchData() {
@@ -114,6 +113,7 @@ function SiteMap({ mode }: SiteMapProps) {
           setSpotlightTours(data ?? []);
         }
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.error(`Encountered an error fetching data: ${error}`);
       } finally {
         setLoading(false);

src/components/userComponents/SiteMap/TourPreviewCard.tsx

@@ -13,11 +13,11 @@ interface TourCardProps {
 
 /**
  * Represents a preview card for a tour.
- *
- * @param {TourRow} tour - The tour data.
- * @param {Function} handleClick - The function to call when the card is clicked.
- * @param {Function} handleClose - The function to call to close the card.
- * @returns {JSX.Element} The component UI.
+ * @param tour - The tour data.
+ * @param tour.tour  - The tour data.
+ * @param tour.handleClick - The function to call when the card is clicked.
+ * @param tour.handleClose - The function to call when the close button is clicked.
+ * @returns The component UI.
  */
 function TourPreviewCard({
   tour,
@@ -102,6 +102,15 @@ function TourPreviewCard({
                 e.stopPropagation();
                 handleClose();
               }}
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.stopPropagation();
+                  handleClose();
+                }
+              }}
+              role="button"
+              tabIndex={0}
+              aria-label="Close preview"
             >
               <div className="pl-[0.75rem] w-full">
                 <text className="text-shadow bg-[#F173731A] pr-2 pl-2 rounded-md">

src/supabase/category/queries.tsx

@@ -2,46 +2,40 @@ import supabase from '../client';
 import { CategoryRow } from '../../types/types';
 // Assume this function is in `supabase/category/queries.js`
 /**
- *
- * @param category category to retreive color
- * @param id
+ * @param id - Each tour or exhibit has its unique identifier
  * @returns color for category, else null
  */
 // eslint-disable-next-line import/prefer-default-export
-export async function getCategoryColor1(id: string|number) {
-    try {
-        const { data, error } = await supabase
-            .from('categories') 
-            .select('color_hex')
-            .eq('id', id); 
+export async function getCategoryColor1(id: string | number) {
+  try {
+    const { data, error } = await supabase
+      .from('categories')
+      .select('color_hex')
+      .eq('id', id);
 
     if (error) {
-      console.error('Error fetching from Supabase:', error.message);
       return null; // Return null on query error
     }
 
-        // Check if data array is not empty
-        if (data && data.length > 0 && data[0].color_hex) {
-            // console.log(`Color for ${category}:`, data[0].color_hex);
-            return data[0].color_hex;
-        } 
-            console.log("No matching category found or color_hex is undefined");
-            return null; // Return null if no matching data found
-
-    } catch (error) {
-        console.error(`An unexpected error occurred:`, error);
-        return null; // Return null on unexpected error
+    // Check if data array is not empty
+    if (data && data.length > 0 && data[0].color_hex) {
+      return data[0].color_hex;
     }
+
+    return null; // Return null if no matching data found
+  } catch (error) {
+    return null; // Return null on unexpected error
+  }
 }
 
 /**
  * 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;
-  }
+  const { data, error } = await supabase.from('categories').select('*');
+  if (error) {
+    throw new Error(error.message);
+  }
+  return data;
+}

src/types/supabase.ts

@@ -558,4 +558,4 @@ export type Enums<
   ? Database[PublicEnumNameOrOptions['schema']]['Enums'][EnumName]
   : PublicEnumNameOrOptions extends keyof PublicSchema['Enums']
   ? PublicSchema['Enums'][PublicEnumNameOrOptions]
-  : never;
+  : never;