feat(i18n): implement i18n in pages and accommodate/use server side 4…

…04 redirects

- Make sure a string is sent to API instead of undefined
- Make error page look proper

components/UI/Pages/Category/SingleCategoryPage.tsx

@@ -31,7 +31,7 @@ const SingleCategoryPage: React.FC<ICategoryPageProps> = (props) => {
           component={MUI.Paper}
           className={classes.paper}>
           <ListProduct
-            categorySlug={category?.url.current}
+            categorySlug={category?.url?.current}
             products={products}
           />
         </MUI.Grid>

pages/[page].tsx

@@ -9,29 +9,39 @@ import routes from '@util/api/queries/allRoutes'
 import { CONSTANTS, ui } from '@util/settings'
 import { APIRoute } from 'cms/APIRoute'
 import groq from 'groq'
-import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next'
+import {
+  GetStaticProps,
+  GetStaticPropsContext,
+  InferGetStaticPropsType
+} from 'next'
 import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
 import { PageProps } from 'PageProps'
 import { useEffect, useState } from 'react'
 
-interface ICustomPageProps extends PageProps {
+interface ICustomPageProps extends PageProps, GetStaticPropsContext {
   currentRoute: APIRoute | null
-  preview?: boolean
-  previewData?: Record<string, string>
 }
 
-export const getStaticPaths: GetStaticPaths = async () => {
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const getStaticPaths = async (hmm: unknown) => {
+  // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+  console.info(`GetStaticPathsObj: ${hmm}`)
   const sanityRoutes: Array<{ slug: { current: string } }> = await getClient(
     false
   ).fetch(routes)
 
   const routeParams: { params: { page: string } }[] = []
 
   sanityRoutes.forEach((route) =>
-    routeParams.push({ params: { page: `/${route.slug.current}` } })
+    routeParams.push({
+      params: { page: `/${route.slug.current}` }
+    })
   )
 
+  // eslint-disable-next-line no-console
+  console.dir(routeParams)
+
   return {
     paths: !routeParams[0] ? [{ params: { page: 'REDIRECT' } }] : routeParams,
     fallback: true
@@ -40,7 +50,8 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 export const getStaticProps: GetStaticProps<ICustomPageProps> = async (ctx) => {
   const { preview, params } = ctx
-
+  // eslint-disable-next-line no-console
+  console.log(ctx)
   const config = await getSanityConfig()
 
   const page = params && typeof params.page === 'string' ? params.page : ''
@@ -49,14 +60,20 @@ export const getStaticProps: GetStaticProps<ICustomPageProps> = async (ctx) => {
     pageSlug: page
   })
 
+  if (!fetchedRoute || !fetchedRoute._id) {
+    return {
+      unstable_notFound: true
+    }
+  }
+
   return {
     props: {
       ...config,
       preview: Boolean(preview),
-      currentRoute: fetchedRoute || null,
+      currentRoute: fetchedRoute,
       ...ctx
     },
-    revalidate: 1
+    revalidate: 10
   }
 }
 

pages/_error.tsx

@@ -1,22 +1,39 @@
 import { PageAnimation } from '@components/UI'
 import * as MUI from '@material-ui/core'
+import getSanityConfig from '@util/api/calls/getSanityConfig'
+import { AnimatePresence } from 'framer-motion'
+import { NextPage } from 'next'
+import { PageProps } from 'PageProps'
 
-interface IErrorProps {
-  statusCode: string | undefined
+interface IErrorProps extends PageProps {
+  statusCode: number | undefined
 }
 
-const Error: React.FC<IErrorProps> = (props) => {
+const Error: NextPage<IErrorProps> = (props) => {
   const { statusCode } = props
 
   return (
-    <PageAnimation>
-      <MUI.Typography>
-        {statusCode
-          ? `An error occurred on the server: ${statusCode}`
-          : `An error occurred on the client`}
-      </MUI.Typography>
-    </PageAnimation>
+    <AnimatePresence>
+      <PageAnimation>
+        <MUI.Typography>
+          {statusCode
+            ? `An error occurred on the server: ${statusCode}`
+            : `An error occurred on the client`}
+        </MUI.Typography>
+      </PageAnimation>
+    </AnimatePresence>
   )
 }
 
+Error.getInitialProps = async (ctx) => {
+  const config = await getSanityConfig()
+  // console.log(ctx)
+
+  return {
+    ...config,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    statusCode: ctx.res?.statusCode
+  }
+}
+
 export default Error

pages/category/[category].tsx

@@ -23,7 +23,9 @@ export const getStaticPaths: GetStaticPaths = async () => {
   const categoriesArr: { params: { category: string } }[] = []
 
   categories.forEach((category) => {
-    categoriesArr.push({ params: { category: category.url.current } })
+    categoriesArr.push({
+      params: { category: category?.url?.current || 'UNDEFINED' }
+    })
   })
 
   return {
@@ -48,6 +50,8 @@ export const getStaticProps: GetStaticProps<Omit<
 
   const products = await getProductsByCategory(category._id)
 
+  if (!category) return { unstable_notFound: true }
+
   return {
     props: {
       ...config,

pages/category/[category]/[product].tsx

@@ -35,6 +35,8 @@ export const getStaticProps: GetStaticProps<Omit<
 
   const product = await getSingleProductBySlug(slug)
 
+  if (!product) return { unstable_notFound: true }
+
   return {
     props: {
       ...config,

pages/index.tsx

@@ -1,14 +1,29 @@
 import PageSEO from '@components/HoC/SEO/Page'
 import HomePage from '@components/UI/Pages/Home/HomePage'
 import getSanityConfig from '@util/api/calls/getSanityConfig'
+import resolveTranslationFiles from '@util/i18n/resolveTranslationFiles'
 import { GetStaticProps, InferGetStaticPropsType } from 'next'
 import { PageProps } from 'PageProps'
 
 export const getStaticProps: GetStaticProps<PageProps> = async (ctx) => {
   const config = await getSanityConfig()
 
+  const error = 'I18n is not enabled in `next.config.js`'
+
+  /**
+   * Get translation files based on current locale
+   *
+   * `translation` is handled like an export default js module
+   * To access keys in the file, use object notation
+   */
+  const translation = resolveTranslationFiles({
+    locale: ctx.locale || error,
+    locales: ctx.locales || [error],
+    namespaces: ['homePage', 'test']
+  })
+
   return {
-    props: { ...ctx, ...config },
+    props: { ...ctx, ...config, translation },
     revalidate: 3600
   }
 }

util/api/calls/getAllProductsByCategory.ts

@@ -8,7 +8,7 @@ import productsByCategory from '../queries/allProductsByCategory'
  */
 async function getProductsByCategory(id: string): Promise<Product[]> {
   const data: Product[] = await getClient(false).fetch(productsByCategory, {
-    id
+    id: `${id}`
   })
 
   return data

util/api/calls/getSingleCategoryBySlug.ts

@@ -7,7 +7,9 @@ import categoryBySlug from '../queries/singleCategoryBySlug'
  * @returns {Promise<Category>} The category provided by slug
  */
 async function getCategoryBySlug(slug: string): Promise<Category> {
-  const data: Category = await getClient(false).fetch(categoryBySlug, { slug })
+  const data: Category = await getClient(false).fetch(categoryBySlug, {
+    slug: `${slug}`
+  })
 
   return data
 }

util/api/calls/getSingleProductFromSlug.ts

@@ -8,7 +8,7 @@ import singleProductFromSlug from '../queries/singleProductBySlug'
  */
 async function getSingleProductBySlug(slug: string): Promise<Product> {
   const data: Product = await getClient(false).fetch(singleProductFromSlug, {
-    slug
+    slug: `${slug}`
   })
 
   return data

util/generateProductParamsArr.ts

@@ -38,8 +38,8 @@ async function generateProductParamsArr(): Promise<IParams> {
       if (productInCategory)
         paramsArr.push({
           params: {
-            category: cat.url.current,
-            product: prod.url.current
+            category: cat.url?.current,
+            product: prod.url?.current
           }
         })
     })