From 78989df8ea5462aa060a12d64a5b4ad3d8513f64 Mon Sep 17 00:00:00 2001
From: Henri Kellock <henri.kellock@wunderdog.fi>
Date: Tue, 29 Nov 2022 19:02:47 +0200
Subject: [PATCH 1/3] Add bikes api

Fix handler types
---
 api/src/bikes.ts | 19 +++++++++++++++++++
 api/src/index.ts |  5 +++++
 2 files changed, 24 insertions(+)
 create mode 100644 api/src/bikes.ts

diff --git a/api/src/bikes.ts b/api/src/bikes.ts
new file mode 100644
index 0000000..e7e1bc9
--- /dev/null
+++ b/api/src/bikes.ts
@@ -0,0 +1,19 @@
+enum BikeStatus {
+  Sold,
+  Stolen,
+  PartiallyStolen,
+  NotYetStolen,
+  NotYetBought,
+}
+
+const getBikes = () => {
+  return [
+    { id: "a", brand: "Rose", status: BikeStatus.Sold },
+    { id: "b", brand: "Canyon", status: BikeStatus.Sold },
+    { id: "c", brand: "Focus", status: BikeStatus.Stolen },
+    { id: "d", brand: "Focus", status: BikeStatus.PartiallyStolen },
+    { id: "e", brand: "Trek", status: BikeStatus.NotYetBought },
+  ];
+};
+
+export { getBikes };
diff --git a/api/src/index.ts b/api/src/index.ts
index 7c85b91..e69d6c7 100644
--- a/api/src/index.ts
+++ b/api/src/index.ts
@@ -1,6 +1,11 @@
 // This file contains the api
 
+import { getBikes } from "./bikes";
+
 const api = () => {
+  const handlers: Function[] = [];
+  handlers.push(getBikes);
+
   console.log("The api is running...");
 };
 

From 3397bd615df0fce0aedb09e73c431f0019887ac9 Mon Sep 17 00:00:00 2001
From: Henri Kellock <henri.kellock@wunderdog.fi>
Date: Tue, 29 Nov 2022 18:23:12 +0200
Subject: [PATCH 2/3] Add bikes to the UI

---
 web/src/bikes.tsx | 20 ++++++++++++++++++++
 web/src/index.tsx | 10 ++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 web/src/bikes.tsx

diff --git a/web/src/bikes.tsx b/web/src/bikes.tsx
new file mode 100644
index 0000000..a82da63
--- /dev/null
+++ b/web/src/bikes.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+type Bike = {
+  id: string;
+  brand: string;
+};
+
+const Bikes: React.FC = () => {
+  const bikes: Bike[] = []; // Get bikes from api
+
+  return (
+    <ul>
+      {bikes.map((bike) => (
+        <li>{bike.brand}</li>
+      ))}
+    </ul>
+  );
+};
+
+export { Bikes };
diff --git a/web/src/index.tsx b/web/src/index.tsx
index f0ebc9e..3b8fc9d 100644
--- a/web/src/index.tsx
+++ b/web/src/index.tsx
@@ -1,3 +1,9 @@
-import React from 'react'
+import React from "react";
+import { Bikes } from "./bikes";
 
-const App: React.FC = () => (<>The app</>)
\ No newline at end of file
+const App: React.FC = () => (
+  <>
+    <p>My bikes:</p>
+    <Bikes />
+  </>
+);

From 71ca9fdeb6aae535c98d3927ee62313413a1ac8e Mon Sep 17 00:00:00 2001
From: Henri Kellock <henri.kellock@wunderdog.fi>
Date: Tue, 29 Nov 2022 18:40:52 +0200
Subject: [PATCH 3/3] Add status to bikes in ui

Fix bike status displaying in the ui
---
 web/src/bikes.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/web/src/bikes.tsx b/web/src/bikes.tsx
index a82da63..1389b12 100644
--- a/web/src/bikes.tsx
+++ b/web/src/bikes.tsx
@@ -1,8 +1,25 @@
 import React from "react";
 
+enum BikeStatus {
+  Sold,
+  Stolen,
+  PartiallyStolen,
+  NotYetStolen,
+  NotYetBought,
+}
+
 type Bike = {
   id: string;
   brand: string;
+  status: BikeStatus;
+};
+
+const bikeStatusToDisplayValueMap: Record<BikeStatus, string> = {
+  [BikeStatus.Sold]: "Sold",
+  [BikeStatus.Stolen]: "Stolen",
+  [BikeStatus.PartiallyStolen]: "PartiallyStolen",
+  [BikeStatus.NotYetStolen]: "NotYetStolen",
+  [BikeStatus.NotYetBought]: "NotYetBought",
 };
 
 const Bikes: React.FC = () => {
@@ -11,7 +28,9 @@ const Bikes: React.FC = () => {
   return (
     <ul>
       {bikes.map((bike) => (
-        <li>{bike.brand}</li>
+        <li>
+          {bike.brand} | {bikeStatusToDisplayValueMap[bike.status]}
+        </li>
       ))}
     </ul>
   );