feat: add landing page

src/App.js

@@ -8,6 +8,7 @@ import ForgotPswd from "./components/ResetPassword"
 
 import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import { AuthProvider } from "./auth/Auth";
+import { LandingPage } from "./components/LandingPage";
 
 
 function App() { 
@@ -20,6 +21,7 @@ function App() {
           <Route path="/signup" exact component={Signup} />
           <Route path="/about" exact component={About} />
           <Route path="/error" exact component={Error} />
+          <Route path="/landing-page" exact component={LandingPage} />
           <Route path="/forgot-password" exact component={ForgotPswd} />
           <Redirect path="*" to='/error' />
         </Switch>

src/components/About.js

@@ -1,24 +1,58 @@
 import React from 'react';
 import Header from "../components/Header";
+import Trees from '../images/trees.jpg'
 
 const About = () => {
-    return (
-        <div className="w-full flex flex-col h-screen bg-gray-300 bg-gradient-to-b from-gray-100 to-gray-200">
-            <Header title="Pothole App" />
-            <div className=" flex-col w-full bg-white h-2/6">
-                <img className="object-cover h-full w-full" src="https://backroads-web.s3.amazonaws.com/images/trips/2016/slideshows/browser/MYTC-yellowstone-tetons-multisport-tour.jpg" alt="nature" />
-            </div>
-            <div className="flex items-center justify-center h-screen ">
-                <div class="bg-white rounded-lg border shadow-lg p-10 w-6/12 absolute inset-x-auto bottom-0 h-5/6 "> 
-                    <div>
-                        <h1 className="text-4xl  font-bold ">About</h1>
-                        <hr className="mt-6 border-b-1 border-gray-200" />
-                        <p className="pt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-                    </div>
-                </div>
-            </div>
+
+
+
+  return (
+    <div className="w-full flex flex-col h-screen bg-gradient-to-tl from-blue-600 via-blue-400 to-blue-600"
+      style={{ backgroundImage: `url(${Trees})` }}>
+
+
+      <Header title="Pothole App" />
+
+      <div className=" max-w-0 transform rotate-90 origin-left my-60 mx-4">
+
+           <button type="button" className="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-2 px-5 transform transition duration-500 hover:scale-110 "
+            onClick={(e) => {
+               e.preventDefault();
+               window.location.href='https://docs.google.com/forms/d/e/1FAIpQLSdCFxujcEriHOjydfosFrdyqjRxGD04QMplipF1Zr9CW19k2g/viewform?usp=sf_link';
+               }}>Feedback</button>
+           </div> 
+      <div className="flex items-center justify-center h-screen ">
+
+
+        <div className="bg-white rounded-lg border shadow-lg p-10 w-6/12 absolute inset-x-auto bottom-0 h-5/6 ">
+          <div>
+            <h1 className="text-4xl font-bold text-center">About</h1>
+            <hr className="mt-6 border-b-1 border-gray-200" />
+            <h1 className="font-bold">Background</h1>
+            <p className="pt-2">Roadside Reporting focuses on problems that impact individuals on their commute.
+            Issues may include roadside accidents, burst pipes and potholes to name a few. These issues can be seen via the map
+            by all individuals.
+            </p>
+            <h1 className="font-bold pt-5">Motivation</h1>
+            <p className="pt-2">Users who have an account and have encountered issues, will have the opportunity to take a picture and at the 
+              current location add it to the list of issues represented on the map for others to see. However, some issues 
+              may not directly affect an individual's commute, but adding the issue to the map can bring awareness for
+               friends or other individuals whose commute is along the path of the highlighted issue.  As a result, individuals 
+               will be able to plan their paths accordingly. </p>
+          </div>
+          <h1 className="font-bold pt-5 pt-5">Plans moving foward</h1>
+          <>
+            <li>Users will have the ability to vote on these issues.</li>
+            <li>Issues that become highly concerning to the public will then bring awareness and grasp the <span className="ml-5">attention of Government authorities.</span></li>
+            <li>Building a mobile application to allow flexibility of users to upload issues on the spot.</li>
+          </>
         </div>
-    )
+
+      </div>
+    </div>
+  )
 }
 
+
 export default About
+

src/components/LandingPage.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import pipe from '../images/leaky.png';
+
+export const LandingPage = () => {
+    return (
+      <section className="bg-white p-28 bg-red-200 h-auto h-full md:h-full" style={{ backgroundImage: `url(${pipe})` }}>
+      <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-red-400 via-red-500 to-red-600 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-blue-400 via-blue-500 to-blue-700 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 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>
+    )
+}

src/components/Map.js

@@ -1,65 +1,76 @@
 import React, { useRef, useEffect, useState } from "react";
 import mapboxgl from "mapbox-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
-import Header from "../components/Header";
-import firebase from '../auth/Firebase';
-
+import { useAuth } from "../auth/Auth";
+import Header from "./Header";
+import Sidebar from "./Sidebar";
+import PotholeModal from "./PotholeModal";
+import { firestore } from "../auth/Firebase";
 
 mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_API_KEY;
+
 const Map = () => {
+  const { currentUser } = useAuth();
   const mapContainer = useRef();
-  const [data, setData] = useState([])
+  const [data, setData] = useState([]);
+  const [fly, setFly] = useState();
   let map = null;
+  let popup=null;
+  const [pop,setpop]=useState()
 
-  const ref = firebase.firestore().collection('issues');
-
-  useEffect(() => {
+  const [mapCenter, setMapCenter] = useState({
+    lat: -59.570655, //Lng center for Barbados
+    lng: 13.193114, //Lat center for Barbados
+  });
+  const [zoom, setZoom] = useState(9);
+  const [showModal, setShowModal] = useState(false);
+  const [latitude, setLatitude] = useState("");
+  const [longitude, setLongitude] = useState("");
 
-    ref.onSnapshot(snapshot => {
-      const retrieve = []
-      snapshot.docs.forEach(doc => {
+  // const geolocate = new mapboxgl.GeolocateControl({
+  //   positionOptions: {
+  //     enableHighAccuracy: true,
+  //   },
+  //   trackUserLocation: true,
+  // });
 
-        retrieve.push({ ...doc.data(), id: doc.id })
+  const ref = firestore.collection("issues");
 
-      })
-      setData(retrieve)
+  useEffect(() => {
+    ref.onSnapshot((snapshot) => {
+      const markers = [];
+      snapshot.docs.forEach((doc) => {
+        markers.push({ ...doc.data(), id: doc.id });
+      });
+      setData(markers);
 
-      retrieve.map((point) => {
+      markers.map((point) => {
         new mapboxgl.Marker({
-
-        color: "#FF0000",
-       draggable: false
-       })
-          .setPopup(new mapboxgl.Popup().setHTML('<div class="p-2"><div>'
-           + '<div><img src="'+point.ImageFile+'"/></div>'+ '<div class="font-bold text-indigo-900"><p>' 
-           +point.Location + '</p></div>'+point.IssueDesc +'</p></div>')) // add popup
+          color: "#FF0000",
+          draggable: false,
+        })
+          .setPopup(
+            popup = new mapboxgl.Popup().setHTML(
+              '<div className="p-2"><div>' +
+                '<div><img src="' +
+                point.ImageFile +
+                '"/></div>' +
+                '<div className="font-bold text-indigo-900"><p>' +
+                point.Location +
+                "</p></div>" +
+                point.IssueDesc +
+                "</p></div>"
+            )
+          ) // add popup
           .setLngLat([point.Longitude, point.Latitude])
-          .addTo(map)
-      })
-
-      return () => ref()
-
-    });
-  }, [])
-
-
-  const [mapCenter, setMapCenter] = useState({
-    lat: -59.570655, //Lng center for Barbados
-    lng: 13.193114, //Lat center for Barbados
-  });
-  const [zoom, setZoom] = useState(9);
-  const [showModal, setShowModal] = useState(false)
-  const [latitude, setLatitude] = useState("")
-  const [longitude, setLongitude] = useState("")
-  // const [coord, setCoord] = useState("")
+          .addTo(map);
 
+          setpop(popup)
+      });
 
-  const geolocate = new mapboxgl.GeolocateControl({
-    positionOptions: {
-      enableHighAccuracy: true
-    },
-    trackUserLocation: true
-  });
+      return () => ref();
+    });
+  }, []);
 
   useEffect(() => {
     var bounds = [
@@ -70,11 +81,12 @@ const Map = () => {
       container: mapContainer.current,
       // style: "mapbox://styles/mapbox/streets-v11",
       style: "mapbox://styles/mapbox/streets-v11",
-      center: [mapCenter.lng, mapCenter.lat],
+      center: [mapCenter.lat, mapCenter.lng],
       zoom: zoom,
       maxBounds: bounds,
     });
 
+    setFly(map);
 
     // Add zoom and rotation controls to the map.
     map.addControl(new mapboxgl.NavigationControl());
@@ -88,53 +100,79 @@ const Map = () => {
       setMapCenter({
         lng: map.getCenter().lng.toFixed(4),
         lat: map.getCenter().lat.toFixed(4),
-
       });
       setZoom(map.getZoom().toFixed(2));
     });
 
-    map.addControl(geolocate);
-    // Set an event listener that fires
-    // when a geolocate event occurs.
-    geolocate.on('geolocate', function () {
-      console.log('A geolocate event has occurred.')
-    });
-
-    map.on('click', function (e) {
-      var features = map.queryRenderedFeatures(e.point, {
-
+    map.on("click", function (e) {
+      setLatitude(e.lngLat.lat);
+      setLongitude(e.lngLat.lng);
+      // map.addControl(geolocate);
+      // // Set an event listener that fires
+      // // when a geolocate event occurs.
+      // geolocate.on("geolocate", function () {
+      //   console.log("A geolocate event has occurred.");
+      // });
+
+      map.on("click", function (e) {
+        var features = map.queryRenderedFeatures(e.point, {});
+
+        if (!features.length) {
+          return;
+        }
       });
-
-      if (!features.length) {
-        return;
-      }
-
     });
 
-
     return () => map.remove();
     //eslint-disable-next-line
   }, []);
 
+  const openModal = () => {
+    setShowModal((prev) => !prev);
+  };
+
+  const handleIssueClick = (lat, lng, img, locat, desc) => {
+    fly.flyTo({ center: [lng, lat], zoom: 15 });
+
+    pop.setHTML(
+      '<div className="p-2"><div>' +
+        '<div><img src="' +
+        img +
+        '"/></div>' +
+        '<div className="font-bold text-indigo-900"><p>' +
+        locat +
+        "</p></div>" +
+        desc +
+        "</p></div>"
+    ).setLngLat([lng,lat]).addTo(fly)
+
+  };
 
   return (
-          <div className="w-full flex flex-col h-screen bg-gray-300 overflow-hidden">
-          <Header title="Pothole App" />
-          <div className="w-full flex-1 flex h-screen" >
-            <div className="w-2/6 bg-white overflow-auto">
-              Sidebar
-            </div>
-            <div className="w-5/6">
-              <div className="h-full w-full" ref={mapContainer}>
-                <div className="absolute m-5 z-10 rounded bg-gray-800 bg-opacity-80 p-2 text-white" >
-                  Longitude: {mapCenter.lng} | Latitude: {mapCenter.lat} | Zoom: {zoom}
-                </div>
-              </div>
+    <div className="w-full flex flex-col h-screen bg-gray-300 overflow-hidden">
+      <Header />
+      <div className="w-full flex-1 flex h-screen">
+        <div className="w-2/6 bg-white overflow-auto">
+          <Sidebar position={handleIssueClick} />
+        </div>
+        <div className="w-5/6" onDoubleClick={openModal}>
+          <div className="h-full w-full" ref={mapContainer}>
+            <div className="absolute m-5 z-10 rounded bg-gray-800 bg-opacity-80 p-2 text-white">
+              Longitude: {mapCenter.lng} | Latitude: {mapCenter.lat} | Zoom:{zoom}
             </div>
           </div>
+          {currentUser && (
+            <PotholeModal
+              showModal={showModal}
+              setShowModal={setShowModal}
+              coordLat={latitude}
+              coordLng={longitude}
+            />
+          )}
         </div>
-
+      </div>
+    </div>
   );
 };
 
-export default Map;
+export default Map;