✨ Add product images and basic nav

frontend/src/App.tsx

@@ -1,17 +1,22 @@
 import { ApolloProvider } from "@apollo/client";
 import React from "react";
+import { BrowserRouter as Router } from "react-router-dom";
 
 import styles from "./App.module.css";
+import { Routes } from "./Routes";
 import logo from "./assets/brick.svg";
 import client from "./client";
-import { Register } from "./features/Register";
+import { Header } from "./components/Header";
 
 const App: React.FC = () => (
   <ApolloProvider client={client}>
-    <div className={styles.app}>
-      <img src={logo} className={styles.logo} alt="logo" />
-      <Register />
-    </div>
+    <Router>
+      <Header />
+      <div className={styles.app}>
+        <img src={logo} className={styles.logo} alt="logo" />
+        <Routes />
+      </div>
+    </Router>
   </ApolloProvider>
 );
 

frontend/src/Routes.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+
+import { Deposit } from "./features/deposit/Deposit";
+import { Register } from "./features/register/Register";
+
+export const Routes: React.FC = () => (
+  <Switch>
+    <Route path="/deposit" component={Deposit} />
+    <Route path="/" component={Register} />
+  </Switch>
+);

frontend/src/components/Header.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export const Header: React.FC = () => {
+  return (
+    <header>
+      <div>Biceps Bar System - BBS</div>
+      <nav>
+        <Link to="/">Kjøp drikke</Link>
+        <Link to="/deposit">Sett inn penger</Link>
+      </nav>
+    </header>
+  );
+};

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();

frontend/src/types.ts

@@ -19,6 +19,7 @@ export type Scalars = {
 export type Product = {
   __typename?: 'Product';
   id: Scalars['ID'];
+  imageUrl: Scalars['String'];
   name: Scalars['String'];
   salePriceExt: Scalars['Float'];
   salePriceInt: Scalars['Float'];
@@ -61,7 +62,7 @@ export type AllProductsQueryVariables = Exact<{
 }>;
 
 
-export type AllProductsQuery = { __typename?: 'Query', allProducts: Array<{ __typename?: 'Product', id: string, name: string, salePriceExt: number, salePriceInt: number }> };
+export type AllProductsQuery = { __typename?: 'Query', allProducts: Array<{ __typename?: 'Product', id: string, name: string, imageUrl: string, salePriceExt: number, salePriceInt: number }> };
 
 export type AllUsersQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -74,6 +75,7 @@ export const AllProductsDocument = gql`
   allProducts(filters: {active: $active}) {
     id
     name
+    imageUrl
     salePriceExt
     salePriceInt
   }