diff --git a/src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx b/src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx
index 8ccc0b4..43bdaf5 100644
--- a/src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx
@@ -2,7 +2,7 @@ import { Box, Group, LoadingOverlay, SimpleGrid, Stack, Text } from '@mantine/co
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { NoItemsFound, SettingsHeader } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
-import { useEffect, useState, useMemo, useCallback } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
import { FiChevronRight } from 'react-icons/fi';
import { textClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
@@ -23,11 +23,13 @@ export function ThemePlaylists() {
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const themePlaylists: ThemePlaylist[] = useMemo(() => {
- return themePlaylistData?.filter(
- (a: ThemePlaylist) =>
- a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
- a.name.includes('Time of Day'),
- ) || [];
+ return (
+ themePlaylistData?.filter(
+ (a: ThemePlaylist) =>
+ a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
+ a.name.includes('Time of Day'),
+ ) || []
+ );
}, [themePlaylistData, debouncedSearch]);
const defaultPlaylist: ThemePlaylist = {
id: undefined,
@@ -42,10 +44,13 @@ export function ThemePlaylists() {
const { currentThemePlaylist, theme, isMobile } = useCommonHooks();
const [isLoading, setIsLoading] = useState(false);
- const handleOpen = useCallback((playlist: ThemePlaylist) => {
- setSelectedPlaylist(playlist);
- open();
- }, [open]);
+ const handleOpen = useCallback(
+ (playlist: ThemePlaylist) => {
+ setSelectedPlaylist(playlist);
+ open();
+ },
+ [open],
+ );
const handleClose = useCallback(() => {
setSelectedPlaylist(defaultPlaylist);
@@ -67,17 +72,26 @@ export function ThemePlaylists() {
}
}, [debouncedSearch, searchValue]);
- const allThemesIds = useMemo(() =>
- allThemeData?.map((a: Theme) => a.id) ?? [],
- [allThemeData]);
+ const allThemesIds = useMemo(
+ () => allThemeData?.map((a: Theme) => a.id) ?? [],
+ [allThemeData],
+ );
- const backgroundsThemes = useMemo(() =>
- allThemeData?.filter((a: any) => !a.backgroundImage.toLowerCase().includes('none')) ?? [],
- [allThemeData]);
+ const backgroundsThemes = useMemo(
+ () =>
+ allThemeData?.filter(
+ (a: any) => !a.backgroundImage.toLowerCase().includes('none'),
+ ) ?? [],
+ [allThemeData],
+ );
- const noBackgroundsThemes = useMemo(() =>
- allThemeData?.filter((a: any) => a.backgroundImage.toLowerCase().includes('none')) ?? [],
- [allThemeData]);
+ const noBackgroundsThemes = useMemo(
+ () =>
+ allThemeData?.filter((a: any) =>
+ a.backgroundImage.toLowerCase().includes('none'),
+ ) ?? [],
+ [allThemeData],
+ );
const timeOfDayPlaylist = useMemo(() => {
const found = themePlaylists?.find((a: ThemePlaylist) => a.name === 'Time of Day');
@@ -89,26 +103,35 @@ export function ThemePlaylists() {
};
}, [themePlaylists]);
- const allStack = useMemo(() => ({
- id: undefined,
- name: 'All',
- default: 1,
- themeList: `[${allThemesIds.join(',')}]`,
- }), [allThemesIds]);
+ const allStack = useMemo(
+ () => ({
+ id: undefined,
+ name: 'All',
+ default: 1,
+ themeList: `[${allThemesIds.join(',')}]`,
+ }),
+ [allThemesIds],
+ );
- const backgroundsStack = useMemo(() => ({
- id: undefined,
- name: 'Backgrounds',
- default: 1,
- themeList: `[${backgroundsThemes.map((a: Theme) => a.id).join(',')}]`,
- }), [backgroundsThemes]);
+ const backgroundsStack = useMemo(
+ () => ({
+ id: undefined,
+ name: 'Backgrounds',
+ default: 1,
+ themeList: `[${backgroundsThemes.map((a: Theme) => a.id).join(',')}]`,
+ }),
+ [backgroundsThemes],
+ );
- const noBackgroundsStack = useMemo(() => ({
- id: undefined,
- name: 'No Backgrounds',
- default: 1,
- themeList: `[${noBackgroundsThemes.map((a: Theme) => a.id).join(',')}]`,
- }), [noBackgroundsThemes]);
+ const noBackgroundsStack = useMemo(
+ () => ({
+ id: undefined,
+ name: 'No Backgrounds',
+ default: 1,
+ themeList: `[${noBackgroundsThemes.map((a: Theme) => a.id).join(',')}]`,
+ }),
+ [noBackgroundsThemes],
+ );
return (
@@ -153,7 +176,7 @@ export function ThemePlaylists() {
/>
{allThemeData && (
<>
-
+
Defaults
-
-
-
- {'All' === currentThemePlaylist && (
-
- )}
-
-
-
-
-
-
- {'Backgrounds' === currentThemePlaylist && (
-
- )}
-
-
-
-
-
- {'No Backgrounds' === currentThemePlaylist && (
-
- )}
-
-
-
-
-
- {'Time of Day' === currentThemePlaylist && (
-
- )}
-
-
-
-
-
-
- User Made
-
-
-
- {themePlaylists.length > 1 ? (
-
- {themePlaylists
- .filter((playlist: ThemePlaylist) => playlist.default === 0)
- .sort((a: ThemePlaylist, b: ThemePlaylist) =>
- a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1,
- )
- .map((cardPlaylist: ThemePlaylist) => {
- return (
-
- {cardPlaylist.name === currentThemePlaylist && (
-
- )}
-
-
-
-
- );
- })}
-
- ) : (
-
-
+
+
+ {'All' === currentThemePlaylist && (
+
+ )}
+
+
+
- )}
-
+
+ {'Backgrounds' === currentThemePlaylist && (
+
+ )}
+
+
+
+
+
+ {'No Backgrounds' === currentThemePlaylist && (
+
+ )}
+
+
+
+
+
+ {'Time of Day' === currentThemePlaylist && (
+
+ )}
+
+
+
+
+
+
+
+
+
+ User Made
+
+
+
+ {themePlaylists.length > 1 ? (
+
+ {themePlaylists
+ .filter((playlist: ThemePlaylist) => playlist.default === 0)
+ .sort((a: ThemePlaylist, b: ThemePlaylist) =>
+ a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1,
+ )
+ .map((cardPlaylist: ThemePlaylist) => {
+ return (
+
+ {cardPlaylist.name === currentThemePlaylist && (
+
+ )}
+
+
+
+
+ );
+ })}
+
+ ) : (
+
+
+
+ )}
+
+
)}