Add login

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@auth0/auth0-react": "^1.8.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.2.1",

src/App.test.tsx

@@ -23,6 +23,6 @@ test("Search for Oslofjordtunnelen and get status", async () => {
 
   await waitFor(() => screen.getByRole(/road/i));
   expect(screen.getByRole("status")).toHaveTextContent(
-    /Oslofjordtunnelen ser ut/
+    /Oslofjordtunnelen (ser ut|er kanskje)/
   );
 });

src/App.tsx

@@ -34,11 +34,14 @@ const App = () => {
   }, []);
 
   useEffect(() => {
-    const [, roadFromPath] = window.location.pathname.split("/");
+    const [, roadFromPath, action] = window.location.pathname.split("/");
 
     Promise.resolve(localStorage.getItem("favorites") || "[]")
       .then((r) => JSON.parse(r))
       .then((storedFavorites) => {
+        if (action === "user-report") {
+          return storedFavorites;
+        }
         if (roadFromPath && roads.find((r) => r.urlFriendly === roadFromPath)) {
           if (storedFavorites.indexOf(roadFromPath) === -1) {
             storedFavorites.push(roadFromPath);

src/Header.tsx

@@ -41,7 +41,8 @@ const Header = (props: HeaderProps) => {
 
   return (
     <>
-      <Card fluid>
+      <b>Velg én eller flere tunneler</b>
+      <Card fluid style={{ marginTop: "3px" }}>
         <Dropdown
           placeholder="Velg tunnel(er)"
           onChange={addFavorite}

src/LocationContext.tsx

@@ -0,0 +1,32 @@
+import React, { useState, createContext, useContext } from "react";
+import { IGPS } from "./types";
+
+const defaultLocation = {
+  lat: 0,
+  lon: 0,
+};
+
+const LocationContext = createContext(defaultLocation);
+
+export const useLocation = () => useContext(LocationContext);
+
+const LocationContextProvider = (props: any) => {
+  const [location, setLocation] = useState<IGPS>(defaultLocation);
+  navigator.geolocation.getCurrentPosition((position) => {
+    const lat = position.coords.latitude;
+    const lon = position.coords.longitude;
+
+    setLocation({
+      lat,
+      lon,
+    });
+  });
+
+  return (
+    <LocationContext.Provider value={location}>
+      {props.children}
+    </LocationContext.Provider>
+  );
+};
+
+export default LocationContextProvider;

src/Road.tsx

@@ -1,6 +1,4 @@
-import React, { FC, useEffect, useState, useMemo } from "react";
-import ReactGA from "react-ga";
-import { IRoad, IRoadStatus, ISource } from "./types";
+import React, { useEffect, useState, useMemo } from "react";
 import {
   Card,
   Feed,
@@ -10,12 +8,16 @@ import {
   Placeholder,
 } from "semantic-ui-react";
 
+import ReactGA from "react-ga";
+import { IRoad, ISource } from "./types";
+import Status from "./Status";
+
 type RoadProps = {
   road: IRoad;
 };
 
-const Road: FC<any> = (props: RoadProps) => {
-  const [road, setRoad] = useState<IRoadStatus>();
+const Road = (props: RoadProps) => {
+  const [road, setRoad] = useState<IRoad>();
   const [shouldUpdate, setShouldUpdate] = useState(false);
   const [loading, setLoading] = useState(true);
   const { roadName } = props.road;
@@ -153,6 +155,9 @@ const Road: FC<any> = (props: RoadProps) => {
               <Item.Header role="status" as="h2">
                 {statusMessage}
               </Item.Header>
+              <Item.Extra>
+                <Status road={road!} />
+              </Item.Extra>
             </Item.Content>
           </Item>
         </Item.Group>