From 70d6a805e606f8bf9eee3ed910eeafe77350390e Mon Sep 17 00:00:00 2001 From: Amitoj Singh Date: Thu, 11 Aug 2022 14:56:19 -0400 Subject: [PATCH 1/3] refactor code --- .eslintrc.json | 5 +- .vscode/settings.json | 1 + screens/About.js | 151 ++++++------- screens/Bookmarks.js | 109 ++++++---- screens/EditBaniOrder.js | 230 ++++++++++---------- screens/Home.js | 173 ++++++++------- screens/Reader.js | 446 ++++++++++++++++++--------------------- 7 files changed, 555 insertions(+), 560 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index fc2eb913..693b177e 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -8,6 +8,8 @@ "parser": "babel-eslint", "rules": { "import/no-unresolved": "off", + "global-require": 0, + "react/jsx-no-bind":0, "react/jsx-filename-extension": [ 1, { @@ -18,8 +20,7 @@ "error", { "trailingComma": "es5", - "singleQuote": true, - "printWidth": 100 + "printWidth":100 } ] }, diff --git a/.vscode/settings.json b/.vscode/settings.json index c00b0215..c89fd2da 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,4 +5,5 @@ "editor.formatOnPaste": true, "prettier.semi": true, "javascript.format.semicolons": "insert", + "prettier.printWidth": 100, } diff --git a/screens/About.js b/screens/About.js index d81d2dda..16af451a 100644 --- a/screens/About.js +++ b/screens/About.js @@ -8,35 +8,53 @@ import { ScrollView, TouchableHighlight, StatusBar, - Platform + Platform, } from "react-native"; +import PropTypes from "prop-types"; import { Header } from "react-native-elements"; import Icon from "react-native-vector-icons/MaterialIcons"; -import GLOBAL from "../utils/globals"; import { connect } from "react-redux"; import VersionNumber from "react-native-version-number"; +import GLOBAL from "../utils/globals"; import AnalyticsManager from "../utils/analytics"; import Strings from "../utils/localization"; class Home extends React.Component { componentDidMount() { - AnalyticsManager.getInstance().trackScreenView( - "About", - this.constructor.name - ); + AnalyticsManager.getInstance().trackScreenView("About", this.constructor.name); } render() { + const styles = StyleSheet.create({ + container: { + flex: 1, + padding: 8, + backgroundColor: "#fff", + }, + nightMode: { + backgroundColor: "#000", + color: "#fff", + }, + singleLine: { + flexDirection: "row", + justifyContent: "space-between", + }, + title: { + fontSize: 20, + fontWeight: "bold", + }, + small: { + fontSize: 11, + }, + }); + const { navigation, nightMode } = this.props; return ( - +
this.props.navigation.goBack()} + onPress={() => navigation.goBack()} /> } centerComponent={{ text: Strings.about, - style: { color: GLOBAL.COLOR.TOOLBAR_TINT, fontSize: 18 } + style: { color: GLOBAL.COLOR.TOOLBAR_TINT, fontSize: 18 }, }} /> - - - {Strings.sundar_gutka} - - - {"\n"}{Strings.created_by}: + + {Strings.sundar_gutka} + + {"\n"} + {Strings.created_by}: Linking.openURL("https://khalisfoundation.org")} > - + - {"\n"}{Strings.about_1} + {"\n"} + {Strings.about_1} {"\n"} {"\n"} - {Strings.about_2}{"\n"} + {Strings.about_2} + {"\n"} ! - - {"\n"}{Strings.about_3} + + {"\n"} + {Strings.about_3} {"\n"} {"\n"} {Strings.about_4}{" "} @@ -113,31 +124,26 @@ class Home extends React.Component { {"\n"} Linking.openURL("https://www.banidb.com/")} > - - {"\n"}{Strings.about_6}{"\n"} + + {"\n"} + {Strings.about_6} + {"\n"} - + - + © {new Date().getFullYear()} {Strings.khalis_foundation} - - {Strings.app_version}: {VersionNumber.appVersion} ( - {VersionNumber.buildVersion}){"\n"} + + {Strings.app_version}: {VersionNumber.appVersion} ({VersionNumber.buildVersion}){"\n"} @@ -145,33 +151,32 @@ class Home extends React.Component { ); } } - -const styles = StyleSheet.create({ - container: { - flex: 1, - padding: 8, - backgroundColor: "#fff" - }, - nightMode: { - backgroundColor: "#000", - color: "#fff" - }, - singleLine: { - flexDirection: "row", - justifyContent: "space-between" - }, - title: { - fontSize: 20, - fontWeight: "bold" - }, - small: { - fontSize: 11 - } -}); +Home.propTypes = { + navigation: PropTypes.shape({ + addEventListener: PropTypes.func, + canGoBack: PropTypes.func, + dispatch: PropTypes.func, + getID: PropTypes.func, + getParent: PropTypes.func, + getState: PropTypes.func, + goBack: PropTypes.func, + isFocused: PropTypes.func, + navigate: PropTypes.func, + pop: PropTypes.func, + popToTop: PropTypes.func, + push: PropTypes.func, + removeListener: PropTypes.func, + replace: PropTypes.func, + reset: PropTypes.func, + setOptions: PropTypes.func, + setParams: PropTypes.func, + }).isRequired, + nightMode: PropTypes.bool.isRequired, +}; function mapStateToProps(state) { return { - nightMode: state.nightMode + nightMode: state.nightMode, }; } diff --git a/screens/Bookmarks.js b/screens/Bookmarks.js index 1bb20e3b..fd4f7689 100644 --- a/screens/Bookmarks.js +++ b/screens/Bookmarks.js @@ -4,6 +4,7 @@ import { bindActionCreators } from "redux"; import { View, StatusBar, Platform } from "react-native"; import { Header } from "react-native-elements"; import Icon from "react-native-vector-icons/MaterialIcons"; +import PropTypes from "prop-types"; import GLOBAL from "../utils/globals"; import Database from "../utils/database"; import BaniList from "../components/BaniList"; @@ -21,79 +22,70 @@ class Bookmarks extends React.Component { } componentDidMount() { - Database.getBookmarksForId( - this.props.currentShabad, - this.props.baniLength, - this.props.transliterationLanguage - ).then((bookmarks) => { - this.setState({ - data: bookmarks, - isLoading: false, - }); - }); + const { currentShabad, baniLength, transliterationLanguage } = this.props; + Database.getBookmarksForId(currentShabad, baniLength, transliterationLanguage).then( + (bookmarks) => { + this.setState({ + data: bookmarks, + isLoading: false, + }); + } + ); } - handleOnPress(item, navigator) { - this.props.setScrollIndex(item.shabadId); - this.props.navigation.goBack(); + handleOnPress(item) { + const { setScrollIndex, navigation } = this.props; + setScrollIndex(item.shabadId); + navigation.goBack(); } render() { - ; + const { isLoading, data } = this.state; + const { nightMode, navigation, fontSize, fontFace, transliteration } = this.props; + ; return ( + }} + >
this.props.navigation.goBack()} + onPress={() => navigation.goBack()} /> } centerComponent={{ text: Strings.bookmarks, style: { - color: this.props.nightMode - ? GLOBAL.COLOR.TOOLBAR_TINT - : GLOBAL.COLOR.TOOLBAR_TINT_DARK, + color: nightMode ? GLOBAL.COLOR.TOOLBAR_TINT : GLOBAL.COLOR.TOOLBAR_TINT_DARK, fontSize: 18, }, }} /> @@ -101,6 +93,36 @@ class Bookmarks extends React.Component { } } +Bookmarks.propTypes = { + currentShabad: PropTypes.string.isRequired, + baniLength: PropTypes.string.isRequired, + transliterationLanguage: PropTypes.string.isRequired, + setScrollIndex: PropTypes.func.isRequired, + navigation: PropTypes.shape({ + addEventListener: PropTypes.func, + canGoBack: PropTypes.func, + dispatch: PropTypes.func, + getID: PropTypes.func, + getParent: PropTypes.func, + getState: PropTypes.func, + goBack: PropTypes.func, + isFocused: PropTypes.func, + navigate: PropTypes.func, + pop: PropTypes.func, + popToTop: PropTypes.func, + push: PropTypes.func, + removeListener: PropTypes.func, + replace: PropTypes.func, + reset: PropTypes.func, + setOptions: PropTypes.func, + setParams: PropTypes.func, + }).isRequired, + nightMode: PropTypes.bool.isRequired, + fontSize: PropTypes.string.isRequired, + fontFace: PropTypes.string.isRequired, + transliteration: PropTypes.string.isRequired, +}; + function mapStateToProps(state) { return { nightMode: state.nightMode, @@ -117,7 +139,4 @@ function mapDispatchToProps(dispatch) { return bindActionCreators(actions, dispatch); } -export default connect( - mapStateToProps, - mapDispatchToProps -)(Bookmarks); +export default connect(mapStateToProps, mapDispatchToProps)(Bookmarks); diff --git a/screens/EditBaniOrder.js b/screens/EditBaniOrder.js index 4447413b..c1ac52ec 100644 --- a/screens/EditBaniOrder.js +++ b/screens/EditBaniOrder.js @@ -1,3 +1,5 @@ +/* eslint-disable no-underscore-dangle */ +/* eslint-disable max-classes-per-file */ import React from "react"; import { Animated, @@ -10,49 +12,109 @@ import { Platform, StatusBar, } from "react-native"; +import PropTypes from "prop-types"; import { Header } from "react-native-elements"; import Icon from "react-native-vector-icons/MaterialIcons"; -import GLOBAL from "../utils/globals"; import SortableList from "react-native-sortable-list"; import { connect } from "react-redux"; import { bindActionCreators } from "redux"; +import GLOBAL from "../utils/globals"; import * as actions from "../actions/actions"; import AnalyticsManager from "../utils/analytics"; -import { baseFontSize } from "../utils/helpers"; -import { defaultBaniOrderArray } from "../utils/helpers"; +import { baseFontSize, defaultBaniOrderArray } from "../utils/helpers"; import Strings from "../utils/localization"; const window = Dimensions.get("window"); +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#eee", + + ...Platform.select({ + ios: { + paddingTop: 0, + }, + }), + }, + + list: { + flex: 1, + }, + + contentContainer: { + width: window.width, + }, + + row: { + flexDirection: "row", + alignItems: "center", + backgroundColor: "#fff", + padding: 16, + height: 80, + flex: 1, + marginTop: 4, + marginBottom: 4, + borderRadius: 4, + ...Platform.select({ + ios: { + shadowColor: "rgba(0,0,0,0.2)", + shadowOpacity: 1, + shadowOffset: { height: 2, width: 2 }, + shadowRadius: 2, + }, + + android: { + elevation: 0, + marginHorizontal: 30, + }, + }), + }, + + image: { + width: 50, + height: 50, + marginRight: 20, + }, +}); class EditBaniOrder extends React.Component { componentDidMount() { - AnalyticsManager.getInstance().trackScreenView( - "Index Reorder", - this.constructor.name - ); + AnalyticsManager.getInstance().trackScreenView("Index Reorder", this.constructor.name); } + _renderRow = ({ data, active }) => { + const { nightMode, transliteration, fontFace } = this.props; + return ( + + ); + }; + render() { + const { navigation, setBaniOrder, nightMode, mergedBaniData, baniOrder } = this.props; return ( - + }} + > +
this.props.navigation.goBack()} + onPress={() => navigation.goBack()} /> } centerComponent={{ @@ -64,46 +126,27 @@ class EditBaniOrder extends React.Component { name="refresh" color={GLOBAL.COLOR.TOOLBAR_TINT} size={30} - onPress={() => this.props.setBaniOrder(defaultBaniOrderArray)} + onPress={() => setBaniOrder(defaultBaniOrderArray)} /> } /> - + { this.newOrder = nextOrder; }} - onReleaseRow={(key) => - this.newOrder !== undefined - ? this.props.setBaniOrder(this.newOrder) - : null - } + onReleaseRow={() => (this.newOrder !== undefined ? setBaniOrder(this.newOrder) : null)} + // eslint-disable-next-line no-underscore-dangle renderRow={this._renderRow} - order={this.props.baniOrder} + order={baniOrder} /> ); } - - _renderRow = ({ data, active }) => { - return ( - - ); - }; } class Row extends React.Component { @@ -147,8 +190,10 @@ class Row extends React.Component { }; } + // eslint-disable-next-line camelcase UNSAFE_componentWillReceiveProps(nextProps) { - if (this.props.active !== nextProps.active) { + const { active } = this.props; + if (active !== nextProps.active) { Animated.timing(this._active, { duration: 300, easing: Easing.bounce, @@ -158,28 +203,19 @@ class Row extends React.Component { } render() { - const { data, active, nightMode, transliteration, fontFace } = this.props; + const { data, nightMode, transliteration, fontFace } = this.props; return ( - - {data.folder && ( - - )} + + {data.folder && } + ]} + > {transliteration ? data.translit : data.gurmukhi} @@ -187,60 +223,31 @@ class Row extends React.Component { } } -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: "center", - alignItems: "center", - backgroundColor: "#eee", - - ...Platform.select({ - ios: { - paddingTop: 0, - }, - }), - }, - - list: { - flex: 1, - }, - - contentContainer: { - width: window.width, - }, - - row: { - flexDirection: "row", - alignItems: "center", - backgroundColor: "#fff", - padding: 16, - height: 80, - flex: 1, - marginTop: 4, - marginBottom: 4, - borderRadius: 4, +EditBaniOrder.propTypes = { + nightMode: PropTypes.bool.isRequired, + transliteration: PropTypes.string.isRequired, + fontFace: PropTypes.string.isRequired, + navigation: PropTypes.func.isRequired, + setBaniOrder: PropTypes.func.isRequired, + mergedBaniData: PropTypes.shape({ + baniOrder: PropTypes.arrayOf( + PropTypes.shape({ + gurmukhi: PropTypes.string, + id: PropTypes.number, + translit: PropTypes.string, + }) + ), + }).isRequired, + baniOrder: PropTypes.arrayOf(PropTypes.number).isRequired, +}; - ...Platform.select({ - ios: { - shadowColor: "rgba(0,0,0,0.2)", - shadowOpacity: 1, - shadowOffset: { height: 2, width: 2 }, - shadowRadius: 2, - }, - - android: { - elevation: 0, - marginHorizontal: 30, - }, - }), - }, - - image: { - width: 50, - height: 50, - marginRight: 20, - }, -}); +Row.propTypes = { + data: PropTypes.shape().isRequired, + nightMode: PropTypes.bool.isRequired, + transliteration: PropTypes.string.isRequired, + fontFace: PropTypes.string.isRequired, + active: PropTypes.string.isRequired, +}; function mapStateToProps(state) { return { @@ -257,7 +264,4 @@ function mapDispatchToProps(dispatch) { return bindActionCreators(actions, dispatch); } -export default connect( - mapStateToProps, - mapDispatchToProps -)(EditBaniOrder); +export default connect(mapStateToProps, mapDispatchToProps)(EditBaniOrder); diff --git a/screens/Home.js b/screens/Home.js index 1befb4c2..faa58757 100644 --- a/screens/Home.js +++ b/screens/Home.js @@ -5,7 +5,7 @@ import KeepAwake from "react-native-keep-awake"; import { SafeAreaView, View, Text, StatusBar, Platform } from "react-native"; import { Header } from "react-native-elements"; import Icon from "react-native-vector-icons/MaterialIcons"; -import PropTypes from 'prop-types'; +import PropTypes from "prop-types"; import VersionNumber from "react-native-version-number"; // import messaging from '@react-native-firebase/messaging'; import Sound from "react-native-sound"; @@ -38,8 +38,21 @@ class Home extends React.Component { async componentDidMount() { await this.loadBaniList(); let showBaniLengthSelector = false; - const {appVersion,setAppVersion,baniLength,language, - fontFace,setFontFace,screenAwake,autoScroll,statusBar,statistics,reminderSound,reminderBanis,reminders}=this.props + const { + appVersion, + setAppVersion, + baniLength, + language, + fontFace, + setFontFace, + screenAwake, + autoScroll, + statusBar, + statistics, + reminderSound, + reminderBanis, + reminders, + } = this.props; if (appVersion !== VersionNumber.appVersion) { if (appVersion === "") { // Is first install @@ -55,7 +68,7 @@ class Home extends React.Component { Strings.setLanguage(language); } - if(!fontFace || fontFace === "GurbaniAkharSG"){ + if (!fontFace || fontFace === "GurbaniAkharSG") { setFontFace("GurbaniAkharTrue"); } @@ -63,25 +76,26 @@ class Home extends React.Component { this.changeStatusBar(statusBar); AnalyticsManager.getInstance().allowTracking(statistics); - NotificationsManager.getInstance().updateReminders( - reminders, - reminderSound, - reminderBanis - ); - AnalyticsManager.getInstance().trackScreenView( - "Home Screen", - this.constructor.name - ); + NotificationsManager.getInstance().updateReminders(reminders, reminderSound, reminderBanis); + AnalyticsManager.getInstance().trackScreenView("Home Screen", this.constructor.name); NotificationsManager.getInstance().removeAllDeliveredNotifications(); } componentDidUpdate(prevProps) { - const {baniOrder,transliterationLanguage,screenAwake,autoScroll,statusBar,statistics,reminders,reminderBanis,reminderSound}=this.props + const { + baniOrder, + transliterationLanguage, + screenAwake, + autoScroll, + statusBar, + statistics, + reminders, + reminderBanis, + reminderSound, + } = this.props; if (prevProps.baniOrder !== baniOrder) { this.sortBani(); - } else if ( - prevProps.transliterationLanguage !== transliterationLanguage - ) { + } else if (prevProps.transliterationLanguage !== transliterationLanguage) { this.loadBaniList(); } else if (prevProps.screenAwake !== screenAwake) { this.changeKeepAwake(screenAwake); @@ -93,67 +107,55 @@ class Home extends React.Component { } } else if (prevProps.statusBar !== statusBar) { this.changeStatusBar(statusBar); - } else if (prevProps.statistics !==statistics) { + } else if (prevProps.statistics !== statistics) { AnalyticsManager.getInstance().allowTracking(statistics); } else if (prevProps.reminders !== reminders) { NotificationsManager.getInstance().checkPermissions(reminders); - NotificationsManager.getInstance().updateReminders( - reminders, - reminderSound, - reminderBanis - ); + NotificationsManager.getInstance().updateReminders(reminders, reminderSound, reminderBanis); } else if (prevProps.reminderSound !== reminderSound) { - NotificationsManager.getInstance().updateReminders( - reminders, - reminderSound, - reminderBanis - ); + NotificationsManager.getInstance().updateReminders(reminders, reminderSound, reminderBanis); if (actions.REMINDER_SOUNDS.indexOf(reminderSound) !== 0) { - const sound = new Sound( - reminderSound, - Sound.MAIN_BUNDLE, - (error) => { - if (error) { - return; - } - // loaded successfully - sound.play(() => { - sound.reset(); - }); + const sound = new Sound(reminderSound, Sound.MAIN_BUNDLE, (error) => { + if (error) { + return; } - ); + // loaded successfully + sound.play(() => { + sound.reset(); + }); + }); } } } handleOnPress(item, navigator) { if (!item.folder) { - const { setCurrentShabad} = this.props; + const { setCurrentShabad } = this.props; setCurrentShabad(item.id); - navigator.navigate('Reader', { + navigator.navigate("Reader", { key: `Reader-${item.id}`, params: { item }, }); } else { - navigator.navigate('FolderBani', { + navigator.navigate("FolderBani", { key: `Folder-${item.roman}`, params: { data: item.folder, title: item.gurmukhi }, }); } } - changeKeepAwake=(shouldBeAwake)=> { + changeKeepAwake = (shouldBeAwake) => { if (shouldBeAwake) { KeepAwake.activate(); } else { KeepAwake.deactivate(); } - } + }; - changeStatusBar=(shouldBeHidden)=> { + changeStatusBar = (shouldBeHidden) => { StatusBar.setHidden(shouldBeHidden); - } + }; // handleNotificationEvent(notificationOpen) { // let key = notificationOpen.notification.data["key"]; @@ -169,15 +171,12 @@ class Home extends React.Component { // params: { item: item }, // }); // } - + sortBani() { - const {mergedBaniData,baniOrder}=this.props; - + const { mergedBaniData, baniOrder } = this.props; + this.setState({ - data: this.reorder( - mergedBaniData.baniOrder, - baniOrder - ), + data: this.reorder(mergedBaniData.baniOrder, baniOrder), }); } @@ -189,18 +188,18 @@ class Home extends React.Component { // } async loadBaniList() { - const {transliterationLanguage,setMergedBaniData}=this.props - const baniList=await Database.getBaniList(transliterationLanguage) - setMergedBaniData(mergedBaniList(baniList)); - this.sortBani(); - this.setState({ - isLoading: false, - }); + const { transliterationLanguage, setMergedBaniData } = this.props; + const baniList = await Database.getBaniList(transliterationLanguage); + setMergedBaniData(mergedBaniList(baniList)); + this.sortBani(); + this.setState({ + isLoading: false, + }); } reorder(arr, index) { - const ordered = [] - const newIndex = [] + const ordered = []; + const newIndex = []; // eslint-disable-next-line no-plusplus for (let i = 0; i < index.length; i++) { if (arr[index[i]]) { @@ -209,27 +208,25 @@ class Home extends React.Component { } } if (newIndex.length !== index.length) { - const {baniOrder}=this.props + const { baniOrder } = this.props; baniOrder.setBaniOrder(newIndex); } return ordered; } render() { - const {showLengthSelector,data,isLoading}=this.state; - const {navigation,nightMode,fontSize,fontFace,transliteration}=this.props + const { showLengthSelector, data, isLoading } = this.state; + const { navigation, nightMode, fontSize, fontFace, transliteration } = this.props; return ( - + flex: 1, + backgroundColor: GLOBAL.COLOR.TOOLBAR_COLOR, + }} + > {showLengthSelector && } - +
+ }} + > + ]} + > {Strings.fateh} - + }} + > + ]} + > + ]} + > Œ {" "} {Strings.sg_title}{" "} @@ -283,7 +284,8 @@ class Home extends React.Component { { fontSize: 32, }, - ]}> + ]} + > ‰ @@ -297,9 +299,7 @@ class Home extends React.Component { }} color={GLOBAL.COLOR.TOOLBAR_TINT} size={30} - onPress={() => - navigation.navigate('Settings') - } + onPress={() => navigation.navigate("Settings")} /> { - const {navigation}=this.props; + handleBackPress = () => { + const { navigation } = this.props; this.webView.postMessage(JSON.stringify({ Back: true })); - setTimeout(()=>{navigation.goBack();},100); - } + setTimeout(() => { + navigation.goBack(); + }, 100); + }; - handleMessage(message) { - const {animationPosition}=this.state - if (message.nativeEvent.data.includes('save')) { - this.savePositionToProps(message) + handleMessage(message) { + const { animationPosition } = this.state; + if (message.nativeEvent.data.includes("save")) { + this.savePositionToProps(message); } if (message.nativeEvent.data === "toggle") { if (JSON.stringify(animationPosition) === 0) { @@ -110,9 +110,9 @@ class Reader extends React.Component { } } - onLayout() { - const {paused}=this.state - const {autoScrollShabadSpeed}=this.props + onLayout() { + const { paused } = this.state; + const { autoScrollShabadSpeed } = this.props; let multiplier = 1.0; const { width, height } = Dimensions.get("window"); if (width > height) { @@ -132,32 +132,44 @@ class Reader extends React.Component { } setPosition() { - const {startBani}=this.props; + const { startBani } = this.props; const startBaniList = JSON.parse(startBani); let progress = 0; if (startBaniList.length > 0) { - const data = startBaniList.find(bani=>bani.id===this.currentBani.id); - if(data) progress=data.progress + const data = startBaniList.find((bani) => bani.id === this.currentBani.id); + if (data) progress = data.progress; } - if(Number(progress)===1 || Number(progress)>1){ - progress=0 + if (Number(progress) === 1 || Number(progress) > 1) { + progress = 0; } this.currentBani.progress = progress; } toggleHeader(state) { - const {animationPosition}=this.state; + const { animationPosition } = this.state; Animated.timing(animationPosition, { duration: this.slideDuration, useNativeDriver: false, toValue: state === "hide" ? HEADER_POSITION : 0, }).start(); - StatusBar.setHidden(state === "hide", 'fade'); + StatusBar.setHidden(state === "hide", "fade"); } loadShabad() { - const {currentShabad,baniLength,larivaar,larivaarAssist,padchhedSetting,manglacharanPosition,paragraphMode,visram,vishraamOption,vishraamSource,transliterationLanguage}=this.props + const { + currentShabad, + baniLength, + larivaar, + larivaarAssist, + padchhedSetting, + manglacharanPosition, + paragraphMode, + visram, + vishraamOption, + vishraamSource, + transliterationLanguage, + } = this.props; Database.getShabadForId( currentShabad, baniLength, @@ -170,26 +182,28 @@ class Reader extends React.Component { vishraamOption, vishraamSource, transliterationLanguage - ).then((shabad) => { - this.setState({ - data: shabad, - isLoading: false, + ) + .then((shabad) => { + this.setState({ + data: shabad, + isLoading: false, + }); + }) + .catch((error) => { + console.log(error); }); - }).catch(error => { - console.log(error); - }); } trackScreenForShabad(params) { - const name = params.item.translit + const name = params.item.translit; AnalyticsManager.getInstance().trackScreenView(name, this.constructor.name); - this.currentBani.id = params.item.id - this.currentBani.translit = params.item.translit + this.currentBani.id = params.item.id; + this.currentBani.translit = params.item.translit; } scrollToItem(index) { let viewPosition; - const {data}=this.state + const { data } = this.state; // eslint-disable-next-line no-plusplus for (let i = 0; i < data.length; i++) { if (data[i].id <= index) { @@ -208,9 +222,17 @@ class Reader extends React.Component { } loadHTML(data, headerHeight) { - const {fontSize,fontFace,nightMode,transliteration,larivaar,englishTranslations,punjabiTranslations,spanishTranslations}=this.props + const { + fontSize, + fontFace, + nightMode, + transliteration, + larivaar, + englishTranslations, + punjabiTranslations, + spanishTranslations, + } = this.props; if (data.length > 0) { - let html = "" + "" + @@ -219,132 +241,103 @@ class Reader extends React.Component { ios: `${fontFace}.ttf`, android: `file:///android_asset/fonts/${fontFace}.ttf`, }); - html += - `@font-face { + html += `@font-face { font-family: '${fontFace}'; src: local('${fontFace}'), url('${fileUri}') ; - }` ; + }`; html += - `${"body { " + - "background-color: "}${ - nightMode ? "#000" : "#fff" - };` + - `word-break: break-word;` + - `color: ${ - nightMode ? "#fff" : "#000" - };` + - `padding-top: ${ - headerHeight - }px; }`; + `"body { " + "background-color: "}${nightMode ? "#000" : "#fff"};` + + `word-break: break-word;` + + `color: ${nightMode ? "#fff" : "#000"};` + + `padding-top: ${headerHeight}px; }`; html += "* { -webkit-user-select: none; }"; html += ``; html += ""; - data.forEach(function (item) { - let textAlign='left' - switch(item.header){ - case 0: textAlign="left"; - break; - case 1: textAlign="center"; - break; - case 2: textAlign="center"; - break; + data.forEach((item) => { + let textAlign = "left"; + switch (item.header) { + case 0: + textAlign = "left"; + break; + case 1: + textAlign = "center"; + break; + case 2: + textAlign = "center"; + break; default: - textAlign="right"; + textAlign = "right"; break; } html += "
"; - html += - `
${ - item.gurmukhi - }
`; + html += `
${item.gurmukhi}
`; if (transliteration) { - html += - `
${ - item.translit + )}; text-align: ${textAlign}; font-weight: ${item.header === 0 ? "normal" : "bold"};">${ + item.translit }
`; } if (englishTranslations) { - html += - `
${ - item.englishTranslations + )}; text-align: ${textAlign}; font-weight: ${item.header === 0 ? "normal" : "bold"};">${ + item.englishTranslations }
`; } if (punjabiTranslations) { - html += - `
${ - item.punjabiTranslations + )}; text-align: ${textAlign}; font-weight: ${item.header === 0 ? "normal" : "bold"};">${ + item.punjabiTranslations }
`; } if (spanishTranslations) { - html += - `
${ - item.spanishTranslations + )}; text-align: ${textAlign}; font-weight: ${item.header === 0 ? "normal" : "bold"};">${ + item.spanishTranslations }
`; } html += "
"; @@ -352,12 +345,12 @@ class Reader extends React.Component { html += ""; return html; } - return "" + return ""; } loadScrollJS() { const listener = Platform.OS === "android" ? "document" : "window"; - const position = this.currentBani.progress + const position = this.currentBani.progress; return ` var autoScrollTimeout; var autoScrollSpeed = 0; @@ -495,43 +488,51 @@ class Reader extends React.Component { }, false); `; } - + savePositionToProps(message) { - const {startBani,setStartBani}=this.props - const {data} = message.nativeEvent - const position = data.split('-')[1] - - const startBaniList = JSON.parse(startBani) - if (startBaniList.length === 0) { - this.currentBani.progress = position - startBaniList.push(this.currentBani) - } - else { - let isFound = false - startBaniList.forEach(element => { + const { startBani, setStartBani } = this.props; + const { data } = message.nativeEvent; + const position = data.split("-")[1]; + + const startBaniList = JSON.parse(startBani); + if (startBaniList.length === 0) { + this.currentBani.progress = position; + startBaniList.push(this.currentBani); + } else { + let isFound = false; + startBaniList.forEach((element) => { + if (element.id === this.currentBani.id) { + isFound = true; + } + }); + if (isFound) { + startBaniList.forEach((element) => { if (element.id === this.currentBani.id) { - isFound = true + // eslint-disable-next-line no-param-reassign + element.progress = position; } }); - if (isFound) { - startBaniList.forEach(element => { - if (element.id === this.currentBani.id) { - // eslint-disable-next-line no-param-reassign - element.progress = position - } - }) - } - else { - this.currentBani.progress = position - startBaniList.push(this.currentBani) - } + } else { + this.currentBani.progress = position; + startBaniList.push(this.currentBani); } - setStartBani(JSON.stringify(startBaniList)) + } + setStartBani(JSON.stringify(startBaniList)); } - render() { - const {route,nightMode,transliteration,fontFace,navigation,autoScroll,autoScrollShabadSpeed,currentShabad,setAutoScrollSpeed}=this.props; - const {data,isLoading,animationPosition,scrollMultiplier,paused}=this.state; + render() { + const { + route, + nightMode, + transliteration, + fontFace, + navigation, + autoScroll, + autoScrollShabadSpeed, + currentShabad, + setAutoScrollSpeed, + } = this.props; + const { data, isLoading, animationPosition, scrollMultiplier, paused } = this.state; const { params } = route.params; this.trackScreenForShabad(params); const styles = StyleSheet.create({ @@ -558,19 +559,19 @@ class Reader extends React.Component { }); return ( + onLayout={this.onLayout.bind(this)} + > {this.webView = webView}} - decelerationRate='normal' + ref={(webView) => { + this.webView = webView; + }} + decelerationRate="normal" source={{ html: this.loadHTML(data, this.headerHeight), baseUrl: "", @@ -579,29 +580,18 @@ class Reader extends React.Component { onMessage={this.handleMessage.bind(this)} /> - +
{ this.headerHeight = event.nativeEvent.layout.height; }} @@ -620,9 +610,7 @@ class Reader extends React.Component { : this.truncate.apply(params.item.gurmukhi, [25]), style: { color: GLOBAL.COLOR.TOOLBAR_TINT, - fontFamily: transliteration - ? null - : fontFace, + fontFamily: transliteration ? null : fontFace, fontSize: 20, }, }} @@ -635,13 +623,13 @@ class Reader extends React.Component { onPress={() => { const autoScrollSpeed = { autoScroll: 0, - scrollMultiplier, + scrollMultiplier, }; this.webView.postMessage(JSON.stringify(autoScrollSpeed)); this.setState({ paused: true, }); - navigation.navigate('Settings'); + navigation.navigate("Settings"); }} /> { - this.trackScreenForShabad( - params - ); - navigation.navigate('Bookmarks'); + this.trackScreenForShabad(params); + navigation.navigate("Bookmarks"); }} /> @@ -671,7 +657,8 @@ class Reader extends React.Component { paddingBottom: 25, backgroundColor: GLOBAL.COLOR.READER_FOOTER_COLOR, }, - ]}> + ]} + > {paused && ( { - let scrollSpeed = autoScrollShabadSpeed[ - currentShabad - ] - ? autoScrollShabadSpeed[ - currentShabad - ] + let scrollSpeed = autoScrollShabadSpeed[currentShabad] + ? autoScrollShabadSpeed[currentShabad] : 50; if (scrollSpeed === 0) { scrollSpeed = 1; - setAutoScrollSpeed( - scrollSpeed, - currentShabad - ); + setAutoScrollSpeed(scrollSpeed, currentShabad); } const autoScrollSpeed = { autoScroll: scrollSpeed, @@ -724,9 +704,7 @@ class Reader extends React.Component { /> )} { - setAutoScrollSpeed( - value, - currentShabad - ); + setAutoScrollSpeed(value, currentShabad); const speed = value; - if(speed === 0) {this.setState({ paused: true })} - else{ this.setState({ paused: false })} + if (speed === 0) { + this.setState({ paused: true }); + } else { + this.setState({ paused: false }); + } const autoScrollSpeed = { autoScroll: speed, @@ -755,10 +731,7 @@ class Reader extends React.Component { this.webView.postMessage(JSON.stringify(autoScrollSpeed)); }} onSlidingComplete={(value) => { - AnalyticsManager.getInstance().trackReaderEvent( - "autoScrollSpeed", - value - ); + AnalyticsManager.getInstance().trackReaderEvent("autoScrollSpeed", value); }} /> - {autoScrollShabadSpeed[currentShabad] - ? autoScrollShabadSpeed[currentShabad] - : 50} + }} + > + {autoScrollShabadSpeed[currentShabad] ? autoScrollShabadSpeed[currentShabad] : 50} @@ -809,7 +781,6 @@ Reader.propTypes = { setAutoScrollSpeed: PropTypes.func.isRequired, }; - function mapStateToProps(state) { return { nightMode: state.nightMode, @@ -841,7 +812,4 @@ function mapDispatchToProps(dispatch) { return bindActionCreators(actions, dispatch); } -export default connect( - mapStateToProps, - mapDispatchToProps -)(Reader); +export default connect(mapStateToProps, mapDispatchToProps)(Reader); From 8ba202f35300cf7d96dfc86d7522d8545e36528c Mon Sep 17 00:00:00 2001 From: Amitoj Singh Date: Thu, 18 Aug 2022 15:20:32 -0400 Subject: [PATCH 2/3] fix: constants and refactor --- screens/About.js | 35 ++++++----- screens/EditBaniOrder.js | 132 +++------------------------------------ screens/Home.js | 24 +++---- screens/Row.js | 117 ++++++++++++++++++++++++++++++++++ utils/constant.js | 17 +++++ utils/globals.js | 12 +++- 6 files changed, 181 insertions(+), 156 deletions(-) create mode 100644 screens/Row.js create mode 100644 utils/constant.js diff --git a/screens/About.js b/screens/About.js index 16af451a..6619a5b5 100644 --- a/screens/About.js +++ b/screens/About.js @@ -15,13 +15,14 @@ import { Header } from "react-native-elements"; import Icon from "react-native-vector-icons/MaterialIcons"; import { connect } from "react-redux"; import VersionNumber from "react-native-version-number"; -import GLOBAL from "../utils/globals"; import AnalyticsManager from "../utils/analytics"; import Strings from "../utils/localization"; +import GLOBAL from "../utils/globals"; +import constant from "../utils/constant"; class Home extends React.Component { componentDidMount() { - AnalyticsManager.getInstance().trackScreenView("About", this.constructor.name); + AnalyticsManager.getInstance().trackScreenView(constant.ABOUT, this.constructor.name); } render() { @@ -29,11 +30,11 @@ class Home extends React.Component { container: { flex: 1, padding: 8, - backgroundColor: "#fff", + backgroundColor: GLOBAL.COLOR.WHITE_COLOR, }, nightMode: { - backgroundColor: "#000", - color: "#fff", + backgroundColor: GLOBAL.COLOR.NIGHT_BLACK, + color: GLOBAL.COLOR.WHITE_COLOR, }, singleLine: { flexDirection: "row", @@ -57,7 +58,7 @@ class Home extends React.Component {
- + {Strings.sundar_gutka} {"\n"} {Strings.created_by}: Linking.openURL("https://khalisfoundation.org")} + underlayColor={GLOBAL.COLOR.UNDERLAY_COLOR} + onPress={() => Linking.openURL(constant.KHALIS_FOUNDATION_URL)} > Linking.openURL("https://khalisfoundation.org")} + style={{ color: GLOBAL.COLOR.UNDERLAY_COLOR }} + onPress={() => Linking.openURL(constant.KHALIS_FOUNDATION_URL)} > - http://www.KhalisFoundation.org + constant.KHALIS_FOUNDATION_URL ! @@ -115,8 +118,8 @@ class Home extends React.Component { {"\n"} {Strings.about_4}{" "} Linking.openURL("https://www.banidb.com/")} + style={{ color: GLOBAL.COLOR.UNDERLAY_COLOR }} + onPress={() => Linking.openURL(constant.BANI_DB_URL)} > {Strings.baniDB} {" "} @@ -124,8 +127,8 @@ class Home extends React.Component { {"\n"} Linking.openURL("https://www.banidb.com/")} + underlayColor={GLOBAL.COLOR.UNDERLAY_COLOR} + onPress={() => Linking.openURL(constant.BANI_DB_URL)} > diff --git a/screens/EditBaniOrder.js b/screens/EditBaniOrder.js index c1ac52ec..1526a230 100644 --- a/screens/EditBaniOrder.js +++ b/screens/EditBaniOrder.js @@ -1,17 +1,5 @@ -/* eslint-disable no-underscore-dangle */ -/* eslint-disable max-classes-per-file */ import React from "react"; -import { - Animated, - Easing, - StyleSheet, - Text, - Image, - View, - Dimensions, - Platform, - StatusBar, -} from "react-native"; +import { StyleSheet, View, Dimensions, Platform, StatusBar } from "react-native"; import PropTypes from "prop-types"; import { Header } from "react-native-elements"; import Icon from "react-native-vector-icons/MaterialIcons"; @@ -21,8 +9,10 @@ import { bindActionCreators } from "redux"; import GLOBAL from "../utils/globals"; import * as actions from "../actions/actions"; import AnalyticsManager from "../utils/analytics"; -import { baseFontSize, defaultBaniOrderArray } from "../utils/helpers"; +import { defaultBaniOrderArray } from "../utils/helpers"; import Strings from "../utils/localization"; +import CONSTANT from "../utils/constant"; +import Row from "./Row"; const window = Dimensions.get("window"); const styles = StyleSheet.create({ @@ -30,7 +20,7 @@ const styles = StyleSheet.create({ flex: 1, justifyContent: "center", alignItems: "center", - backgroundColor: "#eee", + backgroundColor: GLOBAL.COLOR.BANI_ORDER_BACK_COLOR, ...Platform.select({ ios: { @@ -47,32 +37,6 @@ const styles = StyleSheet.create({ width: window.width, }, - row: { - flexDirection: "row", - alignItems: "center", - backgroundColor: "#fff", - padding: 16, - height: 80, - flex: 1, - marginTop: 4, - marginBottom: 4, - borderRadius: 4, - - ...Platform.select({ - ios: { - shadowColor: "rgba(0,0,0,0.2)", - shadowOpacity: 1, - shadowOffset: { height: 2, width: 2 }, - shadowRadius: 2, - }, - - android: { - elevation: 0, - marginHorizontal: 30, - }, - }), - }, - image: { width: 50, height: 50, @@ -81,7 +45,7 @@ const styles = StyleSheet.create({ }); class EditBaniOrder extends React.Component { componentDidMount() { - AnalyticsManager.getInstance().trackScreenView("Index Reorder", this.constructor.name); + AnalyticsManager.getInstance().trackScreenView(CONSTANT.INDEX_REORDER, this.constructor.name); } _renderRow = ({ data, active }) => { @@ -108,7 +72,7 @@ class EditBaniOrder extends React.Component {
- {data.folder && } - - - {transliteration ? data.translit : data.gurmukhi} - - - ); - } -} - EditBaniOrder.propTypes = { nightMode: PropTypes.bool.isRequired, transliteration: PropTypes.string.isRequired, @@ -241,14 +131,6 @@ EditBaniOrder.propTypes = { baniOrder: PropTypes.arrayOf(PropTypes.number).isRequired, }; -Row.propTypes = { - data: PropTypes.shape().isRequired, - nightMode: PropTypes.bool.isRequired, - transliteration: PropTypes.string.isRequired, - fontFace: PropTypes.string.isRequired, - active: PropTypes.string.isRequired, -}; - function mapStateToProps(state) { return { nightMode: state.nightMode, diff --git a/screens/Home.js b/screens/Home.js index faa58757..5895e627 100644 --- a/screens/Home.js +++ b/screens/Home.js @@ -18,6 +18,7 @@ import * as actions from "../actions/actions"; import BaniList from "../components/BaniList"; import BaniLengthSelector from "../components/BaniLengthSelector"; import Strings from "../utils/localization"; +import CONSTANT from "../utils/constant"; class Home extends React.Component { static navigationOptions = { header: null }; @@ -32,7 +33,7 @@ class Home extends React.Component { }; // Enable playback in silence mode - Sound.setCategory("Ambient", true); // true = mixWithOthers + Sound.setCategory(CONSTANT.AMBIENT, true); // true = mixWithOthers } async componentDidMount() { @@ -64,12 +65,12 @@ class Home extends React.Component { this.setState({ showLengthSelector: true }); } - if (language !== "DEFAULT") { + if (language !== CONSTANT.DEFAULT) { Strings.setLanguage(language); } - if (!fontFace || fontFace === "GurbaniAkharSG") { - setFontFace("GurbaniAkharTrue"); + if (!fontFace || fontFace === CONSTANT.GURBANI_AKHAR_SG) { + setFontFace(CONSTANT.GURBANI_AKHAR_TRUE); } this.changeKeepAwake(screenAwake || autoScroll); @@ -77,7 +78,7 @@ class Home extends React.Component { AnalyticsManager.getInstance().allowTracking(statistics); NotificationsManager.getInstance().updateReminders(reminders, reminderSound, reminderBanis); - AnalyticsManager.getInstance().trackScreenView("Home Screen", this.constructor.name); + AnalyticsManager.getInstance().trackScreenView(CONSTANT.HOME_SCREEN, this.constructor.name); NotificationsManager.getInstance().removeAllDeliveredNotifications(); } @@ -120,7 +121,6 @@ class Home extends React.Component { if (error) { return; } - // loaded successfully sound.play(() => { sound.reset(); }); @@ -133,12 +133,12 @@ class Home extends React.Component { if (!item.folder) { const { setCurrentShabad } = this.props; setCurrentShabad(item.id); - navigator.navigate("Reader", { + navigator.navigate(CONSTANT.READER, { key: `Reader-${item.id}`, params: { item }, }); } else { - navigator.navigate("FolderBani", { + navigator.navigate(CONSTANT.FOLDER_BANI, { key: `Folder-${item.roman}`, params: { data: item.folder, title: item.gurmukhi }, }); @@ -231,7 +231,7 @@ class Home extends React.Component { backgroundColor={GLOBAL.COLOR.TOOLBAR_COLOR} containerStyle={[ { height: 0, borderBottomWidth: 0 }, - Platform.OS === "android" && { paddingTop: 20 }, + Platform.OS === CONSTANT.ANDROID && { paddingTop: 20 }, ]} /> navigation.navigate("Settings")} + onPress={() => navigation.navigate(CONSTANT.SETTINGS)} /> + {data.folder && } + + + {transliteration ? data.translit : data.gurmukhi} + + + ); + } +} + +Row.propTypes = { + data: PropTypes.shape().isRequired, + nightMode: PropTypes.bool.isRequired, + transliteration: PropTypes.string.isRequired, + fontFace: PropTypes.string.isRequired, + active: PropTypes.string.isRequired, +}; diff --git a/utils/constant.js b/utils/constant.js new file mode 100644 index 00000000..8ecf7de8 --- /dev/null +++ b/utils/constant.js @@ -0,0 +1,17 @@ +export default { + ABOUT: "About", + INDEX_REORDER: "Index Reorder", + ANDROID: "android", + KHALIS_FOUNDATION_URL: "https://khalisfoundation.org", + BANI_DB_URL: "https://www.banidb.com/", + MEDIUM: "MEDIUM", + READER: "Reader", + FOLDER_BANI: "FolderBani", + AMBIENT: "Ambient", + DEFAULT: "DEFAULT", + GURBANI_AKHAR_SG: "GurbaniAkharSG", + GURBANI_AKHAR_TRUE: "GurbaniAkharTrue", + HOME_SCREEN: "Home Screen", + GURBANI_AKHAR_HEAVY_TRUE: "GurbaniAkharHeavyTrue", + SETTINGS: "Settings", +}; diff --git a/utils/globals.js b/utils/globals.js index a6a33a19..b50ffb91 100644 --- a/utils/globals.js +++ b/utils/globals.js @@ -30,6 +30,12 @@ export default { COMPONENT_COLOR_NIGHT_MODE: "#fefefe", COMPONENT_COLOR: "#232323", VISHRAM_SHORT: "#ffc500", - VISHRAM_LONG: "#ff4500" - } -}; \ No newline at end of file + VISHRAM_LONG: "#ff4500", + WHITE_COLOR: "#fff", + NIGHT_BLACK: "#000", + UNDERLAY_COLOR: "#009bff", + BANI_ORDER_BACK_COLOR: "eee", + IOS_SHADOW_COLOR: "rgba(0,0,0,0.2)", + LIGHT_MODE_COLOR: "#222222", + }, +}; From 5dbabd0335e2f9be7edc43031d754761c320ec12 Mon Sep 17 00:00:00 2001 From: Amitoj Singh Date: Tue, 23 Aug 2022 18:56:12 -0400 Subject: [PATCH 3/3] fix: unsafe component, color, underScore --- screens/EditBaniOrder.js | 8 ++++---- screens/Row.js | 3 +-- utils/globals.js | 1 + 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/screens/EditBaniOrder.js b/screens/EditBaniOrder.js index 1526a230..8805c080 100644 --- a/screens/EditBaniOrder.js +++ b/screens/EditBaniOrder.js @@ -48,7 +48,7 @@ class EditBaniOrder extends React.Component { AnalyticsManager.getInstance().trackScreenView(CONSTANT.INDEX_REORDER, this.constructor.name); } - _renderRow = ({ data, active }) => { + renderRow = ({ data, active }) => { const { nightMode, transliteration, fontFace } = this.props; return ( } /> - + (this.newOrder !== undefined ? setBaniOrder(this.newOrder) : null)} - // eslint-disable-next-line no-underscore-dangle - renderRow={this._renderRow} + renderRow={this.renderRow} order={baniOrder} /> diff --git a/screens/Row.js b/screens/Row.js index 2d4b1123..7c6e0de4 100644 --- a/screens/Row.js +++ b/screens/Row.js @@ -73,8 +73,7 @@ class Row extends React.Component { }; } - // eslint-disable-next-line camelcase - UNSAFE_componentWillReceiveProps(nextProps) { + static getDerivedStateFromProps(nextProps) { const { active } = this.props; if (active !== nextProps.active) { Animated.timing(this.active, { diff --git a/utils/globals.js b/utils/globals.js index b50ffb91..6c2cd03d 100644 --- a/utils/globals.js +++ b/utils/globals.js @@ -37,5 +37,6 @@ export default { BANI_ORDER_BACK_COLOR: "eee", IOS_SHADOW_COLOR: "rgba(0,0,0,0.2)", LIGHT_MODE_COLOR: "#222222", + VIEW_BACK_COLOR: "#464646", }, };