include the PhotoGallery page

package.json

@@ -18,7 +18,7 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/material": "^6.1.2",
     "aos": "^2.3.4",
-    "axios": "^1.7.7",
+    "axios": "^1.7.8",
     "classnames": "^2.5.1",
     "framer-motion": "^11.11.1",
     "lottie-react": "^2.4.0",
@@ -75,4 +75,4 @@
     "node": "20.x"
   },
   "packageManager": "[email protected]"
-}
+}

src/components/PhotoGallery/PhotoGallery.tsx

@@ -1,66 +1,39 @@
-import axios from "axios";
-import { useCallback, useEffect, useState } from "react";
 import { PicturesContainer, PicturesHeader } from "./PhotoGallery.styles";
 import { LazyLoadImage } from "react-lazy-load-image-component";
-import Loading from "../Loading";
+// import Loading from "../Loading";
 import HoverButton from "../HoverButton/HoverButton";
 import { ButtonMode } from "../HoverButton/HoverButton.styles";
 import * as S from "../../pageLayouts/GalleryPage.styles";
 
-const PhotoGallery = () => {
-  const [photosURL, setPhotosURL] = useState<string[]>([]); // photos will be an array of objects
-  //memoize a getAlbum to prevent unnecessary re-renders.
-  const getAlbum = useCallback(async () => {
-    const galleryPicsURL = process.env.REACT_APP_PIC_API_URL;
-    try {
-      if (!galleryPicsURL) {
-        throw new Error("URL is not defined");
-      }
-      const { data } = await axios.get<string[]>(`${galleryPicsURL}/gallery`);
-
-      if (!data.length) {
-        throw new Error("No images found");
-      }
-      setPhotosURL(data);
-    } catch (error) {
-      console.error(
-        `Error fetching images from the server on  ${galleryPicsURL}`,
-        error,
-      );
-    }
-  }, []);
-
-  useEffect(() => {
-    getAlbum();
-  }, [getAlbum]);
-
+interface PhotoProps {
+  picUrls: string[];
+}
+const PhotoGallery = ({ picUrls }: PhotoProps) => {
   return (
     <>
-      {photosURL.length === 0 ? (
-        <Loading />
-      ) : (
-        <PicturesHeader
-          animate={{ opacity: 1 }}
-          initial={{ opacity: 0 }}
-          transition={{ delay: 0.5 }}
-        >
-          <S.GalleryPageHeader>
-            <p>
-              Capturing the Memories: A Look Inside Tech Start! <br />{" "}
-              Interested in joining us?
-            </p>
-            <div>
-              <HoverButton
-                glowOnHover={true}
-                link="/apply"
-                linkIsInternal={true}
-                mode={ButtonMode.GRADIENT}
-                text={"Apply Now"}
-              />
-            </div>
-          </S.GalleryPageHeader>
+      <PicturesHeader
+        animate={{ opacity: 1 }}
+        initial={{ opacity: 0 }}
+        transition={{ delay: 0.5 }}
+      >
+        <S.GalleryPageHeader>
+          <p>
+            Capturing the Memories: A Look Inside Tech Start! <br /> Interested
+            in joining us?
+          </p>
+          <div>
+            <HoverButton
+              glowOnHover={true}
+              link="/apply"
+              linkIsInternal={true}
+              mode={ButtonMode.GRADIENT}
+              text={"Apply Now"}
+            />
+          </div>
+        </S.GalleryPageHeader>
+        {picUrls.length > 0 && (
           <PicturesContainer>
-            {photosURL.map((photo, index) => (
+            {picUrls.map((photo: string, index: number) => (
               <LazyLoadImage
                 height="auto"
                 key={index}
@@ -69,8 +42,8 @@ const PhotoGallery = () => {
               />
             ))}
           </PicturesContainer>
-        </PicturesHeader>
-      )}
+        )}
+      </PicturesHeader>
     </>
   );
 };

src/pageLayouts/GalleryPage.styles.ts

@@ -6,7 +6,7 @@ export const GalleryPage = styled.div`
   box-sizing: border-box;
   font-family: "Inter", Tahoma, sans-serif;
   line-height: 1.5;
-  height: 100%;
+  min-height: 100vh;
   padding: 0;
   background: var(--dark-background);
   white-space: normal;

src/pageLayouts/GalleryPage.tsx

@@ -4,8 +4,11 @@ import * as S from "./GalleryPage.styles";
 import dynamic from "next/dynamic";
 
 const Blobbie = dynamic(() => import("../components/Blobbie"), { ssr: false });
+interface PhotoProps {
+  picUrls: string[];
+}
 
-const GalleryPage = () => {
+const GalleryPage = ({ picUrls }: PhotoProps) => {
   return (
     <S.GalleryPage id="galleryPageTop">
       <Blobbie
@@ -30,7 +33,7 @@ const GalleryPage = () => {
         </motion.h1>
       </S.GalleryPageHeader>
 
-      <PhotoGallery />
+      <PhotoGallery picUrls={picUrls} />
     </S.GalleryPage>
   );
 };

src/pages/api/gallery.js

@@ -0,0 +1,21 @@
+import axios from "axios";
+
+export async function getData() {
+  const albumUrl = process.env.GOOGLE_PHOTOS_URL; // Use environment variable
+  const response = await axios.get(albumUrl, { responseType: "text" });
+  const photoLinks = extractPhotos(response.data);
+  return photoLinks;
+}
+
+
+function extractPhotos(content) {
+  const regex = /(https:\/\/lh3\.googleusercontent\.com\/pw\/[^"']+)["']/g;
+  const links = new Set();
+  let match;
+  while ((match = regex.exec(content))) {
+    if (!match[1].includes("=w") && !match[1].includes("=s")) {
+      links.add(match[1]);
+    }
+  }
+  return Array.from(links);
+}

src/pages/gallery/index.tsx

@@ -0,0 +1,22 @@
+import GalleryPage from "@/pageLayouts/GalleryPage";
+import { getData } from "../api/gallery";
+
+export async function getServerSideProps({ req, res}) {
+  try {
+    const data = await getData();
+    res.setHeader(
+      "Cache-Control",
+      "public, s-maxage=20, stale-while-revalidate=120",
+    );
+    return { props: { picUrls: data || [] } };
+  } catch (error) {
+    console.error("Error fetching photos:", error);
+    return { props: { picUrls: [] } }; // Provide an empty array as fallback
+  }
+}
+interface PhotoProps {
+  picUrls: string[];
+}
+export default function Gallery({ picUrls }: PhotoProps) {
+  return <GalleryPage picUrls={picUrls} />;
+}

yarn.lock

@@ -1474,14 +1474,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:^1.7.7":
-  version: 1.7.7
-  resolution: "axios@npm:1.7.7"
+"axios@npm:^1.7.8":
+  version: 1.7.8
+  resolution: "axios@npm:1.7.8"
   dependencies:
     follow-redirects: "npm:^1.15.6"
     form-data: "npm:^4.0.0"
     proxy-from-env: "npm:^1.1.0"
-  checksum: 10c0/4499efc89e86b0b49ffddc018798de05fab26e3bf57913818266be73279a6418c3ce8f9e934c7d2d707ab8c095e837fc6c90608fb7715b94d357720b5f568af7
+  checksum: 10c0/23ae2d0105aea9170c34ac9b6f30d9b2ab2fa8b1370205d2f7ce98b9f9510ab420148c13359ee837ea5a4bf2fb028ff225bd2fc92052fb0c478c6b4a836e2d5f
   languageName: node
   linkType: hard
 
@@ -5162,7 +5162,7 @@ __metadata:
     "@typescript-eslint/parser": "npm:^7.4.0"
     aos: "npm:^2.3.4"
     autoprefixer: "npm:^10.4.20"
-    axios: "npm:^1.7.7"
+    axios: "npm:^1.7.8"
     classnames: "npm:^2.5.1"
     eslint: "npm:8.57.0"
     eslint-config-next: "npm:14.2.14"