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/hooks/useSearchString.jsx

@@ -0,0 +1,25 @@
+import { useState, useCallback } from 'preact/hooks';
+
+const defaultSearchString = (limit) => `include_thumbnails=0&limit=${limit}`;
+
+export const useSearchString = (limit, searchParams) => {
+  const { searchParams: initialSearchParams } = new URL(window.location);
+  const _searchParams = searchParams || initialSearchParams.toString();
+
+  const [searchString, changeSearchString] = useState(`${defaultSearchString(limit)}&${_searchParams}`);
+
+  const setSearchString = useCallback(
+    (limit, searchString) => {
+      changeSearchString(`${defaultSearchString(limit)}&${searchString}`);
+    },
+    [changeSearchString]
+  );
+
+  const removeDefaultSearchKeys = useCallback((searchParams) => {
+    searchParams.delete('limit');
+    searchParams.delete('include_thumbnails');
+    searchParams.delete('before');
+  }, []);
+
+  return { searchString, setSearchString, removeDefaultSearchKeys };
+};