diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx index 5cc7782..17ef772 100644 --- a/app/(auth)/_layout.tsx +++ b/app/(auth)/_layout.tsx @@ -1,12 +1,69 @@ import React from 'react'; - import {Drawer} from "expo-router/drawer"; +import {useSignOut} from "@/hooks/firebase/useSignOut"; +import {DrawerContentScrollView, DrawerItem, DrawerItemList} from "@react-navigation/drawer"; export default function TabLayout() { - return ( - - ); + const {mutateAsync: signOut} = useSignOut() + + return ( + { + return ( + + + signOut()}/> + + ) + }} + > + + + + + + + + ); } diff --git a/app/(auth)/calendar/index.tsx b/app/(auth)/calendar/index.tsx index 7d92969..c13e298 100644 --- a/app/(auth)/calendar/index.tsx +++ b/app/(auth)/calendar/index.tsx @@ -1,7 +1,123 @@ -import {View} from "react-native-ui-lib"; +import React, {useRef, useState} from "react"; +import {LayoutChangeEvent} from "react-native"; +import {Calendar} from "react-native-big-calendar"; +import {Button, 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"; + +const modeMap = new Map([ + [0, "day"], + [1, "week"], + [2, "month"] +]); + +const months = [ + "January", "February", "March", "April", "May", "June", + "July", "August", "September", "October", "November", "December" +]; export default function Screen() { + const [calendarHeight, setCalendarHeight] = useState(0); + const [mode, setMode] = useState<"week" | "month" | "day">("week"); + const [selectedDate, setSelectedDate] = useState(new Date()); + + const calendarContainerRef = useRef(null); + const { data: events} = useGetEvents() + + 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 "week" | "month" | "day"); + } + }; + + 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); + }; + + console.log(events) + return ( - - ) -} \ No newline at end of file + + + Welcome Dalia + Let's get your week started! + + + + + handleMonthChange(itemValue as string)} + trailingAccessory={} + > + {months.map((month) => ( + + ))} + + + + value === mode)?.[0] || 1} + /> + + + + {calendarHeight > 0 && ( + { + console.log(newDate) + setSelectedDate(newDate); + }} + /> + )} + + + + + ); +} diff --git a/app/(auth)/index.tsx b/app/(auth)/index.tsx index 324aeb7..ac3735e 100644 --- a/app/(auth)/index.tsx +++ b/app/(auth)/index.tsx @@ -1,70 +1,3 @@ -import { Image, StyleSheet, Platform } from 'react-native'; +import Screen from "@/app/(auth)/calendar"; -import { HelloWave } from '@/components/HelloWave'; -import ParallaxScrollView from '@/components/ParallaxScrollView'; -import { ThemedText } from '@/components/ThemedText'; -import { ThemedView } from '@/components/ThemedView'; - -export default function HomeScreen() { - return ( - - }> - - Welcome! - - - - Step 1: Try it - - Edit app/(tabs)/index.tsx to see changes. - Press{' '} - - {Platform.select({ ios: 'cmd + d', android: 'cmd + m' })} - {' '} - to open developer tools. - - - - Step 2: Explore - - Tap the Explore tab to learn more about what's included in this starter app. - - - - Step 3: Get a fresh start - - When you're ready, run{' '} - npm run reset-project to get a fresh{' '} - app directory. This will move the current{' '} - app to{' '} - app-example. - - - - ); -} - -const styles = StyleSheet.create({ - titleContainer: { - flexDirection: 'row', - alignItems: 'center', - gap: 8, - }, - stepContainer: { - gap: 8, - marginBottom: 8, - }, - reactLogo: { - height: 178, - width: 290, - bottom: 0, - left: 0, - position: 'absolute', - }, -}); +export default Screen \ No newline at end of file diff --git a/app/(auth)/main/_layout.tsx b/app/(auth)/main/_layout.tsx deleted file mode 100644 index 0990eb8..0000000 --- a/app/(auth)/main/_layout.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import {Stack} from "expo-router"; - -export default function StackLayout () { - return -} \ No newline at end of file diff --git a/app/(auth)/main/index.tsx b/app/(auth)/main/index.tsx deleted file mode 100644 index 81f662a..0000000 --- a/app/(auth)/main/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { Button, TextInput } from "react-native"; -import { Checkbox, Picker, TextField, View, Text } from "react-native-ui-lib"; -import { useCreateSubUser } from "@/hooks/firebase/useCreateSubUser"; -import { UserProfile } from "@/hooks/firebase/types/profileTypes"; -import { uuidv4 } from "@firebase/util"; -import { useGetChildrenByParentId } from "@/hooks/firebase/useGetChildrenByParentId"; -import { ProfileType, useAuthContext } from "@/contexts/AuthContext"; -import SignInPage from "../../../components/pages/main/SignInPage"; -import Entry from "@/components/pages/main/Entry"; -import { useSignUp } from "@/hooks/firebase/useSignUp"; -import { useSignOut } from "@/hooks/firebase/useSignOut"; - -const Screen: React.FC = () => { - const { user, profileType, profileData } = useAuthContext(); - - const { data: children } = useGetChildrenByParentId(); - - const { mutateAsync: createSubUser } = useCreateSubUser(); - const { mutateAsync: signOut } = useSignOut(); - - const createNewSubUser = async (userProfile: UserProfile) => { - await createSubUser({ ...userProfile, email: `${uuidv4()}@test.com` }); - // createSubUser({ - // email, - // password, - // userType: profileType!, - // name: "", - // contact: "+381628334", - // ...child - // }) - }; - - return ( - - {user ? ( - - {profileType === ProfileType.PARENT && Parent} - {profileType === ProfileType.CHILD && Child} - {profileType === ProfileType.CAREGIVER && Caregiver} - + + + + + + + setShow(false)}> + Go back + + + + + setShowManualInputModal(false)}/> + + ) +} \ No newline at end of file diff --git a/components/pages/calendar/ManuallyAddEventModal.tsx b/components/pages/calendar/ManuallyAddEventModal.tsx new file mode 100644 index 0000000..23970ed --- /dev/null +++ b/components/pages/calendar/ManuallyAddEventModal.tsx @@ -0,0 +1,260 @@ +import { + Avatar, + Colors, + DateTimePicker, + LoaderScreen, + Modal, + Picker, + Switch, + Text, + TextField, + View +} from "react-native-ui-lib"; +import {ScrollView, TouchableOpacity} from "react-native-gesture-handler"; +import {useSafeAreaInsets} from "react-native-safe-area-context"; +import {useState} from "react"; +import {MaterialIcons} from "@expo/vector-icons"; +import {PickerMultiValue} from "react-native-ui-lib/src/components/picker/types"; +import {useAuthContext} from "@/contexts/AuthContext"; +import {useCreateEvent} from "@/hooks/firebase/useCreateEvent"; +import {EventData} from "@/hooks/firebase/types/eventData"; + +const daysOfWeek = [ + {label: "Monday", value: "monday"}, + {label: "Tuesday", value: "tuesday"}, + {label: "Wednesday", value: "wednesday"}, + {label: "Thursday", value: "thursday"}, + {label: "Friday", value: "friday"}, + {label: "Saturday", value: "saturday"}, + {label: "Sunday", value: "sunday"}, +]; + +export const ManuallyAddEventModal = ({show, close}: { show: boolean, close: () => void }) => { + const {user} = useAuthContext() + const insets = useSafeAreaInsets(); + + const [title, setTitle] = useState(""); + + const [isAllDay, setIsAllDay] = useState(false); + const [startTime, setStartTime] = useState(new Date()); + const [endTime, setEndTime] = useState(new Date()) + + const [startDate, setStartDate] = useState(new Date()); + const [endDate, setEndDate] = useState(new Date()) + + const [repeatInterval, setRepeatInterval] = useState([]); + + const {mutateAsync: createEvent, isLoading, isError} = useCreateEvent() + + const formatDateTime = (date: Date) => { + return date.toLocaleDateString('en-US', { + weekday: 'long', + month: 'short', + day: 'numeric' + }); + }; + + const combineDateAndTime = (date: Date, time: Date): Date => { + const combined = new Date(date); + combined.setHours(time.getHours()); + combined.setMinutes(time.getMinutes()); + combined.setSeconds(0); + combined.setMilliseconds(0); + return combined; + }; + + const handleSave = async () => { + let finalStartDate: Date; + let finalEndDate: Date; + + if (isAllDay) { + finalStartDate = new Date(startDate); + finalStartDate.setHours(0, 0, 0, 0); + + finalEndDate = new Date(startDate); + finalEndDate.setHours(23, 59, 59, 999); + } else { + finalStartDate = combineDateAndTime(startDate, startTime); + finalEndDate = combineDateAndTime(endDate, endTime); + } + + const eventData: Partial = { + title, + startDate: finalStartDate, + endDate: finalEndDate, + repeatDays: repeatInterval.map(x => x.toString()), + allDay: isAllDay + }; + + await createEvent(eventData) + + close(); + }; + + const getRepeatLabel = () => { + const selectedDays = repeatInterval + const allDays = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"]; + const workDays = ["monday", "tuesday", "wednesday", "thursday", "friday"]; + + const isEveryWorkDay = workDays.every(day => selectedDays.includes(day)); + + const isEveryDay = allDays.every(day => selectedDays.includes(day)); + + if (isEveryDay) { + return "Every day"; + } else if (isEveryWorkDay && !selectedDays.includes("saturday") && !selectedDays.includes("sunday")) { + return "Every work day"; + } else { + return selectedDays + .map(item => daysOfWeek.find(day => day.value === item)?.label) + .join(", "); + } + }; + + if (isLoading && !isError) { + return ( + + + + ) + } + + return ( + + + + + Cancel + + Add event + + Save + + + + + + + + + + + + + All-day + + setIsAllDay(value)} + /> + + + + + {!isAllDay && ( + + )} + + + {!isAllDay && ( + + + + + )} + + + + setRepeatInterval(items)} + placeholder="Doest not repeat" + style={{marginLeft: 10, flex: 1}} + mode={Picker.modes.MULTI} + getLabel={getRepeatLabel} + + > + {daysOfWeek.map((option) => ( + + ))} + + + + + + + + + Other + {user?.email} + + + + + + + ); +}; diff --git a/components/pages/main/SignInPage.tsx b/components/pages/main/SignInPage.tsx index 186f89c..4842ee4 100644 --- a/components/pages/main/SignInPage.tsx +++ b/components/pages/main/SignInPage.tsx @@ -1,41 +1,49 @@ -import { View, Text, Button } from "react-native-ui-lib"; -import { TextInput } from "react-native"; +import { View, Text, Button, TextField } from "react-native-ui-lib"; import React, { useState } from "react"; import { useSignIn } from "@/hooks/firebase/useSignIn"; -const SignInPage = (props: { - setRegister: () => any; -}) => { - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); +const SignInPage = (props: { setRegister: () => any }) => { + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); - const { mutateAsync: signIn } = useSignIn(); + const { mutateAsync: signIn, error, isError } = useSignIn(); - const handleSignIn = async () => { - await signIn({email, password}); - } + const handleSignIn = async () => { + await signIn({ email, password }); + }; - return ( - - - -