register + deletions + image request changes

src/api/item.js

@@ -24,3 +24,45 @@ export const getItems = async () => {
         return error.response.data;
     }
 };
+
+export const createItem = async (values) => {
+    try {
+        const response = await axios.post(
+            `${import.meta.env.VITE_API_URL}/item`,
+            values,
+        );
+        console.log(response.data);
+        return response;
+
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+
+export const updateItem = async (_id, values) => {
+    try {
+        const response = await axios.put(
+            `${import.meta.env.VITE_API_URL}/item/${_id}`,
+            values,
+        );
+        console.log(response.data);
+        return response;
+
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+export const deleteItem = async (_id) => {
+    try {
+        const response = await axios.delete(
+            `${import.meta.env.VITE_API_URL}/item/${_id}`
+        );
+        console.log(response.data);
+        return response;
+
+    } catch (error) {
+        console.error(error);
+    }
+}

src/api/room.js

@@ -26,6 +26,56 @@ export const getRooms = async () => {
     }
 };
 
+export const createRoom = async (values) => {
+    try {
+        const response = await axios.post(
+            `${import.meta.env.VITE_API_URL}/room`,
+            values,
+        );
+        console.log(response.data);
+        return response;
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+export const updateRoom = async(_id, values) => {
+    try {
+        const response = await axios.put(
+            `${import.meta.env.VITE_API_URL}/room/${_id}`,
+            values,
+        );
+        console.log(response.data);
+        return response;
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+export const deleteRoom = async (_id) => {
+    try {
+        const itemsResponse = await axios.get(
+            `${import.meta.env.VITE_API_URL}/item`,
+        );
+        const items = itemsResponse.data;
+        items?.forEach(async (item) => {
+            await axios.delete(
+                `${import.meta.env.VITE_API_URL}/item/${item._id}`,
+            );
+        })
+
+        const response = await axios.delete(
+            `${import.meta.env.VITE_API_URL}/room/${_id}`
+        );
+        console.log(response.data);
+        return response;
+
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+
 export const getRoomStats = async () => {
     try {
         const response = await axios.get("/room/stats");

src/assets/styles/item-page.css

@@ -78,8 +78,7 @@
 }
 
 .item-list {
-    width: 100%;
+    width: 50vw;
-    max-width:50vw;
 }
 
 .pagination {

src/assets/styles/itembox.css

@@ -57,3 +57,34 @@
     .product-details button:hover {
         background-color: #0056b3;
     }
+
+.button-group {
+    margin-top: 10px;
+    display: flex;
+}
+
+.edit-button,
+.delete-button {
+    flex: 1;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.edit-button {
+    background-color: #007bff;
+    color: #fff;
+    margin-right: 10px;
+}
+
+.delete-button {
+    background-color: #dc3545;
+    color: #fff;
+}
+
+    .edit-button:hover,
+    .delete-button:hover {
+        background-color: #0056b3;
+    }

src/components/authenticated.jsx

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useContext } from "react";
 
 import { AuthenticationProvider } from "../contexts";
 
 export const Authenticated = ({ children }) => {
+    
   return <AuthenticationProvider>{children}</AuthenticationProvider>;
 };

src/components/form/formCreateItem.jsx

@@ -1,6 +1,9 @@
 import React, { useState, useEffect } from "react";
 import { Form, Input, InputNumber, Button, Select, DatePicker } from "antd";
 import axios from "axios";
+import { createItem } from '../../api/item'
+
+
 
 const { TextArea } = Input;
 const { Option } = Select;
@@ -26,16 +29,10 @@ export const FormCreateItem = ({ onClose }) => {
   }, []);
 
   const onFinish = async (values) => {
-    try {
+      let response = await createItem(values);
-      const response = await axios.post(
+      if (response?.status >= 200 && response?.status < 300) {
-        `${import.meta.env.VITE_API_URL}/item`,
+          window.location.reload();
-        values,
+      }
-      );
-      console.log(response.data);
-
-    } catch (error) {
-      console.error(error);
-    }
   };
 
   return (

src/components/form/formCreateRoom.jsx

@@ -1,20 +1,16 @@
 import React from "react";
 import { Form, Input, Button } from "antd";
+
 import axios from "axios";
 
 export const FormCreateRoom = () => {
   const [form] = Form.useForm();
 
   const onFinish = async (values) => {
-    try {
+      let response = await createRoom(values);
-      const response = await axios.post(
+      if (response?.status >= 200 && response?.status < 300) {
-        `${import.meta.env.VITE_API_URL}/room`,
+          window.location.reload();
-        values,
+      }
-      );
-      console.log(response.data);
-    } catch (error) {
-      console.error(error);
-    }
   };
 
   return (

src/components/form/formUpdateItem.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Form, Input, InputNumber, Button, Select, DatePicker } from "antd";
 import axios from "axios";
 import { getRooms } from "../../api/room";
-import { getItem } from "../../api/item";
+import { getItem, updateItem } from "../../api/item";
 import moment from "moment";
 
 const { Option } = Select;
@@ -69,16 +69,10 @@ export const FormUpdateItem = ({ itemId, onClose }) => {
   }, [item, form]);
 
   const onFinish = async (values) => {
-    try {
+      let response = await updateItem(item._id, values);
-      const response = await axios.put(
+      if (response?.status >= 200 && response?.status < 300) {
-        `${import.meta.env.VITE_API_URL}/item/${item._id}`,
+          window.location.reload();
-        values,
+      }
-      );
-      console.log(response.data);
-
-    } catch (error) {
-      console.error(error);
-    }
   };
 
   const dateFormat = "YYYY-MM-DD";

src/components/form/formUpdateRoom.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import {getRoom } from '../../api/room'
+import {getRoom, updateRoom, deleteRoom } from '../../api/room'
 import { Form, Input, Button } from "antd";
 import axios from "axios";
 
@@ -26,20 +26,23 @@ export const FormUpdateRoom = ({_id}) => {
         }
     }, [room, form]);
 
-  const onFinish = async (values) => {
+    const onFinish = async (values) => {
-    try {
+        let response = await updateRoom(_id, values);
-      const response = await axios.put(
+        if (response?.status >= 200 && response?.status < 300) {
-        `${import.meta.env.VITE_API_URL}/room/${_id}`,
+            window.location.reload();
-        values,
+        }
-      );
+    };
-      console.log(response.data);
+
-    } catch (error) {
+    const onDelete = async () => {
-      console.error(error);
+        let response = await deleteRoom(_id);
-    }
+        if (response?.status >= 200 && response?.status < 300) {
-  };
+            window.location.reload();
+        }
+    } 
 
   return (
       <Form form={form} onFinish={onFinish}>
+          <button onClick={onDelete}> Supprimer </button>
       <Form.Item
         label="Room Name"
         name="name"

src/components/item/ItemBox.jsx

@@ -5,6 +5,8 @@ import FormUpdateItem from "../form/formUpdateItem";
 import { Image } from "../parts/image";
 import { Description } from "../parts/description";
 import { Characteristic } from "../parts/characteristic";
+import { deleteItem } from '../../api/item'
+
 
 export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -15,7 +17,14 @@ export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
 
   const closeModal = () => {
     setIsModalOpen(false);
-  };
+    };
+
+    const onDelete = async () => {
+        let response = await deleteItem(_id);
+        if (response?.status >= 200 && response?.status < 300) {
+            window.location.reload();
+        }
+    } 
 
   let productname = brand + " " + model;
   let formatedPrice = price + "€";
@@ -23,30 +32,33 @@ export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
 
   let request = brand + " " + model;
 
-  return (
+    return (
-    <div className="product-details">
+        <div className="product-details">
-      <Description title={productname}>
+            <Description title={productname}>
-        <Image request={request} _id={_id} alt="Product" />
+                <Image request={request} alt="Product" />
-        <Characteristic label="Model" value={model} />
+                <Characteristic label="Model" value={model} />
-        <Characteristic label="Brand" value={brand} />
+                <Characteristic label="Brand" value={brand} />
-        <Characteristic label="Purchase Date" value={formatedDate} />
+                <Characteristic label="Purchase Date" value={formatedDate} />
-        <Characteristic label="Price" value={formatedPrice} />
+                <Characteristic label="Price" value={formatedPrice} />
-        {/* Bouton d'édition pour ouvrir la fenêtre modale */}
+                {/* Boutons d'édition et de suppression */}
-        <button onClick={openModal}>Edit</button>
+                <div className="button-group">
-      </Description>
+                    <button className="edit-button" onClick={openModal}>Edit</button>
-      {/* Fenêtre modale */}
+                    <button className="delete-button" onClick={onDelete}>Delete</button>
-      {isModalOpen && (
+                </div>
-        <div className="modal">
+            </Description>
-          <div className="modal-content">
+            {/* Fenêtre modale */}
-            <span className="close" onClick={closeModal}>
+            {isModalOpen && (
-              &times;
+                <div className="modal">
-            </span>
+                    <div className="modal-content">
-            <FormUpdateItem itemId={_id}>
+                        <span className="close" onClick={closeModal}>
-              {console.log("item ID :" + _id)}
+                            &times;
-            </FormUpdateItem>
+                        </span>
-          </div>
+                        <FormUpdateItem itemId={_id}>
+                            {console.log("item ID :" + _id)}
+                        </FormUpdateItem>
+                    </div>
+                </div>
+            )}
         </div>
-      )}
+    );
-    </div>
-  );
 };

src/components/nav/Navbar.jsx

@@ -26,16 +26,17 @@ function getItem(key, label) {
 const { SubMenu } = Menu;
 
 const Navbar = () => {
-  const [rooms, setRooms] = useState([]);
+    const [rooms, setRooms] = useState([]);
+
 
   useEffect(() => {
     console.log("NAVBAR EFFECT");
     isLoggedIn().then((user) => {
-      if (user !== "Unauthorized") {
+        if (user !== "Unauthorized") {
-        getRooms().then((result) => {
+            getRooms().then((result) => {
-          setRooms(result);
+                setRooms(result);
-        });
+            });
-      }
+        }
     });
   }, []);
 
@@ -57,7 +58,7 @@ const Navbar = () => {
   try {
     return (
       <Menu
-        defaultSelectedKeys={["1"]}
+        defaultSelectedKeys={["0"]}
         defaultOpenKeys={["sub1"]}
         theme="dark"
         mode="inline"

src/components/parts/image.jsx

@@ -2,17 +2,17 @@
 import React, { useEffect, useState } from 'react';
 import { searchAndResizeImage } from '../../api/image-request'
 
-export const Image = ({ src, alt, request, _id }) => {
+export const Image = ({ src, alt, request }) => {
     const [cacheUrl, setCacheUrl] = useState(null);
 
     useEffect(() => {
         const fetchData = async () => {
-            let cachedUrl = localStorage.getItem(_id);
+            let cachedUrl = localStorage.getItem(request);
             if (!cachedUrl) {
                 try {
                     cachedUrl = await searchAndResizeImage(request);
-                    localStorage.setItem(_id, cachedUrl);
+                    localStorage.setItem(request, cachedUrl);
-                    console.log("Mise en cache de l'image avec l'ID : " + _id);
+                    console.log("Mise en cache de l'image avec la requête : " + request);
                 } catch (error) {
                     console.error("Erreur lors de la récupération de l'image : ", error);
                 }
@@ -21,7 +21,7 @@ export const Image = ({ src, alt, request, _id }) => {
         };
 
         fetchData();
-    }, [request, _id]);
+    }, [request]);
 
     if (src) {
         return <img src={src} alt={alt} style={{ display: 'block', margin: 'auto' }} width='150px' height='150px' />;

src/components/rooms/room-detail.jsx

@@ -24,7 +24,7 @@ export const RoomDetail = ({
     <div className="room-detail">
       {isUpdateFormVisible ? (
         <div>
-          <h2>Modifier une chambre (non fonctionnel)</h2>
+          <h2>Modifier une chambre</h2>
                   <button onClick={handleBackClick}>Annuler </button>
                   <FormUpdateRoom _id={selectedRoom} />
         </div>

src/components/rooms/roomBox.jsx

@@ -6,7 +6,8 @@ import { Characteristic } from "../parts/characteristic";
 export const RoomBox = ({ room, onRoomClick }) => {
   const handleBoxClick = () => {
     onRoomClick(room._id);
-  };
+    };
+
 
   return (
     <div className="room-details" onClick={handleBoxClick}>

src/pages/authenticated/login.jsx

@@ -16,7 +16,11 @@ export const Login = () => {
     if (response && !response.success) {
       setError(response.error);
     }
-  };
+    };
+
+    const onRegister = () => {
+        window.location.href = '/register'
+    }
 
   return (
     <div>
@@ -36,6 +40,7 @@ export const Login = () => {
           onChange={(e) => setPassword(e.target.value)}
         />
         <button type="submit">submit</button>
+              <button onClick={onRegister}>Register</button>
       </form>
     </div>
   );

src/pages/authenticated/register.jsx

@@ -21,7 +21,8 @@ export const Register = () => {
 
   return (
     <div>
-      <h1>Register page</h1>
+          <h1>Register page</h1>
+      <p>Password must include a capital letter, a digit and a symbol</p>
       {error && <p className="text-red-500">{error}</p>}
       <form onSubmit={onSubmit}>
         <input