mirror of
https://github.com/urosran/cally.git
synced 2026-10-23 07:27:55 +00:00
Merge branch 'dev'
# Conflicts: # app/(auth)/calendar/index.tsx # yarn.lock
This commit is contained in:
Milan Paunovic
+126
-96
@@ -1,130 +1,160 @@
|
||||
import React, {useRef, useState} from "react";
|
||||
import {LayoutChangeEvent} from "react-native";
|
||||
import {Calendar} from "react-native-big-calendar";
|
||||
import {Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
|
||||
import {MaterialIcons} from "@expo/vector-icons";
|
||||
import {AddEventDialog} from "@/components/pages/calendar/AddEventDialog";
|
||||
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
|
||||
import {useAuthContext} from "@/contexts/AuthContext";
|
||||
import React, { useRef, useState } from "react";
|
||||
import { LayoutChangeEvent, StyleSheet } from "react-native";
|
||||
import { Calendar } from "react-native-big-calendar";
|
||||
import {
|
||||
Picker,
|
||||
PickerModes,
|
||||
SegmentedControl,
|
||||
View,
|
||||
} from "react-native-ui-lib";
|
||||
import { MaterialIcons } from "@expo/vector-icons";
|
||||
import { AddEventDialog } from "@/components/pages/calendar/AddEventDialog";
|
||||
import { useGetEvents } from "@/hooks/firebase/useGetEvents";
|
||||
import { useAuthContext } from "@/contexts/AuthContext";
|
||||
import HeaderTemplate from "@/components/shared/HeaderTemplate";
|
||||
import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch";
|
||||
import {ManuallyAddEventModal} from "@/components/pages/calendar/ManuallyAddEventModal";
|
||||
|
||||
const modeMap = new Map([
|
||||
[0, "day"],
|
||||
[1, "week"],
|
||||
[2, "month"]
|
||||
[0, "day"],
|
||||
[1, "week"],
|
||||
[2, "month"],
|
||||
]);
|
||||
|
||||
const months = [
|
||||
"January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December",
|
||||
];
|
||||
|
||||
export default function Screen() {
|
||||
const {profileData} = useAuthContext();
|
||||
const [calendarHeight, setCalendarHeight] = useState(0);
|
||||
const [mode, setMode] = useState<"week" | "month" | "day">("week");
|
||||
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
|
||||
const {profileData} = useAuthContext();
|
||||
const [calendarHeight, setCalendarHeight] = useState(0);
|
||||
const [mode, setMode] = useState<"week" | "month" | "day">("week");
|
||||
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
|
||||
const [selectedNewEventDate, setSelectedNewEndDate] = useState<Date | undefined>(undefined);
|
||||
|
||||
const calendarContainerRef = useRef(null);
|
||||
const {data: events } = useGetEvents();
|
||||
|
||||
const calendarContainerRef = useRef(null);
|
||||
const {data: events} = useGetEvents()
|
||||
const onLayout = (event: LayoutChangeEvent) => {
|
||||
const { height } = event.nativeEvent.layout;
|
||||
setCalendarHeight(height);
|
||||
};
|
||||
|
||||
const onLayout = (event: LayoutChangeEvent) => {
|
||||
const {height} = event.nativeEvent.layout;
|
||||
setCalendarHeight(height);
|
||||
};
|
||||
const handleSegmentChange = (index: number) => {
|
||||
const selectedMode = modeMap.get(index);
|
||||
if (selectedMode) {
|
||||
setMode(selectedMode as "day" | "week" | "month");
|
||||
}
|
||||
};
|
||||
|
||||
const handleSegmentChange = (index: number) => {
|
||||
const selectedMode = modeMap.get(index);
|
||||
if (selectedMode) {
|
||||
setMode(selectedMode as "week" | "month" | "day");
|
||||
}
|
||||
};
|
||||
const handleMonthChange = (month: string) => {
|
||||
const currentYear = selectedDate.getFullYear();
|
||||
const currentDay = selectedDate.getDate();
|
||||
const newMonthIndex = months.indexOf(month);
|
||||
|
||||
const handleMonthChange = (month: string) => {
|
||||
const currentYear = selectedDate.getFullYear();
|
||||
const currentDay = selectedDate.getDate();
|
||||
const newMonthIndex = months.indexOf(month);
|
||||
// Update the date with the new month while preserving the day and year
|
||||
const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
|
||||
setSelectedDate(updatedDate);
|
||||
};
|
||||
|
||||
// Update the date with the new month while preserving the day and year
|
||||
const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
|
||||
setSelectedDate(updatedDate);
|
||||
};
|
||||
console.log({events});
|
||||
|
||||
console.log({events})
|
||||
return (
|
||||
<View style={{ flex: 1, height: "100%", padding: 10 }}>
|
||||
<HeaderTemplate
|
||||
message={"Let's get your week started!"}
|
||||
isWelcome={true}
|
||||
/>
|
||||
|
||||
return (
|
||||
<View style={{flex: 1, height: "100%", padding: 10}}>
|
||||
<View style={{height: 60, justifyContent: "space-evenly", alignItems: "flex-start"}}>
|
||||
<Text>Welcome {profileData?.firstName}</Text>
|
||||
<Text>Let's get your week started!</Text>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{flex: 1, backgroundColor: "#fff", borderRadius: 30}}
|
||||
ref={calendarContainerRef}
|
||||
onLayout={onLayout}
|
||||
<View
|
||||
style={{ flex: 1, backgroundColor: "#fff", borderRadius: 30 }}
|
||||
ref={calendarContainerRef}
|
||||
onLayout={onLayout}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 20,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
backgroundColor: "white",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Picker
|
||||
value={months[selectedDate.getMonth()]} // Get the month from the date
|
||||
placeholder={"Select Month"}
|
||||
mode={PickerModes.SINGLE}
|
||||
onChange={(itemValue) => handleMonthChange(itemValue as string)}
|
||||
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
|
||||
>
|
||||
<View style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 20,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
backgroundColor: "#f9f9f9",
|
||||
marginBottom: 10,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {width: 0, height: 2},
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 5,
|
||||
elevation: 3,
|
||||
}}>
|
||||
<Picker
|
||||
value={months[selectedDate.getMonth()]} // Get the month from the date
|
||||
placeholder={"Select Month"}
|
||||
mode={PickerModes.SINGLE}
|
||||
onChange={(itemValue) => handleMonthChange(itemValue as string)}
|
||||
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
|
||||
>
|
||||
{months.map((month) => (
|
||||
<Picker.Item key={month} label={month} value={month}/>
|
||||
))}
|
||||
</Picker>
|
||||
{months.map((month) => (
|
||||
<Picker.Item key={month} label={month} value={month} />
|
||||
))}
|
||||
</Picker>
|
||||
|
||||
<View>
|
||||
<SegmentedControl
|
||||
segments={[
|
||||
{label: "D"},
|
||||
{label: "W"},
|
||||
{label: "M"}
|
||||
]}
|
||||
{label: "M"}]}
|
||||
backgroundColor="#ececec"
|
||||
inactiveColor="#919191"
|
||||
activeBackgroundColor="#ea156c"
|
||||
activeColor="white"
|
||||
outlineColor="white"
|
||||
outlineWidth={3}
|
||||
style={{ backgroundColor: "green" }}
|
||||
segmentLabelStyle={styles.segmentslblStyle}
|
||||
onChangeIndex={handleSegmentChange}
|
||||
initialIndex={[...modeMap.entries()].find(([_, value]) => value === mode)?.[0] || 1}
|
||||
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{calendarHeight > 0 && (
|
||||
<Calendar
|
||||
mode={mode}
|
||||
events={events ?? []}
|
||||
height={calendarHeight}
|
||||
activeDate={selectedDate}
|
||||
onPressCell={setSelectedNewEndDate}
|
||||
{calendarHeight > 0 && (
|
||||
<Calendar
|
||||
bodyContainerStyle={styles.calHeader}
|
||||
mode={mode}
|
||||
events={events ?? []}
|
||||
height={calendarHeight}
|
||||
activeDate={selectedDate}
|
||||
onPressCell={setSelectedNewEndDate}
|
||||
onSwipeEnd={(newDate) => {
|
||||
console.log(newDate)
|
||||
setSelectedDate(newDate);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
|
||||
console.log(newDate);
|
||||
setSelectedDate(newDate);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
<CalendarViewSwitch />
|
||||
<AddEventDialog/>
|
||||
<ManuallyAddEventModal key={`${selectedNewEventDate}`} initialDate={selectedNewEventDate} show={!!selectedNewEventDate} close={() => setSelectedNewEndDate(undefined)}/>
|
||||
</View>
|
||||
);
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
segmentslblStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
calHeader: {
|
||||
borderWidth: 0,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user