Merge branch '437-cycle-day-overview-fix' into 'rebased-redesign'
Resolve "Cycle day overview" See merge request bloodyhealth/drip!307
This commit is contained in:
@@ -8,12 +8,7 @@ import AppText from '../common/app-text'
|
|||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
import { getDate, setDate } from '../../slices/date'
|
import { getDate, setDate } from '../../slices/date'
|
||||||
|
|
||||||
import {
|
import { nextDate, prevDate } from '../helpers/cycle-day'
|
||||||
nextDate,
|
|
||||||
prevDate,
|
|
||||||
isTomorrowInFuture,
|
|
||||||
isYesterdayInFuture,
|
|
||||||
} from '../helpers/cycle-day'
|
|
||||||
import { Colors, Containers, Spacing, Typography } from '../../styles'
|
import { Colors, Containers, Spacing, Typography } from '../../styles'
|
||||||
import { HIT_SLOP } from '../../config'
|
import { HIT_SLOP } from '../../config'
|
||||||
|
|
||||||
@@ -24,8 +19,6 @@ const SymptomPageTitle = ({
|
|||||||
subtitle,
|
subtitle,
|
||||||
title,
|
title,
|
||||||
}) => {
|
}) => {
|
||||||
const rightArrowColor = isTomorrowInFuture(date) ? Colors.grey : Colors.orange
|
|
||||||
const leftArrowColor = isYesterdayInFuture(date) ? Colors.grey : Colors.orange
|
|
||||||
const navigate = (isForward) => {
|
const navigate = (isForward) => {
|
||||||
const nextDay = isForward ? nextDate(date) : prevDate(date)
|
const nextDay = isForward ? nextDate(date) : prevDate(date)
|
||||||
reloadSymptomData(nextDay)
|
reloadSymptomData(nextDay)
|
||||||
@@ -35,14 +28,14 @@ const SymptomPageTitle = ({
|
|||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<TouchableOpacity onPress={() => navigate(false)} hitSlop={HIT_SLOP}>
|
<TouchableOpacity onPress={() => navigate(false)} hitSlop={HIT_SLOP}>
|
||||||
<AppIcon name='chevron-left' color={leftArrowColor} />
|
<AppIcon name='chevron-left' color={Colors.orange}/>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
<View style={styles.textContainer}>
|
<View style={styles.textContainer}>
|
||||||
<AppText style={styles.title}>{title}</AppText>
|
<AppText style={styles.title}>{title}</AppText>
|
||||||
{subtitle && <AppText style={styles.subtitle}>{subtitle}</AppText>}
|
{subtitle && <AppText style={styles.subtitle}>{subtitle}</AppText>}
|
||||||
</View>
|
</View>
|
||||||
<TouchableOpacity onPress={() => navigate(true)} hitSlop={HIT_SLOP}>
|
<TouchableOpacity onPress={() => navigate(true)} hitSlop={HIT_SLOP}>
|
||||||
<AppIcon name='chevron-right' color={rightArrowColor} />
|
<AppIcon name='chevron-right' color={Colors.orange}/>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -425,13 +425,3 @@ export const nextDate = (dateString) => {
|
|||||||
export const isDateInFuture = (dateString) => {
|
export const isDateInFuture = (dateString) => {
|
||||||
return LocalDate.now().isBefore(LocalDate.parse(dateString))
|
return LocalDate.now().isBefore(LocalDate.parse(dateString))
|
||||||
}
|
}
|
||||||
|
|
||||||
export const isTomorrowInFuture = (dateString) => {
|
|
||||||
const tomorrow = nextDate(dateString)
|
|
||||||
return LocalDate.now().isBefore(LocalDate.parse(tomorrow))
|
|
||||||
}
|
|
||||||
|
|
||||||
export const isYesterdayInFuture = (dateString) => {
|
|
||||||
const yesterday = prevDate(dateString)
|
|
||||||
return LocalDate.now().isBefore(LocalDate.parse(yesterday))
|
|
||||||
}
|
|
||||||
@@ -20,5 +20,5 @@ export function dateToTitle(dateString) {
|
|||||||
const dateToDisplay = LocalDate.parse(dateString)
|
const dateToDisplay = LocalDate.parse(dateString)
|
||||||
return today.equals(dateToDisplay) ?
|
return today.equals(dateToDisplay) ?
|
||||||
labels.today :
|
labels.today :
|
||||||
moment(dateString).format('MMMM Do')
|
moment(dateString).format('dddd, Do MMM YYYY')
|
||||||
}
|
}
|
||||||
+9
-3
@@ -80,11 +80,15 @@ class Home extends Component {
|
|||||||
{!this.cycleDayNumber && <AppText>{cycleDayText}</AppText>}
|
{!this.cycleDayNumber && <AppText>{cycleDayText}</AppText>}
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.line}>
|
<View style={styles.line}>
|
||||||
{!phase && <AppText style={styles.tourquiseText}>{phaseText}</AppText>}
|
{!phase &&
|
||||||
|
<AppText style={styles.tourquiseText}>{phaseText}</AppText>
|
||||||
|
}
|
||||||
{phase && (
|
{phase && (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<AppText style={styles.whiteText}>{phaseText}</AppText>
|
<AppText style={styles.whiteText}>{phaseText}</AppText>
|
||||||
<AppText style={styles.tourquiseText}>{labels.cyclePhase}</AppText>
|
<AppText style={styles.tourquiseText}>
|
||||||
|
{labels.cyclePhase}
|
||||||
|
</AppText>
|
||||||
<AppText style={styles.tourquiseText}>{status}</AppText>
|
<AppText style={styles.tourquiseText}>{status}</AppText>
|
||||||
<Asterisk />
|
<Asterisk />
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
@@ -99,7 +103,9 @@ class Home extends Component {
|
|||||||
{phase && (
|
{phase && (
|
||||||
<View style={styles.line}>
|
<View style={styles.line}>
|
||||||
<Asterisk />
|
<Asterisk />
|
||||||
<AppText style={styles.tourquiseText} linkStyle={styles.whiteText}>{statusText}</AppText>
|
<AppText style={styles.tourquiseText} linkStyle={styles.whiteText}>
|
||||||
|
{statusText}
|
||||||
|
</AppText>
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
|
|||||||
Reference in New Issue
Block a user