From 1ada7a0cde5feccaf4d36e48c52a5de35aadf30b Mon Sep 17 00:00:00 2001 From: Sofiya Tepikin Date: Sat, 20 Aug 2022 14:03:43 +0000 Subject: [PATCH] Revert "Merge branch 'chore/cleanup-date-usage' into 'main'" This reverts merge request !492 --- components/Home.js | 10 +- components/app.js | 21 +--- components/calendar.js | 4 +- components/chart/chart.js | 129 ++++++++++----------- components/chart/day-column.js | 64 +++++----- components/cycle-day/cycle-day-overview.js | 39 ++++--- components/cycle-day/symptom-box.js | 11 +- components/cycle-day/symptom-edit-view.js | 11 +- components/cycle-day/symptom-page-title.js | 41 ++++--- components/cycle-day/temperature.js | 10 +- lib/notifications.js | 3 +- slices/date.js | 19 +++ store.js | 8 +- 13 files changed, 213 insertions(+), 157 deletions(-) create mode 100644 slices/date.js diff --git a/components/Home.js b/components/Home.js index 97ea60b..16f0d96 100644 --- a/components/Home.js +++ b/components/Home.js @@ -5,6 +5,7 @@ import moment from 'moment' import { connect } from 'react-redux' import { navigate } from '../slices/navigation' +import { getDate, setDate } from '../slices/date' import AppText from './common/app-text' import Button from './common/button' @@ -136,9 +137,16 @@ const styles = StyleSheet.create({ }, }) +const mapStateToProps = (state) => { + return { + date: getDate(state), + } +} + const mapDispatchToProps = (dispatch) => { return { navigate: (page) => dispatch(navigate(page)), + setDate: (date) => dispatch(setDate(date)), } } @@ -147,4 +155,4 @@ Home.propTypes = { setDate: PropTypes.func, } -export default connect(null, mapDispatchToProps)(Home) +export default connect(mapStateToProps, mapDispatchToProps)(Home) diff --git a/components/app.js b/components/app.js index 9613f19..83afdf9 100644 --- a/components/app.js +++ b/components/app.js @@ -3,8 +3,8 @@ import { BackHandler, StyleSheet, View } from 'react-native' import PropTypes from 'prop-types' import { connect } from 'react-redux' -import { LocalDate } from '@js-joda/core' +import { getDate } from '../slices/date' import { getNavigation, navigate, goBack } from '../slices/navigation' import Header from './header' @@ -14,14 +14,13 @@ import { isSettingsView } from './pages' import { headerTitles } from '../i18n/en/labels' import setupNotifications from '../lib/notifications' -import { closeDb } from '../db' +import { getCycleDay, closeDb } from '../db' class App extends Component { static propTypes = { date: PropTypes.string, navigation: PropTypes.object.isRequired, navigate: PropTypes.func, - setDate: PropTypes.func, goBack: PropTypes.func, restartApp: PropTypes.func, } @@ -34,15 +33,7 @@ class App extends Component { this.goBack ) - this.state = { - date: LocalDate.now().toString(), - } - - setupNotifications(this.props.navigate, this.props.setDate) - } - - setDate = (date) => { - this.setState({ date }) + setupNotifications(this.props.navigate) } goBack = () => { @@ -63,8 +54,7 @@ class App extends Component { } render() { - const { navigation, goBack, restartApp } = this.props - const { date } = this.state + const { date, navigation, goBack, restartApp } = this.props const { currentPage } = navigation if (!currentPage) { @@ -83,8 +73,8 @@ class App extends Component { } const pageProps = { + cycleDay: date && getCycleDay(date), date, - setDate: this.setDate, isTemperatureEditView, } @@ -106,6 +96,7 @@ const styles = StyleSheet.create({ const mapStateToProps = (state) => { return { + date: getDate(state), navigation: getNavigation(state), } } diff --git a/components/calendar.js b/components/calendar.js index 9cebb66..80ac49f 100644 --- a/components/calendar.js +++ b/components/calendar.js @@ -4,6 +4,7 @@ import { StyleSheet, View } from 'react-native' import { CalendarList } from 'react-native-calendars' import { connect } from 'react-redux' +import { setDate } from '../slices/date' import { navigate } from '../slices/navigation' import { getBleedingDaysSortedByDate } from '../db' @@ -74,7 +75,7 @@ class CalendarView extends Component { firstDay={1} onDayPress={this.passDateToDayView.bind(this)} markedDates={markedDates} - markingType="custom" + markingType='custom' theme={calendarTheme} // Max amount of months allowed to scroll to the past. pastScrollRange={120} @@ -90,6 +91,7 @@ const styles = StyleSheet.create({ const mapDispatchToProps = (dispatch) => { return { + setDate: (date) => dispatch(setDate(date)), navigate: (page) => dispatch(navigate(page)), } } diff --git a/components/chart/chart.js b/components/chart/chart.js index 3155d08..4b9573d 100644 --- a/components/chart/chart.js +++ b/components/chart/chart.js @@ -6,7 +6,7 @@ import { FlatList, PixelRatio, StyleSheet, - View, + View } from 'react-native' import AppLoadingView from '../common/app-loading' @@ -24,11 +24,7 @@ import { navigate } from '../../slices/navigation' import { getCycleDaysSortedByDate } from '../../db' import nothingChanged from '../../db/db-unchanged' -import { - getChartFlag, - scaleObservable, - setChartFlag, -} from '../../local-storage' +import { getChartFlag, scaleObservable, setChartFlag } from '../../local-storage' import { makeColumnInfo, nfpLines } from '../helpers/chart' import { @@ -36,7 +32,7 @@ import { CHART_GRID_LINE_HORIZONTAL_WIDTH, CHART_SYMPTOM_HEIGHT_RATIO, CHART_XAXIS_HEIGHT_RATIO, - SYMPTOMS, + SYMPTOMS } from '../../config' import { shared } from '../../i18n/en/labels' import { Colors, Spacing } from '../../styles' @@ -44,8 +40,7 @@ import { Colors, Spacing } from '../../styles' class CycleChart extends Component { static propTypes = { navigate: PropTypes.func, - end: PropTypes.bool, - setDate: PropTypes.func, + end: PropTypes.bool } constructor(props) { @@ -85,12 +80,12 @@ class CycleChart extends Component { prepareSymptomData = () => { this.symptomRowSymptoms = SYMPTOMS.filter((symptomName) => { - return this.cycleDaysSortedByDate.some((cycleDay) => { - return symptomName !== 'temperature' && cycleDay[symptomName] + return this.cycleDaysSortedByDate.some(cycleDay => { + return (symptomName !== 'temperature') && cycleDay[symptomName] }) }) this.chartSymptoms = [...this.symptomRowSymptoms] - if (this.cycleDaysSortedByDate.some((day) => day.temperature)) { + if (this.cycleDaysSortedByDate.some(day => day.temperature)) { this.chartSymptoms.push('temperature') this.shouldShowTemperatureColumn = true } @@ -99,7 +94,6 @@ class CycleChart extends Component { renderColumn = ({ item, index }) => { return ( 0 @@ -170,52 +163,53 @@ class CycleChart extends Component { {!hasDataToDisplay && } {hasDataToDisplay && !chartHeight && !chartLoaded && } - {shouldShowHint && chartLoaded && ( + {shouldShowHint && chartLoaded && - )} - {hasDataToDisplay && - chartLoaded && - !this.shouldShowTemperatureColumn && ( - - - {shared.noTemperatureWarning} - - - )} + } + {hasDataToDisplay && chartLoaded && + !this.shouldShowTemperatureColumn && + + + {shared.noTemperatureWarning} + + + } {hasDataToDisplay && ( + {chartHeight && chartLoaded && ( )} - {chartHeight && ( - item} - initialNumToRender={numberOfColumnsToRender} - windowSize={30} - onLayout={() => this.setState({ chartLoaded: true })} - onEndReached={() => this.setState({ end: true })} - ListFooterComponent={} - updateCellsBatchingPeriod={800} - contentContainerStyle={{ height: chartHeight }} - /> - )} + {chartHeight && + item} + initialNumToRender={numberOfColumnsToRender} + windowSize={30} + onLayout={() => this.setState({chartLoaded: true})} + onEndReached={() => this.setState({end: true})} + ListFooterComponent={} + updateCellsBatchingPeriod={800} + contentContainerStyle={{ height: chartHeight }} + /> + } {chartHeight && chartLoaded && ( - {this.shouldShowTemperatureColumn && ( + {this.shouldShowTemperatureColumn && - )} + } )} @@ -229,42 +223,45 @@ class CycleChart extends Component { function LoadingMoreView({ end }) { return ( - {!end && } + {!end && } ) } LoadingMoreView.propTypes = { - end: PropTypes.bool, + end: PropTypes.bool } const styles = StyleSheet.create({ chartArea: { - flexDirection: 'row', + flexDirection: 'row' }, chartContainer: { - flexDirection: 'column', + flexDirection: 'column' }, loadingContainer: { height: '100%', backgroundColor: Colors.turquoiseLight, - justifyContent: 'center', + justifyContent: 'center' }, page: { - marginVertical: Spacing.small, + marginVertical: Spacing.small }, pageContainer: { - paddingHorizontal: Spacing.base, + paddingHorizontal: Spacing.base }, warning: { - padding: Spacing.large, - }, + padding: Spacing.large + } }) const mapDispatchToProps = (dispatch) => { - return { + return({ navigate: (page) => dispatch(navigate(page)), - } + }) } -export default connect(null, mapDispatchToProps)(CycleChart) +export default connect( + null, + mapDispatchToProps, +)(CycleChart) diff --git a/components/chart/day-column.js b/components/chart/day-column.js index f260e27..7404e53 100644 --- a/components/chart/day-column.js +++ b/components/chart/day-column.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import { TouchableOpacity } from 'react-native' import { connect } from 'react-redux' +import { setDate } from '../../slices/date' import { navigate } from '../../slices/navigation' import { getCycleDay } from '../../db' @@ -14,7 +15,7 @@ import CycleDayLabel from './cycle-day-label' import { symptomColorMethods, getTemperatureProps, - isSymptomDataComplete, + isSymptomDataComplete } from '../helpers/chart' class DayColumn extends Component { @@ -39,17 +40,14 @@ class DayColumn extends Component { this.data = {} if (cycleDayData) { - this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => { + this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom, ) => { const symptomData = cycleDayData[symptom] if (symptomData && symptom === 'temperature') { - symptomDataToDisplay[symptom] = getTemperatureProps( - symptomData, - columnHeight, - dateString - ) + symptomDataToDisplay[symptom] = + getTemperatureProps(symptomData, columnHeight, dateString) } else { - if (symptomData && !symptomData.exclude) { + if (symptomData && ! symptomData.exclude) { // if symptomColorMethods entry doesn't exist for given symptom, // use 'default' const getSymptomColorIndex = @@ -80,13 +78,12 @@ class DayColumn extends Component { } render() { - const { - columnHeight, + const { columnHeight, dateString, shouldShowTemperatureColumn, symptomHeight, symptomRowSymptoms, - xAxisHeight, + xAxisHeight } = this.props return ( @@ -94,22 +91,22 @@ class DayColumn extends Component { onPress={() => this.onDaySelect(dateString)} activeOpacity={1} > - {shouldShowTemperatureColumn && ( - - )} - + {shouldShowTemperatureColumn && } - {symptomRowSymptoms.map((symptom, i) => { - const hasSymptomData = Object.prototype.hasOwnProperty.call( - this.data, - symptom - ) + + + { symptomRowSymptoms.map((symptom, i) => { + const hasSymptomData = + Object.prototype.hasOwnProperty.call(this.data, symptom) return ( - ) - })} + />) + } + )} + ) } } const mapDispatchToProps = (dispatch) => { - return { + return({ + setDate: (date) => dispatch(setDate(date)), navigate: (page) => dispatch(navigate(page)), - } + }) } -export default connect(null, mapDispatchToProps)(DayColumn) +export default connect( + null, + mapDispatchToProps, +)(DayColumn) diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js index de5ab0c..932531b 100644 --- a/components/cycle-day/cycle-day-overview.js +++ b/components/cycle-day/cycle-day-overview.js @@ -6,34 +6,31 @@ import AppPage from '../common/app-page' import SymptomBox from './symptom-box' import SymptomPageTitle from './symptom-page-title' -import { getCycleDay } from '../../db' -import { getData, nextDate, prevDate } from '../helpers/cycle-day' +import { connect } from 'react-redux' +import { getDate } from '../../slices/date' +import cycleModule from '../../lib/cycle' +import { dateToTitle } from '../helpers/format-date' +import { getCycleDay } from '../../db' +import { getData } from '../helpers/cycle-day' + +import { general as labels } from '../../i18n/en/cycle-day' import { Spacing } from '../../styles' import { SYMPTOMS } from '../../config' -const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => { +const CycleDayOverView = ({ date, isTemperatureEditView }) => { const cycleDay = getCycleDay(date) + const { getCycleDayNumber } = cycleModule() + const cycleDayNumber = getCycleDayNumber(date) + const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}` const [editedSymptom, setEditedSymptom] = useState( isTemperatureEditView ? 'temperature' : '' ) - const showNextCycleDay = () => { - setDate(nextDate(date)) - } - - const showPrevCycleDay = () => { - setDate(prevDate(date)) - } - return ( - + {SYMPTOMS.map((symptom) => { const symptomData = @@ -41,7 +38,6 @@ const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => { return ( { CycleDayOverView.propTypes = { cycleDay: PropTypes.object, date: PropTypes.string, - setDate: PropTypes.func, isTemperatureEditView: PropTypes.bool, } @@ -72,4 +67,10 @@ const styles = StyleSheet.create({ }, }) -export default CycleDayOverView +const mapStateToProps = (state) => { + return { + date: getDate(state), + } +} + +export default connect(mapStateToProps, null)(CycleDayOverView) diff --git a/components/cycle-day/symptom-box.js b/components/cycle-day/symptom-box.js index f3f8842..837c89b 100644 --- a/components/cycle-day/symptom-box.js +++ b/components/cycle-day/symptom-box.js @@ -7,6 +7,8 @@ import AppText from '../common/app-text' import DripIcon from '../../assets/drip-icons' import SymptomEditView from './symptom-edit-view' +import { connect } from 'react-redux' +import { getDate } from '../../slices/date' import { isDateInFuture } from '../helpers/cycle-day' import { Colors, Sizes, Spacing } from '../../styles' @@ -41,7 +43,6 @@ const SymptomBox = ({ <> {isSymptomEdited && ( setEditedSymptom('')} @@ -127,4 +128,10 @@ const styles = StyleSheet.create({ }, }) -export default SymptomBox +const mapStateToProps = (state) => { + return { + date: getDate(state), + } +} + +export default connect(mapStateToProps, null)(SymptomBox) diff --git a/components/cycle-day/symptom-edit-view.js b/components/cycle-day/symptom-edit-view.js index 710e10b..a5efaff 100644 --- a/components/cycle-day/symptom-edit-view.js +++ b/components/cycle-day/symptom-edit-view.js @@ -1,6 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { Dimensions, ScrollView, StyleSheet, View } from 'react-native' +import { connect } from 'react-redux' import AppModal from '../common/app-modal' import AppSwitch from '../common/app-switch' @@ -13,6 +14,7 @@ import SelectBoxGroup from './select-box-group' import SelectTabGroup from './select-tab-group' import Temperature from './temperature' +import { getDate } from '../../slices/date' import { blank, save, shouldShow, symtomPage } from '../helpers/cycle-day' import { showToast } from '../helpers/general' @@ -166,7 +168,6 @@ class SymptomEditView extends Component { {symptom === 'temperature' && ( this.onSaveTemperature(value, field)} /> @@ -284,4 +285,10 @@ const styles = StyleSheet.create({ }, }) -export default SymptomEditView +const mapStateToProps = (state) => { + return { + date: getDate(state), + } +} + +export default connect(mapStateToProps, null)(SymptomEditView) diff --git a/components/cycle-day/symptom-page-title.js b/components/cycle-day/symptom-page-title.js index ecf2b15..62dbc46 100644 --- a/components/cycle-day/symptom-page-title.js +++ b/components/cycle-day/symptom-page-title.js @@ -5,33 +5,31 @@ import { StyleSheet, TouchableOpacity, View } from 'react-native' import AppIcon from '../common/app-icon' import AppText from '../common/app-text' -import cycleModule from '../../lib/cycle' -import { dateToTitle } from '../helpers/format-date' +import { connect } from 'react-redux' +import { getDate, setDate } from '../../slices/date' -import { general as labels } from '../../i18n/en/cycle-day' +import { nextDate, prevDate } from '../helpers/cycle-day' import { Colors, Containers, Spacing, Typography } from '../../styles' import { HIT_SLOP } from '../../config' -const SymptomPageTitle = ({ date, onNextCycleDay, onPrevCycleDay }) => { - const title = dateToTitle(date) - - const { getCycleDayNumber } = cycleModule() - const cycleDayNumber = getCycleDayNumber(date) - const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}` - +const SymptomPageTitle = ({ date, setDate, subtitle, title }) => { + const navigate = (isForward) => { + const newDate = isForward ? nextDate(date) : prevDate(date) + setDate(newDate) + } const formattedTitle = title.length > 21 ? title.substring(0, 18) + '...' : title return ( - + navigate(false)} hitSlop={HIT_SLOP}> {formattedTitle} {subtitle && {subtitle}} - + navigate(true)} hitSlop={HIT_SLOP}> @@ -40,8 +38,9 @@ const SymptomPageTitle = ({ date, onNextCycleDay, onPrevCycleDay }) => { SymptomPageTitle.propTypes = { date: PropTypes.string.isRequired, - onNextCycleDay: PropTypes.func.isRequired, - onPrevCycleDay: PropTypes.func.isRequired, + setDate: PropTypes.func.isRequired, + subtitle: PropTypes.string, + title: PropTypes.string, } const styles = StyleSheet.create({ @@ -59,4 +58,16 @@ const styles = StyleSheet.create({ }, }) -export default SymptomPageTitle +const mapStateToProps = (state) => { + return { + date: getDate(state), + } +} + +const mapDispatchToProps = (dispatch) => { + return { + setDate: (date) => dispatch(setDate(date)), + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(SymptomPageTitle) diff --git a/components/cycle-day/temperature.js b/components/cycle-day/temperature.js index 26b18bf..8df7a4c 100644 --- a/components/cycle-day/temperature.js +++ b/components/cycle-day/temperature.js @@ -10,6 +10,8 @@ import AppText from '../common/app-text' import AppTextInput from '../common/app-text-input' import Segment from '../common/segment' +import { connect } from 'react-redux' +import { getDate } from '../../slices/date' import { getTemperatureOutOfRangeMessage, getPreviousTemperature, @@ -123,4 +125,10 @@ Temperature.propTypes = { save: PropTypes.func.isRequired, } -export default Temperature +const mapStateToProps = (state) => { + return { + date: getDate(state), + } +} + +export default connect(mapStateToProps, null)(Temperature) diff --git a/lib/notifications.js b/lib/notifications.js index 53328e8..3be60f8 100644 --- a/lib/notifications.js +++ b/lib/notifications.js @@ -11,8 +11,9 @@ import { getBleedingDaysSortedByDate } from '../db' import cycleModule from './cycle' import nothingChanged from '../db/db-unchanged' import store from '../store' +import { setDate } from '../slices/date' -export default function setupNotifications(navigate, setDate) { +export default function setupNotifications(navigate) { Notification.configure({ onNotification: (notification) => { // https://github.com/zo0r/react-native-push-notification/issues/966#issuecomment-479069106 diff --git a/slices/date.js b/slices/date.js new file mode 100644 index 0000000..19f1076 --- /dev/null +++ b/slices/date.js @@ -0,0 +1,19 @@ +import { createSlice } from 'redux-starter-kit' +import { LocalDate } from '@js-joda/core' + +const dateSlice = createSlice({ + slice: 'date', + initialState: LocalDate.now().toString(), + reducers: { + setDate: (state, action) => action.payload, + }, +}) + +// Extract the action creators object and the reducer +const { actions, reducer, selectors } = dateSlice +// Extract and export each action creator by name +export const { setDate } = actions + +export const { getDate } = selectors + +export default reducer diff --git a/store.js b/store.js index 8471dd9..7887652 100644 --- a/store.js +++ b/store.js @@ -1,9 +1,11 @@ -import { combineReducers, createStore } from 'redux' +import { combineReducers, createStore } from "redux" -import navigation from './slices/navigation' +import date from "./slices/date" +import navigation from "./slices/navigation" const reducer = combineReducers({ - navigation, + date, + navigation }) const store = createStore(reducer)