mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 16:34: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 {selectedNewEventDateAtom} from "@/components/pages/calendar/atoms";
|
||||
import PlusIcon from "@/assets/svgs/PlusIcon";
|
||||
import {addMinutes, roundToNearestMinutes} from "date-fns";
|
||||
|
||||
export const AddEventDialog = () => {
|
||||
const [show, setShow] = useState(false);
|
||||
@ -20,7 +21,8 @@ export const AddEventDialog = () => {
|
||||
const handleOpenManualInputModal = () => {
|
||||
setShow(false);
|
||||
setTimeout(() => {
|
||||
setSelectedNewEndDate(new Date());
|
||||
const roundedDate = roundToNearestMinutes(new Date(), {nearestTo: 5});
|
||||
setSelectedNewEndDate(roundedDate);
|
||||
}, 500);
|
||||
};
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import {
|
||||
Button,
|
||||
ButtonSize,
|
||||
Colors,
|
||||
DateTimePicker,
|
||||
DateTimePicker, Dialog,
|
||||
LoaderScreen,
|
||||
Modal,
|
||||
Picker,
|
||||
@ -39,8 +39,9 @@ import BinIcon from "@/assets/svgs/BinIcon";
|
||||
import DeleteEventDialog from "./DeleteEventDialog";
|
||||
import {useDeleteEvent} from "@/hooks/firebase/useDeleteEvent";
|
||||
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 {Calendar} from "react-native-calendars";
|
||||
|
||||
const daysOfWeek = [
|
||||
{label: "Monday", value: "monday"},
|
||||
@ -84,6 +85,8 @@ export const ManuallyAddEventModal = () => {
|
||||
editEvent?.private || false
|
||||
);
|
||||
const [location, setLocation] = useState(editEvent?.location ?? "");
|
||||
const [showStartDatePicker, setShowStartDatePicker] = useState(false);
|
||||
const [showEndDatePicker, setShowEndDatePicker] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
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 (
|
||||
<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
|
||||
visible={show}
|
||||
animationType="slide"
|
||||
@ -416,117 +575,7 @@ export const ManuallyAddEventModal = () => {
|
||||
returnKeyType="next"
|
||||
/>
|
||||
<View style={styles.divider} marginT-8/>
|
||||
<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>
|
||||
<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>
|
||||
{renderDateSection()}
|
||||
|
||||
<View style={styles.divider}/>
|
||||
|
||||
@ -743,6 +792,7 @@ export const ManuallyAddEventModal = () => {
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user