Upgrade deps and build fixes

apps/leafcutter/app/(main)/create/_components/Create.tsx

@@ -20,7 +20,7 @@ export const Create: FC<CreateProps> = ({ templates }) => {
     typography: { h1, h4 },
   } = useAppContext();
   const router = useRouter();
-  const pathname = usePathname();
+  const pathname = usePathname() ?? "";
   const cookieName = "searchIntroComplete";
   const [cookies, setCookie] = useCookies([cookieName]);
   const searchIntroComplete = parseInt(cookies[cookieName], 10) || 0;

apps/leafcutter/app/_components/GettingStartedDialog.tsx

@@ -65,8 +65,8 @@ export const GettingStartedDialog: FC = () => {
   const router = useRouter();
   const [completedItems, setCompletedItems] = useState([] as any[]);
   const searchParams = useSearchParams();
-  const pathname = usePathname();
-  const open = searchParams.get("tooltip")?.toString() === "checklist";
+  const pathname = usePathname() ?? "";
+  const open = searchParams?.get("tooltip")?.toString() === "checklist";
   const toggleCompletedItem = (item: any) => {
     if (completedItems.includes(item)) {
       setCompletedItems(completedItems.filter((i) => i !== item));
@@ -94,7 +94,7 @@ export const GettingStartedDialog: FC = () => {
               <Box sx={{ ...h4, mb: 3 }}>{t("getStartedChecklist")}</Box>
             </Grid>
             <Grid item>
-              <IconButton onClick={() => router.push(pathname)}>
+              <IconButton onClick={() => router.push(pathname ?? "")}>
                 <CloseIcon sx={{ color: almostBlack, fontSize: "18px" }} />
               </IconButton>
             </Grid>

apps/leafcutter/app/_components/HelpButton.tsx

@@ -8,7 +8,7 @@ import { useAppContext } from "./AppProvider";
 
 export const HelpButton: FC = () => {
   const router = useRouter();
-  const pathname = usePathname();
+  const pathname = usePathname() ?? "";
   const [helpActive, setHelpActive] = useState(false);
   const {
     colors: { leafcutterElectricBlue },

apps/leafcutter/app/_components/Home.tsx

@@ -18,7 +18,7 @@ type HomeProps = {
 
 export const Home: FC<HomeProps> = ({ visualizations }) => {
   const router = useRouter();
-  const pathname = usePathname();
+  const pathname = usePathname() ?? "";
   const cookieName = "homeIntroComplete";
   const [cookies, setCookie] = useCookies([cookieName]);
   const t = useTranslate();

apps/leafcutter/app/_components/Sidebar.tsx

@@ -101,8 +101,8 @@ interface SidebarProps {
 
 export const Sidebar: FC<SidebarProps> = ({ open }) => {
   const t = useTranslate();
-  const pathname = usePathname();
-  const section = pathname.split("/")[1];
+  const pathname = usePathname() ?? "";
+  const section = pathname?.split("/")[1];
   const {
     colors: { white }, //  leafcutterElectricBlue, leafcutterLightBlue,
   } = useAppContext();

apps/leafcutter/app/_components/Tooltip.tsx

@@ -40,9 +40,9 @@ export const Tooltip: FC<TooltipProps> = ({
     colors: { white, leafcutterElectricBlue, almostBlack },
   } = useAppContext();
   const router = useRouter();
-  const pathname = usePathname();
+  const pathname = usePathname() ?? "";
   const searchParams = useSearchParams();
-  const activeTooltip = searchParams.get('tooltip')?.toString();
+  const activeTooltip = searchParams?.get("tooltip")?.toString();
   const open = activeTooltip === tooltipID;
   const showNavigation = true;
 

apps/leafcutter/app/_components/WelcomeDialog.tsx

@@ -16,7 +16,7 @@ export const WelcomeDialog = () => {
     colors: { white, leafcutterElectricBlue },
     typography: { h1, h6, p },
   } = useAppContext();
-  const activeTooltip = searchParams.get('tooltip')?.toString();
+  const activeTooltip = searchParams?.get("tooltip")?.toString();
   const open = activeTooltip === "welcome";
 
   return (

apps/leafcutter/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

apps/leafcutter/package.json

@@ -29,7 +29,7 @@
     "date-fns": "^2.30.0",
     "http-proxy-middleware": "^2.0.6",
     "material-ui-popup-state": "^5.0.9",
-    "next": "13.4.11",
+    "next": "13.4.12",
     "next-auth": "^4.22.3",
     "next-http-proxy-middleware": "^1.2.5",
     "nodemailer": "^6.9.4",
@@ -40,20 +40,20 @@
     "react-iframe": "^1.8.5",
     "react-markdown": "^8.0.7",
     "react-polyglot": "^0.7.2",
-    "sharp": "^0.32.3",
+    "sharp": "^0.32.4",
     "swr": "^2.2.0",
     "tss-react": "^4.8.8",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.9",
-    "@types/node": "^20.4.2",
+    "@types/node": "^20.4.4",
     "@types/react": "18.2.15",
     "@types/uuid": "^9.0.2",
     "babel-loader": "^9.1.3",
     "eslint": "^8.45.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-next": "^13.4.11",
+    "eslint-config-next": "^13.4.12",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",