Merge branch 'main' into usability/gaps

hasadna · Oct 5, 2023 · 893b336 · 893b336
2 parents b7efbae + 25e80e3
commit 893b336
Show file tree

Hide file tree

Showing 15 changed files with 2,636 additions and 9,005 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -10,4 +10,4 @@ RUN yarn run build
 # Pulled March 21, 2023
 FROM nginx@sha256:aa0afebbb3cfa473099a62c4b32e9b3fb73ed23f2a75a65ce1d4b4f55a5c2ef2
 COPY nginx-default.conf /etc/nginx/conf.d/default.conf
-COPY --from=0 /app/build /usr/share/nginx/html
+COPY --from=0 /app/dist /usr/share/nginx/html
diff --git a/README.md b/README.md
@@ -23,8 +23,9 @@ This app is created by the volunteers of [Public Knowledge Workshop](https://www
 - `yarn install`
 - `yarn start`
 
+
 ### useful resources:
-* [the design file](https://www.figma.com/file/Plw8Uuu6U96CcX5tJyRMoW/Public-Transportation-visual-informaiton?type=design&node-id=0-1&mode=design&t=Dh8lI3EJ37unxvoe-0)https://www.figma.com/file/Plw8Uuu6U96CcX5tJyRMoW/Public-Transportation-visual-informaiton?type=design&node-id=0-1&mode=design&t=Dh8lI3EJ37unxvoe-0
+* [the design file](https://www.figma.com/file/Plw8Uuu6U96CcX5tJyRMoW/Public-Transportation-visual-informaiton?type=design&node-id=0-1&mode=design&t=Dh8lI3EJ37unxvoe-0)
 * [data model schema](https://github.com/hasadna/open-bus-stride-db/blob/main/DATA_MODEL.md)
 * [API documentation and examples (swagger)](https://open-bus-stride-api.hasadna.org.il/docs)
 * [the deployed website](https://open-bus-map-search.hasadna.org.il/dashboard)

diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,19 +2,20 @@
 <html lang="he" dir="rtl">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="Open-Bus"
       content="Open Bus web app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="apple-touch-icon" href="logo192.png" />
+    <link rel="manifest" href="manifest.json" />
     <title>Open Bus</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@mui/material": "^5.14.7",
     "@mui/x-date-pickers": "^6.12.1",
     "@types/leaflet.markercluster": "^1.5.2",
+    "@vitejs/plugin-react-swc": "^3.4.0",
     "antd": "^4.22.5",
     "axios": "^0.27.2",
     "classnames": "^2.3.2",
@@ -25,25 +26,27 @@
     "react-leaflet": "^4.0.1",
     "react-leaflet-cluster": "^2.1.0",
     "react-router-dom": "^6.6.1",
-    "react-scripts": "5.0.1",
     "recharts": "^2.4.3",
     "sass": "^1.58.3",
     "styled-components": "^5.3.5",
     "stylis-plugin-rtl": "^2.1.1",
     "typescript": "^5.2.2",
     "underscore.string": "^3.3.6",
     "usehooks-ts": "^2.9.1",
+    "vite": "^4.4.9",
+    "vite-plugin-svgr": "^4.1.0",
+    "vite-tsconfig-paths": "^4.2.1",
     "web-vitals": "^2.1.4"
   },
   "resolutions": {
     "autoprefixer": "10.4.5"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "CI=false react-scripts build",
-    "test": "react-scripts test",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
+    "test": "echo \"no default test defined. to run playwright test, use `npm run test:playwright`\"",
     "test:playwright": "playwright test",
-    "eject": "react-scripts eject",
     "lint": "eslint . --max-warnings 0",
     "lint:fix": "eslint . --fix",
     "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
@@ -65,7 +68,7 @@
     "@types/geolib": "^2.0.23",
     "@types/leaflet": "^1.7.11",
     "@types/lodash.debounce": "^4.0.7",
-    "@types/node": "^16.11.48",
+    "@types/node": "^20.8.0",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.26",

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -25,7 +25,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://127.0.0.1:3000',
+    baseURL: 'http://localhost:3000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: process.env.CI ? 'on' : 'on-all-retries',

diff --git a/src/App.tsx b/src/App.tsx
@@ -51,10 +51,12 @@ const PAGES = [
   {
     label: TEXTS.timeline_page_title,
     key: '/timeline',
+    searchParamsRequired: true,
   },
   {
     label: TEXTS.gaps_page_title,
     key: '/gaps',
+    searchParamsRequired: true,
   },
   {
     label: TEXTS.realtime_map_page_title,
@@ -63,6 +65,7 @@ const PAGES = [
   {
     label: TEXTS.singleline_map_page_title,
     key: '/single-line-map',
+    searchParamsRequired: true,
   },
   {
     label: TEXTS.about_title,
@@ -117,12 +120,21 @@ const App = () => {
   })
 
   useEffect(() => {
-    setSearchParams({
-      operatorId: search.operatorId!,
-      lineNumber: search.lineNumber!,
-      routeKey: search.routeKey!,
-      timestamp: search.timestamp.toString(),
-    })
+    const page = PAGES.find((page) => page.key === location.pathname)
+    if (page?.searchParamsRequired) {
+      const params = new URLSearchParams({ timestamp: search.timestamp.toString() })
+
+      if (search.operatorId) {
+        params.set('operatorId', search.operatorId)
+      }
+      if (search.lineNumber) {
+        params.set('lineNumber', search.lineNumber)
+      }
+      if (search.routeKey) {
+        params.set('routeKey', search.routeKey)
+      }
+      setSearchParams(params)
+    }
   }, [search.lineNumber, search.operatorId, search.routeKey, search.timestamp, location.pathname])
 
   const safeSetSearch = useCallback((mutate: (prevState: PageSearchState) => PageSearchState) => {

diff --git a/src/pages/RealtimeMapPage.tsx b/src/pages/RealtimeMapPage.tsx
@@ -38,7 +38,7 @@ interface Path {
 }
 
 export const colorIcon = ({ operator_id, name }: { operator_id: string; name?: string }) => {
-  const path = process.env.PUBLIC_URL + `/bus-logos/${operator_id}.svg`
+  const path = `/bus-logos/${operator_id}.svg`
   return new DivIcon({
     className: 'my-div-icon',
     html: `
@@ -245,7 +245,6 @@ export function Markers({ positions }: { positions: Point[] }) {
       map.flyTo([position.coords.latitude, position.coords.longitude], 13),
     )
   }, [])
-  // const two = process.env.PUBLIC_URL + '/bus-groups/2.svg'
 
   return (
     <>

diff --git a/src/pages/components/MapLayers/BusLayer.tsx b/src/pages/components/MapLayers/BusLayer.tsx
@@ -7,7 +7,7 @@ import { VehicleLocation } from 'src/model/vehicleLocation'
 import createClusterCustomIcon from '../utils/customCluster/customCluster'
 
 const colorIcon = ({ operator_id, name }: { operator_id: string; name?: string }) => {
-  const path = process.env.PUBLIC_URL + `/bus-logos/${operator_id}.svg`
+  const path = `/bus-logos/${operator_id}.svg`
   return new DivIcon({
     className: 'my-div-icon',
     html: `

diff --git a/src/pages/components/utils/customCluster/customCluster.tsx b/src/pages/components/utils/customCluster/customCluster.tsx
@@ -24,7 +24,7 @@ export default createClusterCustomIcon
 const getIconForGroup = (numOfNearbyBusses: number): string => {
   const groupSizes = [30, 10, 3, 2]
 
-  const imgPath = process.env.PUBLIC_URL + '/bus-groups/'
+  const imgPath = '/bus-groups/'
   const iconName = `${groupSizes.find((groupSize) => numOfNearbyBusses >= groupSize) || 3}.svg`
   return imgPath + iconName
 }

diff --git a/tests/dashboard.spec.ts b/tests/dashboard.spec.ts
@@ -1,6 +1,6 @@
 import { test } from '@playwright/test'
 
 test('dashboard is on homepage', async ({ page }) => {
-  await page.goto('http://localhost:3000/')
+  await page.goto('/')
   await page.getByText('קיבוץ לפי שעה').click()
 })
diff --git a/tests/example.spec.ts b/tests/example.spec.ts
@@ -3,7 +3,7 @@ import { Page, test } from '@playwright/test'
 test('search bus station', async ({ page }) => {
   test.slow()
   await page.routeFromHAR('tests/example.har', {
-    url: /api/,
+    url: /^(?!.*\.(ts|js|mjs)$).*api/,
     update: false,
     updateContent: 'embed',
     notFound: 'abort',

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,9 +1,12 @@
 {
   "compilerOptions": {
-    "baseUrl": "./",
-    "target": "ES6",
+    "baseUrl": ".",
+    "paths":{
+      "src/*": ["./src/*"],
+    },
+    "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
+    "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
@@ -15,7 +18,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["vite/client", "vite-plugin-svgr/client","node"]
   },
   "include": ["src"]
 }
diff --git a/vite-env.d.ts b/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      src: '/src',
+    },
+  },
+  server: {
+    port: 3000,
+  },
+})