✨ Add product images and basic nav

frontend/src/features/Register.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-
-import { Product, User } from "../types";
-import { useRegister } from "./useRegister";
-
-export const Register: React.FC = () => {
-  const { users, products, loading, showAll, setShowAll } = useRegister();
-  if (loading) {
-    return <div>...</div>;
-  }
-  return (
-    <div>
-      <section>
-        {users.map((user: User) => {
-          return <div key={user.id}>{user.firstName}</div>;
-        })}
-      </section>
-      <section>
-        {products.map((product: Product) => {
-          return <div key={product.id}>{product.name}</div>;
-        })}
-      </section>
-    </div>
-  );
-};

frontend/src/features/deposit/Deposit.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Deposit: React.FC = () => {
+  return <div>Hi from deposit</div>;
+};

frontend/src/features/register/Register.module.css

@@ -0,0 +1,19 @@
+.productList {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 16px;
+}
+.product {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.productText {
+    padding-top: 8px;
+}
+.productImage {
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+}

frontend/src/features/register/Register.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import { Product, User } from "../../types";
+import styles from "./Register.module.css";
+import { useRegister } from "./useRegister";
+
+export const Register: React.FC = () => {
+  const { users, products, loading, showAll, setShowAll } = useRegister();
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+  return (
+    <div>
+      <section>
+        <h2>Hvem kjøper?</h2>
+        <div key="external">Ekstern</div>
+        {users.map((user: User) => {
+          return <div key={user.id}>{user.firstName}</div>;
+        })}
+        <button type="button" onClick={() => setShowAll(!showAll)}>
+          {showAll ? "Skjul gamliser" : "Vis alle"}
+        </button>
+      </section>
+      <section>
+        <h2>Kjøper hva?</h2>
+        <div className={styles.productList}>
+          {products.map((product: Product) => {
+            return (
+              <div key={product.id} className={styles.product}>
+                {product.imageUrl && <img src={product.imageUrl} className={styles.productImage} alt={product.name} />}
+                <span className={styles.productText}>{product.name}</span>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+      <section>
+        Totalt: 0
+        <button type="button" onClick={() => console.log("kjøp")}>
+          Kjøp
+        </button>
+        <button type="button" onClick={() => console.log("reset")}>
+          Start på nytt
+        </button>
+      </section>
+    </div>
+  );
+};

frontend/src/features/register/allProducts.graphql

@@ -2,6 +2,7 @@ query allProducts($active: Boolean!) {
   allProducts(filters: {active: $active}) {
     id
     name
+    imageUrl
     salePriceExt
     salePriceInt
   }

frontend/src/features/register/useRegister.ts

@@ -1,11 +1,19 @@
 import { parseISO, subDays } from "date-fns";
 import { useState } from "react";
 
-import { useAllProductsQuery, useAllUsersQuery, User } from "../types";
+import { useAllProductsQuery, useAllUsersQuery, User, Product } from "../../types";
 
 const activeLimitDays = 365 / 2;
 
-export const useRegister = () => {
+type useRegisterType = {
+  users: User[];
+  products: Product[];
+  loading: boolean;
+  showAll: boolean;
+  setShowAll: CallableFunction;
+};
+
+export const useRegister = (): useRegisterType => {
   const [showAll, setShowAll] = useState(false);
   const { data, loading } = useAllProductsQuery({ variables: { active: true } });
   const { data: usersData, loading: usersLoading } = useAllUsersQuery();