ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-27 08:54:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

start on 0 seconds

Browse Source
This commit is contained in:
Milan Paunovic
2024-09-28 13:23:53 +02:00
parent 91717c699d
commit 594e54b11b
1 changed files with 300 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
components/pages/calendar/ManuallyAddEventModal.tsx
View File

@ -10,50 +10,58 @@ import {
TextField, TextField,
View, View,
} from "react-native-ui-lib"; } from "react-native-ui-lib";
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler"; import {ScrollView, TouchableOpacity} from "react-native-gesture-handler";
import { useSafeAreaInsets } from "react-native-safe-area-context"; import {useSafeAreaInsets} from "react-native-safe-area-context";
import {useEffect, useState} from "react"; import {useState} from "react";
import { MaterialIcons } from "@expo/vector-icons"; import {MaterialIcons} from "@expo/vector-icons";
import { PickerMultiValue } from "react-native-ui-lib/src/components/picker/types"; import {PickerMultiValue} from "react-native-ui-lib/src/components/picker/types";
import { useAuthContext } from "@/contexts/AuthContext"; import {useAuthContext} from "@/contexts/AuthContext";
import { useCreateEvent } from "@/hooks/firebase/useCreateEvent"; import {useCreateEvent} from "@/hooks/firebase/useCreateEvent";
import { EventData } from "@/hooks/firebase/types/eventData"; import {EventData} from "@/hooks/firebase/types/eventData";
import {addHours} from "date-fns"; import {addHours} from "date-fns";
const daysOfWeek = [ const daysOfWeek = [
{ label: "Monday", value: "monday" }, {label: "Monday", value: "monday"},
{ label: "Tuesday", value: "tuesday" }, {label: "Tuesday", value: "tuesday"},
{ label: "Wednesday", value: "wednesday" }, {label: "Wednesday", value: "wednesday"},
{ label: "Thursday", value: "thursday" }, {label: "Thursday", value: "thursday"},
{ label: "Friday", value: "friday" }, {label: "Friday", value: "friday"},
{ label: "Saturday", value: "saturday" }, {label: "Saturday", value: "saturday"},
{ label: "Sunday", value: "sunday" }, {label: "Sunday", value: "sunday"},
]; ];
export const ManuallyAddEventModal = ({ export const ManuallyAddEventModal = ({
show, show,
close, close,
initialDate initialDate
}: { }: {
show: boolean; show: boolean;
close: () => void; close: () => void;
initialDate?: Date initialDate?: Date
}) => { }) => {
const { user } = useAuthContext(); const {user} = useAuthContext();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const [title, setTitle] = useState<string>(""); const [title, setTitle] = useState<string>("");
const [isAllDay, setIsAllDay] = useState(false); const [isAllDay, setIsAllDay] = useState(false);
const [startTime, setStartTime] = useState(initialDate ?? new Date()); const [startTime, setStartTime] = useState(() => {
const [endTime, setEndTime] = useState(initialDate ? addHours(initialDate, 1) : new Date()); const date = initialDate ?? new Date();
date.setSeconds(0, 0);
return date;
});
const [endTime, setEndTime] = useState(() => {
const date = initialDate ? addHours(initialDate, 1) : new Date();
date.setSeconds(0, 0);
return date;
});
const [startDate, setStartDate] = useState(initialDate ?? new Date()); const [startDate, setStartDate] = useState(initialDate ?? new Date());
const [endDate, setEndDate] = useState(initialDate ?? new Date()); const [endDate, setEndDate] = useState(initialDate ?? new Date());
const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]); const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);
const { mutateAsync: createEvent, isLoading, isError } = useCreateEvent(); const {mutateAsync: createEvent, isLoading, isError} = useCreateEvent();
const formatDateTime = (date: Date) => { const formatDateTime = (date: Date) => {
return date.toLocaleDateString("en-US", { return date.toLocaleDateString("en-US", {
@ -140,7 +148,7 @@ export const ManuallyAddEventModal = ({
onRequestClose={close} onRequestClose={close}
transparent={false} transparent={false}
> >
<LoaderScreen message={"Saving event..."} color={Colors.grey40} /> <LoaderScreen message={"Saving event..."} color={Colors.grey40}/>
</Modal> </Modal>
); );
} }
@ -170,18 +178,18 @@ export const ManuallyAddEventModal = ({
}} }}
> >
<TouchableOpacity onPress={close}> <TouchableOpacity onPress={close}>
<Text style={{ color: "#007bff" }}>Cancel</Text> <Text style={{color: "#007bff"}}>Cancel</Text>
</TouchableOpacity> </TouchableOpacity>
<Text style={{ fontWeight: "bold", fontSize: 16 }}>Add event</Text> <Text style={{fontWeight: "bold", fontSize: 16}}>Add event</Text>
<TouchableOpacity onPress={handleSave}> <TouchableOpacity onPress={handleSave}>
<Text style={{ color: "#007bff" }}>Save</Text> <Text style={{color: "#007bff"}}>Save</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<ScrollView <ScrollView
contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 10 }} contentContainerStyle={{paddingHorizontal: 16, paddingTop: 10}}
> >
<View style={{ marginVertical: 10 }}> <View style={{marginVertical: 10}}>
<TextField <TextField
placeholder={"Title"} placeholder={"Title"}
floatingPlaceholder floatingPlaceholder
@ -205,9 +213,9 @@ export const ManuallyAddEventModal = ({
marginBottom: 20, marginBottom: 20,
}} }}
> >
<View style={{ flexDirection: "row", alignItems: "center" }}> <View style={{flexDirection: "row", alignItems: "center"}}>
<MaterialIcons name="schedule" size={24} color="gray" /> <MaterialIcons name="schedule" size={24} color="gray"/>
<Text style={{ marginLeft: 10 }}>All-day</Text> <Text style={{marginLeft: 10}}>All-day</Text>
</View> </View>
<Switch <Switch
value={isAllDay} value={isAllDay}
@ -273,13 +281,13 @@ export const ManuallyAddEventModal = ({
marginBottom: 20, marginBottom: 20,
}} }}
> >
<MaterialIcons name="repeat" size={24} color="gray" /> <MaterialIcons name="repeat" size={24} color="gray"/>
<Picker <Picker
value={repeatInterval} value={repeatInterval}
//@ts-ignore //@ts-ignore
onChange={(items: PickerMultiValue) => setRepeatInterval(items)} onChange={(items: PickerMultiValue) => setRepeatInterval(items)}
placeholder="Doest not repeat" placeholder="Doest not repeat"
style={{ marginLeft: 10, flex: 1 }} style={{marginLeft: 10, flex: 1}}
mode={Picker.modes.MULTI} mode={Picker.modes.MULTI}
getLabel={getRepeatLabel} getLabel={getRepeatLabel}
> >
@ -300,7 +308,7 @@ export const ManuallyAddEventModal = ({
marginBottom: 20, marginBottom: 20,
}} }}
> >
<MaterialIcons name="person-add" size={24} color="gray" /> <MaterialIcons name="person-add" size={24} color="gray"/>
<TouchableOpacity <TouchableOpacity
style={{ style={{
marginLeft: 10, marginLeft: 10,
@ -309,10 +317,10 @@ export const ManuallyAddEventModal = ({
flex: 1, flex: 1,
}} }}
> >
<Avatar size={40} backgroundColor={Colors.yellow10} /> <Avatar size={40} backgroundColor={Colors.yellow10}/>
<View style={{ marginLeft: 10 }}> <View style={{marginLeft: 10}}>
<Text>Other</Text> <Text>Other</Text>
<Text style={{ color: "gray" }}>{user?.email}</Text> <Text style={{color: "gray"}}>{user?.email}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>