🏷 Make tsc happy

frontend/src/features/deposit/Deposit.tsx

@@ -54,6 +54,10 @@ export const Deposit: React.FC = () => {
     setUserQuery("");
   };
 
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <div>
       <section>

frontend/src/features/log/Log.tsx

@@ -17,21 +17,20 @@ export const Log = () => {
     transactionOffset: Number,
   };
   const [params, setParams] = useUrlSearchParams({}, types);
+  const orderOffset = Number(params.orderOffset) || 0;
+  const transactionOffset = Number(params.transactionOffset) || 0;
   const { data: ordersData, loading: ordersLoading } = useQuery(OrderListDocument, {
-    variables: { offset: params.orderOffset },
+    variables: { offset: orderOffset },
   });
   const { data: transactionsData, loading: transactionsLoading } = useQuery(TransactionListDocument, {
-    variables: { offset: params.transactionOffset },
+    variables: { offset: transactionOffset },
   });
   const loading = ordersLoading || transactionsLoading;
 
-  const orderOffset = params.orderOffset || 0;
-  const transactionOffset = params.transactionOffset || 0;
-
   if (loading) return <div>Loading...</div>;
 
-  const { orderList: orders } = ordersData;
-  const { transactionList: transactions } = transactionsData;
+  const orders = ordersData?.orderList || [];
+  const transactions = transactionsData?.transactionList || [];
 
   return (
     <div className={styles.log}>
@@ -47,6 +46,7 @@ export const Log = () => {
             </tr>
           </thead>
           <tbody>
+            {/* @ts-expect-error The graphql query is not fetching all the fields, so the types are not overlapping */}
             {orders.map((order: Order) => (
               <tr key={order.id}>
                 <td>{formatTime(order.created)}</td>
@@ -99,6 +99,7 @@ export const Log = () => {
             </tr>
           </thead>
           <tbody>
+            {/* @ts-expect-error The graphql query is not fetching all the fields, so the types are not overlapping */}
             {transactions.map((trans: Transaction) => (
               <tr key={trans.id}>
                 <td>{formatTime(trans.created)}</td>

frontend/src/features/register/Register.tsx

@@ -15,9 +15,9 @@ type OrderLineInput = {
   amount: number;
 };
 
-const sumTotal = (products: Product[], order: OrderLineInput[], isExternal: boolean) => {
+const sumTotal = (products: Omit<Product, "userCounts">[], order: OrderLineInput[], isExternal: boolean) => {
   const prices = order.map((orderLine: OrderLineInput) => {
-    const product = products.find((product: Product) => product.id === orderLine.productId);
+    const product = products.find((product: Omit<Product, "userCounts">) => product.id === orderLine.productId);
     if (!product) return 0;
     return orderLine.amount * (isExternal ? product.salePriceExt : product.salePriceInt);
   });
@@ -116,7 +116,7 @@ export const Register: React.FC = () => {
       <section className={styles.productListSection}>
         <h2>Kjøper hva?</h2>
         <div className={styles.productList}>
-          {products.map((product: Product) => (
+          {products.map((product: Omit<Product, "userCounts">) => (
             <ProductCard
               key={product.id}
               product={product}

frontend/src/features/register/useRegister.ts

@@ -8,7 +8,7 @@ const activeLimitDays = 365 / 2;
 
 type useRegisterType = {
   users: User[];
-  products: Product[];
+  products: Omit<Product, "userCounts">[];
   loading: boolean;
   showAll: boolean;
   setShowAll: CallableFunction;