Skip to content

Commit

Permalink
Bugfix: Setting Arrows Orientation and Positioning (#184)
Browse files Browse the repository at this point in the history 
* bugfix: arrow position

* bugfix: ios arrow orientation and positioning

* added Comment

* remove unecessary styling

---------

Co-authored-by: Merrick Liu <[email protected]>
  • Loading branch information
@puyepuye @merrickliu888
puyepuye and merrickliu888 authored Jan 27, 2025
1 parent 164d89d commit c358dfd
Showing 1 changed file with 31 additions and 110 deletions.
141 changes: 31 additions & 110 deletions tpp-app/src/settings/Settings.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,5 @@
import React, { useState, useEffect, useCallback } from "react";
import {
View,
Switch,
Text,
StyleSheet,
TouchableOpacity,
ImageBackground,
SafeAreaView,
} from "react-native";
import { View, Switch, Text, StyleSheet, TouchableOpacity, ImageBackground, SafeAreaView } from "react-native";
import OnboardingBackground from "../../assets/SplashScreenBackground/colourwatercolour.png";
import CrampsIcon from "../../assets/icons/cramps.svg";
import ExerciseIcon from "../../assets/icons/exercise.svg";
Expand Down Expand Up @@ -35,10 +27,7 @@ import ErrorFallback from "../error/error-boundary";
const PreferenceButton = (props) => {
return (
<View style={styles.horizontalCenteredColumn}>
<TouchableOpacity
style={[styles.preferenceButton, { backgroundColor: props.set }]}
onPress={props.onPress}
>
<TouchableOpacity style={[styles.preferenceButton, { backgroundColor: props.set }]} onPress={props.onPress}>
{props.source === VIEWS.Flow && <FlowIcon />}
{props.source === VIEWS.Mood && <MoodIcon fill="black" />}
{props.source === VIEWS.Sleep && <SleepIcon />}
Expand Down Expand Up @@ -121,63 +110,32 @@ const Preferences = (props) => {
};

const handleCramp = () => {
POSTUpdateOnePreference(TRACK_SYMPTOMS.CRAMPS, cramps === WHITE).then(
() => {
cramps === WHITE ? trackCramps(TEAL) : trackCramps(WHITE);
}
);
POSTUpdateOnePreference(TRACK_SYMPTOMS.CRAMPS, cramps === WHITE).then(() => {
cramps === WHITE ? trackCramps(TEAL) : trackCramps(WHITE);
});
};

const handleExercise = () => {
POSTUpdateOnePreference(TRACK_SYMPTOMS.EXERCISE, exercise === WHITE).then(
() => {
exercise === WHITE ? trackExercise(TEAL) : trackExercise(WHITE);
}
);
POSTUpdateOnePreference(TRACK_SYMPTOMS.EXERCISE, exercise === WHITE).then(() => {
exercise === WHITE ? trackExercise(TEAL) : trackExercise(WHITE);
});
};

const handleOvulation = () => {
POSTUpdateOnePreference(TRACK_SYMPTOMS.OVULATION, ovulation === WHITE).then(
() => {
ovulation === WHITE ? trackOvulation(TEAL) : trackOvulation(WHITE);
}
);
POSTUpdateOnePreference(TRACK_SYMPTOMS.OVULATION, ovulation === WHITE).then(() => {
ovulation === WHITE ? trackOvulation(TEAL) : trackOvulation(WHITE);
});
};

return (
<View>
<Text style={styles.heading}>Tracking Preferences </Text>
<View style={styles.preferences}>
<PreferenceButton
source={VIEWS.Mood}
cardName="Mood"
set={mood}
onPress={handleMood}
/>
<PreferenceButton
source={VIEWS.Exercise}
cardName="Exercise"
set={exercise}
onPress={handleExercise}
/>
<PreferenceButton
source={VIEWS.Cramps}
cardName="Cramps"
set={cramps}
onPress={handleCramp}
/>
<PreferenceButton
source={VIEWS.Sleep}
cardName="Sleep"
set={sleep}
onPress={handleSleep}
/>
<PreferenceButton
source={VIEWS.Ovulation}
cardName="Ovulation"
set={ovulation}
onPress={handleOvulation}
/>
<PreferenceButton source={VIEWS.Mood} cardName="Mood" set={mood} onPress={handleMood} />
<PreferenceButton source={VIEWS.Exercise} cardName="Exercise" set={exercise} onPress={handleExercise} />
<PreferenceButton source={VIEWS.Cramps} cardName="Cramps" set={cramps} onPress={handleCramp} />
<PreferenceButton source={VIEWS.Sleep} cardName="Sleep" set={sleep} onPress={handleSleep} />
<PreferenceButton source={VIEWS.Ovulation} cardName="Ovulation" set={ovulation} onPress={handleOvulation} />
</View>
</View>
);
Expand All @@ -187,16 +145,9 @@ const SettingsStackButton = (props) => {
return (
<TouchableOpacity onPress={() => props.navigation.navigate(props.name)}>
<SafeAreaView style={[styles.rowContainer, styles.optionView]}>
<Text style={[styles.containerElement, styles.optionText]}>
{props.name}
</Text>
<Text style={[styles.containerElement, styles.optionText]}>{props.name}</Text>
<View style={styles.containerElement}>
<Icon
name="arrow-back-ios"
size={24}
color="#5A9F93"
style={styles.arrowBack}
/>
<Icon name="arrow-forward-ios" size={24} color="#5A9F93" />
</View>
</SafeAreaView>
<View
Expand Down Expand Up @@ -247,8 +198,7 @@ const NotificationSettings = (props) => {
// needed for Notification Page
const [remindSymptomsFreq, setRemindSymptomsFreq] = useState("Every day");
const [remindSymptomsTime, setRemindSymptomsTime] = useState("10:00");
const [remindSymptomsTimeMeridian, setRemindSymptomsTimeMeridian] =
useState("AM");
const [remindSymptomsTimeMeridian, setRemindSymptomsTimeMeridian] = useState("AM");

// get the days until period
useFocusEffect(
Expand All @@ -275,19 +225,12 @@ const NotificationSettings = (props) => {

useFocusEffect(
useCallback(() => {
if (props.route.params?.remindSymptomsFreq)
setRemindSymptomsFreq(props.route.params?.remindSymptomsFreq);
if (props.route.params?.remindSymptomsTime)
setRemindSymptomsTime(props.route.params?.remindSymptomsTime);
if (props.route.params?.remindSymptomsFreq) setRemindSymptomsFreq(props.route.params?.remindSymptomsFreq);
if (props.route.params?.remindSymptomsTime) setRemindSymptomsTime(props.route.params?.remindSymptomsTime);
if (props.route.params?.remindSymptomsTimeMeridian)
setRemindSymptomsTimeMeridian(
props.route.params?.remindSymptomsTimeMeridian
);
setRemindSymptomsTimeMeridian(props.route.params?.remindSymptomsTimeMeridian);

if (
props.route.params?.remindSymptomsFreq &&
props.route.params?.remindSymptomsTime
) {
if (props.route.params?.remindSymptomsFreq && props.route.params?.remindSymptomsTime) {
console.log(234);
POSTRemindLogSymptoms(remindSymptomsEnabled);
}
Expand Down Expand Up @@ -351,29 +294,16 @@ const NotificationSettings = (props) => {
{/* enabled={remindPeriodEnabled} />*/}
<NotificationsButton
text={"Remind me to log symptoms"}
subtext={`${remindSymptomsFreq} at ${
remindSymptomsTime + " " + remindSymptomsTimeMeridian
}`}
subtext={`${remindSymptomsFreq} at ${remindSymptomsTime + " " + remindSymptomsTimeMeridian}`}
toggle={toggleSymptomsSwitch}
enabled={remindSymptomsEnabled}
/>
<TouchableOpacity
onPress={() => props.navigation.navigate(STACK_SCREENS.NOTIFICATIONS)}
>
<TouchableOpacity onPress={() => props.navigation.navigate(STACK_SCREENS.NOTIFICATIONS)}>
<View>
<SafeAreaView
style={[styles.rowContainer, styles.notificationSettingsView]}
>
<Text style={[styles.containerElement, styles.optionText]}>
Customize notifications
</Text>
<SafeAreaView style={[styles.rowContainer, styles.notificationSettingsView]}>
<Text style={[styles.containerElement, styles.optionText]}>Customize notifications</Text>
<View style={styles.containerElement}>
<Icon
name="arrow-back-ios"
size={24}
color="#5A9F93"
style={styles.arrowBack}
/>
<Icon name="arrow-forward-ios" size={24} color="#5A9F93" />
</View>
</SafeAreaView>
<View
Expand All @@ -395,14 +325,8 @@ const SettingOptions = ({ navigation }) => {
<Text style={styles.heading}>Account settings </Text>
{/*<SettingsStackButton name={"Profile Information"} navigation={navigation} />*/}
{/*<SettingsStackButton name={"Privacy Policy"} navigation={navigation}/>*/}
<SettingsStackButton
name={STACK_SCREENS.BACK_UP_ACCOUNT}
navigation={navigation}
/>
<SettingsStackButton
name={STACK_SCREENS.DELETE_ACCOUNT}
navigation={navigation}
/>
<SettingsStackButton name={STACK_SCREENS.BACK_UP_ACCOUNT} navigation={navigation} />
<SettingsStackButton name={STACK_SCREENS.DELETE_ACCOUNT} navigation={navigation} />
</SafeAreaView>
);
};
Expand Down Expand Up @@ -438,7 +362,7 @@ const styles = StyleSheet.create({
marginTop: 18,
},
containerElement: {
flex: 1,
flex: 0,
},
preferences: {
flexDirection: "row",
Expand Down Expand Up @@ -513,9 +437,6 @@ const styles = StyleSheet.create({
flexDirection: "row",
justifyContent: "space-between",
},
arrowBack: {
transform: [{ rotateY: "180deg" }],
},
notificationSettingsView: {
flexDirection: "row",
justifyContent: "space-between",
Expand Down

0 comments on commit c358dfd

Please sign in to comment.