refactor

src/app.tsx

@@ -1,8 +1,11 @@
 import { MantineProvider } from '@mantine/core';
 import { Background as BackgroundComponent } from '~/components/ui/background';
+import { useLoadBackgrounds } from './hooks/use-load-backgrounds';
 import { IndexPage } from './pages/index-page';
 
 export function App() {
+  useLoadBackgrounds();
+
   return (
     <MantineProvider defaultColorScheme="dark">
       <BackgroundComponent />

src/hooks/use-load-backgrounds.ts

@@ -0,0 +1,27 @@
+import { useAtom, useAtomValue } from 'jotai';
+import { useEffect } from 'react';
+import { getRandomBackground } from '~/api/unsplash';
+import { backgroundsAtom, settingsAtom } from '~/atoms';
+import { BACKGROUND_FETCH_MINS } from '~/config';
+import { Background } from '~/types';
+
+export function useLoadBackgrounds() {
+  const { unsplashQuery } = useAtomValue(settingsAtom);
+  const [backgrounds, setBackgrounds] = useAtom(backgroundsAtom);
+
+  useEffect(() => {
+    const shouldFetch =
+      backgrounds.backgrounds.length === 0 ||
+      backgrounds.fetched_at < new Date().getTime() - 1000 * 60 * BACKGROUND_FETCH_MINS;
+
+    if (shouldFetch) {
+      getRandomBackground(unsplashQuery).then((r) =>
+        setBackgrounds({
+          fetched_at: new Date().getTime(),
+          backgrounds: (r?.response as Background[]) ?? null,
+        })
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}

src/pages/index-page.tsx

@@ -1,17 +1,14 @@
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import { useEffect, useMemo, useState } from 'react';
 import { useCategories } from '~/api/get-apps';
 import { useSearchProviders } from '~/api/get-search-providers';
-import { getRandomBackground } from '~/api/unsplash';
-import { backgroundsAtom, onNextBackgroundAtom, settingsAtom } from '~/atoms';
+import { onNextBackgroundAtom, settingsAtom } from '~/atoms';
 import { AppList } from '~/components/apps/app-list';
 import { Sidebar } from '~/components/ui/sidebar';
 import { CurrentImageWidget } from '~/components/widgets/current-image-widget';
 import { DateWidget } from '~/components/widgets/date-widget';
 import { SearchWidget } from '~/components/widgets/search-widget';
-import { BACKGROUND_FETCH_MINS } from '~/config';
-import { useActiveCategory } from '~/lib/use-active-category';
-import { Background } from '~/types';
+import { useActiveCategory } from '~/hooks/use-active-category';
 
 import style from './index-page.module.css';
 
@@ -20,27 +17,10 @@ export function IndexPage() {
   const [searchTerm, setSearchTerm] = useState('');
   const shouldSearchLocally = searchTerm && !searchTerm.startsWith('!');
 
-  const { showImageDetails, unsplashQuery } = useAtomValue(settingsAtom);
+  const { showImageDetails } = useAtomValue(settingsAtom);
 
-  const [backgrounds, setBackgrounds] = useAtom(backgroundsAtom);
   const onNextBackground = useSetAtom(onNextBackgroundAtom);
 
-  useEffect(() => {
-    const shouldFetch =
-      backgrounds.backgrounds.length === 0 ||
-      backgrounds.fetched_at < new Date().getTime() - 1000 * 60 * BACKGROUND_FETCH_MINS;
-
-    if (shouldFetch) {
-      getRandomBackground(unsplashQuery).then((r) =>
-        setBackgrounds({
-          fetched_at: new Date().getTime(),
-          backgrounds: (r?.response as Background[]) ?? null,
-        })
-      );
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const { categories, apps } = useCategories();
 
   const { activeCategory, selectCategory, resetCategory } = useActiveCategory();