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

Commit 675e36f

Browse files
bakaqcbakaqc
committed
add: implement onIntegrate and onToggle props for CalendarIntegration and ReminderSettings components; add tests for CalendarIntegration, ReminderSettings, and SyncedEvents components
1 parent c7b59da commit 675e36f

File tree

6 files changed

+143
-56
lines changed

6 files changed

+143
-56
lines changed

‎src/components/settings/CalendarIntegration.tsx‎

Lines changed: 62 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,38 @@
11
import React from 'react';
2-
import { View, Text, StyleSheet, Image, Switch } from 'react-native';
2+
import { Button, Image, StyleSheet, Switch, Text, View } from 'react-native';
33

4-
const CalendarIntegration = () => {
5-
const [googleEnabled, setGoogleEnabled] = React.useState(false);
6-
const [appleEnabled, setAppleEnabled] = React.useState(false);
4+
interface CalendarIntegrationProps {
5+
onIntegrate?: () => void;
6+
}
77

8-
return (
9-
<View style={styles.container}>
10-
<Text style={styles.sectionTitle}>Calendar Integration</Text>
11-
<View style={styles.integrationItem}>
12-
<Image
13-
source={{ uri: 'https://www.gstatic.com/calendar/images/dynamiclogo_2020q4/calendar_31_2x.png' }}
14-
style={styles.calendarIcon}
15-
/>
16-
<Text style={styles.integrationText}>Connect with Google Calendar</Text>
17-
<Switch
18-
value={googleEnabled}
19-
onValueChange={setGoogleEnabled}
20-
trackColor={{ false: '#767577', true: '#4285F4' }}
21-
/>
22-
</View>
8+
const CalendarIntegration: React.FC<CalendarIntegrationProps> = ({
9+
onIntegrate,
10+
}) => {
11+
const [googleEnabled, setGoogleEnabled] = React.useState(false);
12+
const [appleEnabled, setAppleEnabled] = React.useState(false);
13+
14+
return (
15+
<View style={styles.container}>
16+
<Text style={styles.sectionTitle}>Calendar Integration</Text>
17+
<View style={styles.integrationItem}>
18+
<Image
19+
source={{
20+
uri: 'https://www.gstatic.com/calendar/images/dynamiclogo_2020q4/calendar_31_2x.png',
21+
}}
22+
style={styles.calendarIcon}
23+
/>
24+
<Text style={styles.integrationText}>Connect with Google Calendar</Text>
25+
<Switch
26+
value={googleEnabled}
27+
onValueChange={setGoogleEnabled}
28+
trackColor={{ false: '#767577', true: '#4285F4' }}
29+
/>
30+
</View>
2331
<View style={styles.integrationItem}>
24-
<Image
25-
source={{ uri: 'https://help.apple.com/assets/65D689DF13D1B1E17703916F/65D689E0D302CF88600FDD25/en_US/941b3852f089696217cabe420c7a459f.png' }}
32+
<Image
33+
source={{
34+
uri: 'https://help.apple.com/assets/65D689DF13D1B1E17703916F/65D689E0D302CF88600FDD25/en_US/941b3852f089696217cabe420c7a459f.png',
35+
}}
2636
style={styles.calendarIcon}
2737
/>
2838
<Text style={styles.integrationText}>Connect with Apple Calendar</Text>
@@ -32,37 +42,40 @@ const CalendarIntegration = () => {
3242
trackColor={{ false: '#767577', true: '#007AFF' }}
3343
/>
3444
</View>
35-
</View>
36-
);
45+
{onIntegrate && (
46+
<Button title="Integrate Calendar" onPress={onIntegrate} />
47+
)}
48+
</View>
49+
);
3750
};
3851

3952
const styles = StyleSheet.create({
40-
container: {
41-
backgroundColor: '#F8F9FA',
42-
borderRadius: 12,
43-
marginHorizontal: 16,
44-
},
45-
sectionTitle: {
46-
fontSize: 16,
47-
fontWeight: '600',
48-
marginBottom: 8,
49-
color: '#333',
50-
},
51-
integrationItem: {
52-
flexDirection: 'row',
53-
alignItems: 'center',
54-
marginBottom: 8,
55-
},
56-
calendarIcon: {
57-
width: 28,
58-
height: 28,
59-
marginRight: 12,
60-
},
61-
integrationText: {
62-
flex: 1,
63-
fontSize: 15,
64-
color: '#333',
65-
},
53+
container: {
54+
backgroundColor: '#F8F9FA',
55+
borderRadius: 12,
56+
marginHorizontal: 16,
57+
},
58+
sectionTitle: {
59+
fontSize: 16,
60+
fontWeight: '600',
61+
marginBottom: 8,
62+
color: '#333',
63+
},
64+
integrationItem: {
65+
flexDirection: 'row',
66+
alignItems: 'center',
67+
marginBottom: 8,
68+
},
69+
calendarIcon: {
70+
width: 28,
71+
height: 28,
72+
marginRight: 12,
73+
},
74+
integrationText: {
75+
flex: 1,
76+
fontSize: 15,
77+
color: '#333',
78+
},
6679
});
6780

6881
export default CalendarIntegration;

‎src/components/settings/ReminderSettings.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@ import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
33
import { MaterialIcons } from '@expo/vector-icons';
44
import Modal from 'react-native-modal';
55

6-
const ReminderSettings = () => {
6+
interface ReminderSettingsProps {
7+
onToggle?: () => void;
8+
}
9+
10+
const ReminderSettings: React.FC<ReminderSettingsProps> = ({ onToggle }) => {
711
const [leadTime, setLeadTime] = useState('1 day before');
812
const [occasions, setOccasions] = useState('All occasions');
913
const [isLeadTimeModalVisible, setIsLeadTimeModalVisible] = useState(false);
@@ -14,10 +18,12 @@ const ReminderSettings = () => {
1418

1519
const toggleLeadTimeModal = () => {
1620
setIsLeadTimeModalVisible(!isLeadTimeModalVisible);
21+
if (onToggle) onToggle();
1722
};
1823

1924
const toggleOccasionsModal = () => {
2025
setIsOccasionsModalVisible(!isOccasionsModalVisible);
26+
if (onToggle) onToggle();
2127
};
2228

2329
return (

‎src/components/settings/SyncedEvents.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,18 @@ import React from 'react';
22
import { View, Text, StyleSheet } from 'react-native';
33
import { MaterialIcons } from '@expo/vector-icons';
44

5-
const SyncedEvents = () => {
6-
const events = [
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 },
10-
];
5+
interface Event {
6+
id: number;
7+
name: string;
8+
date: string;
9+
synced: boolean;
10+
}
1111

12+
interface SyncedEventsProps {
13+
events: Event[];
14+
}
15+
16+
const SyncedEvents: React.FC<SyncedEventsProps> = ({ events }) => {
1217
return (
1318
<View style={styles.container}>
1419
<Text style={styles.sectionTitle}>Synced Events</Text>

‎tests/components/settings/CalendarIntegration.test.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { fireEvent, render } from '@testing-library/react-native';
2+
3+
import CalendarIntegration from '@/components/settings/CalendarIntegration';
4+
5+
describe('CalendarIntegration Component', () => {
6+
it('should render the calendar integration button', () => {
7+
const { getByText } = render(<CalendarIntegration />);
8+
expect(getByText('Integrate Calendar')).toBeTruthy();
9+
});
10+
11+
it('should trigger calendar integration on button press', () => {
12+
const mockIntegrateCalendar = jest.fn();
13+
const { getByText } = render(
14+
<CalendarIntegration onIntegrate={mockIntegrateCalendar} />,
15+
);
16+
fireEvent.press(getByText('Integrate Calendar'));
17+
expect(mockIntegrateCalendar).toHaveBeenCalled();
18+
});
19+
});

‎tests/components/settings/ReminderSettings.test.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { fireEvent, render } from '@testing-library/react-native';
2+
3+
import ReminderSettings from '@/components/settings/ReminderSettings';
4+
5+
describe('ReminderSettings Component', () => {
6+
it('should render the reminder toggle', () => {
7+
const { getByText } = render(<ReminderSettings />);
8+
expect(getByText('Enable Reminders')).toBeTruthy();
9+
});
10+
11+
it('should toggle reminders on switch press', () => {
12+
const mockToggleReminders = jest.fn();
13+
const { getByText } = render(
14+
<ReminderSettings onToggle={mockToggleReminders} />,
15+
);
16+
fireEvent.press(getByText('Enable Reminders'));
17+
expect(mockToggleReminders).toHaveBeenCalled();
18+
});
19+
});

‎tests/components/settings/SyncedEvents.test.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { render, fireEvent } from '@testing-library/react-native';
2+
import SyncedEvents from '@/components/settings/SyncedEvents';
3+
4+
describe('SyncedEvents Component', () => {
5+
it('should render a list of synced events', () => {
6+
const events = [
7+
{ id: 1, name: 'Event 1', date: '2025-05-01', synced: true },
8+
{ id: 2, name: 'Event 2', date: '2025-05-03', synced: false },
9+
];
10+
const { getByText } = render(<SyncedEvents events={events} />);
11+
expect(getByText('Event 1')).toBeTruthy();
12+
expect(getByText('Event 2')).toBeTruthy();
13+
});
14+
15+
it('should refresh events on button press', () => {
16+
const events = [
17+
{ id: 1, name: 'Event 1', date: '2025-05-01', synced: true },
18+
{ id: 2, name: 'Event 2', date: '2025-05-03', synced: false },
19+
];
20+
const mockRefreshEvents = jest.fn();
21+
const { getByText } = render(<SyncedEvents events={events} />);
22+
fireEvent.press(getByText('Refresh Events'));
23+
expect(mockRefreshEvents).toHaveBeenCalled();
24+
});
25+
});

0 commit comments

Comments
 (0)