From cf4b9a15571d96feb2b3c26f95d3f3f0703f59d3 Mon Sep 17 00:00:00 2001 From: Oliver Eyton-Williams Date: Mon, 9 May 2022 18:30:15 +0200 Subject: [PATCH] feat: client overhaul proof of concept (#45844) * chore: initial setup of web package This is *not* a workspace, yet, because it would be nice to use the latest React, but /client can't migrate (yet). Having two React versions creates issues in workspaces since /.bin/next gets hoisted to root... and finds the root React version :( * feat: add config for next * fix: use jsx-runtime for web linting * chore: init curriculum-server with json-server * chore: integrate curriculum-server with TS/eslint * feat: add patch script json-server doesn't like keys with '/'s in so, for now I'm just patching them out. This lets us keep a strong separation between this WIP and the rest of the code. * fix: use port 8000 to avoid conflicts * feat: crude ISR demo using challenge pages * feat: extend ISR demo to use params * feat: return props for specific superblocks * chore: re-organise folders * refactor: put data fetching in a single module * refactor: challenge page slightly * feat: add link to test ISR You can see that, if you run next dev, the linked page gets regenerated whenever you navigate to it. However, if you run next build that is no longer the case and the page has to be reloaded for the user to see the latest version. The implication is that we'll need another method (Web worker, probably) to detect if the page needs to be updated. * feat: render static paths for rwd * feat: add monaco Editor * feat: send less data via props Rather than sending superblocks, this now sends blocks. Next step, just the challenge! * fix: only send individual challenge's data * feat: send /learn/stuff/ to the challenge page * fix: redirect to path with trailing id * fix: handle all possible path prefixes * feat: add superblocks with trailing ids * chore: rename block -> blockOrId * chore: remove logs * fix: return notFound if page id is missing * chore: add a note about increasing TS strictness * feat: serverside redirects This should be a touch more performant, but mostly it separates the concerns. Since the server already has the responsibility of choosing what pages to render, redirects fit naturally with its concerns. * refactor: clean up param validation * feat: create list of blocks in superblock * feat: add challenge links to map * feat: link to full path, not just id * refactor: ensure props match getStaticProps By specifying the props for GetStaticProps we ensure that it returns the expected data and use InferGetStaticPropsType to get the type out again for use in the component * feat: improve and document dev experience * refactor: separate routing from rendering * refactor: extract routing logic into functions * refactor: naming consistency * refactor: move data wrangling into get-curriculum * refactor: align blockOrId and id * chore: remove the server from workspaces * chore: remove the lock * docs: paths Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * chore: install before linting * fix: create env.json before installing new client * chore: ignore generated json file Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> --- .eslintrc.json | 8 +- .github/workflows/node.js-tests.yml | 4 + .prettierignore | 2 + curriculum-server/.gitignore | 1 + curriculum-server/package.json | 33 ++++ curriculum-server/source-curriculum.ts | 25 +++ curriculum-server/tsconfig.json | 5 + tsconfig-base.json | 1 + web/.gitignore | 1 + web/README.md | 41 +++++ web/next-env.d.ts | 5 + web/package.json | 37 ++++ web/src/data-fetching/get-curriculum.ts | 165 ++++++++++++++++++ web/src/page-templates/challenge.tsx | 48 +++++ web/src/page-templates/superblock.tsx | 37 ++++ web/src/pages/learn/[...id].tsx | 56 ++++++ .../pages/learn/[superblock]/[blockOrId].tsx | 93 ++++++++++ .../[blockOrId]/[dashedName]/[id].tsx | 122 +++++++++++++ web/tsconfig.json | 13 ++ 19 files changed, 696 insertions(+), 1 deletion(-) create mode 100644 curriculum-server/.gitignore create mode 100644 curriculum-server/package.json create mode 100644 curriculum-server/source-curriculum.ts create mode 100644 curriculum-server/tsconfig.json create mode 100644 web/.gitignore create mode 100644 web/README.md create mode 100644 web/next-env.d.ts create mode 100644 web/package.json create mode 100644 web/src/data-fetching/get-curriculum.ts create mode 100644 web/src/page-templates/challenge.tsx create mode 100644 web/src/page-templates/superblock.tsx create mode 100644 web/src/pages/learn/[...id].tsx create mode 100644 web/src/pages/learn/[superblock]/[blockOrId].tsx create mode 100644 web/src/pages/learn/[superblock]/[blockOrId]/[dashedName]/[id].tsx create mode 100644 web/tsconfig.json diff --git a/.eslintrc.json b/.eslintrc.json index 06a94aa018f..b7bff541451 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -46,7 +46,9 @@ "./tsconfig.json", "./config/tsconfig.json", "./tools/ui-components/tsconfig.json", - "./utils/tsconfig.json" + "./utils/tsconfig.json", + "./web/tsconfig.json", + "./curriculum-server/tsconfig.json" ] }, "extends": [ @@ -116,6 +118,10 @@ "cy": true, "Cypress": true } + }, + { + "files": ["web/**/*.tsx"], + "extends": ["plugin:react/jsx-runtime"] } ] } diff --git a/.github/workflows/node.js-tests.yml b/.github/workflows/node.js-tests.yml index 0733218d9d7..01245394a68 100644 --- a/.github/workflows/node.js-tests.yml +++ b/.github/workflows/node.js-tests.yml @@ -42,11 +42,15 @@ jobs: echo 'SHOW_NEW_CURRICULUM=true' >> .env cat .env + # The two prefixed installs are for the client update which are not, + # currently, built as workspaces. - name: Lint Source Files run: | echo npm version $(npm -v) npm ci npm run create:config + npm i --prefix=curriculum-server + npm i --prefix=web npm run build:curriculum npm run lint diff --git a/.prettierignore b/.prettierignore index 072c0e392f9..8e56696477f 100644 --- a/.prettierignore +++ b/.prettierignore @@ -12,3 +12,5 @@ docs/i18n utils/slugs.js utils/slugs.test.js **/package-lock.json +web/.next +curriculum-server/data/curriculum.json diff --git a/curriculum-server/.gitignore b/curriculum-server/.gitignore new file mode 100644 index 00000000000..1269488f7fb --- /dev/null +++ b/curriculum-server/.gitignore @@ -0,0 +1 @@ +data diff --git a/curriculum-server/package.json b/curriculum-server/package.json new file mode 100644 index 00000000000..fbfe076345b --- /dev/null +++ b/curriculum-server/package.json @@ -0,0 +1,33 @@ +{ + "name": "@freecodecamp/curriculum-server", + "version": "0.0.1", + "description": "Web server for curriculum data", + "license": "BSD-3-Clause", + "private": true, + "engines": { + "node": ">=16", + "npm": ">=8" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/freeCodeCamp/freeCodeCamp.git" + }, + "bugs": { + "url": "https://github.com/freeCodeCamp/freeCodeCamp/issues" + }, + "homepage": "https://github.com/freeCodeCamp/freeCodeCamp#readme", + "author": "freeCodeCamp ", + "main": "none", + "scripts": { + "dev": "json-server --watch ./data/curriculum.json", + "test": "echo \"Error: no test specified\" && exit 1", + "source-curriculum": "ts-node source-curriculum.ts" + }, + "dependencies": { + "json-server": "^0.17.0" + }, + "devDependencies": { + "ts-node": "^10.7.0", + "typescript": "^4.6.3" + } +} diff --git a/curriculum-server/source-curriculum.ts b/curriculum-server/source-curriculum.ts new file mode 100644 index 00000000000..0fe2400cdf0 --- /dev/null +++ b/curriculum-server/source-curriculum.ts @@ -0,0 +1,25 @@ +import fs from 'fs/promises'; + +import curriculum from '../config/curriculum.json'; + +interface Curriculum { + [key: string]: unknown; +} + +const curriculumList = Object.keys(curriculum as Curriculum).map(key => { + if (key === '2022/responsive-web-design') { + return { '2022-responsive-web-design': (curriculum as Curriculum)[key] }; + } else { + return { [key]: (curriculum as Curriculum)[key] }; + } +}); + +const patchedCurriculum = curriculumList.reduce((prev, curr) => { + return { ...prev, ...curr }; +}, {}); + +void fs + .mkdir('data', { recursive: true }) + .then(() => + fs.writeFile('./data/curriculum.json', JSON.stringify(patchedCurriculum)) + ); diff --git a/curriculum-server/tsconfig.json b/curriculum-server/tsconfig.json new file mode 100644 index 00000000000..4ec0b8780b8 --- /dev/null +++ b/curriculum-server/tsconfig.json @@ -0,0 +1,5 @@ +{ + "include": ["**/*.ts"], + "exclude": ["node_modules"], + "extends": "../tsconfig-base.json" +} diff --git a/tsconfig-base.json b/tsconfig-base.json index f68b244accb..cea38b99a1f 100644 --- a/tsconfig-base.json +++ b/tsconfig-base.json @@ -7,6 +7,7 @@ "allowJs": true, "jsx": "react", "strict": true, + "forceConsistentCasingInFileNames": true, "esModuleInterop": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, diff --git a/web/.gitignore b/web/.gitignore new file mode 100644 index 00000000000..a680367ef56 --- /dev/null +++ b/web/.gitignore @@ -0,0 +1 @@ +.next diff --git a/web/README.md b/web/README.md new file mode 100644 index 00000000000..731a10d38a2 --- /dev/null +++ b/web/README.md @@ -0,0 +1,41 @@ +# Getting Started + +If you haven't installed freeCodeCamp proper yet, that needs to happen first. + +Once that's done, the curriculum server and this package need installing. Then the prepare script will take care of the rest. + +```sh +cd ../curriculum-server +npm i +cd ../web +npm i +npm run dev +``` + +Now the server should be running on port 3000 and the client on port 8000. + +For now there's not much to see. + +http://localhost:8000/learn/special-path + +is the main entry point and + +http://localhost:3000/responsive-web-design + +is the curriculum data that is currently being used. + +## Things of Note + +Incremental static regeneration is working quite nicely. You can modify the curriculum data (in /curriculum-server/data/curriculum.json), refresh reload your browser and the changes will be reflected. + +The trailing ids are a bit buggy, but you can replace them with a new page's mongo id and it ~should~ will refresh. + +Also, mangled paths _mostly_ work. For example: + +http://localhost:8000/learn/responsive-web-design/applied-an-element/587d774e367417b2b2512a9f + +redirects you to + +http://localhost:8000/learn/responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element/587d774e367417b2b2512a9f + +but not all paths behave as desired. diff --git a/web/next-env.d.ts b/web/next-env.d.ts new file mode 100644 index 00000000000..4f11a03dc6c --- /dev/null +++ b/web/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/web/package.json b/web/package.json new file mode 100644 index 00000000000..0b1bde9106e --- /dev/null +++ b/web/package.json @@ -0,0 +1,37 @@ +{ + "name": "@freecodecamp/web", + "version": "0.0.1", + "description": "The freeCodeCamp.org open-source codebase and curriculum", + "license": "BSD-3-Clause", + "private": true, + "engines": { + "node": ">=16", + "npm": ">=8" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/freeCodeCamp/freeCodeCamp.git" + }, + "bugs": { + "url": "https://github.com/freeCodeCamp/freeCodeCamp/issues" + }, + "homepage": "https://github.com/freeCodeCamp/freeCodeCamp#readme", + "author": "freeCodeCamp ", + "main": "none", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "develop-client": "next dev --port 8000", + "dev": "concurrently \"npm:develop-curriculum-server\" \"npm:develop-client\"", + "develop-curriculum-server": "npm --prefix ../curriculum-server run dev", + "prepare": "npm --prefix ../ run build:curriculum && npm --prefix ../curriculum-server/ run source-curriculum" + }, + "dependencies": { + "@monaco-editor/react": "^4.4.2", + "next": "^12.1.5", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "devDependencies": { + "concurrently": "^7.1.0" + } +} diff --git a/web/src/data-fetching/get-curriculum.ts b/web/src/data-fetching/get-curriculum.ts new file mode 100644 index 00000000000..fe62a932e83 --- /dev/null +++ b/web/src/data-fetching/get-curriculum.ts @@ -0,0 +1,165 @@ +/* + Eventually this module could be used as a cache (in memory or on-disk) for the + curriculum, but for now it just fetches the data on demand. + + A reasonably reliable approach would be as follows: + 1. Query the curriculum API for the latest version of the curriculum. + 2. If the API responds + a. If the latest version is not cached, query the API for the latest version + b. Otherwise use the cached value. + 3. If the API does not respond, use the cached value and log an error. + +*/ + +// TODO: this should be { [superblock: string]: Superblock } +export interface Curriculum { + rwdBlocks: SuperBlock; + jsBlocks: SuperBlock; +} + +export interface SuperBlock { + [index: string]: Block; +} + +export interface Block { + meta: { + name: string; + isUpcomingChange: boolean; + dashedName: string; + order: number; + time: string; + template: string; + required: string[]; + superBlock: string; + challengeOrder: [id: string, title: string][]; + }; + challenges: Challenge[]; +} + +export interface Challenge { + id: string; + dashedName: string; + description: string; + challengeFiles: { contents: string; ext: string }[]; +} + +export interface PathSegments { + superblock: string; + block?: string; + dashedName?: string; + id: string; +} + +export interface IdToDashedNameMap { + [id: string]: string; +} + +interface SuperBlockToChallengeMap { + [index: string]: (pathSegments: Required) => Challenge; +} + +export async function getCurriculum() { + const rwd = await fetch('http://localhost:3000/responsive-web-design'); + const js = await fetch( + 'http://localhost:3000/javascript-algorithms-and-data-structures' + ); + const rwdBlocks = ((await rwd.json()) as { blocks: SuperBlock }).blocks; + const jsBlocks = ((await js.json()) as { blocks: SuperBlock }).blocks; + + return { rwdBlocks, jsBlocks }; +} + +export function getIdToPathSegmentsMap({ rwdBlocks }: Curriculum) { + // TODO: this is pretty inefficient. The curriculum server needs to return an + // object with ids as keys and the superblock, block and dashedName as values. + // i.e. enough info to recreate the full path. + + // Also TODO: use params here and, instead of passing the map, just pass the + // new path. + const idToPathSegmentsMap: Record = {}; + for (const blockName of Object.keys(rwdBlocks)) { + const block = rwdBlocks[blockName]; + for (const challenge of block.challenges) { + idToPathSegmentsMap[challenge.id] = { + superblock: 'responsive-web-design', + block: blockName, + dashedName: challenge.dashedName, + id: challenge.id + }; + } + } + idToPathSegmentsMap['special-path'] = { + superblock: 'responsive-web-design', + id: 'special-path' + }; + return idToPathSegmentsMap; +} + +type SuperBlockToBlockMap = { + [superblock: string]: string[]; +}; + +export function getSuperBlockToBlockMap( + curriculum: Curriculum +): SuperBlockToBlockMap { + return { 'responsive-web-design': Object.keys(curriculum.rwdBlocks) }; +} + +export function getBlockNameToChallengeOrderMap( + { rwdBlocks }: Curriculum, + blockNames: string[] +): { [index: string]: [id: string, title: string] } { + return blockNames.reduce( + (prev, blockName) => ({ + ...prev, + ...{ [blockName]: rwdBlocks[blockName].meta.challengeOrder } + }), + {} + ); +} + +// TODO: remove the hardcoding of superblock names. Also, the map generation is +// a mess +export function getChallengeData( + { rwdBlocks, jsBlocks }: Curriculum, + pathSegments: Required +) { + const superBlockToChallengeMap: SuperBlockToChallengeMap = { + 'responsive-web-design': (pathSegments: Required) => + findChallenge(findBlock(rwdBlocks, pathSegments), pathSegments), + 'javascript-algorithms-and-data-structures': ( + pathSegments: Required + ) => findChallenge(findBlock(jsBlocks, pathSegments), pathSegments) + }; + return superBlockToChallengeMap[pathSegments.superblock](pathSegments); +} + +function findBlock(superblock: SuperBlock, params: Required) { + return superblock[params.block]; +} + +function findChallenge(block: Block, params: PathSegments) { + const challenge = block.challenges.find( + (c: { dashedName: string }) => c.dashedName == params.dashedName + ); + // TODO: is there a nicer way to handle missing challenges? + if (!challenge) { + throw new Error(`Challenge not found: ${params.id}`); + } + return challenge; +} + +// TODO: again, bit ugly. Would be better to get data in this shape from the +// curriculum server. +export function getIdToDashedNameMap({ + rwdBlocks +}: Curriculum): IdToDashedNameMap { + const idToDashedNameMap: Record = {}; + for (const blockName of Object.keys(rwdBlocks)) { + const block = rwdBlocks[blockName]; + for (const challenge of block.challenges) { + idToDashedNameMap[challenge.id] = challenge.dashedName; + } + } + return idToDashedNameMap; +} diff --git a/web/src/page-templates/challenge.tsx b/web/src/page-templates/challenge.tsx new file mode 100644 index 00000000000..b0f393271ed --- /dev/null +++ b/web/src/page-templates/challenge.tsx @@ -0,0 +1,48 @@ +import { InferGetStaticPropsType } from 'next'; +import { useRouter } from 'next/router'; +import Editor from '@monaco-editor/react'; +import Link from 'next/link'; + +import type { + getStaticProps, + Challenge +} from '../pages/learn/[superblock]/[blockOrId]/[dashedName]/[id]'; + +export default function ChallengeComponent({ + challengeData +}: InferGetStaticPropsType) { + const { isFallback } = useRouter(); + if (isFallback) return
Loading...
; + + return ( + <> +
+ + Go here + + + ); +} + +interface MainProps { + challengeData: Challenge | null; +} + +function Main({ challengeData }: MainProps) { + if (!challengeData || !challengeData?.challengeFiles) return null; + + return ( + <> +
+ + + ); +} diff --git a/web/src/page-templates/superblock.tsx b/web/src/page-templates/superblock.tsx new file mode 100644 index 00000000000..d851dfc3e6e --- /dev/null +++ b/web/src/page-templates/superblock.tsx @@ -0,0 +1,37 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +import { InferGetStaticPropsType } from 'next'; +import Link from 'next/link'; +import { useRouter } from 'next/router'; + +// This is circular, but it's only types. +import type { getStaticProps } from '../pages/learn/[superblock]/[blockOrId]'; + +export default function SuperBlock({ + blockNames, + blockNameToChallengeOrderMap, + idToDashedNameMap +}: InferGetStaticPropsType) { + const { isFallback } = useRouter(); + if (isFallback) return
Loading...
; + + return ( + <> + {blockNames.map(blockName => ( +
    + {blockName} +
      + {blockNameToChallengeOrderMap[blockName].map(([id, title]) => ( +
    • + + {title} + +
      • + ))} +
    +
+ ))} + + ); +} diff --git a/web/src/pages/learn/[...id].tsx b/web/src/pages/learn/[...id].tsx new file mode 100644 index 00000000000..11e6d89efee --- /dev/null +++ b/web/src/pages/learn/[...id].tsx @@ -0,0 +1,56 @@ +import { GetStaticPaths, GetStaticProps } from 'next'; +import { + getCurriculum, + getIdToPathSegmentsMap, + PathSegments +} from '../../data-fetching/get-curriculum'; + +// Next expects there to be a React component to render the page. This never +// happens because getStaticProps either redirects to a 404 or to another page, +// but we still need to provide something: +export default function Catch() { + return null; +} + +export const getStaticProps: GetStaticProps = async ({ params }) => { + const idToPathSegmentsMap = getIdToPathSegmentsMap(await getCurriculum()); + const uuid = params?.id?.slice(-1)[0]; + + if (!uuid) { + return { notFound: true, revalidate: 10 }; + } + // TODO: rather than using path segments, use the whole path. This makes this + // more generic and it's easier to redirect to non-challenge pages. i.e. if we + // have the id of a superblock, it won't have three path segments - it will have + // one. + const pathSegments = idToPathSegmentsMap[uuid]; + if (!pathSegments) { + return { notFound: true, revalidate: 10 }; + } + + return { + redirect: { + destination: getDestination(pathSegments), + permanent: false + }, + revalidate: 10 + }; +}; + +export const getDestination = (pathSegments: PathSegments) => { + const { superblock, block, dashedName, id } = pathSegments; + // Currently there are either + if (block && dashedName) { + // challenges: + return `/learn/${superblock}/${block}/${dashedName}/${id}`; + } else { + // or superblocks: + return `/learn/${superblock}/${id}`; + } +}; + +// As with the page component, even though we render 0 pages, this has to exist +export const getStaticPaths: GetStaticPaths = () => ({ + paths: [], + fallback: true +}); diff --git a/web/src/pages/learn/[superblock]/[blockOrId].tsx b/web/src/pages/learn/[superblock]/[blockOrId].tsx new file mode 100644 index 00000000000..0f24e6a1d99 --- /dev/null +++ b/web/src/pages/learn/[superblock]/[blockOrId].tsx @@ -0,0 +1,93 @@ +import { ParsedUrlQuery } from 'querystring'; +import { GetStaticPaths, GetStaticProps } from 'next'; +import { + getCurriculum, + getIdToDashedNameMap, + getIdToPathSegmentsMap, + PathSegments, + getSuperBlockToBlockMap, + getBlockNameToChallengeOrderMap, + Curriculum +} from '../../../data-fetching/get-curriculum'; +import SuperBlock from '../../../page-templates/superblock'; +import { getDestination } from '../[...id]'; + +interface Props { + blockNames: string[]; + blockNameToChallengeOrderMap: { + [index: string]: [id: string, title: string]; + }; + idToDashedNameMap: { [index: string]: string }; +} + +export default SuperBlock; + +export const getStaticProps: GetStaticProps = async ({ params }) => { + const curriculum = await getCurriculum(); + const idToPathSegmentsMap = getIdToPathSegmentsMap(curriculum); + + // TODO: simplify once noUncheckedIndexedAccess is set. + const pathSegments = idToPathSegmentsMap[params?.blockOrId as string] as + | PathSegments + | undefined; + + if (!pathSegments) return fourOhFour(); + if (pathExists(pathSegments, params)) { + const props = getProps(curriculum); + return renderPage(props); + } else { + return redirect(pathSegments); + } +}; + +const getProps = (curriculum: Curriculum) => { + const idToDashedNameMap = getIdToDashedNameMap(curriculum); + const superBlockToBlockMap = getSuperBlockToBlockMap(curriculum); + + // TODO: figure out how to generate string literal types for these. I think + // the approach has to be to fetch the curriculum and use that to generate a + // type declaration. This won't mean anything in production, but it will be + // helpful when developing. + const blockNames = superBlockToBlockMap['responsive-web-design']; + const blockNameToChallengeOrderMap = getBlockNameToChallengeOrderMap( + curriculum, + blockNames + ); + + return { + blockNames, + blockNameToChallengeOrderMap, + idToDashedNameMap + }; +}; + +const renderPage = (props: Props) => ({ + props, + revalidate: 10 +}); + +const redirect = (pathSegments: PathSegments) => ({ + redirect: { + destination: getDestination(pathSegments), + permanent: false + }, + revalidate: 10 +}); + +// DRY this with [id]'s version +const fourOhFour = () => ({ notFound: true, revalidate: 10 } as const); + +// DRY this with [id]'s version +const pathExists = (pathSegments: PathSegments, params?: ParsedUrlQuery) => { + const isChallenge = pathSegments.dashedName; + const isExpectedSuperBlockParam = + params?.superblock === pathSegments.superblock; + return !isChallenge && isExpectedSuperBlockParam; +}; + +export const getStaticPaths: GetStaticPaths = () => { + return { + paths: ['/learn/responsive-web-design/special-path'], + fallback: true + }; +}; diff --git a/web/src/pages/learn/[superblock]/[blockOrId]/[dashedName]/[id].tsx b/web/src/pages/learn/[superblock]/[blockOrId]/[dashedName]/[id].tsx new file mode 100644 index 00000000000..c84104d88b3 --- /dev/null +++ b/web/src/pages/learn/[superblock]/[blockOrId]/[dashedName]/[id].tsx @@ -0,0 +1,122 @@ +import { ParsedUrlQuery } from 'querystring'; +import { GetStaticPaths, GetStaticProps } from 'next'; + +import { + SuperBlock, + Challenge, + getCurriculum, + getIdToPathSegmentsMap, + PathSegments, + getChallengeData, + Curriculum +} from '../../../../../data-fetching/get-curriculum'; +import ChallengeComponent from '../../../../../page-templates/challenge'; +import { getDestination } from '../../../[...id]'; +interface Props { + challengeData: Challenge; +} + +export type { Challenge }; + +export default ChallengeComponent; + +export const getStaticProps: GetStaticProps = async ({ params }) => { + const curriculum = await getCurriculum(); + const idToPathSegmentsMap = getIdToPathSegmentsMap(curriculum); + + // TODO: simplify once noUncheckedIndexedAccess is set. + const pathSegments = idToPathSegmentsMap[params?.id as string] as + | PathSegments + | undefined; + + if (!pathSegments) return fourOhFour(); + if (pathExists(pathSegments, params)) { + const props = getProps(curriculum, pathSegments); + return renderPage(props); + } else { + return redirect(pathSegments); + } +}; + +const getProps = ( + curriculum: Curriculum, + pathSegments: Required +) => ({ + challengeData: getChallengeData(curriculum, pathSegments) +}); +// DRY this with [blockOrId]'s version +const fourOhFour = () => ({ notFound: true, revalidate: 10 } as const); + +// DRY this with [blockOrId]'s version +const pathExists = ( + pathSegments: PathSegments, + params?: ParsedUrlQuery +): pathSegments is Required => + params?.superblock === pathSegments.superblock && + params?.blockOrId === pathSegments.block && + params?.dashedName === pathSegments.dashedName; + +const renderPage = (props: Props) => ({ + props, + revalidate: 10 +}); + +function redirect(pathSegments: PathSegments) { + return { + redirect: { + destination: getDestination(pathSegments), + permanent: false + }, + revalidate: 10 + }; +} + +export const getStaticPaths: GetStaticPaths = async () => { + const { rwdBlocks } = await getCurriculum(); + + const rwdBlocknames = Object.keys(rwdBlocks); + + // TODO: generalize to all superblocks... OR consider the merits of avoiding + // this entirely. If we skip this the pro is quicker builds and the con is + // that we'd more work onto the webserver. It's probably best to do as much + // work upfront as possible. At least until that upfront work takes too long. + const rwdPaths = rwdBlocknames + .map(name => + rwdBlocks[name].meta.challengeOrder.map(([id]) => + toParams( + 'responsive-web-design', + name, + getDashedName(rwdBlocks, name, id), + id + ) + ) + ) + .flat(); + + return { + paths: rwdPaths, + fallback: true + }; +}; + +function getDashedName(block: SuperBlock, blockName: string, id: string) { + const challenge = block[blockName].challenges.find(c => c.id === id); + if (!challenge) throw Error(`Challenge ${id} not found in ${blockName}`); + return challenge.dashedName; +} + +function toParams( + superblock: string, + block: string, + dashedName: string, + id: string +) { + return { + params: { + superblock, + blockOrId: block, + dashedName, + id + } + }; +} diff --git a/web/tsconfig.json b/web/tsconfig.json new file mode 100644 index 00000000000..edf1ebe902e --- /dev/null +++ b/web/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "lib": ["dom", "dom.iterable", "esnext"], + "incremental": true, + "module": "esnext", + "isolatedModules": true, + "jsx": "preserve" + // "noUncheckedIndexedAccess": true TODO: add this when you've got time to clean up the code + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"], + "extends": "../tsconfig-base.json" +}