added bkg img

saadiqb · Jul 1, 2023 · 23f1e59 · 23f1e59
1 parent 360099c
commit 23f1e59
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 78 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,7 +16,8 @@
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "7.21.11"
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
+    "prettier": "2.8.8"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/frontend/src/Components/App/App.css b/frontend/src/Components/App/App.css
@@ -1,3 +1,16 @@
+.Rest{
+  background: url('./politics.png');
+  background-size: cover;
+  min-height: 900px;
+  background-color: rgba(0, 0, 0, 1);
+}
+.Rest1{
+  background-color: rgba(0, 0, 0, 0.7);
+  min-height: 900px;
+
+}
+
+
 .remove-link {
   text-decoration: inherit;
   color: white;

diff --git a/frontend/src/Components/App/App.js b/frontend/src/Components/App/App.js
@@ -1,40 +1,40 @@
-import React, { useEffect, useState } from "react";
-import "./App.css";
-import ToggleOption from "../ToggleOption/ToggleOption";
-import Nav from "../Navigation/Nav";
-import Location from "../Location";
-import PostalCode from "../PostalCode";
-import Map from "../Map";
-import MainData from "../MainData/MainData";
-import axios from "axios";
-import MainArt from "../MainArt/MainArt";
+import React, {useEffect, useState} from 'react';
+import './App.css';
+import ToggleOption from '../ToggleOption/ToggleOption';
+import Nav from '../Navigation/Nav';
+import Location from '../Location';
+import PostalCode from '../PostalCode';
+import Map from '../Map';
+import MainData from '../MainData/MainData';
+import axios from 'axios';
+import MainArt from '../MainArt/MainArt';
 
 //  https://represent.opennorth.ca/representatives/house-of-commons/?point=43.885,-79.053
 
 function App() {
-  const [toggleData, settoggleData] = useState("null");
+  const [toggleData, settoggleData] = useState('null');
 
   // stupid state management: lifted data states up to main app :(
   const [location, setLocation] = useState([]);
-  const [postalCode, setPostalcode] = useState("");
+  const [postalCode, setPostalcode] = useState('');
 
   const [isLoading, setIsLoading] = useState(false);
 
   // response from api calls
   const [resData, setresData] = useState({});
 
-  const handleToggleData = (data) => {
+  const handleToggleData = data => {
     settoggleData(data);
   };
 
-  const handleLocationData = (position) => {
+  const handleLocationData = position => {
     const lat = position.coords.latitude;
     const long = position.coords.longitude;
     // set Hook
-    setLocation((arr) => [...arr, lat, long]);
+    setLocation(arr => [...arr, lat, long]);
   };
 
-  const handlePostalData = (data) => {
+  const handlePostalData = data => {
     setPostalcode(data);
   };
 
@@ -43,17 +43,17 @@ function App() {
 
   const getData = async (toggle, coOrdinates, postalCode) => {
     const regex = /^[A-Z]\d[A-Z]\d[A-Z]\d$/;
-    const formattedPS = postalCode.toUpperCase().replaceAll(" ", "");
+    const formattedPS = postalCode.toUpperCase().replaceAll(' ', '');
 
-    if (toggle === "myLocation" && coOrdinates.length > 1) {
-      console.log("X RAN");
+    if (toggle === 'myLocation' && coOrdinates.length > 1) {
+      console.log('X RAN');
       console.log(coOrdinates.length);
       console.log(toggle);
       console.log(coOrdinates);
 
       try {
         const response = await axios.get(
-          `https://represent.opennorth.ca/representatives/?point=${coOrdinates[0]},${coOrdinates[1]}`
+          `https://represent.opennorth.ca/representatives/?point=${coOrdinates[0]},${coOrdinates[1]}`,
         );
 
         console.log(coOrdinates[0]);
@@ -64,11 +64,11 @@ function App() {
         console.log(err);
         return null;
       }
-    } else if (toggle === "postalCode" && formattedPS !== "" && regex.test(formattedPS)) {
+    } else if (toggle === 'postalCode' && formattedPS !== '' && regex.test(formattedPS)) {
       try {
         // response will contain co-ordinates converted from a given postal code
         // magic to convert geo-data happens on the backend
-        const res = await axios.get("https://findmypolitician-416.onrender.com/forward", {
+        const res = await axios.get('https://findmypolitician-416.onrender.com/forward', {
           params: {
             query: postalCode,
           },
@@ -77,7 +77,7 @@ function App() {
         console.log(res.data);
         // const lat = res.latitude;
         // const long = res.longitude;
-        return getData("myLocation", res.data, "");
+        return getData('myLocation', res.data, '');
       } catch (err) {
         console.log(err);
         return null;
@@ -104,33 +104,37 @@ function App() {
     <div className="App">
       <Nav />
 
-      <ToggleOption onToggleData={handleToggleData} />
-
-      {toggleData === "null" && <MainArt />}
-
-      {console.log(resData)}
-
-      {toggleData === "myLocation" && (
-        <>
-          <Location location={location} setLocation={handleLocationData} />
-          <MainData data={resData} loading={isLoading} />
-        </>
-      )}
-      {toggleData === "postalCode" && (
-        <>
-          <PostalCode postcode={postalCode} setPostalcode={handlePostalData} />
-          <MainData data={resData} loading={isLoading} />
-        </>
-      )}
-      {toggleData === "mapLocation" && <Map />}
-
-      {isLoading === true && (
-        <div className="d-flex justify-content-center">
-          <div className="spinner-border" role="status" style={{ width: "100px", height: "100px" }}>
-            <span className="visually-hidden">Loading...</span>
-          </div>
+      <div className="Rest">
+        <div className="Rest1">
+          <ToggleOption onToggleData={handleToggleData} />
+
+          {/* {toggleData === "null" && <MainArt />} */}
+
+          {console.log(resData)}
+
+          {toggleData === 'myLocation' && (
+            <>
+              <Location location={location} setLocation={handleLocationData} />
+              <MainData data={resData} loading={isLoading} />
+            </>
+          )}
+          {toggleData === 'postalCode' && (
+            <>
+              <PostalCode postcode={postalCode} setPostalcode={handlePostalData} />
+              <MainData data={resData} loading={isLoading} />
+            </>
+          )}
+          {toggleData === 'mapLocation' && <Map />}
+
+          {isLoading === true && (
+            <div className="d-flex justify-content-center">
+              <div className="spinner-border" role="status" style={{width: '100px', height: '100px'}}>
+                <span className="visually-hidden">Loading...</span>
+              </div>
+            </div>
+          )}
         </div>
-      )}
+      </div>
     </div>
   );
 }

diff --git a/frontend/src/Components/Location.js b/frontend/src/Components/Location.js
@@ -1,20 +1,20 @@
-import React from "react";
+import React from 'react';
 
-function Location({ location, setLocation }) {
+function Location({location, setLocation}) {
   const checkLocation = () => {
     if (navigator.geolocation) navigator.geolocation.getCurrentPosition(setLocation, error);
-    else console.log("Geolocation not detected.");
+    else console.log('Geolocation not detected.');
   };
 
   function error() {
-    alert("Unable to retrieve your location. Try a different option.");
+    alert('Unable to retrieve your location. Try a different option.');
   }
 
   return (
     <div className="container-fluid">
-      <div className="d-flex justify-content-center pt-4">
+      <div className="d-flex justify-content-center pt-4" style={{color: 'white'}}>
         {location.length === 0 ? (
-          <button className="btn btn-outline-dark" onClick={checkLocation}>
+          <button className="btn btn-outline-light" onClick={checkLocation}>
             Get Location
           </button>
         ) : null}

diff --git a/frontend/src/Components/MainArt/MainArt.js b/frontend/src/Components/MainArt/MainArt.js
@@ -2,20 +2,20 @@ function MainArt() {
   return (
     <>
       <div className="">
-        <div className="container-fluid pt-4" style={{ maxWidth: "900px" }}>
+        <div className="container-fluid pt-4" style={{maxWidth: '900px'}}>
           <div className="text-center">
             <div className="position-relative">
               <div className="on-hov">
                 <img
-                  src={require("../App/politics.png")}
+                  src={require('../App/politics.png')}
                   className="img-fluid mx-auto d-block"
                   alt="..."
-                  style={{ borderRadius: "4%", opacity: 1 }}
+                  style={{borderRadius: '4%', opacity: 1}}
                 />
                 <div className="overlay">
                   <h2>
-                    {" "}
-                    Know who represents the will of the people in your region! <br></br>{" "}
+                    {' '}
+                    Know who represents the will of the people in your region! <br></br>{' '}
                   </h2>
                 </div>
               </div>

diff --git a/frontend/src/Components/Map.js b/frontend/src/Components/Map.js
@@ -1,7 +1,10 @@
 function Map() {
   return (
     <>
-      <h1 className="text-center"> COMING SOON .... Google Maps API integration...</h1>
+      <h1 className="text-center" style={{color: 'white'}}>
+        {' '}
+        COMING SOON .... Google Maps API integration...
+      </h1>
     </>
   );
 }

diff --git a/frontend/src/Components/PostalCode.js b/frontend/src/Components/PostalCode.js
@@ -1,24 +1,26 @@
-import { useState } from "react";
-import "../Components/App/App";
+import {useState} from 'react';
+import '../Components/App/App';
 
-function PostalCode({ postcode, setPostalcode }) {
+function PostalCode({postcode, setPostalcode}) {
   // useState hook init to empty string
-  const [tempCode, settempCode] = useState("");
+  const [tempCode, settempCode] = useState('');
 
-  const handleChange = (e) => {
+  const handleChange = e => {
     // e.preventDefault();
     settempCode(e.target.value);
   };
 
-  const handleSubmit = (event) => {
+  const handleSubmit = event => {
     event.preventDefault();
     setPostalcode(tempCode);
   };
 
   return (
     <div className="container-fluid">
       <div className="container-fluid">
-        <div className="lead d-flex justify-content-center pt-4">Enter your postal code below</div>
+        <div className="lead d-flex justify-content-center pt-4" style={{color: 'white'}}>
+          Enter your postal code below
+        </div>
       </div>
 
       <div className="container-fluid">

diff --git a/frontend/src/Components/ToggleOption/ToggleOption.js b/frontend/src/Components/ToggleOption/ToggleOption.js
@@ -1,17 +1,17 @@
-import React, { useState } from "react";
+import React, {useState} from 'react';
 
-function ToggleOption({ onToggleData }) {
-  const [toggle, setToggle] = useState("null");
+function ToggleOption({onToggleData}) {
+  const [toggle, setToggle] = useState('null');
 
-  const onToggle = (e) => {
+  const onToggle = e => {
     setToggle(e.target.value);
     // invoke callback function to pass
     onToggleData(e.target.value);
   };
 
   return (
     <div className="container-fluid">
-      <div className="lead d-flex justify-content-center pt-5">
+      <div className="lead d-flex justify-content-center pt-5" style={{color: 'white'}}>
         To meet your Canadian political representatives choose one of the below options.
       </div>
       <div className="d-flex justify-content-center mt-2">
@@ -22,7 +22,7 @@ function ToggleOption({ onToggleData }) {
             name="options"
             value="myLocation"
             id="option1"
-            checked={toggle === "myLocation"}
+            checked={toggle === 'myLocation'}
             onChange={onToggle}
           />
           <label className="btn btn-primary" htmlFor="option1">
@@ -35,7 +35,7 @@ function ToggleOption({ onToggleData }) {
             name="options"
             value="postalCode"
             id="option2"
-            checked={toggle === "postalCode"}
+            checked={toggle === 'postalCode'}
             onChange={onToggle}
           />
           <label className="btn btn-primary" htmlFor="option2">
@@ -48,7 +48,7 @@ function ToggleOption({ onToggleData }) {
             name="options"
             value="mapLocation"
             id="option3"
-            checked={toggle === "mapLocation"}
+            checked={toggle === 'mapLocation'}
             onChange={onToggle}
           />
           <label className="btn btn-primary" htmlFor="option3">