- Implemented handling of repeat days change

This commit is contained in:
Dejan
2024-10-24 20:35:42 +02:00
parent ae01b9daaf
commit 0b11381fce
3 changed files with 41 additions and 11 deletions

View File

@ -48,12 +48,14 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
); );
const { width, height } = Dimensions.get("screen"); const { width, height } = Dimensions.get("screen");
const [points, setPoints] = useState<number>(todo.points); const [points, setPoints] = useState<number>(todo.points);
const [selectedDays, setSelectedDays] = useState([]);
const { data: members } = useGetFamilyMembers(); const { data: members } = useGetFamilyMembers();
const handleClose = () => { const handleClose = () => {
setTodo(defaultTodo); setTodo(defaultTodo);
setSelectedAssignees([]); setSelectedAssignees([]);
setSelectedDays([]);
addChoreDialogProps.setIsVisible(false); addChoreDialogProps.setIsVisible(false);
}; };
@ -67,6 +69,17 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
} }
}; };
const handleRepeatDaysChange = (day: string, set: boolean) => {
if (set) {
setSelectedDays((prevState) => [...prevState, day]);
} else {
const array = selectedDays;
let index = array.indexOf(day);
array.splice(index, 1);
setSelectedDays(array);
}
}
return ( return (
<Dialog <Dialog
bottom={true} bottom={true}
@ -110,7 +123,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
updateToDo({ updateToDo({
...todo, ...todo,
points: points, points: points,
assignees: selectedAssignees, assignees: selectedAssignees
}); });
} else { } else {
addToDo({ addToDo({
@ -118,6 +131,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
done: false, done: false,
points: points, points: points,
assignees: selectedAssignees, assignees: selectedAssignees,
repeatDays: selectedDays
}); });
} }
handleClose(); handleClose();
@ -199,7 +213,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
))} ))}
</Picker> </Picker>
</View> </View>
{todo.repeatType == "Every week" && <RepeatFreq/>} {todo.repeatType == "Every week" && <RepeatFreq handleRepeatDaysChange={handleRepeatDaysChange}/>}
</View> </View>
<View style={styles.divider} /> <View style={styles.divider} />

View File

@ -1,7 +1,8 @@
import { View, Text, TouchableOpacity, Picker } from "react-native-ui-lib"; import { View, Text, TouchableOpacity, Picker } from "react-native-ui-lib";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import {DAYS_OF_WEEK_ENUM} from "@/hooks/firebase/types/todoData";
const RepeatFreq = () => { const RepeatFreq = ({ handleRepeatDaysChange }: { handleRepeatDaysChange: Function }) => {
const [weeks, setWeeks] = useState<number>(1); const [weeks, setWeeks] = useState<number>(1);
const weekOptions: number[] = Array.from({ length: 52 }, (_, i) => i + 1); const weekOptions: number[] = Array.from({ length: 52 }, (_, i) => i + 1);
@ -9,21 +10,25 @@ const RepeatFreq = () => {
return ( return (
<View row centerV spread marginR-30> <View row centerV spread marginR-30>
<RepeatOption value={"Monday"} /> <RepeatOption value={DAYS_OF_WEEK_ENUM.MONDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
<RepeatOption value={"Tuesday"} /> <RepeatOption value={DAYS_OF_WEEK_ENUM.TUESDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
<RepeatOption value={"Wednesday"} /> <RepeatOption value={DAYS_OF_WEEK_ENUM.WEDNESDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
<RepeatOption value={"Thirsday"} /> <RepeatOption value={DAYS_OF_WEEK_ENUM.THURSDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
<RepeatOption value={"Friday"} /> <RepeatOption value={DAYS_OF_WEEK_ENUM.FRIDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
<RepeatOption value={"Saturday"} /> <RepeatOption value={DAYS_OF_WEEK_ENUM.SATURDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
<RepeatOption value={"Sunday"} /> <RepeatOption value={DAYS_OF_WEEK_ENUM.SUNDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
</View> </View>
); );
}; };
export default RepeatFreq; export default RepeatFreq;
const RepeatOption = ({ value }: { value: string }) => { const RepeatOption = ({ value, handleRepeatDaysChange }: { value: string, handleRepeatDaysChange: Function }) => {
const [isSet, setisSet] = useState(false); const [isSet, setisSet] = useState(false);
useEffect(() => {
handleRepeatDaysChange(value, isSet);
}, [isSet])
return ( return (
<TouchableOpacity onPress={() => setisSet(!isSet)}> <TouchableOpacity onPress={() => setisSet(!isSet)}>
<View <View

View File

@ -11,4 +11,15 @@ export interface IToDo {
creatorId?: string; creatorId?: string;
familyId?: string; familyId?: string;
assignees?: string[]; // Optional list of assignees assignees?: string[]; // Optional list of assignees
connectedTodoId?: string;
}
export const DAYS_OF_WEEK_ENUM = {
MONDAY: "Monday",
TUESDAY: "Tuesday",
WEDNESDAY: "Wednesday",
THURSDAY: "Thursday",
FRIDAY: "Friday",
SATURDAY: "Saturday",
SUNDAY: "Sunday"
} }