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