fix debug info on single-line-map page

.eslintrc.json

@@ -3,6 +3,11 @@
     "browser": true,
     "es2021": true
   },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",

.github/workflows/ci.yml

@@ -1,6 +1,11 @@
 name: CI
 on:
   push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
 jobs:
   ci:
     runs-on: ubuntu-20.04

.github/workflows/playwright.yml

@@ -21,4 +21,42 @@ jobs:
       with:
         name: playwright-report
         path: playwright-report/
-        retention-days: 30
+        retention-days: 30\
+    - uses: shallwefootball/s3-upload-action@master
+      name: Upload report to S3
+      if: always()
+      id: s3-report
+      continue-on-error: true
+      with:
+        aws_key_id: ${{ secrets.AWS_KEY_ID }}
+        aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY}}
+        aws_bucket: noam-gaash.co.il
+        source_dir: playwright-report
+        destination_dir: ${{ github.run_id }}/open-bus/playwright-report
+    - name: output link to report to the summary
+      if: always() && steps.s3-report.outcome == 'success'
+      run: echo "link to report - https://s3.amazonaws.com/noam-gaash.co.il/$GITHUB_RUN_ID/open-bus/playwright-report/index.html" >> $GITHUB_STEP_SUMMARY
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: yarn
+    - name: Run lint
+      run: yarn lint
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: yarn
+    - name: Build
+      run: yarn build

README.md

@@ -18,6 +18,7 @@ This app is created by the volunteers of [Public Knowledge Workshop](https://www
 
 ### Running the project:
 
+- fork the repo
 - clone the repo
 - `yarn install`
 - `yarn start`

package.json

@@ -28,6 +28,7 @@
     "recharts": "^2.4.3",
     "sass": "^1.58.3",
     "styled-components": "^5.3.5",
+    "stylis-plugin-rtl": "^2.1.1",
     "typescript": "^4.7.4",
     "underscore.string": "^3.3.6",
     "usehooks-ts": "^2.9.1",
@@ -70,10 +71,10 @@
     "@types/underscore.string": "^0.0.38",
     "@typescript-eslint/eslint-plugin": "^5.35.1",
     "@typescript-eslint/parser": "^5.35.1",
-    "eslint": "8.22.0",
+    "eslint": "^8.49.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.1",
+    "eslint-plugin-react": "^7.33.2",
     "openapi-typescript-codegen": "^0.23.0",
     "prettier": "^2.7.1"
   },

playwright.config.ts

@@ -15,19 +15,19 @@ export default defineConfig({
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  /* Retry twice on CI. */
+  retries: process.env.CI ? 2 : 1,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
   /* 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://127.0.0.1:3000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: process.env.CI ? 'on' : 'on-all-retries',
   },
 
   /* Configure projects for major browsers */
@@ -71,7 +71,8 @@ export default defineConfig({
   /* Run your local dev server before starting the tests */
   webServer: {
     command: 'yarn start',
-    url: 'http://localhost:3000',
     reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+    port: 3000,
   },
 })

public/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="he" dir="rtl">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

src/App.tsx

@@ -18,9 +18,15 @@ import RealtimeMapPage from './pages/RealtimeMapPage'
 import SingleLineMapPage from './pages/SingleLineMapPage'
 import { useLocation } from 'react-router-dom'
 import ReactGA from 'react-ga4'
-import { LocalizationProvider } from '@mui/x-date-pickers'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import { CacheProvider } from '@emotion/react'
+import createCache from '@emotion/cache'
+import rtlPlugin from 'stylis-plugin-rtl'
+import 'moment/locale/he'
+import { heIL as heILmui } from '@mui/x-date-pickers/locales'
 import { ThemeProvider, createTheme } from '@mui/material'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import { LocalizationProvider } from '@mui/x-date-pickers'
+import About from './pages/About'
 
 const { Content } = Layout
 
@@ -58,14 +64,36 @@ const PAGES = [
     label: TEXTS.singleline_map_page_title,
     key: '/single-line-map',
   },
+  {
+    label: TEXTS.about_title,
+    key: '/about',
+  },
+  {
+    label: TEXTS.report_a_bug_title,
+    key: 'https://github.com/hasadna/open-bus-map-search/issues',
+  },
+  {
+    label: TEXTS.donate_title,
+    key: 'https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal',
+  },
 ]
 
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#5f5bff',
+const theme = createTheme(
+  {
+    direction: 'rtl',
+    palette: {
+      primary: {
+        main: '#5f5bff',
+      },
     },
   },
+  heILmui,
+)
+
+// Create rtl cache
+const cacheRtl = createCache({
+  key: 'muirtl',
+  stylisPlugins: [rtlPlugin],
 })
 
 const App = () => {
@@ -105,31 +133,42 @@ const App = () => {
   }, [])
 
   return (
-    <ThemeProvider theme={theme}>
-      <LocalizationProvider dateAdapter={AdapterMoment}>
-        <SearchContext.Provider value={{ search, setSearch: safeSetSearch }}>
-          <ConfigProvider direction="rtl" locale={heIL}>
-            <StyledLayout className="main">
-              <Header pages={PAGES} />
-              <Layout>
-                <StyledContent>
-                  <StyledBody>
-                    <Routes>
-                      <Route path={PAGES[0].key} element={<DashboardPage />} />
-                      <Route path={PAGES[1].key} element={<TimelinePage />} />
-                      <Route path={PAGES[2].key} element={<GapsPage />} />
-                      <Route path={PAGES[3].key} element={<RealtimeMapPage />} />
-                      <Route path={PAGES[4].key} element={<SingleLineMapPage />} />
-                      <Route path="*" element={<Navigate to={PAGES[0].key} replace />} />
-                    </Routes>
-                  </StyledBody>
-                </StyledContent>
-              </Layout>
-            </StyledLayout>
-          </ConfigProvider>
-        </SearchContext.Provider>
-      </LocalizationProvider>
-    </ThemeProvider>
+    <SearchContext.Provider value={{ search, setSearch: safeSetSearch }}>
+      <CacheProvider value={cacheRtl}>
+        <ThemeProvider theme={theme}>
+          <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="he">
+            <ConfigProvider direction="rtl" locale={heIL}>
+              <StyledLayout className="main">
+                <Header pages={PAGES} />
+                <Layout>
+                  <StyledContent>
+                    <StyledBody>
+                      <Routes>
+                        <Route path={PAGES[0].key} element={<DashboardPage />} />
+                        <Route path={PAGES[1].key} element={<TimelinePage />} />
+                        <Route path={PAGES[2].key} element={<GapsPage />} />
+                        <Route path={PAGES[3].key} element={<RealtimeMapPage />} />
+                        <Route path={PAGES[4].key} element={<SingleLineMapPage />} />
+                        <Route path={PAGES[5].key} element={<About />} />
+                        <Route
+                          path="*"
+                          element={
+                            <div>
+                              <a href={PAGES[0].key}>click to navigate to dashboard.</a>
+                              <Navigate to={PAGES[0].key} replace />
+                            </div>
+                          }
+                        />
+                      </Routes>
+                    </StyledBody>
+                  </StyledContent>
+                </Layout>
+              </StyledLayout>
+            </ConfigProvider>
+          </LocalizationProvider>
+        </ThemeProvider>
+      </CacheProvider>
+    </SearchContext.Provider>
   )
 }
 

src/api/searchLocationService.ts

@@ -6,7 +6,7 @@ export async function searchLocationByQueryAsync(query: string): Promise<LatLngT
     'https://nominatim.openstreetmap.org/search?countrycodes=il&format=json&q=' +
       encodeURIComponent(query),
   )
-  const data = result.data as any[]
+  const data = result.data
   if (data.length === 0) {
     return null
   }