barcode-network · AntonioWorkman · Apr 7, 2021 · Apr 16, 2021 · Apr 16, 2021 · Apr 16, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,12 +7,14 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "firebase": "^8.3.2",
+    "firebase": "^7.24.0",
     "mapbox-gl": "^2.1.1",
     "postcss-loader": "^5.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-firebaseui": "^4.1.0",
     "react-hook-form": "^6.15.5",
+    "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1",

diff --git a/public/index.html b/public/index.html
@@ -25,7 +25,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Roadside Report</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -4,22 +4,25 @@ import Login from "./components/Login";
 import About from "./components/About";
 import Signup from "./components/Signup";
 import Error from "./components/Error";
+import LandingPage from "./components/LandingPage";
 import ForgotPswd from "./components/ResetPassword"
 
 import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import { AuthProvider } from "./auth/Auth";
 
 
-function App() { 
+
+function App() {
   return (
     <AuthProvider>
       <Router>
         <Switch>
-          <Route path="/" exact component={Map} />
+          <Route path="/" exact component={LandingPage} />
           <Route path="/login" exact component={Login} />
           <Route path="/signup" exact component={Signup} />
           <Route path="/about" exact component={About} />
           <Route path="/error" exact component={Error} />
+          <Route path="/map" exact component={Map} />
           <Route path="/forgot-password" exact component={ForgotPswd} />
           <Redirect path="*" to='/error' />
         </Switch>

diff --git a/src/auth/Firebase.js b/src/auth/Firebase.js
@@ -15,11 +15,14 @@ const app = firebase.initializeApp({
 })
 
 const google = new firebase.auth.GoogleAuthProvider();
+const facebook = new firebase.auth.FacebookAuthProvider();
+const twitter = new firebase.auth.TwitterAuthProvider();
+const email = new firebase.auth.EmailAuthProvider();
 const storage = firebase.storage();
 const auth = app.auth();
 const firestore = firebase.firestore();
 const timestamp = firebase.firestore.FieldValue.serverTimestamp;
 
 export{
-    auth, google, storage, firestore,timestamp, firebase as default
+    auth, google, facebook, twitter, email, storage, firestore, timestamp, firebase as default
 }
diff --git a/src/auth/SocialMediaAuth.js b/src/auth/SocialMediaAuth.js
@@ -0,0 +1,14 @@
+import { auth, google, facebook } from "./Firebase";
+
+const SocialMediaAuth = (provider) => {
+  return auth
+    .signInWithPopup(provider)
+    .then((res) => {
+      return res.user;
+    })
+    .catch((err) => {
+      return err;
+    });
+};
+
+export default SocialMediaAuth;
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { useHistory } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { useAuth } from "../auth/Auth";
 
 const Header = () => {
@@ -9,46 +9,47 @@ const Header = () => {
   async function handleLogout() {
     try {
       await logout();
+      console.log("Signed out.")
       history.push("/");
     } catch (error) {
       alert(error);
     }
   }
 
-  function handleSignIn() {
-    history.push("/login");
-  }
-
   return (
-    <div className="App">
-      <nav className="bg-gray-800">
-        <div className="container-xl mx-auto px-2 sm:px-6 lg:px-8">
-          <div className="relative flex items-center justify-between h-16">
+    <nav className="bg-gradient-to-tl from-black via-gray-900 to-black">
+      <div className="container-xl mx-auto px-2 sm:px-6 lg:px-8">
+        <div className="relative flex items-center justify-between h-16">
+          <div className="flex-shrink-0 flex items-center">
+            <Link to="/"><h1 className="text-white text-2xl font-bold leading-none w-auto">
+              Roadside Report
+            </h1></Link>
+          </div>
+          {currentUser ? (
             <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
-              <div className="flex-shrink-0 flex items-center">
-                <h1 className="text-white text-2xl font-bold leading-none w-auto">
-                  Road Side Report
-                </h1>
-              </div>
               <div className="hidden sm:block sm:ml-8">
                 <div className="flex space-x-4">
                   <a
-                    className="text-gray-300 px-3 py-2 rounded-md text-sm font-medium"
+                    className="text-gray-300 px-3 py-4 rounded-md text-sm font-medium"
                     href="/"
                   >
                     Home
                   </a>
                   <a
-                    className="text-gray-300 px-3 py-2 rounded-md text-sm font-medium"
+                    className="text-gray-300 px-3 py-4 rounded-md text-sm font-medium"
+                    href="/map"
+                  >
+                    Map
+                  </a>
+                  <a
+                    className="text-gray-300 px-3 py-4 rounded-md text-sm font-medium"
                     href="/about"
                   >
                     About
                   </a>
                 </div>
               </div>
-            </div>
-            {currentUser ? (
-              <div className="dropdown relative ml-3">
+              <div className="dropdown relative ml-auto">
                 <div>
                   <img
                     className="inline object-cover w-12 h-12 mr-2 rounded-full"
@@ -62,10 +63,10 @@ const Header = () => {
                       className="hover:bg-gray-400 hover:text-gray-800 rounded-t py-2 px-4 block whitespace-no-wrap"
                       href="/profile"
                     >
-                      <li className="">Profile</li>
+                      <li>Profile</li>
                     </a>
 
-                    <li className="">
+                    <li>
                       <span
                         className="w-full text-left rounded-b hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
                         onClick={handleLogout}
@@ -76,18 +77,19 @@ const Header = () => {
                   </ul>
                 </div>
               </div>
-            ) : (
-              <button
-                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded"
-                onClick={handleSignIn}
-              >
-                Sign In
-              </button>
-            )}
-          </div>
+            </div>
+          ) : (
+            <div className="flex order-2">
+              <Link to="/login">
+                <button className="px-7 py-1 mr-2 w-25 border rounded text-white bg-purple-700 border-transparent hover:bg-purple-900 transition">
+                  Login
+                </button>
+              </Link>
+            </div>
+          )}
         </div>
-      </nav>
-    </div>
+      </div>
+    </nav>
   );
 };
 

diff --git a/src/components/LandingPage.js b/src/components/LandingPage.js
@@ -0,0 +1,92 @@
+import React, { useEffect } from "react";
+import { Link, useHistory } from "react-router-dom";
+import Map from "./Map";
+import { useAuth } from "../auth/Auth";
+import Header from "./Header";
+import Coconut from "../images/coconut.jpg"
+
+function LandingPage() {
+  const { currentUser } = useAuth();
+  // const history = useHistory();
+
+  // useEffect(() => {
+  //   if (currentUser) {
+  //     history.push("/");
+  //   }
+  // }, [currentUser]);
+
+  return (
+    <div>
+      <main>
+        <section className="aw-header bg-gradient-to-tl from-gray-900 via-gray-800 to-gray-900 border-b border-gray-200 shadow-lg">
+          <Header />
+          <div className="pt-14 pb-10 container mx-auto ">
+            <div className="text-center px-2 lg:px-0">
+              <h1 className="text-white text-lg md:text-2xl lg:text-4xl font-black leading-tight mb-2">
+                Search, report & keep track of roadside issues now.
+              </h1>
+              <h3 className="text-gray-300 text-md md:text-1xl lg:text-2xl font-semibold leading-tight mb-2">
+                Burst mains, potholes, water outages e.t.c. Report them all here!
+              </h3>
+              {!currentUser && (
+                <div>
+                  <Link to="/about">
+                    <button className="px-5 py-1 mr-2 w-25 border rounded text-white bg-purple-700 border-transparent hover:bg-purple-900 transition">
+                      Learn More
+                    </button>
+                  </Link>
+                  <Link to="/map">
+                    <button className="px-5 py-1 mt-4 w-25 border rounded text-white bg-purple-700 border-transparent hover:bg-purple-900 transition">
+                      View Map
+                    </button>
+                  </Link>
+                </div>
+              )}
+            </div>
+          </div>
+        </section>
+
+        {/* <section className="" style={{ backgroundImage: `url(${Coconut})` }}>
+          <div className="w-full flex flex-col items-center">
+            <div className="p-2 grid grid-flow-col auto-rows-max text-center mx-auto">
+              <div className="bg-gradient-to-tl from-blue-400 via-blue-500 to-blue-700 bg-opacity-75 rounded-md mr-10 w-24 md:w-32 lg:w-80 h-90 md:h-full shadow-lg mx-auto ">
+                <p className=" text-6xl text-center pt-8 font-semibold font-black text-white">
+                  1
+                </p>
+                <p className="text-black text-1xl pt-8 pb-12 pr-5 pl-5 flex flex-wrap justify-center text-white">
+                  Sign up now to report an issue.
+                </p>
+              </div>
+              <div className="bg-gradient-to-tl from-red-400 via-red-500 to-red-600 bg-opacity-75 rounded-md mr-10 w-24 md:w-32 lg:w-80 h-90 md:h-full shadow-lg mx-auto">
+                <p className="text-6xl text-center pt-8 font-semibold font-black text-white">
+                  2
+                </p>
+                <p className="text-black text-1xl pt-8 pb-12 pr-5 pl-5 flex flex-wrap justify-center text-white">
+                  Double click on the map, then fill out the form to add a new
+                  issue at that location.
+                </p>
+              </div>
+              <div className="bg-gradient-to-tl from-green-400 via-green-500 to-green-700 bg-opacity-75 rounded-md mr-10 w-24 md:w-32 lg:w-80 h-90 md:h-full shadow-lg mx-auto">
+                <p className="text-6xl text-center pt-8 font-semibold font-black text-white">
+                  3
+                </p>
+                <p className="text-black text-1xl pt-8 pb-12 pr-5 pl-5 flex flex-wrap justify-center text-white">
+                  Share to get upvotes to raise awareness.
+                </p>
+              </div>
+            </div>
+          </div>
+        </section> */}
+        {/* <section className="bg-white">
+          <div class="w-full flex flex-col items-center">
+            <div className="absolute w-full">
+              {!currentUser && (<Map />)}
+            </div>
+          </div>
+        </section> */}
+      </main>
+    </div>
+  );
+}
+
+export default LandingPage;