Merge pull request #361 from Namchee/feat/provincee-static-slug

feat: Add static slug for province detail page

__tests__/pages/provinces.test.tsx

@@ -0,0 +1,18 @@
+import provinces from "~/lib/provinces";
+import { getInitial } from "~/lib/string-utils";
+import { getStaticProps } from "~/pages/provinces";
+
+describe("getStaticProps", () => {
+  it("returns the props from sheets correctly", () => {
+    const provincesList = provinces.map(({ name, slug, data }) => ({
+      initials: getInitial(name),
+      name,
+      slug,
+      count: data.length,
+    }));
+
+    expect(getStaticProps({})).toEqual({
+      props: { provincesList },
+    });
+  });
+});

etc/fetchers/fetch-sheets.ts

@@ -1,5 +1,6 @@
 import {
   allIsEmptyString,
+  getKebabCase,
   getSlug,
   toSnakeCase,
   toTitleCase,
@@ -55,9 +56,11 @@ export async function fetchSheets() {
         })
         .toArray()
         .filter((row) => !allIsEmptyString(row));
+
       return {
         id: sheetId,
         name: sheetName,
+        slug: getKebabCase(sheetName),
         data: sheetRows.map((row, rowIndex) => {
           return sheetColumns.reduce(
             (prev: Record<string, number | string>, col) => {
@@ -84,6 +87,8 @@ export async function fetchSheets() {
     })
     .toArray();
 
+  sheetList.shift();
+
   fs.writeFileSync(
     path.resolve(__dirname, "../../data/wbw-sheets.json"),
     JSON.stringify(sheetList),

lib/__mocks__/builders/provinces.ts

@@ -28,6 +28,7 @@ export const provinceBuilder = build<Province>({
   fields: {
     id: sequence(),
     name: fake((f) => f.address.state()),
+    slug: fake((f) => f.lorem.slug()),
     data: [contactBuilder()],
   },
 });

lib/provinces.ts

@@ -7,6 +7,7 @@ export type Provinces = Province[];
 export type Province = {
   readonly id: number;
   readonly name: string;
+  readonly slug: string;
   readonly data: Contact[];
 };
 
@@ -32,13 +33,17 @@ export type ProvincePath = {
   };
 };
 
-export const getProvincesPaths = (): ProvincePath[] =>
-  provinces.map((item, index) => {
-    const provinceSlug = getSlug(item.name, index);
+export const getProvincesPaths = (): ProvincePath[] => {
+  const provincees = provinces as unknown as Province[];
+
+  return provincees.map((province) => {
+    const provinceSlug = province.slug;
+
     return {
       params: { provinceSlug },
     };
   });
+};
 
 export type ContactPath = {
   params: {

package.json

@@ -11,7 +11,7 @@
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "eslint --fix \"**/*.{js,jsx,ts,tsx}\"",
     "mirror-box": "ts-node etc/mirror-box.ts",
-    "netlify-export": "yarn mirror-box && yarn build && next export",
+    "netlify-export": "yarn fetch-wbw && yarn build && next export",
     "prepare": "husky install",
     "start": "next start",
     "cypress:open": "cypress open",

pages/provinces/[provinceSlug]/index.tsx

@@ -10,7 +10,6 @@ import { getCurrentLongDate } from "~/lib/date-utils";
 import { useSearch } from "~/lib/hooks/use-search";
 import { getProvinceMeta } from "~/lib/meta";
 import provinces, { Contact, getProvincesPaths } from "~/lib/provinces";
-import { getTheLastSegmentFromKebabCase } from "~/lib/string-utils";
 
 import { GetStaticPaths, GetStaticProps } from "next";
 import { useRouter } from "next/router";
@@ -139,8 +138,7 @@ export const getStaticPaths: GetStaticPaths = () => {
 
 export const getStaticProps: GetStaticProps = ({ params = {} }) => {
   const { provinceSlug } = params;
-  const index = getTheLastSegmentFromKebabCase(provinceSlug as string);
-  const province = index ? provinces[index as unknown as number] : null;
+  const province = provinces.find((prov) => prov.slug === provinceSlug);
   const provinceName = province ? province.name : "";
   const contactList = province
     ? [...province.data].sort((a, b) => {

pages/provinces/index.tsx

@@ -8,7 +8,7 @@ import { SeoText } from "~/components/seo-text";
 import { getCurrentMonthAndYear } from "~/lib/date-utils";
 import { useSearch } from "~/lib/hooks/use-search";
 import provinces from "~/lib/provinces";
-import { getInitial, getSlug } from "~/lib/string-utils";
+import { getInitial } from "~/lib/string-utils";
 
 import { GetStaticProps } from "next";
 import { NextSeo } from "next-seo";
@@ -65,13 +65,13 @@ export default function ProvincesPage(props: ProvincesPageProps) {
 }
 
 export const getStaticProps: GetStaticProps = () => {
-  const provincesList = provinces.map(({ name, data }, index) => ({
+  const provincesList = provinces.map(({ name, slug, data }) => ({
     initials: getInitial(name),
     name,
-    slug: getSlug(name, index),
+    slug,
     count: data.length,
   }));
-  provincesList.shift();
+
   return {
     props: {
       provincesList,