configure unsplash query

src/api/unsplash.ts

@@ -4,5 +4,6 @@ const UNSPLASH_ACCESS_KEY = import.meta.env.VITE_UNSPLASH_ACCESS_KEY;
 
 const unsplashApi = createApi({ accessKey: UNSPLASH_ACCESS_KEY, fetch });
 
-export const getRandomBackground = () =>
-  unsplashApi.photos.getRandom({ count: 20, query: 'dark wallpaper' });
+export const getRandomBackground = (query = 'dark wallpaper') => {
+  return unsplashApi.photos.getRandom({ count: 20, query });
+};

src/components/widgets/Settings.tsx

@@ -2,6 +2,8 @@ import {
   Button,
   Checkbox,
   Flex,
+  FormLabel,
+  Input,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -32,7 +34,7 @@ export function Settings(props: SettingsProps) {
           <ModalCloseButton />
           <ModalHeader>Settings</ModalHeader>
           <ModalBody>
-            <Flex direction="column" gap=".5rem">
+            <Flex direction="column" gap="1rem">
               <Checkbox
                 checked={appSettings.showLocations}
                 onChange={(e) => setAppSettings({ showLocations: (e.target as any).checked })}
@@ -53,8 +55,16 @@ export function Settings(props: SettingsProps) {
                 }}
               >
                 <HiOutlineTrash size={16} />
-                Reload backgrounds
+                Reload cached backgrounds
               </a>
+              <FormLabel>
+                Unsplash query
+                <Input
+                  value={appSettings.unsplashQuery}
+                  onKeyDown={(e) => e.stopPropagation()}
+                  onChange={(e) => setAppSettings({ unsplashQuery: e.target.value })}
+                />
+              </FormLabel>
             </Flex>
           </ModalBody>
           <ModalFooter>

src/state/create-backgrounds.ts

@@ -4,8 +4,9 @@ import { BACKGROUND_FETCH_MINS } from '~/config';
 import { sample } from '~/lib/array';
 import { createLocalStore } from '~/lib/create-local-store';
 import { Background, BackgroundStorage } from '~/types';
+import { Settings } from './settings-provider';
 
-export function createBackgrounds() {
+export function createBackgrounds(appSettings: Settings) {
   const [backgrounds, setBackgrounds] = createLocalStore<BackgroundStorage>(
     'start-page-background',
     { fetched_at: 0, backgrounds: null }
@@ -21,7 +22,7 @@ export function createBackgrounds() {
     backgrounds.fetched_at < new Date().getTime() - 1000 * 60 * BACKGROUND_FETCH_MINS;
 
   if (shouldFetch) {
-    getRandomBackground().then((r) =>
+    getRandomBackground(appSettings.unsplashQuery).then((r) =>
       setBackgrounds({
         fetched_at: new Date().getTime(),
         backgrounds: (r?.response as Background[]) ?? null,
@@ -29,7 +30,7 @@ export function createBackgrounds() {
     );
   }
 
-  const currentRandomBackground = createMemo<Background>(() =>
+  const currentRandomBackground = createMemo<Background | undefined>(() =>
     sample(backgrounds.backgrounds ?? [])
   );
 
@@ -39,11 +40,15 @@ export function createBackgrounds() {
     setFavroiteBackgrounds((prev) => prev.filter((b) => b.id !== id));
 
   const onFavoriteBackground = () => {
+    if (!currentRandomBackground()) {
+      return;
+    }
+
     setFavroiteBackgrounds((prev) => {
-      if (prev.find((background) => background.id === currentRandomBackground().id)) {
+      if (prev.find((background) => background.id === currentRandomBackground()!.id)) {
         return prev;
       }
-      return [...prev, currentRandomBackground()];
+      return [...prev, currentRandomBackground()!];
     });
   };
 

src/state/settings-provider.tsx

@@ -5,7 +5,12 @@ import { createLocalStore } from '~/lib/create-local-store';
 import { Background } from '~/types';
 import { createBackgrounds } from './create-backgrounds';
 
-type Settings = { showLocations: boolean; viewAsTable: boolean; useSavedBackgrounds: boolean };
+export type Settings = {
+  showLocations: boolean;
+  viewAsTable: boolean;
+  useSavedBackgrounds: boolean;
+  unsplashQuery: string;
+};
 
 type SettingsContextType = {
   appSettings: Settings;
@@ -18,7 +23,12 @@ type SettingsContextType = {
 };
 
 const SettingsContext = createContext<SettingsContextType>({
-  appSettings: { showLocations: false, viewAsTable: false, useSavedBackgrounds: false },
+  appSettings: {
+    showLocations: false,
+    viewAsTable: false,
+    useSavedBackgrounds: false,
+    unsplashQuery: 'dark wallpaper',
+  },
   setAppSettings: () => {},
   currentBackground: () => undefined,
   favoriteBackgrounds: [],
@@ -32,6 +42,7 @@ export function SettingsProvider(props: { children: JSX.Element }) {
     showLocations: false,
     viewAsTable: false,
     useSavedBackgrounds: false,
+    unsplashQuery: 'dark wallpaper',
   });
 
   const {
@@ -40,7 +51,7 @@ export function SettingsProvider(props: { children: JSX.Element }) {
     favoriteBackgrounds,
     isBackgroundSaved,
     onUnfavoriteBackground,
-  } = createBackgrounds();
+  } = createBackgrounds(appSettings);
 
   const currentBackground = createMemo(() =>
     appSettings.useSavedBackgrounds ? sample(favoriteBackgrounds) : currentRandomBackground()