mirror of
https://github.com/urosran/cally.git
synced 2026-10-23 08:37:55 +00:00
Event creation
This commit is contained in:
Milan Paunovic
+64
-7
@@ -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 (
|
||||
<Drawer
|
||||
screenOptions={{
|
||||
headerShown: true,
|
||||
}}/>
|
||||
);
|
||||
const {mutateAsync: signOut} = useSignOut()
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
initialRouteName={"index"}
|
||||
screenOptions={{
|
||||
headerShown: true,
|
||||
}}
|
||||
drawerContent={props => {
|
||||
return (
|
||||
<DrawerContentScrollView {...props}>
|
||||
<DrawerItemList {...props} />
|
||||
<DrawerItem label="Logout" onPress={() => signOut()}/>
|
||||
</DrawerContentScrollView>
|
||||
)
|
||||
}}
|
||||
>
|
||||
<Drawer.Screen
|
||||
name="index"
|
||||
options={{
|
||||
drawerLabel: "Calendar",
|
||||
title: "Calendar",
|
||||
}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="calendar"
|
||||
options={{
|
||||
drawerLabel: "Calendar",
|
||||
title: "Calendar",
|
||||
drawerItemStyle: {display: "none"}
|
||||
}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="brain_dump"
|
||||
options={{
|
||||
drawerLabel: "Brain Dump",
|
||||
title: "Brain Dump",
|
||||
}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="grocery"
|
||||
options={{
|
||||
drawerLabel: "Grocery",
|
||||
title: "Grocery",
|
||||
}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="reminders"
|
||||
options={{
|
||||
drawerLabel: "Reminders",
|
||||
title: "Reminders",
|
||||
}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="todos"
|
||||
options={{
|
||||
drawerLabel: "To-Do",
|
||||
title: "To-Do",
|
||||
}}
|
||||
/>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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<Date>(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 (
|
||||
<View/>
|
||||
)
|
||||
}
|
||||
<View style={{flex: 1, height: "100%", padding: 10}}>
|
||||
<View style={{height: 60, justifyContent: "space-evenly", alignItems: "flex-start"}}>
|
||||
<Text>Welcome Dalia</Text>
|
||||
<Text>Let's get your week started!</Text>
|
||||
</View>
|
||||
|
||||
<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: "#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>
|
||||
|
||||
<View>
|
||||
<SegmentedControl
|
||||
segments={[
|
||||
{label: "D"},
|
||||
{label: "W"},
|
||||
{label: "M"}
|
||||
]}
|
||||
onChangeIndex={handleSegmentChange}
|
||||
initialIndex={[...modeMap.entries()].find(([_, value]) => value === mode)?.[0] || 1}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{calendarHeight > 0 && (
|
||||
<Calendar
|
||||
mode={mode}
|
||||
events={events ?? []}
|
||||
height={calendarHeight}
|
||||
activeDate={selectedDate}
|
||||
onSwipeEnd={(newDate) => {
|
||||
console.log(newDate)
|
||||
setSelectedDate(newDate);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<AddEventDialog/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
+2
-69
@@ -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 (
|
||||
<ParallaxScrollView
|
||||
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
|
||||
headerImage={
|
||||
<Image
|
||||
source={require('@/assets/images/partial-react-logo.png')}
|
||||
style={styles.reactLogo}
|
||||
/>
|
||||
}>
|
||||
<ThemedView style={styles.titleContainer}>
|
||||
<ThemedText type="title">Welcome!</ThemedText>
|
||||
<HelloWave />
|
||||
</ThemedView>
|
||||
<ThemedView style={styles.stepContainer}>
|
||||
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
|
||||
<ThemedText>
|
||||
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
|
||||
Press{' '}
|
||||
<ThemedText type="defaultSemiBold">
|
||||
{Platform.select({ ios: 'cmd + d', android: 'cmd + m' })}
|
||||
</ThemedText>{' '}
|
||||
to open developer tools.
|
||||
</ThemedText>
|
||||
</ThemedView>
|
||||
<ThemedView style={styles.stepContainer}>
|
||||
<ThemedText type="subtitle">Step 2: Explore</ThemedText>
|
||||
<ThemedText>
|
||||
Tap the Explore tab to learn more about what's included in this starter app.
|
||||
</ThemedText>
|
||||
</ThemedView>
|
||||
<ThemedView style={styles.stepContainer}>
|
||||
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
|
||||
<ThemedText>
|
||||
When you're ready, run{' '}
|
||||
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
|
||||
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
|
||||
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
|
||||
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
|
||||
</ThemedText>
|
||||
</ThemedView>
|
||||
</ParallaxScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
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
|
||||
@@ -1,5 +0,0 @@
|
||||
import {Stack} from "expo-router";
|
||||
|
||||
export default function StackLayout () {
|
||||
return <Stack screenOptions={{headerShown: false}}/>
|
||||
}
|
||||
@@ -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 (
|
||||
<View>
|
||||
{user ? (
|
||||
<View paddingH-20 marginT-20>
|
||||
{profileType === ProfileType.PARENT && <Text>Parent</Text>}
|
||||
{profileType === ProfileType.CHILD && <Text>Child</Text>}
|
||||
{profileType === ProfileType.CAREGIVER && <Text>Caregiver</Text>}
|
||||
<Button title="Sign Out" onPress={async() => {await signOut()}} />
|
||||
</View>
|
||||
) : (
|
||||
<Entry />
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default Screen;
|
||||
@@ -0,0 +1,5 @@
|
||||
import {Stack} from "expo-router";
|
||||
|
||||
export default function Layout() {
|
||||
return <Stack screenOptions={{title: "Login"}}/>
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import Entry from "@/components/pages/main/Entry";
|
||||
|
||||
export default function Screen() {
|
||||
return (
|
||||
<Entry/>
|
||||
)
|
||||
}
|
||||
+3
-2
@@ -1,15 +1,16 @@
|
||||
import { Link, Stack } from 'expo-router';
|
||||
import {Link, Stack, usePathname} from 'expo-router';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ThemedText } from '@/components/ThemedText';
|
||||
import { ThemedView } from '@/components/ThemedView';
|
||||
|
||||
export default function NotFoundScreen() {
|
||||
const route = usePathname()
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen options={{ title: 'Oops!' }} />
|
||||
<ThemedView style={styles.container}>
|
||||
<ThemedText type="title">This screen doesn't exist.</ThemedText>
|
||||
<ThemedText type="title">This screen doesn't exist. ({route})</ThemedText>
|
||||
<Link href="/" style={styles.link}>
|
||||
<ThemedText type="link">Go to home screen!</ThemedText>
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user