show all current events on homepage

[KirDE]

not only 3 like now

[simbabque]

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

website/src/components/events-preview/EventsPreview.tsx

Lines 24 to 30 in 93e1ee8

	<BannerList
	banners={data.slice(0, 3)}
	hasMoreBanners={false}
	hideBlacklisted={false}
	showDetailsButton={false}
	applyBannerListStlyes={true}
	/>

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]

The limit on 3 events is there for a purpose, it happens sometimes that we have way more than three events on the same date:

The number of 3 events was picked because it fits into one row on desktop.

[KirDE]

Than there will be more. Still required, as events are most important to be displayed.