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

calendar ui changes

Browse Source
This commit is contained in:
ivic00
2024-10-26 01:38:19 +02:00
parent 2ec014bcc7
commit d064d5c9c2
3 changed files with 249 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/(auth)/_layout.tsx
View File

@ -7,7 +7,7 @@ import {
DrawerItemList, DrawerItemList,
} from "@react-navigation/drawer"; } from "@react-navigation/drawer";
import { Button, View, Text, ButtonSize } from "react-native-ui-lib"; import { Button, View, Text, ButtonSize } from "react-native-ui-lib";
import { StyleSheet } from "react-native"; import { ImageBackground, StyleSheet } from "react-native";
import Feather from "@expo/vector-icons/Feather"; import Feather from "@expo/vector-icons/Feather";
import DrawerButton from "@/components/shared/DrawerButton"; import DrawerButton from "@/components/shared/DrawerButton";
import { import {
@ -43,7 +43,16 @@ export default function TabLayout() {
drawerContent={(props) => { drawerContent={(props) => {
return ( return (
<DrawerContentScrollView {...props} style={{ height: "100%" }}> <DrawerContentScrollView {...props} style={{ height: "100%" }}>
<View centerH centerV margin-30> <View centerV margin-30 row>
<ImageBackground
source={require("../../assets/images/splash.png")}
style={{
backgroundColor: "transparent",
height: 51.43,
aspectRatio: 1,
marginRight: 8,
}}
/>
<Text style={styles.title}>Welcome to Cally</Text> <Text style={styles.title}>Welcome to Cally</Text>
</View> </View>
<View <View
@ -203,7 +212,7 @@ const styles = StyleSheet.create({
label: { fontFamily: "Poppins_400Medium", fontSize: 15 }, label: { fontFamily: "Poppins_400Medium", fontSize: 15 },
title: { title: {
fontSize: 26.13, fontSize: 26.13,
fontFamily: 'Manrope_600SemiBold', fontFamily: "Manrope_600SemiBold",
color: "#262627" color: "#262627",
} },
}); });

208
components/pages/calendar/CalendarHeader.tsx
View File

@ -1,104 +1,134 @@
import React, {memo} from 'react'; import React, { memo } from "react";
import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib"; import {
import {MaterialIcons} from "@expo/vector-icons"; Button,
import {modeMap, months} from './constants'; Picker,
import {StyleSheet} from "react-native"; PickerModes,
import {useAtom} from "jotai"; SegmentedControl,
import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms"; Text,
import {isSameDay} from "date-fns"; View,
} from "react-native-ui-lib";
import { MaterialIcons } from "@expo/vector-icons";
import { modeMap, months } from "./constants";
import { StyleSheet } from "react-native";
import { useAtom } from "jotai";
import { modeAtom, selectedDateAtom } from "@/components/pages/calendar/atoms";
import { isSameDay } from "date-fns";
import { useAuthContext } from "@/contexts/AuthContext";
export const CalendarHeader = memo(() => { export const CalendarHeader = memo(() => {
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom); const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom); const [mode, setMode] = useAtom(modeAtom);
const { profileData } = useAuthContext();
const handleSegmentChange = (index: number) => { const handleSegmentChange = (index: number) => {
const selectedMode = modeMap.get(index); const selectedMode = modeMap.get(index);
if (selectedMode) { if (selectedMode) {
setTimeout(() => { setTimeout(() => {
setMode(selectedMode as "day" | "week" | "month"); setMode(selectedMode as "day" | "week" | "month");
}, 150); }, 150);
} }
}; };
const handleMonthChange = (month: string) => { const handleMonthChange = (month: string) => {
const currentDay = selectedDate.getDate(); const currentDay = selectedDate.getDate();
const currentYear = selectedDate.getFullYear(); const currentYear = selectedDate.getFullYear();
const newMonthIndex = months.indexOf(month); const newMonthIndex = months.indexOf(month);
const updatedDate = new Date(currentYear, newMonthIndex, currentDay); const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
setSelectedDate(updatedDate); setSelectedDate(updatedDate);
}; };
const isSelectedDateToday = isSameDay(selectedDate, new Date()) const isSelectedDateToday = isSameDay(selectedDate, new Date());
return ( return (
<View <View
style={{ style={{
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
paddingHorizontal: 10, paddingHorizontal: 10,
paddingVertical: 8, paddingVertical: 8,
borderRadius: 20, borderRadius: 20,
borderBottomLeftRadius: 0, borderBottomLeftRadius: 0,
borderBottomRightRadius: 0, borderBottomRightRadius: 0,
backgroundColor: "white", backgroundColor: "white",
marginBottom: 10, marginBottom: 10,
}} }}
>
<View row centerV gap-3>
<Text style={{ fontFamily: "Manrope_500Medium", fontSize: 17 }}>
{selectedDate.getFullYear()}
</Text>
<Picker
value={months[selectedDate.getMonth()]}
placeholder={"Select Month"}
style={{ fontFamily: "Manrope_500Medium", fontSize: 17, width: 85 }}
mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
topBarProps={{
title: selectedDate.getFullYear().toString(),
titleStyle: { fontFamily: "Manrope_500Medium", fontSize: 17 },
}}
> >
<View row centerV gap-3> {months.map((month) => (
<Text style={{fontFamily: "Manrope_500Medium", fontSize: 17}}> <Picker.Item key={month} label={month} value={month} />
{selectedDate.getFullYear()} ))}
</Text> </Picker>
<Picker </View>
value={months[selectedDate.getMonth()]}
placeholder={"Select Month"}
style={{fontFamily: "Manrope_500Medium", fontSize: 17}}
mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
topBarProps={{
title: selectedDate.getFullYear().toString(),
titleStyle: {fontFamily: "Manrope_500Medium", fontSize: 17},
}}
>
{months.map((month) => (
<Picker.Item key={month} label={month} value={month}/>
))}
</Picker>
</View>
<View row> <View row centerV>
{!isSelectedDateToday && ( {!isSelectedDateToday && (
<Button size={"small"} marginR-5 label={"Today"} onPress={() => { <Button
setSelectedDate(new Date()) size={"xSmall"}
setMode("day") marginR-0
}}/> avoidInnerPadding
)} padding-7
style={{
borderRadius: 5,
backgroundColor: "white",
borderWidth: 0.7,
borderColor: "#dadce0",
height: 30,
}}
labelStyle={{
fontSize: 12,
color: "black",
fontFamily: "Manrope_500Medium",
}}
label={new Date().toLocaleDateString("en-US", {
timeZone: profileData?.timeZone || "",
})}
onPress={() => {
setSelectedDate(new Date());
setMode("day");
console.log(profileData?.timeZone)
}}
/>
)}
<View> <View>
<SegmentedControl <SegmentedControl
segments={[{label: "D"}, {label: "W"}, {label: "M"}]} segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
backgroundColor="#ececec" backgroundColor="#ececec"
inactiveColor="#919191" inactiveColor="#919191"
activeBackgroundColor="#ea156c" activeBackgroundColor="#ea156c"
activeColor="white" activeColor="white"
outlineColor="white" outlineColor="white"
outlineWidth={3} outlineWidth={3}
segmentLabelStyle={styles.segmentslblStyle} segmentLabelStyle={styles.segmentslblStyle}
onChangeIndex={handleSegmentChange} onChangeIndex={handleSegmentChange}
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2} initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
/> />
</View>
</View>
</View> </View>
) </View>
; </View>
);
}); });
const styles = StyleSheet.create({ const styles = StyleSheet.create({
segmentslblStyle: { segmentslblStyle: {
fontSize: 12, fontSize: 12,
fontFamily: "Manrope_600SemiBold", fontFamily: "Manrope_600SemiBold",
}, },
}); });

212
components/pages/calendar/EventCalendar.tsx
View File

@ -1,32 +1,33 @@
import React, {useCallback, useEffect, useMemo, useState} from 'react'; import React, { useCallback, useEffect, useMemo, useState } from "react";
import {Calendar} from "react-native-big-calendar"; import { Calendar } from "react-native-big-calendar";
import {ActivityIndicator, StyleSheet, View} from "react-native"; import { ActivityIndicator, StyleSheet, View } from "react-native";
import {useGetEvents} from "@/hooks/firebase/useGetEvents"; import { useGetEvents } from "@/hooks/firebase/useGetEvents";
import {useAtom, useSetAtom} from "jotai"; import { useAtom, useSetAtom } from "jotai";
import { import {
editVisibleAtom, editVisibleAtom,
eventForEditAtom, eventForEditAtom,
modeAtom, modeAtom,
selectedDateAtom, selectedDateAtom,
selectedNewEventDateAtom selectedNewEventDateAtom,
} from "@/components/pages/calendar/atoms"; } from "@/components/pages/calendar/atoms";
import {useAuthContext} from "@/contexts/AuthContext"; import { useAuthContext } from "@/contexts/AuthContext";
import {CalendarEvent} from "@/components/pages/calendar/interfaces"; import { CalendarEvent } from "@/components/pages/calendar/interfaces";
interface EventCalendarProps { interface EventCalendarProps {
calendarHeight: number; calendarHeight: number;
// WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL // WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
calendarWidth: number; calendarWidth: number;
} }
const getTotalMinutes = () => { const getTotalMinutes = () => {
const date = new Date(); const date = new Date();
return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200); return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
} };
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendarHeight}) => { export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
const {data: events, isLoading} = useGetEvents(); ({ calendarHeight }) => {
const {profileData} = useAuthContext(); const { data: events, isLoading } = useGetEvents();
const { profileData } = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom); const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom); const [mode, setMode] = useAtom(modeAtom);
@ -35,113 +36,128 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom); const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
const [isRendering, setIsRendering] = useState(true); const [isRendering, setIsRendering] = useState(true);
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes()) const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
useEffect(() => { useEffect(() => {
if (events && mode) { if (events && mode) {
setIsRendering(true); setIsRendering(true);
const timeout = setTimeout(() => { const timeout = setTimeout(() => {
setIsRendering(false); setIsRendering(false);
}, 300); }, 300);
return () => clearTimeout(timeout); return () => clearTimeout(timeout);
} }
}, [events, mode]); }, [events, mode]);
const handlePressEvent = useCallback((event: CalendarEvent) => { const handlePressEvent = useCallback(
(event: CalendarEvent) => {
if (mode === "day" || mode === "week") { if (mode === "day" || mode === "week") {
setEditVisible(true); setEditVisible(true);
console.log({event}) console.log({ event });
setEventForEdit(event); setEventForEdit(event);
} else { } else {
setMode("day") setMode("day");
setSelectedDate(event.start); setSelectedDate(event.start);
} }
}, [setEditVisible, setEventForEdit, mode]); },
[setEditVisible, setEventForEdit, mode]
const handlePressCell = useCallback(
(date: Date) => {
if (mode === "day" || mode === "week") {
setSelectedNewEndDate(date);
} else {
setMode("day")
setSelectedDate(date);
}
},
[mode, setSelectedNewEndDate, setSelectedDate]
); );
const handleSwipeEnd = useCallback((date: Date) => { const handlePressCell = useCallback(
(date: Date) => {
if (mode === "day" || mode === "week") {
setSelectedNewEndDate(date);
} else {
setMode("day");
setSelectedDate(date);
}
},
[mode, setSelectedNewEndDate, setSelectedDate]
);
const handleSwipeEnd = useCallback(
(date: Date) => {
setSelectedDate(date); setSelectedDate(date);
}, [setSelectedDate]); },
[setSelectedDate]
);
const memoizedEventCellStyle = useCallback( const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => ({backgroundColor: event.eventColor}), (event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
[] []
); );
const memoizedWeekStartsOn = useMemo( const memoizedWeekStartsOn = useMemo(
() => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0), () => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
[profileData] [profileData]
); );
const memoizedHeaderContentStyle = useMemo( const memoizedHeaderContentStyle = useMemo(
() => (mode === "day" ? styles.dayModeHeader : {}), () => (mode === "day" ? styles.dayModeHeader : {}),
[mode] [mode]
); );
const memoizedEvents = useMemo(() => events ?? [], [events]); const memoizedEvents = useMemo(() => events ?? [], [events]);
useEffect(() => { useEffect(() => {
setOffsetMinutes(getTotalMinutes()) setOffsetMinutes(getTotalMinutes());
}, [events, mode]); }, [events, mode]);
if (isLoading || isRendering) { if (isLoading || isRendering) {
return ( return (
<View style={styles.loadingContainer}> <View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#0000ff"/> <ActivityIndicator size="large" color="#0000ff" />
</View> </View>
); );
} }
return ( return (
<Calendar <Calendar
bodyContainerStyle={styles.calHeader} bodyContainerStyle={styles.calHeader}
swipeEnabled swipeEnabled
enableEnrichedEvents enableEnrichedEvents
mode={mode} mode={mode}
events={memoizedEvents} events={memoizedEvents}
eventCellStyle={memoizedEventCellStyle} eventCellStyle={memoizedEventCellStyle}
onPressEvent={handlePressEvent} onPressEvent={handlePressEvent}
weekStartsOn={memoizedWeekStartsOn} weekStartsOn={memoizedWeekStartsOn}
height={calendarHeight} height={calendarHeight}
activeDate={selectedDate} activeDate={selectedDate}
date={selectedDate} date={selectedDate}
onPressCell={handlePressCell} onPressCell={handlePressCell}
headerContentStyle={memoizedHeaderContentStyle} headerContentStyle={memoizedHeaderContentStyle}
onSwipeEnd={handleSwipeEnd} onSwipeEnd={handleSwipeEnd}
scrollOffsetMinutes={offsetMinutes} scrollOffsetMinutes={offsetMinutes}
/> />
); );
}); }
);
const styles = StyleSheet.create({ const styles = StyleSheet.create({
segmentslblStyle: { segmentslblStyle: {
fontSize: 12, fontSize: 12,
fontFamily: "Manrope_600SemiBold", fontFamily: "Manrope_600SemiBold",
}, },
calHeader: { calHeader: {
borderWidth: 0, borderWidth: 0,
}, },
dayModeHeader: { dayModeHeader: {
alignSelf: "flex-start", alignSelf: "flex-start",
justifyContent: "space-between", justifyContent: "space-between",
alignContent: "center", alignContent: "center",
width: 38, width: 38,
right: 42, right: 42,
}, height: 13,
loadingContainer: { },
flex: 1, loadingContainer: {
justifyContent: 'center', flex: 1,
alignItems: 'center', justifyContent: "center",
}, alignItems: "center",
},
dayHeader: {
backgroundColor: "#4184f2",
aspectRatio: 1,
borderRadius: 100,
alignItems: "center",
justifyContent: "center",
},
}); });