Fix/save active device only in local storage (#643)

* Save "activeDevice" in the local storage

* Set default back to for "DeviceSetting"

src/components/context/AppContext.tsx

@@ -16,6 +16,7 @@ import { useLocalStorage } from '@/util/useLocalStorage';
 import { DarkTheme } from '@/components/context/DarkTheme';
 import { NavBarContextProvider } from '@/components/navbar/NavBarContextProvider';
 import { LibraryOptionsContextProvider } from '@/components/library/LibraryOptionsProvider';
+import { ActiveDevice, DEFAULT_DEVICE, setActiveDevice } from '@/util/device.ts';
 
 interface Props {
     children: React.ReactNode;
@@ -23,6 +24,7 @@ interface Props {
 
 export const AppContext: React.FC<Props> = ({ children }) => {
     const [darkTheme, setDarkTheme] = useLocalStorage<boolean>('darkTheme', true);
+    const [activeDevice, setActiveDeviceContext] = useLocalStorage('activeDevice', DEFAULT_DEVICE);
 
     const darkThemeContext = useMemo(
         () => ({
@@ -32,8 +34,15 @@ export const AppContext: React.FC<Props> = ({ children }) => {
         [darkTheme],
     );
 
+    const activeDeviceContext = useMemo(
+        () => ({ activeDevice, setActiveDevice: setActiveDeviceContext }),
+        [activeDevice],
+    );
+
     const theme = useMemo(() => createTheme(darkTheme), [darkTheme]);
 
+    setActiveDevice(activeDevice);
+
     return (
         <Router>
             <StyledEngineProvider injectFirst>
@@ -41,7 +50,11 @@ export const AppContext: React.FC<Props> = ({ children }) => {
                     <DarkTheme.Provider value={darkThemeContext}>
                         <QueryParamProvider adapter={ReactRouter6Adapter}>
                             <LibraryOptionsContextProvider>
-                                <NavBarContextProvider>{children}</NavBarContextProvider>
+                                <NavBarContextProvider>
+                                    <ActiveDevice.Provider value={activeDeviceContext}>
+                                        {children}
+                                    </ActiveDevice.Provider>
+                                </NavBarContextProvider>
                             </LibraryOptionsContextProvider>
                         </QueryParamProvider>
                     </DarkTheme.Provider>

src/components/settings/DeviceSetting.tsx

@@ -14,13 +14,15 @@ import { MetadataServerSettingKeys, MetadataServerSettings } from '@/typings.ts'
 import { convertToGqlMeta, requestUpdateServerMetadata } from '@/util/metadata.ts';
 import { makeToast } from '@/components/util/Toast.tsx';
 import { MutableListSetting } from '@/components/settings/MutableListSetting.tsx';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
-import { DEFAULT_DEVICE } from '@/util/device.ts';
+import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
+import { ActiveDevice, DEFAULT_DEVICE } from '@/util/device.ts';
 
 export const DeviceSetting = () => {
     const { t } = useTranslation();
     const { setTitle, setAction } = useContext(NavBarContext);
 
+    useSetDefaultBackTo('settings');
+
     useEffect(() => {
         setTitle(t('settings.device.title.settings'));
         setAction(null);
@@ -33,10 +35,12 @@ export const DeviceSetting = () => {
 
     const {
         metadata,
-        settings: { devices, activeDevice },
+        settings: { devices },
     } = useMetadataServerSettings();
 
-    const updateMetadataSetting = async <Setting extends MetadataServerSettingKeys>(
+    const { activeDevice, setActiveDevice } = useContext(ActiveDevice);
+
+    const updateMetadataSetting = <Setting extends MetadataServerSettingKeys>(
         setting: Setting,
         value: MetadataServerSettings[Setting],
     ) => {
@@ -46,14 +50,7 @@ export const DeviceSetting = () => {
 
         const wasActiveDeviceDeleted = setting === 'devices' && !(value as string[]).includes(activeDevice);
         if (wasActiveDeviceDeleted) {
-            try {
-                await requestUpdateServerMetadata(convertToGqlMeta(metadata) ?? [], [
-                    ['activeDevice', convertSettingsToMetadata({ activeDevice: DEFAULT_DEVICE }).activeDevice],
-                ]);
-            } catch (e) {
-                makeToast(t('global.error.label.failed_to_save_changes'), 'error');
-                return;
-            }
+            setActiveDevice(DEFAULT_DEVICE);
         }
 
         requestUpdateServerMetadata(convertToGqlMeta(metadata) ?? [], [
@@ -82,7 +79,7 @@ export const DeviceSetting = () => {
                 <Select
                     MenuProps={{ PaperProps: { style: { maxHeight: 150 } } }}
                     value={activeDevice}
-                    onChange={({ target: { value: device } }) => updateMetadataSetting('activeDevice', device)}
+                    onChange={({ target: { value: device } }) => setActiveDevice(device)}
                 >
                     {devices.map((device) => (
                         <MenuItem key={device} value={device}>