simbabque
commented
6 months ago I think this is a fairly trivial fix, but it needs test data. I don't know how to set up the backend, or how to get data into the test environment, so I've used https://mswjs.io/ to produce a local mock that returns the five results for "missionday" that the test environment returns when searching.
To produce this, I did:
$ npm install msw --save-dev
$ https://mswjs.io/I then created the following two files:
src/mocks/browser.js:
import { setupWorker } from 'msw/browser';
import { handlers } from './handlers';
export const worker = setupWorker(...handlers);src/mocks/handlers.js:
import { http, HttpResponse, passthrough } from 'msw'
export const handlers = [
http.get(/bnrs/, ({request}) => {
const url = new URL(request.url)
const minEventTimestamp = url.searchParams.get('minEventTimestamp')
if (!minEventTimestamp) {
return passthrough();
}
return HttpResponse.json([
{
"id": "missionday-nürnberg-40c1",
"title": "MissionDay: Nürnberg",
"width": 6,
"numberOfMissions": 30,
"numberOfSubmittedMissions": 0,
"numberOfDisabledMissions": 0,
"startLatitude": 49.446999,
"startLongitude": 11.08132,
"startPlaceId": "nuremberg-4447",
"lengthMeters": 8727,
"formattedAddress": "Nuremberg, Germany",
"picture": "/bnrs/pictures/2104e045dafdef8399f8f8b76ec19f50",
"eventStartDate": "2024-01:01",
"eventstartTimestamp": "00:00:00",
"eventEndDate": "2024-12:31",
"eventendTimestamp": "23:59:59"
},
{
"id": "missionday-東北盛岡-0dec",
"title": "MissionDay 東北盛岡",
"width": 6,
"numberOfMissions": 12,
"numberOfSubmittedMissions": 0,
"numberOfDisabledMissions": 0,
"startLatitude": 39.709071,
"startLongitude": 141.154442,
"startPlaceId": "morioka-2ffc",
"lengthMeters": 20500,
"formattedAddress": "Morioka, Iwate, Japan",
"picture": "/bnrs/pictures/3594b9ec5777038c4e169d520f7c0119",
"eventStartDate": "2024-01:01",
"eventstartTimestamp": "00:00:00",
"eventEndDate": "2024-12:31",
"eventendTimestamp": "23:59:59"
},
{
"id": "missionday-hangzhou-20161203-2267",
"title": "MissionDay Hangzhou 20161203",
"width": 6,
"numberOfMissions": 24,
"numberOfSubmittedMissions": 0,
"numberOfDisabledMissions": 0,
"startLatitude": 30.277822,
"startLongitude": 120.158439,
"startPlaceId": "hangzhou-f6f8",
"lengthMeters": 29490,
"formattedAddress": "Hangzhou, Zhejiang, China",
"picture": "/bnrs/pictures/1c97207d45c7ac9d814b694a4d58c989",
"eventStartDate": "2024-01:01",
"eventstartTimestamp": "00:00:00",
"eventEndDate": "2024-12:31",
"eventendTimestamp": "23:59:59"
},
{
"id": "深圳印象-missionday纪念任务-8c87",
"title": "深圳印象·MissionDay纪念任务",
"width": 6,
"numberOfMissions": 6,
"numberOfSubmittedMissions": 0,
"numberOfDisabledMissions": 0,
"startLatitude": 22.540434,
"startLongitude": 113.934012,
"startPlaceId": "shenzhen-0db7",
"lengthMeters": 3008,
"formattedAddress": "Shenzhen, Guangdong Province, China",
"picture": "/bnrs/pictures/a74a4533116bb78e116831d9915b860e",
"eventStartDate": "2024-01:01",
"eventstartTimestamp": "00:00:00",
"eventEndDate": "2024-12:31",
"eventendTimestamp": "23:59:59"
},
{
"id": "mdsp-missionday-sapporo-2018-7-29-f570",
"title": "MDSP（MissionDay Sapporo） 2018.7.29",
"width": 6,
"numberOfMissions": 18,
"numberOfSubmittedMissions": 0,
"numberOfDisabledMissions": 0,
"startLatitude": 43.06775,
"startLongitude": 141.352179,
"startPlaceId": "sapporo-61f9",
"lengthMeters": 42356,
"formattedAddress": "Sapporo, Hokkaido, Japan",
"picture": "/bnrs/pictures/fbac665836db35dacefec78447376d3a",
"eventStartDate": "2024-01:01",
"eventstartTimestamp": "00:00:00",
"eventEndDate": "2024-12:31",
"eventendTimestamp": "23:59:59"
}
])
}),
]Finally, I changed src/index.tsx to include this:
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -11,13 +11,25 @@ import './mobile.less'
import '@fontsource/roboto/400.css'
import '@fontsource/roboto/400-italic.css'
import '@fontsource/roboto/700.css'
-
-const container = document.getElementById('root')!
-const root = createRoot(container)
-root.render(
- <Provider store={store}>
- <PersistGate loading={null} persistor={persistor}>
- <App />
- </PersistGate>
- </Provider>
-)
+async function enableMocking() {
+ if (process.env.NODE_ENV !== 'development') {
+ return;
+ }
+
+ const { worker } = await import('./mocks/browser');
+
+ // `worker.start()` returns a Promise that resolves
+ // once the Service Worker is up and ready to intercept requests.
+ return worker.start();
+}
+enableMocking().then(() => {
+ const container = document.getElementById('root')!
+ const root = createRoot(container)
+ root.render(
+ <Provider store={store}>
+ <PersistGate loading={null} persistor={persistor}>
+ <App />
+ </PersistGate>
+ </Provider>
+ )
+});Having set all of this up, my local instance now sends back these five MD banners and produces the events block.
Removing the .slice(0, 3) from https://github.com/bannergress/website/blob/93e1ee8b343dcb5bcac5ce824266c2deb7e06f81/src/components/events-preview/EventsPreview.tsx#L24-L30 is of course trivial, and it works well, as below screenshot shows.
However, the "See Full List" button remains, even if we show all of them. If we remove that button, I don't think we'd have any other way of getting to the /events screen at all. Is it then even useful? It looks like the button and the functionality itself came in at the same time, so I don't think this ticket was created before the button was there.
When are there ever more than 3 events at the same time? Are events only MDs? Does this make sense at all?
I've pushed my fix to my local branch https://github.com/simbabque/bannergress-website/tree/308-more-mds. It has has two commits. One is the fix removing the slice completely, and the second one is adding the mocking so it can be used. I have not created a PR, as that would obviously not need the mocking. Note it's on top of my changes for #364 because that was more convenient.
Thoughts?
ewoerner
KirDE
not only 3 like now