Merge pull request #32 from flemton/feature/first_cr_check

Feature/first cr check

README.md

@@ -98,28 +98,25 @@ Before you begin, make sure you have the following prerequisites installed on yo
 
 Clone this repository to your desired folder:
 
-sh <br>
-cd my-folder <br>
-git clone https://github.com/flemton/Final-Capstone-Frontend.git
+```sh
+  cd my-folder
+  git clone https://github.com/flemton/Final-Capstone-Frontend.git
+```
 
 ### Install
 
 Install this project with:
-
-- npm install
+```
+  npm install
+```
 
 ### Usage
 
 To run the project, execute the following command:
 
-npm start
-
-### Prerequisites
-
-Before running the tests, ensure you have the following installed:
-
-- Node.js: You need Node.js to execute the test scripts.
-- npm: npm is used to manage packages in your React project.
+```
+  npm start
+```
 
 <p align="right"><a href="#readme-top">back to top</a></p>
 

package.json

@@ -26,7 +26,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts start --port 3001",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/App.css

@@ -78,6 +78,10 @@
   background-color: #e5e5e5;
 }
 
+.sidebar-menu-ul a:last-child:hover {
+  background-color: #ffe5e5;
+}
+
 .sidebar-btn-container-show {
   position: absolute;
   right: -3.2rem;

src/components/CarDetails/CarDetails.jsx

@@ -90,7 +90,7 @@ const CarDetails = ({ car, onGoBack }) => {
               {' '}
               <box-icon name="undo" color="#fff" />
             </button>
-            <p className="text-white fw-semibold mb-1">Configure</p>
+            <p className="text-white fw-semibold mb-1">Reserve</p>
             <button
               className="btn text-white"
               onClick={() => navigate(`/reserve/${car.id}`)}

src/components/CarsCard/CarsCard.jsx

@@ -59,7 +59,7 @@ const CarsCard = ({ cars, delete: isDeleteMode }) => {
           )}
           <p className="text-wrap text-muted text-center px-5">
             Order online and schedule a&nbsp;
-            <span className="text-decoration-underline">Test Drive</span>
+            <a className="text-decoration-underline text-black" href="/reserve">Test Drive</a>
           </p>
         </div>
       )}

src/components/Menu/BurgerMenu.jsx

@@ -11,6 +11,12 @@ const BurgerMenu = () => {
   const handleClick = () => {
     setSidebarVisible(!sidebarVisible);
   };
+
+  const logout = () => {
+    localStorage.removeItem('token');
+    window.location.href = '/';
+  };
+
   return (
     <>
       <div className="burger-menu position-absolute top-0 w-100 d-flex flex-row-reverse justify-content-between align-items-start gap-5 z-2">
@@ -74,6 +80,14 @@ const BurgerMenu = () => {
                 >
                   DELETE CAR
                 </NavLink>
+                <NavLink
+                  to="/"
+                  onClick={logout}
+                  className="sidebar-menu-navlink text-end"
+                  activeclassname="active"
+                >
+                  LOGOUT
+                </NavLink>
               </div>
             </div>
             <div>

src/components/Sidebar/Sidebar.jsx

@@ -12,6 +12,11 @@ const Sidebar = () => {
     setSidebarVisible(!sidebarVisible);
   };
 
+  const logout = () => {
+    localStorage.removeItem('token');
+    window.location.href = '/';
+  };
+
   return (
     <>
       <div className="sidebar d-flex vh-100 position-relative">
@@ -38,6 +43,9 @@ const Sidebar = () => {
               <NavLink to="/delete-car" activeclassname="active">
                 DELETE CAR
               </NavLink>
+              <NavLink to="/" onClick={logout} activeclassname="active">
+                LOGOUT
+              </NavLink>
             </div>
           </div>
 

src/pages/AddReservation/AddReservation.jsx

@@ -16,23 +16,39 @@ const AddReservation = () => {
   const [city, setCity] = useState('');
   const [selectedCar, setSelectedCar] = useState('');
   const { id } = useParams();
+  const [formValid, setFormValid] = useState(false);
+
+  const checkFormValidity = () => {
+    const isValid = startTime && endTime && city && selectedCar;
+    setFormValid(isValid);
+  };
 
   const handleReservation = async (e) => {
     e.preventDefault();
-    const reservationData = {
-      start_date: startTime,
-      end_date: endTime,
-      city,
-      user_id: currentUser.id,
-    };
-    dispatch(createUserReservation({ reservationData, selectedCar }));
-    navigate('/home');
+    if (formValid) {
+      const reservationData = {
+        start_date: startTime,
+        end_date: endTime,
+        city,
+        user_id: currentUser.id,
+      };
+      dispatch(createUserReservation({ reservationData, selectedCar }));
+      navigate('/home');
+    } else {
+      alert('Please fill in all the required fields');
+    }
   };
 
+  useEffect(() => {
+    checkFormValidity();
+  }, [startTime, endTime, city, selectedCar]);
+
   useEffect(() => {
     const fetchData = () => {
       try {
-        const selectedIdCar = cars.find((elt) => parseInt(elt.id, 10) === parseInt(id, 10));
+        const selectedIdCar = cars.find(
+          (elt) => parseInt(elt.id, 10) === parseInt(id, 10),
+        );
         setSelectedCar(selectedIdCar);
       } catch (error) {
         setSelectedCar('');
@@ -63,10 +79,7 @@ const AddReservation = () => {
         >
           Back
         </button>
-
-        <div
-          className="position-absolute start-0 pt-2 pb-3 w-50 ps-4"
-        >
+        <div className="position-absolute start-0 pt-2 pb-3 w-50 ps-4">
           <Logo />
         </div>
 
@@ -77,7 +90,9 @@ const AddReservation = () => {
                 <h1 className="text-center font-weight-bold">Reserve Model</h1>
                 <p className="my-1 shadow p-3 mb-5 bg-body-tertiary text-center">
                   Current User:
-                  <span className="px-2">{currentUser ? currentUser.username : 'Loading...'}</span>
+                  <span className="px-2">
+                    {currentUser ? currentUser.username : 'Loading...'}
+                  </span>
                 </p>
               </div>
 
@@ -114,6 +129,7 @@ const AddReservation = () => {
                       value={startTime}
                       onChange={(e) => setStartTime(e.target.value)}
                       required
+                      onInvalid={() => alert('Please fill in the Start Time field')}
                     />
                   </label>
                 </div>
@@ -126,6 +142,7 @@ const AddReservation = () => {
                       value={endTime}
                       onChange={(e) => setEndTime(e.target.value)}
                       required
+                      onInvalid={() => alert('Please fill in the End Time field')}
                     />
                   </label>
                 </div>
@@ -138,12 +155,13 @@ const AddReservation = () => {
                       value={city}
                       onChange={(e) => setCity(e.target.value)}
                       required
+                      onInvalid={() => alert('Please fill in the City field')}
                     />
                   </label>
                 </div>
 
                 <div className="my-4 text-center">
-                  <button className="btn btn-dark" type="submit">
+                  <button className="btn btn-dark" type="submit" disabled={!formValid}>
                     Reserve
                   </button>
                 </div>