Fix gallery not populating on project pages

adamgraham · Jul 8, 2023 · 75dba68 · 75dba68
1 parent df0ba4a
commit 75dba68
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 28 deletions.
diff --git a/src/components/GalleryPage.js b/src/components/GalleryPage.js
@@ -20,12 +20,7 @@ const GalleryPage = ({ category, gallery, location }) => {
           title: `Adam Graham • ${titleCase(category)}`,
         }}
       >
-        <Gallery
-          category={category}
-          gallery={gallery}
-          setSlideIndex={setSlideIndex}
-          slideIndex={slideIndex}
-        />
+        <Gallery />
       </Page>
     </GalleryContext.Provider>
   );

diff --git a/src/components/ProjectPage.js b/src/components/ProjectPage.js
@@ -1,30 +1,34 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState } from 'react';
+import GalleryContext, { useContext } from './GalleryContext';
 import Page from './Page';
 import Project, { ProjectProps } from './Project';
 import { SlideProps } from './Slide';
+import { getSessionIndex } from '../utils/session';
 
-const ProjectPage = ({ gallery, location, project }) => {
-  const metadata = {
-    url: `https://adamgraham.io/${project.category}/${project.id}`,
-    title: `Adam Graham • ${project.title}`,
-    description: project.description_short || project.description,
-    image: project.image && project.image.sharp.original.src,
-  };
+const ProjectPage = ({ category, gallery, location, project }) => {
+  const [slideIndex, setSlideIndex] = useState(getSessionIndex(category));
+  const context = useContext(category, gallery, slideIndex, setSlideIndex);
   return (
-    <Page
-      category={project.category}
-      gallery={gallery}
-      id={project.id}
-      location={location}
-      metadata={metadata}
-    >
-      <Project project={project} />
-    </Page>
+    <GalleryContext.Provider value={context}>
+      <Page
+        id={project.id}
+        location={location}
+        metadata={{
+          url: `https://adamgraham.io/${project.category}/${project.id}`,
+          title: `Adam Graham • ${project.title}`,
+          description: project.description_short || project.description,
+          image: project.image && project.image.sharp.original.src,
+        }}
+      >
+        <Project project={project} />
+      </Page>
+    </GalleryContext.Provider>
   );
 };
 
 ProjectPage.propTypes = {
+  category: PropTypes.string,
   gallery: PropTypes.arrayOf(SlideProps),
   location: PropTypes.object,
   project: ProjectProps,

diff --git a/src/pages/art/{ArtJson.jsonId}.js b/src/pages/art/{ArtJson.jsonId}.js
@@ -84,7 +84,12 @@ const Art = ({ data, location }) => {
   const { project } = data;
   const { gallery } = data.json;
   return (
-    <ProjectPage gallery={gallery} location={location} project={project} />
+    <ProjectPage
+      category={project.category}
+      gallery={gallery}
+      location={location}
+      project={project}
+    />
   );
 };
 

diff --git a/src/pages/games/{GamesJson.jsonId}.js b/src/pages/games/{GamesJson.jsonId}.js
@@ -84,7 +84,12 @@ const Game = ({ data, location }) => {
   const { project } = data;
   const { gallery } = data.json;
   return (
-    <ProjectPage gallery={gallery} location={location} project={project} />
+    <ProjectPage
+      category={project.category}
+      gallery={gallery}
+      location={location}
+      project={project}
+    />
   );
 };
 

diff --git a/src/pages/presentations/{PresentationsJson.jsonId}.js b/src/pages/presentations/{PresentationsJson.jsonId}.js
@@ -84,7 +84,12 @@ const Presentation = ({ data, location }) => {
   const { project } = data;
   const { gallery } = data.json;
   return (
-    <ProjectPage gallery={gallery} location={location} project={project} />
+    <ProjectPage
+      category={project.category}
+      gallery={gallery}
+      location={location}
+      project={project}
+    />
   );
 };
 

diff --git a/src/pages/tech/{TechJson.jsonId}.js b/src/pages/tech/{TechJson.jsonId}.js
@@ -84,7 +84,12 @@ const Tech = ({ data, location }) => {
   const { project } = data;
   const { gallery } = data.json;
   return (
-    <ProjectPage gallery={gallery} location={location} project={project} />
+    <ProjectPage
+      category={project.category}
+      gallery={gallery}
+      location={location}
+      project={project}
+    />
   );
 };
 

diff --git a/src/pages/websites/{WebsitesJson.jsonId}.js b/src/pages/websites/{WebsitesJson.jsonId}.js
@@ -84,7 +84,12 @@ const Website = ({ data, location }) => {
   const { project } = data;
   const { gallery } = data.json;
   return (
-    <ProjectPage gallery={gallery} location={location} project={project} />
+    <ProjectPage
+      category={project.category}
+      gallery={gallery}
+      location={location}
+      project={project}
+    />
   );
 };