VR- WORLD: Change forms to modals

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 = () => {
             </ProtectedPages>
           )}
         >
-          <Route
-            exact
-            path="/reservations/new/:studioId"
-            element={<ReservationNew />}
-          />
           <Route
             exact
             path="/reservations/my-reservations"

src/components/CraeteReservation.jsx

@@ -0,0 +1,91 @@
+/* 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 (
+    <div
+      className={isModalOpen ? 'modal-overlay show-modal' : 'modal-overlay'}
+      aria-modal="true"
+      onClick={handleModal}
+    >
+      <div className="page-wrapperX">
+        <h2>BOOK AN EXPERIENCE</h2>
+        <div className="description">
+          <p>
+            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.
+          </p>
+        </div>
+        <div className="form-box">
+          <form action="submit" className="form" onSubmit={handleSubmit}>
+            <input
+              type="text"
+              className="city"
+              placeholder="city"
+              value={city}
+              onChange={(e) => setCity(e.target.value)}
+              name="city"
+              required
+            />
+            <input
+              type="date"
+              className="date"
+              onChange={(e) => setDate(e.target.value)}
+              value={date}
+              name="date"
+            />
+            <button type="submit" className="submit-bttn" disabled={isLoading}>
+              Book Now
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default CreateReservation;
+CreateReservation.propTypes = {
+  studioId: PropTypes.number.isRequired,
+};

src/components/CreateStudio.jsx

@@ -0,0 +1,6 @@
+const CreateStudio = () => (
+  <div className="modal-overlay show-modal modal-overlay">
+    CreateStudio Forrm
+  </div>
+);
+export default CreateStudio;

src/pages/AddStudio.jsx

@@ -42,7 +42,7 @@ const AddStudio = () => {
       navigate('/home');
       dispatch(setSuccessful());
     }
-  }, [isSuccessful, navigate]);
+  }, [isSuccessful, dispatch, navigate]);
 
   return (
     <div className="page-wrapper">

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 = () => {
             <div className="loader" />
           </div>
 
-          <Link to={`/reservations/new/${studio.id}`}>
-            <button type="button" className="reserve-btn">
-              Reserve
-              {' '}
-            </button>
-          </Link>
+          <button
+            type="button"
+            className="reserve-btn btn"
+            onClick={() => dispatch(openModal())}
+          >
+            Reserve
+          </button>
         </div>
       </div>
+      <CreateReservation studioId={id} />
     </>
   );
 };

src/styles/ReservationNew.css

@@ -13,8 +13,27 @@
   height: 100vh;
 }
 
+.page-wrapperX {
+  text-align: justify;
+  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;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  max-width: 300px;
+}
+
 h2 {
-  font-size: 4vh;
   color: white;
   padding: 2vh;
   margin: 0%;
@@ -50,15 +69,3 @@ p {
   background-color: white;
   color: #96be0e;
 }
-
-@media screen and (min-width: 768px) {
-  .description {
-    width: 85vw;
-  }
-}
-
-@media (min-width: 1200px) {
-  .description {
-    width: 65vw;
-  }
-}