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

Move some reader logic into redux

Browse Source
This commit is contained in:
Rajarshee Chatterjee
2021-03-22 09:20:20 +05:30
parent 5bb3be576e
commit d32cb41475
7 changed files with 140 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/BottomSheetHandle.js
+23
View File
@@ -0,0 +1,23 @@
import React from "react";
import { View } from "react-native";
import { useSelector } from "react-redux";
const BottomSheetHandle = () => {
const theme = useSelector((state) => state.themeReducer.theme);
return (
<>
<View
style={{
backgroundColor: theme.textColorHintDark,
height: 5,
width: 30,
borderRadius: 50,
top: 10,
alignSelf: "center",
}}
/>
</>
);
};
export default BottomSheetHandle;
src/redux/actions/settings.js
+20 -1
View File
@@ -1,4 +1,9 @@
import { SET_DISPLAY_MODE, SET_ITEMS_PER_ROW } from "./types";
import {
SET_DISPLAY_MODE,
SET_ITEMS_PER_ROW,
UPDATE_READER_TEXT_SIZE,
UPDATE_READER_THEME,
} from "./types";
export const setDisplayMode = (val) => (dispatch) => {
dispatch({
@@ -13,3 +18,17 @@ export const setItemsPerRow = (val) => (dispatch) => {
payload: val,
});
};
export const updateReaderTheme = (val) => (dispatch) => {
dispatch({
type: UPDATE_READER_THEME,
payload: val,
});
};
export const updateReaderTextSize = (val) => (dispatch) => {
dispatch({
type: UPDATE_READER_TEXT_SIZE,
payload: val,
});
};
src/redux/actions/types.js
+4
View File
@@ -41,3 +41,7 @@ export const CHAPTER_READ = "CHAPTER_READ";
export const GET_CHAPTER = "GET_CHAPTER";
export const CHAPTER_LOADING = "CHAPTER_LOADING";
export const UPDATE_READER_THEME = "UPDATE_READER_THEME";
export const UPDATE_READER_TEXT_SIZE = "UPDATE_READER_TEXT_SIZE";
src/redux/reducers/settings.js
+22 -1
View File
@@ -1,8 +1,17 @@
import { SET_DISPLAY_MODE, SET_ITEMS_PER_ROW } from "../actions/types";
import {
SET_DISPLAY_MODE,
SET_ITEMS_PER_ROW,
UPDATE_READER_TEXT_SIZE,
UPDATE_READER_THEME,
} from "../actions/types";
const initialState = {
displayMode: 0,
itemsPerRow: 3,
reader: {
theme: 1,
textSize: 16,
},
};
/**
@@ -12,6 +21,14 @@ const initialState = {
* 2 -> List
*/
/**
* Reader Settings
* theme
* 1 -> Dark
* 2 -> White
* 3 -> Sepia
*/
const settingsReducer = (state = initialState, action) => {
const { type, payload } = action;
@@ -20,6 +37,10 @@ const settingsReducer = (state = initialState, action) => {
return { ...state, displayMode: payload };
case SET_ITEMS_PER_ROW:
return { ...state, itemsPerRow: payload };
case UPDATE_READER_THEME:
return { ...state, reader: { ...state.reader, theme: payload } };
case UPDATE_READER_TEXT_SIZE:
return { ...state, reader: { ...state.reader, textSize: payload } };
default:
return state;
}
src/screens/Chapter/Chapter.js
+38 -39
View File
@@ -6,8 +6,6 @@ import { CollapsibleHeaderScrollView } from "react-native-collapsible-header-vie
import BottomSheet from "./components/BottomSheet";
import { getReaderTheme } from "../../services/asyncStorage";
import { updateNovelHistory } from "../../redux/actions/history";
import { getChapter, updateChapterRead } from "../../redux/actions/novel";
@@ -22,22 +20,42 @@ const ChapterItem = ({
getChapter,
chapter,
loading,
reader,
}) => {
const { extensionId, chapterUrl, novelUrl, chapterName } = route.params;
const [size, setSize] = useState(16);
const [readerTheme, setReaderTheme] = useState(1);
let _panel = useRef(null); // Bottomsheet ref
getReaderTheme().then((value) => setReaderTheme(value));
let _panel = useRef(null);
useEffect(() => {
getChapter(extensionId, chapterUrl, novelUrl);
updateNovelHistory(chapterUrl, chapterName, novelUrl);
}, []);
const readerBackground = (val) => {
const backgroundColor = {
1: "#000000",
2: "#FFFFFF",
3: "#F4ECD8",
};
return backgroundColor[val];
};
const readerTextColor = (val) => {
const textColor = val === 1 ? theme.textColorSecondary : "#000000";
return textColor;
};
const readerLineHeight = (val) => {
const lineHeight = {
12: 20,
16: 25,
20: 28,
};
return lineHeight[val];
};
const isCloseToBottom = ({
layoutMeasurement,
contentOffset,
@@ -63,13 +81,13 @@ const ChapterItem = ({
>
<Appbar.BackAction
onPress={() => navigation.goBack()}
color={"white"}
color="#FFFFFF"
size={26}
style={{ marginRight: 0 }}
/>
<Appbar.Content
title={loading ? "Chapter" : chapter.chapterName}
titleStyle={{ color: theme.textColorPrimary }}
titleStyle={{ color: "#FFFFFF" }}
/>
{!loading && (
<>
@@ -85,7 +103,7 @@ const ChapterItem = ({
chapterName: chapter.chapterName,
});
}}
color={"white"}
color="#FFFFFF"
/>
<Appbar.Action
icon="chevron-right"
@@ -99,7 +117,7 @@ const ChapterItem = ({
chapterName: chapter.chapterName,
});
}}
color={"white"}
color="#FFFFFF"
/>
<Appbar.Action
icon="dots-vertical"
@@ -107,7 +125,7 @@ const ChapterItem = ({
onPress={() =>
_panel.current.show({ velocity: -1.5 })
}
color={"white"}
color="#FFFFFF"
/>
</>
)}
@@ -116,15 +134,7 @@ const ChapterItem = ({
headerHeight={100}
contentContainerStyle={[
styles.container,
readerTheme === 1 && {
backgroundColor: theme.colorPrimary,
},
readerTheme === 2 && {
backgroundColor: "white",
},
readerTheme === 3 && {
backgroundColor: "#F4ECD8",
},
{ backgroundColor: readerBackground(reader.theme) },
]}
onScroll={({ nativeEvent }) => {
if (isCloseToBottom(nativeEvent)) {
@@ -144,29 +154,17 @@ const ChapterItem = ({
style={[
{
paddingVertical: 15,
fontSize: size,
fontSize: reader.textSize,
color: readerTextColor(reader.theme),
lineHeight: readerLineHeight(reader.textSize),
},
readerTheme === 1
? { color: theme.textColorSecondary }
: { color: "black" },
size === 16
? { lineHeight: 25 }
: size === 20
? { lineHeight: 28 }
: size === 12 && { lineHeight: 20 },
]}
>
{chapter.chapterText.trim()}
</Text>
)}
<Portal>
<BottomSheet
bottomSheetRef={_panel}
setSize={setSize}
size={size}
setReaderTheme={setReaderTheme}
readerTheme={readerTheme}
/>
<BottomSheet bottomSheetRef={_panel} />
</Portal>
</CollapsibleHeaderScrollView>
</Provider>
@@ -177,6 +175,7 @@ const mapStateToProps = (state) => ({
theme: state.themeReducer.theme,
chapter: state.novelReducer.chapter,
loading: state.novelReducer.chapterLoading,
reader: state.settingsReducer.reader,
});
export default connect(mapStateToProps, {
src/screens/Chapter/components/BottomSheet.js
+32 -38
View File
@@ -5,19 +5,21 @@ import { ToggleButton } from "react-native-paper";
import Slider from "@react-native-community/slider";
import Bottomsheet from "rn-sliding-up-panel";
import { useSelector } from "react-redux";
import { connect } from "react-redux";
import { saveReaderTheme } from "../../../services/asyncStorage";
import {
updateReaderTextSize,
updateReaderTheme,
} from "../../../redux/actions/settings";
import BottomSheetHandle from "../../../components/common/BottomSheetHandle";
const ChapterBottomSheet = ({
bottomSheetRef,
setSize,
size,
readerTheme,
setReaderTheme,
theme,
reader,
updateReaderTextSize,
updateReaderTheme,
}) => {
const theme = useSelector((state) => state.themeReducer.theme);
return (
<Bottomsheet
animatedValue={new Animated.Value(0)}
@@ -29,23 +31,11 @@ const ChapterBottomSheet = ({
<View
style={[
styles.contentContainer,
{
backgroundColor: "rgba(0,0,0,0.4)",
},
{ backgroundColor: "rgba(0,0,0,0.4)" },
]}
>
<View
style={{
backgroundColor: theme.textColorHintDark,
height: 5,
width: 30,
borderRadius: 50,
top: 10,
alignSelf: "center",
}}
/>
<View style={{ flex: 1, alignItems: "center", paddingTop: 30 }}>
<BottomSheetHandle />
<View style={styles.readerSettingsContainer}>
<Text
style={{
color: theme.textColorPrimary,
@@ -59,14 +49,14 @@ const ChapterBottomSheet = ({
width: Dimensions.get("window").width,
height: 40,
}}
value={size}
value={reader.textSize}
minimumValue={12}
maximumValue={20}
step={4}
minimumTrackTintColor={theme.colorAccentDark}
maximumTrackTintColor="#000000"
thumbTintColor={theme.colorAccentDark}
onValueChange={(value) => setSize(value)}
onValueChange={(value) => updateReaderTextSize(value)}
/>
<Text
style={{
@@ -77,34 +67,31 @@ const ChapterBottomSheet = ({
Reader Theme
</Text>
<ToggleButton.Row
onValueChange={(value) => {
setReaderTheme(value);
saveReaderTheme(value);
}}
value={readerTheme}
onValueChange={(value) => updateReaderTheme(value)}
value={reader.theme}
style={{ marginTop: 10 }}
>
<ToggleButton
icon="format-text"
color="white"
color="#FFFFFF"
value={1}
style={{
backgroundColor: "black",
backgroundColor: "#000000",
marginHorizontal: 10,
}}
/>
<ToggleButton
icon="format-text"
color="black"
color="#000000"
value={2}
style={{
backgroundColor: "white",
backgroundColor: "#FFFFFF",
marginHorizontal: 10,
}}
/>
<ToggleButton
icon="format-text"
color="black"
color="#000000"
value={3}
style={{
backgroundColor: "#F4ECD8",
@@ -118,12 +105,19 @@ const ChapterBottomSheet = ({
);
};
export default ChapterBottomSheet;
const mapStateToProps = (state) => ({
theme: state.themeReducer.theme,
reader: state.settingsReducer.reader,
});
export default connect(mapStateToProps, {
updateReaderTextSize,
updateReaderTheme,
})(ChapterBottomSheet);
const styles = StyleSheet.create({
contentContainer: {
flex: 1,
// paddingTop: ,
// alignItems: "center",
},
readerSettingsContainer: { flex: 1, alignItems: "center", paddingTop: 30 },
});
src/services/db.js
+1 -4
View File
@@ -432,10 +432,7 @@ export const chapterRead = async (chapterUrl, novelUrl) => {
tx.executeSql(
"UPDATE ChapterTable SET `read` = 1 WHERE chapterUrl = ? AND novelUrl = ?",
[chapterUrl, novelUrl],
(tx, res) =>
console.log(
"Updated reading status of: " + chapterUrl + "/" + novelUrl
),
(tx, res) => {},
(tx, error) => console.log(error)
);
});