Option to choose next image

src/components/ui/Sidebar.tsx

@@ -1,9 +1,11 @@
 import { Tooltip } from '@hope-ui/solid';
 import { Accessor, For, createSelector, createSignal, onMount } from 'solid-js';
 import { Settings } from '../widgets/Settings';
-
+import { IoImage, IoReload } from 'solid-icons/io';
 import { FavoriteBackground } from '../widgets/FavoriteBackground';
+
 import style from './Sidebar.module.css';
+import { useSettings } from '~/state/settings-provider';
 
 type SidebarProps = {
   categories: Accessor<string[] | undefined>;
@@ -13,6 +15,7 @@ type SidebarProps = {
 
 export function Sidebar(props: SidebarProps) {
   const isActive = createSelector(props.activeCategory);
+  const { currentBackground, onNextBackground } = useSettings();
 
   const [isInitialLoading, setIsInitialLoading] = createSignal(true);
 
@@ -38,6 +41,9 @@ export function Sidebar(props: SidebarProps) {
         </ul>
       </div>
       <div class={style.SettingsWrapper}>
+        <Tooltip withArrow placement="top" label="Next Image">
+          <IoImage size={18} onClick={() => onNextBackground()} />
+        </Tooltip>
         <FavoriteBackground />
         <Tooltip withArrow placement="top" label="Settings">
           <Settings />

src/state/create-backgrounds.ts

@@ -53,6 +53,7 @@ export function createBackgrounds(appSettings: Settings) {
   };
 
   return {
+    backgrounds,
     currentRandomBackground,
     onFavoriteBackground,
     favoriteBackgrounds,

src/state/settings-provider.tsx

@@ -1,9 +1,10 @@
-import { Accessor, JSX, createContext, createMemo, useContext } from 'solid-js';
+import { Accessor, JSX, createContext, createEffect, createSignal, useContext } from 'solid-js';
 import { SetStoreFunction } from 'solid-js/store';
 import { sample } from '~/lib/array';
 import { createLocalStore } from '~/lib/create-local-store';
 import { Background } from '~/types';
 import { createBackgrounds } from './create-backgrounds';
+import { ap } from 'ramda';
 
 export type Settings = {
   showLocations: boolean;
@@ -15,10 +16,11 @@ export type Settings = {
 type SettingsContextType = {
   appSettings: Settings;
   setAppSettings: SetStoreFunction<Settings>;
+  currentBackground: Accessor<Background | undefined>;
+  onNextBackground(): void;
   favoriteBackgrounds: Background[];
   onFavoriteBackground(): void;
   onUnfavoriteBackground(): void;
-  currentBackground: Accessor<Background | undefined>;
   isBackgroundSaved: Accessor<boolean>;
 };
 
@@ -31,6 +33,7 @@ const SettingsContext = createContext<SettingsContextType>({
   },
   setAppSettings: () => {},
   currentBackground: () => undefined,
+  onNextBackground: () => {},
   favoriteBackgrounds: [],
   onFavoriteBackground: () => {},
   onUnfavoriteBackground: () => {},
@@ -46,6 +49,7 @@ export function SettingsProvider(props: { children: JSX.Element }) {
   });
 
   const {
+    backgrounds,
     currentRandomBackground,
     onFavoriteBackground,
     favoriteBackgrounds,
@@ -53,10 +57,30 @@ export function SettingsProvider(props: { children: JSX.Element }) {
     onUnfavoriteBackground,
   } = createBackgrounds(appSettings);
 
-  const currentBackground = createMemo(() =>
+  const [currentBackground, setCurrentBackground] = createSignal(
     appSettings.useSavedBackgrounds ? sample(favoriteBackgrounds) : currentRandomBackground()
   );
 
+  createEffect(() =>
+    setCurrentBackground(
+      appSettings.useSavedBackgrounds ? sample(favoriteBackgrounds) : currentRandomBackground()
+    )
+  );
+
+  const onNextBackground = () => {
+    if (appSettings.useSavedBackgrounds && favoriteBackgrounds.length < 2) {
+      return;
+    }
+
+    let background = currentBackground();
+    while (background === currentBackground()) {
+      background = appSettings.useSavedBackgrounds
+        ? sample(favoriteBackgrounds)
+        : sample(backgrounds.backgrounds ?? []);
+    }
+    setCurrentBackground(background);
+  };
+
   const isCurrentBackgroundSaved = () =>
     Boolean(currentBackground() && isBackgroundSaved(currentBackground()!.id));
 
@@ -67,6 +91,7 @@ export function SettingsProvider(props: { children: JSX.Element }) {
     <SettingsContext.Provider
       value={{
         currentBackground,
+        onNextBackground,
         favoriteBackgrounds,
         onFavoriteBackground,
         onUnfavoriteBackground: onUnfavoriteCurrentBackground,