Events performance (#1645)

* rearrange event route and splitted into several components

* useIntersectionObserver

* re-arrange

* searchstring improvement

* added xs tailwind breakpoint

* useOuterClick hook

* cleaned up

* removed some video controls for mobile devices

* lint

* moved hooks to global folder

* moved buttons for small devices

* added button groups

Co-authored-by: Bernt Christian Egeland <cbegelan@gmail.com>

web/src/routes/Events/reducer.jsx

@@ -0,0 +1,47 @@
+import produce from 'immer';
+
+export const initialState = Object.freeze({ events: [], reachedEnd: false, searchStrings: {}, deleted: 0 });
+
+export const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case 'DELETE_EVENT': {
+      const { deletedId } = action;
+
+      return produce(state, (draftState) => {
+        const idx = draftState.events.findIndex((e) => e.id === deletedId);
+        if (idx === -1) return state;
+
+        draftState.events.splice(idx, 1);
+        draftState.deleted++;
+      });
+    }
+    case 'APPEND_EVENTS': {
+      const {
+        meta: { searchString },
+        payload,
+      } = action;
+
+      return produce(state, (draftState) => {
+        draftState.searchStrings[searchString] = true;
+        draftState.events.push(...payload);
+        draftState.deleted = 0;
+      });
+    }
+
+    case 'REACHED_END': {
+      const {
+        meta: { searchString },
+      } = action;
+      return produce(state, (draftState) => {
+        draftState.reachedEnd = true;
+        draftState.searchStrings[searchString] = true;
+      });
+    }
+
+    case 'RESET':
+      return initialState;
+
+    default:
+      return state;
+  }
+};