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,
} from "@react-navigation/drawer";
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 DrawerButton from "@/components/shared/DrawerButton";
import {
@ -43,7 +43,16 @@ export default function TabLayout() {
drawerContent={(props) => {
return (
<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>
</View>
<View
@ -203,7 +212,7 @@ const styles = StyleSheet.create({
label: { fontFamily: "Poppins_400Medium", fontSize: 15 },
title: {
fontSize: 26.13,
fontFamily: 'Manrope_600SemiBold',
color: "#262627"
}
fontFamily: "Manrope_600SemiBold",
color: "#262627",
},
});

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

@ -1,15 +1,24 @@
import React, {memo} from 'react';
import {Button, Picker, PickerModes, SegmentedControl, Text, 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 React, { memo } from "react";
import {
Button,
Picker,
PickerModes,
SegmentedControl,
Text,
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(() => {
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
const { profileData } = useAuthContext();
const handleSegmentChange = (index: number) => {
const selectedMode = modeMap.get(index);
@ -29,7 +38,7 @@ export const CalendarHeader = memo(() => {
setSelectedDate(updatedDate);
};
const isSelectedDateToday = isSameDay(selectedDate, new Date())
const isSelectedDateToday = isSameDay(selectedDate, new Date());
return (
<View
@ -47,38 +56,60 @@ export const CalendarHeader = memo(() => {
}}
>
<View row centerV gap-3>
<Text style={{fontFamily: "Manrope_500Medium", fontSize: 17}}>
<Text style={{ fontFamily: "Manrope_500Medium", fontSize: 17 }}>
{selectedDate.getFullYear()}
</Text>
<Picker
value={months[selectedDate.getMonth()]}
placeholder={"Select Month"}
style={{fontFamily: "Manrope_500Medium", fontSize: 17}}
style={{ fontFamily: "Manrope_500Medium", fontSize: 17, width: 85 }}
mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
topBarProps={{
title: selectedDate.getFullYear().toString(),
titleStyle: {fontFamily: "Manrope_500Medium", fontSize: 17},
titleStyle: { fontFamily: "Manrope_500Medium", fontSize: 17 },
}}
>
{months.map((month) => (
<Picker.Item key={month} label={month} value={month}/>
<Picker.Item key={month} label={month} value={month} />
))}
</Picker>
</View>
<View row>
<View row centerV>
{!isSelectedDateToday && (
<Button size={"small"} marginR-5 label={"Today"} onPress={() => {
setSelectedDate(new Date())
setMode("day")
}}/>
<Button
size={"xSmall"}
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>
<SegmentedControl
segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
backgroundColor="#ececec"
inactiveColor="#919191"
activeBackgroundColor="#ea156c"
@ -92,8 +123,7 @@ export const CalendarHeader = memo(() => {
</View>
</View>
</View>
)
;
);
});
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 {Calendar} from "react-native-big-calendar";
import {ActivityIndicator, StyleSheet, View} from "react-native";
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
import {useAtom, useSetAtom} from "jotai";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Calendar } from "react-native-big-calendar";
import { ActivityIndicator, StyleSheet, View } from "react-native";
import { useGetEvents } from "@/hooks/firebase/useGetEvents";
import { useAtom, useSetAtom } from "jotai";
import {
editVisibleAtom,
eventForEditAtom,
modeAtom,
selectedDateAtom,
selectedNewEventDateAtom
selectedNewEventDateAtom,
} from "@/components/pages/calendar/atoms";
import {useAuthContext} from "@/contexts/AuthContext";
import {CalendarEvent} from "@/components/pages/calendar/interfaces";
import { useAuthContext } from "@/contexts/AuthContext";
import { CalendarEvent } from "@/components/pages/calendar/interfaces";
interface EventCalendarProps {
calendarHeight: number;
@ -22,11 +22,12 @@ interface EventCalendarProps {
const getTotalMinutes = () => {
const date = new Date();
return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
}
};
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendarHeight}) => {
const {data: events, isLoading} = useGetEvents();
const {profileData} = useAuthContext();
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
({ calendarHeight }) => {
const { data: events, isLoading } = useGetEvents();
const { profileData } = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
@ -35,7 +36,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
const [isRendering, setIsRendering] = useState(true);
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes())
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
useEffect(() => {
if (events && mode) {
@ -47,35 +48,41 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
}
}, [events, mode]);
const handlePressEvent = useCallback((event: CalendarEvent) => {
const handlePressEvent = useCallback(
(event: CalendarEvent) => {
if (mode === "day" || mode === "week") {
setEditVisible(true);
console.log({event})
console.log({ event });
setEventForEdit(event);
} else {
setMode("day")
setMode("day");
setSelectedDate(event.start);
}
}, [setEditVisible, setEventForEdit, mode]);
},
[setEditVisible, setEventForEdit, mode]
);
const handlePressCell = useCallback(
(date: Date) => {
if (mode === "day" || mode === "week") {
setSelectedNewEndDate(date);
} else {
setMode("day")
setMode("day");
setSelectedDate(date);
}
},
[mode, setSelectedNewEndDate, setSelectedDate]
);
const handleSwipeEnd = useCallback((date: Date) => {
const handleSwipeEnd = useCallback(
(date: Date) => {
setSelectedDate(date);
}, [setSelectedDate]);
},
[setSelectedDate]
);
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]);
useEffect(() => {
setOffsetMinutes(getTotalMinutes())
setOffsetMinutes(getTotalMinutes());
}, [events, mode]);
if (isLoading || isRendering) {
return (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#0000ff"/>
<ActivityIndicator size="large" color="#0000ff" />
</View>
);
}
@ -122,7 +129,8 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
scrollOffsetMinutes={offsetMinutes}
/>
);
});
}
);
const styles = StyleSheet.create({
segmentslblStyle: {
@ -138,10 +146,18 @@ const styles = StyleSheet.create({
alignContent: "center",
width: 38,
right: 42,
height: 13,
},
loadingContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
justifyContent: "center",
alignItems: "center",
},
dayHeader: {
backgroundColor: "#4184f2",
aspectRatio: 1,
borderRadius: 100,
alignItems: "center",
justifyContent: "center",
},
});