Spaces booking

package.json

@@ -6,11 +6,13 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "antd": "^4.18.2",
     "bootstrap": "5.1.3",
     "bootstrap-icons": "^1.7.2",
     "firebase": "^9.6.1",
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.4",
+    "react-bootstrap-time-picker": "^2.0.1",
     "react-dom": "^17.0.2",
     "react-firebase-hooks": "^4.0.1",
     "react-router-dom": "^6.1.1",

src/App.js

@@ -6,6 +6,7 @@ import 'bootstrap-icons/font/bootstrap-icons.css'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 // Components
 import Login from './components/Login'
+import Spaces from './components/Spaces'
 import Home from './components/Home'
 
 
@@ -16,6 +17,7 @@ function App() {
                 <Routes>
                     <Route path="/" element={<Home />} />
                     <Route path="/login" element={<Login />} />
+                    <Route path="/spaces" element={<Spaces />} />
                 </Routes>
             </BrowserRouter>
         </div>

src/components/Navigation.js

@@ -16,7 +16,7 @@ function Navigation() {
                 <Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
                     <Nav>
                         <Nav.Link href="/">Home</Nav.Link>
-                        <Nav.Link href="#link">Spaces</Nav.Link>
+                        <Nav.Link href="/spaces">Spaces</Nav.Link>
                         <Nav.Link href="/contact">Contact Us</Nav.Link>
                         <Button href="/login" variant="primary">Login <i className="bi bi-box-arrow-in-right"></i> </Button>
                     </Nav>

src/components/Spaces.css

@@ -0,0 +1,19 @@
+html, body, #root, .App {
+    height: 100%;
+    background-color: #f5f5f5;
+}
+
+.spaces-body {
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+}
+
+.spaces-form {
+    width: 100%;
+    max-width: 400px;
+    display: block;
+    padding: 15px;
+    margin: auto;
+}

src/components/Spaces.js

@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+import { useNavigate } from "react-router-dom"
+import { Form, FloatingLabel, Button } from 'react-bootstrap'
+import TimePicker from 'react-bootstrap-time-picker'
+
+import './Spaces.css'
+
+function Spaces() {
+    const navigate = useNavigate();
+    const [venue, setVenue] = useState("");
+    const [date, setDate] = useState("");
+    const [startHour, setStartHour] = useState("");
+    const [endHour, setEndHour] = useState("");
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            {/*Here should send a http request*/}
+            console.log("book");
+        } catch (err) {
+            console.log("Submit unsuccessful!")
+        }
+    }
+
+    return (
+        <div className="spaces-body text-center">
+            <div className="spaces-form">
+                <div className="nav">
+                    <Button variant="link" onClick={() => navigate(-1)}>
+                        <h2><i className="bi bi-arrow-left font-weight-bold"></i></h2>
+                    </Button>
+                </div>
+                <h1 className="mb-4">Booking Spaces</h1>
+                <Form>
+                    {/*select venue: it is a fixed list now, but it should be list from backend*/}
+                    <FloatingLabel controlId="venue" label="Venue">
+                        <Form.Select
+                            aria-label="Floating label select example"
+                            onChange={(e) => setVenue(e.target.value)}
+                        >
+                            <option value="CTPH">CTPH</option>
+                            <option value="TRR">Theme Room Red</option>
+                            <option value="TRB">Theme Room Blue</option>
+                        </Form.Select>
+                    </FloatingLabel>
+                    {/*select date*/}
+                    <FloatingLabel controlId="date" label="Date">
+                        <Form.Control
+                            type="date"
+                            placeholder="date"
+                            value={date}
+                            onChange={(e) => setDate(e.target.value)}
+                        />
+                    </FloatingLabel>
+                    {/*select starting hour*/}
+                    <FloatingLabel controlId="startHour" label="Start Hour">
+                        <TimePicker
+                            value={startHour}
+                            start="10:00"
+                            end="21:00"
+                            step={30}
+                            onChange={(startHour) => setStartHour(startHour)}
+                        />
+                    </FloatingLabel>
+                    {/*select ending hour*/}
+                    <FloatingLabel controlId="endHour" label="End Hour">
+                        <TimePicker
+                            value={endHour}
+                            start="10:00"
+                            end="21:00"
+                            step={30}
+                            onChange={(endHour) => setEndHour(endHour)}
+                        />
+                    </FloatingLabel>
+                    {/*submit here*/}
+                    <Button className="w-100" size="lg" variant="primary" onClick={handleSubmit}>Book</Button>
+                </Form>
+            </div>
+        </div>
+    )
+}
+
+export default Spaces

src/firebase/authEmulator.js

@@ -47,4 +47,4 @@ export {
     login,
     logout,
     getToken
-};
+};