From 535cb1b3592ca56c651f3fb9cdb44000a54fcd58 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Thu, 7 Mar 2024 01:12:35 +0100
Subject: [PATCH] Fix/save active device only in local storage (#643)
* Save "activeDevice" in the local storage
* Set default back to for "DeviceSetting"
---
src/App.tsx | 144 +++++++++-------------
src/components/context/AppContext.tsx | 15 ++-
src/components/settings/DeviceSetting.tsx | 23 ++--
src/typings.ts | 1 -
src/util/device.ts | 7 ++
src/util/metadata.ts | 1 -
src/util/metadataServerSettings.ts | 1 -
7 files changed, 92 insertions(+), 100 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index da8af5f4..0eb03723 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,9 +6,9 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
-import { Box, Container } from '@mui/material';
+import { Container } from '@mui/material';
import CssBaseline from '@mui/material/CssBaseline';
-import React, { useEffect, useLayoutEffect, useMemo } from 'react';
+import React, { useLayoutEffect } from 'react';
import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
import { loadErrorMessages, loadDevMessages } from '@apollo/client/dev';
import { AppContext } from '@/components/context/AppContext';
@@ -38,8 +38,6 @@ import { requestManager } from '@/lib/requests/RequestManager.ts';
import { BrowseSettings } from '@/screens/settings/BrowseSettings.tsx';
import { WebUISettings } from '@/screens/settings/WebUISettings.tsx';
import { Migrate } from '@/screens/Migrate.tsx';
-import { useMetadataServerSettings } from '@/util/metadataServerSettings.ts';
-import { getActiveDevice, setActiveDevice } from '@/util/device.ts';
import { DeviceSetting } from '@/components/settings/DeviceSetting.tsx';
if (process.env.NODE_ENV !== 'production') {
@@ -72,88 +70,68 @@ const BackgroundSubscriptions = () => {
return null;
};
-const ActiveDeviceListener = ({ children }: { children?: React.ReactNode }) => {
- const {
- settings: { devices, activeDevice },
- } = useMetadataServerSettings();
-
- useEffect(() => {
- if (activeDevice === getActiveDevice()) {
- return;
- }
-
- setActiveDevice(activeDevice);
- }, [devices, activeDevice]);
-
- const memorizedChildren = useMemo(() => children, [activeDevice]);
-
- return {memorizedChildren};
-};
-
export const App: React.FC = () => (
-
-
-
-
-
-
-
-
- {/* General Routes */}
- } />
-
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
-
-
- {/* Manga Routes */}
-
-
- } />
- } />
- } />
- } />
-
- } />
-
-
- } />
-
- } />
- } />
- } />
- } />
-
- } />
- } />
-
-
-
+
+
+
+
+
+
- } />
-
+ {/* General Routes */}
+ } />
+
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
+ {/* Manga Routes */}
+
+
+ } />
+ } />
+ } />
+ } />
+
+ } />
+
+
+ } />
+
+ } />
+ } />
+ } />
+ } />
+
+ } />
+ } />
+
-
+
+
+ } />
+
+
);
diff --git a/src/components/context/AppContext.tsx b/src/components/context/AppContext.tsx
index 9e2193b4..0a713223 100644
--- a/src/components/context/AppContext.tsx
+++ b/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 = ({ children }) => {
const [darkTheme, setDarkTheme] = useLocalStorage('darkTheme', true);
+ const [activeDevice, setActiveDeviceContext] = useLocalStorage('activeDevice', DEFAULT_DEVICE);
const darkThemeContext = useMemo(
() => ({
@@ -32,8 +34,15 @@ export const AppContext: React.FC = ({ children }) => {
[darkTheme],
);
+ const activeDeviceContext = useMemo(
+ () => ({ activeDevice, setActiveDevice: setActiveDeviceContext }),
+ [activeDevice],
+ );
+
const theme = useMemo(() => createTheme(darkTheme), [darkTheme]);
+ setActiveDevice(activeDevice);
+
return (
@@ -41,7 +50,11 @@ export const AppContext: React.FC = ({ children }) => {
- {children}
+
+
+ {children}
+
+
diff --git a/src/components/settings/DeviceSetting.tsx b/src/components/settings/DeviceSetting.tsx
index b1c6a5ed..a13f6b24 100644
--- a/src/components/settings/DeviceSetting.tsx
+++ b/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 (
+ const { activeDevice, setActiveDevice } = useContext(ActiveDevice);
+
+ const updateMetadataSetting = (
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 = () => {