made item creation need user id

backend/src/controllers/itemControllers.js

@@ -39,6 +39,12 @@ const read = async (req, res, next) => {
 
 // The A of BREAD - Add (Create) operation
 const add = async (req, res, next) => {
+  // Only allowed if authentified
+  if (req.body.userId == null) {
+    res.sendStatus(401);
+    return;
+  }
+
   // Extract the item data from the request body
   const item = { ...req.body, user_id: 0 }; // 0 is definitely a bad idea...
 

backend/src/models/ItemManager.js

@@ -12,8 +12,8 @@ class ItemManager extends AbstractManager {
   async create(item) {
     // Execute the SQL INSERT query to add a new item to the "item" table
     const [result] = await this.database.query(
-      `insert into ${this.table} (title) values (?)`,
-      [item.title]
+      `insert into ${this.table} (title, user_id) values (?, ?)`,
+      [item.title, item.userId]
     );
 
     // Return the ID of the newly inserted item

frontend/src/main.jsx

@@ -16,6 +16,9 @@ const router = createBrowserRouter([
       {
         path: "/",
         element: <Home />,
+        loader: () => {
+          return fetch(`${import.meta.env.VITE_BACKEND_URL}/api/items`);
+        },
       },
       {
         path: "/login",

frontend/src/pages/Home.jsx

@@ -1,5 +1,70 @@
+import { useRef } from "react";
+import {
+  useLoaderData,
+  useOutletContext,
+  useRevalidator,
+} from "react-router-dom";
+
 function Home() {
-  return "hello from home";
+  const items = useLoaderData();
+
+  const titleRef = useRef();
+
+  const { user } = useOutletContext();
+
+  const revalidator = useRevalidator();
+
+  // Gestionnaire de soumission du formulaire
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    try {
+      // Appel à l'API pour demander une connexion
+      const response = await fetch(
+        `${import.meta.env.VITE_BACKEND_URL}/api/items`,
+        {
+          method: "post",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            title: titleRef.current.value,
+            userId: user.id,
+          }),
+        }
+      );
+
+      // Recharge la page si la création réussit
+      if (response.status === 201) {
+        revalidator.revalidate();
+      } else {
+        // Log des détails de la réponse en cas d'échec
+        console.info(response);
+      }
+    } catch (err) {
+      // Log des erreurs possibles
+      console.error(err);
+    }
+  };
+
+  return (
+    <>
+      {user != null && (
+        <form onSubmit={handleSubmit}>
+          <div>
+            {/* Champ pour l'title */}
+            <label htmlFor="title">title</label>{" "}
+            <input ref={titleRef} type="text" id="title" />
+          </div>
+          {/* Bouton de soumission du formulaire */}
+          <button type="submit">Send</button>
+        </form>
+      )}
+      <ul>
+        {items.map(({ id, title }) => (
+          <li key={id}>{title}</li>
+        ))}
+      </ul>
+    </>
+  );
 }
 
 export default Home;