From 07640a5acaea19a3d85de1b423593d98c5113dc0 Mon Sep 17 00:00:00 2001 From: ambrose-kibet Date: Thu, 10 Aug 2023 22:02:14 +0300 Subject: [PATCH 1/5] create modals for froms --- src/components/CraeteReservation.jsx | 4 ++++ src/components/CreateStudio.jsx | 4 ++++ 2 files changed, 8 insertions(+) create mode 100644 src/components/CraeteReservation.jsx create mode 100644 src/components/CreateStudio.jsx diff --git a/src/components/CraeteReservation.jsx b/src/components/CraeteReservation.jsx new file mode 100644 index 0000000..25d3b4a --- /dev/null +++ b/src/components/CraeteReservation.jsx @@ -0,0 +1,4 @@ +const CraeteReservation = () => { + return
CraeteReservation form
; +}; +export default CraeteReservation; diff --git a/src/components/CreateStudio.jsx b/src/components/CreateStudio.jsx new file mode 100644 index 0000000..885ce5b --- /dev/null +++ b/src/components/CreateStudio.jsx @@ -0,0 +1,4 @@ +const CreateStudio = () => { + return
CreateStudio Forrm
; +}; +export default CreateStudio; From 8890591a3749ec4d1afd112d6c7740a50434f1f6 Mon Sep 17 00:00:00 2001 From: ambrose-kibet Date: Thu, 10 Aug 2023 23:01:15 +0300 Subject: [PATCH 2/5] fix typo --- src/components/CraeteReservation.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/CraeteReservation.jsx b/src/components/CraeteReservation.jsx index 25d3b4a..61321bc 100644 --- a/src/components/CraeteReservation.jsx +++ b/src/components/CraeteReservation.jsx @@ -1,4 +1,4 @@ -const CraeteReservation = () => { - return
CraeteReservation form
; +const CreateReservation = () => { + return
CreateReservation form
; }; -export default CraeteReservation; +export default CreateReservation; From 716845f662785c83a0c1796b4736aa12adce5618 Mon Sep 17 00:00:00 2001 From: ambrose-kibet Date: Fri, 11 Aug 2023 20:44:54 +0300 Subject: [PATCH 3/5] add studio modal overlay --- src/components/CreateStudio.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/CreateStudio.jsx b/src/components/CreateStudio.jsx index 885ce5b..48f4b0a 100644 --- a/src/components/CreateStudio.jsx +++ b/src/components/CreateStudio.jsx @@ -1,4 +1,8 @@ const CreateStudio = () => { - return
CreateStudio Forrm
; + return ( +
+ CreateStudio Forrm +
+ ); }; export default CreateStudio; From 62b9aba42ab56dd6384a897e408e343b4224540c Mon Sep 17 00:00:00 2001 From: ambrose-kibet Date: Sat, 19 Aug 2023 13:37:30 +0300 Subject: [PATCH 4/5] refactor create reservation to modal --- src/App.jsx | 7 +-- src/components/CraeteReservation.jsx | 91 +++++++++++++++++++++++++++- src/components/CreateStudio.jsx | 12 ++-- src/pages/AddStudio.jsx | 2 +- src/pages/ReservationNew.jsx | 70 --------------------- src/pages/StudioDetailspage.jsx | 19 +++--- src/styles/ReservationNew.css | 20 ++---- 7 files changed, 113 insertions(+), 108 deletions(-) delete mode 100644 src/pages/ReservationNew.jsx diff --git a/src/App.jsx b/src/App.jsx index 946354e..9515ef1 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -5,7 +5,7 @@ import Homepage from './pages/Homepage'; import NoMatch from './pages/NoMatch'; import './styles/App.css'; import Landingpage from './pages/Landingpage'; -import ReservationNew from './pages/ReservationNew'; + import Navigation from './components/Navigation'; import { toggleNav } from './redux/features/NavbarSlice'; import Authentication from './pages/Authentication'; @@ -45,11 +45,6 @@ const App = () => { )} > - } - /> { - return
CreateReservation form
; +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ +import React, { useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; +import PropTypes from 'prop-types'; +import { closeModal } from '../redux/features/StudioSlice'; +import '../styles/ReservationNew.css'; +import { + createReservation, + resetSuccessful, +} from '../redux/features/ReservationSlice'; + +const CreateReservation = ({ studioId }) => { + const { isModalOpen } = useSelector((state) => state.studios); + const dispatch = useDispatch(); + const [city, setCity] = useState(''); + const [date, setDate] = useState(Date.now()); + + const { isLoading, isSuccessfull } = useSelector( + (state) => state.reservations, + ); + + const navigate = useNavigate(); + const handleSubmit = (e) => { + e.preventDefault(); + if (!city || !date) return; + const details = { location: city, reservation_date: date }; + dispatch(createReservation({ studioId, details })); + }; + React.useEffect(() => { + if (isSuccessfull) { + setCity(''); + setDate(Date.now()); + navigate('/reservations/my-reservations'); + dispatch(resetSuccessful()); + dispatch(closeModal()); + } + }, [dispatch, isSuccessfull, navigate]); + const handleModal = (e) => { + if (e.target.classList.contains('modal-overlay')) { + dispatch(closeModal()); + } + }; + return ( +
+
+

BOOK AN EXPERIENCE

+
+

+ Choose from over 8 incredible VR studios and unlock a world of + limitless possibilities. Dive into undersea adventures, conquer + shooting ranges, and explore immersive virtual worlds like never + before. Book now and experience the best of VR. +

+
+
+
+ setCity(e.target.value)} + name="city" + required + /> + setDate(e.target.value)} + value={date} + name="date" + /> + +
+
+
+
+ ); }; export default CreateReservation; +CreateReservation.propTypes = { + studioId: PropTypes.number.isRequired, +}; diff --git a/src/components/CreateStudio.jsx b/src/components/CreateStudio.jsx index 48f4b0a..ae12be0 100644 --- a/src/components/CreateStudio.jsx +++ b/src/components/CreateStudio.jsx @@ -1,8 +1,6 @@ -const CreateStudio = () => { - return ( -
- CreateStudio Forrm -
- ); -}; +const CreateStudio = () => ( +
+ CreateStudio Forrm +
+); export default CreateStudio; diff --git a/src/pages/AddStudio.jsx b/src/pages/AddStudio.jsx index d20f024..54e4a16 100644 --- a/src/pages/AddStudio.jsx +++ b/src/pages/AddStudio.jsx @@ -42,7 +42,7 @@ const AddStudio = () => { navigate('/home'); dispatch(setSuccessful()); } - }, [isSuccessful, navigate]); + }, [isSuccessful, dispatch, navigate]); return (
diff --git a/src/pages/ReservationNew.jsx b/src/pages/ReservationNew.jsx deleted file mode 100644 index 4a4e60e..0000000 --- a/src/pages/ReservationNew.jsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { useState } from 'react'; -// import { useDispatch } from 'react-redux'; -import '../styles/ReservationNew.css'; -import { useNavigate, useParams } from 'react-router-dom'; -import { useDispatch, useSelector } from 'react-redux'; -import { createReservation, resetSuccessful } from '../redux/features/ReservationSlice'; - -const ReservationNew = () => { - const [city, setCity] = useState(''); - const [date, setDate] = useState(Date.now()); - const { studioId } = useParams(); - const { isLoading, isSuccessfull } = useSelector( - (state) => state.reservations, - ); - const dispatch = useDispatch(); - const navigate = useNavigate(); - const handleSubmit = (e) => { - e.preventDefault(); - if (!city || !date) return; - const details = { location: city, reservation_date: date }; - dispatch(createReservation({ studioId, details })); - }; - React.useEffect(() => { - if (isSuccessfull) { - setCity(''); - setDate(Date.now()); - navigate('/reservations/my-reservations'); - dispatch(resetSuccessful()); - } - }, [dispatch, isSuccessfull, navigate]); - - return ( -
-

BOOK AN EXPERIENCE

-
-

- Choose from over 8 incredible VR studios and unlock a world of - limitless possibilities. Dive into undersea adventures, conquer - shooting ranges, and explore immersive virtual worlds like never - before. Book now and experience the best of VR. -

-
-
-
- setCity(e.target.value)} - name="city" - required - /> - setDate(e.target.value)} - value={date} - name="date" - /> - -
-
-
- ); -}; - -export default ReservationNew; diff --git a/src/pages/StudioDetailspage.jsx b/src/pages/StudioDetailspage.jsx index e43b039..da677ce 100644 --- a/src/pages/StudioDetailspage.jsx +++ b/src/pages/StudioDetailspage.jsx @@ -1,9 +1,10 @@ import { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { Link, useParams } from 'react-router-dom'; -import { fetchStudio } from '../redux/features/StudioSlice'; +import { useParams } from 'react-router-dom'; +import { fetchStudio, openModal } from '../redux/features/StudioSlice'; import MultipliedStars from '../components/Multipliedstars'; import '../styles/Studiodetailspage.css'; +import CreateReservation from '../components/CraeteReservation'; const Studiodetails = () => { const studio = useSelector((state) => state.studios.studio); @@ -56,14 +57,16 @@ const Studiodetails = () => {
- - - +
+ ); }; diff --git a/src/styles/ReservationNew.css b/src/styles/ReservationNew.css index 997aecf..467e1a7 100644 --- a/src/styles/ReservationNew.css +++ b/src/styles/ReservationNew.css @@ -1,5 +1,5 @@ .page-wrapper { - text-align: center; + text-align: justify; display: flex; flex-direction: column; justify-content: center; @@ -11,10 +11,14 @@ background-size: 128vh; background-position: -39vh 4vh; height: 100vh; + position: absolute; + top: 0rem; + left: 0 rem; + width: 100vw; + max-width: 300px; } h2 { - font-size: 4vh; color: white; padding: 2vh; margin: 0%; @@ -50,15 +54,3 @@ p { background-color: white; color: #96be0e; } - -@media screen and (min-width: 768px) { - .description { - width: 85vw; - } -} - -@media (min-width: 1200px) { - .description { - width: 65vw; - } -} From 8df37582737fe5ab1ee4e63b7996969dbd6c8491 Mon Sep 17 00:00:00 2001 From: ambrose-kibet Date: Sat, 19 Aug 2023 19:37:43 +0300 Subject: [PATCH 5/5] add style --- src/components/CraeteReservation.jsx | 2 +- src/styles/ReservationNew.css | 19 +++++++++++++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/CraeteReservation.jsx b/src/components/CraeteReservation.jsx index 5b9b921..b6a7303 100644 --- a/src/components/CraeteReservation.jsx +++ b/src/components/CraeteReservation.jsx @@ -48,7 +48,7 @@ const CreateReservation = ({ studioId }) => { aria-modal="true" onClick={handleModal} > -
+

BOOK AN EXPERIENCE

diff --git a/src/styles/ReservationNew.css b/src/styles/ReservationNew.css index 467e1a7..49b2412 100644 --- a/src/styles/ReservationNew.css +++ b/src/styles/ReservationNew.css @@ -1,4 +1,19 @@ .page-wrapper { + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 0; + background-color: #96be0e; + background-image: url(/green-man-bg.png); + background-repeat: no-repeat; + background-size: 128vh; + background-position: -39vh 4vh; + height: 100vh; +} + +.page-wrapperX { text-align: justify; display: flex; flex-direction: column; @@ -12,8 +27,8 @@ background-position: -39vh 4vh; height: 100vh; position: absolute; - top: 0rem; - left: 0 rem; + top: 0; + left: 0; width: 100vw; max-width: 300px; }