lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chore/retire redux

Browse Source
This commit is contained in:
Sofiya Tepikin
2022-09-10 16:00:19 +00:00
parent 7d0fa07976
commit 176e4f6a70
22 changed files with 86 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Home.js
+1 -10
View File
@@ -3,9 +3,6 @@ import { ScrollView, StyleSheet, View } from 'react-native'
import PropTypes from 'prop-types'
import moment from 'moment'
import { connect } from 'react-redux'
import { navigate } from '../slices/navigation'
import AppText from './common/app-text'
import Button from './common/button'
@@ -136,15 +133,9 @@ const styles = StyleSheet.create({
},
})
const mapDispatchToProps = (dispatch) => {
return {
navigate: (page) => dispatch(navigate(page)),
}
}
Home.propTypes = {
navigate: PropTypes.func,
setDate: PropTypes.func,
}
export default connect(null, mapDispatchToProps)(Home)
export default Home
components/app-wrapper.js
+2 -5
View File
@@ -1,5 +1,4 @@
import React, { useState, useEffect } from 'react'
import { Provider } from 'react-redux'
import nodejs from 'nodejs-mobile-react-native'
import { getLicenseFlag, saveEncryptionFlag } from '../local-storage'
@@ -11,8 +10,6 @@ import AppStatusBar from './common/app-status-bar'
import License from './License'
import PasswordPrompt from './password-prompt'
import store from '../store'
export default function AppWrapper() {
const [isLoading, setIsLoading] = useState(true)
const [isLicenseAccepted, setIsLicenseAccepted] = useState(false)
@@ -45,13 +42,13 @@ export default function AppWrapper() {
}
return (
<Provider store={store}>
<>
<AppStatusBar />
{isDbEncrypted ? (
<PasswordPrompt enableShowApp={() => setIsDbEncrypted(false)} />
) : (
<App restartApp={() => checkIsDbEncrypted()} />
)}
</Provider>
</>
)
}
components/app.js
+17 -25
View File
@@ -2,15 +2,12 @@ import React, { Component } from 'react'
import { BackHandler, StyleSheet, View } from 'react-native'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { LocalDate } from '@js-joda/core'
import { getNavigation, navigate, goBack } from '../slices/navigation'
import Header from './header'
import Menu from './menu'
import { viewsList } from './views'
import { isSettingsView } from './pages'
import { isSettingsView, pages } from './pages'
import { headerTitles } from '../i18n/en/labels'
import setupNotifications from '../lib/notifications'
@@ -36,9 +33,14 @@ class App extends Component {
this.state = {
date: LocalDate.now().toString(),
currentPage: 'Home',
}
setupNotifications(this.props.navigate, this.props.setDate)
setupNotifications(this.navigate, this.setDate)
}
navigate = (page) => {
this.setState({ currentPage: page })
}
setDate = (date) => {
@@ -46,13 +48,14 @@ class App extends Component {
}
goBack = () => {
const { currentPage } = this.props.navigation
const { currentPage } = this.state
if (currentPage === 'Home') {
closeDb()
BackHandler.exitApp()
} else {
this.props.goBack()
const { parent } = pages.find((p) => p.component === currentPage)
this.navigate(parent)
}
return true
@@ -63,9 +66,9 @@ class App extends Component {
}
render() {
const { navigation, goBack, restartApp } = this.props
const { date } = this.state
const { currentPage } = navigation
const { goBack, restartApp } = this.props
const { date, currentPage } = this.state
const { navigate } = this
if (!currentPage) {
return false
@@ -80,19 +83,21 @@ class App extends Component {
const headerProps = {
title,
handleBack: isSettingsSubView ? goBack : null,
navigate,
}
const pageProps = {
date,
setDate: this.setDate,
isTemperatureEditView,
navigate,
}
return (
<View style={styles.container}>
<Header {...headerProps} />
<Page {...pageProps} restartApp={restartApp} />
<Menu />
<Menu currentPage={currentPage} navigate={navigate} />
</View>
)
}
@@ -104,17 +109,4 @@ const styles = StyleSheet.create({
},
})
const mapStateToProps = (state) => {
return {
navigation: getNavigation(state),
}
}
const mapDispatchToProps = (dispatch) => {
return {
navigate: (page) => dispatch(navigate(page)),
goBack: () => dispatch(goBack()),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
export default App
components/calendar.js
+1 -10
View File
@@ -3,9 +3,6 @@ import PropTypes from 'prop-types'
import { StyleSheet, View } from 'react-native'
import { CalendarList } from 'react-native-calendars'
import { connect } from 'react-redux'
import { navigate } from '../slices/navigation'
import { getBleedingDaysSortedByDate } from '../db'
import cycleModule from '../lib/cycle'
import nothingChanged from '../db/db-unchanged'
@@ -88,10 +85,4 @@ const styles = StyleSheet.create({
container: { flex: 1 },
})
const mapDispatchToProps = (dispatch) => {
return {
navigate: (page) => dispatch(navigate(page)),
}
}
export default connect(null, mapDispatchToProps)(CalendarView)
export default CalendarView
components/chart/chart.js
+2 -11
View File
@@ -19,9 +19,6 @@ import NoData from './no-data'
import Tutorial from './tutorial'
import YAxis from './y-axis'
import { connect } from 'react-redux'
import { navigate } from '../../slices/navigation'
import { getCycleDaysSortedByDate } from '../../db'
import nothingChanged from '../../db/db-unchanged'
import {
@@ -167,7 +164,7 @@ class CycleChart extends Component {
onLayout={this.onLayout}
scrollViewStyle={styles.page}
>
{!hasDataToDisplay && <NoData />}
{!hasDataToDisplay && <NoData navigate={this.props.navigate} />}
{hasDataToDisplay && !chartHeight && !chartLoaded && <AppLoadingView />}
<View style={styles.chartContainer}>
{shouldShowHint && chartLoaded && (
@@ -261,10 +258,4 @@ const styles = StyleSheet.create({
},
})
const mapDispatchToProps = (dispatch) => {
return {
navigate: (page) => dispatch(navigate(page)),
}
}
export default connect(null, mapDispatchToProps)(CycleChart)
export default CycleChart
components/chart/day-column.js
+1 -10
View File
@@ -1,9 +1,6 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { TouchableOpacity } from 'react-native'
import { connect } from 'react-redux'
import { navigate } from '../../slices/navigation'
import { getCycleDay } from '../../db'
@@ -128,10 +125,4 @@ class DayColumn extends Component {
}
}
const mapDispatchToProps = (dispatch) => {
return {
navigate: (page) => dispatch(navigate(page)),
}
}
export default connect(null, mapDispatchToProps)(DayColumn)
export default DayColumn
components/chart/no-data.js
+1 -10
View File
@@ -5,9 +5,6 @@ import PropTypes from 'prop-types'
import AppText from '../common/app-text'
import Button from '../common/button'
import { connect } from 'react-redux'
import { navigate } from '../../slices/navigation'
import { Containers } from '../../styles'
import { shared } from '../../i18n/en/labels'
@@ -37,10 +34,4 @@ const styles = StyleSheet.create({
},
})
const mapDispatchToProps = (dispatch) => {
return {
navigate: (page) => dispatch(navigate(page)),
}
}
export default connect(null, mapDispatchToProps)(NoData)
export default NoData
components/header/hamburger-menu.js
+8 -2
View File
@@ -6,6 +6,7 @@ import {
TouchableOpacity,
View,
} from 'react-native'
import PropTypes from 'prop-types'
import AppIcon from '../common/app-icon'
import CloseIcon from '../common/close-icon'
@@ -39,7 +40,7 @@ export default class HamburgerMenu extends Component {
const { shouldShowMenu } = this.state
return (
<React.Fragment>
<>
{!shouldShowMenu && (
<TouchableOpacity onPress={this.toggleMenu} hitSlop={HIT_SLOP}>
<AppIcon name="dots-three-vertical" color={Colors.orange} />
@@ -65,16 +66,21 @@ export default class HamburgerMenu extends Component {
item={item}
key={item.name}
closeMenu={this.toggleMenu}
navigate={this.props.navigate}
/>
))}
</View>
</Modal>
)}
</React.Fragment>
</>
)
}
}
HamburgerMenu.propTypes = {
navigate: PropTypes.func,
}
const styles = StyleSheet.create({
blackBackground: {
backgroundColor: 'black',
components/header/index.js
+15 -6
View File
@@ -1,5 +1,5 @@
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { StyleSheet, TouchableOpacity, View } from 'react-native'
import PropTypes from 'prop-types'
import Logo from './logo'
@@ -7,21 +7,30 @@ import HamburgerMenu from './hamburger-menu'
import { Colors, Containers, Sizes } from '../../styles'
const Header = ({ isSideMenuEnabled }) => {
const Header = ({ isStatic, navigate }) => {
return (
<View style={styles.header}>
<Logo />
{isSideMenuEnabled && <HamburgerMenu />}
{isStatic ? (
<Logo />
) : (
<>
<TouchableOpacity onPress={() => navigate('Home')}>
<Logo />
</TouchableOpacity>
<HamburgerMenu navigate={navigate} />
</>
)}
</View>
)
}
Header.propTypes = {
isSideMenuEnabled: PropTypes.bool,
isStatic: PropTypes.bool,
navigate: PropTypes.func,
}
Header.defaultProps = {
isSideMenuEnabled: true,
isStatic: false,
}
const styles = StyleSheet.create({
components/header/logo.js
+4 -22
View File
@@ -1,24 +1,12 @@
import React from 'react'
import { StyleSheet, TouchableOpacity } from 'react-native'
import PropTypes from 'prop-types'
import { StyleSheet } from 'react-native'
import AppText from '../common/app-text'
import { connect } from 'react-redux'
import { navigate } from '../../slices/navigation'
import { Colors, Fonts, Sizes } from '../../styles'
const Logo = ({ navigate }) => {
return (
<TouchableOpacity onPress={() => navigate('Home')}>
<AppText style={styles.logo}>drip.</AppText>
</TouchableOpacity>
)
}
Logo.propTypes = {
navigate: PropTypes.func.isRequired,
const Logo = () => {
return <AppText style={styles.logo}>drip.</AppText>
}
const styles = StyleSheet.create({
@@ -29,10 +17,4 @@ const styles = StyleSheet.create({
},
})
const mapDispatchToProps = (dispatch) => {
return {
navigate: (page) => dispatch(navigate(page)),
}
}
export default connect(null, mapDispatchToProps)(Logo)
export default Logo
components/header/menu-item.js
+1 -10
View File
@@ -4,9 +4,6 @@ import PropTypes from 'prop-types'
import AppText from '../common/app-text'
import { connect } from 'react-redux'
import { navigate } from '../../slices/navigation'
import { Typography } from '../../styles'
const MenuItem = ({ item, navigate, closeMenu }) => {
@@ -35,10 +32,4 @@ const styles = StyleSheet.create({
},
})
const mapDispatchToProps = (dispatch) => {
return {
navigate: (page) => dispatch(navigate(page)),
}
}
export default connect(null, mapDispatchToProps)(MenuItem)
export default MenuItem
components/menu/index.js
+9 -2
View File
@@ -1,12 +1,13 @@
import React from 'react'
import { StyleSheet, View } from 'react-native'
import PropTypes from 'prop-types'
import MenuItem from './menu-item'
import { Containers } from '../../styles'
import { pages } from '../pages'
const Menu = () => {
const Menu = ({ currentPage, navigate }) => {
const menuItems = pages.filter((page) => page.isInMenu)
return (
@@ -14,7 +15,8 @@ const Menu = () => {
{menuItems.map(({ icon, label, component }) => {
return (
<MenuItem
component={component}
isActive={component === currentPage}
onPress={() => navigate(component)}
icon={icon}
key={label}
label={label}
@@ -25,6 +27,11 @@ const Menu = () => {
)
}
Menu.propTypes = {
currentPage: PropTypes.string,
navigate: PropTypes.func,
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
components/menu/menu-item.js
+5 -22
View File
@@ -4,18 +4,14 @@ import { StyleSheet, Text, TouchableOpacity } from 'react-native'
import Icon from '../common/menu-icon'
import { connect } from 'react-redux'
import { getNavigation, navigate } from '../../slices/navigation'
import { Colors, Containers, Fonts, Sizes, Spacing } from '../../styles'
const MenuItem = ({ component, icon, label, navigate, navigation }) => {
const isActive = component === navigation.currentPage
const MenuItem = ({ isActive, icon, label, onPress }) => {
const textStyle = isActive ? styles.menuTextActive : styles.menuText
const testID = isActive ? 'activeMenuItem' : `menuItem${label}`
return (
<TouchableOpacity style={styles.button} onPress={() => navigate(component)}>
<TouchableOpacity style={styles.button} onPress={onPress}>
<Icon name={icon} isActive={isActive} />
<Text testID={testID} style={textStyle}>
{label}
@@ -25,11 +21,10 @@ const MenuItem = ({ component, icon, label, navigate, navigation }) => {
}
MenuItem.propTypes = {
component: PropTypes.string.isRequired,
isActive: PropTypes.bool.isRequired,
icon: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
navigation: PropTypes.object,
navigate: PropTypes.func,
onPress: PropTypes.func.isRequired,
}
const text = {
@@ -53,16 +48,4 @@ const styles = StyleSheet.create({
},
})
const mapStateToProps = (state) => {
return {
navigation: getNavigation(state),
}
}
const mapDispatchToProps = (dispatch) => {
return {
navigate: (page) => dispatch(navigate(page)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(MenuItem)
export default MenuItem
components/password-prompt.js
+1 -1
View File
@@ -82,7 +82,7 @@ export default class PasswordPrompt extends Component {
return (
<React.Fragment>
<Header isSideMenuEnabled={false} />
<Header isStatic />
<AppPage contentContainerStyle={styles.contentContainer}>
<AppTextInput
isKeyboardOffset={false}
components/settings/menu-item.js
+1 -10
View File
@@ -6,9 +6,6 @@ import AppIcon from '../common/app-icon'
import AppText from '../common/app-text'
import Segment from '../common/segment'
import { connect } from 'react-redux'
import { navigate } from '../../slices/navigation'
import { Colors, Containers, Sizes } from '../../styles'
const MenuItem = ({ item, last, navigate }) => {
@@ -45,10 +42,4 @@ const styles = StyleSheet.create({
},
})
const mapDispatchToProps = (dispatch) => {
return {
navigate: (page) => dispatch(navigate(page)),
}
}
export default connect(null, mapDispatchToProps)(MenuItem)
export default MenuItem
components/settings/password/index.js
+1 -10
View File
@@ -1,9 +1,6 @@
import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { navigate } from '../../../slices/navigation'
import { changeDbEncryption } from '../../../db'
import AppPage from '../../common/app-page'
@@ -94,10 +91,4 @@ class PasswordSetting extends Component {
}
}
const mapDispatchToProps = (dispatch) => {
return {
navigate: (page) => dispatch(navigate(page)),
}
}
export default connect(null, mapDispatchToProps)(PasswordSetting)
export default PasswordSetting
components/settings/settings-menu.js
+9 -2
View File
@@ -1,4 +1,5 @@
import React from 'react'
import PropTypes from 'prop-types'
import AppPage from '../common/app-page'
import MenuItem from './menu-item'
@@ -13,16 +14,22 @@ const menu = [
{ ...menuItems.password, component: 'Password' },
]
const SettingsMenu = () => {
const SettingsMenu = ({ navigate }) => {
return (
<AppPage title={settingsLabels.title}>
{menu.map((menuItem, i) => {
const last = menu.length === i + 1
return <MenuItem item={menuItem} key={i} last={last} />
return (
<MenuItem item={menuItem} key={i} last={last} navigate={navigate} />
)
})}
</AppPage>
)
}
SettingsMenu.propTypes = {
navigate: PropTypes.func.isRequired,
}
export default SettingsMenu