nilsnolde · toyesebalogun · Nov 18, 2023
diff --git a/.gitignore b/.gitignore
@@ -16,6 +16,7 @@ yarn.lock
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon.png" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -12,7 +12,7 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -27,6 +27,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="valhalla-app-root"></div>
+    <script type="module" src="/src/main.jsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "@geoman-io/leaflet-geoman-free": "^2.13.1",
     "@mui/material": "^5.10.14",
     "@turf/turf": "^6.5.0",
+    "@vitejs/plugin-react": "^4.1.1",
     "axios": "^1.1.3",
     "date-fns": "^2.29.3",
     "jquery-ui-bundle": "^1.12.1-migrate",
@@ -24,24 +25,24 @@
     "react-dom": "^17.0.0",
     "react-modern-drawer": "^1.1.2",
     "react-redux": "^8.0.4",
-    "react-scripts": "^5.0.1",
     "react-toastify": "^9.1.2",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.2",
     "semantic-ui-css": "^2.5.0",
     "semantic-ui-react": "^2.1.3",
     "tachyons": "^4.12.0",
-    "throttle-debounce": "^5.0.0"
+    "throttle-debounce": "^5.0.0",
+    "vite": "^4.3.9",
+    "vite-plugin-svgr": "3.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "test:all": "yarn test:other && yarn test:js",
-    "predeploy": "react-scripts build",
+    "predeploy": "vite build",
     "deploy": "gh-pages -d build",
-    "eject": "react-scripts eject",
     "fix:other": "yarn prettier --write",
     "fix:js": "yarn test:js --fix",
     "fix": "yarn fix:js && yarn fix:other",

diff --git a/src/Controls/Directions/Maneuvers.jsx b/src/Controls/Directions/Maneuvers.jsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import * as R from 'ramda'
 import { Header, Icon, Divider, Popup } from 'semantic-ui-react'
 
-import { highlightManeuver, zoomToManeuver } from 'actions/directionsActions'
+import { highlightManeuver, zoomToManeuver } from '../../actions/directionsActions'
 
 const getLength = (length) => {
   const visibleLength = length * 1000

diff --git a/src/Controls/Directions/OutputControl.jsx b/src/Controls/Directions/OutputControl.jsx
@@ -4,13 +4,13 @@ import { connect } from 'react-redux'
 import { Segment, Button, Icon } from 'semantic-ui-react'
 import L from 'leaflet'
 
-import { makeRequest } from 'actions/directionsActions'
-import { downloadFile } from 'actions/commonActions'
+import { makeRequest } from '../../actions/directionsActions'
+import { downloadFile } from '../../actions/commonActions'
 import Summary from './Summary'
 import Maneuvers from './Maneuvers'
-import { VALHALLA_OSM_URL } from 'utils/valhalla'
+import { VALHALLA_OSM_URL } from '../../utils/valhalla'
 import jsonFormat from 'json-format'
-import { jsonConfig } from 'Controls/settings-options'
+import { jsonConfig } from '../../Controls/settings-options'
 
 class OutputControl extends React.Component {
   static propTypes = {

diff --git a/src/Controls/Directions/Summary.jsx b/src/Controls/Directions/Summary.jsx
@@ -6,7 +6,7 @@ import * as R from 'ramda'
 import { Icon, Checkbox, Popup } from 'semantic-ui-react'
 import { showProvider } from '../../actions/directionsActions'
 
-import formatDuration from 'utils/date_time'
+import formatDuration from '../../utils/date_time'
 class Summary extends React.Component {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,

diff --git a/src/Controls/Directions/Waypoints/Waypoint.jsx b/src/Controls/Directions/Waypoints/Waypoint.jsx
@@ -8,10 +8,10 @@ import {
   fetchGeocode,
   makeRequest,
   isWaypoint,
-} from 'actions/directionsActions'
+} from '../../../actions/directionsActions'
 
-import { zoomTo } from 'actions/commonActions'
-import { isValidCoordinates } from 'utils/geom'
+import { zoomTo } from '../../../actions/commonActions'
+import { isValidCoordinates } from '../../../utils/geom'
 
 import { debounce } from 'throttle-debounce'
 

diff --git a/src/Controls/Directions/Waypoints/index.jsx b/src/Controls/Directions/Waypoints/index.jsx
@@ -8,7 +8,7 @@ import {
   doAddWaypoint,
   setWaypoints,
   makeRequest,
-} from 'actions/directionsActions'
+} from '../../../actions/directionsActions'
 
 const reorder = (list, startIndex, endIndex) => {
   const result = Array.from(list)

diff --git a/src/Controls/Directions/index.jsx b/src/Controls/Directions/index.jsx
@@ -5,23 +5,23 @@ import { Divider } from 'semantic-ui-react'
 
 import Waypoints from './Waypoints'
 
-import { ProfilePicker } from 'components/profile-picker'
-import { SettingsButton } from 'components/SettingsButton'
-import { SettingsFooter } from 'components/SettingsFooter'
+import { ProfilePicker } from '../../components/profile-picker'
+import { SettingsButton } from '../../components/SettingsButton'
+import { SettingsFooter } from '../../components/SettingsFooter'
 import { Settings } from './settings'
 
 import {
   doAddWaypoint,
   doRemoveWaypoint,
   makeRequest,
   clearRoutes,
-} from 'actions/directionsActions'
+} from '../../actions/directionsActions'
 import {
   updateProfile,
   doShowSettings,
   updatePermalink,
   resetSettings,
-} from 'actions/commonActions'
+} from '../../actions/commonActions'
 
 class DirectionsControl extends React.Component {
   static propTypes = {

diff --git a/src/Controls/Isochrones/OutputControl.jsx b/src/Controls/Isochrones/OutputControl.jsx
@@ -4,9 +4,9 @@ import { connect } from 'react-redux'
 import { Segment, Divider } from 'semantic-ui-react'
 
 import Summary from './Summary'
-import { makeIsochronesRequest } from 'actions/isochronesActions'
+import { makeIsochronesRequest } from '../../actions/isochronesActions'
 import ContoursInformation from './ContoursInformation'
-import { VALHALLA_OSM_URL } from 'utils/valhalla'
+import { VALHALLA_OSM_URL } from '../../utils/valhalla'
 
 class OutputControl extends React.Component {
   static propTypes = {

diff --git a/src/Controls/Isochrones/Summary.jsx b/src/Controls/Isochrones/Summary.jsx
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import * as R from 'ramda'
 import { Checkbox, Icon } from 'semantic-ui-react'
-import { showProvider } from 'actions/directionsActions'
+import { showProvider } from '../../actions/directionsActions'
 
-import { downloadFile } from 'actions/commonActions'
+import { downloadFile } from '../../actions/commonActions'
 import jsonFormat from 'json-format'
-import { jsonConfig } from 'Controls/settings-options'
+import { jsonConfig } from '../../Controls/settings-options'
 class Summary extends React.Component {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,

diff --git a/src/Controls/Isochrones/Waypoints/index.jsx b/src/Controls/Isochrones/Waypoints/index.jsx
@@ -7,16 +7,16 @@ import { Slider } from '@mui/material'
 
 import { Settings } from '../settings'
 
-import { isValidCoordinates } from 'utils/geom'
+import { isValidCoordinates } from '../../../utils/geom'
 import {
   updateTextInput,
   updateIsoSettings,
   fetchGeocode,
   makeIsochronesRequest,
   clearIsos,
-} from 'actions/isochronesActions'
+} from '../../../actions/isochronesActions'
 
-import { updatePermalink, zoomTo } from 'actions/commonActions'
+import { updatePermalink, zoomTo } from '../../../actions/commonActions'
 
 import { debounce } from 'throttle-debounce'
 

diff --git a/src/Controls/Isochrones/index.js → src/Controls/Isochrones/index.jsx b/src/Controls/Isochrones/index.js → src/Controls/Isochrones/index.jsx
@@ -7,15 +7,18 @@ import Waypoints from './Waypoints'
 
 import { ProfilePicker } from '../../components/profile-picker'
 import { SettingsButton } from '../../components/SettingsButton'
-import { SettingsFooter } from 'components/SettingsFooter'
+import { SettingsFooter } from '../../components/SettingsFooter'
 
 import {
   updateProfile,
   doShowSettings,
   updatePermalink,
   resetSettings,
-} from 'actions/commonActions'
-import { clearIsos, makeIsochronesRequest } from 'actions/isochronesActions'
+} from '../../actions/commonActions'
+import {
+  clearIsos,
+  makeIsochronesRequest,
+} from '../../actions/isochronesActions'
 
 class IsochronesControl extends React.Component {
   static propTypes = {

diff --git a/src/Controls/index.jsx b/src/Controls/index.jsx
@@ -16,13 +16,13 @@ import {
   zoomTo,
   resetSettings,
   toggleDirections,
-} from 'actions/commonActions'
-import { fetchReverseGeocodePerma } from 'actions/directionsActions'
+} from '../actions/commonActions'
+import { fetchReverseGeocodePerma } from '../actions/directionsActions'
 import {
   fetchReverseGeocodeIso,
   updateIsoSettings,
-} from 'actions/isochronesActions'
-import { VALHALLA_OSM_URL } from 'utils/valhalla'
+} from '../actions/isochronesActions'
+import { VALHALLA_OSM_URL } from '../utils/valhalla'
 
 const pairwise = (arr, func) => {
   let cnt = 0

diff --git a/src/Controls/settings-panel.jsx b/src/Controls/settings-panel.jsx
@@ -24,11 +24,11 @@ import {
   doShowSettings,
   filterProfileSettings,
   resetSettings,
-} from 'actions/commonActions'
+} from '../actions/commonActions'
 
 import CustomSlider from '../components/CustomSlider'
-import { makeRequest } from 'actions/directionsActions'
-import { makeIsochronesRequest } from 'actions/isochronesActions'
+import { makeRequest } from '../actions/directionsActions'
+import { makeIsochronesRequest } from '../actions/isochronesActions'
 
 const Checkbox = (props) => {
   const { settings, option, dispatch } = props

diff --git a/src/Map/Map.jsx b/src/Map/Map.jsx
@@ -22,16 +22,16 @@ import { CopyToClipboard } from 'react-copy-to-clipboard'
 import {
   fetchReverseGeocode,
   updateInclineDeclineTotal,
-} from 'actions/directionsActions'
-import { fetchReverseGeocodeIso } from 'actions/isochronesActions'
-import { updateSettings } from 'actions/commonActions'
+} from '../actions/directionsActions'
+import { fetchReverseGeocodeIso } from '../actions/isochronesActions'
+import { updateSettings } from '../actions/commonActions'
 import {
   VALHALLA_OSM_URL,
   buildHeightRequest,
   buildLocateRequest,
-} from 'utils/valhalla'
-import { colorMappings, buildHeightgraphData } from 'utils/heightgraph'
-import formatDuration from 'utils/date_time'
+} from '../utils/valhalla'
+import { colorMappings, buildHeightgraphData } from '../utils/heightgraph'
+import formatDuration from '../utils/date_time'
 import './Map.css'
 const OSMTiles = L.tileLayer(process.env.REACT_APP_TILE_SERVER_URL, {
   attribution:

diff --git a/src/actions/directionsActions.js b/src/actions/directionsActions.js
@@ -20,13 +20,13 @@ import {
   reverse_geocode,
   forward_geocode,
   parseGeocodeResponse,
-} from 'utils/nominatim'
+} from '../utils/nominatim'
 
 import {
   VALHALLA_OSM_URL,
   buildDirectionsRequest,
   parseDirectionsGeometry,
-} from 'utils/valhalla'
+} from '../utils/valhalla'
 
 import {
   sendMessage,

diff --git a/src/actions/isochronesActions.js b/src/actions/isochronesActions.js
@@ -12,16 +12,16 @@ import {
   reverse_geocode,
   forward_geocode,
   parseGeocodeResponse,
-} from 'utils/nominatim'
-import { VALHALLA_OSM_URL, buildIsochronesRequest } from 'utils/valhalla'
+} from '../utils/nominatim'
+import { VALHALLA_OSM_URL, buildIsochronesRequest } from '../utils/valhalla'
 
 import {
   sendMessage,
   showLoading,
   updatePermalink,
   filterProfileSettings,
 } from './commonActions'
-import { calcArea } from 'utils/geom'
+import { calcArea } from '../utils/geom'
 
 const serverMapping = {
   [VALHALLA_OSM_URL]: 'OSM',

diff --git a/src/components/CustomSlider.jsx b/src/components/CustomSlider.jsx
@@ -5,7 +5,7 @@ import { debounce } from 'throttle-debounce'
 import {
   settingsInit,
   settingsInitTruckOverride,
-} from 'Controls/settings-options'
+} from '../Controls/settings-options'
 
 import PropTypes from 'prop-types'
 

diff --git a/src/components/profile-picker.jsx b/src/components/profile-picker.jsx
@@ -2,13 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Button, Popup } from 'semantic-ui-react'
 
-import { ReactComponent as BusSvg } from 'images/bus.svg'
-import { ReactComponent as ScooterSvg } from 'images/scooter.svg'
-import { ReactComponent as CarSvg } from 'images/car.svg'
-import { ReactComponent as TruckSvg } from 'images/truck.svg'
-import { ReactComponent as BikeSvg } from 'images/bike.svg'
-import { ReactComponent as PedestrianSvg } from 'images/pedestrian.svg'
-import { ReactComponent as MotorbikeSvg } from 'images/motorbike.svg'
+import { ReactComponent as BusSvg } from '../images/bus.svg'
+import { ReactComponent as ScooterSvg } from '../images/scooter.svg'
+import { ReactComponent as CarSvg } from '../images/car.svg'
+import { ReactComponent as TruckSvg } from '../images/truck.svg'
+import { ReactComponent as BikeSvg } from '../images/bike.svg'
+import { ReactComponent as PedestrianSvg } from '../images/pedestrian.svg'
+import { ReactComponent as MotorbikeSvg } from '../images/motorbike.svg'
 
 const iconMap = {
   truck: <TruckSvg />,

diff --git a/src/index.css b/src/index.css
@@ -1,8 +1,8 @@
-@import '~semantic-ui-css/semantic.css';
+/* @import '~semantic-ui-css/semantic.css';
 @import '~leaflet/dist/leaflet.css';
 @import '~tachyons/css/tachyons.css';
 @import '~react-toastify/dist/ReactToastify.css';
-@import '~leaflet-extra-markers/dist/css/leaflet.extra-markers.min.css';
+@import '~leaflet-extra-markers/dist/css/leaflet.extra-markers.min.css'; */
 
 body {
   margin: 0;

diff --git a/src/index.js → src/main.jsx b/src/index.js → src/main.jsx
diff --git a/src/reducers/common.js b/src/reducers/common.js
@@ -8,11 +8,11 @@ import {
   ZOOM_TO,
   RESET_SETTINGS,
   TOGGLE_DIRECTIONS,
-} from 'actions/types'
+} from '../actions/types'
 import {
   settingsInit,
   settingsInitTruckOverride,
-} from 'Controls/settings-options'
+} from '../Controls/settings-options'
 
 const initialState = {
   activeTab: 0,

diff --git a/src/reducers/directions.js b/src/reducers/directions.js
@@ -13,7 +13,7 @@ import {
   HIGHLIGHT_MNV,
   ZOOM_TO_MNV,
   UPDATE_INCLINE_DECLINE,
-} from 'actions/types'
+} from '../actions/types'
 
 import { VALHALLA_OSM_URL } from '../utils/valhalla'
 

diff --git a/src/reducers/isochrones.js b/src/reducers/isochrones.js
@@ -6,7 +6,7 @@ import {
   UPDATE_TEXTINPUT_ISO,
   TOGGLE_PROVIDER_ISO,
   CLEAR_ISOS,
-} from 'actions/types'
+} from '../actions/types'
 
 import { VALHALLA_OSM_URL } from '../utils/valhalla'
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,6 +16,7 @@ yarn.lock @@
     # production
     /build
+    /dist
     # misc
     .DS_Store
@@ Expand Down @@