fix(home): replace to getStaticProps (#845)

inabagumi · Mar 8, 2021 · c9540a5 · c9540a5
1 parent c6dec89
commit c9540a5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 51 deletions.
diff --git a/next.config.js b/next.config.js
@@ -5,10 +5,7 @@ const nextConfig = {
   experimental: {
     plugins: true
   },
-  future: {
-    webpack5: true
-  },
-  headers() {
+  async headers() {
     return [
       {
         headers: [
@@ -44,7 +41,7 @@ const nextConfig = {
     disable: process.env.NODE_ENV === 'development',
     sw: '/service-worker.js'
   },
-  rewrites() {
+  async rewrites() {
     return [
       {
         destination: '/_next/static/service-worker.js',

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,28 +1,16 @@
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'
-import type { AppContext, AppInitialProps, AppProps } from 'next/app'
-import App from 'next/app'
+import type { AppProps } from 'next/app'
 import { useEffect } from 'react'
-import contentfulClient from '../contentfulClient'
-import { AssetProvider } from '../context/asset-context'
 import { SiteProvider } from '../context/site-context'
-import type { OverlayEntry, OverlayFields } from '../types/Overlay'
 
 const theme = createMuiTheme({
   palette: {
     type: 'dark'
   }
 })
 
-type Props = {
-  assets: OverlayEntry[]
-}
-
-const MyApp = ({
-  Component,
-  assets,
-  pageProps
-}: AppProps & Props): JSX.Element => {
+const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
   useEffect(() => {
     const jssStyles = document.getElementById('jss-server-side')
 
@@ -32,36 +20,12 @@ const MyApp = ({
   return (
     <ThemeProvider theme={theme}>
       <SiteProvider>
-        <AssetProvider assets={assets}>
-          <CssBaseline />
+        <CssBaseline />
 
-          <Component {...pageProps} />
-        </AssetProvider>
+        <Component {...pageProps} />
       </SiteProvider>
     </ThemeProvider>
   )
 }
 
-MyApp.getInitialProps = async (
-  ctx: AppContext
-): Promise<AppInitialProps & Props> => {
-  const initialProps = await App.getInitialProps(ctx)
-  const entries = await contentfulClient
-    .getEntries<OverlayFields>({
-      content_type: 'overlay',
-      limit: 100,
-      order: '-sys.createdAt',
-      select: ['sys.id', 'fields.keyColor', 'fields.media', 'fields.name'].join(
-        ','
-      )
-    })
-    .catch(() => null)
-  const assets = entries?.items || []
-
-  return {
-    ...initialProps,
-    assets
-  }
-}
-
 export default MyApp
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -5,12 +5,13 @@ import MenuItem from '@material-ui/core/MenuItem'
 import Toolbar from '@material-ui/core/Toolbar'
 import { makeStyles } from '@material-ui/core/styles'
 import MoreIcon from '@material-ui/icons/MoreVert'
-import { NextPage } from 'next'
+import type { GetStaticProps, NextPage } from 'next'
 import dynamic from 'next/dynamic'
-import { useCallback, useContext, useState } from 'react'
+import { useCallback, useState } from 'react'
 import * as React from 'react'
 import Meta from '../components/meta'
-import AssetContext, { useAsset } from '../context/asset-context'
+import contentfulClient from '../contentfulClient'
+import type { OverlayEntry, OverlayFields } from '../types/Overlay'
 
 const Camera = dynamic(() => import('../components/camera'), { ssr: false })
 
@@ -31,12 +32,14 @@ const useStyles = makeStyles({
   }
 })
 
-const Index: NextPage = () => {
-  const { assets } = useContext(AssetContext)
+type Props = {
+  assets: OverlayEntry[]
+}
+
+const Index: NextPage<Props> = ({ assets }) => {
   const [assetId, setAssetId] = useState<string>()
   const [anchorEl, setAnchorEl] = useState<HTMLElement>()
   const classes = useStyles()
-  const asset = useAsset(assetId)
 
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -61,6 +64,10 @@ const Index: NextPage = () => {
     []
   )
 
+  const asset = assetId
+    ? assets.find((entry) => entry.sys.id === assetId)
+    : assets[assets.length - 1]
+
   return (
     <>
       <Meta />
@@ -112,3 +119,23 @@ const Index: NextPage = () => {
 }
 
 export default Index
+
+export const getStaticProps: GetStaticProps<Props> = async () => {
+  const entries = await contentfulClient
+    .getEntries<OverlayFields>({
+      content_type: 'overlay',
+      limit: 100,
+      order: '-sys.createdAt',
+      select: ['sys.id', 'fields.keyColor', 'fields.media', 'fields.name'].join(
+        ','
+      )
+    })
+    .catch(() => null)
+  const assets = entries?.items || []
+
+  return {
+    props: {
+      assets
+    }
+  }
+}