add logic for metadata migration (#218)

* [#215] Handle metadata migration

Makes it possible to change "metadata keys" and the "app metadata key prefix" without losing data

* [#215] Fix checking and handling missing reader settings in metadata

With the new migration logic missing reader settings couldn't be detected anymore in case the metadata included outdated app metadata keys for the reader settings.

* [#215] Fix name of "IReaderSettings" property

src/components/navbar/ReaderNavBar.tsx

@@ -256,7 +256,7 @@ export default function ReaderNavBar(props: IProps) {
                             setSettingValue={updateSettingValue}
                             staticNav={settings.staticNav}
                             showPageNumber={settings.showPageNumber}
-                            loadNextonEnding={settings.loadNextonEnding}
+                            loadNextOnEnding={settings.loadNextOnEnding}
                             readerType={settings.readerType}
                         />
                     </Collapse>

src/components/reader/ReaderSettingsOptions.tsx

@@ -19,7 +19,7 @@ interface IProps extends IReaderSettings {
 }
 
 export default function ReaderSettingsOptions({
-    staticNav, loadNextonEnding, readerType, showPageNumber, setSettingValue,
+    staticNav, loadNextOnEnding, readerType, showPageNumber, setSettingValue,
 }: IProps) {
     return (
         <>
@@ -49,8 +49,8 @@ export default function ReaderSettingsOptions({
                     <ListItemSecondaryAction>
                         <Switch
                             edge="end"
-                            checked={loadNextonEnding}
-                            onChange={(e) => setSettingValue('loadNextonEnding', e.target.checked)}
+                            checked={loadNextOnEnding}
+                            onChange={(e) => setSettingValue('loadNextOnEnding', e.target.checked)}
                         />
                     </ListItemSecondaryAction>
                 </ListItem>

src/components/reader/pager/DoublePagedPager.tsx

@@ -102,7 +102,7 @@ export default function DoublePagedPager(props: IReaderProps) {
         if (curPage < pages.length - 1) {
             const nextCurPage = curPage + pagesDisplayed.current;
             setCurPage((nextCurPage >= pages.length) ? pages.length - 1 : nextCurPage);
-        } else if (settings.loadNextonEnding) {
+        } else if (settings.loadNextOnEnding) {
             nextChapter();
         }
     }

src/components/reader/pager/HorizontalPager.tsx

@@ -42,7 +42,7 @@ export default function HorizontalPager(props: IReaderProps) {
         if (curPage < pages.length - 1) {
             pagesRef.current[curPage + 1]?.scrollIntoView({ inline: 'center' });
             setCurPage((page) => page + 1);
-        } else if (settings.loadNextonEnding) {
+        } else if (settings.loadNextOnEnding) {
             nextChapter();
         }
     }
@@ -126,7 +126,7 @@ export default function HorizontalPager(props: IReaderProps) {
     }, [selfRef]);
 
     useEffect(() => {
-        if (settings.loadNextonEnding) {
+        if (settings.loadNextOnEnding) {
             document.addEventListener('scroll', handleLoadNextonEnding);
         }
         selfRef.current?.addEventListener('mousedown', clickControl);

src/components/reader/pager/PagedPager.tsx

@@ -24,7 +24,7 @@ export default function PagedReader(props: IReaderProps) {
     function nextPage() {
         if (curPage < pages.length - 1) {
             changePage(curPage + 1);
-        } else if (settings.loadNextonEnding) {
+        } else if (settings.loadNextOnEnding) {
             nextChapter();
         }
     }

src/components/reader/pager/VerticalPager.tsx

@@ -55,7 +55,7 @@ export default function VerticalPager(props: IReaderProps) {
                 setCurPage(currentPageRef.current);
 
                 // Go to next chapter if configured to and at bottom
-                if (settings.loadNextonEnding) {
+                if (settings.loadNextOnEnding) {
                     nextChapter();
                 }
             } else {
@@ -72,7 +72,7 @@ export default function VerticalPager(props: IReaderProps) {
         return () => {
             window.removeEventListener('scroll', handleScroll);
         };
-    }, [settings.loadNextonEnding]);
+    }, [settings.loadNextOnEnding]);
 
     const go = useCallback((direction: 'up' | 'down') => {
         if (direction === 'down' && isAtBottom()) {