Frontend docker, page of books and authors (#5)

* feat: add frontend to docker

* feat: create a navbar

* feat: create authors and books pages

docker-compose.yaml

@@ -15,10 +15,23 @@ services:
       - ./backend:/backend
     environment:
       - FLASK_ENV=development
+      - DATABASE_URI=postgresql://postgres:changeme@postgres:5432/postgres
+
     networks:
       - my_network
     command: python3 -m flask --app main run --debug --host=0.0.0.0
 
+  react_frontend:
+    build: ./frontend
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./frontend:/frontend
+    environment:
+      - REACT_APP_API_URL=http://localhost:5000
+    networks:
+      - my_network
+
   postgres:
     container_name: postgres_container
     image: postgres

frontend/Dockerfile

@@ -0,0 +1,17 @@
+# Use the official Python image as base image
+FROM node:20
+
+# Set the working directory in the container
+WORKDIR /frontend
+
+# Copy the current directory contents into the container at /app
+COPY . /frontend
+
+# Install any dependencies
+RUN npm install
+
+EXPOSE 3000
+
+# Command to run the Python script
+
+CMD ["npm", "start"]

frontend/package.json

@@ -13,6 +13,7 @@
     "axios": "^1.7.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

frontend/src/components/Hooks/UseFilterHook.tsx

@@ -0,0 +1,33 @@
+import { ChangeEvent, useState } from "react";
+
+export const useFilterHook = () => {
+    const [filter, setFilter] = useState<string | null>(null)
+
+    const handleChangeFilter = (e: ChangeEvent<HTMLInputElement>): void => {
+        setFilter(e.target.value)
+    }
+
+    const shouldFilterInWith = (...properties: (unknown | undefined)[]): boolean => {
+        if (!filter) return true
+
+        let anyPropertyMatch = false
+
+        for (const property of properties) {
+            if (typeof property === "undefined") {
+                continue
+            }
+
+            if (String(property).toLowerCase().includes(filter.toLowerCase())) {
+                anyPropertyMatch = true
+                break
+            }
+        }
+
+        return anyPropertyMatch
+    }
+
+    return {
+        handleChangeFilter,
+        shouldFilterInWith,
+    }
+}

frontend/src/components/Layout.tsx

@@ -0,0 +1,14 @@
+import { Navbar } from "./Navbar/Navbar";
+
+interface LayoutProps {
+    element: React.ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ element }) => (
+    <>
+        <Navbar />
+        {element}
+    </>
+);
+
+export default Layout;

frontend/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { useLocation } from 'react-router-dom';
+
+export const Navbar: React.FC = () => {
+
+    const location = useLocation();
+
+    const [nav, setNav] = useState(false);
+
+    const handleNav = () => {
+        setNav(!nav);
+    };
+
+    const verifyCurrentRouteAndApplyStylingClasses = (path: string) => {
+        console.log(location.pathname)
+        if (location.pathname === path) {
+            return "bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium"
+        }
+
+        return "text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium"
+    }
+
+
+    return (
+        <nav className="bg-gray-800">
+            <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+                <div className="relative flex h-16 items-center justify-between">
+                    <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
+
+                        <button onClick={handleNav} type="button" className="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
+                            <span className="absolute -inset-0.5"></span>
+                            <span className="sr-only">Open main menu</span>
+
+                            <svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+                            </svg>
+
+                            <svg className="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                    <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+                        <span className="flex flex-shrink-0 items-center text-white">Book's Manager</span>
+                        <div className="hidden sm:ml-6 sm:block">
+                            <div className="flex space-x-4">
+                                <a href="/" className={verifyCurrentRouteAndApplyStylingClasses("/")} aria-current="page">Books</a>
+                                <a href="/authors" className={verifyCurrentRouteAndApplyStylingClasses("/authors")}>Authors</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className={`sm:hidden ${!nav && "hidden"}`} id="mobile-menu">
+                <div className="space-y-1 px-2 pb-3 pt-2">
+                    <a href="/" className="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium" aria-current="page">Books</a>
+                    <a href="/authors" className="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Authors</a>
+                </div>
+            </div>
+        </nav>
+    )
+}

frontend/src/index.tsx

@@ -1,19 +1,34 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
+
+import Books from 'pages/Books/Books';
 import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import { Navbar } from 'components/Navbar/Navbar';
+import Authors from 'pages/Authors/Authors';
+import Layout from 'components/Layout';
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Layout element={<Books />} />,
+  },
+  {
+    path: "/authors",
+    element: <Layout element={<Authors />} />,
+  },
+]);
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
+
 root.render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();