From e55982471819e3e42da57f01f2cd518e032d24ca Mon Sep 17 00:00:00 2001
From: Patrick Loser <69157453+CD-Z@users.noreply.github.com>
Date: Tue, 20 Dec 2022 17:09:30 +0100
Subject: [PATCH] feat: FAB for Last Read Chapter in Library (#500)

* chapter drawer themed textcolor

* added FAB to Library screen + some insets

* Added Settings butten

Co-authored-by: Patrick <patrick.los@proton.me>
---
 src/components/SearchbarV2/SearchbarV2.tsx    |  6 ++-
 src/redux/settings/settings.reducer.js        |  1 +
 src/screens/library/LibraryScreen.tsx         | 41 ++++++++++++++++++-
 src/screens/novel/NovelScreen.js              |  7 +++-
 src/screens/settings/SettingsGeneralScreen.js |  9 ++++
 src/utils/constants/settings.ts               |  1 +
 6 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/src/components/SearchbarV2/SearchbarV2.tsx b/src/components/SearchbarV2/SearchbarV2.tsx
index 50035f06..e096c2f2 100644
--- a/src/components/SearchbarV2/SearchbarV2.tsx
+++ b/src/components/SearchbarV2/SearchbarV2.tsx
@@ -40,8 +40,10 @@ const Searchbar: React.FC<SearcbarProps> = ({
   const searchbarRef = useRef<any>(null);
   const focusSearchbar = () => searchbarRef.current.focus();
 
-  const { top } = useSafeAreaInsets();
+  const { top, right, left } = useSafeAreaInsets();
   const marginTop = top + 8;
+  const marginRight = right + 16;
+  const marginLeft = left + 16;
 
   return (
     <View
@@ -49,6 +51,8 @@ const Searchbar: React.FC<SearcbarProps> = ({
         styles.searchbarContainer,
         {
           marginTop,
+          marginRight,
+          marginLeft,
           backgroundColor: color(theme.primary).alpha(0.08).string(),
         },
       ]}
diff --git a/src/redux/settings/settings.reducer.js b/src/redux/settings/settings.reducer.js
index b778a5d2..75496a27 100644
--- a/src/redux/settings/settings.reducer.js
+++ b/src/redux/settings/settings.reducer.js
@@ -31,6 +31,7 @@ export const initialState = {
    */
 
   downloadedOnlyMode: false,
+  useLibraryFAB: false,
 
   /**
    * Browse settings
diff --git a/src/screens/library/LibraryScreen.tsx b/src/screens/library/LibraryScreen.tsx
index 90207a6b..97724df9 100644
--- a/src/screens/library/LibraryScreen.tsx
+++ b/src/screens/library/LibraryScreen.tsx
@@ -20,7 +20,7 @@ import { useLibrary } from './hooks/useLibrary';
 import { useTheme } from '@hooks/useTheme';
 import useSearch from '@hooks/useSearch';
 import { getString } from '@strings/translations';
-import { Portal } from 'react-native-paper';
+import { FAB, Portal } from 'react-native-paper';
 import { useLibrarySettings } from '@hooks/useSettings';
 import {
   markAllChaptersRead,
@@ -32,6 +32,10 @@ import useBoolean from '@hooks/useBoolean';
 import { debounce, intersection } from 'lodash';
 import { ButtonVariation } from '@components/Button/Button';
 import { useBackHandler } from '@hooks/useBackHandler';
+import { openChapter } from '@utils/handleNavigateParams';
+import useHistory from '@hooks/useHistory';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSettings } from '@hooks/reduxHooks';
 
 type State = NavigationState<{
   key: string;
@@ -48,6 +52,12 @@ const LibraryScreen = () => {
     incognitoMode = false,
   } = useLibrarySettings();
 
+  const { useLibraryFAB = false } = useSettings();
+
+  const { isLoading: isHistoryLoading, history, error } = useHistory();
+
+  const { right: rightInset } = useSafeAreaInsets();
+
   const onChangeText = debounce((text: string) => {
     setSearchText(text);
   }, 100);
@@ -222,6 +232,29 @@ const LibraryScreen = () => {
         onIndexChange={setIndex}
         initialLayout={{ width: layout.width }}
       />
+      {useLibraryFAB &&
+        !isHistoryLoading &&
+        history &&
+        history.length !== 0 &&
+        !error && (
+          <FAB
+            style={[
+              styles.fab,
+              { backgroundColor: theme.primary, marginRight: rightInset + 16 },
+            ]}
+            small
+            color={theme.onPrimary}
+            uppercase={false}
+            label={'Resume'}
+            icon="play"
+            onPress={() => {
+              navigate(
+                'Chapter' as never,
+                openChapter(history[0], history[0]) as never,
+              );
+            }}
+          />
+        )}
       <SetCategoryModal
         novelId={selectedNovelIds}
         currentCategoryIds={selectedNovelCategoryIds}
@@ -285,4 +318,10 @@ const styles = StyleSheet.create({
   globalSearchBtnLabel: {
     fontWeight: 'bold',
   },
+  fab: {
+    position: 'absolute',
+    margin: 16,
+    right: 0,
+    bottom: 0,
+  },
 });
diff --git a/src/screens/novel/NovelScreen.js b/src/screens/novel/NovelScreen.js
index 32b8e1f3..1f50226a 100644
--- a/src/screens/novel/NovelScreen.js
+++ b/src/screens/novel/NovelScreen.js
@@ -73,7 +73,7 @@ const Novel = ({ route, navigation }) => {
 
   const theme = useTheme();
   const dispatch = useDispatch();
-  const { top: topInset } = useSafeAreaInsets();
+  const { top: topInset, bottom: bottomInset } = useSafeAreaInsets();
   const progressViewOffset = topInset + 32;
 
   const { novel, chapters, loading, updating } = useNovel();
@@ -652,7 +652,10 @@ const Novel = ({ route, navigation }) => {
           chapters.length > 0 &&
           lastReadChapter && (
             <FAB
-              style={[styles.fab, { backgroundColor: theme.primary }]}
+              style={[
+                styles.fab,
+                { backgroundColor: theme.primary, marginBottom: bottomInset },
+              ]}
               small
               color={theme.onPrimary}
               uppercase={false}
diff --git a/src/screens/settings/SettingsGeneralScreen.js b/src/screens/settings/SettingsGeneralScreen.js
index 6860228a..583b20e8 100644
--- a/src/screens/settings/SettingsGeneralScreen.js
+++ b/src/screens/settings/SettingsGeneralScreen.js
@@ -35,6 +35,7 @@ const GenralSettings = ({ navigation }) => {
     defaultChapterSort = 'ORDER BY chapterId ASC',
     refreshNovelMetadata = false,
     disableHapticFeedback = false,
+    useLibraryFAB = false,
   } = useSettings();
 
   const { showLastUpdateTime = true } = useSelector(
@@ -83,6 +84,14 @@ const GenralSettings = ({ navigation }) => {
             }
             theme={theme}
           />
+          <SwitchSetting
+            label="Use FAB in Library"
+            value={useLibraryFAB}
+            onPress={() =>
+              dispatch(setAppSettings('useLibraryFAB', !useLibraryFAB))
+            }
+            theme={theme}
+          />
           <List.Divider theme={theme} />
           <List.SubHeader theme={theme}>Novel</List.SubHeader>
           <List.Item
diff --git a/src/utils/constants/settings.ts b/src/utils/constants/settings.ts
index 244bd68b..e4982bb7 100644
--- a/src/utils/constants/settings.ts
+++ b/src/utils/constants/settings.ts
@@ -14,6 +14,7 @@ export interface LibrarySettings {
   novelsPerRow?: number;
   incognitoMode?: boolean;
   downloadedOnlyMode?: boolean;
+  useLibraryFAB?: boolean;
 }
 
 export interface CategorySettings {