KarolJash · dsartori · Dec 7, 2023 · Dec 7, 2023 · Dec 7, 2023 · Feb 7, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,11 @@
     "production": [
       ">0.2%",
       "not dead",
-      "not op_mini all"
+      "not op_mini all",
+      "not safari < 10",
+      "not chrome < 51",
+      "not android < 5",
+      "not ie < 12"
     ],
     "development": [
       "last 1 chrome version",
@@ -28,6 +32,7 @@
   },
   "dependencies": {
     "@syncfusion/ej2-react-dropdowns": "^22.1.37",
+    "dotenv": "^16.3.1",
     "expo-location": "^16.3.0",
     "mapbox-gl": "^2.15.0",
     "react": "^18.2.0",
@@ -36,6 +41,7 @@
     "react-router-dom": "^6.14.1",
     "react-scripts": "^5.0.1",
     "react-select": "^5.7.3",
+    "react-to-print": "^2.15.1",
     "react-widgets": "^5.8.4",
     "sass": "^1.63.6",
     "web-vitals": "^3.3.2"

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,10 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Web site created using create-react-app" />
+    <meta
+      name="description"
+      content="Cycling app for for the Windsor-Essex region, Pelee Island, and the Detroit riverside."
+    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -21,7 +24,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>Windsor Essex Cycling</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,6 +1,5 @@
-import React, { useReducer, useState } from 'react';
+import React, { useState } from 'react';
 import mapboxgl from 'mapbox-gl';
-import { MdClose } from 'react-icons/md';
 
 import Map from './components/map/map.component';
 import Sidebar from './components/sidebar/sidebar.component';
@@ -13,13 +12,9 @@ import StopsContext from './providers/stops/stops.context.jsx';
 import MobileContext from './providers/mobile/mobile.context.jsx';
 import { RouteProvider } from './providers/route/route.context.jsx';
 
-import { mapboxReducer } from './providers/mapbox/mapbox.reducer';
-import { coordinatesReducer } from './providers/coordinates/coordinates.reducer';
-import { graphhopperReducer } from './providers/graphhopper/graphhopper.reducer';
-
 import './App.scss';
 
-mapboxgl.accessToken = 'pk.eyJ1IjoiZWphc25rYXJvIiwiYSI6ImNsYndjOTduajBiY2QzbnFueGY0d3E4anQifQ.yjV2mQdGzjjNuCwKZz-e-Q';
+mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;
 
 function App() {
   const defaultCor = {
@@ -73,9 +68,9 @@ function App() {
   return (
     <div className="app">
       <GraphhopperContext.Provider value={graphProviderState}>
-        <Sidebar />
-        <div className="main">
-          <CoordinatesContext.Provider value={corProviderState}>
+        <CoordinatesContext.Provider value={corProviderState}>
+          <Sidebar />
+          <div className="main">
             <MapContext.Provider value={mapProviderState}>
               <RouteProvider>
                 <Map />
@@ -86,8 +81,8 @@ function App() {
                 </StopsContext.Provider>
               </RouteProvider>
             </MapContext.Provider>
-          </CoordinatesContext.Provider>
-        </div>
+          </div>
+        </CoordinatesContext.Provider>
       </GraphhopperContext.Provider>
     </div>
   );

diff --git a/src/App.scss b/src/App.scss
@@ -2,7 +2,7 @@
 
 .main {
   width: 100%;
-  height: 100vh;
+  height: 95dvh;
   grid-column: 1/3;
   grid-row: 1/2;
 
@@ -19,7 +19,7 @@
 }
 
 .app {
-  height: 100vh;
+  height: 100dvh;
   display: grid;
 
   grid-template-columns: 1fr 350px 50px;

diff --git a/src/components/button/button.component.jsx b/src/components/button/button.component.jsx
@@ -1,20 +1,23 @@
-import { useState } from 'react';
 import { useStopsContext } from '../../providers/stops/stops.context.jsx';
 import { useCoordinatesContext } from '../../providers/coordinates/coordinates.context';
 
 import { Input } from '../input/input.component';
 
 import './button.styles.scss';
 
-export const Add = () => {
+export const Add = ({ mobile }) => {
   const { stopsState, stopsDispatch } = useStopsContext();
 
   function addStop() {
     stopsDispatch([
       ...stopsState,
-      <Input label={`Stop ${stopsState.length + 1}`} id={`Stop ${stopsState.length + 1}`} />,
+      <Input
+        label={`Stop ${stopsState.length + 1}`}
+        id={`Stop ${stopsState.length + 1}`}
+        placeholder={mobile ? `Stop ${stopsState.length + 1}` : null}
+        type={mobile ? 'mobile' : null}
+      />,
     ]);
-    console.log(stopsState);
   }
 
   return (
@@ -23,7 +26,7 @@ export const Add = () => {
         <p>+ Add Destination</p>
       </div>
       <div className="add__button">
-        <Input label="Add" />
+        <Input label="Add" type="mobile" />
       </div>
     </div>
   );

diff --git a/src/components/button/button.styles.scss b/src/components/button/button.styles.scss
@@ -2,6 +2,7 @@
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr;
+  margin-bottom: 10px;
 
   &__button {
     grid-row: 1 / 2;
@@ -18,6 +19,7 @@
     grid-row: 1 / 2;
     grid-column: 1 / 2;
     z-index: 2;
+    cursor: pointer;
 
     display: grid;
     justify-items: center;

diff --git a/src/components/card/card.component.jsx b/src/components/card/card.component.jsx
@@ -5,7 +5,6 @@ import { BsArrowUp } from 'react-icons/bs';
 import './card.styles.scss';
 
 const Card = ({ distance, direction, mobile }) => {
-  console.log(mobile);
   const display_distance = x => {
     if (x === undefined) {
       return <></>;

diff --git a/src/components/dashboard/dashboard.component.jsx b/src/components/dashboard/dashboard.component.jsx
@@ -14,7 +14,7 @@ import './dashboard.styles.scss';
 const Dashboard = () => {
   const { mapState } = useMapContext();
   const { mobileState, mobileDispatch } = useMobileContext();
-  const { graphState } = useGraphhopperContext();
+  const { graphState, graphDispatch } = useGraphhopperContext();
   const { route } = useRoute();
   const { corState, corDispatch } = useCoordinatesContext();
   const { stopsDispatch } = useStopsContext();
@@ -35,8 +35,10 @@ const Dashboard = () => {
     e.preventDefault();
 
     // handleExit(e, mapState, mobileDispatch, corDispatch, stopsDispatch, corState);
-    handleExit(e, mapState, mobileDispatch, corDispatch, stopsDispatch, corState);
-    removeMarker(mapState);
+    handleExit(e, mapState, mobileDispatch, corDispatch, stopsDispatch, corState, graphDispatch);
+    if (mobileState === 'route') {
+      removeMarker(mapState);
+    }
   }
 
   if (graphState) {
@@ -48,23 +50,28 @@ const Dashboard = () => {
         graphState.paths[0].points.coordinates[route.point_index - 1][1],
         graphState.paths[0].points.coordinates[route.point_index - 1][0]
       );
+
     const distance =
-      route.distance - graphState.paths[0].instructions[route.instruction_index].distance + instruction_distance_left;
+      mobileState === 'route'
+        ? route.distance -
+          graphState.paths[0].instructions[route.instruction_index].distance +
+          instruction_distance_left
+        : graphState.paths[0].distance;
 
     const time =
-      route.time -
-      (1 -
-        (instruction_distance_left / graphState.paths[0].instructions[route.instruction_index].distance) *
-          graphState.paths[0].instructions[route.instruction_index].time);
+      mobileState === 'route'
+        ? route.time -
+          (1 -
+            (instruction_distance_left / graphState.paths[0].instructions[route.instruction_index].distance) *
+              graphState.paths[0].instructions[route.instruction_index].time)
+        : graphState.paths[0].time;
 
     const today = new Date();
     today.setHours(today.getHours() + round_time(time)[0] * 1);
     today.setMinutes(today.getMinutes() + round_time(time)[2] * 1);
 
-    console.log(route);
-
     return (
-      <div className={mobileState === 'route' ? 'dashboard' : 'hidden'}>
+      <div className="dashboard">
         <div className="dashboard__exit">
           <CgClose className="dashboard__icon" />
           <div className="dashboard__button" onClick={handleClick} />

diff --git a/src/components/dashboard/dashboard.styles.scss b/src/components/dashboard/dashboard.styles.scss
@@ -1,13 +1,9 @@
 @import '../../mixins';
 
 .dashboard {
-  display: none;
-
-  @include respond(phone) {
-    display: grid;
-    grid-template-columns: 2fr 8fr;
-    grid-column-gap: 1rem;
-  }
+  display: grid;
+  grid-template-columns: 2fr 8fr;
+  grid-column-gap: 1rem;
 
   grid-row: 9 / 10;
   grid-column: 1 / 9;