⬆ Bump frontend deps

♻ Replace vite svg plugin
react-router v6 fixes

frontend/package.json

@@ -15,49 +15,49 @@
     "test": "jest"
   },
   "dependencies": {
-    "@apollo/client": "^3.4.16",
+    "@apollo/client": "^3.5.8",
     "bootstrap": "^5.1.3",
-    "bootstrap-icons": "^1.7.0",
+    "bootstrap-icons": "^1.8.0",
     "clsx": "^1.1.1",
-    "date-fns": "^2.25.0",
-    "graphql": "^15.7.2",
+    "date-fns": "^2.28.0",
+    "graphql": "^16.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.0"
+    "react-router-dom": "^6.2.1"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^2.2.2",
-    "@graphql-codegen/typed-document-node": "^2.2.0",
-    "@graphql-codegen/typescript-operations": "^2.2.0",
-    "@graphql-typed-document-node/core": "^3.1.0",
-    "@types/bootstrap": "^5.1.6",
-    "@types/react": "^17.0.34",
+    "@graphql-codegen/cli": "^2.5.0",
+    "@graphql-codegen/typed-document-node": "^2.2.3",
+    "@graphql-codegen/typescript-operations": "^2.2.4",
+    "@graphql-typed-document-node/core": "^3.1.1",
+    "@types/bootstrap": "^5.1.9",
+    "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
-    "@types/react-router-dom": "^5.3.2",
-    "@typescript-eslint/eslint-plugin": "^5.3.1",
-    "@typescript-eslint/parser": "^5.3.1",
-    "@vitejs/plugin-react": "^1.0.8",
+    "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/eslint-plugin": "^5.10.2",
+    "@typescript-eslint/parser": "^5.10.2",
+    "@vitejs/plugin-react": "^1.1.4",
     "@vitejs/plugin-react-refresh": "^1.3.6",
-    "eslint": "^7.32.0",
+    "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.27.0",
+    "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "jest": "^27.3.1",
-    "prettier": "^2.4.1",
-    "stylelint": "^14.0.1",
+    "jest": "^27.5.0",
+    "prettier": "^2.5.1",
+    "stylelint": "^14.3.0",
     "stylelint-config-idiomatic-order": "^8.1.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^6.0.0",
     "stylelint-order": "^5.0.0",
     "stylelint-prettier": "^2.0.0",
-    "typescript": "^4.4.4",
-    "vite": "^2.6.14",
-    "vite-plugin-react-svg": "^0.2.0"
+    "typescript": "^4.5.5",
+    "vite": "^2.7.13",
+    "vite-plugin-svgr": "^1.0.1"
   },
   "engines": {
     "node": ">=16",
     "npm": ">=7"
   }
-}
+}

frontend/src/Routes.tsx

@@ -1,14 +1,14 @@
 import React from "react";
-import { Route, Switch } from "react-router-dom";
+import { Route, Routes as ReactRouterRoutes } from "react-router-dom";
 
 import { Deposit } from "./features/deposit/Deposit";
 import { Log } from "./features/log/Log";
 import { Register } from "./features/register/Register";
 
 export const Routes: React.FC = () => (
-  <Switch>
-    <Route path="/deposit" component={Deposit} />
-    <Route path="/log" component={Log} />
-    <Route path="/" exact component={Register} />
-  </Switch>
+  <ReactRouterRoutes>
+    <Route path="/deposit" element={<Deposit />} />
+    <Route path="/log" element={<Log />} />
+    <Route path="/" element={<Register />} />
+  </ReactRouterRoutes>
 );

frontend/src/components/Header.tsx

@@ -1,10 +1,10 @@
-import BarChart from "bootstrap-icons/icons/bar-chart.svg";
-import CardList from "bootstrap-icons/icons/card-list.svg";
-import House from "bootstrap-icons/icons/house.svg";
+import { ReactComponent as BarChart } from "bootstrap-icons/icons/bar-chart.svg";
+import { ReactComponent as CardList } from "bootstrap-icons/icons/card-list.svg";
+import { ReactComponent as House } from "bootstrap-icons/icons/house.svg";
 import React from "react";
 import { NavLink } from "react-router-dom";
 
-import Logo from "../assets/brick.svg";
+import { ReactComponent as Logo } from "../assets/brick.svg";
 import styles from "./Header.module.css";
 
 export const Header: React.FC = () => {
@@ -31,7 +31,7 @@ export const Header: React.FC = () => {
         <div className="collapse navbar-collapse" id="navbarNav">
           <ul className="navbar-nav">
             <li className="nav-item">
-              <NavLink to="/" className="nav-link" activeClassName="active" exact>
+              <NavLink to="/" className={({ isActive }) => (isActive ? "nav-link active" : "nav-link")} end>
                 <span className={styles.navIcon}>
                   <House />
                 </span>{" "}
@@ -39,7 +39,7 @@ export const Header: React.FC = () => {
               </NavLink>
             </li>
             <li className="nav-item">
-              <NavLink to="/deposit" className="nav-link" activeClassName="active">
+              <NavLink to="/deposit" className={({ isActive }) => (isActive ? "nav-link active" : "nav-link")}>
                 Sett inn penger
               </NavLink>
             </li>

frontend/src/components/UserCard.tsx

@@ -1,4 +1,4 @@
-import PersonFill from "bootstrap-icons/icons/person-fill.svg";
+import { ReactComponent as PersonFill } from "bootstrap-icons/icons/person-fill.svg";
 import clsx from "clsx";
 import React, { MouseEventHandler } from "react";
 

frontend/src/typings.d.ts

@@ -1,8 +1,7 @@
 /* svgs */
 declare module "*.svg" {
   import { ReactElement, SVGProps } from "react";
-  const content: (props: SVGProps<SVGElement>) => ReactElement;
-  export default content;
+  export const ReactComponent: (props: SVGProps<SVGElement>) => ReactElement;
 }
 /* CSS modules */
 declare module "*.module.css";

frontend/tsconfig.json

@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": [ "@honkhonk/vite-plugin-svgr/client" ]
   },
   "include": [
     "./src",

frontend/vite.config.js

@@ -1,11 +1,11 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { defineConfig } from "vite";
-import reactSvgPlugin from "vite-plugin-react-svg";
+import svgr from "vite-plugin-svgr";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: process.env.NODE_ENV !== "production" ? "/" : "/static/modern/",
-  plugins: [reactSvgPlugin({ defaultExport: "component" })],
+  plugins: [svgr()],
   define: {
     __DEV__: process.env.NODE_ENV !== "production",
   },

main/api/schema.py

@@ -2,7 +2,7 @@ import strawberry
 import strawberry_django
 
 from main.api import mutations
-from main.api.types import Order, Product, User, Transaction
+from main.api.types import Order, Product, Transaction, User
 
 
 @strawberry.type