Make memories use thumbnails

owenmoogk · Jan 4, 2025 · 27e7b3a · 27e7b3a
1 parent 3d380ef
commit 27e7b3a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/src/api/memories.ts b/src/api/memories.ts
@@ -1,4 +1,8 @@
-import { memoriesLink, memoriesPhotosLink } from '@global/global';
+import {
+  memoriesLink,
+  memoriesPhotosLink,
+  memoriesThumbnailLink,
+} from '@global/global';
 
 export type MemoryImage = {
   name: string;
@@ -9,7 +13,9 @@ export type MemoryImage = {
   height: number;
 };
 
-export async function getImageMetadata() {
+export async function getImageMetadata(): Promise<
+  [metadata: MemoryImage[], thumbnailMetadata: MemoryImage[]]
+> {
   const response = await fetch(memoriesLink + 'image_metadata.json');
   const json = (await response.json()) as {
     [key: string]: unknown;
@@ -28,7 +34,21 @@ export async function getImageMetadata() {
         src: memoriesPhotosLink + img.name,
       }) as MemoryImage
   );
+
+  let thumbnailImageData: MemoryImage[] = json.map(
+    (img) =>
+      ({
+        ...img,
+        date: new Date(
+          img.date.replace(/^(\d{4}):(\d{2}):(\d{2})/, '$1-$2-$3')
+        ),
+        src: memoriesThumbnailLink + img.name,
+      }) as MemoryImage
+  );
+
   imageData = imageData.sort((a, b) => b.date.getTime() - a.date.getTime());
-  console.log('HERE', imageData);
-  return imageData;
+  thumbnailImageData = thumbnailImageData.sort(
+    (a, b) => b.date.getTime() - a.date.getTime()
+  );
+  return [imageData, thumbnailImageData];
 }
diff --git a/src/components/memories/memories.tsx b/src/components/memories/memories.tsx
@@ -12,11 +12,16 @@ export default function Memories() {
   const [index, setIndex] = useState<number>(-1);
 
   const [metadata, setMetadata] = useState<MemoryImage[]>([]);
+  const [thumbnailMetadata, setThumbnailMetadata] = useState<MemoryImage[]>([]);
   const navigate = useNavigate();
 
   useEffect(() => {
     getImageMetadata()
-      .then((response) => setMetadata(response))
+      .then((response) => {
+        const [metadata, thumbnailMetadata] = response;
+        setMetadata(metadata);
+        setThumbnailMetadata(thumbnailMetadata);
+      })
       .catch((e) => console.log(e));
   }, [navigate]);
 
@@ -27,7 +32,7 @@ export default function Memories() {
       <br />
       <div className="memoryPage">
         <RowsPhotoAlbum
-          photos={metadata}
+          photos={thumbnailMetadata}
           onClick={({ index }) => setIndex(index)}
           targetRowHeight={(width) =>
             width > 1200

diff --git a/src/global/global.ts b/src/global/global.ts
@@ -4,6 +4,7 @@ export const resumeLink = assetUrl + 'resume/resume.pdf';
 export const extracurricularsLink = assetUrl + 'extracurriculars.pdf';
 export const memoriesLink = homepageUrl + 'owenmoogk.github.io-memories/';
 export const memoriesPhotosLink = memoriesLink + 'photos/';
+export const memoriesThumbnailLink = memoriesPhotosLink + 'thumbnails/';
 export const blogLink = 'https://owenmoogk.github.io/blogs';
 
 export const linkedIn = 'https://linkedin.com/in/owenmoogk';