mirror of
https://github.com/urosran/cally.git
synced 2025-11-27 00:44:54 +00:00
Fixes
This commit is contained in:
Milan Paunovic
@ -10,6 +10,7 @@ import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
|
|||||||
import {useSetAtom} from "jotai";
|
import {useSetAtom} from "jotai";
|
||||||
import {selectedNewEventDateAtom} from "@/components/pages/calendar/atoms";
|
import {selectedNewEventDateAtom} from "@/components/pages/calendar/atoms";
|
||||||
import PlusIcon from "@/assets/svgs/PlusIcon";
|
import PlusIcon from "@/assets/svgs/PlusIcon";
|
||||||
|
import {addMinutes, roundToNearestMinutes} from "date-fns";
|
||||||
|
|
||||||
export const AddEventDialog = () => {
|
export const AddEventDialog = () => {
|
||||||
const [show, setShow] = useState(false);
|
const [show, setShow] = useState(false);
|
||||||
@ -20,7 +21,8 @@ export const AddEventDialog = () => {
|
|||||||
const handleOpenManualInputModal = () => {
|
const handleOpenManualInputModal = () => {
|
||||||
setShow(false);
|
setShow(false);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setSelectedNewEndDate(new Date());
|
const roundedDate = roundToNearestMinutes(new Date(), {nearestTo: 5});
|
||||||
|
setSelectedNewEndDate(roundedDate);
|
||||||
}, 500);
|
}, 500);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import {
|
|||||||
Button,
|
Button,
|
||||||
ButtonSize,
|
ButtonSize,
|
||||||
Colors,
|
Colors,
|
||||||
DateTimePicker,
|
DateTimePicker, Dialog,
|
||||||
LoaderScreen,
|
LoaderScreen,
|
||||||
Modal,
|
Modal,
|
||||||
Picker,
|
Picker,
|
||||||
@ -39,8 +39,9 @@ import BinIcon from "@/assets/svgs/BinIcon";
|
|||||||
import DeleteEventDialog from "./DeleteEventDialog";
|
import DeleteEventDialog from "./DeleteEventDialog";
|
||||||
import {useDeleteEvent} from "@/hooks/firebase/useDeleteEvent";
|
import {useDeleteEvent} from "@/hooks/firebase/useDeleteEvent";
|
||||||
import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
|
import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
|
||||||
import { addHours, startOfHour, startOfMinute } from "date-fns";
|
import {addHours, format, startOfHour, startOfMinute} from "date-fns";
|
||||||
import {useAuthContext} from "@/contexts/AuthContext";
|
import {useAuthContext} from "@/contexts/AuthContext";
|
||||||
|
import {Calendar} from "react-native-calendars";
|
||||||
|
|
||||||
const daysOfWeek = [
|
const daysOfWeek = [
|
||||||
{label: "Monday", value: "monday"},
|
{label: "Monday", value: "monday"},
|
||||||
@ -84,6 +85,8 @@ export const ManuallyAddEventModal = () => {
|
|||||||
editEvent?.private || false
|
editEvent?.private || false
|
||||||
);
|
);
|
||||||
const [location, setLocation] = useState(editEvent?.location ?? "");
|
const [location, setLocation] = useState(editEvent?.location ?? "");
|
||||||
|
const [showStartDatePicker, setShowStartDatePicker] = useState(false);
|
||||||
|
const [showEndDatePicker, setShowEndDatePicker] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (allDayAtom === true) setIsAllDay(true);
|
if (allDayAtom === true) setIsAllDay(true);
|
||||||
@ -305,7 +308,163 @@ export const ManuallyAddEventModal = () => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const renderCalendarPicker = (
|
||||||
|
isStart: boolean,
|
||||||
|
visible: boolean,
|
||||||
|
onDismiss: () => void
|
||||||
|
) => {
|
||||||
|
const currentDate = isStart ? startDate : endDate;
|
||||||
|
const setDate = isStart ? setStartDate : setEndDate;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<Dialog
|
||||||
|
visible={visible}
|
||||||
|
onDismiss={onDismiss}
|
||||||
|
panDirection={"down"}
|
||||||
|
width="100%"
|
||||||
|
bottom
|
||||||
|
|
||||||
|
containerStyle={{
|
||||||
|
backgroundColor: Colors.white,
|
||||||
|
borderTopLeftRadius: 12,
|
||||||
|
borderTopRightRadius: 12,
|
||||||
|
paddingBottom: insets.bottom,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View padding-20>
|
||||||
|
<View row spread marginB-20>
|
||||||
|
<Text text70 style={{fontFamily: "Manrope_600SemiBold"}}>
|
||||||
|
Select Date
|
||||||
|
</Text>
|
||||||
|
<TouchableOpacity onPress={onDismiss}>
|
||||||
|
<Text style={{color: Colors.$textPrimary}}>Done</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Calendar
|
||||||
|
firstDay={1}
|
||||||
|
current={format(currentDate, 'yyyy-MM-dd')}
|
||||||
|
minDate={isStart ? undefined : format(startDate, 'yyyy-MM-dd')}
|
||||||
|
markedDates={{
|
||||||
|
[format(currentDate, 'yyyy-MM-dd')]: {
|
||||||
|
selected: true,
|
||||||
|
selectedColor: '#ea156c'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onDayPress={(day) => {
|
||||||
|
const newDate = new Date(day.timestamp);
|
||||||
|
newDate.setHours(currentDate.getHours());
|
||||||
|
newDate.setMinutes(currentDate.getMinutes());
|
||||||
|
setDate(newDate);
|
||||||
|
onDismiss();
|
||||||
|
}}
|
||||||
|
theme={{
|
||||||
|
selectedDayBackgroundColor: '#ea156c',
|
||||||
|
selectedDayTextColor: '#ffffff',
|
||||||
|
todayTextColor: '#ea156c',
|
||||||
|
arrowColor: '#ea156c',
|
||||||
|
}}
|
||||||
|
enableSwipeMonths={true}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderDateSection = () => (
|
||||||
|
<View marginL-30 centerV>
|
||||||
|
<View row spread marginB-10 centerV>
|
||||||
|
<View row>
|
||||||
|
<AntDesign name="clockcircleo" size={24} color="#919191"/>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontFamily: "PlusJakartaSans_500Medium",
|
||||||
|
fontSize: 16,
|
||||||
|
}}
|
||||||
|
marginL-10
|
||||||
|
>
|
||||||
|
All day
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View right marginR-30>
|
||||||
|
<Switch
|
||||||
|
onColor={"#ea156c"}
|
||||||
|
offColor={"#e1e1e2"}
|
||||||
|
marginL-10
|
||||||
|
value={isAllDay}
|
||||||
|
onValueChange={(value) => setIsAllDay(value)}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => setShowStartDatePicker(true)}
|
||||||
|
style={styles.dateButton}
|
||||||
|
>
|
||||||
|
<View row centerV spread paddingR-30>
|
||||||
|
<View row centerV>
|
||||||
|
<Feather name="calendar" size={25} color="#919191"/>
|
||||||
|
<Text marginL-8 style={styles.dateText}>
|
||||||
|
{format(startDate, 'MMM d, yyyy')}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
{!isAllDay && (
|
||||||
|
<DateTimePicker
|
||||||
|
value={startTime}
|
||||||
|
onChange={(time) => {
|
||||||
|
if (time <= endTime) {
|
||||||
|
setStartTime(time);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
minuteInterval={5}
|
||||||
|
mode="time"
|
||||||
|
timeFormat="HH:mm"
|
||||||
|
style={styles.timePicker}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
{!isAllDay && (
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => setShowEndDatePicker(true)}
|
||||||
|
style={styles.dateButton}
|
||||||
|
>
|
||||||
|
<View row centerV spread paddingR-30>
|
||||||
|
<View row centerV>
|
||||||
|
<Feather name="calendar" size={25} color="#919191"/>
|
||||||
|
<Text marginL-8 style={styles.dateText}>
|
||||||
|
{format(endDate, 'MMM d, yyyy')}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<DateTimePicker
|
||||||
|
value={endTime}
|
||||||
|
onChange={(time) => {
|
||||||
|
setEndTime(time);
|
||||||
|
if (
|
||||||
|
endDate.getDate() === startDate.getDate() &&
|
||||||
|
time.getHours() < startTime.getHours()
|
||||||
|
) {
|
||||||
|
const newEndDate = new Date(endDate);
|
||||||
|
newEndDate.setDate(newEndDate.getDate() + 1);
|
||||||
|
setEndDate(newEndDate);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
minuteInterval={5}
|
||||||
|
mode="time"
|
||||||
|
timeFormat="HH:mm"
|
||||||
|
style={styles.timePicker}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{renderCalendarPicker(true, showStartDatePicker, () => setShowStartDatePicker(false))}
|
||||||
|
{renderCalendarPicker(false, showEndDatePicker, () => setShowEndDatePicker(false))}
|
||||||
|
</View>)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
<Modal
|
<Modal
|
||||||
visible={show}
|
visible={show}
|
||||||
animationType="slide"
|
animationType="slide"
|
||||||
@ -416,117 +575,7 @@ export const ManuallyAddEventModal = () => {
|
|||||||
returnKeyType="next"
|
returnKeyType="next"
|
||||||
/>
|
/>
|
||||||
<View style={styles.divider} marginT-8/>
|
<View style={styles.divider} marginT-8/>
|
||||||
<View marginL-30 centerV>
|
{renderDateSection()}
|
||||||
<View row spread marginB-10 centerV>
|
|
||||||
<View row>
|
|
||||||
<AntDesign name="clockcircleo" size={24} color="#919191" />
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontFamily: "PlusJakartaSans_500Medium",
|
|
||||||
fontSize: 16,
|
|
||||||
}}
|
|
||||||
marginL-10
|
|
||||||
>
|
|
||||||
All day
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
<View right marginR-30>
|
|
||||||
<Switch
|
|
||||||
onColor={"#ea156c"}
|
|
||||||
offColor={"#e1e1e2"}
|
|
||||||
marginL-10
|
|
||||||
value={isAllDay}
|
|
||||||
onValueChange={(value) => setIsAllDay(value)}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
<View row marginB-10 spread>
|
|
||||||
<View row centerV>
|
|
||||||
<Feather name="calendar" size={25} color="#919191" />
|
|
||||||
<DateTimePicker
|
|
||||||
value={startDate}
|
|
||||||
onChange={(date) => {
|
|
||||||
setStartDate(date);
|
|
||||||
}}
|
|
||||||
//maximumDate={endDate}
|
|
||||||
style={{
|
|
||||||
fontFamily: "PlusJakartaSans_500Medium",
|
|
||||||
fontSize: 16,
|
|
||||||
}}
|
|
||||||
marginL-8
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
<DateTimePicker
|
|
||||||
value={startTime}
|
|
||||||
onChange={(time) => {
|
|
||||||
if (time <= endTime) {
|
|
||||||
setStartTime(time);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
minuteInterval={5}
|
|
||||||
dateTimeFormatter={(date, mode) =>
|
|
||||||
date.toLocaleTimeString("en-us", {
|
|
||||||
hour: "numeric",
|
|
||||||
minute: "numeric",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
mode="time"
|
|
||||||
style={{
|
|
||||||
fontFamily: "PlusJakartaSans_500Medium",
|
|
||||||
fontSize: 16,
|
|
||||||
}}
|
|
||||||
marginR-30
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{!isAllDay && (
|
|
||||||
<View row marginB-10 spread>
|
|
||||||
<View row centerV>
|
|
||||||
<Feather name="calendar" size={25} color="#919191" />
|
|
||||||
<DateTimePicker
|
|
||||||
value={endDate}
|
|
||||||
minimumDate={startDate}
|
|
||||||
text70
|
|
||||||
marginL-8
|
|
||||||
onChange={(date) => {
|
|
||||||
setEndDate(date);
|
|
||||||
}}
|
|
||||||
style={{
|
|
||||||
fontFamily: "PlusJakartaSans_500Medium",
|
|
||||||
fontSize: 16,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
<DateTimePicker
|
|
||||||
value={endTime}
|
|
||||||
onChange={(time) => {
|
|
||||||
setEndTime(time);
|
|
||||||
if (
|
|
||||||
endDate.getDate() === startDate.getDate() &&
|
|
||||||
time.getHours() < startTime.getHours()
|
|
||||||
) {
|
|
||||||
const newEndDate = new Date(endDate);
|
|
||||||
newEndDate.setDate(newEndDate.getDate() + 1);
|
|
||||||
setEndDate(newEndDate);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
minuteInterval={5}
|
|
||||||
dateTimeFormatter={(date, mode) =>
|
|
||||||
date.toLocaleTimeString("en-us", {
|
|
||||||
hour: "numeric",
|
|
||||||
minute: "numeric",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
mode="time"
|
|
||||||
style={{
|
|
||||||
fontFamily: "PlusJakartaSans_500Medium",
|
|
||||||
fontSize: 16,
|
|
||||||
}}
|
|
||||||
marginR-30
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={styles.divider}/>
|
<View style={styles.divider}/>
|
||||||
|
|
||||||
@ -743,6 +792,7 @@ export const ManuallyAddEventModal = () => {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Modal>
|
</Modal>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user