Feature/setup fixes and frontend improvements

Makefile

@@ -1,6 +1,6 @@
 BACKEND_CONTAINER_NAME=python_backend
 
-.PHONY: docker/start docker/start-build docker/clean backend/test backend/migrate backend/upgrade
+.PHONY: docker/start docker/start-build docker/clean backend/test backend/migrate backend/upgrade backend/init
 
 # Docker commands:
 
@@ -15,6 +15,9 @@ docker/clean:
 
 # Backend commands:
 
+backend/init:
+	docker compose exec $(BACKEND_CONTAINER_NAME) python3 -m flask --app main db init
+
 backend/migrate:
 	@if [ "$(message)" = "" ]; then \
 		echo "Please provide a migration message. Usage: make migrate message='Your migration message'"; \

README.md

@@ -37,6 +37,8 @@ Frontend Application (React): Provides a user-friendly interface for browsing an
 
 2. To start the services run `make docker/start`
 
+3. After starting the services, run the following make commands to setup the database and schemas: `backend/init`, `backend/migration`, `backend/upgrade`
+
 ### Makefile Commands
 
 This Makefile provides convenient targets to automate common development tasks.
@@ -47,6 +49,8 @@ This Makefile provides convenient targets to automate common development tasks.
 
 - **docker/clean**: Remove volumes and delete all images associated with the containers defined in the `docker-compose.yml` file.
 
+- **backend/init**: Inits Flask migration folder.
+
 - **backend/migrate**: Runs Flask migration with a specified message.
 
 - **backend/upgrade**: Upgrades the database schema using Flask.

backend/.gitignore

@@ -24,7 +24,6 @@ var/
 *.egg-info/
 .installed.cfg
 *.egg
-
 # PyInstaller
 #  Usually these files are written by a python script from a template
 #  before PyInstaller builds the exe, so as to inject date/other infos into it.
@@ -90,4 +89,5 @@ ENV/
 # Rope project settings
 .ropeproject
 
-*.code-workspace
+*.code-workspace
+migrations/

frontend/Dockerfile

@@ -4,6 +4,7 @@ FROM node:20
 # Set the working directory in the container
 WORKDIR /frontend
 
+
 # Copy the current directory contents into the container at /app
 COPY . /frontend
 
@@ -12,6 +13,4 @@ RUN npm install
 
 EXPOSE 3000
 
-# Command to run the Python script
-
-CMD ["npm", "start"]
+CMD ["npm", "run", "start"]

frontend/package.json

@@ -16,7 +16,8 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.5",
     "react-router-dom": "^6.23.1",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
+    "swr": "^2.2.5",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4",
     "yup": "^1.4.0"
@@ -27,7 +28,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint --fix --ext .ts,.tsx ."
-
   },
   "browserslist": {
     "production": [

frontend/src/components/Hooks/UseFilterHook.tsx

@@ -1,33 +1,17 @@
-import { ChangeEvent, useState } from "react";
+import { 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 => {
+  const isFilterFoundInProperties = (...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 properties.some((property) => property && String(property).toLowerCase().includes(filter.toLowerCase()));
   };
 
   return {
-    handleChangeFilter,
-    shouldFilterInWith,
+    filter,
+    setFilter,
+    isFilterFoundInProperties,
   };
 };

frontend/src/pages/Authors/Authors.tsx

@@ -1,23 +1,22 @@
-import React, { useEffect, useState } from "react";
+import React, { useMemo } from "react";
 import ManagementService from "services/managementService";
 import { useFilterHook } from "components/Hooks/UseFilterHook";
 import { Author } from "types/author";
+import useSWR from "swr";
 
 const managementService = new ManagementService();
 
 const Authors: React.FC = () => {
-  const [authors, setAuthors] = useState<Author[]>([]);
-  const { handleChangeFilter, shouldFilterInWith } = useFilterHook();
+  const { filter, setFilter, isFilterFoundInProperties } = useFilterHook();
+  const { data: authorsData, isLoading } = useSWR("authors", () => managementService.getAuthors());
 
-  useEffect(() => {
-    loadAuthors();
-  }, []);
+  const filteredAuthors = useMemo(() => {
+    if (!filter) return authorsData;
 
-  const loadAuthors = async () => {
-    const authors = await managementService.getAuthors();
-
-    setAuthors(authors);
-  };
+    return authorsData?.filter(({ name, nationality, birthDate, email, id }: Author) =>
+      isFilterFoundInProperties(name, nationality, birthDate, email, id),
+    );
+  }, [authorsData, filter]);
 
   return (
     <>
@@ -46,7 +45,7 @@ const Authors: React.FC = () => {
           <input
             type="text"
             id="table-search"
-            onChange={handleChangeFilter}
+            onChange={(e) => setFilter(e.target.value)}
             className="block py-3 ps-10 text-sm border rounded-lg w-80 focus:ring-blue-500 focus:border-blue-500 "
             placeholder="Search for items"
           />
@@ -60,40 +59,44 @@ const Authors: React.FC = () => {
       </div>
       <hr />
       <div className="block max-h-[78dvh] overflow-y-auto">
-        <table className="w-full text-sm text-left rtl:text-right text-gray-500">
-          <thead className="text-xs uppercase ">
-            <tr>
-              <th scope="col" className="px-1 py-3">
-                Author
-              </th>
-              <th scope="col" className="px-1 py-3">
-                Nationality
-              </th>
-              <th scope="col" className="px-1 py-3">
-                Birth date
-              </th>
-              <th scope="col" className="px-1 py-3">
-                E-mail
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {authors?.length > 0 &&
-              authors.map(
-                ({ name, nationality, birthDate, email, id }: Author) =>
-                  shouldFilterInWith(name, nationality, birthDate, email, id) && (
-                    <tr key={id} className="border-b hover:bg-gray-50">
-                      <th scope="row" className="px-1 py-4 font-medium text-gray-900 whitespace-nowrap">
-                        {name}
-                      </th>
-                      <td className="px-1 py-4">{nationality}</td>
-                      <td className="px-1 py-4">{birthDate}</td>
-                      <td className="px-1 py-4">{email}</td>
-                    </tr>
-                  ),
-              )}
-          </tbody>
-        </table>
+        {filteredAuthors && filteredAuthors.length > 0 ? (
+          <table className="w-full text-sm text-left rtl:text-right text-gray-500">
+            <thead className="text-xs uppercase ">
+              <tr>
+                <th scope="col" className="px-1 py-3">
+                  Author
+                </th>
+                <th scope="col" className="px-1 py-3">
+                  Nationality
+                </th>
+                <th scope="col" className="px-1 py-3">
+                  Birth date
+                </th>
+                <th scope="col" className="px-1 py-3">
+                  E-mail
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredAuthors.map(({ id, name, nationality, birthDate, email }) => (
+                <>
+                  <tr key={id} className="border-b hover:bg-gray-50">
+                    <th scope="row" className="px-1 py-4 font-medium text-gray-900 whitespace-nowrap">
+                      {name}
+                    </th>
+                    <td className="px-1 py-4">{nationality}</td>
+                    <td className="px-1 py-4">{birthDate}</td>
+                    <td className="px-1 py-4">{email}</td>
+                  </tr>
+                </>
+              ))}
+            </tbody>
+          </table>
+        ) : isLoading ? (
+          <span>Loading...</span>
+        ) : (
+          <span className="pt-5">No authors registered</span>
+        )}
       </div>
     </>
   );