From d230b64846fd5fdf28cee937525824d9e46dcfeb Mon Sep 17 00:00:00 2001 From: Rajarshee Chatterjee Date: Sun, 16 May 2021 18:44:37 +0530 Subject: [PATCH] Refactor settings and minor fixes --- src/Components/List.js | 1 - src/Components/NovelCover.js | 6 +- src/Components/NovelList.js | 18 +- src/Components/Searchbar.js | 6 +- src/Components/ThemedComponents.js | 12 +- src/Hooks/reduxHooks.js | 4 +- src/Navigators/BottomNavigator.js | 1 - src/Navigators/Main.js | 2 +- src/Navigators/More.js | 48 ++++- .../components/GlobalSearchNovelCover.js | 2 +- src/Screens/Chapter/components/ReaderSheet.js | 34 ++-- src/Screens/More/AdvancedSettings.js | 39 ++++ src/Screens/More/BackupSettings.js | 54 ++++++ src/Screens/More/GeneralSettings.js | 107 +++++++++++ src/Screens/More/More.js | 13 +- src/Screens/More/ReaderSettings.js | 20 ++ src/Screens/More/Settings.js | 171 +++++------------- .../More/{Trackers.js => TrackerSettings.js} | 0 .../More/components/DisplayModeModal.js | 13 +- src/Screens/More/components/GridSizeModal.js | 23 +-- src/Screens/More/components/ThemeModal.js | 10 +- src/redux/settings/settings.actions.js | 60 ++---- src/redux/settings/settings.reducer.js | 81 ++++----- src/redux/settings/settings.types.js | 12 +- 24 files changed, 432 insertions(+), 305 deletions(-) create mode 100644 src/Screens/More/AdvancedSettings.js create mode 100644 src/Screens/More/BackupSettings.js create mode 100644 src/Screens/More/GeneralSettings.js create mode 100644 src/Screens/More/ReaderSettings.js rename src/Screens/More/{Trackers.js => TrackerSettings.js} (100%) diff --git a/src/Components/List.js b/src/Components/List.js index b57e7eee..60f38a71 100644 --- a/src/Components/List.js +++ b/src/Components/List.js @@ -25,7 +25,6 @@ const ListItem = ({ }) => ( { const theme = useTheme(); - const { displayMode, itemsPerRow } = useSettings(); + const { displayMode, novelsPerRow } = useSettings(); const height = { 1: 550, @@ -83,7 +83,7 @@ const NovelCover = ({ item, onPress, libraryStatus }) => { ); return displayMode !== 2 ? ( - + { <> { - const { displayMode, itemsPerRow } = useSettings(); - const getItemsPerRow = () => { - if (displayMode === 2) { - return 1; - } else { - return itemsPerRow; - } - }; + const { displayMode, novelsPerRow } = useSettings(); + + const getNovelsPerRow = () => (displayMode === 2 ? 1 : novelsPerRow); return ( item.novelUrl} renderItem={renderItem} diff --git a/src/Components/Searchbar.js b/src/Components/Searchbar.js index dc2c8c4b..432e0380 100644 --- a/src/Components/Searchbar.js +++ b/src/Components/Searchbar.js @@ -4,7 +4,7 @@ import { TouchableRipple, IconButton } from "react-native-paper"; import Constants from "expo-constants"; import { useSettings } from "../Hooks/reduxHooks"; import { useDispatch } from "react-redux"; -import { setDisplayMode } from "../redux/settings/settings.actions"; +import { setAppSettings } from "../redux/settings/settings.actions"; export const Searchbar = ({ theme, @@ -89,7 +89,9 @@ export const Searchbar = ({ style={{ marginRight: 0 }} size={23} onPress={() => - dispatch(setDisplayMode(getDisplayMode())) + dispatch( + setAppSettings("displayMode", getDisplayMode()) + ) } /> )} diff --git a/src/Components/ThemedComponents.js b/src/Components/ThemedComponents.js index 37d39b9c..dba6b4b6 100644 --- a/src/Components/ThemedComponents.js +++ b/src/Components/ThemedComponents.js @@ -1,8 +1,12 @@ import React from "react"; -import { View, Text as RNText, Image, StyleSheet } from "react-native"; +import { View, Text, Image, StyleSheet } from "react-native"; -const Text = () => {}; +const ScreenContainer = ({ children, theme }) => ( + + {children} + +); -export default UpdateCard; +export { ScreenContainer }; -const styles = StyleSheet.create({}); +// const styles = StyleSheet.create({}); diff --git a/src/Hooks/reduxHooks.js b/src/Hooks/reduxHooks.js index 25866dab..e7d866ac 100644 --- a/src/Hooks/reduxHooks.js +++ b/src/Hooks/reduxHooks.js @@ -13,11 +13,11 @@ const useReaderSettings = () => { }; const useSettings = () => { - const { displayMode, itemsPerRow } = useSelector( + const { displayMode, novelsPerRow } = useSelector( (state) => state.settingsReducer ); - return { displayMode, itemsPerRow }; + return { displayMode, novelsPerRow }; }; const useLibrary = () => { diff --git a/src/Navigators/BottomNavigator.js b/src/Navigators/BottomNavigator.js index a6ebdc44..274cdd98 100644 --- a/src/Navigators/BottomNavigator.js +++ b/src/Navigators/BottomNavigator.js @@ -16,7 +16,6 @@ const BottomNavigator = () => { return ( diff --git a/src/Navigators/Main.js b/src/Navigators/Main.js index 4510ad62..5526b835 100644 --- a/src/Navigators/Main.js +++ b/src/Navigators/Main.js @@ -34,7 +34,7 @@ const MainNavigator = () => { return ( - + {isNewVersion && } { + const theme = useTheme(); + + return ( + + + + + + + + + + + ); +}; + const MoreStack = () => { const theme = useTheme(); return ( - + - - + diff --git a/src/Screens/Browse/components/GlobalSearchNovelCover.js b/src/Screens/Browse/components/GlobalSearchNovelCover.js index 81594490..cf2e02ad 100644 --- a/src/Screens/Browse/components/GlobalSearchNovelCover.js +++ b/src/Screens/Browse/components/GlobalSearchNovelCover.js @@ -2,7 +2,7 @@ import React from "react"; import { StyleSheet, View, Text, ImageBackground } from "react-native"; import { TouchableRipple } from "react-native-paper"; -import { useSettings, useTheme } from "../../../Hooks/reduxHooks"; +import { useTheme } from "../../../Hooks/reduxHooks"; const GlobalSearchNovelCover = ({ item, onPress, libraryStatus }) => { const theme = useTheme(); diff --git a/src/Screens/Chapter/components/ReaderSheet.js b/src/Screens/Chapter/components/ReaderSheet.js index 19cbf2a8..228b40c7 100644 --- a/src/Screens/Chapter/components/ReaderSheet.js +++ b/src/Screens/Chapter/components/ReaderSheet.js @@ -5,13 +5,7 @@ import Slider from "@react-native-community/slider"; import Bottomsheet from "rn-sliding-up-panel"; import { fonts } from "../../../Services/utils/constants"; -import { - setReaderFont, - updateReaderPadding, - updateReaderTextAlign, - updateReaderTextSize, - updateReaderTheme, -} from "../../../redux/settings/settings.actions"; +import { setReaderSettings } from "../../../redux/settings/settings.actions"; import BottomSheetHandle from "../../../Components/BottomSheetHandle"; const ReaderSheet = ({ theme, reader, dispatch, bottomSheetRef }) => { @@ -47,7 +41,7 @@ const ReaderSheet = ({ theme, reader, dispatch, bottomSheetRef }) => { maximumTrackTintColor="#000000" thumbTintColor={theme.colorAccent} onValueChange={(value) => - dispatch(updateReaderTextSize(value)) + dispatch(setReaderSettings("textSize", value)) } /> { - dispatch(updateReaderTheme(value)) + dispatch(setReaderSettings("theme", value)) } value={reader.theme} style={{ marginTop: 10 }} @@ -123,7 +117,10 @@ const ReaderSheet = ({ theme, reader, dispatch, bottomSheetRef }) => { dispatch( - updateReaderTextAlign(value ?? "left") + setReaderSettings( + "textAlign", + value || "left" + ) ) } value={reader.textAlign} @@ -183,7 +180,10 @@ const ReaderSheet = ({ theme, reader, dispatch, bottomSheetRef }) => { disabled={reader.padding <= 0 ? true : false} onPress={() => dispatch( - updateReaderPadding(reader.padding - 1) + setReaderSettings( + "padding", + reader.padding - 1 + ) ) } /> @@ -202,7 +202,10 @@ const ReaderSheet = ({ theme, reader, dispatch, bottomSheetRef }) => { disabled={reader.padding >= 10 ? true : false} onPress={() => dispatch( - updateReaderPadding(reader.padding + 1) + setReaderSettings( + "padding", + reader.padding + 1 + ) ) } /> @@ -227,7 +230,12 @@ const ReaderSheet = ({ theme, reader, dispatch, bottomSheetRef }) => { - dispatch(setReaderFont(font.fontFamily)) + dispatch( + setReaderSettings( + "fontFamily", + font.fontFamily + ) + ) } textStyle={{ fontFamily: font.fontFamily }} style={{ diff --git a/src/Screens/More/AdvancedSettings.js b/src/Screens/More/AdvancedSettings.js new file mode 100644 index 00000000..9482a9fe --- /dev/null +++ b/src/Screens/More/AdvancedSettings.js @@ -0,0 +1,39 @@ +import React from "react"; +import { useDispatch } from "react-redux"; + +import { Appbar } from "../../Components/Appbar"; +import { ScreenContainer } from "../../Components/ThemedComponents"; +import { ListItem, ListSection, ListSubHeader } from "../../Components/List"; + +import { useTheme } from "../../Hooks/reduxHooks"; + +import { clearAllHistoryAction } from "../../redux/history/history.actions"; +import { deleteNovelCache } from "../../Database/queries/NovelQueries"; + +const AdvancedSettings = ({ navigation }) => { + const theme = useTheme(); + const dispatch = useDispatch(); + + return ( + + navigation.goBack()} /> + + Data + + dispatch(clearAllHistoryAction())} + theme={theme} + /> + + + ); +}; + +export default AdvancedSettings; diff --git a/src/Screens/More/BackupSettings.js b/src/Screens/More/BackupSettings.js new file mode 100644 index 00000000..0d07f8d6 --- /dev/null +++ b/src/Screens/More/BackupSettings.js @@ -0,0 +1,54 @@ +import React from "react"; +import { useDispatch } from "react-redux"; + +import { Appbar } from "../../Components/Appbar"; +import { + InfoItem, + ListItem, + ListSection, + ListSubHeader, +} from "../../Components/List"; +import { ScreenContainer } from "../../Components/ThemedComponents"; + +import { useTheme } from "../../Hooks/reduxHooks"; +import { restoreLibraryAction } from "../../redux/library/library.actions"; +import { createBackup } from "../../Services/backup"; + +const BackupSettings = ({ navigation }) => { + const theme = useTheme(); + const dispatch = useDispatch(); + + return ( + <> + + navigation.goBack()} + /> + + Backup + + dispatch(restoreLibraryAction())} + theme={theme} + /> + + + + + ); +}; + +export default BackupSettings; diff --git a/src/Screens/More/GeneralSettings.js b/src/Screens/More/GeneralSettings.js new file mode 100644 index 00000000..bcff6a2a --- /dev/null +++ b/src/Screens/More/GeneralSettings.js @@ -0,0 +1,107 @@ +import React, { useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; + +import { Appbar } from "../../Components/Appbar"; +import { + Divider, + ListItem, + ListSection, + ListSubHeader, +} from "../../Components/List"; +import { ScreenContainer } from "../../Components/ThemedComponents"; + +import { useTheme } from "../../Hooks/reduxHooks"; +import DisplayModeModal from "./components/DisplayModeModal"; +import GridSizeModal from "./components/GridSizeModal"; +import ThemeModal from "./components/ThemeModal"; + +const GenralSettings = ({ navigation }) => { + const theme = useTheme(); + const dispatch = useDispatch(); + + const { displayMode, novelsPerRow } = useSelector( + (state) => state.settingsReducer + ); + + const displayModeLabel = (displayMode) => { + const label = { + 0: "Compact Grid", + 1: "Comfortable Grid", + 2: "List", + }; + + return label[displayMode] ?? "Compact Grid"; + }; + + /** + * Display Mode Modal + */ + const [displayModalVisible, setDisplayModalVisible] = useState(false); + const showDisplayModal = () => setDisplayModalVisible(true); + const hideDisplayModal = () => setDisplayModalVisible(false); + + /** + * Theme Modal + */ + const [themeModalVisible, setthemeModalVisible] = useState(false); + const showthemeModal = () => setthemeModalVisible(true); + const hidethemeModal = () => setthemeModalVisible(false); + + /** + * Grid Size Modal + */ + const [gridSizeModalVisible, setGridSizeModalVisible] = useState(false); + const showGridSizeModal = () => setGridSizeModalVisible(true); + const hideGridSizeModal = () => setGridSizeModalVisible(false); + + return ( + + navigation.goBack()} /> + + Display + + + + Theme + + + + + + + ); +}; + +export default GenralSettings; diff --git a/src/Screens/More/More.js b/src/Screens/More/More.js index b6181481..52c15f81 100644 --- a/src/Screens/More/More.js +++ b/src/Screens/More/More.js @@ -38,21 +38,12 @@ const MoreScreen = ({ navigation }) => { icon="cog-outline" onPress={() => navigation.navigate("MoreStack", { - screen: "Settings", - }) - } - theme={theme} - /> - - navigation.navigate("MoreStack", { - screen: "Trackers", + screen: "SettingsStack", }) } theme={theme} /> + { + const theme = useTheme(); + const dispatch = useDispatch(); + + return ( + + navigation.goBack()} /> + + ); +}; + +export default ReaderSettings; diff --git a/src/Screens/More/Settings.js b/src/Screens/More/Settings.js index 70710769..d86855d3 100644 --- a/src/Screens/More/Settings.js +++ b/src/Screens/More/Settings.js @@ -2,9 +2,9 @@ import React, { useState } from "react"; import { View } from "react-native"; import { connect, useDispatch } from "react-redux"; -import { switchTheme } from "../../redux/settings/settings.actions"; +import { setAppTheme } from "../../redux/settings/settings.actions"; import { - setDisplayMode, + setAppSettings, setItemsPerRow, } from "../../redux/settings/settings.actions"; import { deleteNovelCache } from "../../Database/queries/NovelQueries"; @@ -15,53 +15,15 @@ import { ListItem, ListSection, ListSubHeader, - InfoItem, } from "../../Components/List"; -import DisplayModeModal from "./components/DisplayModeModal"; -import GridSizeModal from "./components/GridSizeModal"; -import ThemeModal from "./components/ThemeModal"; -import { createBackup, restoreBackup } from "../../Services/backup"; import { useTheme } from "../../Hooks/reduxHooks"; -import { restoreLibraryAction } from "../../redux/library/library.actions"; import { clearAllHistoryAction } from "../../redux/history/history.actions"; -const SettingsScreen = ({ - navigation, - displayMode, - itemsPerRow, - switchTheme, - setDisplayMode, - setItemsPerRow, -}) => { - const displayModeLabel = (displayMode) => { - const label = { - 0: "Compact Grid", - 1: "Comfortable Grid", - 2: "List", - }; - - return label[displayMode]; - }; - +const SettingsScreen = ({ navigation }) => { const theme = useTheme(); const dispatch = useDispatch(); - // Display Mode Modal - const [displayModalVisible, setDisplayModalVisible] = useState(false); - const showDisplayModal = () => setDisplayModalVisible(true); - const hideDisplayModal = () => setDisplayModalVisible(false); - - // Theme Modal - const [themeModalVisible, setthemeModalVisible] = useState(false); - const showthemeModal = () => setthemeModalVisible(true); - const hidethemeModal = () => setthemeModalVisible(false); - - // Grid Size Modal - const [gridSizeModalVisible, setGridSizeModalVisible] = useState(false); - const showGridSizeModal = () => setGridSizeModalVisible(true); - const hideGridSizeModal = () => setGridSizeModalVisible(false); - return ( <> navigation.goBack()} /> @@ -69,84 +31,56 @@ const SettingsScreen = ({ style={{ flex: 1, backgroundColor: theme.colorPrimaryDark, - paddingVertical: 8, }} > - - Data - deleteNovelCache()} - theme={theme} - /> - dispatch(clearAllHistoryAction())} - theme={theme} - /> - - Display - - - - Theme - - - Backup - - dispatch(restoreLibraryAction())} - theme={theme} - /> - - - + navigation.navigate("SettingsStack", { + screen: "GeneralSettings", + }) + } theme={theme} /> - + navigation.navigate("SettingsStack", { + screen: "ReaderSettings", + }) + } theme={theme} /> - + navigation.navigate("SettingsStack", { + screen: "TrackerSettings", + }) + } + theme={theme} + /> + + navigation.navigate("SettingsStack", { + screen: "BackupSettings", + }) + } + theme={theme} + /> + + navigation.navigate("SettingsStack", { + screen: "AdvancedSettings", + }) + } theme={theme} /> @@ -154,13 +88,4 @@ const SettingsScreen = ({ ); }; -const mapStateToProps = (state) => ({ - displayMode: state.settingsReducer.displayMode, - itemsPerRow: state.settingsReducer.itemsPerRow, -}); - -export default connect(mapStateToProps, { - switchTheme, - setDisplayMode, - setItemsPerRow, -})(SettingsScreen); +export default SettingsScreen; diff --git a/src/Screens/More/Trackers.js b/src/Screens/More/TrackerSettings.js similarity index 100% rename from src/Screens/More/Trackers.js rename to src/Screens/More/TrackerSettings.js diff --git a/src/Screens/More/components/DisplayModeModal.js b/src/Screens/More/components/DisplayModeModal.js index 0a6bdfe1..6b6a3657 100644 --- a/src/Screens/More/components/DisplayModeModal.js +++ b/src/Screens/More/components/DisplayModeModal.js @@ -1,13 +1,14 @@ import React from "react"; import { StyleSheet } from "react-native"; import { Portal, Modal, Checkbox } from "react-native-paper"; +import { setAppSettings } from "../../../redux/settings/settings.actions"; const DisplayModeModal = ({ - displayMode, - displayModalVisible, - setDisplayMode, - hideDisplayModal, theme, + dispatch, + displayMode, + hideDisplayModal, + displayModalVisible, }) => { const displayModes = [ { displayMode: 0, label: "Compact Grid" }, @@ -27,7 +28,9 @@ const DisplayModeModal = ({ mode="ios" uncheckedColor={theme.textColorSecondary} color={theme.colorAccent} - onPress={() => setDisplayMode(mode.displayMode)} + onPress={() => + dispatch(setAppSettings("displayMode", mode.displayMode)) + } /> )); }; diff --git a/src/Screens/More/components/GridSizeModal.js b/src/Screens/More/components/GridSizeModal.js index 75d0c4e1..9dcde7a0 100644 --- a/src/Screens/More/components/GridSizeModal.js +++ b/src/Screens/More/components/GridSizeModal.js @@ -3,12 +3,13 @@ import { Text, StyleSheet } from "react-native"; import { Portal, Modal } from "react-native-paper"; import Slider from "@react-native-community/slider"; import { RadioButton, RadioButtonGroup } from "../../../Components/RadioButton"; +import { setNovelsPerRow } from "../../../redux/settings/settings.actions"; const GridSizeModal = ({ - itemsPerRow, + dispatch, + novelsPerRow, gridSizeModalVisible, hideGridSizeModal, - setItemsPerRow, theme, }) => { const gridSizes = { @@ -43,22 +44,22 @@ const GridSizeModal = ({ { color: theme.textColorSecondary }, ]} > - {`${itemsPerRow} per row`} + {`${novelsPerRow} per row`} - setItemsPerRow(value)} - /> - {/* setItemsPerRow(value)} - value={itemsPerRow} + onValueChange={(value) => dispatch(setNovelsPerRow(value))} + /> */} + dispatch(setNovelsPerRow(value))} + value={novelsPerRow} > {Object.keys(gridSizes).map((item) => ( ))} - */} + ); diff --git a/src/Screens/More/components/ThemeModal.js b/src/Screens/More/components/ThemeModal.js index e30c2787..bafc9f88 100644 --- a/src/Screens/More/components/ThemeModal.js +++ b/src/Screens/More/components/ThemeModal.js @@ -3,13 +3,9 @@ import { StyleSheet } from "react-native"; import { Portal, Modal, Checkbox } from "react-native-paper"; import { setStatusBarStyle } from "expo-status-bar"; +import { setAppTheme } from "../../../redux/settings/settings.actions"; -const ThemeModal = ({ - themeModalVisible, - hidethemeModal, - switchTheme, - theme, -}) => { +const ThemeModal = ({ themeModalVisible, hidethemeModal, dispatch, theme }) => { const themes = [ { id: 0, name: "AMOLED Dark", statusBar: "light" }, { id: 1, name: "Light", statusBar: "dark" }, @@ -29,7 +25,7 @@ const ThemeModal = ({ mode="ios" color={theme.colorAccent} onPress={() => { - switchTheme(item.id); + dispatch(setAppTheme(item.id)); setStatusBarStyle(item.statusBar); }} /> diff --git a/src/redux/settings/settings.actions.js b/src/redux/settings/settings.actions.js index 3011bb3c..f9b44d42 100644 --- a/src/redux/settings/settings.actions.js +++ b/src/redux/settings/settings.actions.js @@ -1,66 +1,34 @@ import { - SWITCH_THEME, - SET_DISPLAY_MODE, - SET_ITEMS_PER_ROW, - UPDATE_READER_TEXT_SIZE, - UPDATE_READER_THEME, - UPDATE_READER_TEXT_ALIGN, - UPDATE_READER_PADDING, - SET_READER_FONT, + SET_APP_THEME, + SET_NOVELS_PER_ROW, + SET_READER_SETTINGS, + SET_APP_SETTINGS, } from "./settings.types"; -export const switchTheme = (val) => (dispatch) => { +export const setAppTheme = (val) => (dispatch) => { dispatch({ - type: SWITCH_THEME, + type: SET_APP_THEME, payload: val, }); }; -export const setDisplayMode = (val) => (dispatch) => { +export const setNovelsPerRow = (val) => (dispatch) => { dispatch({ - type: SET_DISPLAY_MODE, + type: SET_NOVELS_PER_ROW, payload: val, }); }; -export const setItemsPerRow = (val) => (dispatch) => { +export const setAppSettings = (key, val) => (dispatch) => { dispatch({ - type: SET_ITEMS_PER_ROW, - payload: val, + type: SET_APP_SETTINGS, + payload: { key, val }, }); }; -export const updateReaderTheme = (val) => (dispatch) => { +export const setReaderSettings = (key, val) => (dispatch) => { dispatch({ - type: UPDATE_READER_THEME, - payload: val, - }); -}; - -export const updateReaderTextSize = (val) => (dispatch) => { - dispatch({ - type: UPDATE_READER_TEXT_SIZE, - payload: val, - }); -}; - -export const updateReaderTextAlign = (val) => (dispatch) => { - dispatch({ - type: UPDATE_READER_TEXT_ALIGN, - payload: val, - }); -}; - -export const updateReaderPadding = (val) => (dispatch) => { - dispatch({ - type: UPDATE_READER_PADDING, - payload: val, - }); -}; - -export const setReaderFont = (val) => (dispatch) => { - dispatch({ - type: SET_READER_FONT, - payload: val, + type: SET_READER_SETTINGS, + payload: { key, val }, }); }; diff --git a/src/redux/settings/settings.reducer.js b/src/redux/settings/settings.reducer.js index 17b338c2..f9360947 100644 --- a/src/redux/settings/settings.reducer.js +++ b/src/redux/settings/settings.reducer.js @@ -1,13 +1,8 @@ -import { SET_NOVEL_SETTINGS } from "../novel/novel.types"; import { - SWITCH_THEME, - SET_DISPLAY_MODE, - SET_ITEMS_PER_ROW, - SET_READER_FONT, - UPDATE_READER_PADDING, - UPDATE_READER_TEXT_ALIGN, - UPDATE_READER_TEXT_SIZE, - UPDATE_READER_THEME, + SET_APP_THEME, + SET_NOVELS_PER_ROW, + SET_READER_SETTINGS, + SET_APP_SETTINGS, } from "./settings.types"; import { amoledDarkTheme, @@ -27,9 +22,26 @@ const themes = { 5: irisBlueTheme, }; +/** + * Display Mode + * + * 0 -> Compact + * 1 -> Comfortable + * 2 -> List + */ + +/** + * Reader Theme + * + * 1 -> Dark + * 2 -> White + * 3 -> Sepia + */ + const initialState = { + theme: irisBlueTheme, displayMode: 0, - itemsPerRow: 3, + novelsPerRow: 3, reader: { theme: 1, textSize: 16, @@ -37,61 +49,32 @@ const initialState = { padding: 5, fontFamily: null, }, - theme: themes[5], }; -/** - * Display Mode - * 0 -> Compact - * 1 -> Comfortable - * 2 -> List - */ - -/** - * Reader Settings - * theme - * 1 -> Dark - * 2 -> White - * 3 -> Sepia - */ - const settingsReducer = (state = initialState, action) => { const { type, payload } = action; switch (type) { - case SWITCH_THEME: + case SET_APP_THEME: return { ...state, theme: themes[payload] }; - case SET_DISPLAY_MODE: + case SET_NOVELS_PER_ROW: return { ...state, - displayMode: payload, + novelsPerRow: state.displayMode !== 2 ? payload : 1, }; - case SET_ITEMS_PER_ROW: + case SET_APP_SETTINGS: return { ...state, - itemsPerRow: state.displayMode !== 2 ? payload : 1, + [payload.key]: payload.val, }; - case UPDATE_READER_THEME: - return { ...state, reader: { ...state.reader, theme: payload } }; - case UPDATE_READER_TEXT_SIZE: - return { ...state, reader: { ...state.reader, textSize: payload } }; - case UPDATE_READER_TEXT_ALIGN: + case SET_READER_SETTINGS: return { ...state, - reader: { ...state.reader, textAlign: payload }, + reader: { + ...state.reader, + [payload.key]: payload.val, + }, }; - case UPDATE_READER_PADDING: - return { - ...state, - reader: { ...state.reader, padding: payload }, - }; - case SET_READER_FONT: - return { - ...state, - reader: { ...state.reader, fontFamily: payload }, - }; - case SET_NOVEL_SETTINGS: - console.log(state.novelSettings); default: return state; } diff --git a/src/redux/settings/settings.types.js b/src/redux/settings/settings.types.js index e16ddf7b..1f861e51 100644 --- a/src/redux/settings/settings.types.js +++ b/src/redux/settings/settings.types.js @@ -1,8 +1,4 @@ -export const SWITCH_THEME = "SWITCH_THEME"; -export const SET_DISPLAY_MODE = "SET_DISPLAY_MODE"; -export const SET_ITEMS_PER_ROW = "SET_ITEMS_PER_ROW"; -export const UPDATE_READER_THEME = "UPDATE_READER_THEME"; -export const UPDATE_READER_TEXT_SIZE = "UPDATE_READER_TEXT_SIZE"; -export const UPDATE_READER_TEXT_ALIGN = "UPDATE_READER_TEXT_ALIGN"; -export const UPDATE_READER_PADDING = "UPDATE_READER_PADDING"; -export const SET_READER_FONT = "SET_READER_FONT"; +export const SET_APP_SETTINGS = "SET_APP_SETTINGS"; +export const SET_APP_THEME = "SET_APP_THEME"; +export const SET_NOVELS_PER_ROW = "SET_NOVELS_PER_ROW"; +export const SET_READER_SETTINGS = "SET_READER_SETTINGS";