feat: recreate dashboard page from previous version

inertia/hooks/use_active_collection.tsx

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { ActiveCollectionContext } from '~/contexts/active_collection_context';
+
+const useActiveCollection = () => useContext(ActiveCollectionContext);
+export default useActiveCollection;

inertia/hooks/use_auto_focus.tsx

@@ -0,0 +1,9 @@
+import { useCallback } from 'react';
+
+export default function useAutoFocus() {
+  return useCallback((inputElement: any) => {
+    if (inputElement) {
+      inputElement.focus();
+    }
+  }, []);
+}

inertia/hooks/use_collections.tsx

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import CollectionsContext from '~/contexts/collections_context';
+
+const useCollections = () => useContext(CollectionsContext);
+export default useCollections;

inertia/hooks/use_favorites.tsx

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import FavoritesContext from '~/contexts/favorites_context';
+
+const useFavorites = () => useContext(FavoritesContext);
+export default useFavorites;

inertia/hooks/use_global_hotkeys.tsx

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import GlobalHotkeysContext from '~/contexts/global_hotkeys_context';
+
+const useGlobalHotkeys = () => useContext(GlobalHotkeysContext);
+export default useGlobalHotkeys;

inertia/hooks/use_is_mobile.tsx

@@ -0,0 +1,8 @@
+const MOBILE_SCREEN_SIZE = 768;
+
+export default function useIsMobile() {
+  return (
+    typeof window !== 'undefined' &&
+    window.matchMedia(`screen and (max-width: ${MOBILE_SCREEN_SIZE}px)`).matches
+  );
+}

inertia/hooks/use_local_storage.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+
+export function useLocalStorage(key: string, initialValue: any) {
+  const [storedValue, setStoredValue] = useState(() => {
+    if (typeof window === 'undefined') {
+      return initialValue;
+    }
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.log(error);
+      return initialValue;
+    }
+  });
+
+  const setValue = (value: any) => {
+    try {
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      if (typeof window !== 'undefined') {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  return [storedValue, setValue];
+}

inertia/hooks/use_media_query.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState<boolean>(false);
+
+  const handleMediaChange = () => setMatches(getMediaMatches(query));
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query);
+    handleMediaChange();
+
+    matchMedia.addEventListener('change', handleMediaChange);
+    return () => matchMedia.removeEventListener('change', handleMediaChange);
+  }, [query]);
+
+  return matches;
+}
+
+function getMediaMatches(query: string): boolean {
+  if (typeof window !== 'undefined') {
+    return window.matchMedia(query).matches;
+  }
+  return false;
+}

inertia/hooks/use_modal.tsx

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+
+const useModal = (defaultValue: boolean = false) => {
+  const [isShowing, setIsShowing] = useState<boolean>(defaultValue);
+
+  const toggle = () => setIsShowing((value) => !value);
+  const open = () => setIsShowing(true);
+  const close = () => setIsShowing(false);
+
+  return {
+    isShowing,
+    toggle,
+    open,
+    close,
+  };
+};
+
+export default useModal;

inertia/hooks/use_search_item.tsx

@@ -0,0 +1,43 @@
+import { buildSearchItem, formatSearchItem } from 'lib/search';
+import { useMemo } from 'react';
+import useCollections from '~/hooks/use_collections';
+import { SearchItem, SearchResult } from '~/types/search';
+
+export default function useSearchItem({
+  searchTerm = '',
+  disableLinks = false,
+  disableCollections = false,
+}: {
+  searchTerm: string;
+  disableLinks?: boolean;
+  disableCollections?: boolean;
+}) {
+  const { collections } = useCollections();
+
+  const itemsSearch: SearchItem[] = useMemo<SearchItem[]>(() => {
+    return collections.reduce((acc, collection) => {
+      const collectionItem = buildSearchItem(collection, 'collection');
+      const items: SearchItem[] = collection.links.map((link) =>
+        buildSearchItem(link, 'link')
+      );
+      return [...acc, ...items, collectionItem];
+    }, [] as SearchItem[]);
+  }, [collections]);
+
+  const itemsCompletion: SearchResult[] = useMemo(() => {
+    return itemsSearch.reduce((acc, item) => {
+      const formattedItem = formatSearchItem(item, searchTerm);
+
+      if (
+        (!disableLinks && item.type === 'link') ||
+        (!disableCollections && item.type === 'collection')
+      ) {
+        return formattedItem ? [...acc, formattedItem] : acc;
+      }
+
+      return acc;
+    }, [] as SearchResult[]);
+  }, [itemsSearch, searchTerm, disableLinks, disableCollections]);
+
+  return itemsCompletion;
+}

inertia/hooks/use_search_param.tsx

@@ -0,0 +1,12 @@
+import { usePage } from '@inertiajs/react';
+
+const useSearchParam = (urlParam: string) => {
+  const { url } = usePage();
+  const urlParams = url.split('?');
+  urlParams.shift();
+
+  const urlSearchParam = new URLSearchParams(urlParams.join(''));
+  return urlSearchParam.get(urlParam);
+};
+
+export default useSearchParam;