open-lab/lnreader
2
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor settings and minor fixes

Browse Source
This commit is contained in:
Rajarshee Chatterjee
2021-05-16 18:44:37 +05:30
parent a280fc95e1
commit d230b64846
24 changed files with 432 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Components/List.js
-1
View File
@@ -25,7 +25,6 @@ const ListItem = ({
}) => (
<List.Item
title={title}
style={[!right && { paddingVertical: 12 }]}
titleStyle={[{ color: theme.textColorPrimary }, titleStyle]}
description={description}
descriptionStyle={{ color: theme.textColorSecondary }}
src/Components/NovelCover.js
+3 -3
View File
@@ -9,7 +9,7 @@ import ListView from "./ListView";
const NovelCover = ({ item, onPress, libraryStatus }) => {
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 ? (
<View style={{ flex: 1 / itemsPerRow }}>
<View style={{ flex: 1 / novelsPerRow }}>
<TouchableRipple
borderless
centered
@@ -94,7 +94,7 @@ const NovelCover = ({ item, onPress, libraryStatus }) => {
<>
<ImageBackground
source={{ uri: item.novelCover }}
style={{ height: height[itemsPerRow] }}
style={{ height: height[novelsPerRow] }}
imageStyle={[
{ borderRadius: 4 },
libraryStatus && { opacity: 0.5 },
src/Components/NovelList.js
+7 -11
View File
@@ -1,5 +1,6 @@
import React from "react";
import { RefreshControl, StyleSheet, FlatList } from "react-native";
import { StyleSheet, FlatList } from "react-native";
import { useSettings } from "../Hooks/reduxHooks";
const NovelList = ({
@@ -8,20 +9,15 @@ const NovelList = ({
refreshControl,
ListEmptyComponent,
}) => {
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 (
<FlatList
contentContainerStyle={styles.flatListCont}
numColumns={getItemsPerRow()}
key={getItemsPerRow()}
numColumns={getNovelsPerRow()}
key={getNovelsPerRow()}
data={data}
keyExtractor={(item) => item.novelUrl}
renderItem={renderItem}
src/Components/Searchbar.js
+4 -2
View File
@@ -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())
)
}
/>
)}
src/Components/ThemedComponents.js
+8 -4
View File
@@ -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 }) => (
<View style={{ flex: 1, backgroundColor: theme.colorPrimaryDark }}>
{children}
</View>
);
export default UpdateCard;
export { ScreenContainer };
const styles = StyleSheet.create({});
// const styles = StyleSheet.create({});
src/Hooks/reduxHooks.js
+2 -2
View File
@@ -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 = () => {
src/Navigators/BottomNavigator.js
-1
View File
@@ -16,7 +16,6 @@ const BottomNavigator = () => {
return (
<Tab.Navigator
// shifting={false}
barStyle={{ backgroundColor: theme.colorPrimary }}
activeColor={theme.colorAccent}
>
src/Navigators/Main.js
+1 -1
View File
@@ -34,7 +34,7 @@ const MainNavigator = () => {
return (
<NavigationContainer>
<View style={{ flex: 1, backgroundColor: theme.colorPrimary }}>
<View style={{ flex: 1, backgroundColor: theme.colorPrimaryDark }}>
{isNewVersion && <NewUpdateDialog newVersion={latestRelease} />}
<Stack.Navigator screenOptions={stackNavigatorConfig}>
<Stack.Screen
src/Navigators/More.js
+42 -6
View File
@@ -1,24 +1,60 @@
import React from "react";
import { View } from "react-native";
import { useTheme } from "../Hooks/reduxHooks";
import { createStackNavigator } from "@react-navigation/stack";
import About from "../Screens/More/About";
import Settings from "../Screens/More/Settings";
import Trackers from "../Screens/More/Trackers";
import { View } from "react-native";
import { useTheme } from "../Hooks/reduxHooks";
import TrackerSettings from "../Screens/More/TrackerSettings";
import ReaderSettings from "../Screens/More/ReaderSettings";
import BackupSettings from "../Screens/More/BackupSettings";
import AdvancedSettings from "../Screens/More/AdvancedSettings";
import GeneralSettings from "../Screens/More/GeneralSettings";
const Stack = createStackNavigator();
const stackNavigatorConfig = { headerShown: false };
const SettingsStack = () => {
const theme = useTheme();
return (
<View style={{ flex: 1, backgroundColor: theme.colorPrimaryDark }}>
<Stack.Navigator screenOptions={stackNavigatorConfig}>
<Stack.Screen name="Settings" component={Settings} />
<Stack.Screen
name="GeneralSettings"
component={GeneralSettings}
/>
<Stack.Screen
name="ReaderSettings"
component={ReaderSettings}
/>
<Stack.Screen
name="TrackerSettings"
component={TrackerSettings}
/>
<Stack.Screen
name="BackupSettings"
component={BackupSettings}
/>
<Stack.Screen
name="AdvancedSettings"
component={AdvancedSettings}
/>
</Stack.Navigator>
</View>
);
};
const MoreStack = () => {
const theme = useTheme();
return (
<View style={{ flex: 1, backgroundColor: theme.colorPrimary }}>
<View style={{ flex: 1, backgroundColor: theme.colorPrimaryDark }}>
<Stack.Navigator screenOptions={stackNavigatorConfig}>
<Stack.Screen name="Settings" component={Settings} />
<Stack.Screen name="Trackers" component={Trackers} />
<Stack.Screen name="SettingsStack" component={SettingsStack} />
<Stack.Screen name="About" component={About} />
</Stack.Navigator>
</View>
src/Screens/Browse/components/GlobalSearchNovelCover.js
+1 -1
View File
@@ -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();
src/Screens/Chapter/components/ReaderSheet.js
+21 -13
View File
@@ -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))
}
/>
<View
@@ -72,7 +66,7 @@ const ReaderSheet = ({ theme, reader, dispatch, bottomSheetRef }) => {
</Text>
<ToggleButton.Row
onValueChange={(value) =>
dispatch(updateReaderTheme(value))
dispatch(setReaderSettings("theme", value))
}
value={reader.theme}
style={{ marginTop: 10 }}
@@ -123,7 +117,10 @@ const ReaderSheet = ({ theme, reader, dispatch, bottomSheetRef }) => {
<ToggleButton.Row
onValueChange={(value) =>
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 }) => {
<Chip
key={index}
onPress={() =>
dispatch(setReaderFont(font.fontFamily))
dispatch(
setReaderSettings(
"fontFamily",
font.fontFamily
)
)
}
textStyle={{ fontFamily: font.fontFamily }}
style={{
src/Screens/More/AdvancedSettings.js
+39
View File
@@ -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 (
<ScreenContainer theme={theme}>
<Appbar title="General" onBackAction={() => navigation.goBack()} />
<ListSection>
<ListSubHeader theme={theme}>Data</ListSubHeader>
<ListItem
title="Clear database"
description="Delete history for novels not in your library"
onPress={deleteNovelCache}
theme={theme}
/>
<ListItem
title="Clear history"
description="Delete reading history for all novels"
onPress={() => dispatch(clearAllHistoryAction())}
theme={theme}
/>
</ListSection>
</ScreenContainer>
);
};
export default AdvancedSettings;
src/Screens/More/BackupSettings.js
+54
View File
@@ -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 (
<>
<ScreenContainer theme={theme}>
<Appbar
title="Backup"
onBackAction={() => navigation.goBack()}
/>
<ListSection>
<ListSubHeader theme={theme}>Backup</ListSubHeader>
<ListItem
title="Create backup"
description="Can be used to restore current library"
onPress={createBackup}
theme={theme}
/>
<ListItem
title="Restore backup"
description="Restore library from backup file"
onPress={() => dispatch(restoreLibraryAction())}
theme={theme}
/>
<InfoItem
title="Create backup may not work on devices with Android 9 or lower."
icon="information-outline"
description="Restore library from backup file"
theme={theme}
/>
</ListSection>
</ScreenContainer>
</>
);
};
export default BackupSettings;
src/Screens/More/GeneralSettings.js
+107
View File
@@ -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 (
<ScreenContainer theme={theme}>
<Appbar title="General" onBackAction={() => navigation.goBack()} />
<ListSection>
<ListSubHeader theme={theme}>Display</ListSubHeader>
<ListItem
title="Display Mode"
description={displayModeLabel(displayMode)}
onPress={showDisplayModal}
theme={theme}
/>
<ListItem
title="Items per row in library"
description={`${novelsPerRow} items per row`}
onPress={showGridSizeModal}
theme={theme}
/>
<Divider theme={theme} />
<ListSubHeader theme={theme}>Theme</ListSubHeader>
<ListItem
title="Theme"
description={theme.name}
onPress={showthemeModal}
theme={theme}
/>
</ListSection>
<DisplayModeModal
displayMode={displayMode}
displayModalVisible={displayModalVisible}
hideDisplayModal={hideDisplayModal}
dispatch={dispatch}
theme={theme}
/>
<GridSizeModal
dispatch={dispatch}
novelsPerRow={novelsPerRow}
gridSizeModalVisible={gridSizeModalVisible}
hideGridSizeModal={hideGridSizeModal}
theme={theme}
/>
<ThemeModal
dispatch={dispatch}
themeModalVisible={themeModalVisible}
hidethemeModal={hidethemeModal}
theme={theme}
/>
</ScreenContainer>
);
};
export default GenralSettings;
src/Screens/More/More.js
+2 -11
View File
@@ -38,21 +38,12 @@ const MoreScreen = ({ navigation }) => {
icon="cog-outline"
onPress={() =>
navigation.navigate("MoreStack", {
screen: "Settings",
})
}
theme={theme}
/>
<ListItem
title="Tracking"
icon="sync"
onPress={() =>
navigation.navigate("MoreStack", {
screen: "Trackers",
screen: "SettingsStack",
})
}
theme={theme}
/>
<ListItem
title="About"
icon="information-outline"
src/Screens/More/ReaderSettings.js
+20
View File
@@ -0,0 +1,20 @@
import React from "react";
import { useDispatch } from "react-redux";
import { Appbar } from "../../Components/Appbar";
import { ScreenContainer } from "../../Components/ThemedComponents";
import { useTheme } from "../../Hooks/reduxHooks";
const ReaderSettings = ({ navigation }) => {
const theme = useTheme();
const dispatch = useDispatch();
return (
<ScreenContainer theme={theme}>
<Appbar title="Reader" onBackAction={() => navigation.goBack()} />
</ScreenContainer>
);
};
export default ReaderSettings;
src/Screens/More/Settings.js
+48 -123
View File
@@ -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 (
<>
<Appbar title="Settings" onBackAction={() => navigation.goBack()} />
@@ -69,84 +31,56 @@ const SettingsScreen = ({
style={{
flex: 1,
backgroundColor: theme.colorPrimaryDark,
paddingVertical: 8,
}}
>
<ListSection>
<ListSubHeader theme={theme}>Data</ListSubHeader>
<ListItem
title="Clear database"
description="Delete history for novels not in your library"
onPress={() => deleteNovelCache()}
theme={theme}
/>
<ListItem
title="Clear history"
description="Delete reading history for all novels"
onPress={() => dispatch(clearAllHistoryAction())}
theme={theme}
/>
<Divider theme={theme} />
<ListSubHeader theme={theme}>Display</ListSubHeader>
<ListItem
title="Display Mode"
description={displayModeLabel(displayMode)}
onPress={showDisplayModal}
theme={theme}
/>
<ListItem
title="Items per row in library"
description={`${itemsPerRow} items per row`}
onPress={showGridSizeModal}
theme={theme}
/>
<Divider theme={theme} />
<ListSubHeader theme={theme}>Theme</ListSubHeader>
<ListItem
title="Theme"
description={theme.name}
onPress={showthemeModal}
theme={theme}
/>
<Divider theme={theme} />
<ListSubHeader theme={theme}>Backup</ListSubHeader>
<ListItem
title="Create backup"
description="Can be used to restore current library"
onPress={createBackup}
theme={theme}
/>
<ListItem
title="Restore backup"
description="Restore library from backup file"
onPress={() => dispatch(restoreLibraryAction())}
theme={theme}
/>
<InfoItem
title="Create backup may not work on devices with Android 9 or lower."
icon="information-outline"
description="Restore library from backup file"
theme={theme}
/>
</ListSection>
<DisplayModeModal
displayMode={displayMode}
displayModalVisible={displayModalVisible}
hideDisplayModal={hideDisplayModal}
setDisplayMode={setDisplayMode}
<ListItem
title="General"
icon="tune"
onPress={() =>
navigation.navigate("SettingsStack", {
screen: "GeneralSettings",
})
}
theme={theme}
/>
<GridSizeModal
itemsPerRow={itemsPerRow}
gridSizeModalVisible={gridSizeModalVisible}
hideGridSizeModal={hideGridSizeModal}
setItemsPerRow={setItemsPerRow}
<ListItem
title="Reader"
icon="book-open-outline"
onPress={() =>
navigation.navigate("SettingsStack", {
screen: "ReaderSettings",
})
}
theme={theme}
/>
<ThemeModal
themeModalVisible={themeModalVisible}
hidethemeModal={hidethemeModal}
switchTheme={switchTheme}
<ListItem
title="Tracking"
icon="sync"
onPress={() =>
navigation.navigate("SettingsStack", {
screen: "TrackerSettings",
})
}
theme={theme}
/>
<ListItem
title="Backup"
icon="cloud-upload-outline"
onPress={() =>
navigation.navigate("SettingsStack", {
screen: "BackupSettings",
})
}
theme={theme}
/>
<ListItem
title="Advanced"
icon="code-tags"
onPress={() =>
navigation.navigate("SettingsStack", {
screen: "AdvancedSettings",
})
}
theme={theme}
/>
</View>
@@ -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;
src/Screens/More/Trackers.js → src/Screens/More/TrackerSettings.js
View File
src/Screens/More/components/DisplayModeModal.js
+8 -5
View File
@@ -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))
}
/>
));
};
src/Screens/More/components/GridSizeModal.js
+12 -11
View File
@@ -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`}
</Text>
<Slider
{/* <Slider
style={styles.slider}
value={itemsPerRow}
value={novelsPerRow}
minimumValue={1}
maximumValue={5}
step={1}
minimumTrackTintColor={theme.colorAccent}
maximumTrackTintColor="#000000"
thumbTintColor={theme.colorAccent}
onValueChange={(value) => setItemsPerRow(value)}
/>
{/* <RadioButtonGroup
onValueChange={(value) => setItemsPerRow(value)}
value={itemsPerRow}
onValueChange={(value) => dispatch(setNovelsPerRow(value))}
/> */}
<RadioButtonGroup
onValueChange={(value) => dispatch(setNovelsPerRow(value))}
value={novelsPerRow}
>
{Object.keys(gridSizes).map((item) => (
<RadioButton
@@ -68,7 +69,7 @@ const GridSizeModal = ({
theme={theme}
/>
))}
</RadioButtonGroup> */}
</RadioButtonGroup>
</Modal>
</Portal>
);
src/Screens/More/components/ThemeModal.js
+3 -7
View File
@@ -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);
}}
/>
src/redux/settings/settings.actions.js
+14 -46
View File
@@ -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 },
});
};
src/redux/settings/settings.reducer.js
+32 -49
View File
@@ -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;
}
src/redux/settings/settings.types.js
+4 -8
View File
@@ -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";