smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Refactor settings management and add mutation error handling
All checks were successful
Deploy to production / build (push) Successful in 18s
Details

Browse Source
This commit is contained in:
Sean Edmunds
2026-10-20 14:16:20 -05:00
parent 69dae97a79
commit ecf061da1f
43 changed files with 476 additions and 440 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/settings/components/Applications/Applications.tsx
View File

@@ -128,10 +128,12 @@ export function Applications() {
useEffect(() => {
if (applicationList.length > 0 && applicationList !== applications) {
void mutateAsync({
mutateAsync({
method: 'PATCH',
endpoint: appsOrderEndpoint,
body: applicationList,
}).catch((error) => {
console.error(error);
});
}
}, [applicationList]);

8
src/pages/settings/components/Applications/DebouncedApplication.tsx
View File

@@ -38,7 +38,13 @@ function DebouncedApplication({
};
useEffect(() => {
if (debounced && Object.keys(debounced).length > 0) {
mutateAsync({ method: 'PATCH', endpoint: 'api/applications', body: debounced });
mutateAsync({
method: 'PATCH',
endpoint: 'api/applications',
body: debounced,
}).catch((error) => {
console.error(error);
});
}
}, [debounced]);

8
src/pages/settings/components/Bookmarks/Bookmarks.tsx
View File

@@ -142,10 +142,12 @@ export function Bookmarks() {
useEffect(() => {
if (groupList.length > 0 && groupList !== groups) {
void mutateAsync({
mutateAsync({
method: 'PATCH',
endpoint: 'api/bookmarkCategoryOrder',
body: groupList,
}).catch((error) => {
console.error(error);
});
}
}, [groupList]);
@@ -160,13 +162,15 @@ export function Bookmarks() {
body={
<form
onSubmit={form.onSubmit((values) => {
void mutateAsync({
mutateAsync({
method: 'POST',
endpoint: categoriesEndpoint,
body: {
...values,
categoryIndex: groups.length,
},
}).catch((error) => {
console.error(error);
});
handleClose();
})}

6
src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
View File

@@ -33,7 +33,11 @@ function DebouncedBookmarkItem({
};
useEffect(() => {
if (debounced && Object.keys(debounced).length) {
mutateAsync({ method: 'PATCH', endpoint: 'api/bookmarks', body: debounced });
mutateAsync({ method: 'PATCH', endpoint: 'api/bookmarks', body: debounced }).catch(
(error) => {
console.error(error);
},
);
}
}, [debounced]);

12
src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
View File

@@ -94,6 +94,8 @@ function DebouncedGroupSettingsItem({
method: 'PATCH',
endpoint: 'api/bookmarkCategories',
body: debounced,
}).catch((error) => {
console.error(error);
});
setUpdate(undefined);
}
@@ -107,7 +109,13 @@ function DebouncedGroupSettingsItem({
useEffect(() => {
if (bookmarkList && bookmarkList !== bookmarks) {
mutateAsync({ method: 'PATCH', endpoint: 'api/bookmarkOrder', body: bookmarkList });
mutateAsync({
method: 'PATCH',
endpoint: 'api/bookmarkOrder',
body: bookmarkList,
}).catch((error) => {
console.error(error);
});
}
}, [bookmarkList]);
@@ -351,6 +359,8 @@ function DebouncedGroupSettingsItem({
method: 'POST',
endpoint: 'api/bookmarks',
body: { ...values, index: bookmarks.length },
}).catch((error) => {
console.error(error);
});
setPopoverOpened(false);
form.reset();

8
src/pages/settings/components/GuacamoleClients/DebouncedGuacamoleClient.tsx
View File

@@ -47,7 +47,13 @@ function DebouncedGuacamoleClient({
useEffect(() => {
if (debounced && Object.keys(debounced).length) {
mutateAsync({ method: 'PATCH', endpoint: 'api/guacamoleClients', body: debounced });
mutateAsync({
method: 'PATCH',
endpoint: 'api/guacamoleClients',
body: debounced,
}).catch((error) => {
console.error(error);
});
}
}, [debounced]);

4
src/pages/settings/components/GuacamoleClients/GuacamoleClients.tsx
View File

@@ -108,10 +108,12 @@ export function GuacamoleClients() {
body={
<form
onSubmit={form.onSubmit((values) => {
void mutateAsync({
mutateAsync({
method: 'POST',
endpoint: endpoint,
body: { ...values, enabled: 1 },
}).catch((error) => {
console.error(error);
});
handleClose();
})}

10
src/pages/settings/components/Messages/Messages.tsx
View File

@@ -71,7 +71,11 @@ export function Messages() {
useEffect(() => {
if (Object.keys(debounced).length) {
void mutateAsync({ method: 'PATCH', endpoint: endpoint, body: debounced });
mutateAsync({ method: 'PATCH', endpoint: endpoint, body: debounced }).catch(
(error) => {
console.error(error);
},
);
}
}, [debounced]);
@@ -116,10 +120,12 @@ export function Messages() {
body={
<form
onSubmit={form.onSubmit((values) => {
void mutateAsync({
mutateAsync({
method: 'POST',
endpoint: endpoint,
body: { message: values.message },
}).catch((error) => {
console.error(error);
});
handleClose();
})}

6
src/pages/settings/components/Personalization/Personalization.tsx
View File

@@ -37,7 +37,11 @@ export function Personalization() {
const { isMobile, theme } = useCommonHooks();
useEffect(() => {
if (debounced && Object.keys(debounced).length) {
void mutateAsync({ method: 'PATCH', endpoint: endpoint, body: debounced });
mutateAsync({ method: 'PATCH', endpoint: endpoint, body: debounced }).catch(
(error) => {
console.error(error);
},
);
setUpdate(undefined);
}
}, [debounced]);

6
src/pages/settings/components/Search/DebouncedSearchProvider.tsx
View File

@@ -40,7 +40,11 @@ function DebouncedSearchProvider({
useEffect(() => {
if (debounced && Object.keys(debounced).length) {
mutateAsync({ method: 'PATCH', endpoint: 'api/providers', body: debounced });
mutateAsync({ method: 'PATCH', endpoint: 'api/providers', body: debounced }).catch(
(error) => {
console.error(error);
},
);
}
}, [debounced]);

4
src/pages/settings/components/Search/SearchProviders.tsx
View File

@@ -116,10 +116,12 @@ export function SearchProviders() {
body={
<form
onSubmit={form.onSubmit((values) => {
void mutateAsync({
mutateAsync({
method: 'POST',
endpoint: endpoint,
body: values,
}).catch((error) => {
console.error(error);
});
handleClose();
})}

2
src/pages/settings/components/Theming/Backgrounds/components/DeleteBackground.tsx
View File

@@ -59,6 +59,8 @@ export function DeleteBackground({
method: 'DELETE',
endpoint: 'api/backgrounds',
body: { fileName },
}).catch((error) => {
console.error(error);
});
}}
>

4
src/pages/settings/components/Theming/Backgrounds/components/EditBackground.tsx
View File

@@ -72,6 +72,8 @@ export function EditBackground({
fileName.length,
)}`,
},
}).catch((error) => {
console.error(error);
});
} else {
mutateAsync({
@@ -81,6 +83,8 @@ export function EditBackground({
fileName,
newFileName: rename,
},
}).catch((error) => {
console.error(error);
});
}
handleEditBackgroundModalClose();

16
src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx
View File

@@ -41,7 +41,7 @@ export function ThemePlaylists() {
const [opened, { open, close }] = useDisclosure(false);
const [selectedPlaylist, setSelectedPlaylist] =
useState<ThemePlaylist>(defaultPlaylist);
const { currentThemePlaylist, theme, isMobile } = useCommonHooks();
const { settings, theme, isMobile } = useCommonHooks();
const [isLoading, setIsLoading] = useState(false);
const handleOpen = useCallback(
@@ -58,10 +58,12 @@ export function ThemePlaylists() {
}, [close]);
const handleSavePlaylist = useCallback(() => {
void mutateAsync({
mutateAsync({
method: selectedPlaylist?.id === undefined ? 'POST' : 'PATCH',
endpoint: themePlaylistsEndpoint,
body: selectedPlaylist ?? {},
}).catch((error) => {
console.error(error);
});
close();
}, [selectedPlaylist, mutateAsync, themePlaylistsEndpoint, close]);
@@ -189,7 +191,7 @@ export function ThemePlaylists() {
</Text>
<Group>
<Group pos={'relative'}>
{'All' === currentThemePlaylist && (
{'All' === settings.currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',
@@ -210,7 +212,7 @@ export function ThemePlaylists() {
/>
</Group>
<Group pos={'relative'}>
{'Backgrounds' === currentThemePlaylist && (
{'Backgrounds' === settings.currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',
@@ -234,7 +236,7 @@ export function ThemePlaylists() {
/>
</Group>
<Group pos={'relative'}>
{'No Backgrounds' === currentThemePlaylist && (
{'No Backgrounds' === settings.currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',
@@ -258,7 +260,7 @@ export function ThemePlaylists() {
/>
</Group>
<Group pos={'relative'}>
{'Time of Day' === currentThemePlaylist && (
{'Time of Day' === settings.currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',
@@ -311,7 +313,7 @@ export function ThemePlaylists() {
.map((cardPlaylist: ThemePlaylist) => {
return (
<Group key={cardPlaylist.name} pos={'relative'}>
{cardPlaylist.name === currentThemePlaylist && (
{cardPlaylist.name === settings.currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',

6
src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistCard.tsx
View File

@@ -18,7 +18,7 @@ export function ThemePlaylistCard({
allThemes: Theme[];
}) {
const [hover, setHover] = useState(false);
const { setThemeName, setCurrentThemePlaylist, handleDelete } = useCommonHooks();
const { updateSetting, handleDelete } = useCommonHooks();
const defaultLists = ['All', 'Backgrounds', 'No Backgrounds'];
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const themeList = JSON.parse(
@@ -117,8 +117,8 @@ export function ThemePlaylistCard({
border: 'solid var(--mantine-color-border-0)',
}}
onClick={() => {
setCurrentThemePlaylist(cardPlaylist.name);
setThemeName('random');
updateSetting('currentThemePlaylist', cardPlaylist.name);
updateSetting('theme', 'random');
}}
disabled={themeList.length === 0}
>

9
src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx
View File

@@ -25,8 +25,7 @@ export function ThemePlaylistStack({
setPressed(true);
});
const [hover, setHover] = useState(false);
const { setThemeName, setCurrentThemePlaylist, handleDelete, currentUser } =
useCommonHooks();
const { settings, updateSetting, handleDelete } = useCommonHooks();
const [indexOffset, setIndexOffset] = useState(0);
const [movingIndex, setMovingIndex] = useState(0);
const missingTheme = {
@@ -41,7 +40,7 @@ export function ThemePlaylistStack({
randomEnabled: 1,
textShadowsEnabled: 0,
appShadowsEnabled: 0,
themeFont: currentUser.defaultFont,
themeFont: settings.defaultFont,
};
const [topTheme, setTopTheme] = useState<Theme>(missingTheme);
const defaultLists = ['All', 'Backgrounds', 'No Backgrounds'];
@@ -156,8 +155,8 @@ export function ThemePlaylistStack({
borderRadius: '100%',
}}
onClick={() => {
setCurrentThemePlaylist(cardPlaylist.name);
setThemeName('random');
updateSetting('currentThemePlaylist', cardPlaylist.name);
updateSetting('theme', 'random');
}}
>
{modalOpened && (

11
src/pages/settings/components/Theming/Themes/ThemeCard/ThemeCard.tsx
View File

@@ -27,8 +27,7 @@ export function ThemeCard({
}) {
const { hovered, ref: hoverRef } = useHover();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { currentTheme, setCurrentTheme, setCurrentThemePlaylist, handleDelete } =
useCommonHooks();
const { settings, updateSetting, handleDelete } = useCommonHooks();
const [hoverPreview, setHoverPreview] = useDebouncedState(false, 1000);
const [transition, setTransition] = useDebouncedState(false, 200);
@@ -113,7 +112,7 @@ export function ThemeCard({
<Button
w={'275px'}
h={'115px'}
disabled={currentTheme === 'random'}
disabled={settings.theme === 'random'}
style={{
backgroundImage:
cardTheme?.backgroundImage?.toLocaleLowerCase() === 'none'
@@ -137,12 +136,12 @@ export function ThemeCard({
}}
onClick={() => {
if (enabled !== false) {
setCurrentTheme(cardTheme.name);
setCurrentThemePlaylist('All');
updateSetting('theme', cardTheme.name);
updateSetting('currentThemePlaylist', 'All');
}
}}
>
{hovered && enabled && currentTheme !== 'random' && (
{hovered && enabled && settings.theme !== 'random' && (
<Overlay
style={{
opacity: !hoverPreview || transition ? 0.5 : 0,

15
src/pages/settings/components/Theming/Themes/ThemeCard/components/ThemeManagementPill.tsx
View File

@@ -29,14 +29,13 @@ export function ThemeManagementPill({
transition: boolean;
setTransition: (transition: boolean) => void;
}) {
const { currentTheme, currentThemePlaylist, handleThemeChange, theme } =
useCommonHooks();
const { settings, handleThemeChange, theme } = useCommonHooks();
const [shiftEdit, setShiftEdit] = useState<number>(0);
const [shiftShuffle, setShiftShuffle] = useState<number>(0);
const { mutateAsync } = useMutationAPI();
return (
<>
{currentTheme === 'random' && cardTheme.name === theme.name ? (
{settings.theme === 'random' && cardTheme.name === theme.name ? (
<Group>
<Group
onMouseEnter={() => {
@@ -81,16 +80,16 @@ export function ThemeManagementPill({
setShiftShuffle(0);
}}
onClick={() => {
if (currentThemePlaylist === 'All') {
if (settings.currentThemePlaylist === 'All') {
handleThemeChange(allThemes, false);
} else if (currentThemePlaylist === 'Backgrounds') {
} else if (settings.currentThemePlaylist === 'Backgrounds') {
handleThemeChange(
allThemes.filter(
(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
),
false,
);
} else if (currentThemePlaylist === 'No Backgrounds') {
} else if (settings.currentThemePlaylist === 'No Backgrounds') {
handleThemeChange(
allThemes.filter((a: any) =>
a.backgroundImage.toLowerCase().includes('none'),
@@ -100,7 +99,7 @@ export function ThemeManagementPill({
} else {
const themeList = JSON.parse(
themePlaylists?.find(
(t: ThemePlaylist) => t?.name === currentThemePlaylist,
(t: ThemePlaylist) => t?.name === settings.currentThemePlaylist,
)?.themeList ?? '[]',
);
const filteredThemes = allThemes.filter((t: Theme) =>
@@ -203,6 +202,8 @@ export function ThemeManagementPill({
method: 'PATCH',
endpoint: 'api/themes',
body: { ...cardTheme, randomEnabled: !cardTheme.randomEnabled },
}).catch((error) => {
console.error(error);
});
}}
>

6
src/pages/settings/components/Theming/Themes/ThemeModal/ThemeModal.tsx
View File

@@ -30,7 +30,7 @@ export function ThemeModal({
themePlaylists: ThemePlaylist[];
}) {
const themesEndpoint = 'api/themes';
const { currentUser, isMobile } = useCommonHooks();
const { settings, isMobile } = useCommonHooks();
const [defaultTheme, setDefaultTheme] = useState<Theme>({ ...selectedTheme });
const [designerTheme, setDesignerTheme] = useState<Theme>({
...selectedTheme,
@@ -68,7 +68,7 @@ export function ThemeModal({
randomEnabled: 1,
textShadowsEnabled: 0,
appShadowsEnabled: 0,
themeFont: currentUser.defaultFont,
themeFont: settings.defaultFont,
});
};
@@ -77,6 +77,8 @@ export function ThemeModal({
method: designerTheme?.id === undefined ? 'POST' : 'PATCH',
endpoint: themesEndpoint,
body: designerTheme,
}).catch((error) => {
console.error(error);
});
handleClose();
};

22
src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeChanges.tsx
View File

@@ -25,7 +25,7 @@ export default function ThemeChanges({
designerTheme: Theme;
setDesignerTheme: (theme: Theme) => void;
}) {
const { currentUser, getObjectDiff } = useCommonHooks();
const { settings, getObjectDiff } = useCommonHooks();
return (
<Stack
gap={0}
@@ -148,7 +148,7 @@ export default function ThemeChanges({
}}
>
{defaultTheme[key as keyof Theme] ||
`Default (${currentUser.defaultFont})`}
`Default (${settings.defaultFont})`}
</Text>
<Text>→</Text>
<Text
@@ -158,7 +158,7 @@ export default function ThemeChanges({
}}
>
{designerTheme[key as keyof Theme] ||
`Default (${currentUser.defaultFont})`}
`Default (${settings.defaultFont})`}
</Text>
</Group>
)}
@@ -197,9 +197,11 @@ export default function ThemeChanges({
<ColorSwatch
h={50}
onClick={() => {
navigator.clipboard.writeText(
defaultTheme[key as keyof Theme] as string,
);
navigator.clipboard
.writeText(defaultTheme[key as keyof Theme] as string)
.catch((error) => {
console.error(error);
});
notifications.show({
title: (
<Text fw={600} c={'var(--mantine-color-accent-0)'}>
@@ -250,9 +252,11 @@ export default function ThemeChanges({
<ColorSwatch
h={50}
onClick={() => {
navigator.clipboard.writeText(
defaultTheme[key as keyof Theme] as string,
);
navigator.clipboard
.writeText(defaultTheme[key as keyof Theme] as string)
.catch((error) => {
console.error(error);
});
notifications.show({
title: (
<Text fw={600} c={'var(--mantine-color-accent-0)'}>

4
src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeEditor.tsx
View File

@@ -37,7 +37,7 @@ export function ThemeEditor({
duplicate: boolean;
setDuplicate: (duplicate: boolean) => void;
}) {
const { currentUser, isMobile } = useCommonHooks();
const { settings, isMobile } = useCommonHooks();
const [colorId, setColorId] = useState<string>('');
const [colorValue, setColorValue] = useState('#000000');
const [rgba, setRgba] = useState<{ r: number; g: number; b: number; a?: number }>({
@@ -80,7 +80,7 @@ export function ThemeEditor({
} else if (font && !customFontEnabled) {
setDesignerTheme({
...designerTheme,
themeFont: currentUser.defaultFont || 'Jost',
themeFont: settings.defaultFont || 'Jost',
});
}
}, [font]);

6
src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeModalContent.tsx
View File

@@ -5,7 +5,7 @@ import { selectClasses, textClasses } from 'styles';
import type { Theme } from 'types';
export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
const { currentUser, textShadowStyle, largeTextShadowStyle } = useCommonHooks();
const { settings, textShadowStyle, largeTextShadowStyle } = useCommonHooks();
return (
<Stack
style={{
@@ -31,7 +31,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
'--mantine-color-border-0': selectedTheme?.borderColor,
'--mantine-color-search-0': selectedTheme?.searchColor,
transition: 'all 0.2s ease',
fontFamily: selectedTheme.themeFont ?? currentUser.defaultFont,
fontFamily: selectedTheme.themeFont ?? settings.defaultFont,
}}
align='center'
gap={0}
@@ -47,7 +47,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
color: selectedTheme?.primaryColor,
borderBottom: `thin solid ${selectedTheme?.borderColor}`,
backgroundColor: `color-mix(in srgb, ${selectedTheme?.searchColor}, transparent 50%)`,
fontFamily: selectedTheme.themeFont ?? currentUser.defaultFont,
fontFamily: selectedTheme.themeFont ?? settings.defaultFont,
},
}}
data={[

8
src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeOptions.tsx
View File

@@ -35,7 +35,7 @@ export default function ThemeOptions({
duplicate: boolean;
randomColor: (withAlpha?: boolean) => string;
}) {
const { currentUser } = useCommonHooks();
const { settings } = useCommonHooks();
return (
<Stack h={'100%'} justify='space-between' align='center' gap={4}>
<Stack w={'100%'} align='center' gap={0} h={'min-content'}>
@@ -137,7 +137,7 @@ export default function ThemeOptions({
onClick={() => {
setCustomFontEnabled(!customFontEnabled);
setFont(
customFontEnabled ? currentUser.defaultFont : defaultTheme.themeFont,
customFontEnabled ? settings.defaultFont : defaultTheme.themeFont,
);
}}
style={{
@@ -163,7 +163,7 @@ export default function ThemeOptions({
autoLoad
defaultValue={
designerTheme.themeFont === null
? currentUser.defaultFont
? settings.defaultFont
: designerTheme.themeFont
}
value={(pickerFont: string) => {
@@ -183,7 +183,7 @@ export default function ThemeOptions({
color={'red'}
size={32}
onClick={() => {
setFont(currentUser.defaultFont);
setFont(settings.defaultFont);
setCustomFontEnabled(false);
}}
style={{

43
src/pages/settings/components/Theming/Themes/Themes.tsx
View File

@@ -84,15 +84,7 @@ export function Themes() {
),
] as string[];
const {
currentTheme,
currentUser,
setCurrentTheme,
theme,
isMobile,
currentThemePlaylist,
setCurrentThemePlaylist,
} = useCommonHooks();
const { settings, updateSetting, theme, isMobile } = useCommonHooks();
const [selectedTheme, setSelectedTheme] = useState<Theme>({
id: undefined,
@@ -106,7 +98,7 @@ export function Themes() {
randomEnabled: 1,
textShadowsEnabled: 0,
appShadowsEnabled: 0,
themeFont: currentUser.defaultFont,
themeFont: settings.defaultFont,
});
const [isLoading, setIsLoading] = useState(false);
const [isNew, setIsNew] = useState(false);
@@ -184,7 +176,7 @@ export function Themes() {
>
<Overlay
display={
currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'
settings.theme === 'random' && debouncedSearch === '' ? 'flex' : 'none'
}
blur={5}
style={{
@@ -199,7 +191,7 @@ export function Themes() {
{allThemes?.length > 0 ? (
allThemes.map((cardTheme: Theme) => (
<Group key={cardTheme.name} pos={'relative'}>
{cardTheme.name === currentTheme && (
{cardTheme.name === settings.theme && (
<FiChevronRight
style={{
position: 'absolute',
@@ -219,11 +211,12 @@ export function Themes() {
<Box
style={{
zIndex:
currentTheme === 'random' &&
settings.theme === 'random' &&
(themePlaylists
.find(
(t: ThemePlaylist) =>
t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
t.name.toLowerCase() ===
settings.currentThemePlaylist.toLowerCase(),
)
?.themeList.includes(`${cardTheme.id}`) ||
cardTheme.name === theme.name)
@@ -310,7 +303,9 @@ export function Themes() {
fontSize: isMobile ? '.8rem' : '1.2rem',
}}
>
{currentThemePlaylist === 'All' ? 'All' : currentThemePlaylist}
{settings.currentThemePlaylist === 'All'
? 'All'
: settings.currentThemePlaylist}
</Text>
</Group>
<Divider
@@ -320,13 +315,13 @@ export function Themes() {
/>
<Button
onClick={() => {
if (currentThemePlaylist === 'All') {
if (settings.currentThemePlaylist === 'All') {
void navigate(
`/${import.meta.env.VITE_BASE_URL}/settings/themePlaylists`,
);
} else {
setCurrentThemePlaylist('All');
setCurrentTheme(theme.name);
updateSetting('currentThemePlaylist', 'All');
updateSetting('theme', theme.name);
}
}}
style={{
@@ -334,7 +329,7 @@ export function Themes() {
padding: isMobile ? 0 : undefined,
}}
>
{currentThemePlaylist === 'All' ? (
{settings.currentThemePlaylist === 'All' ? (
isMobile ? (
<FiMousePointer />
) : (
@@ -350,11 +345,11 @@ export function Themes() {
className={toolTipClasses.default}
classNames={toolTipClasses}
label='Shuffle is always on when a playlist is active.'
disabled={currentThemePlaylist === 'All'}
disabled={settings.currentThemePlaylist === 'All'}
>
<Group>
<Switch
disabled={currentThemePlaylist !== 'All'}
disabled={settings.currentThemePlaylist !== 'All'}
label={
isMobile ? (
<FaDice size={20} color={'var(--mantine-color-primary-0)'} />
@@ -363,10 +358,10 @@ export function Themes() {
)
}
labelPosition='left'
checked={currentTheme === 'random'}
checked={settings.theme === 'random'}
onChange={(e) => {
setCurrentTheme(e.target.checked ? 'random' : theme.name);
setCurrentThemePlaylist('All');
updateSetting('theme', e.target.checked ? 'random' : theme.name);
updateSetting('currentThemePlaylist', 'All');
}}
className={switchClasses.default}
classNames={switchClasses}

6
src/pages/settings/components/WoL/DebouncedWolClient.tsx
View File

@@ -28,7 +28,11 @@ function DebouncedWolClient({
useEffect(() => {
if (debounced && Object.keys(debounced).length) {
mutateAsync({ method: 'PATCH', endpoint: 'api/WolClients', body: debounced });
mutateAsync({ method: 'PATCH', endpoint: 'api/WolClients', body: debounced }).catch(
(error) => {
console.error(error);
},
);
}
}, [debounced]);

4
src/pages/settings/components/WoL/WolClients.tsx
View File

@@ -99,10 +99,12 @@ export function WolClients() {
body={
<form
onSubmit={form.onSubmit((values) => {
void mutateAsync({
mutateAsync({
method: 'POST',
endpoint: endpoint,
body: values,
}).catch((error) => {
console.error(error);
});
handleClose();
})}