Added basic date checking without api integration #9

jpaten · Nov 3, 2022 · 0431785 · 0431785
1 parent 4e2f7d0
commit 0431785
Show file tree

Hide file tree

Showing 4 changed files with 189 additions and 60 deletions.
diff --git a/parkshark/package-lock.json b/parkshark/package-lock.json
diff --git a/parkshark/package.json b/parkshark/package.json
@@ -16,6 +16,7 @@
     "mongoose": "^6.7.0",
     "react": "^18.1.0",
     "react-bootstrap": "^1.5.1",
+    "react-calendar": "^3.9.0",
     "react-dom": "^18.1.0",
     "react-icons": "^4.2.0",
     "react-modal": "^3.12.1",

diff --git a/parkshark/src/components/Listings/Listings.js b/parkshark/src/components/Listings/Listings.js
@@ -0,0 +1,51 @@
+import {useState} from "react";
+import Calendar from "react-calendar";
+import 'react-calendar/dist/Calendar.css';
+import {value} from "firebase-tools/lib/deploymentTool";
+
+const LISTING_NAME = "907 Westwood Blvd";
+const LISTING_ID = 12;
+const AVAILABLE = [[new Date(2022, 11, 3,), new Date(2022,11,4)],
+    [new Date(2022, 11, 6), new Date(2022, 2,31)]];
+
+export function Listing() {
+
+    const [name, setName] = useState("");
+    const [date, setDate] = useState("");
+    const [notes, setNotes] = useState("");
+    const [hasBooked, setHasBooked] = useState(false);
+    console.log(date);
+    if(!hasBooked) {
+        return (
+            <div>
+                <h1>{LISTING_NAME}</h1>
+                <form onSubmit={() => setHasBooked(true)}>
+                    <label>
+                        <p>Your Name</p>
+                        <input name={"name"} onChange={(event) => setName(event.target.value)}/>
+                    </label>
+                    <label>
+                        <p>Date(PLACEHOLDER USE A CALENDAR LIBRARY)</p>
+                        <Calendar onChange={(value) => setDate(value)}/>
+                    </label>
+                    <label>
+                        <p>Any notes?</p>
+                        <input name={"notes"} onChange={(event) => setNotes(event.target.value)}/>
+                    </label>
+                    <label>
+                        <button type={"submit"}>Book!</button>
+                    </label>
+                </form>
+            </div>
+        )
+    }
+    else{
+        return(
+            <div>
+                <h1>Thanks for booking {LISTING_NAME}!</h1>
+            </div>
+        );
+    }
+}
+
+export default Listing;
diff --git a/parkshark/src/components/SignIn/LoginPage.js b/parkshark/src/components/SignIn/LoginPage.js
@@ -5,15 +5,16 @@ import 'firebase/auth'
 import Login from './Login';
 import Home from '../Home/Home'
 import Navbar from '../Navbar/Navbar';
+import Listing from "../Listings/Listings";
 import Profile from "../Profile/Profile";
 import About from "../About/About"
 import Navbar2 from "../Navbar/Navbar2";
 import './LoginPage.css';
 function LoginPage() {
 
   //set up the initial states//
-  const[user, setUser] = useState(''); 
-  const[email, setEmail] = useState(''); 
+  const[user, setUser] = useState('');
+  const[email, setEmail] = useState('');
   const[password, setPassword] = useState('');
   const[emailError, setEmailError] = useState('');
   const[passwordError, setPasswordError] = useState('');
@@ -33,38 +34,38 @@ function LoginPage() {
   const handleLogin = () => {
     clearErrors();
     fire
-      .auth()
-      .signInWithEmailAndPassword(email,password)
-      .catch(err => {
-        switch(err.code){
-          case "auth/invalid-email":
-          case "auth/user-disabled":
-          case "auth/user-not-found":
-            setEmailError(err.message);
-          case "auth/wrong-password":
-            setPasswordError(err.message);
-            break;
-          default: break;
-        }
-      });
+        .auth()
+        .signInWithEmailAndPassword(email,password)
+        .catch(err => {
+          switch(err.code){
+            case "auth/invalid-email":
+            case "auth/user-disabled":
+            case "auth/user-not-found":
+              setEmailError(err.message);
+            case "auth/wrong-password":
+              setPasswordError(err.message);
+              break;
+            default: break;
+          }
+        });
   };
 
   const handleSignup = () => {
     clearErrors();
     fire
-      .auth()
-      .createUserWithEmailAndPassword(email,password)
-      .catch(err => {
-        switch(err.code){
-          case "auth/email-already-in-use":
-          case "auth/invalid-email":
-            setEmailError(err.message);
-            break;
-          case "auth/weak-password":
-            setPasswordError(err.message);
-            break;
-        }
-      });
+        .auth()
+        .createUserWithEmailAndPassword(email,password)
+        .catch(err => {
+          switch(err.code){
+            case "auth/email-already-in-use":
+            case "auth/invalid-email":
+              setEmailError(err.message);
+              break;
+            case "auth/weak-password":
+              setPasswordError(err.message);
+              break;
+          }
+        });
   };
 
   const handleLogout = () => {
@@ -89,39 +90,40 @@ function LoginPage() {
 
 
   return (
-    <div className="LoginPage">
-      {user ? (
-
-      <div className="App">
-        <Router>
-        {/* <Navbar loggedIn={fire.auth().currentUser} /> */}
-        <Navbar2></Navbar2>
-          <Switch>
-            <Route path="/" exact component={Home} />
-            <Route path="/Login" component={LoginPage} />
-            <Route path="/About" component={About} />
-            <Route path="/Profile" component={Profile} />
-          </Switch>
-        </Router>
-      </div>
-
-      ): (
-        <Login //with all possible states
-        email={email}
-        setEmail={setEmail}
-        password={password}
-        setPassword={setPassword}
-        handleLogin={handleLogin}
-        handleSignup={handleSignup}
-        hasAccount={hasAccount}
-        setHasAccount={setHasAccount}
-        emailError={emailError}
-        passwordError={passwordError}
-      />
-      )}
+      <div className="LoginPage">
+        {user ? (
+
+            <div className="App">
+              <Router>
+                {/* <Navbar loggedIn={fire.auth().currentUser} /> */}
+                <Navbar2></Navbar2>
+                <Switch>
+                  <Route path="/" exact component={Home} />
+                  <Route path="/Listing" exact component={Listing}/>
+                  <Route path="/Login" component={LoginPage} />
+                  <Route path="/About" component={About} />
+                  <Route path="/Profile" component={Profile} />
+                </Switch>
+              </Router>
+            </div>
 
+        ): (
+            <Login //with all possible states
+                email={email}
+                setEmail={setEmail}
+                password={password}
+                setPassword={setPassword}
+                handleLogin={handleLogin}
+                handleSignup={handleSignup}
+                hasAccount={hasAccount}
+                setHasAccount={setHasAccount}
+                emailError={emailError}
+                passwordError={passwordError}
+            />
+        )}
 
-    </div>
+
+      </div>
   );
 }