From 0ad3d6f8d83436ad70d53075cbc92c5cea1d6eec Mon Sep 17 00:00:00 2001
From: Shane Garrity <shanedgarrity@gmail.com>
Date: Fri, 30 Jun 2023 18:41:19 -0400
Subject: [PATCH 1/4] feat(client): scaffold world table

---
 .../__snapshots__/webpack.config.test.js.snap |   2 +
 client/package.json                           |   2 +
 client/src/App/App.tsx                        | 123 +++++++++++++++---
 client/webpack.config.js                      |   2 +
 common/config/rush/pnpm-lock.yaml             |  51 ++++++++
 common/config/rush/repo-state.json            |   2 +-
 6 files changed, 161 insertions(+), 21 deletions(-)

diff --git a/client/__snapshots__/webpack.config.test.js.snap b/client/__snapshots__/webpack.config.test.js.snap
index aae1fccf..010ceb60 100644
--- a/client/__snapshots__/webpack.config.test.js.snap
+++ b/client/__snapshots__/webpack.config.test.js.snap
@@ -3,6 +3,7 @@
 exports[`webpackConfig development mode matches snapshot 1`] = `
 {
   "devServer": {
+    "historyApiFallback": true,
     "setupMiddlewares": [Function],
   },
   "devtool": "eval-source-map",
@@ -123,6 +124,7 @@ exports[`webpackConfig development mode matches snapshot 1`] = `
 exports[`webpackConfig production mode matches snapshot 1`] = `
 {
   "devServer": {
+    "historyApiFallback": true,
     "setupMiddlewares": [Function],
   },
   "devtool": "source-map",
diff --git a/client/package.json b/client/package.json
index 5886e352..c52da2a5 100644
--- a/client/package.json
+++ b/client/package.json
@@ -55,6 +55,7 @@
     "@types/jest": "~29.5.2",
     "@types/node": "~16.18.3",
     "@types/react-dom": "~18.2.6",
+    "@types/react-router-dom": "~5.3.3",
     "@types/react": "~18.2.14",
     "@types/testing-library__jest-dom": "~5.14.5",
     "@typescript-eslint/eslint-plugin": "~5.60.0",
@@ -95,6 +96,7 @@
     "axios": "~1.4.0",
     "core-js": "~3.31.0",
     "react-dom": "~18.2.0",
+    "react-router-dom": "~6.14.0",
     "react": "~18.2.0"
   }
 }
diff --git a/client/src/App/App.tsx b/client/src/App/App.tsx
index 0e48f18a..7f689c9f 100644
--- a/client/src/App/App.tsx
+++ b/client/src/App/App.tsx
@@ -1,10 +1,10 @@
 import React, { StrictMode } from 'react';
+import { createBrowserRouter, RouterProvider, Link, useParams, Outlet } from 'react-router-dom';
 
-import { Nav } from './Nav';
 import { useGuildMemberData } from './use-guild-member-data';
 import { Welcome } from './Welcome';
 
-type GuildUserData = ReturnType<typeof useGuildMemberData>
+type GuildUserData = ReturnType<typeof useGuildMemberData>;
 
 const getWelcomeMessage = (guildUser: GuildUserData) => {
   const welcome = 'welcome to the trash compactor';
@@ -16,29 +16,112 @@ const getWelcomeMessage = (guildUser: GuildUserData) => {
   return `${welcome}, <unknown>`;
 };
 
-const App = () => {
+const Home = () => {
   const guildUser = useGuildMemberData();
 
+  if (guildUser) {
+    return (
+      <>
+        <Link to="/worlds">worlds</Link>
+        <Welcome message={getWelcomeMessage(guildUser)} />
+      </>
+    );
+  }
+
+  return (<p>loading...</p>);
+};
+
+const WorldsList = () => {
+  const fakeWorlds = [
+    {
+      id: 1,
+      label: 'world one',
+      version: '1.16.5',
+      createdAt: '2023/06/28',
+      lastOnline: '2023/06/28',
+      createdBy: '@shaned.gg'
+    },
+    {
+      id: 2,
+      label: 'world two',
+      version: '1.19.0',
+      createdAt: '2023/06/28',
+      lastOnline: '2023/06/28',
+      createdBy: '@shaned.gg'
+    },
+    {
+      id: 3,
+      label: 'world three',
+      version: '1.20.1',
+      createdAt: '2023/06/28',
+      lastOnline: '2023/06/28',
+      createdBy: '@shaned.gg'
+    },
+  ];
+
+  return (
+    <>
+      <Link to="/">back</Link>
+      <table>
+        <thead>
+          <tr>
+            <td>name</td>
+            <td>version</td>
+            <td>created</td>
+            <td>last online</td>
+            <td>created by</td>
+          </tr>
+        </thead>
+        <tbody>
+          {fakeWorlds.map(({ id, label, version, createdAt, createdBy, lastOnline }) => {
+            return (
+              <tr key={`${id}-${label}-${version}`}>
+                <td><Link to={`${id}`}>{label}</Link></td>
+                <td>{version}</td>
+                <td>{new Date(createdAt).toLocaleDateString()}</td>
+                <td>{new Date(lastOnline).toLocaleDateString()}</td>
+                <td>{createdBy}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      <Outlet />
+    </>
+  );
+};
+
+const WorldDetail = () => {
+  const { worldId } = useParams();
+  return (
+    <>
+      <h2>{worldId}</h2>
+    </>
+  );
+};
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Home />,
+  },
+  {
+    path: '/worlds',
+    element: <WorldsList />,
+    children: [
+      {
+        path: ':worldId',
+        element: <WorldDetail />
+      },
+    ],
+  },
+]);
+
+const App = () => {
   return (
     <StrictMode>
       <h1>trshcmpctr</h1>
-      {guildUser ?
-        <Welcome message={getWelcomeMessage(guildUser)} /> :
-        <p>loading ...</p>
-      }
-      <Nav links={[
-        {
-          href: '#one',
-          label: 'one'
-        },
-        {
-          href: '#two',
-        },
-        {
-          href: '#three',
-          label: 'three'
-        },
-      ]} />
+      <RouterProvider router={router} />
     </StrictMode>
   );
 };
diff --git a/client/webpack.config.js b/client/webpack.config.js
index ab47f9b1..fb977887 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -44,6 +44,8 @@ export default (env = {}, argv = {}) => {
   
         return middlewares;
       },
+
+      historyApiFallback: true
     },
 
     devtool: isProduction ? 'source-map' : 'eval-source-map',
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index 084128dd..6754537a 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -25,6 +25,7 @@ importers:
       '@types/node': ~16.18.3
       '@types/react': ~18.2.14
       '@types/react-dom': ~18.2.6
+      '@types/react-router-dom': ~5.3.3
       '@types/testing-library__jest-dom': ~5.14.5
       '@typescript-eslint/eslint-plugin': ~5.60.0
       '@typescript-eslint/parser': ~5.60.0
@@ -55,6 +56,7 @@ importers:
       markdownlint-cli2: ~0.8.1
       react: ~18.2.0
       react-dom: ~18.2.0
+      react-router-dom: ~6.14.0
       start-server-and-test: ~2.0.0
       style-loader: ~3.3.1
       terser-webpack-plugin: ~5.3.1
@@ -68,6 +70,7 @@ importers:
       core-js: 3.31.0
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
+      react-router-dom: 6.14.0_biqbaboplfbrettd7655fr4n2y
     devDependencies:
       '@babel/core': 7.22.5
       '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.22.5
@@ -87,6 +90,7 @@ importers:
       '@types/node': 16.18.36
       '@types/react': 18.2.14
       '@types/react-dom': 18.2.6
+      '@types/react-router-dom': 5.3.3
       '@types/testing-library__jest-dom': 5.14.6
       '@typescript-eslint/eslint-plugin': 5.60.0_6yzi2ymi2jevhjfd3hf6w262e4
       '@typescript-eslint/parser': 5.60.0_7yfldhli4vs6yywnkyiujhawka
@@ -2121,6 +2125,11 @@ packages:
       tslib: 2.5.3
     dev: true
 
+  /@remix-run/router/1.7.0:
+    resolution: {integrity: sha512-Eu1V3kz3mV0wUpVTiFHuaT8UD1gj/0VnoFHQYX35xlslQUpe8CuYoKFn9d4WZFHm3yDywz6ALZuGdnUPKrNeAw==}
+    engines: {node: '>=14'}
+    dev: false
+
   /@sideway/address/4.1.4:
     resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
     dependencies:
@@ -2320,6 +2329,10 @@ packages:
     dependencies:
       '@types/node': 16.18.36
 
+  /@types/history/4.7.11:
+    resolution: {integrity: sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==}
+    dev: true
+
   /@types/html-minifier-terser/6.1.0:
     resolution: {integrity: sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==}
     dev: true
@@ -2421,6 +2434,21 @@ packages:
       '@types/react': 18.2.14
     dev: true
 
+  /@types/react-router-dom/5.3.3:
+    resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
+    dependencies:
+      '@types/history': 4.7.11
+      '@types/react': 18.2.14
+      '@types/react-router': 5.1.20
+    dev: true
+
+  /@types/react-router/5.1.20:
+    resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
+    dependencies:
+      '@types/history': 4.7.11
+      '@types/react': 18.2.14
+    dev: true
+
   /@types/react/18.2.14:
     resolution: {integrity: sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==}
     dependencies:
@@ -8525,6 +8553,29 @@ packages:
   /react-is/18.2.0:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
 
+  /react-router-dom/6.14.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-YEwlApKwzMMMbGbhh+Q7MsloTldcwMgHxUY/1g0uA62+B1hZo2jsybCWIDCL8zvIDB1FA0pBKY9chHbZHt+2dQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.7.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-router: 6.14.0_react@18.2.0
+    dev: false
+
+  /react-router/6.14.0_react@18.2.0:
+    resolution: {integrity: sha512-OD+vkrcGbvlwkspUFDgMzsu1RXwdjNh83YgG/28lBnDzgslhCgxIqoExLlxsfTpIygp7fc+Hd3esloNwzkm2xA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.7.0
+      react: 18.2.0
+    dev: false
+
   /react/18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
diff --git a/common/config/rush/repo-state.json b/common/config/rush/repo-state.json
index 8dcf36e9..8a385ba8 100644
--- a/common/config/rush/repo-state.json
+++ b/common/config/rush/repo-state.json
@@ -1,5 +1,5 @@
 // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush.
 {
-  "pnpmShrinkwrapHash": "d334d837e74544846977206dddd7b9f5c97f6230",
+  "pnpmShrinkwrapHash": "19705baa84b9e54db31ec609d8883f403e7c754c",
   "preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f"
 }

From d9dbe9b8fbe074b2f8e96191864164fa7dfa4e46 Mon Sep 17 00:00:00 2001
From: Shane Garrity <shanedgarrity@gmail.com>
Date: Sat, 8 Jul 2023 16:46:55 -0400
Subject: [PATCH 2/4] feat(client): scaffold new world screen

---
 client/__mocks__/styleMock.cjs |  2 ++
 client/jest.config.js          |  4 ++++
 client/src/App/App.css         |  3 +++
 client/src/App/App.tsx         | 43 +++++++++++++++++++++++++++++++---
 4 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 client/__mocks__/styleMock.cjs
 create mode 100644 client/src/App/App.css

diff --git a/client/__mocks__/styleMock.cjs b/client/__mocks__/styleMock.cjs
new file mode 100644
index 00000000..52b96d7d
--- /dev/null
+++ b/client/__mocks__/styleMock.cjs
@@ -0,0 +1,2 @@
+// https://jestjs.io/docs/webpack#handling-static-assets
+module.exports = {};
diff --git a/client/jest.config.js b/client/jest.config.js
index 29aaa8ae..607ab7eb 100644
--- a/client/jest.config.js
+++ b/client/jest.config.js
@@ -22,4 +22,8 @@ export default {
   collectCoverage: true,
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
+  moduleNameMapper: {
+    // See https://jestjs.io/docs/webpack#handling-static-assets
+    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.cjs',
+  },
 };
diff --git a/client/src/App/App.css b/client/src/App/App.css
new file mode 100644
index 00000000..3f5a02c9
--- /dev/null
+++ b/client/src/App/App.css
@@ -0,0 +1,3 @@
+.navigation-list {
+  list-style-type: none;
+}
diff --git a/client/src/App/App.tsx b/client/src/App/App.tsx
index 7f689c9f..7ef036e1 100644
--- a/client/src/App/App.tsx
+++ b/client/src/App/App.tsx
@@ -1,6 +1,7 @@
 import React, { StrictMode } from 'react';
 import { createBrowserRouter, RouterProvider, Link, useParams, Outlet } from 'react-router-dom';
 
+import './App.css';
 import { useGuildMemberData } from './use-guild-member-data';
 import { Welcome } from './Welcome';
 
@@ -22,7 +23,14 @@ const Home = () => {
   if (guildUser) {
     return (
       <>
-        <Link to="/worlds">worlds</Link>
+        <ul className="navigation-list">
+          <li>
+            <Link to="/new">new</Link>
+          </li>
+          <li>
+            <Link to="/worlds">worlds</Link>
+          </li>
+        </ul>
         <Welcome message={getWelcomeMessage(guildUser)} />
       </>
     );
@@ -61,7 +69,11 @@ const WorldsList = () => {
 
   return (
     <>
-      <Link to="/">back</Link>
+      <ul className="navigation-list">
+        <li>
+          <Link to="/">back</Link>
+        </li>
+      </ul>
       <table>
         <thead>
           <tr>
@@ -100,6 +112,27 @@ const WorldDetail = () => {
   );
 };
 
+const NewWorld = () => {
+  return (
+    <>
+      <ul className="navigation-list">
+        <li>
+          <Link to="/">back</Link>
+        </li>
+      </ul>
+      <form>
+        <label htmlFor="version">version</label>
+        <select name="version">
+          <option>1.20.1</option>
+        </select>
+        <label htmlFor="name">name</label>
+        <input name="name" />
+        <button>create</button>
+      </form>
+    </>
+  );
+};
+
 const router = createBrowserRouter([
   {
     path: '/',
@@ -111,10 +144,14 @@ const router = createBrowserRouter([
     children: [
       {
         path: ':worldId',
-        element: <WorldDetail />
+        element: <WorldDetail />,
       },
     ],
   },
+  {
+    path: '/new',
+    element: <NewWorld />,
+  },
 ]);
 
 const App = () => {

From f7371af53b0cc63888f393ff2c374e1d577f860d Mon Sep 17 00:00:00 2001
From: Shane Garrity <shanedgarrity@gmail.com>
Date: Sat, 8 Jul 2023 16:48:38 -0400
Subject: [PATCH 3/4] feat(client): show loading message with delay

---
 client/src/App/App.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/client/src/App/App.tsx b/client/src/App/App.tsx
index 7ef036e1..61c67adf 100644
--- a/client/src/App/App.tsx
+++ b/client/src/App/App.tsx
@@ -1,4 +1,4 @@
-import React, { StrictMode } from 'react';
+import React, { StrictMode, useEffect, useState } from 'react';
 import { createBrowserRouter, RouterProvider, Link, useParams, Outlet } from 'react-router-dom';
 
 import './App.css';
@@ -17,6 +17,23 @@ const getWelcomeMessage = (guildUser: GuildUserData) => {
   return `${welcome}, <unknown>`;
 };
 
+const DelayedLoadingMessage = () => {
+  const [showLoading, setShowLoading] = useState(false);
+
+  useEffect(() => {
+    // Showing a loading message right away contributes to worse perceived performance
+    const timeout = setTimeout(() => setShowLoading(true), 500);
+
+    return () => clearTimeout(timeout);
+  });
+
+  if (showLoading) {
+    return (<p>loading...</p>);
+  }
+
+  return null;
+};
+
 const Home = () => {
   const guildUser = useGuildMemberData();
 
@@ -36,7 +53,7 @@ const Home = () => {
     );
   }
 
-  return (<p>loading...</p>);
+  return (<DelayedLoadingMessage />);
 };
 
 const WorldsList = () => {

From 18cc6a95b000280c24a86f9eaf418ba0bf3e176f Mon Sep 17 00:00:00 2001
From: Shane Garrity <shanedgarrity@gmail.com>
Date: Sat, 8 Jul 2023 16:49:09 -0400
Subject: [PATCH 4/4] feat(client): avoid duplicate network requests

Cache result of network requests indefinitely within a session
Avoid triggering duplicate requests between rerenders
---
 client/src/App/use-guild-member-data.ts | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/client/src/App/use-guild-member-data.ts b/client/src/App/use-guild-member-data.ts
index a3a91fb3..661fe053 100644
--- a/client/src/App/use-guild-member-data.ts
+++ b/client/src/App/use-guild-member-data.ts
@@ -3,17 +3,39 @@ import { useEffect, useState } from 'react';
 
 import type { APIGuildMember } from 'discord-api-types/v10';
 
+const cache = {} as { guildMember?: APIGuildMember };
+let isFetching = false;
+
 /**
  * Custom hook for fetching guild membership data from the authorized endpoint
+ * Caches the returned membership data for the length of the current session
  * @returns APIGuildMember | undefined
  */
 export const useGuildMemberData = () => {
   const [guildMember, setGuildMember] = useState<APIGuildMember>();
 
   useEffect(() => {
+    // Avoid triggering duplicate fetch requests between renders
+    if (isFetching) {
+      return;
+    }
+
+    isFetching = true;
+
+    if (cache.guildMember) {
+      setGuildMember(cache.guildMember);
+      isFetching = false;
+      return;
+    }
+
     axios.get<APIGuildMember>('/api/v1/authorized')
-      .then(response => setGuildMember(response.data))
+      .then(response => {
+        cache.guildMember = response.data;
+        setGuildMember(response.data);
+        isFetching = false;
+      })
       .catch((cause: unknown) => {
+        isFetching = false;
         throw new Error(
           'Something went wrong fetching guild membership data',
           { cause }