first commit

Eevee-Elites-Capstone · Feb 1, 2022 · 9a8c6b1 · 9a8c6b1
1 parent 520a210
commit 9a8c6b1
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 18 deletions.
diff --git a/src/App.js b/src/App.js
@@ -2,21 +2,24 @@ import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
 import './App.css';
 import SignIn from './components/Auth/SignIn';
 import SignUp from './components/Auth/SignUp';
-import GeekForm from './components/Auth/GeekForm';
 import Home from './components/Home';
 import LandingPage from './components/LandingPage';
 import HunterForm from './components/Auth/HunterForm';
 import Navbar from './components/UI/Navbar';
+import Footer from './components/UI/Footer';
 import { useAuthContext } from './hooks/useAuthContext';
 
 function App() {
   const { authIsReady, user } = useAuthContext()
 
   return (
     <div className="App">
+      <div>
+      <Navbar />
+      </div>
+      <div>
       {authIsReady && (
         <BrowserRouter>
-          <Navbar />
           <Switch>
             <Route exact path="/">
             <LandingPage />
@@ -27,21 +30,17 @@ function App() {
             <Route exact path="/home">
               {user ? <Home /> : <Redirect to="/signin" />}
             </Route>
+            <Route path="/home" component={Home} />
             <Route path="/signin">
               <SignIn />
             </Route>
-            <Route exact path="/signup">
+            <Route path="/signup">
               {user ? <Redirect to="/"/> : <SignUp />}
             </Route>
-            <Route path="/hunter">
-              {HunterForm}
-            </Route>
-            <Route exact path="/signup/geek">
-              {user ? <Redirect to="/"/> : <GeekForm />}
-            </Route>
           </Switch>
         </BrowserRouter>
       )}
+      </div>
     </div>
   );
 }

diff --git a/src/components/Auth/SignIn.js b/src/components/Auth/SignIn.js
@@ -63,8 +63,9 @@ function SignIn() {
             />
           </div>
           <div className="flex items-center justify-between">
-            {!isPending && <button className="" type="submit">Sign In</button>}
-            {isPending && <button className="" disabled>Loading...</button>}
+            {!isPending && <button type="submit">Sign In</button>}
+            {!isPending && <button type="submit">Sign In</button>}
+            {isPending && <button className="btn" disabled>Loading...</button>}
 
             <p
               className="inline-block align-baseline font-normal text-sm text-blue-500 hover:text-blue-800"

diff --git a/src/components/Auth/SignUp.js b/src/components/Auth/SignUp.js
@@ -1,19 +1,25 @@
 import React, { useState } from 'react';
 import { useSignup } from '../../hooks/useSignup';
+// import GeekForm from '/GeekForm';
+//import HunterForm from '/HunterForm';
+
 
 function SignUp() {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   //displayName is a default value from firebase
   const [displayName, setDisplayName] = useState('')
+  const [lastName, setLastName] = useState('')
   /* Need to upgrade to punch in FirstName and LastName fields */
+  const [formType, setFormType] = useState('')
+
 
   /**implement useSignup Custom Hook */
   const { signup, isPending, error } = useSignup()
 
   const handleSubmit = (e) => {
     e.preventDefault()
-    signup(email, password, displayName);
+    signup(email, password, displayName, lastName);
   }
   return (<div>
     <div className="h-screen bg-grey flex flex-col space-y-10 justify-center items-center">
@@ -30,20 +36,39 @@ function SignUp() {
               className="block text-gray-700 text-sm font-normal mb-2"
               htmlFor="name"
             >
-              Name
+              First Name
             </label>
             <input
               className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-              name="name"
+              name="first Name"
               v-model="form.name"
-              type="name"
+              type="first name"
               required
               autoFocus
-              placeholder="Name"
+              placeholder="First Name"
               onChange={(e) => setDisplayName(e.target.value)}
               value={displayName}
             />
           </div>
+          <div className="mb-4">
+            <label
+              className="block text-gray-700 text-sm font-normal mb-2"
+              htmlFor="name"
+            >
+              Last Name
+            </label>
+            <input
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              name="last Name"
+              v-model="form.name"
+              type="last name"
+              required
+              autoFocus
+              placeholder="Last Name"
+              onChange={(e) => setLastName(e.target.value)}
+              value={lastName}
+            />
+          </div>
           <div className="mb-4">
             <label
               className="block text-gray-700 text-sm font-normal mb-2"
@@ -83,14 +108,40 @@ function SignUp() {
             />
           </div>
           <div className="flex items-center justify-between">
+            <button
+              // className="px-4 py-2 rounded text-white inline-block shadow-lg bg-blue-500 hover:bg-blue-600 focus:bg-blue-700"
+              onClick={() => setFormType(
+                'geek'
+              )}
+            >
+              Are you a Geek?
+            </button>
+          </div>
+          <div className="flex items-center justify-between">
+            <button
+              // className="px-4 py-2 rounded text-white inline-block shadow-lg bg-blue-500 hover:bg-blue-600 focus:bg-blue-700"
+              onClick={() => setFormType(
+                'hunter'
+              )}
+            >
+              Are you a Hunter?
+            </button>
+          </div>
+          {/* {
+            formType === 'hunter' && <HunterForm/>
+            }
+            {
+            formType === 'geek' && <GeekForm/>
+          } */}
+             <div className="flex items-center justify-between">
             {!isPending && <button
-              className=""
+              // className="px-4 py-2 rounded text-white inline-block shadow-lg bg-blue-500 hover:bg-blue-600 focus:bg-blue-700"
               type="submit"
             >
               Sign Up
             </button>}
             {isPending && <button
-              className=""
+              // className="px-4 py-2 rounded text-white inline-block shadow-lg bg-blue-500 hover:bg-blue-600 focus:bg-blue-700"
               disabled
             >Loading...</button>}
             {error && <p>{error}</p>}

diff --git a/src/components/UI/Footer.js b/src/components/UI/Footer.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const Footer = () => (
+    <div className="font-sans flex fixed text-center sm:flex-row sm:text-left sm:justify-between py-4 px-6 bg-white shadow sm:items-baseline w-full">
+    <div className="mb-2 sm:mb-0">
+        <p>Contact info</p>
+        <a href="https://https://github.com/Eevee-Elites-Capstone/GeekHunt">GeekHunt</a>
+    </div>
+    </div>
+);
+
+export default Footer;
diff --git a/src/components/UI/Navbar.js b/src/components/UI/Navbar.js
@@ -15,6 +15,7 @@ function Navbar() {
 
         {!user && (
           <>
+            <a href="/home" className="text-lg no-underline text-grey-darkest hover:text-blue-dark ml-2">Home</a>
             <a href="/signin" className="text-lg no-underline text-grey-darkest hover:text-blue-dark ml-2">Sign In</a>
             <a href="/signup" className="text-lg no-underline text-grey-darkest hover:text-blue-dark ml-2">Sign Up</a>
           </>

diff --git a/src/hooks/useSignup.js b/src/hooks/useSignup.js
@@ -21,6 +21,7 @@ export const useSignup = () => {
         online: true,
         displayName,
         email
+
       })
       /**For testing
              console.log(res.user);