Attempt to update deps (does not work), see description

client/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10.15.3-alpine
+FROM node:18-alpine
 
 COPY ["package.json", "/opt/client/"]
 COPY ["package-lock.json", "/opt/client/"]

client/package.json

@@ -8,19 +8,19 @@
     "@types/react-dom": "^17.0.7",
     "axios": "^0.21.1",
     "date-fns": "^1.30.1",
-    "plaid": "^9.3.0",
+    "plaid": "^30.0.0",
     "plaid-threads": "^11.5.0",
     "prop-types": "^15.7.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-plaid-link": "^3.2.1",
     "react-router-dom": "^5.1.2",
     "react-router-hash-link": "^2.4.3",
-    "react-scripts": "4.0.1",
+    "react-scripts": "^5.0.1",
     "react-toastify": "^5.1.0",
     "recharts": "^2.0.9",
     "sass": "^1.42.1",
-    "socket.io-client": "^2.2.0",
+    "socket.io-client": "^4.8.1",
     "typescript": "^4.3.2"
   },
   "scripts": {
@@ -53,7 +53,8 @@
     "@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"
+    "prettier": "^1.16.4",
+    "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2"
   },
   "proxy": "http://server:5000"
 }

client/src/App.tsx

@@ -3,15 +3,18 @@ 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 { AccountsProvider } from './services/accounts';
-import { InstitutionsProvider } from './services/institutions';
-import { ItemsProvider } from './services/items';
-import { LinkProvider } from './services/link';
-
-import { UsersProvider } from './services/users';
-import { CurrentUserProvider } from './services/currentUser';
-import { ErrorsProvider } from './services/errors';
+import Sockets from "./components/Sockets.jsx";
+import OAuthLink from './components/OAuthLink.tsx';
+import Landing from './components/Landing.tsx';
+import UserPage from "./components/UserPage.tsx";
+import UserList from './components/UserList.tsx';
+import { AccountsProvider } from './services/accounts.tsx';
+import { InstitutionsProvider } from './services/institutions.tsx';
+import { ItemsProvider } from './services/items.tsx';
+import { LinkProvider } from './services/link.tsx';
+import { UsersProvider } from './services/users.tsx';
+import { CurrentUserProvider } from './services/currentUser.tsx';
+import { ErrorsProvider } from './services/errors.tsx';
 
 import './App.scss';
 

client/src/components/AddUserForm.tsx

@@ -3,7 +3,8 @@ import Button from 'plaid-threads/Button';
 import TextInput from 'plaid-threads/TextInput';
 import Checkbox from 'plaid-threads/Checkbox';
 
-import { useUsers, useCurrentUser } from '../services';
+import useUsers from '../services/users.tsx';
+import useCurrentUser from '../services/currentUser.tsx';
 
 const PLAID_ENV = process.env.REACT_APP_PLAID_ENV;
 

client/src/components/ConfirmIdentityForm.tsx

@@ -2,9 +2,10 @@ import React, { useState, useEffect } from 'react';
 import Button from 'plaid-threads/Button';
 import TextInput from 'plaid-threads/TextInput';
 
-import { useUsers } from '../services';
+
+import useUsers from '../services/users.tsx'
 import { UserType } from './types';
-import { updateUserInfo } from '../services/api';
+import { updateUserInfo } from '../services/api.tsx';
 
 const PLAID_ENV = process.env.REACT_APP_PLAID_ENV;
 

client/src/components/ErrorMessage.tsx

@@ -3,7 +3,7 @@ import { Callout } from 'plaid-threads/Callout';
 import { IconButton } from 'plaid-threads/IconButton';
 import { CloseS2 } from 'plaid-threads/Icons/CloseS2';
 
-import useErrors from '../services/errors';
+import useErrors from '../services/errors.tsx';
 
 // link errors that require a prompt for the enduser
 

client/src/components/Item.tsx

@@ -4,10 +4,15 @@ import Button from 'plaid-threads/Button';
 import Note from 'plaid-threads/Note';
 import { Institution } from 'plaid/dist/api';
 
-import { LinkButton, UpdateLink } from '.';
-import { useItems, useLink, useInstitutions, useAccounts } from '../services';
+import setItemToBadState from '../services/api.tsx';
+import LinkButton from './LinkButton.tsx';
+import UpdateLink from './UpdateLink.tsx';
+import useItems from '../services/items.tsx';
+import useLink from '../services/link.tsx';
+import useInstitutions from '../services/institutions.tsx';
+import useAccounts from '../services/accounts.tsx';
+
 import { UserType, ItemType } from './types';
-import { setItemToBadState } from '../services/api';
 
 const PLAID_ENV = process.env.REACT_APP_PLAID_ENV || 'sandbox';
 const IS_PROCESSOR = process.env.REACT_APP_IS_PROCESSOR;

client/src/components/Landing.tsx

@@ -2,10 +2,12 @@ import React, { useEffect } from 'react';
 import Button from 'plaid-threads/Button';
 import { useHistory } from 'react-router-dom';
 
-import { useCurrentUser } from '../services';
-import { Login, Banner, AddUserForm } from '.';
+import useCurrentUser from '../services/currentUser.tsx';
+import Login from './Login.tsx';
+import Banner from './Banner.tsx';
+import AddUserForm from './AddUserForm.tsx';
 
-import { useBoolean } from '../hooks';
+import useBoolean from '../hooks/useBoolean.ts';
 
 const Landing: React.FC = () => {
   const { userState, setCurrentUser } = useCurrentUser();

client/src/components/LinkButton.tsx

@@ -10,9 +10,12 @@ import {
 } from 'react-plaid-link';
 import { useHistory } from 'react-router-dom';
 
-import { logEvent, logSuccess, logExit } from '../util'; // functions to log and save errors and metadata from Link events.
-import { exchangeToken, setItemState } from '../services/api';
-import { useItems, useLink, useErrors } from '../services';
+import { logEvent, logSuccess, logExit } from '../util/index.tsx'; // functions to log and save errors and metadata from Link events.
+import { exchangeToken, setItemState } from '../services/api.tsx';
+
+import useItems from '../services/items.tsx';
+import useLink from '../services/link.tsx';
+import useErrors from '../services/errors.tsx';
 
 interface Props {
   isOauth?: boolean;

client/src/components/Login.tsx

@@ -4,7 +4,7 @@ import ModalBody from 'plaid-threads/ModalBody';
 import Button from 'plaid-threads/Button';
 import TextInput from 'plaid-threads/TextInput';
 
-import { useCurrentUser } from '../services';
+import useCurrentUser from '../services/currentUser.tsx';
 
 const Login: React.FC = () => {
   const { login } = useCurrentUser();

client/src/components/OAuthLink.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-import { LinkButton } from '.';
+import LinkButton from './LinkButton.tsx';
 
 // Component rendered when user is redirected back to site from Oauth institution site.
 // It initiates link immediately with the original link token that was set in local storage

client/src/components/PatternAccount.tsx

@@ -4,7 +4,7 @@ import Button from 'plaid-threads/Button';
 
 import { UserType, AppFundType } from './types';
 
-import { currencyFilter } from '../util';
+import { currencyFilter } from '../util/index.tsx';
 
 interface Props {
   userTransfer: () => void;

client/src/components/Sockets.jsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useRef } from 'react';
 import { toast } from 'react-toastify';
 
-import { useAccounts, useItems } from '../services';
+import useAccounts from '../services/accounts.tsx';
+import useItems from '../services/items.tsx';
+
 const io = require('socket.io-client');
 const { REACT_APP_SERVER_PORT } = process.env;
 

client/src/components/TransferForm.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { NumberInput } from 'plaid-threads/NumberInput';
 import { Button } from 'plaid-threads/Button';
-import { currencyFilter } from '../util';
+import { currencyFilter } from '../util/index.tsx';
 
 interface Props {
   checkAmountAndInitiate: (amount: number) => void;

client/src/components/Transfers.tsx

@@ -3,9 +3,10 @@ import Callout from 'plaid-threads/Callout';
 import { Button } from 'plaid-threads/Button';
 
 import { AccountType, AppFundType } from './types';
-import { currencyFilter } from '../util';
-import { TransferForm } from '.';
-import { updateAppFundsBalance, makeTransfer } from '../services/api';
+import { currencyFilter } from '../util/index.tsx';
+
+import TransferForm from './TransferForm.tsx';
+import { updateAppFundsBalance, makeTransfer } from '../services/api.tsx';
 
 const IS_PROCESSOR = process.env.REACT_APP_IS_PROCESSOR;
 

client/src/components/UpdateLink.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import Button from 'plaid-threads/Button';
 
-import { LinkButton } from '.';
-import { useLink } from '../services';
+import LinkButton from './LinkButton.tsx';
+import useLink from '../services/link.tsx';
 
 interface Props {
   setBadStateShown: boolean;

client/src/components/UserList.tsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { HashLink } from 'react-router-hash-link';
 import Button from 'plaid-threads/Button';
 import Touchable from 'plaid-threads/Touchable';
-import { useUsers } from '../services';
+import useUsers from '../services/users.tsx';
 import { UserType } from './types';
 // This provides developers with a list of all users by username, and ability to delete a user.
 // View at path: "/admin"

client/src/components/UserPage.tsx

@@ -11,21 +11,25 @@ import {
   AppFundType,
   UserType,
 } from './types';
-import { useItems, useAccounts, useUsers, useInstitutions } from '../services';
+
+import useItems from '../services/items.tsx';
+import useInstitutions from '../services/institutions.tsx';
+import useUsers from '../services/users.tsx';
+import useAccounts from '../services/accounts.tsx';
+
+import Banner from './Banner.tsx';
+import Item from './Item.tsx';
+import ConfirmIdentityForm from './ConfirmIdentityForm.tsx';
+import PatternAccount from './PatternAccount.tsx';
+import Transfers from './Transfers.tsx';
+import ErrorMessage from './ErrorMessage.tsx';
+
 import {
   updateIdentityCheckById,
   getBalanceByItem,
   getAppFundsByUser,
-} from '../services/api';
+} from '../services/api.tsx';
 
-import {
-  Banner,
-  Item,
-  ErrorMessage,
-  ConfirmIdentityForm,
-  PatternAccount,
-  Transfers,
-} from '.';
 
 const UserPage = ({ match }: RouteComponentProps<RouteInfo>) => {
   const [user, setUser] = useState<UserType>({

client/src/index.js

@@ -4,7 +4,7 @@ import { Router as BrowserRouter } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 
 import './index.scss';
-import App from './App';
+import App from './App.tsx';
 
 const history = createBrowserHistory();
 

client/src/services/accounts.tsx

@@ -15,7 +15,7 @@ import { AccountType } from '../components/types';
 import {
   getAccountsByItem as apiGetAccountsByItem,
   getAccountsByUser as apiGetAccountsByUser,
-} from './api';
+} from './api.tsx';
 
 interface AccountsState {
   [accountId: number]: AccountType;

client/src/services/api.tsx

@@ -58,7 +58,7 @@ export const deleteItemById = (id: number) => api.delete(`/items/${id}`);
 export const setItemState = (itemId: number, status: string) =>
   api.put(`items/${itemId}`, { status });
 // This endpoint is only availble in the sandbox enviornment
-export const setItemToBadState = (itemId: number) =>
+export const setItemToBadState: (itemId: number) => Promise<any> = (itemId) =>
   api.post('/items/sandbox/item/reset_login', { itemId });
 
 export const getLinkToken = (

client/src/services/currentUser.tsx

@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import { toast } from 'react-toastify';
 import { useHistory } from 'react-router-dom';
-import { getLoginUser as apiGetLoginUser } from './api';
+import { getLoginUser as apiGetLoginUser } from './api.tsx';
 import { UserType } from '../components/types';
 
 interface CurrentUserState {

client/src/services/institutions.tsx

@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import { Institution } from 'plaid/dist/api';
 
-import { getInstitutionById as apiGetInstitutionById } from './api';
+import { getInstitutionById as apiGetInstitutionById } from './api.tsx';
 
 interface InstitutionsById {
   [key: string]: Institution;

client/src/services/items.tsx

@@ -18,7 +18,7 @@ import {
   getItemsByUser as apiGetItemsByUser,
   getItemById as apiGetItemById,
   deleteItemById as apiDeleteItemById,
-} from './api';
+} from './api.tsx';
 
 interface ItemsState {
   [itemId: number]: ItemType;

client/src/services/link.tsx

@@ -7,7 +7,7 @@ import React, {
   createContext,
 } from 'react';
 
-import { getLinkToken } from './api';
+import { getLinkToken } from './api.tsx';
 
 import { PlaidLinkError } from 'react-plaid-link';
 

client/src/services/users.tsx

@@ -12,13 +12,14 @@ import omit from 'lodash/omit';
 import { toast } from 'react-toastify';
 
 import { UserType } from '../components/types';
-import { useAccounts, useItems } from '.';
+import useAccounts from './accounts.tsx';
+import useItems from './items.tsx';
 import {
   getUsers as apiGetUsers,
   getUserById as apiGetUserById,
   addNewUser as apiAddNewUser,
   deleteUserById as apiDeleteUserById,
-} from './api';
+} from './api.tsx';
 
 interface UsersState {
   [key: string]: UserType | any;

client/src/util/index.tsx

@@ -6,7 +6,7 @@ import {
   PlaidLinkError,
 } from 'react-plaid-link';
 
-import { postLinkEvent as apiPostLinkEvent } from '../services/api';
+import { postLinkEvent as apiPostLinkEvent } from '../services/api.tsx';
 
 /**
  * @desc converts number values into $ currency strings

client/tsconfig.json

@@ -10,6 +10,7 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",

ngrok/ngrok.yml

@@ -1,4 +1,4 @@
 web_addr: 0.0.0.0:4040
 # Fill this in with your authtoken from https://dashboard.ngrok.com/get-started/your-authtoken
-authtoken: 
+authtoken: 2nRgbVVzA47xGUsKz3v0tLAGiOP_4Mc1ZX3KLmPmG1BiuQmbp
 version: 2