Upgrade UI deps (#374)

* Upgrade node * Upgrade next and react types * Upgrade typescript * Fix types * Update tsconfig to latest settings * Upgrade MUI and related styling deps * Update MUI setup to latest example using new @mui/material-nextjs package * Upgrade graphql, codegen, and react-query * Upgrade eslint and prettier * Upgrade everything else
orcasound · Mar 25, 2024 · f55d801 · f55d801
1 parent 7132e47
commit f55d801
Show file tree

Hide file tree

Showing 19 changed files with 2,921 additions and 1,490 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,6 +1,6 @@
 # Largely based on https://github.com/nicbet/docker-phoenix/blob/main/Dockerfile
 ARG ELIXIR_VERSION=1.16-otp-25
-ARG NODE_VERSION=20.5.0
+ARG NODE_VERSION=20.11.1
 
 FROM node:${NODE_VERSION}-alpine AS node
 FROM elixir:${ELIXIR_VERSION}-alpine AS setup

diff --git a/server/phoenix_static_buildpack.config b/server/phoenix_static_buildpack.config
@@ -1,3 +1,3 @@
 assets_path=ui
 clean_cache=true
-node_version=20.5.0
+node_version=20.11.1
diff --git a/ui/.node-version b/ui/.node-version
@@ -1 +1 @@
-20.5.0
+20.11.1
diff --git a/ui/codegen.ts b/ui/codegen.ts
@@ -16,6 +16,7 @@ const config: CodegenConfig = {
         "typescript-react-query",
       ],
       config: {
+        reactQueryVersion: 5,
         fetcher: "@/graphql/client#fetcher",
         exposeDocument: true,
         exposeFetcher: true,

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -17,52 +17,54 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@fontsource/montserrat": "^5.0.5",
-    "@fontsource/mukta": "^5.0.5",
-    "@mui/icons-material": "^5.14.1",
-    "@mui/material": "^5.14.2",
-    "@tanstack/react-query": "^4.32.0",
-    "clsx": "^2.0.0",
-    "dotenv-cli": "^7.2.1",
-    "graphql": "^16.7.1",
+    "@fontsource/montserrat": "^5.0.17",
+    "@fontsource/mukta": "^5.0.19",
+    "@mui/icons-material": "^5.15.14",
+    "@mui/material": "^5.15.14",
+    "@mui/material-nextjs": "^5.15.11",
+    "@tanstack/react-query": "^5.28.8",
+    "clsx": "^2.1.0",
+    "dotenv-cli": "^7.4.1",
+    "graphql": "^16.8.1",
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
-    "next": "13.4.12",
-    "phoenix": "^1.7.7",
+    "next": "14.1.4",
+    "phoenix": "^1.7.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-fast-marquee": "^1.6.1",
+    "react-fast-marquee": "^1.6.4",
     "react-ga4": "^2.1.0",
     "react-leaflet": "^4.2.1",
-    "video.js": "^8.3.0",
+    "sharp": "^0.33.3",
+    "video.js": "^8.10.0",
     "videojs-offset": "^2.1.3"
   },
   "devDependencies": {
-    "@graphql-codegen/add": "^5.0.0",
-    "@graphql-codegen/cli": "5.0.0",
-    "@graphql-codegen/typescript": "^4.0.1",
-    "@graphql-codegen/typescript-operations": "^4.0.1",
-    "@graphql-codegen/typescript-react-query": "^4.1.0",
-    "@next/bundle-analyzer": "^13.4.12",
-    "@tanstack/react-query-devtools": "^4.32.0",
-    "@types/leaflet": "^1.9.3",
-    "@types/node": "20.4.5",
-    "@types/phoenix": "^1.6.0",
-    "@types/react": "18.2.17",
-    "@types/react-dom": "18.2.7",
-    "@types/video.js": "^7.3.52",
-    "@typescript-eslint/eslint-plugin": "^6.2.0",
-    "eslint": "8.45.0",
-    "eslint-config-next": "13.4.12",
-    "eslint-config-prettier": "8.9.0",
-    "eslint-plugin-simple-import-sort": "10.0.0",
-    "eslint-plugin-unused-imports": "^3.0.0",
-    "husky": "^9.0.7",
-    "lint-staged": "^15.2.0",
-    "prettier": "3.0.0",
-    "typescript": "5.1.6"
+    "@graphql-codegen/add": "^5.0.2",
+    "@graphql-codegen/cli": "5.0.2",
+    "@graphql-codegen/typescript": "^4.0.6",
+    "@graphql-codegen/typescript-operations": "^4.2.0",
+    "@graphql-codegen/typescript-react-query": "^6.1.0",
+    "@next/bundle-analyzer": "^14.1.4",
+    "@tanstack/react-query-devtools": "^5.28.8",
+    "@types/leaflet": "^1.9.8",
+    "@types/node": "20.11.30",
+    "@types/phoenix": "^1.6.4",
+    "@types/react": "18.2.70",
+    "@types/react-dom": "18.2.22",
+    "@types/video.js": "^7.3.57",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "eslint": "8.57.0",
+    "eslint-config-next": "14.1.4",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-simple-import-sort": "12.0.0",
+    "eslint-plugin-unused-imports": "^3.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "3.2.5",
+    "typescript": "5.4.3"
   }
 }
diff --git a/ui/src/components/Link.tsx b/ui/src/components/Link.tsx
@@ -1,12 +1,12 @@
 // Special component that combines nextjs and mui Link into one
-// From https://github.com/mui/material-ui/blob/master/examples/material-next-ts/src/Link.tsx
+// From https://github.com/mui/material-ui/blob/master/examples/material-ui-nextjs-pages-router-ts/src/Link.tsx
 
 import MuiLink, { LinkProps as MuiLinkProps } from "@mui/material/Link";
 import { styled } from "@mui/material/styles";
 import clsx from "clsx";
 import NextLink, { LinkProps as NextLinkProps } from "next/link";
 import { useRouter } from "next/router";
-import React from "react";
+import * as React from "react";
 
 // Add support for the sx prop for consistency with the other branches.
 const Anchor = styled("a")({});
@@ -66,7 +66,7 @@ export type LinkProps = {
   Omit<MuiLinkProps, "href">;
 
 // A styled version of the Next.js Link component:
-// https://nextjs.org/docs/api-reference/next/link
+// https://nextjs.org/docs/pages/api-reference/components/link
 const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
   function Link(props, ref) {
     const {
@@ -92,20 +92,6 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       [activeClassName]: router.pathname === pathname && activeClassName,
     });
 
-    const isExternal =
-      typeof href === "string" &&
-      (href.indexOf("http") === 0 || href.indexOf("mailto:") === 0);
-
-    if (isExternal) {
-      if (noLinkStyle) {
-        return (
-          <Anchor className={className} href={href} ref={ref} {...other} />
-        );
-      }
-
-      return <MuiLink className={className} href={href} ref={ref} {...other} />;
-    }
-
     const linkAs = linkAsProp || as;
     const nextjsProps = {
       to: href,

diff --git a/ui/src/components/Player/DetectionsPlayer.tsx b/ui/src/components/Player/DetectionsPlayer.tsx
@@ -73,7 +73,7 @@ export function DetectionsPlayer({
 
       player.on("playing", () => {
         setPlayerStatus("playing");
-        const currentTime = player.currentTime();
+        const currentTime = player.currentTime() ?? 0;
         if (currentTime < startOffset || currentTime > endOffset) {
           player.currentTime(startOffset);
           setPlayerTime(endOffset);
@@ -85,7 +85,7 @@ export function DetectionsPlayer({
       player.currentTime(startOffset);
 
       player.on("timeupdate", () => {
-        const currentTime = player.currentTime();
+        const currentTime = player.currentTime() ?? 0;
         if (currentTime > endOffset) {
           player.currentTime(startOffset);
           setPlayerTime(startOffset);

diff --git a/ui/src/components/auth/RegisterForm.tsx b/ui/src/components/auth/RegisterForm.tsx
@@ -200,13 +200,13 @@ export default function RegisterForm({ onSubmit, errors }: RegisterFormProps) {
         type="password"
         value={passwordConfirmation}
         error={
-          !!errors.find(
-            (error) => error?.fields?.includes("password_confirmation"),
+          !!errors.find((error) =>
+            error?.fields?.includes("password_confirmation"),
           )
         }
         helperText={
-          errors.find(
-            (error) => error?.fields?.includes("password_confirmation"),
+          errors.find((error) =>
+            error?.fields?.includes("password_confirmation"),
           )?.message
         }
         onChange={(event) => setPasswordConfirmation(event.target.value)}

diff --git a/ui/src/components/auth/ResetPasswordForm.tsx b/ui/src/components/auth/ResetPasswordForm.tsx
@@ -71,13 +71,13 @@ export default function ResetPasswordForm({
         type="password"
         value={passwordConfirmation}
         error={
-          !!errors.find(
-            (error) => error?.fields?.includes("password_confirmation"),
+          !!errors.find((error) =>
+            error?.fields?.includes("password_confirmation"),
           )
         }
         helperText={errorToString(
-          errors.find(
-            (error) => error?.fields?.includes("password_confirmation"),
+          errors.find((error) =>
+            error?.fields?.includes("password_confirmation"),
           ),
           true,
         )}

diff --git a/ui/src/components/layouts/MapLayout.tsx b/ui/src/components/layouts/MapLayout.tsx
@@ -190,8 +190,8 @@ export function getMapLayout(page: ReactElement) {
 }
 
 export async function getMapStaticProps(queryClient: QueryClient) {
-  await queryClient.prefetchQuery(
-    useFeedsQuery.getKey(),
-    useFeedsQuery.fetcher(),
-  );
+  await queryClient.prefetchQuery({
+    queryKey: useFeedsQuery.getKey(),
+    queryFn: useFeedsQuery.fetcher(),
+  });
 }