Calvin photo gallery (#8)

* photo-gallery

error: - error Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.

* Fix calvin's bug

* photo gallery using cloudinary

no feature to switch between qtrs yet

* implemented photo gallery!

---------

Co-authored-by: Calvin Nguyen <can005@ucsd.edu>

app/page.tsx

@@ -1,10 +1,12 @@
+"use client"
 import type { NextPage } from 'next';
 import '../src/styles/reset.scss';
 
 import About from '../src/sections/About-Projects';
 import Archive from '../src/sections/Archive';
 import NavigationBar from '@/src/components/navbar';
 import TimerHero from '@/src/sections/Timer';
+import PhotoGallery from '@/src/sections/Photo-Gallery';
 // here we will compile all the sections of the website together
 const Home: NextPage = () => {
   return (
@@ -13,9 +15,9 @@ const Home: NextPage = () => {
       <TimerHero />
       <About />
       <Archive/>
+      <PhotoGallery />
     </main>
   );
 };
 
-export default Home;
-
+export default Home;

next.config.js

@@ -1,4 +1,11 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  experimental: {
+    serverActions: true,
+  },
+  images: {
+    domains: ['res.cloudinary.com'],
+  },
+}
 
 module.exports = nextConfig

package.json

@@ -9,17 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@cloudinary/react": "^1.11.2",
+    "@cloudinary/url-gen": "^1.11.2",
     "@types/node": "20.5.1",
     "@types/react": "^18.2.21",
     "@types/react-dom": "18.2.7",
+    "cloudinary": "^1.40.0",
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.19",
     "next": "^13.4.19",
+    "next-cloudinary": "^4.22.0",
     "react": "18.2.0",
-    "react-animate-on-scroll": "^2.1.7",
     "react-dom": "18.2.0",
     "react-intersection-observer": "^9.5.2",
     "react-lazyload": "^3.2.0",
+    "react-photo-album": "^2.3.0",
     "react-responsive-carousel": "^3.2.23",
     "typescript": "5.1.6"
   },

src/components/team-card/index.tsx

@@ -36,18 +36,21 @@ const project_people = [
         name: "Jackie Piepkorn",
         role: "VP AI Events",
         discord: "devitoinaspeedo",
+        picture: "/assets/team_photos/jackie.png",
         alt: "Jackie Picture"
     },
     {
         name: "Cindy Peng",
         role: "Design TED",
         discord: "cinpen#3504",
+        picture: "/assets/team_photos/cindy.jpg",
         alt: "Cindy Picture"
     },
     {
         name: "Nicole Gong",
         role: "Design TED",
         discord: "lalanicole",
+        picture: "/assets/team_photos/nicole.jpg",
         alt: "Nicole Picture"
     },
     {
@@ -60,12 +63,14 @@ const project_people = [
         name: "Angela Hu",
         role: "Hack TED",
         discord: "angela.__.hu",
+        picture: "/assets/team_photos/angela.jpg",
         alt: "Angela Picture"
     },
     {
         name: "Khushi Patel",
         role: "Hack TED",
         discord: "dolphin2765",
+        picture: "/assets/team_photos/khushi.jpg",
         alt: "Khushi Picture"
     }
 ]
@@ -77,12 +82,17 @@ const TeamCards: React.FC = () => {
         <div className={s.container}>
             {project_people.map((person, index) => (
                 <div className={`${s.personItem}`} key={index} >
-                        <img className={s.profilePic} src={person.picture || default_pic} alt={person.alt} />
-                        <div className={s.textContainer}>
-                            <h3 className={s.personName}>{person.name}</h3>
-                            <h5>{person.role}</h5>
-                            <h5>{person.discord}</h5>
-                        </div>
+                    {/* right now I am manually cropping to 3:4 */}
+                    <img className={s.profilePic} src={person.picture || default_pic} alt={person.alt} />
+                    {/* trying to set the picture so that it automatically goes to 3:4 aspect ratio with Image, but doesnt work */}
+                    {/* <div className={s.picContainer}>
+                        <Image src={person.picture || default_pic} alt={person.alt} fill sizes='100vw' />
+                    </div> */}
+                    <div className={s.textContainer}>
+                        <h3 className={s.personName}>{person.name}</h3>
+                        <h5>{person.role}</h5>
+                        <h5>{person.discord}</h5>
+                    </div>
                 </div>
             ))}
         </div>

src/components/team-card/style.module.scss

@@ -49,4 +49,11 @@
         margin-bottom: 1rem;
         font-weight: 500;
     }
-}
+
+    .picContainer {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+}
+

src/sections/Photo-Gallery/NextJsImage.tsx

@@ -0,0 +1,22 @@
+import Image from "next/image";
+import type { RenderPhotoProps } from "react-photo-album";
+import { CldImage } from 'next-cloudinary';
+import s from "./style.module.scss"
+
+export default function NextJsImage({
+    photo,
+    imageProps: { alt, title, sizes, className, onClick },
+    wrapperStyle,
+}: RenderPhotoProps) {
+    return (
+        <div style={{ ...wrapperStyle, position: "relative" }}>
+            <CldImage
+                fill 
+                src={photo.src}
+                className={s.image}
+                placeholder={"blurDataURL" in photo ? "blur" : undefined}
+                {...{ alt, title, sizes, onClick }}
+            />
+        </div>
+    );
+}

src/sections/Photo-Gallery/index.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import s from "./style.module.scss";
+import PhotoAlbum from "react-photo-album";
+import NextJsImage from "./NextJsImage";
+
+const qtr_yr = [
+    {value:"wtr_23", text: "Winter 2023", length: 16},
+    {value: "spr_23", text: "Spring 2023", length: 24, vertical:[7, 24, 22]},
+    // {value: "sum_23", text: "Summer 2023", length: 1}
+]
+
+const breakpoints = [1080, 640, 384, 256, 128, 96, 64, 48];
+
+type Photo = {
+    src: string;
+    width: number;
+    height: number;
+    srcSet: {
+      src: string;
+      width: number;
+      height: number;
+    }[];
+  };
+
+const options = qtr_yr.map((option, index) => {
+    return <option value={option.value} key={index}>{option.text}</option>
+})
+
+const PhotoGallery: React.FC = () => {
+    const [selectedOption, setSelectedOption] = useState(qtr_yr[0].value);
+
+    const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        setSelectedOption(e.target.value);
+    }
+    const [photos, setPhotos] = useState<Photo[]>([]);
+
+    useEffect(() => {
+        const rawPhotos = [];
+        //here i am trying to read the dimensions of the image from cloudinary, but doesn't work
+        // const cloudinary = require('cloudinary').v2;
+        // cloudinary.config({
+        //     cloud_name: 'dgnecfapo',
+        //     api_key: '',
+        //     api_secret: ''
+        //   });
+        const selectedQtrYr = qtr_yr.find(q => q.value === selectedOption);
+        const numPhotos = selectedQtrYr?.length ?? 0;
+        const indexVertical = selectedQtrYr?.vertical ?? [];
+        for (let i = 1; i <= numPhotos; i++) {
+            const newPhoto = {src: `${selectedOption}_showcase_${i}.jpg`, width:4032, height:3024};
+            if (indexVertical.includes(i)) {
+                newPhoto.width = 4000;
+                newPhoto.height = 6000;
+            }
+            // trying to dynamically read the images from cloudinary
+            // cloudinary.uploader.explicit(newPhoto.src, {type: 'fetch'}, function(error: string, result: any) {
+            //     newPhoto.width = result.width;
+            //     newPhoto.height = result.height;
+            //   });
+            rawPhotos.push(newPhoto);
+        }
+
+        const updatedPhotos = rawPhotos.map((photo) => ({
+            src: photo.src,
+            width: photo.width,
+            height: photo.height,
+            srcSet: breakpoints.map((breakpoint) => {
+                const height = Math.round((photo.height / photo.width) * breakpoint);
+                return {
+                    src: photo.src,
+                    width: breakpoint,
+                    height,
+                };
+            }),
+        }));
+
+        setPhotos(updatedPhotos);
+    }, [selectedOption]);
+
+    return (
+        <>
+            <div className={s.container}>
+                <h1>Photo Gallery</h1>
+                <select name="project_select" onChange={handleChange}>
+                    {options}
+                </select>
+            </div>
+            <PhotoAlbum
+                photos={photos}
+                layout="rows"
+                renderPhoto={NextJsImage}
+                sizes={{
+                    size: "calc(90vw - 100px)",
+                    sizes: [
+                        { viewport: "(max-width: 299px)", size: "calc(90vw - 10px)" },
+                        { viewport: "(max-width: 599px)", size: "calc(90vw - 20px)" },
+                        { viewport: "(max-width: 1199px)", size: "calc(90vw - 30px)" },
+                    ],
+                }}
+            /> 
+        </>
+    );
+}
+
+export default PhotoGallery;

src/sections/Photo-Gallery/style.module.scss

@@ -1 +1,21 @@
-@use "/src/styles/vars.scss" as vars; // allows you to use pre-defined color
+@use "/src/styles/vars.scss" as vars; // allows you to use pre-defined color
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    select {
+        border-radius: 0.25rem;
+        margin-bottom: 1rem;
+    }
+
+    h1 {
+        color: vars.$blue-dark;
+    }
+}
+
+.image {
+    border-radius: 0.5rem;
+}

src/styles/vars.scss

@@ -8,6 +8,7 @@ $gray: #C3C6CF;
 $red-warning: #AC303E;
 $green-success: #30AC9E;
 $blue-ap: #68b4fc;
+$blue-dark: #001D36;
 
 
 $turquoise: #51c0c0;