Large changes - updating pattern with a few new features

client/Dockerfile

@@ -1,7 +1,8 @@
-FROM node:10.15.3-alpine
+FROM node:14.21.3-alpine
 
 COPY ["package.json", "/opt/client/"]
 COPY ["package-lock.json", "/opt/client/"]
+COPY ["tsconfig.json", "/opt/client/"]
 
 WORKDIR /opt/client
 

client/package.json

@@ -3,24 +3,27 @@
   "version": "1.0.7",
   "private": true,
   "dependencies": {
-    "@types/react": "^17.0.11",
+    "@types/react": "^17.0.75",
     "@types/react-dom": "^17.0.7",
+    "@types/react-table": "^7.7.19",
     "axios": "^0.21.4",
     "date-fns": "^1.30.1",
-    "plaid": "^9.3.0",
-    "plaid-threads": "^11.4.3",
+    "node": "^21.2.0",
+    "plaid": "^18.3.0",
+    "plaid-threads": "^11.5.0",
     "prop-types": "^15.7.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-plaid-link": "^3.2.1",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^5.3.4",
     "react-router-hash-link": "^2.4.3",
-    "react-scripts": "4.0.1",
-    "react-toastify": "^5.1.0",
+    "react-scripts": "^5.0.1",
+    "react-table": "^7.8.0",
+    "react-table-filter": "^2.0.2",
+    "react-toastify": "^5.5.0",
     "recharts": "^2.0.9",
-    "sass": "^1.42.1",
-    "socket.io-client": "^2.2.0",
-    "typescript": "^4.3.2"
+    "sass": "^1.70.0",
+    "socket.io-client": "^4.7.4"
   },
   "scripts": {
     "start": "PORT=3001 react-scripts start",
@@ -47,13 +50,15 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/lodash": "^4.14.170",
     "@types/node": "^15.14.0",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-router-hash-link": "^2.4.0",
     "@types/socket.io-client": "^3.0.0",
-    "eslint-plugin-prettier": "^3.0.1",
-    "prettier": "^1.16.4"
+    "eslint-plugin-prettier": "^5.0.0",
+    "prettier": "^3.2.4",
+    "typescript": "^4.9.5"
   },
   "resolutions": {
     "immer": "9.0.6",

client/src/App.scss

@@ -361,6 +361,22 @@ transactions-table
 
 /*
 
+transactions-page
+
+*/
+
+.transactions-page tr:nth-child(odd) {
+  /* Odd rows */
+  background-color: white;
+}
+
+.transactions-page tr:nth-child(even) {
+  /* Even rows */
+  background-color: lightblue;
+}
+
+/*
+
 More Details
 
 */

client/src/App.tsx

@@ -3,7 +3,15 @@ import { Route, Switch, withRouter } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.min.css';
 
-import { UserPage, Landing, Sockets, OAuthLink, UserList } from './components';
+import {
+  UserPage,
+  Landing,
+  Sockets,
+  OAuthLink,
+  UserList,
+  TransactionsPage,
+} from './components';
+
 import { AccountsProvider } from './services/accounts';
 import { InstitutionsProvider } from './services/institutions';
 import { ItemsProvider } from './services/items';
@@ -42,6 +50,10 @@ function App() {
                           <Route path="/user/:userId" component={UserPage} />
                           <Route path="/oauth-link" component={OAuthLink} />
                           <Route path="/admin" component={UserList} />
+                          <Route
+                            path="/transactions/:userId"
+                            component={TransactionsPage}
+                          />
                         </Switch>
                       </AssetsProvider>
                     </CurrentUserProvider>

client/src/components/Banner.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import Button from 'plaid-threads/Button';
 
 const PLAID_ENV = process.env.REACT_APP_PLAID_ENV;
 
@@ -21,16 +20,6 @@ const Banner = (props: Props) => {
       <h4>{PLAID_ENV} user</h4>
       <div className="header">
         <h1 className="everpresent-content__heading">Plaid Pattern</h1>
-        <Button
-          href="https://docs.google.com/forms/d/e/1FAIpQLSfF4Xev5w9RPGr7fNkSHjmtE_dj0ELuHRbDexQ7Tg2xoo6tQg/viewform"
-          target="_blank"
-          rel="noopener noreferrer"
-          inline
-          centered
-          secondary
-        >
-          Provide feedback on this Plaid Pattern sample app
-        </Button>
       </div>
       <p id="intro" className="everpresent-content__subheading">
         {subheadingText}

client/src/components/ItemCard.tsx

@@ -40,11 +40,8 @@ const ItemCard = (props: Props) => {
   const { deleteAccountsByItemId } = useAccounts();
   const { deleteItemById } = useItems();
   const { deleteTransactionsByItemId } = useTransactions();
-  const {
-    institutionsById,
-    getInstitutionById,
-    formatLogoSrc,
-  } = useInstitutions();
+  const { institutionsById, getInstitutionById, formatLogoSrc } =
+    useInstitutions();
   const { id, plaid_institution_id, status } = props.item;
   const isSandbox = PLAID_ENV === 'sandbox';
   const isGoodState = status === 'good';

client/src/components/Sockets.jsx

@@ -3,7 +3,7 @@ import { toast } from 'react-toastify';
 
 import { useAccounts, useItems, useTransactions } from '../services';
 const io = require('socket.io-client');
-const { REACT_APP_SERVER_PORT } = process.env;
+const { REACT_APP_SERVER } = process.env;
 
 export default function Sockets() {
   const socket = useRef();
@@ -12,7 +12,7 @@ export default function Sockets() {
   const { getItemById } = useItems();
 
   useEffect(() => {
-    socket.current = io(`http://localhost:${REACT_APP_SERVER_PORT}`);
+    socket.current = io(REACT_APP_SERVER);
 
     socket.current.on('SYNC_UPDATES_AVAILABLE', ({ itemId } = {}) => {
       const msg = `New Webhook Event: Item ${itemId}: Transactions updates`;