diff --git a/public/image.svg b/public/image.svg new file mode 100644 index 0000000..60db6cc --- /dev/null +++ b/public/image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/index.html b/public/index.html index aa069f2..202c20b 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - + { const [loggedIn, setLoggedIn] = useState(false); useEffect(() => { @@ -42,6 +42,6 @@ function App() { ); -} +}; export default App; diff --git a/src/Components/AddPlace.js b/src/Components/AddPlace.js index 9962005..463b826 100644 --- a/src/Components/AddPlace.js +++ b/src/Components/AddPlace.js @@ -1,8 +1,14 @@ import React, { useState } from 'react'; -import axios from 'axios'; +import { useDispatch, useSelector } from 'react-redux'; +import { addPlace } from '../Redux/places/addPlaceSlice'; +import { fetchPlaces } from '../Redux/places/placesSlice'; import '../AddPlace.css'; -function AddPlace() { +const AddPlace = () => { + const dispatch = useDispatch(); + const status = useSelector((state) => state.addPlace.status); + const error = useSelector((state) => state.addPlace.error); + const initialPlaceData = { description: '', photo: '', @@ -13,51 +19,48 @@ function AddPlace() { user_id: localStorage.getItem('userId'), }; const [placeData, setPlaceData] = useState(initialPlaceData); - const [status, setStatus] = useState('idle'); - const [error, setError] = useState(null); + const [errorMessage, setErrorMessage] = useState(''); const handleChange = (e) => { setPlaceData({ ...placeData, [e.target.name]: e.target.value }); }; - const handleSubmit = async (e) => { + const handleSubmit = (e) => { e.preventDefault(); - setStatus('loading'); - try { - const userId = localStorage.getItem('userId'); - await axios.post(`http://localhost:3000/api/v1/users/${userId}/places`, placeData); - setStatus('succeeded'); - setPlaceData(initialPlaceData); - } catch (error) { - setStatus('failed'); - setError(error.response.data); + const values = Object.values(placeData); + if (values.some((value) => !value)) { + setErrorMessage('Please fill in all fields'); + setTimeout(() => { + setErrorMessage(''); + }, 5000); // Clear error message after 5 seconds + return; } + dispatch(addPlace(placeData)) + .then(() => dispatch(fetchPlaces())); }; return (

Add Place

+ {errorMessage &&

{errorMessage}

}


- +

- - {' '} - {/* Add address input */} - {status === 'failed' && ( -
- Error: - {' '} - {error} -
+ +
+ {status === 'failed' && error && ( +
+ {error} +
)} {status === 'succeeded' && (
@@ -68,6 +71,6 @@ function AddPlace() {
); -} +}; export default AddPlace; diff --git a/src/Components/AddReservation.js b/src/Components/AddReservation.js index 7deb34b..5ab0fa1 100644 --- a/src/Components/AddReservation.js +++ b/src/Components/AddReservation.js @@ -1,9 +1,11 @@ import React, { useState, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { addReservation } from '../Redux/reservations/addReservationsSlice'; +import { fetchPlaces } from '../Redux/places/placesSlice'; +import { fetchReservations } from '../Redux/reservations/myReservationsSlice'; import '../AddReservation.css'; -function AddReservation() { +const AddReservation = () => { const dispatch = useDispatch(); const userId = localStorage.getItem('userId'); @@ -16,28 +18,18 @@ function AddReservation() { }; const [reservationData, setReservationData] = useState(initialReservationData); - const [places, setPlaces] = useState([]); const [selectedPlace, setSelectedPlace] = useState(null); const [numberOfDays, setNumberOfDays] = useState(0); const status = useSelector((state) => state.addReservation.status); const error = useSelector((state) => state.addReservation.error); + const places = useSelector((state) => state.places.places); const [errorMessage, setErrorMessage] = useState(''); - const fetchPlaces = async (userId) => { - try { - const response = await fetch(`http://localhost:3000/api/v1/users/${userId}/places`); - const data = await response.json(); - setPlaces(data); - } catch (error) { - setErrorMessage('Invalid Email or password.'); - } - }; - useEffect(() => { if (userId) { - fetchPlaces(userId); + dispatch(fetchPlaces(userId)); } - }, [userId]); + }, [userId, dispatch]); useEffect(() => { if (reservationData.start_date && reservationData.end_date && selectedPlace) { @@ -47,7 +39,7 @@ function AddReservation() { setNumberOfDays(daysDifference); setReservationData((prevState) => ({ ...prevState, - price: daysDifference * selectedPlace.pricepernight, + price: (daysDifference * parseFloat(selectedPlace.pricepernight)).toFixed(2), })); } }, [reservationData.start_date, reservationData.end_date, selectedPlace, reservationData]); @@ -56,7 +48,6 @@ function AddReservation() { const { name, value } = e.target; setReservationData({ ...reservationData, [name]: value }); - // Find the selected place and update the selectedPlace state if (name === 'place_id') { const selected = places.find((place) => place.id === parseInt(value, 10)); setSelectedPlace(selected); @@ -65,9 +56,17 @@ function AddReservation() { const handleSubmit = (e) => { e.preventDefault(); - dispatch(addReservation(reservationData)).then(() => { - setReservationData(initialReservationData); - }); + + if (!reservationData.start_date || !reservationData.end_date || !reservationData.place_id) { + setErrorMessage('Please fill in all fields'); + setTimeout(() => { + setErrorMessage(''); + }, 5000); + return; + } + + dispatch(addReservation(reservationData)) + .then(() => dispatch(fetchReservations())); }; return ( @@ -83,9 +82,9 @@ function AddReservation() {

- +
- +