Initial frontend draft

frontend/app/routes/Item.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import { FetchItem } from "~/Lib/Item";
+import type Item from "~/Models/Item";
+
+export const meta = () => {
+  return [
+    { title: "" },
+  ];
+};
+
+const Item = () => {
+  const params = useParams();
+  const [item, setItem] = useState<Item>();
+
+  useEffect(() => {
+    const libraryId = params["libraryId"];
+    const itemId = params["itemId"];
+
+    FetchItem(itemId!, libraryId!).then(response => {
+      setItem(response);
+    })
+  }, []);
+
+  return (
+    <></>
+  );
+};
+
+export default Item;

frontend/app/routes/Libraries.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import LibraryCard from "~/Components/Libraries/LibraryCard";
+import { FetchLibraries } from "~/Lib/Library";
+import type Library from "~/Models/Library";
+
+export const meta = () => {
+  return [
+    { title: "New React Router App" },
+  ];
+};
+
+const Libraries = () => {
+  const [libraries, setLibraries] = useState<Array<Library>>([]);
+
+  useEffect(() => {
+    FetchLibraries().then(response => {
+      setLibraries(response);
+    });
+  }, []);
+
+  return (
+    <div>
+      {libraries.length > 0 && libraries.map(library => {
+        return (
+          <LibraryCard library={library} key={library.id} />
+        );
+      })}
+    </div>
+  );
+};
+
+export default Libraries;

frontend/app/routes/LibraryItems.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import ItemCard from "~/Components/Items/ItemCard";
+import { FetchItems } from "~/Lib/Item";
+import type Item from "~/Models/Item";
+
+
+const LibraryItems = () => {
+  const params = useParams();
+  const [items, setItems] = useState<Array<Item>>([]);
+
+  useEffect(() => {
+    const librayId = params["libraryId"];
+
+    FetchItems(librayId!).then(response => {
+      setItems(response);
+    });
+  });
+
+  return (
+    <div>
+      {items.length > 0 && items.map(item => {
+        return (
+          <ItemCard key={item.id} item={item} />
+        )
+      })}
+    </div>
+  );
+}
+
+export default LibraryItems;

frontend/app/routes/home.tsx

@@ -1,7 +1,7 @@
 import type { Route } from "./+types/home";
-import { Welcome } from "../welcome/welcome";
 
-export function meta({}: Route.MetaArgs) {
+// eslint-disable-next-line no-empty-pattern
+export function meta({ }: Route.MetaArgs) {
   return [
     { title: "New React Router App" },
     { name: "description", content: "Welcome to React Router!" },
@@ -9,5 +9,7 @@ export function meta({}: Route.MetaArgs) {
 }
 
 export default function Home() {
-  return <Welcome />;
+  return (
+    <></>
+  );
 }