mirror of
https://github.com/urosran/cally.git
synced 2025-07-10 07:07:16 +00:00
390 lines
14 KiB
TypeScript
390 lines
14 KiB
TypeScript
import {
|
|
Button,
|
|
ButtonSize,
|
|
DateTimePicker,
|
|
Dialog,
|
|
Picker,
|
|
PickerModes,
|
|
Switch,
|
|
Text,
|
|
TextField,
|
|
TextFieldRef,
|
|
View
|
|
} from "react-native-ui-lib";
|
|
import React, {useEffect, useRef, useState} from "react";
|
|
import PointsSlider from "@/components/shared/PointsSlider";
|
|
import {repeatOptions, useToDosContext} from "@/contexts/ToDosContext";
|
|
import {Ionicons} from "@expo/vector-icons";
|
|
import {PanningDirectionsEnum} from "react-native-ui-lib/src/incubator/panView";
|
|
import {Alert, Dimensions, KeyboardAvoidingView, StyleSheet} from "react-native";
|
|
import DropModalIcon from "@/assets/svgs/DropModalIcon";
|
|
import {IToDo, REPEAT_TYPE} from "@/hooks/firebase/types/todoData";
|
|
import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
|
|
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
|
|
import CalendarIcon from "@/assets/svgs/CalendarIcon";
|
|
import ProfileIcon from "@/assets/svgs/ProfileIcon";
|
|
import RepeatFreq from "./RepeatFreq";
|
|
import {useAuthContext} from "@/contexts/AuthContext";
|
|
import TodoRepeatIcon from "@/assets/svgs/TodoRepeatIcon";
|
|
|
|
interface IAddChoreDialog {
|
|
isVisible: boolean;
|
|
setIsVisible: (value: boolean) => void;
|
|
selectedTodo?: IToDo;
|
|
isShoppingTodo?: boolean;
|
|
}
|
|
|
|
const defaultTodo = {
|
|
id: "",
|
|
title: "",
|
|
points: 10,
|
|
date: new Date(),
|
|
rotate: false,
|
|
repeatType: REPEAT_TYPE.NONE,
|
|
assignees: [],
|
|
repeatDays: []
|
|
};
|
|
|
|
const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
|
|
const {user} = useAuthContext()
|
|
const {addToDo, updateToDo} = useToDosContext();
|
|
const [todo, setTodo] = useState<IToDo>(
|
|
addChoreDialogProps.selectedTodo ?? defaultTodo
|
|
);
|
|
const [selectedAssignees, setSelectedAssignees] = useState<string[]>(
|
|
addChoreDialogProps?.selectedTodo?.assignees ?? [user?.uid!]
|
|
);
|
|
const {width} = Dimensions.get("screen");
|
|
const [points, setPoints] = useState<number>(todo.points);
|
|
|
|
const titleRef = useRef<TextFieldRef>(null)
|
|
|
|
const {data: members} = useGetFamilyMembers();
|
|
let sortedMembers = members?.sort((a, b) => {
|
|
if (a.uid === user?.uid) return -1;
|
|
if (b.uid === user?.uid) return 1;
|
|
return 0;
|
|
})
|
|
|
|
const handleClose = () => {
|
|
setTodo(defaultTodo);
|
|
setSelectedAssignees([]);
|
|
addChoreDialogProps.setIsVisible(false);
|
|
};
|
|
|
|
const handleChange = (text: string) => {
|
|
const numericValue = parseInt(text, 10);
|
|
|
|
if (!isNaN(numericValue) && numericValue >= 0 && numericValue <= 100) {
|
|
setPoints(numericValue);
|
|
} else if (text === "") {
|
|
setPoints(0);
|
|
}
|
|
};
|
|
|
|
const handleRepeatDaysChange = (day: string, set: boolean) => {
|
|
if (set) {
|
|
const updatedTodo = {
|
|
...todo,
|
|
repeatDays: [...todo.repeatDays, day]
|
|
}
|
|
setTodo(updatedTodo);
|
|
} else {
|
|
const array = todo.repeatDays ?? [];
|
|
let index = array.indexOf(day);
|
|
array.splice(index, 1);
|
|
const updatedTodo = {
|
|
...todo,
|
|
repeatDays: array
|
|
}
|
|
setTodo(updatedTodo);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
titleRef?.current?.focus()
|
|
}, 500)
|
|
}, []);
|
|
|
|
const repeatPickerRef = useRef();
|
|
const showRepeatPicker = () => {
|
|
repeatPickerRef.current?.toggleExpandable(true);
|
|
}
|
|
|
|
const validateTodo = () => {
|
|
if (!todo?.title) {
|
|
Alert.alert('Alert', 'Title field cannot be empty');
|
|
return false;
|
|
}
|
|
if (!selectedAssignees || selectedAssignees?.length === 0) {
|
|
Alert.alert('Alert', 'Cannot have a todo without any assignees');
|
|
return false;
|
|
}
|
|
if (todo?.repeatType === REPEAT_TYPE.EVERY_WEEK && todo?.repeatDays?.length === 0) {
|
|
Alert.alert('Alert', 'Please select a specific day for the Weekly recurrence');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
return (
|
|
<Dialog
|
|
bottom={true}
|
|
height={"90%"}
|
|
width={width}
|
|
panDirection={PanningDirectionsEnum.DOWN}
|
|
onDismiss={() => handleClose}
|
|
containerStyle={{
|
|
borderRadius: 10,
|
|
backgroundColor: "white",
|
|
alignSelf: "stretch",
|
|
padding: 0,
|
|
paddingTop: 4,
|
|
margin: 0,
|
|
maxWidth: 600
|
|
}}
|
|
visible={addChoreDialogProps.isVisible}
|
|
>
|
|
<View row spread>
|
|
<Button
|
|
color="#05a8b6"
|
|
style={styles.topBtn}
|
|
label="Cancel"
|
|
onPress={() => {
|
|
handleClose();
|
|
}}
|
|
/>
|
|
<View marginT-12>
|
|
<DropModalIcon
|
|
onPress={() => {
|
|
handleClose();
|
|
}}
|
|
/>
|
|
</View>
|
|
<Button
|
|
color="#05a8b6"
|
|
style={styles.topBtn}
|
|
label="Save"
|
|
onPress={() => {
|
|
try {
|
|
if (addChoreDialogProps.selectedTodo && !addChoreDialogProps.isShoppingTodo) {
|
|
if (validateTodo()) {
|
|
updateToDo({
|
|
...todo,
|
|
points: points,
|
|
assignees: selectedAssignees,
|
|
currentAssignee: selectedAssignees[0],
|
|
});
|
|
} else {
|
|
return;
|
|
}
|
|
} else {
|
|
if (validateTodo()) {
|
|
addToDo({
|
|
...todo,
|
|
done: false,
|
|
points: points,
|
|
assignees: selectedAssignees,
|
|
currentAssignee: selectedAssignees[0],
|
|
repeatDays: todo.repeatDays ?? []
|
|
});
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
handleClose();
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}}
|
|
/>
|
|
</View>
|
|
<KeyboardAvoidingView>
|
|
<TextField
|
|
placeholder="Add a To Do"
|
|
value={todo?.title}
|
|
onChangeText={(text) => {
|
|
setTodo((oldValue: IToDo) => ({...oldValue, title: text}));
|
|
}}
|
|
placeholderTextColor="#2d2d30"
|
|
text60R
|
|
marginT-15
|
|
marginL-30
|
|
ref={titleRef}
|
|
/>
|
|
<View style={styles.divider} marginT-8/>
|
|
<View marginL-30 centerV>
|
|
<View row marginB-10>
|
|
{todo?.date && (
|
|
<View row centerV>
|
|
<CalendarIcon color="#919191" width={24} height={24}/>
|
|
<DateTimePicker
|
|
value={todo.date}
|
|
text70
|
|
style={{
|
|
fontFamily: "PlusJakartaSans_500Medium",
|
|
fontSize: 16,
|
|
}}
|
|
marginL-12
|
|
onChange={(date) => {
|
|
setTodo((oldValue: IToDo) => ({...oldValue, date: date}));
|
|
}}
|
|
/>
|
|
</View>
|
|
)}
|
|
</View>
|
|
<View row centerV>
|
|
<TodoRepeatIcon onPress={showRepeatPicker}/>
|
|
<Picker
|
|
ref={repeatPickerRef}
|
|
marginL-12
|
|
placeholder="Select Repeat Type"
|
|
value={todo?.repeatType}
|
|
onChange={(value) => {
|
|
if (value) {
|
|
setTodo((oldValue) => ({
|
|
...oldValue,
|
|
repeatType: value.toString(),
|
|
repeatDays: []
|
|
}));
|
|
}
|
|
}}
|
|
topBarProps={{title: "Repeat"}}
|
|
style={{
|
|
marginVertical: 5,
|
|
fontFamily: "PlusJakartaSans_500Medium",
|
|
fontSize: 16,
|
|
}}
|
|
>
|
|
{repeatOptions.map((option) => (
|
|
<Picker.Item
|
|
key={option.value}
|
|
label={option.label}
|
|
value={option.value}
|
|
/>
|
|
))}
|
|
</Picker>
|
|
</View>
|
|
{todo.repeatType == REPEAT_TYPE.EVERY_WEEK && <RepeatFreq handleRepeatDaysChange={handleRepeatDaysChange}
|
|
repeatDays={todo.repeatDays ?? []}/>}
|
|
</View>
|
|
<View style={styles.divider}/>
|
|
|
|
<View marginH-30 marginB-10 row centerV>
|
|
<ProfileIcon color="#919191"/>
|
|
<Text style={styles.sub} marginL-10>
|
|
Assignees
|
|
</Text>
|
|
<View flex-1/>
|
|
<Picker
|
|
marginL-8
|
|
value={selectedAssignees}
|
|
onChange={(value) => {
|
|
setSelectedAssignees(value);
|
|
}}
|
|
style={{marginVertical: 5}}
|
|
mode={PickerModes.MULTI}
|
|
renderInput={() => (
|
|
<Button
|
|
size={ButtonSize.small}
|
|
paddingH-8
|
|
iconSource={() => (
|
|
<Ionicons name="add-outline" size={20} color="#ea156c"/>
|
|
)}
|
|
style={{
|
|
marginLeft: "auto",
|
|
borderRadius: 8,
|
|
backgroundColor: "#ffe8f1",
|
|
borderColor: "#ea156c",
|
|
borderWidth: 1,
|
|
}}
|
|
color="#ea156c"
|
|
label="Assign"
|
|
labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
|
|
/>
|
|
)}
|
|
>
|
|
{sortedMembers?.map((member) => (
|
|
<Picker.Item
|
|
key={member.uid}
|
|
label={member?.firstName + " " + member?.lastName}
|
|
value={member?.uid!}
|
|
/>
|
|
))}
|
|
</Picker>
|
|
</View>
|
|
<View row marginL-27 marginT-0>
|
|
<AssigneesDisplay
|
|
selectedAttendees={selectedAssignees}
|
|
setSelectedAttendees={setSelectedAssignees}
|
|
/>
|
|
</View>
|
|
{todo.repeatType !== REPEAT_TYPE.NONE && selectedAssignees?.length > 1 &&
|
|
<View row centerV style={styles.rotateSwitch}>
|
|
<Text style={{fontFamily: "PlusJakartaSans_500Medium", fontSize: 16}}>
|
|
Take Turns
|
|
</Text>
|
|
<Switch
|
|
onColor={"#ea156c"}
|
|
value={todo.rotate}
|
|
style={{width: 43.06, height: 27.13}}
|
|
marginL-10
|
|
onValueChange={(value) =>
|
|
setTodo((oldValue) => ({...oldValue, rotate: value}))
|
|
}
|
|
/>
|
|
</View>
|
|
}
|
|
<View style={styles.divider}/>
|
|
<View marginH-30 marginB-15 row centerV>
|
|
<Ionicons name="gift-outline" size={25} color="#919191"/>
|
|
<Text style={styles.sub} marginL-10>
|
|
Reward Points
|
|
</Text>
|
|
</View>
|
|
<PointsSlider
|
|
points={points}
|
|
setPoints={setPoints}
|
|
handleChange={handleChange}
|
|
/>
|
|
</KeyboardAvoidingView>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default AddChoreDialog;
|
|
|
|
const styles = StyleSheet.create({
|
|
divider: {height: 1, backgroundColor: "#e4e4e4", marginVertical: 15},
|
|
gradient: {
|
|
height: "25%",
|
|
position: "absolute",
|
|
bottom: 0,
|
|
width: "100%",
|
|
},
|
|
buttonContainer: {
|
|
position: "absolute",
|
|
bottom: 25,
|
|
width: "100%",
|
|
},
|
|
button: {
|
|
backgroundColor: "rgb(253, 23, 117)",
|
|
paddingVertical: 20,
|
|
},
|
|
topBtn: {
|
|
backgroundColor: "white",
|
|
color: "#05a8b6",
|
|
},
|
|
rotateSwitch: {
|
|
marginLeft: 35,
|
|
marginBottom: 10,
|
|
marginTop: 25,
|
|
},
|
|
sub: {
|
|
fontFamily: "Manrope_600SemiBold",
|
|
fontSize: 18,
|
|
},
|
|
});
|