From 727b043507403da803b2d610e23d1360c4208b0e Mon Sep 17 00:00:00 2001
From: Felipe <fperezferraro@gmail.com>
Date: Fri, 15 Dec 2023 13:57:23 -0300
Subject: [PATCH] Fixed user null issues for delte myreservations and reserve

---
 src/components/pages/DeleteBoat.jsx     |  77 +++++++----
 src/components/pages/MyReservations.jsx |  97 ++++++++------
 src/components/pages/Reserve.jsx        | 169 +++++++++++++-----------
 3 files changed, 196 insertions(+), 147 deletions(-)

diff --git a/src/components/pages/DeleteBoat.jsx b/src/components/pages/DeleteBoat.jsx
index 4a3da72..e78efbd 100644
--- a/src/components/pages/DeleteBoat.jsx
+++ b/src/components/pages/DeleteBoat.jsx
@@ -1,11 +1,13 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { deleteBoat, fetchBoats, selectAllBoats } from '../../redux/boats/boatsSlice';
+import { selectUser } from '../../redux/usersession/usersessionsSlice';
 
 function DeleteBoat() {
   const dispatch = useDispatch();
   const boats = useSelector(selectAllBoats);
   const currentItems = Array.isArray(boats);
+  const user = useSelector(selectUser);
 
   useEffect(() => {
     dispatch(fetchBoats());
@@ -17,32 +19,57 @@ function DeleteBoat() {
   };
 
   return (
-    <section className="h-full">
-      <article className="flex flex-col items-center mx-auto max-w-xs lg:max-w-lg h-full">
-        <h2 className="text-center text-2xl font-black my-4 lg:text-4xl lg:my-10 uppercase">
-          Delete Boats
-        </h2>
-        <h4 className="text-center">
-          Please click on Delete button to delete a boat
-        </h4>
-        <p className="text-gray-300 my-6">********************</p>
-        <div className="flex flex-col gap-y-2 w-full">
-          {currentItems
-            && boats.map((boat) => (
-              <div key={boat.id} className="flex justify-between items-center border border-black p-2">
-                <h1>{boat.name}</h1>
-                <button
-                  type="button"
-                  onClick={() => handleClick(boat.id)}
-                  className="bg-red-600 py-1 rounded w-16 text-center text-white font-semibold hover:bg-red-800"
+    <>
+      {user === null ? (
+        <section className="h-full flex justify-center items-center">
+          <article className="flex flex-col gap-4 border border-slate-950 rounded-md p-4">
+            <h2 className="font-black uppercase text-4xl text-center">Acces Denied</h2>
+            <p>Please Log In first so you can Delete a boat.</p>
+          </article>
+        </section>
+      ) : (
+        <section className="h-full">
+          <article className="flex flex-col items-center mx-auto max-w-xs lg:max-w-lg h-full">
+            <h2 className="text-center text-2xl font-black my-4 lg:text-4xl lg:my-10 uppercase">
+              Delete Boats
+            </h2>
+            <h4 className="text-center">
+              Please click on Delete button to delete a boat
+            </h4>
+            <p className="text-gray-300 my-6">********************</p>
+            <div className="flex flex-col gap-y-2 w-full">
+              {currentItems
+              && boats.map((boat) => (
+                <div
+                  key={boat.id}
+                  className="flex justify-between items-center border border-black p-2"
                 >
-                  Delete
-                </button>
-              </div>
-            ))}
-        </div>
-      </article>
-    </section>
+                  <h1>{boat.name}</h1>
+                  {boat.user_id === user.id ? (
+                    <button
+                      type="button"
+                      onClick={() => handleClick(boat.id)}
+                      className="bg-red-600 py-1 rounded w-16 text-center text-white font-semibold hover:bg-red-800"
+                    >
+                      Delete
+                    </button>
+                  ) : (
+                    <button
+                      type="button"
+                      disabled
+                      title="You can only delete your boats"
+                      className="py-1 border border-slate-950 rounded w-16 text-center"
+                    >
+                      Delete
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
+          </article>
+        </section>
+      )}
+    </>
   );
 }
 
diff --git a/src/components/pages/MyReservations.jsx b/src/components/pages/MyReservations.jsx
index bfd1d36..175eba6 100644
--- a/src/components/pages/MyReservations.jsx
+++ b/src/components/pages/MyReservations.jsx
@@ -8,7 +8,7 @@ function MyReservations() {
   const { reservations } = useSelector((state) => state.reservations);
   const user = useSelector(selectUser);
   const dispatch = useDispatch();
-  const userReservations = reservations.filter((e) => e.username === user.name);
+  const userReservations = reservations.filter((e) => e.username === user?.name);
   const boats = useSelector(selectAllBoats);
   console.log(boats);
 
@@ -18,49 +18,60 @@ function MyReservations() {
   }, [dispatch]);
 
   return (
-    <section className="my-6">
-      <article className="flex flex-col gap-y-3 mx-auto max-w-sm lg:max-w-4xl">
-        <h2 className="text-center text-2xl font-black lg:text-3xl uppercase">
-          My reservations
-        </h2>
-        <p className="text-center">Here you can see all your reservations.</p>
-        <div className="flex flex-wrap gap-x-2 gap-y-2 my-4 justify-center items-center">
-          {userReservations.map((re) => (
-            <div key={re.id} className="flex flex-col gap-2 border border-slate-800 p-2 bg-slate-100">
-              <span className="font-bold">
-                Reservation #
-                {re.id}
-              </span>
-              <h2 className="text-slate-600 font-bold">
-                Hello
-                {' '}
-                {re.username}
-                !
-                You reserved
-                {' '}
-                {boats.find(({ id }) => id === re.boat_id).name}
-                .
-              </h2>
-              <p className="text-lg font-semibold">
-                Reservation details
-              </p>
-              <p>
-                Date:
-                {' '}
-                {re.date}
-                .
-              </p>
-              <p>
-                City:
-                {' '}
-                {re.city}
-                .
-              </p>
+    <>
+      {user === null ? (
+        <section className="h-full flex justify-center items-center">
+          <article className="flex flex-col gap-4 border border-slate-950 rounded-md p-4">
+            <h2 className="font-black uppercase text-4xl text-center">Acces Denied</h2>
+            <p>Please Log In first so you can see all your Reservations.</p>
+          </article>
+        </section>
+      ) : (
+        <section className="my-6">
+          <article className="flex flex-col gap-y-3 mx-auto max-w-sm lg:max-w-4xl">
+            <h2 className="text-center text-2xl font-black lg:text-3xl uppercase">
+              My reservations
+            </h2>
+            <p className="text-center">Here you can see all your reservations.</p>
+            <div className="flex flex-wrap gap-x-2 gap-y-2 my-4 justify-center items-center">
+              {userReservations.map((re) => (
+                <div key={re.id} className="flex flex-col gap-2 border border-slate-800 p-2 bg-slate-100">
+                  <span className="font-bold">
+                    Reservation #
+                    {re.id}
+                  </span>
+                  <h2 className="text-slate-600 font-bold">
+                    Hello
+                    {' '}
+                    {re.username}
+                    !
+                    You reserved
+                    {' '}
+                    {boats.find(({ id }) => id === re.boat_id).name}
+                    .
+                  </h2>
+                  <p className="text-lg font-semibold">
+                    Reservation details
+                  </p>
+                  <p>
+                    Date:
+                    {' '}
+                    {re.date}
+                    .
+                  </p>
+                  <p>
+                    City:
+                    {' '}
+                    {re.city}
+                    .
+                  </p>
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
-      </article>
-    </section>
+          </article>
+        </section>
+      )}
+    </>
   );
 }
 
diff --git a/src/components/pages/Reserve.jsx b/src/components/pages/Reserve.jsx
index 0a00584..15985a2 100644
--- a/src/components/pages/Reserve.jsx
+++ b/src/components/pages/Reserve.jsx
@@ -7,7 +7,7 @@ import { createReservation } from '../../redux/reservations/reservationsSlice';
 function Reserve() {
   const [boats, setBoats] = useState([]);
   const user = useSelector(selectUser);
-  const [username, setUsername] = useState(user.name);
+  const [username, setUsername] = useState(user);
   const [city, setCity] = useState('');
   const [date, setDate] = useState('');
   const [boatId, setBoatId] = useState(undefined);
@@ -46,84 +46,95 @@ function Reserve() {
   }, []);
 
   return (
-    <section className="image h-full">
-      <div className="h-full overlay lg:flex lg:flex-col lg:justify-center lg:items-center">
-        <h2 className="text-white text-center text-2xl font-black lg:text-3xl uppercase py-6">
-          Reserve a Boat Trip
-        </h2>
-        <p className="text-white font-semibold mb-3 text-center">
-          Complete All fields to reserve a boat trip.
-        </p>
-        <article className="mx-auto max-w-xs sm:max-w-md lg:max-w-4xl py-6">
-          <form onSubmit={handleSubmit} className="flex flex-col">
-            <div className="flex flex-col gap-y-2 lg:flex-row lg:gap-x-2 mb-6">
-              <input
-                type="text"
-                name="username"
-                value={username}
-                placeholder="Username"
-                required
-                className="border border-white p-1 text-lime-700 font-semibold rounded outline-none bg-white w-full lg:w-40"
-                onChange={(e) => {
-                  setUsername(e.target.value);
-                }}
-              />
-              <input
-                type="text"
-                name="city"
-                value={city}
-                placeholder="City"
-                required
-                className="border border-white p-1 text-lime-700 font-semibold rounded outline-none bg-white w-full lg:w-40"
-                onChange={(e) => {
-                  setCity(e.target.value);
-                }}
-              />
-              <input
-                type="date"
-                name="date"
-                value={date}
-                placeholder=""
-                required
-                className="border border-white p-1 text-lime-700 font-semibold rounded outline-none bg-white w-full lg:w-40"
-                onChange={(e) => {
-                  setDate(e.target.value);
-                }}
-              />
-              <select
-                name="boatId"
-                value={boatId || ''}
-                className="border border-white p-1 text-lime-700 font-semibold rounded outline-none bg-white w-full lg:w-56"
-                required
-                onChange={(e) => {
-                  setBoatId(parseInt(e.target.value, 10) || undefined);
-                }}
-              >
-                <option value="">Select a Boat</option>
-                {boats.data
-                  ? boats.data.map((boat) => (
-                    <option key={boat.id} value={boat.id}>
-                      {boat.name}
-                      {' '}
-                      - Rent Price: $
-                      {boat.rent_price}
-                    </option>
-                  ))
-                  : 'Not load'}
-              </select>
-            </div>
-            <div className="flex justify-center">
-              <button
-                type="submit"
-                className="border-white rounded-lg py-2 px-6 bg-white font-bold text-lime-600 text-md hover:bg-orange-600 hover:border-orange-600 hover:text-white transition ease-in delay-75"
-              >
-                Reserve Now
-              </button>
-            </div>
-          </form>
-        </article>
-      </div>
-    </section>
+    <>
+      {user === null ? (
+        <section className="h-full flex justify-center items-center">
+          <article className="flex flex-col gap-4 border border-slate-950 rounded-md p-4">
+            <h2 className="font-black uppercase text-4xl text-center">Acces Denied</h2>
+            <p>Please Log In first so you can reserve a boat.</p>
+          </article>
+        </section>
+      ) : (
+        <section className="image h-full">
+          <article className="h-full overlay lg:flex lg:flex-col lg:justify-center lg:items-center">
+            <h2 className="text-white text-center text-2xl font-black lg:text-3xl uppercase py-6">
+              Reserve a Boat Trip
+            </h2>
+            <p className="text-white font-semibold mb-3 text-center">
+              Complete All fields to reserve a boat trip.
+            </p>
+            <article className="mx-auto max-w-xs sm:max-w-md lg:max-w-4xl py-6">
+              <form onSubmit={handleSubmit} className="flex flex-col">
+                <div className="flex flex-col gap-y-2 lg:flex-row lg:gap-x-2 mb-6">
+                  <input
+                    type="text"
+                    name="username"
+                    value={username.name}
+                    placeholder="Username"
+                    required
+                    className="border border-white p-1 text-lime-700 font-semibold rounded outline-none bg-white w-full lg:w-40"
+                    onChange={(e) => {
+                      setUsername(e.target.value);
+                    }}
+                  />
+                  <input
+                    type="text"
+                    name="city"
+                    value={city}
+                    placeholder="City"
+                    required
+                    className="border border-white p-1 text-lime-700 font-semibold rounded outline-none bg-white w-full lg:w-40"
+                    onChange={(e) => {
+                      setCity(e.target.value);
+                    }}
+                  />
+                  <input
+                    type="date"
+                    name="date"
+                    value={date}
+                    placeholder=""
+                    required
+                    className="border border-white p-1 text-lime-700 font-semibold rounded outline-none bg-white w-full lg:w-40"
+                    onChange={(e) => {
+                      setDate(e.target.value);
+                    }}
+                  />
+                  <select
+                    name="boatId"
+                    value={boatId || ''}
+                    className="border border-white p-1 text-lime-700 font-semibold rounded outline-none bg-white w-full lg:w-56"
+                    required
+                    onChange={(e) => {
+                      setBoatId(parseInt(e.target.value, 10) || undefined);
+                    }}
+                  >
+                    <option value="">Select a Boat</option>
+                    {boats.data
+                      ? boats.data.map((boat) => (
+                        <option key={boat.id} value={boat.id}>
+                          {boat.name}
+                          {' '}
+                          - Rent Price: $
+                          {boat.rent_price}
+                        </option>
+                      ))
+                      : 'Not load'}
+                  </select>
+                </div>
+                <div className="flex justify-center">
+                  <button
+                    type="submit"
+                    className="border-white rounded-lg py-2 px-6 bg-white font-bold text-lime-600 text-md hover:bg-orange-600 hover:border-orange-600 hover:text-white transition ease-in delay-75"
+                  >
+                    Reserve Now
+                  </button>
+                </div>
+              </form>
+            </article>
+          </article>
+        </section>
+      )}
+    </>
   );
 }