Merge pull request #43 from mbwatson/update/get-server-side-props

Update/get server side props

components/layout/text-image-section/text-image-section.js

@@ -22,6 +22,7 @@ export const TextImageSection = ({ imageUrl, imageHeight, imageWidth, children }
         width={imageWidth}
         height={imageHeight}
         layout="responsive"
+        objectFit='contain'
       />
     </Box>}
     <Box sx={{ flex: '1' }}>

pages/[...slug].js

@@ -42,29 +42,12 @@ const DynamicPage = ({
   )
 }
 
-export async function getStaticPaths(context) {
-  // Get all pages from Strapi
-  const allPages = context.locales.map(async (locale) => {
-    const localePages = await fetchAPI(`/api/pages`)
-    return localePages
-  })
-
-  const pages = await (await Promise.all(allPages)).flat()
-
-  const paths = pages.map((page) => {
-    // Decompose the slug that was saved in Strapi
-    // const slugArray = !page.data[0].attributes.slug ? false : page.data[0].attributes.slug.split("/")
-    return {
-      params: { slug: [page.data[0].attributes.slug] },
-      // Specify the locale to render
-      locale: page.locale,
-    }
-  })
-
-  return { paths, fallback: true }
-}
+export async function getServerSideProps(context) {
+  context.res.setHeader(
+    'Cache-Control',
+    'no-cache, no-store, must-revalidate'
+  )
 
-export async function getStaticProps(context) {
   const { params, locale, locales, defaultLocale, preview = null } = context
 
   const globalLocale = await getGlobalData(locale)

pages/collaborations/[id].js

@@ -1,29 +1,10 @@
-import { Fragment, useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import { Typography } from '@mui/material'
+import { Fragment } from 'react'
 import { fetchStrapiCollaboration } from '../../lib/strapi'
 import {
-  Link, Page, PersonCard, PersonGrid, Pre, Section,
+  Link, Page, PersonCard, PersonGrid, Section,
 } from '../../components'
 
-export default function Collaboration() {
-  const router = useRouter()
-  const [collaboration, setCollaboration] = useState(null)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const collab = await fetchStrapiCollaboration(router.query.id)
-      setCollaboration(collab)
-    }
-    fetchData()
-  }, [router.query.id])
-
-  if (!collaboration) {
-    return 'Loading...'
-  }
-
-  console.log(collaboration)
-
+export default function Collaboration({ collaboration }) {
   return (
     <Page
       title={ `${ collaboration.name }` }
@@ -97,3 +78,14 @@ export default function Collaboration() {
     </Page>
   )
 }
+
+export async function getServerSideProps({ params, res }) {
+  res.setHeader(
+    'Cache-Control',
+    'no-cache, no-store, must-revalidate'
+  )
+
+  const collaboration = await fetchStrapiCollaboration(params.id)
+
+  return { props: { collaboration: JSON.parse(JSON.stringify(collaboration)) } }
+}

pages/groups/[id].js

@@ -1,34 +1,16 @@
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import { Typography, Box, Divider } from '@mui/material'
+import { Typography, Divider } from '@mui/material'
 import { fetchStrapiGroup } from '../../lib/strapi'
-import { Link, Page, Pre } from '../../components'
+import { Link, Page } from '../../components'
 import { Section } from '../../components/layout'
 import { PersonCard, PersonGrid } from "../../components/people/";
 
-export default function ResearchGroup() {
-  const router = useRouter()
-  const [researchGroup, setResearchGroup] = useState(null)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const group = await fetchStrapiGroup(router.query.id)
-      setResearchGroup(group)
-    }
-    fetchData()
-  }, [router.query.id])
-
-  if (!researchGroup) {
-    return 'Loading...'
-  }
-
+export default function ResearchGroup({ researchGroup }) {
   return (
     <Page
       title={ `${ researchGroup.name }` }
       description={ researchGroup.description }
       heroImage={ researchGroup.featuredImage ? researchGroup.featuredImage.url : null }
     >
-
       <Typography paragraph>{researchGroup.description}</Typography>
       <br/>
 
@@ -104,3 +86,14 @@ export default function ResearchGroup() {
     </Page>
   )
 }
+
+export async function getServerSideProps({ params, res }) {
+  res.setHeader(
+    'Cache-Control',
+    'no-cache, no-store, must-revalidate'
+  )
+
+  const researchGroup = await fetchStrapiGroup(params.id)
+
+  return { props: { researchGroup: JSON.parse(JSON.stringify(researchGroup)) } }
+}

pages/people/[slug].js

@@ -1,33 +1,15 @@
-import { useEffect, useState, Fragment } from 'react'
-import { useRouter } from 'next/router'
+import { Fragment } from 'react'
 import { Divider, Typography } from '@mui/material'
 import { fetchStrapiPerson } from "../../lib/strapi";
 import { Link, Page, Section, TextImageSection } from '../../components'
 
-export default function Person() {
-  const router = useRouter()
-  const [person, setPerson] = useState(null)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const person = await fetchStrapiPerson(router.query.slug)
-      if (!person) { return }
-      setPerson(person)
-    }
-    fetchData()
-  }, [router.query.slug])
-
-
-  if (!person) {
-    return 'Loading...'
-  }
-
+export default function Person({ person }) {
   return (
     <Page title={ `${ person.firstName } ${ person.lastName }` } hideTitle>
       <TextImageSection 
         imageUrl={ person.photoURL }
-        imageWidth={ '400px' }
-        imageHeight={ '400px' }
+        imageWidth={400}
+        imageHeight={400}
         >
           <Typography variant="h1" >
             { person.fullName }
@@ -137,3 +119,14 @@ export default function Person() {
     </Page>
   )
 }
+
+export async function getServerSideProps({ params, res }) {
+  res.setHeader(
+    'Cache-Control',
+    'no-cache, no-store, must-revalidate'
+  )
+
+  const person = await fetchStrapiPerson(params.slug)
+
+  return { props: { person: JSON.parse(JSON.stringify(person)) } }
+}

pages/projects/[id].js

@@ -1,35 +1,10 @@
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
 import { Divider, Typography } from '@mui/material'
 import { fetchStrapiProject } from '../../lib/strapi'
 import { Link, Page } from '../../components'
-import { Pre } from '../../components/pre'
 import { Section } from '../../components/layout'
 import { PersonCard, PersonGrid } from "../../components/people/";
 
-export default function Project() {
-  const router = useRouter()
-  const [project, setProject] = useState(null)
-
-  try {
-    useEffect(() => {
-    const fetchData = async () => {
-      const project = await fetchStrapiProject(router.query.id)
-      setProject(project)
-    }
-    fetchData()
-    .catch(console.error)
-  }, [router.query.id])
-
-  if (!project) {
-    return 'Loading...'
-  }
-} catch (error) {
-  console.log(error.response)
-}
-
-
-
+export default function Project({ project }) {
   return (
     <Page
       title={ `${ project.name }` }
@@ -109,3 +84,14 @@ export default function Project() {
     </Page>
   )
 }
+
+export async function getServerSideProps({ params, res }) {
+  res.setHeader(
+    'Cache-Control',
+    'no-cache, no-store, must-revalidate'
+  )
+
+  const project = await fetchStrapiProject(params.id)
+
+  return { props: { project: JSON.parse(JSON.stringify(project)) } }
+}

pages/teams/[id].js

@@ -1,27 +1,10 @@
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import { Typography, Box } from '@mui/material'
+import { Typography } from '@mui/material'
 import { fetchStrapiTeam } from '../../lib/strapi'
 import { Page } from '../../components'
 import { PersonCard, PersonGrid } from "../../components/people/";
 import { Section } from '../../components/layout'
 
-export default function ResearchGroup() {
-  const router = useRouter()
-  const [team, setTeam] = useState(null)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const group = await fetchStrapiTeam(router.query.id)
-      setTeam(group)
-    }
-    fetchData()
-  }, [router.query.id])
-
-  if (!team) {
-    return 'Loading...'
-  }
-
+export default function ResearchGroup({ team }) {
   return (
     <Page
       title={ `${ team.name }` }
@@ -43,3 +26,14 @@ export default function ResearchGroup() {
     </Page>
   )
 }
+
+export async function getServerSideProps({ params, res }) {
+  res.setHeader(
+    'Cache-Control',
+    'no-cache, no-store, must-revalidate'
+  )
+
+  const team = await fetchStrapiTeam(params.id)
+
+  return { props: { team: JSON.parse(JSON.stringify(team)) } }
+}