Skip to content
This repository was archived by the owner on May 5, 2025. It is now read-only.

Commit 82e0466

Browse files
bakaqcbakaqc
committed
feat: enhance reminder settings with modals for lead time and occasions selection
1 parent d588880 commit 82e0466

File tree

5 files changed

+107
-11
lines changed

5 files changed

+107
-11
lines changed

‎bun.lock‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,17 @@
55
"name": "gift-idea-tracker",
66
"dependencies": {
77
"@expo/vector-icons": "14.1.0",
8-
"@react-native-community/datetimepicker": "^8.3.0",
8+
"@react-native-community/datetimepicker": "8.3.0",
99
"expo": "52.0.46",
10-
"expo-fast-image": "^1.1.3",
10+
"expo-fast-image": "1.1.3",
1111
"expo-linking": "7.0.5",
1212
"expo-router": "4.0.20",
1313
"expo-splash-screen": "0.29.24",
1414
"expo-status-bar": "2.0.1",
1515
"react": "18.3.1",
1616
"react-dom": "18.3.1",
1717
"react-native": "0.76.9",
18+
"react-native-modal": "^14.0.0-rc.1",
1819
"react-native-reanimated": "3.16.1",
1920
"react-native-safe-area-context": "4.12.0",
2021
"react-native-screens": "4.4.0",
@@ -1221,10 +1222,14 @@
12211222

12221223
"react-native": ["[email protected]", "", { "dependencies": { "@jest/create-cache-key-function": "^29.6.3", "@react-native/assets-registry": "0.76.9", "@react-native/codegen": "0.76.9", "@react-native/community-cli-plugin": "0.76.9", "@react-native/gradle-plugin": "0.76.9", "@react-native/js-polyfills": "0.76.9", "@react-native/normalize-colors": "0.76.9", "@react-native/virtualized-lists": "0.76.9", "abort-controller": "^3.0.0", "anser": "^1.4.9", "ansi-regex": "^5.0.0", "babel-jest": "^29.7.0", "babel-plugin-syntax-hermes-parser": "^0.23.1", "base64-js": "^1.5.1", "chalk": "^4.0.0", "commander": "^12.0.0", "event-target-shim": "^5.0.1", "flow-enums-runtime": "^0.0.6", "glob": "^7.1.1", "invariant": "^2.2.4", "jest-environment-node": "^29.6.3", "jsc-android": "^250231.0.0", "memoize-one": "^5.0.0", "metro-runtime": "^0.81.0", "metro-source-map": "^0.81.0", "mkdirp": "^0.5.1", "nullthrows": "^1.1.1", "pretty-format": "^29.7.0", "promise": "^8.3.0", "react-devtools-core": "^5.3.1", "react-refresh": "^0.14.0", "regenerator-runtime": "^0.13.2", "scheduler": "0.24.0-canary-efb381bbf-20230505", "semver": "^7.1.3", "stacktrace-parser": "^0.1.10", "whatwg-fetch": "^3.0.0", "ws": "^6.2.3", "yargs": "^17.6.2" }, "peerDependencies": { "@types/react": "^18.2.6", "react": "^18.2.0" }, "optionalPeers": ["@types/react"], "bin": { "react-native": "cli.js" } }, "sha512-+LRwecWmTDco7OweGsrECIqJu0iyrREd6CTCgC/uLLYipiHvk+MH9nd6drFtCw/6Blz6eoKTcH9YTTJusNtrWg=="],
12231224

1225+
"react-native-animatable": ["[email protected]", "", { "dependencies": { "prop-types": "^15.8.1" } }, "sha512-DZwaDVWm2NBvBxf7I0wXKXLKb/TxDnkV53sWhCvei1pRyTX3MVFpkvdYBknNBqPrxYuAIlPxEp7gJOidIauUkw=="],
1226+
12241227
"react-native-helmet-async": ["[email protected]", "", { "dependencies": { "invariant": "^2.2.4", "react-fast-compare": "^3.2.2", "shallowequal": "^1.1.0" }, "peerDependencies": { "react": "^16.6.0 || ^17.0.0 || ^18.0.0" } }, "sha512-m3CkXWss6B1dd6mCMleLpzDCJJGGaHOLQsUzZv8kAASJmMfmVT4d2fx375iXKTRWT25ThBfae3dECuX5cq/8hg=="],
12251228

12261229
"react-native-is-edge-to-edge": ["[email protected]", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-EH6i7E8epJGIcu7KpfXYXiV2JFIYITtq+rVS8uEb+92naMRBdxhTuS8Wn2Q7j9sqyO0B+Xbaaf9VdipIAmGW4w=="],
12271230

1231+
"react-native-modal": ["[email protected]", "", { "dependencies": { "react-native-animatable": "1.4.0" }, "peerDependencies": { "react": "*", "react-native": ">=0.70.0" } }, "sha512-v5pvGyx1FlmBzdHyPqBsYQyS2mIJhVmuXyNo5EarIzxicKhuoul6XasXMviGcXboEUT0dTYWs88/VendojPiVw=="],
1232+
12281233
"react-native-reanimated": ["[email protected]", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", "@babel/plugin-transform-classes": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", "@babel/plugin-transform-optional-chaining": "^7.0.0-0", "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", "@babel/plugin-transform-template-literals": "^7.0.0-0", "@babel/plugin-transform-unicode-regex": "^7.0.0-0", "@babel/preset-typescript": "^7.16.7", "convert-source-map": "^2.0.0", "invariant": "^2.2.4" }, "peerDependencies": { "@babel/core": "^7.0.0-0", "react": "*", "react-native": "*" } }, "sha512-Wnbo7toHZ6kPLAD8JWKoKCTfNoqYOMW5vUEP76Rr4RBmJCrdXj6oauYP0aZnZq8NCbiP5bwwu7+RECcWtoetnQ=="],
12291234

12301235
"react-native-safe-area-context": ["[email protected]", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-ukk5PxcF4p3yu6qMZcmeiZgowhb5AsKRnil54YFUUAXVIS7PJcMHGGC+q44fCiBg44/1AJk5njGMez1m9H0BVQ=="],

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"react": "18.3.1",
2020
"react-dom": "18.3.1",
2121
"react-native": "0.76.9",
22+
"react-native-modal": "^14.0.0-rc.1",
2223
"react-native-reanimated": "3.16.1",
2324
"react-native-safe-area-context": "4.12.0",
2425
"react-native-screens": "4.4.0"

‎src/app/settings.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const styles = StyleSheet.create({
2121
container: {
2222
flex: 1,
2323
backgroundColor: '#F8F9FA',
24+
marginTop: 28,
2425
},
2526
scrollView: {
2627
flex: 1,

‎src/components/settings/ReminderSettings.tsx‎

Lines changed: 94 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,98 @@
11
import React, { useState } from 'react';
22
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
33
import { MaterialIcons } from '@expo/vector-icons';
4+
import Modal from 'react-native-modal';
45

56
const ReminderSettings = () => {
67
const [leadTime, setLeadTime] = useState('1 day before');
78
const [occasions, setOccasions] = useState('All occasions');
9+
const [isLeadTimeModalVisible, setIsLeadTimeModalVisible] = useState(false);
10+
const [isOccasionsModalVisible, setIsOccasionsModalVisible] = useState(false);
11+
12+
const leadTimeOptions = ['1 day before', '2 days before', '1 week before', '1 month before'];
13+
const occasionsOptions = ['All occasions', 'Special occasions', 'Anniversaries'];
14+
15+
const toggleLeadTimeModal = () => {
16+
setIsLeadTimeModalVisible(!isLeadTimeModalVisible);
17+
};
18+
19+
const toggleOccasionsModal = () => {
20+
setIsOccasionsModalVisible(!isOccasionsModalVisible);
21+
};
822

923
return (
1024
<View style={styles.container}>
1125
<Text style={styles.sectionTitle}>Reminder Settings</Text>
26+
1227
<Text style={styles.label}>Choose lead time for reminders:</Text>
13-
<TouchableOpacity style={styles.dropdown}>
28+
<TouchableOpacity style={styles.dropdown} onPress={toggleLeadTimeModal}>
1429
<Text style={styles.dropdownText}>{leadTime}</Text>
1530
<MaterialIcons name="arrow-drop-down" size={24} color="#666" />
1631
</TouchableOpacity>
1732

1833
<Text style={styles.label}>Apply to:</Text>
19-
<TouchableOpacity style={styles.dropdown}>
34+
<TouchableOpacity style={styles.dropdown} onPress={toggleOccasionsModal}>
2035
<Text style={styles.dropdownText}>{occasions}</Text>
2136
<MaterialIcons name="arrow-drop-down" size={24} color="#666" />
2237
</TouchableOpacity>
38+
39+
{/* Lead Time Modal */}
40+
<Modal
41+
isVisible={isLeadTimeModalVisible}
42+
onBackdropPress={toggleLeadTimeModal}
43+
onBackButtonPress={toggleLeadTimeModal}
44+
>
45+
<View style={styles.modalContent}>
46+
{leadTimeOptions.map((option, index) => (
47+
<TouchableOpacity
48+
key={index}
49+
style={styles.option}
50+
onPress={() => {
51+
setLeadTime(option);
52+
toggleLeadTimeModal();
53+
}}
54+
>
55+
<View style={styles.radioButtonContainer}>
56+
<MaterialIcons
57+
name={leadTime === option ? 'radio-button-checked' : 'radio-button-unchecked'}
58+
size={24}
59+
color={leadTime === option ? '#007AFF' : '#666'}
60+
/>
61+
<Text style={styles.optionText}>{option}</Text>
62+
</View>
63+
</TouchableOpacity>
64+
))}
65+
</View>
66+
</Modal>
67+
68+
{/* Occasions Modal */}
69+
<Modal
70+
isVisible={isOccasionsModalVisible}
71+
onBackdropPress={toggleOccasionsModal}
72+
onBackButtonPress={toggleOccasionsModal}
73+
>
74+
<View style={styles.modalContent}>
75+
{occasionsOptions.map((option, index) => (
76+
<TouchableOpacity
77+
key={index}
78+
style={styles.option}
79+
onPress={() => {
80+
setOccasions(option);
81+
toggleOccasionsModal();
82+
}}
83+
>
84+
<View style={styles.radioButtonContainer}>
85+
<MaterialIcons
86+
name={occasions === option ? 'radio-button-checked' : 'radio-button-unchecked'}
87+
size={24}
88+
color={occasions === option ? '#007AFF' : '#666'}
89+
/>
90+
<Text style={styles.optionText}>{option}</Text>
91+
</View>
92+
</TouchableOpacity>
93+
))}
94+
</View>
95+
</Modal>
2396
</View>
2497
);
2598
};
@@ -29,7 +102,6 @@ const styles = StyleSheet.create({
29102
backgroundColor: 'white',
30103
borderRadius: 12,
31104
padding: 16,
32-
marginBottom: 16,
33105
},
34106
sectionTitle: {
35107
fontSize: 16,
@@ -56,6 +128,25 @@ const styles = StyleSheet.create({
56128
fontSize: 15,
57129
color: '#333',
58130
},
131+
modalContent: {
132+
backgroundColor: 'white',
133+
borderRadius: 8,
134+
padding: 16,
135+
},
136+
option: {
137+
paddingVertical: 12,
138+
flexDirection: 'row',
139+
alignItems: 'center',
140+
},
141+
radioButtonContainer: {
142+
flexDirection: 'row',
143+
alignItems: 'center',
144+
},
145+
optionText: {
146+
fontSize: 16,
147+
color: '#333',
148+
marginLeft: 8,
149+
},
59150
});
60151

61152
export default ReminderSettings;

‎src/components/settings/SyncedEvents.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,9 @@ import { MaterialIcons } from '@expo/vector-icons';
44

55
const SyncedEvents = () => {
66
const events = [
7-
{ id: 1, name: 'Event name', date: '12 Dec 2025', synced: true },
8-
{ id: 2, name: 'Event name', date: '12 Dec 2025', synced: false },
9-
{ id: 3, name: 'Event name', date: '12 Dec 2025', synced: true },
10-
{ id: 4, name: 'Event name', date: '12 Dec 2025', synced: true },
11-
{ id: 5, name: 'Event name', date: '12 Dec 2025', synced: true },
7+
{ id: 1, name: 'Event name 1', date: '1 May 2025', synced: true },
8+
{ id: 2, name: 'Event name 2', date: '12 Jan 2025', synced: false },
9+
{ id: 3, name: 'Event name 3', date: '12 Dec 2024', synced: true },
1210
];
1311

1412
return (
@@ -26,7 +24,7 @@ const SyncedEvents = () => {
2624
) : (
2725
<MaterialIcons name="close" size={20} color="#F44336" />
2826
)}
29-
<MaterialIcons name="content-copy" size={20} color="#666" style={styles.actionIcon} />
27+
<MaterialIcons name="edit" size={20} color="#ffaa00" style={styles.actionIcon} />
3028
<MaterialIcons name="delete" size={20} color="#666" />
3129
</View>
3230
</View>

0 commit comments

Comments
 (0)