Merge branch 'main' into justin-exhibit-redo

calblueprint · May 22, 2024 · eb196c4 · eb196c4
2 parents f6cdcf9 + 320e6c5
commit eb196c4
Show file tree

Hide file tree

Showing 15 changed files with 109 additions and 370 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/hoursAdmissionPage/page.tsx b/src/app/hoursAdmissionPage/page.tsx
@@ -64,7 +64,7 @@ export default function HoursAdmissionPage() {
           </div>
         </div>
         <p className="text-night font-normal font-lato pl-[1.31rem]">
-          If you've found a wild animal that appears to be sick, injured, or
+          If you&apos;ve found a wild animal that appears to be sick, injured, or
           orphaned, safely contain it and either bring it to our nearest shelter
           or contact us for guidance.
         </p>

diff --git a/src/app/newsFeedPage/page.tsx b/src/app/newsFeedPage/page.tsx
@@ -1,16 +1,20 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
 import BackButton from '../../components/userComponents/BackButton/page';
 import NavBar from '../../components/userComponents/navBar/navBar';
 import { NewsRow } from '../../types/types';
 import { fetchAllNewsByDate } from '../../supabase/news/queries';
 import NewsDisplay from '../../components/userComponents/NewsDisplay/NewsDisplay';
+import { useWebDeviceDetection } from '../../context/WindowWidthContext/WindowWidthContext';
 
 /**
- * @returns news feed page
+ * @description queries from the news table in supabase and fetches all the news rows to display
+ * @returns news feed page by querying from the news table in supabase
  */
 export default function App() {
+  const isWebDevice = useWebDeviceDetection();
   const [news, setNews] = useState<NewsRow[]>([]);
   useEffect(() => {
     // Get news
@@ -20,25 +24,62 @@ export default function App() {
     };
     getNews();
   }, [news]);
-
   return (
-    <div className="bg-ivory h-screen">
+    <div className="bg-ivory h-full">
       <NavBar />
-      <div className="p-4">
-        <BackButton />
-        <h1 className="text-night text-3xl font-bold mt-2 -ml-[1.8px]">News</h1>
-        <ul>
-          {news.map(article => (
-            <NewsDisplay
-              key={article.updated_at}
-              id={article.id}
-              contentLink={article.content_link}
-              createdAt={article.created_at}
-              title={article.title}
-            />
-          ))}
-        </ul>
-      </div>
+      {!isWebDevice && (
+        <div>
+          <div className="p-4">
+            <BackButton />
+            <h1 className="text-night text-3xl font-bold mt-2 -ml-[.113rem]">
+              News
+            </h1>
+            <ul>
+              {news.map(article => (
+                <NewsDisplay
+                  key={article.updated_at}
+                  id={article.id}
+                  contentLink={article.content_link}
+                  createdAt={article.created_at}
+                  title={article.title}
+                />
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+      {isWebDevice && (
+        <div>
+          <div className="flex">
+            <div className="w-[50%] text-night px-[10rem] pt-[7.5rem] bg-mint-cream flex flex-col items-center">
+              <div>
+                <p className="text-night">
+                  {' '}
+                  <Link href="/" className="text-scary-forest hover:underline">
+                    {' '}
+                    Home{' '}
+                  </Link>{' '}
+                  / News{' '}
+                </p>
+                <h1 className="text-night text-4xl font-bold pt-6">News</h1>
+              </div>
+            </div>
+            <div className="w-[50%]  px-[10rem] pt-[7.5rem] flex justify-center">
+              <ul className="pt-[4rem] m-auto">
+                {news.map(article => (
+                  <NewsDisplay
+                    key={article.updated_at}
+                    id={article.id}
+                    contentLink={article.content_link}
+                    createdAt={article.created_at}
+                    title={article.title}
+                  />
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/app/spotlightPage/page.tsx b/src/app/spotlightPage/page.tsx
@@ -82,25 +82,25 @@ function App() {
                       className="w-[24.375rem] h-[13.375rem] rounded-lg"
                       key={
                         media.find(
-                          m =>
-                            m.id ===
-                            allTourMedia.find(m => m.tour_id === spotlight.id)
+                          mediaElement =>
+                            mediaElement.id ===
+                            allTourMedia.find(allTourMediaElement => allTourMediaElement.tour_id === spotlight.id)
                               ?.media_id,
                         )?.id
                       }
                       src={
                         media.find(
-                          m =>
-                            m.id ===
-                            allTourMedia.find(m => m.tour_id === spotlight.id)
+                          mediaElement =>
+                            mediaElement.id ===
+                            allTourMedia.find(allTourMediaElement => allTourMediaElement.tour_id === spotlight.id)
                               ?.media_id,
                         )?.url ?? ''
                       }
                       alt={
                         media.find(
-                          m =>
-                            m.id ===
-                            allTourMedia.find(m => m.tour_id === spotlight.id)
+                          mediaElement =>
+                            mediaElement.id ===
+                            allTourMedia.find(allTourMediaElement => allTourMediaElement.tour_id === spotlight.id)
                               ?.media_id,
                         )?.text ?? ''
                       }

diff --git a/src/components/userComponents/ExhibitDisplay/ExhibitDisplay.tsx b/src/components/userComponents/ExhibitDisplay/ExhibitDisplay.tsx
@@ -3,17 +3,18 @@ import Image from 'next/image';
 import styles from './ExhibitDisplay.module.css';
 
 /**
- *
- * @param root0
- * @param root0.name
- * @param root0.location
- * @param root0.information
- * @param root0.description
- * @param root0.relatednews
- * @param root0.topimage
- * @param root0.media
- * @param root0.bottomimage
- * @param root0.moretext
+ * ExhibitDisplay component
+ * @param  props - props for the ExhibitDisplay component
+ * @param  props.name - name of the exhibit
+ * @param  props.location - location of the exhibit
+ * @param  props.information - information about the exhibit
+ * @param  props.description - description of the exhibit
+ * @param  props.relatednews - related news of the exhibit
+ * @param  props.topimage - top image of the exhibit
+ * @param  props.media - media of the exhibit
+ * @param  props.bottomimage - bottom image of the exhibit
+ * @param  props.moretext - more text of the exhibit
+ * @returns JSX.Element
  */
 export default function ExhibitDisplay({
   name,

diff --git a/src/components/userComponents/ExhibitPreview/ExhibitPreview 2.tsx b/src/components/userComponents/ExhibitPreview/ExhibitPreview 2.tsx