From f288bf63378402479463fadc950206304d077419 Mon Sep 17 00:00:00 2001 From: Cristopher Namchee Date: Fri, 23 Jul 2021 19:47:00 +0700 Subject: [PATCH 1/5] feat: Add static slug to raw fetchers data --- etc/fetchers/fetch-sheets.ts | 5 +++++ lib/provinces.ts | 11 ++++++++--- pages/provinces/index.tsx | 8 ++++---- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/etc/fetchers/fetch-sheets.ts b/etc/fetchers/fetch-sheets.ts index 55054e434..099a955a0 100644 --- a/etc/fetchers/fetch-sheets.ts +++ b/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, col) => { @@ -84,6 +87,8 @@ export async function fetchSheets() { }) .toArray(); + sheetList.shift(); + fs.writeFileSync( path.resolve(__dirname, "../../data/wbw-sheets.json"), JSON.stringify(sheetList), diff --git a/lib/provinces.ts b/lib/provinces.ts index d1cbff454..9b389ca92 100644 --- a/lib/provinces.ts +++ b/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: { diff --git a/pages/provinces/index.tsx b/pages/provinces/index.tsx index c98307c59..883de1196 100644 --- a/pages/provinces/index.tsx +++ b/pages/provinces/index.tsx @@ -6,7 +6,7 @@ import { ProvinceList, ProvinceListItem } from "~/components/province-list"; import { SearchForm } from "~/components/search-form"; 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"; @@ -54,13 +54,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, From 9996e6a9f6338289602c1b8138c6d2e2bd528386 Mon Sep 17 00:00:00 2001 From: Cristopher Namchee Date: Sat, 24 Jul 2021 13:39:01 +0700 Subject: [PATCH 2/5] feat: Integrate static slug to client side pages --- pages/provinces/[provinceSlug]/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/pages/provinces/[provinceSlug]/index.tsx b/pages/provinces/[provinceSlug]/index.tsx index 512ffd313..b41b855f1 100644 --- a/pages/provinces/[provinceSlug]/index.tsx +++ b/pages/provinces/[provinceSlug]/index.tsx @@ -7,7 +7,6 @@ import { PageHeader } from "~/components/layout/page-header"; import { SearchForm } from "~/components/search-form"; import { useSearch } from "~/lib/hooks/use-search"; import provinces, { Contact, getProvincesPaths } from "~/lib/provinces"; -import { getTheLastSegmentFromKebabCase } from "~/lib/string-utils"; import { GetStaticPaths, GetStaticProps } from "next"; import { useRouter } from "next/router"; @@ -133,8 +132,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) => { From 2387cddc23e63966c47bd86937874c8f788d30e3 Mon Sep 17 00:00:00 2001 From: Cristopher Namchee Date: Sun, 25 Jul 2021 13:56:47 +0700 Subject: [PATCH 3/5] fix(test): Add slug to province data builder --- lib/builders/provinces.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/builders/provinces.ts b/lib/builders/provinces.ts index d76335c17..3d8edba05 100644 --- a/lib/builders/provinces.ts +++ b/lib/builders/provinces.ts @@ -28,6 +28,7 @@ export const provinceBuilder = build({ fields: { id: sequence(), name: fake((f) => f.address.state()), + slug: fake((f) => f.lorem.slug()), data: [contactBuilder()], }, }); From ddbacace3cdcdbf651d152ea4b98ec2e33492c36 Mon Sep 17 00:00:00 2001 From: Cristopher Namchee Date: Sun, 25 Jul 2021 18:17:38 +0700 Subject: [PATCH 4/5] chore(ci): Temporarily revert to fetching instead of mirroring --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ec68198b4..ccaf1069f 100644 --- a/package.json +++ b/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", From 8c787a09ff31f12bb4d4347cc715acaafc3c8624 Mon Sep 17 00:00:00 2001 From: Cristopher Namchee Date: Sun, 25 Jul 2021 19:45:31 +0700 Subject: [PATCH 5/5] test: Add minimal test to evaluate static slug props --- __tests__/pages/provinces.test.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 __tests__/pages/provinces.test.tsx diff --git a/__tests__/pages/provinces.test.tsx b/__tests__/pages/provinces.test.tsx new file mode 100644 index 000000000..d4a87f483 --- /dev/null +++ b/__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 }, + }); + }); +});