Upgrade frontend to Node 26, React 19, Vite 8, Apollo Client 4 and ESLint 10

frontend/src/features/auth/UserCreate.tsx

@@ -1,9 +1,8 @@
-import { useMutation } from "@apollo/client";
-import React from "react";
+import { useMutation } from "@apollo/client/react";
 import { SubmitHandler, useForm } from "react-hook-form";
 
-import { CreateUserDocument } from "../../types";
 import styles from "./UserCreate.module.css";
+import { CreateUserDocument } from "../../types";
 
 type FormValues = {
   firstName: string;

frontend/src/features/deposit/Deposit.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-import { UserCard } from "../users/UserCard";
 import styles from "./Deposit.module.css";
 import { useDeposit } from "./useDeposit";
+import { UserCard } from "../users/UserCard";
 
-const Deposit = (): JSX.Element => {
+const Deposit = (): React.JSX.Element => {
   const {
     loading,
     selectedUser,

frontend/src/features/deposit/useDeposit.ts

@@ -1,7 +1,7 @@
-import { useMutation, useQuery } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client/react";
 import { useState } from "react";
 
-import { useToast } from "../../components/ToastProvider";
+import { useToast } from "../../hooks/useToast";
 import { AllUsersDocument, CreateDepositDocument } from "../../types";
 
 export const useDeposit = () => {
@@ -32,9 +32,9 @@ export const useDeposit = () => {
     }
 
     if (res.data?.createDeposit?.__typename === "CreateDepositSuccess") {
-      const { transaction } = res.data?.createDeposit;
+      const { transaction } = res.data.createDeposit;
       showToast(
-        `${transaction.user.firstName} har satt inn${transaction.amount}. Ny saldo er ${transaction.user.profile?.balance}.`,
+        `${transaction.user.firstName} har satt inn ${transaction.amount}. Ny saldo er ${transaction.user.profile?.balance}.`,
       );
       reset();
       return;

frontend/src/features/inventory/Inventory.tsx

@@ -1,12 +1,12 @@
-import { useQuery } from "@apollo/client";
-import React, { useState } from "react";
+import { useQuery } from "@apollo/client/react";
+import { useState } from "react";
 import { Link } from "react-router-dom";
 
+import styles from "./Inventory.module.css";
 import { GQLError } from "../../components/GQLError";
 import { InventoryPageDocument } from "../../types";
 import { formatCurrency } from "../../utils/currency";
 import { formatTime } from "../../utils/time";
-import styles from "./Inventory.module.css";
 
 const PAGE_SIZE = 20;
 

frontend/src/features/inventory/InventoryAdd.tsx

@@ -1,11 +1,11 @@
-import { useMutation, useQuery } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client/react";
 import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
-import { GQLError } from "../../components/GQLError";
-import { useToast } from "../../components/ToastProvider";
-import { CreateInventoryTransactionDocument, InventoryProductsDocument } from "../../types";
 import styles from "./Inventory.module.css";
+import { GQLError } from "../../components/GQLError";
+import { useToast } from "../../hooks/useToast";
+import { CreateInventoryTransactionDocument, InventoryProductsDocument } from "../../types";
 
 const InventoryAdd = () => {
   const navigate = useNavigate();

frontend/src/features/inventory/InventoryReport.tsx

@@ -1,11 +1,11 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { format, subDays } from "date-fns";
 import React, { useState } from "react";
 
+import styles from "./Inventory.module.css";
 import { GQLError } from "../../components/GQLError";
 import { InventoryReportDocument } from "../../types";
 import { formatCurrency } from "../../utils/currency";
-import styles from "./Inventory.module.css";
 
 const today = () => format(new Date(), "yyyy-MM-dd");
 const monthAgo = () => format(subDays(new Date(), 30), "yyyy-MM-dd");

frontend/src/features/log/Log.tsx

@@ -1,11 +1,10 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import clsx from "clsx";
-import React from "react";
 import { useUrlSearchParams } from "use-url-search-params";
 
+import styles from "./Log.module.css";
 import { OrderListDocument, TransactionListDocument } from "../../types";
 import { formatTime } from "../../utils/time";
-import styles from "./Log.module.css";
 
 const PAGE_SIZE = 10;
 

frontend/src/features/register/ProductCard.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import React, { MouseEventHandler } from "react";
 
-import { AllProductsQuery } from "../../types";
 import styles from "./ProductCard.module.css";
+import { AllProductsQuery } from "../../types";
 
 type ProductCardProps = {
   product: AllProductsQuery["allProducts"][number];
@@ -11,7 +11,7 @@ type ProductCardProps = {
   amount: number;
 };
 
-export const ProductCard = ({ product, onProduct, amount, active = false }: ProductCardProps): JSX.Element => {
+export const ProductCard = ({ product, onProduct, amount, active = false }: ProductCardProps): React.JSX.Element => {
   const classes = clsx(styles.product, { [styles.active]: active });
   return (
     <button className={classes} type="button" onClick={onProduct} title={product.name}>

frontend/src/features/register/Register.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 
-import { AllProductsQuery, OrderLineInput } from "../../types";
-import { UserCard } from "../users/UserCard";
 import { ProductCard } from "./ProductCard";
 import styles from "./Register.module.css";
 import { useRegister } from "./useRegister";
+import { AllProductsQuery, OrderLineInput } from "../../types";
+import { UserCard } from "../users/UserCard";
 
 const USER_EXTERNAL = "external";
 
-const Register = (): JSX.Element => {
+const Register = (): React.JSX.Element => {
   const {
     users,
     products,

frontend/src/features/register/useRegister.ts

@@ -1,7 +1,7 @@
-import { useMutation, useQuery } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client/react";
 import { useState } from "react";
 
-import { useToast } from "../../components/ToastProvider";
+import { useToast } from "../../hooks/useToast";
 import {
   AllProductsDocument,
   AllProductsQuery,

frontend/src/features/stats/OrderStats.tsx

@@ -1,11 +1,10 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { BarDatum, ResponsiveBar } from "@nivo/bar";
-import React from "react";
 
-import { OrderStatsDocument, SchemaOrderStatsByTime } from "../../types";
 import styles from "./Stats.module.css";
 import { StatsView } from "./StatsView";
 import { chartTheme } from "./chartTheme";
+import { OrderStatsDocument, SchemaOrderStatsByTime } from "../../types";
 
 const days = { 1: "Mandag", 2: "Tirsdag", 3: "Onsdag", 4: "Torsdag", 5: "Fredag", 6: "Lørdag", 7: "Søndag" };
 

frontend/src/features/stats/ProductStats.tsx

@@ -1,11 +1,10 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { ResponsivePie } from "@nivo/pie";
-import React from "react";
 
-import { AllProductStatsDocument } from "../../types";
 import styles from "./Stats.module.css";
 import { StatsView } from "./StatsView";
 import { chartTheme } from "./chartTheme";
+import { AllProductStatsDocument } from "../../types";
 
 type UserCount = {
   name: string;

frontend/src/features/stats/Stats.tsx

@@ -1,11 +1,10 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { ResponsiveLine } from "@nivo/line";
-import React from "react";
 
-import { ProductStatsDocument } from "../../types";
 import styles from "./Stats.module.css";
 import { StatsView } from "./StatsView";
 import { chartTheme, chartTooltipStyle } from "./chartTheme";
+import { ProductStatsDocument } from "../../types";
 
 const Stats = () => {
   const { data, loading } = useQuery(ProductStatsDocument);

frontend/src/features/stats/UserStats.tsx

@@ -1,12 +1,11 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { ResponsiveBar } from "@nivo/bar";
-import React from "react";
 
-import { GQLError } from "../../components/GQLError";
-import { UserStatsDocument } from "../../types";
 import styles from "./Stats.module.css";
 import { StatsView } from "./StatsView";
 import { chartTheme } from "./chartTheme";
+import { GQLError } from "../../components/GQLError";
+import { UserStatsDocument } from "../../types";
 
 const UserStats = () => {
   const { data, loading, error } = useQuery(UserStatsDocument);

frontend/src/features/users/UserCard.tsx

@@ -1,9 +1,9 @@
 import clsx from "clsx";
 import React, { MouseEventHandler } from "react";
 
+import styles from "./UserCard.module.css";
 import { AllUsersQuery } from "../../types";
 import { formatCurrency } from "../../utils/currency";
-import styles from "./UserCard.module.css";
 
 type UserCardProps = {
   user: AllUsersQuery["allUsers"][0] | null;
@@ -12,7 +12,7 @@ type UserCardProps = {
 };
 
 /** If user is null, then it's the special external user */
-export const UserCard = ({ user, onUser, active = false }: UserCardProps): JSX.Element => {
+export const UserCard = ({ user, onUser, active = false }: UserCardProps): React.JSX.Element => {
   const classes = clsx(styles.user, { [styles.active]: active });
   const userBalanceString = formatCurrency(Number(user?.profile?.balance));
   return (

frontend/src/features/users/UserDetail.tsx

@@ -1,13 +1,12 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { ResponsiveLine } from "@nivo/line";
-import React from "react";
 import { useParams } from "react-router-dom";
 
+import styles from "./UserDetail.module.css";
 import { GQLError } from "../../components/GQLError";
 import { SchemaUser as User, UserDetailDocument, SchemaUserProfile as UserProfile } from "../../types";
 import { formatMonth, formatTime } from "../../utils/time";
 import { chartTheme, chartTooltipStyle } from "../stats/chartTheme";
-import styles from "./UserDetail.module.css";
 
 const UserDetail = () => {
   const { userId } = useParams();

frontend/src/features/users/UserList.tsx

@@ -1,5 +1,5 @@
-import { useQuery } from "@apollo/client";
-import React, { useState } from "react";
+import { useQuery } from "@apollo/client/react";
+import { useState } from "react";
 import { Link } from "react-router-dom";
 
 import { AllUsersDocument } from "../../types";