refactor: Ensure crypto is not browserified

.gitignore

@@ -41,3 +41,6 @@ yarn-error.log*
 
 # decks-output
 dist
+
+# next bundle analyzer output
+analyze

demo-app/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

demo-app/next.config.js

@@ -1,3 +1,8 @@
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled:
+    process.env.ANALYZE === "true" && process.env.NODE_ENV === "production",
+});
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -9,4 +14,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withBundleAnalyzer(nextConfig);

demo-app/package.json

@@ -11,22 +11,23 @@
   "dependencies": {
     "@reach/dialog": "0.16.2",
     "framer-motion": "6.2.8",
-    "jose": "4.6.0",
+    "jose": "4.13.1",
     "nanoid": "3.3.1",
     "nes.css": "2.3.0",
-    "next": "12.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "next": "13.2.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "styled-components": "5.3.3",
     "superstruct": "0.15.4",
     "swr": "1.2.2"
   },
   "devDependencies": {
+    "@next/bundle-analyzer": "13.2.4",
     "@types/node": "17.0.21",
     "@types/react": "17.0.40",
     "@types/styled-components": "5.1.24",
     "eslint": "8.11.0",
-    "eslint-config-next": "12.1.0",
+    "eslint-config-next": "13.2.4",
     "eslint-plugin-import": "^2.25.4",
     "typescript": "4.6.2"
   }

demo-app/src/components/CaptureDialog.tsx

@@ -46,10 +46,8 @@ export const CaptureDialog = ({
     )}
 
     <ButtonGroup gap="1rem">
-      <Link href={`/pokemon/${captured?.id}`}>
-        <a className="nes-btn is-primary">
-          <span className="capitalize">{captured?.name}</span>
-        </a>
+      <Link href={`/pokemon/${captured?.id}`} className="nes-btn is-primary">
+        <span className="capitalize">{captured?.name}</span>
       </Link>
 
       <button className="nes-btn is-error" onClick={onDismiss}>

demo-app/src/components/Navigation.tsx

@@ -41,22 +41,24 @@ export const Navigation = () => {
     <StyledNav>
       <ul>
         <li>
-          <Link href="/">
-            <a className={getAnchorClassName(pathname === "/")}>Home</a>
+          <Link href="/" className={getAnchorClassName(pathname === "/")}>
+            Home
           </Link>
         </li>
         <li>
-          <Link href="/pokemon/capture">
-            <a className={getAnchorClassName(pathname === "/pokemon/capture")}>
-              Capture
-            </a>
+          <Link
+            href="/pokemon/capture"
+            className={getAnchorClassName(pathname === "/pokemon/capture")}
+          >
+            Capture
           </Link>
         </li>
         <li>
-          <Link href="/collection">
-            <a className={getAnchorClassName(pathname === "/collection")}>
-              Collection
-            </a>
+          <Link
+            href="/collection"
+            className={getAnchorClassName(pathname === "/collection")}
+          >
+            Collection
           </Link>
         </li>
       </ul>

demo-app/src/components/PokeArticle.tsx

@@ -18,9 +18,7 @@ const SimplePokeCard = ({ pokemon, qty }: PokeCardProps) => {
         <h1 className="capitalize">{pokemon.name}</h1>
 
         <Link href={`/pokemon/${pokemon.id}`}>
-          <a>
-            <span className="nes-text is-primary">#{pokemon.id}</span>
-          </a>
+          <span className="nes-text is-primary">#{pokemon.id}</span>
         </Link>
       </header>
 

demo-app/src/hooks/usePokemon.ts

@@ -1,7 +1,7 @@
 import { assert } from "superstruct";
 import useSWRImmutable from "swr/immutable";
 
-import { pokeEp } from "lib/pokemon";
+import { pokeEp } from "lib/constants";
 import { Pokemon } from "types";
 
 export type Poke = Omit<Pokemon, "captureRate">;

demo-app/src/lib/constants.ts

@@ -1 +1,4 @@
 export const SUPPORTED_POKEMON = 251;
+
+export const specieEP = "https://pokeapi.co/api/v2/pokemon-species";
+export const pokeEp = "https://pokeapi.co/api/v2/pokemon";

demo-app/src/lib/pokemon.ts

@@ -2,11 +2,9 @@ import crypto from "crypto";
 
 import { assert } from "superstruct";
 
+import { pokeEp, specieEP } from "lib/constants";
 import { Pokemon } from "types";
 
-export const specieEP = "https://pokeapi.co/api/v2/pokemon-species";
-export const pokeEp = "https://pokeapi.co/api/v2/pokemon";
-
 export const catchPokemon = async (id: number | string) => {
   const specie = await fetch(`${specieEP}/${id}`);
   const specieData = await specie.json();

demo-app/src/lib/token.ts

@@ -49,7 +49,7 @@ export const createUserToken = (pokemonDb?: string, jti?: string) =>
     .sign(new TextEncoder().encode(JWT_SECRET_KEY));
 
 type GuardCookieProps<OnGuarded = unknown, OnPass = unknown> = {
-  token: string | undefined;
+  token: string | undefined | null;
   onGuarded: (token: string) => OnGuarded;
   onPassThrough: () => OnPass;
 };

demo-app/src/pages/_middleware.ts → demo-app/src/middleware.ts

@@ -18,11 +18,11 @@ export async function middleware(req: NextRequest) {
 
   try {
     const result = await guardUserToken({
-      token: req.cookies[USER_TOKEN],
+      token: req.cookies.get(USER_TOKEN)?.value,
       onGuarded: (token) => {
         const response = NextResponse.next();
 
-        response.cookie(USER_TOKEN, token, {
+        response.cookies.set(USER_TOKEN, token, {
           httpOnly: true,
           maxAge: 2592000 * 12,
         });

demo-app/src/pages/collection.tsx

@@ -1,7 +1,8 @@
 import { useMemo, useState } from "react";
 
-import type { GetServerSideProps, InferGetServerSidePropsType } from "next";
+import type { GetServerSideProps } from "next";
 import Head from "next/head";
+import Link from "next/link";
 
 import { ButtonGroup } from "components/ButtonGroup";
 import { CollectionGrid } from "components/CollectionGrid";
@@ -19,9 +20,11 @@ const getAriaProps = ({ page, index }: { page: number; index: number }) =>
     "aria-current": page === index ? "true" : "false",
   } as const);
 
-export const PokeCollection = ({
-  collection,
-}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+type CollectionProps = {
+  collection: Array<{ value: number; id: number }>;
+};
+
+export const PokeCollection = ({ collection }: CollectionProps) => {
   const totalPages = Math.ceil(collection.length / ITEMS_PER_PAGE);
 
   const [page, setPage] = useState(0);
@@ -60,24 +63,31 @@ export const PokeCollection = ({
           ))}
         </ButtonGroup>
 
-        <CollectionGrid>
-          {collection
-            .slice(page * ITEMS_PER_PAGE, (page + 1) * ITEMS_PER_PAGE)
-            .map(({ value, id }) => (
-              <article key={id}>
-                <PokeArticle id={id} value={value} />
-              </article>
-            ))}
-        </CollectionGrid>
+        {collection.length === 0 ? (
+          <section>
+            <h1>Empty Collection</h1>
+
+            <p>
+              You collection is empty! Try to{" "}
+              <Link href="/pokemon/capture">capture</Link> some Pokémon!
+            </p>
+          </section>
+        ) : (
+          <CollectionGrid>
+            {collection
+              .slice(page * ITEMS_PER_PAGE, (page + 1) * ITEMS_PER_PAGE)
+              .map(({ value, id }) => (
+                <article key={id}>
+                  <PokeArticle id={id} value={value} />
+                </article>
+              ))}
+          </CollectionGrid>
+        )}
       </section>
     </>
   );
 };
 
-type CollectionProps = {
-  collection: Array<{ value: number; id: number }>;
-};
-
 export const getServerSideProps: GetServerSideProps<CollectionProps> = async (
   ctx
 ) => {

demo-app/src/pages/index.tsx

@@ -16,15 +16,9 @@ export const Home = () => {
         <h1>Poké Adventure</h1>
 
         <p>
-          Try to capture Pokémon in{" "}
-          <Link href="/pokemon/capture">
-            <a>Capture</a>
-          </Link>
+          Try to capture Pokémon in <Link href="/pokemon/capture">Capture</Link>
           , and view your collection in{" "}
-          <Link href="/collection">
-            <a>Collection</a>
-          </Link>
-          .
+          <Link href="/collection">Collection</Link>.
         </p>
 
         <Notice>
@@ -51,10 +45,7 @@ export const Home = () => {
             {SUPPORTED_POKEMON} Pokémon
           </span>
           . However, you can view information for any Pokémon at{" "}
-          <Link href="/pokemon/1">
-            <a>/pokemon/[id]</a>
-          </Link>
-          .
+          <Link href="/pokemon/1">/pokemon/[id]</Link>.
         </p>
 
         <Notice>
@@ -93,24 +84,16 @@ export const Home = () => {
         <h3>Pages</h3>
         <ul className="nes-list is-circle">
           <li>
-            <Link href="/">
-              <a>Landing Page</a>
-            </Link>
+            <Link href="/">Landing Page</Link>
           </li>
           <li>
-            <Link href="/pokemon/4">
-              <a>Pokémon view</a>
-            </Link>
+            <Link href="/pokemon/4">Pokémon view</Link>
           </li>
           <li>
-            <Link href="/pokemon/capture">
-              <a>Pokémon Capture</a>
-            </Link>
+            <Link href="/pokemon/capture">Pokémon Capture</Link>
           </li>
           <li>
-            <Link href="/collection">
-              <a>Personal Collection</a>
-            </Link>
+            <Link href="/collection">Personal Collection</Link>
           </li>
         </ul>
 
@@ -161,7 +144,12 @@ export const Home = () => {
 
         <figure className="nes-container with-title">
           <figcaption className="title">Application Data Flow</figcaption>
-          <NextImage src="/architecture.png" width="1148" height="851" />
+          <NextImage
+            src="/architecture.png"
+            width="1148"
+            height="851"
+            alt="Project architecture - data flow"
+          />
         </figure>
       </section>
     </>