ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 08:24:55 +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",
} },
}); });

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

@ -1,15 +1,24 @@
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);
@ -29,7 +38,7 @@ export const CalendarHeader = memo(() => {
setSelectedDate(updatedDate); setSelectedDate(updatedDate);
}; };
const isSelectedDateToday = isSameDay(selectedDate, new Date()) const isSelectedDateToday = isSameDay(selectedDate, new Date());
return ( return (
<View <View
@ -47,38 +56,60 @@ export const CalendarHeader = memo(() => {
}} }}
> >
<View row centerV gap-3> <View row centerV gap-3>
<Text style={{fontFamily: "Manrope_500Medium", fontSize: 17}}> <Text style={{ fontFamily: "Manrope_500Medium", fontSize: 17 }}>
{selectedDate.getFullYear()} {selectedDate.getFullYear()}
</Text> </Text>
<Picker <Picker
value={months[selectedDate.getMonth()]} value={months[selectedDate.getMonth()]}
placeholder={"Select Month"} placeholder={"Select Month"}
style={{fontFamily: "Manrope_500Medium", fontSize: 17}} style={{ fontFamily: "Manrope_500Medium", fontSize: 17, width: 85 }}
mode={PickerModes.SINGLE} mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)} onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>} trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
topBarProps={{ topBarProps={{
title: selectedDate.getFullYear().toString(), title: selectedDate.getFullYear().toString(),
titleStyle: {fontFamily: "Manrope_500Medium", fontSize: 17}, titleStyle: { fontFamily: "Manrope_500Medium", fontSize: 17 },
}} }}
> >
{months.map((month) => ( {months.map((month) => (
<Picker.Item key={month} label={month} value={month}/> <Picker.Item key={month} label={month} value={month} />
))} ))}
</Picker> </Picker>
</View> </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"
@ -92,8 +123,7 @@ export const CalendarHeader = memo(() => {
</View> </View>
</View> </View>
</View> </View>
) );
;
}); });
const styles = StyleSheet.create({ const styles = StyleSheet.create({

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

@ -1,17 +1,17 @@
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;
@ -22,11 +22,12 @@ interface EventCalendarProps {
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,7 +36,7 @@ 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) {
@ -47,35 +48,41 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
} }
}, [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( const handlePressCell = useCallback(
(date: Date) => { (date: Date) => {
if (mode === "day" || mode === "week") { if (mode === "day" || mode === "week") {
setSelectedNewEndDate(date); setSelectedNewEndDate(date);
} else { } else {
setMode("day") setMode("day");
setSelectedDate(date); setSelectedDate(date);
} }
}, },
[mode, setSelectedNewEndDate, setSelectedDate] [mode, setSelectedNewEndDate, setSelectedDate]
); );
const handleSwipeEnd = useCallback((date: Date) => { 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 }),
[] []
); );
@ -92,13 +99,13 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
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>
); );
} }
@ -122,7 +129,8 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
scrollOffsetMinutes={offsetMinutes} scrollOffsetMinutes={offsetMinutes}
/> />
); );
}); }
);
const styles = StyleSheet.create({ const styles = StyleSheet.create({
segmentslblStyle: { segmentslblStyle: {
@ -138,10 +146,18 @@ const styles = StyleSheet.create({
alignContent: "center", alignContent: "center",
width: 38, width: 38,
right: 42, right: 42,
height: 13,
}, },
loadingContainer: { loadingContainer: {
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
},
dayHeader: {
backgroundColor: "#4184f2",
aspectRatio: 1,
borderRadius: 100,
alignItems: "center",
justifyContent: "center",
}, },
}); });