Merge branch 'main' into consolidate-donation-modal-code

Author: LeoBonjo

.all-contributorsrc

@@ -243,6 +243,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "yontank",
+      "name": "Yehonatan Avrahimi",
+      "avatar_url": "https://avatars.githubusercontent.com/u/48332126?v=4",
+      "profile": "https://github.com/yontank",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

README.md

@@ -94,6 +94,7 @@ https://github.com/hasadna/open-bus-map-search/blob/main/src/model/busStop.ts#L4
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/griseduardo"><img src="https://avatars.githubusercontent.com/u/34499486?v=4?s=100" width="100px;" alt="Eduardo Henrique Gris"/><br /><sub><b>Eduardo Henrique Gris</b></sub></a><br /><a href="#code-griseduardo" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/YaelChen"><img src="https://avatars.githubusercontent.com/u/51058584?v=4?s=100" width="100px;" alt="Yael Chen"/><br /><sub><b>Yael Chen</b></sub></a><br /><a href="#code-YaelChen" title="Code">💻</a> <a href="#test-YaelChen" title="Tests">⚠️</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/LeoBonjo"><img src="https://avatars.githubusercontent.com/u/139697327?v=4?s=100" width="100px;" alt="Leo Green"/><br /><sub><b>Leo Green</b></sub></a><br /><a href="#code-LeoBonjo" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/yontank"><img src="https://avatars.githubusercontent.com/u/48332126?v=4?s=100" width="100px;" alt="Yehonatan Avrahimi"/><br /><sub><b>Yehonatan Avrahimi</b></sub></a><br /><a href="#code-yontank" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package-lock.json

@@ -5,7 +5,7 @@
   "type": "commonjs",
   "dependencies": {
     "@applitools/eyes-playwright": "^1.32.0",
-    "@emotion/react": "^11.11.4",
+    "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.14",
     "@mui/lab": "^5.0.0-alpha.169",
@@ -107,7 +107,7 @@
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/leaflet": "^1.9.12",
+    "@types/leaflet": "^1.9.14",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^20.12.8",
     "@types/react": "^18.2.58",

package.json

@@ -114,16 +114,22 @@ class LocationObservable {
 }
 
 const pool = new Array(10).fill(0).map(() => Promise.resolve<void | Response>(void 0))
-async function fetchWithQueue(url: string, retries = 10) {
-  let queue = pool.shift()!
-  queue = queue
-    .then(() => fetch(url))
-    .catch(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 10000 * Math.random() + 100))
-      return fetchWithQueue(url, retries - 1)
-    })
-  pool.push(queue)
-  return queue
+async function fetchWithQueue(url: string) {
+  const task = async () => {
+    for (let attempt = 0; attempt < 3; attempt++) {
+      try {
+        return await fetch(url)
+      } catch {
+        if (attempt === 2) throw new Error(`Failed after 3 attempts`)
+        await new Promise((resolve) => setTimeout(resolve, 1000 * 2 ** attempt))
+      }
+    }
+  }
+
+  const queue = pool.shift()!
+  const result = queue.then(task).finally(() => pool.push(Promise.resolve()))
+  pool.push(result)
+  return result
 }
 
 // this function checks the cache for the data, and if it's not there, it loads it

src/api/useVehicleLocations.ts

@@ -1,7 +1,8 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DollarOutlined } from '@ant-design/icons'
-import DonateModal from '../../pages/DonateModal/DonateModal'
+import DonateModal from 'src/pages/DonateModal/DonateModal'
+
 
 export const DonationButton = () => {
   const { t } = useTranslation()

src/layout/header/DonationButton.tsx

@@ -19,11 +19,13 @@ const style = {
   p: 4,
 } as const
 
-const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose }) => {
+export const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose }) => {
   return (
     <Modal
       open={isVisible}
       onClose={onClose}
+      aria-modal="true"
+      role="dialog"
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
       sx={{

src/pages/DonateModal/DonateModal.tsx

@@ -106,6 +106,19 @@ test.describe('Visual Tests', () => {
       ),
     )
   })
+  test('donation modal should look good', async ({ page }) => {
+    await page.goto('/')
+    await page.getByLabel('לתרומות').click()
+    await page.locator('.MuiTypography-root').first().waitFor()
+    await eyes.check('donation modal', Target.region(page.getByRole('dialog')))
+  })
+  test('donation modal should look good in dark mode', async ({ page }) => {
+    await page.goto('/')
+    await page.getByLabel('עבור למצב כהה').click()
+    await page.getByLabel('לתרומות').click()
+    await page.locator('.MuiTypography-root').first().waitFor()
+    await eyes.check('donation modal dark mode', Target.region(page.getByRole('dialog')))
+  })
 })
 
 function setBatchName(eyes: Eyes) {