Merge pull request #82 from shanedg/guild-data-fetching

Guild data fetching

README.md

@@ -1,6 +1,6 @@
 # trshcmpctr
 
-[![Build Status](https://cloud.drone.io/api/badges/shanedg/trshcmpctr/status.svg)](https://cloud.drone.io/shanedg/trshcmpctr)
+[![GitHub Actions CI (Branch)](https://github.com/shanedg/trshcmpctr/actions/workflows/branch.yml/badge.svg)](https://github.com/shanedg/trshcmpctr/actions/workflows/branch.yml)
 
 all build config, no substance
 

client/__snapshots__/webpack.config.test.js.snap

@@ -2,6 +2,9 @@
 
 exports[`webpackConfig development mode matches snapshot 1`] = `
 {
+  "devServer": {
+    "setupMiddlewares": [Function],
+  },
   "devtool": "eval-source-map",
   "entry": "<PROJECT_ROOT>/src/index.ts",
   "mode": "development",
@@ -13,7 +16,7 @@ exports[`webpackConfig development mode matches snapshot 1`] = `
         "options": {
           "configFile": "<PROJECT_ROOT>/babel.config.cjs",
         },
-        "test": /\\\\\\.\\(js\\|jsx\\|ts\\|tsx\\)\\$/,
+        "test": /\\\\\\.\\(ts\\|tsx\\)\\$/,
       },
       {
         "test": /\\\\\\.css\\$/i,
@@ -69,8 +72,6 @@ exports[`webpackConfig development mode matches snapshot 1`] = `
         "emitError": false,
         "emitWarning": true,
         "extensions": [
-          ".js",
-          ".jsx",
           ".ts",
           ".tsx",
         ],
@@ -121,6 +122,9 @@ exports[`webpackConfig development mode matches snapshot 1`] = `
 
 exports[`webpackConfig production mode matches snapshot 1`] = `
 {
+  "devServer": {
+    "setupMiddlewares": [Function],
+  },
   "devtool": "source-map",
   "entry": "<PROJECT_ROOT>/src/index.ts",
   "mode": "production",
@@ -132,7 +136,7 @@ exports[`webpackConfig production mode matches snapshot 1`] = `
         "options": {
           "configFile": "<PROJECT_ROOT>/babel.config.cjs",
         },
-        "test": /\\\\\\.\\(js\\|jsx\\|ts\\|tsx\\)\\$/,
+        "test": /\\\\\\.\\(ts\\|tsx\\)\\$/,
       },
       {
         "test": /\\\\\\.css\\$/i,
@@ -188,8 +192,6 @@ exports[`webpackConfig production mode matches snapshot 1`] = `
         "emitError": true,
         "emitWarning": false,
         "extensions": [
-          ".js",
-          ".jsx",
           ".ts",
           ".tsx",
         ],

client/package.json

@@ -64,6 +64,7 @@
     "babel-plugin-syntax-dynamic-import": "~6.18.0",
     "css-loader": "~6.8.1",
     "cypress": "11.0.1",
+    "discord-api-types": "~0.37.46",
     "eslint-import-resolver-typescript": "~3.5.1",
     "eslint-plugin-cypress": "~2.13.3",
     "eslint-plugin-eslint-comments": "~3.2.0",
@@ -91,6 +92,7 @@
     "webpack": "~5.88.0"
   },
   "dependencies": {
+    "axios": "~1.4.0",
     "core-js": "~3.31.0",
     "react-dom": "~18.2.0",
     "react": "~18.2.0"

client/src/App/App.tsx

@@ -1,13 +1,31 @@
 import React, { StrictMode } from 'react';
 
 import { Nav } from './Nav';
+import { useGuildMemberData } from './use-guild-member-data';
 import { Welcome } from './Welcome';
 
+type GuildUserData = ReturnType<typeof useGuildMemberData>
+
+const getWelcomeMessage = (guildUser: GuildUserData) => {
+  const welcome = 'welcome to the trash compactor';
+
+  if (guildUser?.user?.username) {
+    return `${welcome}, ${guildUser.user.username}`;
+  }
+
+  return `${welcome}, <unknown>`;
+};
+
 const App = () => {
+  const guildUser = useGuildMemberData();
+
   return (
     <StrictMode>
       <h1>trshcmpctr</h1>
-      <Welcome />
+      {guildUser ?
+        <Welcome message={getWelcomeMessage(guildUser)} /> :
+        <p>loading ...</p>
+      }
       <Nav links={[
         {
           href: '#one',

client/src/App/use-guild-member-data.ts

@@ -0,0 +1,25 @@
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+
+import type { APIGuildMember } from 'discord-api-types/v10';
+
+/**
+ * Custom hook for fetching guild membership data from the authorized endpoint
+ * @returns APIGuildMember | undefined
+ */
+export const useGuildMemberData = () => {
+  const [guildMember, setGuildMember] = useState<APIGuildMember>();
+
+  useEffect(() => {
+    axios.get<APIGuildMember>('/api/v1/authorized')
+      .then(response => setGuildMember(response.data))
+      .catch((cause: unknown) => {
+        throw new Error(
+          'Something went wrong fetching guild membership data',
+          { cause }
+        );
+      });
+  }, []);
+
+  return guildMember;
+};

client/webpack.config.js

@@ -23,6 +23,29 @@ export default (env = {}, argv = {}) => {
   const isProduction = getMode(env.production) === 'production';
 
   return {
+    devServer: {
+      setupMiddlewares: (middlewares, devServer) => {
+        if (!devServer) {
+          throw new Error('missing webpack-dev-server');
+        }
+
+        // Mock successful request for authorized user data
+        middlewares.push({
+          name: 'mock-api-authorized',
+          path: '/api/v1/authorized',
+          middleware: (_request, response) => {
+            response.send({
+              user: {
+                username: '<mocked_user_name>',
+              },
+            });
+          }
+        });
+
+        return middlewares;
+      },
+    },
+
     devtool: isProduction ? 'source-map' : 'eval-source-map',
 
     entry: resolve(__dirname, './src/index.ts'),
@@ -32,8 +55,9 @@ export default (env = {}, argv = {}) => {
     module: {
       rules: [
         {
-          test: /\.(js|jsx|ts|tsx)$/,
+          test: /\.(ts|tsx)$/,
           exclude: /node_modules/,
+          // TODO: consider replacing babel with swc
           loader: 'babel-loader',
           options: {
             configFile: resolve(__dirname, 'babel.config.cjs'),
@@ -82,7 +106,7 @@ export default (env = {}, argv = {}) => {
         cacheLocation: 'node_modules/.cache/eslint-cache/',
         emitError: isProduction,
         emitWarning: !isProduction,
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        extensions: ['.ts', '.tsx'],
         failOnError: isProduction,
         lintDirtyModulesOnly: !!argv.watch,
         reportUnusedDisableDirectives: !isProduction ? 'warn' : null,

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": "3adf0b05614697d624c1ad6844170426031fc14c",
+  "pnpmShrinkwrapHash": "d334d837e74544846977206dddd7b9f5c97f6230",
   "preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f"
 }

discord/lib/server.js

@@ -39,8 +39,8 @@ app.engine('html', handlebarsForExpress);
 
 app.use(pinoLogger);
 
-// 1 minute
-const sessionLength = 60 * 1000;
+// TODO: control session length with env variable
+const sessionLength = 10 * 60 * 1000; // 10 minutes
 // 7 * 24 * 60 * 60 * 1000 // 1 week (how long tokens are valid)
 
 const sessionStore = nedbStorage(expressSesssion);