Save reader settings per manga in Meta (#216)

* [#213] Add missing "meta" property

- IManga
- IMangaCard (optional)
- IChapter
- ICategory

* [#213] Add util functions for handling metadata

- global server
- manga
- chapter
- category

* [#213] Use "ReaderSettings" from the manga metadata

- get ReaderSettings from manga metadata
- remove unnecessary check "make sure settings has all the keys"
    in case the stored settings in the metadata are outdated they will be filled with default values

* [#213] Reload manga only in case "mangaId" changed

In case the chapter is still from the same manga, a reload is unnecessary

* [#213] Only update the changed reader setting

Otherwise the app has to send patch requests to the server for every setting even if it didn't change

* [#213] Hide "openButton" on first render in case "navBar" is shown

The "openButton" was always set to be visible event in case the navBar was shown on the first render

* [#213] Open the "ReaderNavBar" if needed after receiving new settings

Otherwise, the drawer won't open in case the "navBar" was hidden on the first render since the default state in that case was set to false

* [#213] Update "ReaderSettings" after receiving the manga response

Otherwise, the default settings aren't getting removed

* [#213] Hide/Show "OpenButton" when opening/closing the drawer

Otherwise, the button stays hidden until it gets updated due to scrolling

* [#213] Keep "ReaderNavBar" state when opening prev/next chapter

In case the navBar wasn't sticky but opened, it got closed when the prev/next chapter got opened

* [#213] Prevent "ReaderNavBar" from closing when changing "staticNav" setting

src/screens/Reader.tsx

@@ -15,12 +15,13 @@ import PageNumber from 'components/reader/PageNumber';
 import PagedPager from 'components/reader/pager/PagedPager';
 import DoublePagedPager from 'components/reader/pager/DoublePagedPager';
 import VerticalPager from 'components/reader/pager/VerticalPager';
-import ReaderNavBar, { defaultReaderSettings } from 'components/navbar/ReaderNavBar';
+import ReaderNavBar, { getReaderSettingsFor } from 'components/navbar/ReaderNavBar';
 import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
-import cloneObject from 'util/cloneObject';
 import { Box } from '@mui/system';
+import { requestUpdateMangaMetadata } from 'util/metadata';
+import makeToast from '../components/util/Toast';
 
 const getReaderComponent = (readerType: ReaderType) => {
     switch (readerType) {
@@ -57,8 +58,6 @@ const initialChapter = () => ({
 });
 
 export default function Reader() {
-    const [settings, setSettings] = useLocalStorage<IReaderSettings>('readerSettings', defaultReaderSettings);
-
     const history = useHistory();
 
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
@@ -69,20 +68,14 @@ export default function Reader() {
     const [curPage, setCurPage] = useState<number>(0);
     const { setOverride, setTitle } = useContext(NavbarContext);
 
-    useEffect(() => {
-        // make sure settings has all the keys
-        const settingsClone = cloneObject(settings) as any;
-        const defualtSettings = defaultReaderSettings();
-        let shouldUpdateSettings = false;
-        Object.keys(defualtSettings).forEach((key) => {
-            const keyOf = key as keyof IReaderSettings;
-            if (settings[keyOf] === undefined) {
-                settingsClone[keyOf] = defualtSettings[keyOf];
-                shouldUpdateSettings = true;
-            }
-        });
-        if (shouldUpdateSettings) { setSettings(settingsClone); }
+    const [settings, setSettings] = useState(getReaderSettingsFor(manga));
 
+    const setSettingValue = (key: keyof IReaderSettings, value: string | boolean) => {
+        setSettings({ ...settings, [key]: value });
+        requestUpdateMangaMetadata(manga, [[key, value]]).catch(() => makeToast('Failed to save the reader settings to the server', 'warning'));
+    };
+
+    useEffect(() => {
         // set the custom navbar
         setOverride(
             {
@@ -90,7 +83,7 @@ export default function Reader() {
                 value: (
                     <ReaderNavBar
                         settings={settings}
-                        setSettings={setSettings}
+                        setSettingValue={setSettingValue}
                         manga={manga}
                         chapter={chapter as IChapter}
                         curPage={curPage}
@@ -110,8 +103,9 @@ export default function Reader() {
             .then((data: IManga) => {
                 setManga(data);
                 setTitle(data.title);
+                setSettings(getReaderSettingsFor(data));
             });
-    }, [chapterIndex]);
+    }, [mangaId]);
 
     useEffect(() => {
         setChapter(initialChapter);