Bikes api and ui

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 };

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...");
 };
 

web/src/bikes.tsx

@@ -0,0 +1,39 @@
+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 = () => {
+  const bikes: Bike[] = []; // Get bikes from api
+
+  return (
+    <ul>
+      {bikes.map((bike) => (
+        <li>
+          {bike.brand} | {bikeStatusToDisplayValueMap[bike.status]}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export { Bikes };

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</>)
+const App: React.FC = () => (
+  <>
+    <p>My bikes:</p>
+    <Bikes />
+  </>
+);