Skip to content

Commit

Permalink
Fixed user null issues for delte myreservations and reserve
Browse files Browse the repository at this point in the history
  • Loading branch information
@Felipe-Perez-Ferraro
Felipe-Perez-Ferraro committed Dec 15, 2023
1 parent fb8c099 commit 727b043
Show file tree
Hide file tree
Showing 3 changed files with 196 additions and 147 deletions.
77 changes: 52 additions & 25 deletions src/components/pages/DeleteBoat.jsx
View file
Original file line number Diff line number Diff line change
@@ -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());
Expand All @@ -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>
)}
</>
);
}

Expand Down
97 changes: 54 additions & 43 deletions src/components/pages/MyReservations.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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>
)}
</>
);
}

Expand Down
169 changes: 90 additions & 79 deletions src/components/pages/Reserve.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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>
)}
</>
);
}

Expand Down

0 comments on commit 727b043

Please sign in to comment.