⬆ Bump minor frontend deps

♻ Stop using React.FC

frontend/package.json

@@ -16,7 +16,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@apollo/client": "^3.5.8",
+    "@apollo/client": "^3.5.10",
     "@nivo/bar": "^0.79.1",
     "@nivo/line": "^0.79.1",
     "@nivo/pie": "^0.79.1",
@@ -25,39 +25,39 @@
     "graphql": "^16.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^7.27.1",
-    "react-router-dom": "^6.2.1",
+    "react-hook-form": "^7.30.0",
+    "react-router-dom": "^6.3.0",
     "use-url-search-params": "^2.5.1"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^2.6.1",
-    "@graphql-codegen/typed-document-node": "^2.2.3",
-    "@graphql-codegen/typescript-operations": "^2.3.0",
+    "@graphql-codegen/cli": "^2.6.2",
+    "@graphql-codegen/typed-document-node": "^2.2.8",
+    "@graphql-codegen/typescript-operations": "^2.3.5",
     "@graphql-typed-document-node/core": "^3.1.1",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^17.0.44",
+    "@types/react-dom": "^17.0.15",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.11.0",
-    "@typescript-eslint/parser": "^5.11.0",
-    "@vitejs/plugin-react": "^1.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.19.0",
+    "@typescript-eslint/parser": "^5.19.0",
+    "@vitejs/plugin-react": "^1.3.1",
     "@vitejs/plugin-react-refresh": "^1.3.6",
-    "eslint": "^8.9.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
     "jest": "^27.5.1",
-    "prettier": "^2.5.1",
-    "stylelint": "^14.5.0",
+    "prettier": "^2.6.2",
+    "stylelint": "^14.7.0",
     "stylelint-config-idiomatic-order": "^8.1.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^7.0.0",
     "stylelint-order": "^5.0.0",
     "stylelint-prettier": "^2.0.0",
-    "typescript": "^4.5.5",
-    "vite": "^2.8.1",
-    "vite-plugin-svgr": "^1.0.1"
+    "typescript": "^4.6.3",
+    "vite": "^2.9.5",
+    "vite-plugin-svgr": "^1.1.0"
   },
   "engines": {
     "node": ">=16",

frontend/src/App.tsx

@@ -11,7 +11,7 @@ import { Splash as Splash } from "./components/Splash";
 import { Toast } from "./components/Toast";
 import { ToastProvider } from "./components/ToastProvider";
 
-const App: React.FC = () => (
+const App = (): JSX.Element => (
   <ApolloProvider client={client}>
     <Router>
       <ToastProvider>

frontend/src/Routes.tsx

@@ -12,7 +12,7 @@ import { Stats } from "./features/stats/Stats";
 import { UserDetail } from "./features/users/UserDetail";
 import { UserList } from "./features/users/UserList";
 
-export const Routes: React.FC = () => (
+export const Routes = (): JSX.Element => (
   <ReactRouterRoutes>
     <Route path="/deposit" element={<Deposit />} />
     <Route path="/log" element={<Log />} />

frontend/src/components/Footer.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { ReactComponent as Brick } from "../assets/brick.svg";
 import styles from "./Footer.module.css";
 
-export const Footer: React.FC = () => {
+export const Footer = (): JSX.Element => {
   return (
     <footer className={styles.footer}>
       Made with <span className={styles.heart}>❤</span> by{" "}

frontend/src/components/Header.tsx

@@ -8,7 +8,7 @@ const ADMIN_URL = `${import.meta.env.VITE_API_URL}/admin/`;
 
 const navLinkStyles = ({ isActive }: { isActive: boolean }) => clsx(styles.navLink, { [styles.active]: isActive });
 
-export const Header: React.FC = () => {
+export const Header = (): JSX.Element => {
   return (
     <header className={styles.header}>
       <nav className={styles.nav}>

frontend/src/components/ProductCard.tsx

@@ -11,7 +11,7 @@ type ProductCardProps = {
   amount: number;
 };
 
-export const ProductCard: React.FC<ProductCardProps> = ({ product, onProduct, amount, active = false }) => {
+export const ProductCard = ({ product, onProduct, amount, active = false }: ProductCardProps): JSX.Element => {
   const classes = clsx(styles.product, { [styles.active]: active });
   return (
     <button className={classes} type="button" onClick={onProduct}>

frontend/src/components/Splash.tsx

@@ -8,14 +8,12 @@ interface SplashProps {
   noOverlay?: boolean;
 }
 
-export const Splash: React.FC<SplashProps> = ({ brandText = "BBS", noOverlay = false }) => {
-  return (
-    <div className={clsx(styles.splash, { [styles.overlay]: !noOverlay })}>
-      <div className={styles.wrap}>
-        <div className={styles.sun}></div>
-        <div className={styles.brand}>{brandText}</div>
-        <div className={styles.subtitle}>Biceps Bar System</div>
-      </div>
+export const Splash = ({ brandText = "BBS", noOverlay = false }: SplashProps): JSX.Element => (
+  <div className={clsx(styles.splash, { [styles.overlay]: !noOverlay })}>
+    <div className={styles.wrap}>
+      <div className={styles.sun}></div>
+      <div className={styles.brand}>{brandText}</div>
+      <div className={styles.subtitle}>Biceps Bar System</div>
     </div>
-  );
-};
+  </div>
+);

frontend/src/components/Toast.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import styles from "./Toast.module.css";
 import { useToast } from "./ToastProvider";
 
-export const Toast: React.FC = () => {
+export const Toast = (): JSX.Element => {
   const { showToast, message, background, visible } = useToast();
 
   const classes = clsx([styles[background], styles.toast], { [styles.visible]: visible });

frontend/src/components/ToastProvider.tsx

@@ -26,7 +26,7 @@ const ToastContext = React.createContext<ToastProps>(defaultState);
 type ToastProviderProps = {
   children: ReactNode;
 };
-export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
+export const ToastProvider = ({ children }: ToastProviderProps): JSX.Element => {
   const [visible, setVisible] = useState(defaultState.visible);
   const [message, setMessage] = useState(defaultState.message);
   const [background, setBackground] = useState(defaultState.background);

frontend/src/components/UserCard.tsx

@@ -11,7 +11,7 @@ type UserCardProps = {
 };
 
 /** If user is null, then it's the special external user */
-export const UserCard: React.FC<UserCardProps> = ({ user, onUser, active = false }) => {
+export const UserCard = ({ user, onUser, active = false }: UserCardProps): JSX.Element => {
   const classes = clsx(styles.user, { [styles.active]: active });
   return (
     <button className={classes} onClick={onUser} type="button">

frontend/src/features/deposit/Deposit.tsx

@@ -4,7 +4,7 @@ import { UserCard } from "../../components/UserCard";
 import styles from "./Deposit.module.css";
 import { useDeposit } from "./useDeposit";
 
-export const Deposit: React.FC = () => {
+export const Deposit = (): JSX.Element => {
   const {
     loading,
     selectedUser,

frontend/src/features/register/Register.tsx

@@ -8,7 +8,7 @@ import { useRegister } from "./useRegister";
 
 const USER_EXTERNAL = "external";
 
-export const Register: React.FC = () => {
+export const Register = (): JSX.Element => {
   const {
     users,
     products,