mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 08:24:55 +00:00
Merge branch 'refs/heads/dev'
This commit is contained in:
Milan Paunovic
@ -1,9 +1,19 @@
|
||||
import React from "react";
|
||||
import {Drawer} from "expo-router/drawer";
|
||||
import {useSignOut} from "@/hooks/firebase/useSignOut";
|
||||
import {DrawerContentScrollView, DrawerNavigationOptions, DrawerNavigationProp} from "@react-navigation/drawer";
|
||||
import {Button, ButtonSize, Text, TouchableOpacity, View,} from "react-native-ui-lib";
|
||||
import {ImageBackground, StyleSheet} from "react-native";
|
||||
import { Drawer } from "expo-router/drawer";
|
||||
import { useSignOut } from "@/hooks/firebase/useSignOut";
|
||||
import {
|
||||
DrawerContentScrollView,
|
||||
DrawerNavigationOptions,
|
||||
DrawerNavigationProp,
|
||||
} from "@react-navigation/drawer";
|
||||
import {
|
||||
Button,
|
||||
ButtonSize,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native-ui-lib";
|
||||
import { ImageBackground, StyleSheet } from "react-native";
|
||||
import DrawerButton from "@/components/shared/DrawerButton";
|
||||
import NavGroceryIcon from "@/assets/svgs/NavGroceryIcon";
|
||||
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
|
||||
@ -11,165 +21,191 @@ import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
|
||||
import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
|
||||
import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
|
||||
import ViewSwitch from "@/components/pages/(tablet_pages)/ViewSwitch";
|
||||
import {useSetAtom} from "jotai";
|
||||
import { useSetAtom } from "jotai";
|
||||
import {
|
||||
isFamilyViewAtom,
|
||||
settingsPageIndex,
|
||||
toDosPageIndex,
|
||||
userSettingsView,
|
||||
isFamilyViewAtom,
|
||||
settingsPageIndex,
|
||||
toDosPageIndex,
|
||||
userSettingsView,
|
||||
} from "@/components/pages/calendar/atoms";
|
||||
import Ionicons from "@expo/vector-icons/Ionicons";
|
||||
import * as Device from "expo-device";
|
||||
import {DeviceType} from "expo-device";
|
||||
import { DeviceType } from "expo-device";
|
||||
import FeedbackNavIcon from "@/assets/svgs/FeedbackNavIcon";
|
||||
import DrawerIcon from "@/assets/svgs/DrawerIcon";
|
||||
import {RouteProp} from "@react-navigation/core";
|
||||
import { RouteProp } from "@react-navigation/core";
|
||||
import RefreshButton from "@/components/shared/RefreshButton";
|
||||
import { useCalSync } from "@/hooks/useCalSync";
|
||||
|
||||
type DrawerParamList = {
|
||||
index: undefined;
|
||||
calendar: undefined;
|
||||
todos: undefined;
|
||||
index: undefined;
|
||||
calendar: undefined;
|
||||
todos: undefined;
|
||||
};
|
||||
|
||||
type NavigationProp = DrawerNavigationProp<DrawerParamList>;
|
||||
|
||||
interface ViewSwitchProps {
|
||||
navigation: NavigationProp;
|
||||
navigation: NavigationProp;
|
||||
}
|
||||
|
||||
interface HeaderRightProps {
|
||||
routeName: keyof DrawerParamList;
|
||||
navigation: NavigationProp;
|
||||
routeName: keyof DrawerParamList;
|
||||
navigation: NavigationProp;
|
||||
}
|
||||
|
||||
const MemoizedViewSwitch = React.memo<ViewSwitchProps>(({navigation}) => (
|
||||
<View marginR-16>
|
||||
<ViewSwitch navigation={navigation}/>
|
||||
</View>
|
||||
const MemoizedViewSwitch = React.memo<ViewSwitchProps>(({ navigation }) => (
|
||||
<ViewSwitch navigation={navigation} />
|
||||
));
|
||||
|
||||
const HeaderRight = React.memo<HeaderRightProps>(({routeName, navigation}) => {
|
||||
const HeaderRight = React.memo<HeaderRightProps>(
|
||||
({ routeName, navigation }) => {
|
||||
const showViewSwitch = ["calendar", "todos", "index"].includes(routeName);
|
||||
|
||||
if (Device.deviceType !== DeviceType.TABLET || !showViewSwitch) {
|
||||
return null;
|
||||
return null;
|
||||
}
|
||||
|
||||
return <MemoizedViewSwitch navigation={navigation}/>;
|
||||
});
|
||||
return <MemoizedViewSwitch navigation={navigation} />;
|
||||
}
|
||||
);
|
||||
export default function TabLayout() {
|
||||
const {mutateAsync: signOut} = useSignOut();
|
||||
const setIsFamilyView = useSetAtom(isFamilyViewAtom);
|
||||
const setPageIndex = useSetAtom(settingsPageIndex);
|
||||
const setUserView = useSetAtom(userSettingsView);
|
||||
const setToDosIndex = useSetAtom(toDosPageIndex);
|
||||
const { mutateAsync: signOut } = useSignOut();
|
||||
const setIsFamilyView = useSetAtom(isFamilyViewAtom);
|
||||
const setPageIndex = useSetAtom(settingsPageIndex);
|
||||
const setUserView = useSetAtom(userSettingsView);
|
||||
const setToDosIndex = useSetAtom(toDosPageIndex);
|
||||
const { resyncAllCalendars, isSyncing } = useCalSync();
|
||||
|
||||
const screenOptions = ({
|
||||
navigation,
|
||||
route,
|
||||
}: {
|
||||
navigation: DrawerNavigationProp<DrawerParamList>;
|
||||
route: RouteProp<DrawerParamList>;
|
||||
}): DrawerNavigationOptions => ({
|
||||
headerShown: true,
|
||||
headerTitleAlign: Device.deviceType === DeviceType.TABLET ? "left" : "center",
|
||||
headerTitleStyle: {
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
fontSize: Device.deviceType === DeviceType.TABLET ? 22 : 17,
|
||||
},
|
||||
headerLeft: () => (
|
||||
<TouchableOpacity
|
||||
onPress={navigation.toggleDrawer}
|
||||
style={{marginLeft: 16}}
|
||||
const onRefresh = React.useCallback(async () => {
|
||||
try {
|
||||
await resyncAllCalendars();
|
||||
} catch (error) {
|
||||
console.error("Refresh failed:", error);
|
||||
}
|
||||
}, [resyncAllCalendars]);
|
||||
|
||||
const screenOptions = ({
|
||||
navigation,
|
||||
route,
|
||||
}: {
|
||||
navigation: DrawerNavigationProp<DrawerParamList>;
|
||||
route: RouteProp<DrawerParamList>;
|
||||
}): DrawerNavigationOptions => ({
|
||||
headerShown: true,
|
||||
headerTitleAlign:
|
||||
Device.deviceType === DeviceType.TABLET ? "left" : "center",
|
||||
headerTitleStyle: {
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
fontSize: Device.deviceType === DeviceType.TABLET ? 22 : 17,
|
||||
},
|
||||
headerLeft: () => (
|
||||
<TouchableOpacity
|
||||
onPress={navigation.toggleDrawer}
|
||||
style={{ marginLeft: 16 }}
|
||||
>
|
||||
<DrawerIcon />
|
||||
</TouchableOpacity>
|
||||
),
|
||||
headerRight: () => {
|
||||
const showViewSwitch = ["calendar", "todos", "index"].includes(
|
||||
route.name
|
||||
);
|
||||
const isCalendarPage = ["calendar", "index"].includes(route.name);
|
||||
|
||||
if (Device.deviceType !== DeviceType.TABLET || !showViewSwitch) {
|
||||
return isCalendarPage ? (
|
||||
<View marginR-16>
|
||||
<RefreshButton onRefresh={onRefresh} isSyncing={isSyncing} />
|
||||
</View>
|
||||
) : null;
|
||||
}
|
||||
|
||||
return (
|
||||
<View marginR-16 row centerV>
|
||||
{isCalendarPage && (
|
||||
<View marginR-16><RefreshButton onRefresh={onRefresh} isSyncing={isSyncing} /></View>
|
||||
)}
|
||||
<MemoizedViewSwitch navigation={navigation} />
|
||||
</View>
|
||||
);
|
||||
},
|
||||
drawerStyle: {
|
||||
width: Device.deviceType === DeviceType.TABLET ? "30%" : "90%",
|
||||
backgroundColor: "#f9f8f7",
|
||||
height: "100%",
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
initialRouteName={"index"}
|
||||
detachInactiveScreens
|
||||
screenOptions={screenOptions}
|
||||
drawerContent={(props) => {
|
||||
return (
|
||||
<DrawerContentScrollView {...props} style={{}}>
|
||||
<View centerV marginH-30 marginT-20 marginB-20 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
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
paddingHorizontal: 30,
|
||||
}}
|
||||
>
|
||||
<DrawerIcon/>
|
||||
</TouchableOpacity>
|
||||
),
|
||||
headerRight: () => {
|
||||
const showViewSwitch = ["calendar", "todos", "index"].includes(route.name);
|
||||
|
||||
if (Device.deviceType !== DeviceType.TABLET || !showViewSwitch) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <MemoizedViewSwitch navigation={navigation}/>;
|
||||
},
|
||||
drawerStyle: {
|
||||
width: Device.deviceType === DeviceType.TABLET ? "30%" : "90%",
|
||||
backgroundColor: "#f9f8f7",
|
||||
height: "100%",
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
initialRouteName={"index"}
|
||||
detachInactiveScreens
|
||||
screenOptions={screenOptions}
|
||||
drawerContent={(props) => {
|
||||
return (
|
||||
<DrawerContentScrollView {...props} style={{}}>
|
||||
<View centerV marginH-30 marginT-20 marginB-20 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
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
paddingHorizontal: 30,
|
||||
}}
|
||||
>
|
||||
<View style={{flex: 1, paddingRight: 5}}>
|
||||
<DrawerButton
|
||||
title={"Calendar"}
|
||||
color="rgb(7, 184, 199)"
|
||||
bgColor={"rgb(231, 248, 250)"}
|
||||
pressFunc={() => {
|
||||
props.navigation.navigate("calendar");
|
||||
setPageIndex(0);
|
||||
setToDosIndex(0);
|
||||
setUserView(true);
|
||||
setIsFamilyView(false);
|
||||
}}
|
||||
icon={<NavCalendarIcon/>}
|
||||
/>
|
||||
<DrawerButton
|
||||
color="#50be0c"
|
||||
title={"Groceries"}
|
||||
bgColor={"#eef9e7"}
|
||||
pressFunc={() => {
|
||||
props.navigation.navigate("grocery");
|
||||
setPageIndex(0);
|
||||
setToDosIndex(0);
|
||||
setUserView(true);
|
||||
setIsFamilyView(false);
|
||||
}}
|
||||
icon={<NavGroceryIcon/>}
|
||||
/>
|
||||
<DrawerButton
|
||||
color="#ea156d"
|
||||
title={"Feedback"}
|
||||
bgColor={"#fdedf4"}
|
||||
pressFunc={() => {
|
||||
props.navigation.navigate("feedback");
|
||||
setPageIndex(0);
|
||||
setToDosIndex(0);
|
||||
setUserView(true);
|
||||
setIsFamilyView(false);
|
||||
}}
|
||||
icon={<FeedbackNavIcon/>}
|
||||
/>
|
||||
</View>
|
||||
<View style={{flex: 1, paddingRight: 0}}>
|
||||
{/*<DrawerButton
|
||||
<View style={{ flex: 1, paddingRight: 5 }}>
|
||||
<DrawerButton
|
||||
title={"Calendar"}
|
||||
color="rgb(7, 184, 199)"
|
||||
bgColor={"rgb(231, 248, 250)"}
|
||||
pressFunc={() => {
|
||||
props.navigation.navigate("calendar");
|
||||
setPageIndex(0);
|
||||
setToDosIndex(0);
|
||||
setUserView(true);
|
||||
setIsFamilyView(false);
|
||||
}}
|
||||
icon={<NavCalendarIcon />}
|
||||
/>
|
||||
<DrawerButton
|
||||
color="#50be0c"
|
||||
title={"Groceries"}
|
||||
bgColor={"#eef9e7"}
|
||||
pressFunc={() => {
|
||||
props.navigation.navigate("grocery");
|
||||
setPageIndex(0);
|
||||
setToDosIndex(0);
|
||||
setUserView(true);
|
||||
setIsFamilyView(false);
|
||||
}}
|
||||
icon={<NavGroceryIcon />}
|
||||
/>
|
||||
<DrawerButton
|
||||
color="#ea156d"
|
||||
title={"Feedback"}
|
||||
bgColor={"#fdedf4"}
|
||||
pressFunc={() => {
|
||||
props.navigation.navigate("feedback");
|
||||
setPageIndex(0);
|
||||
setToDosIndex(0);
|
||||
setUserView(true);
|
||||
setIsFamilyView(false);
|
||||
}}
|
||||
icon={<FeedbackNavIcon />}
|
||||
/>
|
||||
</View>
|
||||
<View style={{ flex: 1, paddingRight: 0 }}>
|
||||
{/*<DrawerButton
|
||||
color="#fd1775"
|
||||
title={"My Reminders"}
|
||||
bgColor={"#ffe8f2"}
|
||||
@ -182,184 +218,184 @@ export default function TabLayout() {
|
||||
/>
|
||||
}
|
||||
/>*/}
|
||||
<DrawerButton
|
||||
color="#8005eb"
|
||||
title={"To Do's"}
|
||||
bgColor={"#f3e6fd"}
|
||||
pressFunc={() => {
|
||||
props.navigation.navigate("todos");
|
||||
setPageIndex(0);
|
||||
setToDosIndex(0);
|
||||
setUserView(true);
|
||||
setIsFamilyView(false);
|
||||
}}
|
||||
icon={<NavToDosIcon/>}
|
||||
/>
|
||||
<DrawerButton
|
||||
color="#e0ca03"
|
||||
title={"Brain Dump"}
|
||||
bgColor={"#fffacb"}
|
||||
pressFunc={() => {
|
||||
props.navigation.navigate("brain_dump");
|
||||
setPageIndex(0);
|
||||
setToDosIndex(0);
|
||||
setUserView(true);
|
||||
setIsFamilyView(false);
|
||||
}}
|
||||
icon={<NavBrainDumpIcon/>}
|
||||
/>
|
||||
<DrawerButton
|
||||
color="#e0ca03"
|
||||
title={"Notifications"}
|
||||
bgColor={"#ffdda1"}
|
||||
pressFunc={() => {
|
||||
props.navigation.navigate("notifications");
|
||||
setPageIndex(0);
|
||||
setToDosIndex(0);
|
||||
setUserView(true);
|
||||
setIsFamilyView(false);
|
||||
}}
|
||||
icon={
|
||||
<Ionicons
|
||||
name="notifications-outline"
|
||||
size={24}
|
||||
color={"#ffa200"}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<Button
|
||||
onPress={() => {
|
||||
props.navigation.navigate("settings");
|
||||
setPageIndex(0);
|
||||
setToDosIndex(0);
|
||||
setUserView(true);
|
||||
setIsFamilyView(false);
|
||||
}}
|
||||
label={"Manage Settings"}
|
||||
labelStyle={styles.label}
|
||||
iconSource={() => (
|
||||
<View
|
||||
backgroundColor="#ededed"
|
||||
width={60}
|
||||
height={60}
|
||||
style={{borderRadius: 50}}
|
||||
marginR-10
|
||||
centerV
|
||||
centerH
|
||||
>
|
||||
<NavSettingsIcon/>
|
||||
</View>
|
||||
)}
|
||||
backgroundColor="white"
|
||||
color="#464039"
|
||||
paddingV-30
|
||||
marginH-30
|
||||
borderRadius={18.55}
|
||||
style={{elevation: 0}}
|
||||
/>
|
||||
<DrawerButton
|
||||
color="#8005eb"
|
||||
title={"To Do's"}
|
||||
bgColor={"#f3e6fd"}
|
||||
pressFunc={() => {
|
||||
props.navigation.navigate("todos");
|
||||
setPageIndex(0);
|
||||
setToDosIndex(0);
|
||||
setUserView(true);
|
||||
setIsFamilyView(false);
|
||||
}}
|
||||
icon={<NavToDosIcon />}
|
||||
/>
|
||||
<DrawerButton
|
||||
color="#e0ca03"
|
||||
title={"Brain Dump"}
|
||||
bgColor={"#fffacb"}
|
||||
pressFunc={() => {
|
||||
props.navigation.navigate("brain_dump");
|
||||
setPageIndex(0);
|
||||
setToDosIndex(0);
|
||||
setUserView(true);
|
||||
setIsFamilyView(false);
|
||||
}}
|
||||
icon={<NavBrainDumpIcon />}
|
||||
/>
|
||||
<DrawerButton
|
||||
color="#e0ca03"
|
||||
title={"Notifications"}
|
||||
bgColor={"#ffdda1"}
|
||||
pressFunc={() => {
|
||||
props.navigation.navigate("notifications");
|
||||
setPageIndex(0);
|
||||
setToDosIndex(0);
|
||||
setUserView(true);
|
||||
setIsFamilyView(false);
|
||||
}}
|
||||
icon={
|
||||
<Ionicons
|
||||
name="notifications-outline"
|
||||
size={24}
|
||||
color={"#ffa200"}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<Button
|
||||
onPress={() => {
|
||||
props.navigation.navigate("settings");
|
||||
setPageIndex(0);
|
||||
setToDosIndex(0);
|
||||
setUserView(true);
|
||||
setIsFamilyView(false);
|
||||
}}
|
||||
label={"Manage Settings"}
|
||||
labelStyle={styles.label}
|
||||
iconSource={() => (
|
||||
<View
|
||||
backgroundColor="#ededed"
|
||||
width={60}
|
||||
height={60}
|
||||
style={{ borderRadius: 50 }}
|
||||
marginR-10
|
||||
centerV
|
||||
centerH
|
||||
>
|
||||
<NavSettingsIcon />
|
||||
</View>
|
||||
)}
|
||||
backgroundColor="white"
|
||||
color="#464039"
|
||||
paddingV-30
|
||||
marginH-30
|
||||
borderRadius={18.55}
|
||||
style={{ elevation: 0 }}
|
||||
/>
|
||||
|
||||
<Button
|
||||
size={ButtonSize.large}
|
||||
marginH-10
|
||||
marginT-12
|
||||
paddingV-15
|
||||
style={{
|
||||
marginTop: 50,
|
||||
backgroundColor: "transparent",
|
||||
borderWidth: 1.3,
|
||||
borderColor: "#fd1775",
|
||||
}}
|
||||
label="Sign out of Cally"
|
||||
color="#fd1775"
|
||||
labelStyle={styles.signOut}
|
||||
onPress={() => signOut()}
|
||||
/>
|
||||
</DrawerContentScrollView>
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Drawer.Screen
|
||||
name="index"
|
||||
options={{
|
||||
drawerLabel: "Calendar",
|
||||
title:
|
||||
Device.deviceType === DeviceType.TABLET
|
||||
? "Family Calendar"
|
||||
: "Calendar",
|
||||
}}
|
||||
<Button
|
||||
size={ButtonSize.large}
|
||||
marginH-10
|
||||
marginT-12
|
||||
paddingV-15
|
||||
style={{
|
||||
marginTop: 50,
|
||||
backgroundColor: "transparent",
|
||||
borderWidth: 1.3,
|
||||
borderColor: "#fd1775",
|
||||
}}
|
||||
label="Sign out of Cally"
|
||||
color="#fd1775"
|
||||
labelStyle={styles.signOut}
|
||||
onPress={() => signOut()}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="calendar"
|
||||
options={{
|
||||
drawerLabel: "Calendar",
|
||||
title:
|
||||
Device.deviceType === DeviceType.TABLET
|
||||
? "Family Calendar"
|
||||
: "Calendar",
|
||||
drawerItemStyle: {display: "none"},
|
||||
}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="brain_dump"
|
||||
options={{
|
||||
drawerLabel: "Brain Dump",
|
||||
title: "Brain Dump",
|
||||
}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="settings"
|
||||
options={{
|
||||
drawerLabel: "Settings",
|
||||
title: "Settings",
|
||||
}}
|
||||
/>
|
||||
<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:
|
||||
Device.deviceType === DeviceType.TABLET
|
||||
? "Family To Do's"
|
||||
: "To Do's",
|
||||
}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="notifications"
|
||||
options={{
|
||||
drawerLabel: "Notifications",
|
||||
title: "Notifications",
|
||||
}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="feedback"
|
||||
options={{drawerLabel: "Feedback", title: "Feedback"}}
|
||||
/>
|
||||
</Drawer>
|
||||
);
|
||||
</DrawerContentScrollView>
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Drawer.Screen
|
||||
name="index"
|
||||
options={{
|
||||
drawerLabel: "Calendar",
|
||||
title:
|
||||
Device.deviceType === DeviceType.TABLET
|
||||
? "Family Calendar"
|
||||
: "Calendar",
|
||||
}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="calendar"
|
||||
options={{
|
||||
drawerLabel: "Calendar",
|
||||
title:
|
||||
Device.deviceType === DeviceType.TABLET
|
||||
? "Family Calendar"
|
||||
: "Calendar",
|
||||
drawerItemStyle: { display: "none" },
|
||||
}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="brain_dump"
|
||||
options={{
|
||||
drawerLabel: "Brain Dump",
|
||||
title: "Brain Dump",
|
||||
}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="settings"
|
||||
options={{
|
||||
drawerLabel: "Settings",
|
||||
title: "Settings",
|
||||
}}
|
||||
/>
|
||||
<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:
|
||||
Device.deviceType === DeviceType.TABLET
|
||||
? "Family To Do's"
|
||||
: "To Do's",
|
||||
}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="notifications"
|
||||
options={{
|
||||
drawerLabel: "Notifications",
|
||||
title: "Notifications",
|
||||
}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="feedback"
|
||||
options={{ drawerLabel: "Feedback", title: "Feedback" }}
|
||||
/>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
signOut: {fontFamily: "Poppins_500Medium", fontSize: 15},
|
||||
label: {fontFamily: "Poppins_400Medium", fontSize: 15},
|
||||
title: {
|
||||
fontSize: 26.13,
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
color: "#262627",
|
||||
},
|
||||
signOut: { fontFamily: "Poppins_500Medium", fontSize: 15 },
|
||||
label: { fontFamily: "Poppins_400Medium", fontSize: 15 },
|
||||
title: {
|
||||
fontSize: 26.13,
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
color: "#262627",
|
||||
},
|
||||
});
|
||||
|
||||
@ -61,7 +61,6 @@ export default function Screen() {
|
||||
justifyContent: "center",
|
||||
paddingRight: 200,
|
||||
}}
|
||||
refreshControl={refreshControl}
|
||||
bounces={true}
|
||||
showsVerticalScrollIndicator={false}
|
||||
pointerEvents={isSyncing ? "auto" : "none"}
|
||||
@ -74,7 +73,6 @@ export default function Screen() {
|
||||
<ScrollView
|
||||
style={{flex: 1, height: "100%"}}
|
||||
contentContainerStyle={{flex: 1, height: "100%"}}
|
||||
refreshControl={refreshControl}
|
||||
bounces={true}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
|
||||
20
assets/svgs/CheckmarkIcon.tsx
Normal file
20
assets/svgs/CheckmarkIcon.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import * as React from "react"
|
||||
import Svg, { SvgProps, Path } from "react-native-svg"
|
||||
const CheckmarkIcon = (props: SvgProps) => (
|
||||
<Svg
|
||||
width={13}
|
||||
height={10}
|
||||
viewBox="0 0 13 10"
|
||||
fill={props.color || "white"}
|
||||
{...props}
|
||||
>
|
||||
<Path
|
||||
stroke="#fff"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.95}
|
||||
d="m1.48 5.489 3.2 3.178 7.2-7.15"
|
||||
/>
|
||||
</Svg>
|
||||
)
|
||||
export default CheckmarkIcon
|
||||
@ -15,7 +15,12 @@ import { UserProfile } from "@/hooks/firebase/types/profileTypes";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
|
||||
const groupToDosByDate = (toDos: IToDo[]) => {
|
||||
let sortedTodos = toDos.sort((a, b) => a.date - b.date);
|
||||
let sortedTodos = toDos.sort((a, b) => {
|
||||
const dateA = a.date === null ? new Date() : a.date;
|
||||
const dateB = b.date === null ? new Date() : b.date;
|
||||
return dateA - dateB;
|
||||
});
|
||||
|
||||
return sortedTodos.reduce(
|
||||
(groups, toDo) => {
|
||||
let dateKey;
|
||||
@ -34,9 +39,7 @@ const groupToDosByDate = (toDos: IToDo[]) => {
|
||||
});
|
||||
};
|
||||
|
||||
if (toDo.date === null) {
|
||||
dateKey = "No Date";
|
||||
} else if (isToday(toDo.date)) {
|
||||
if (toDo.date === null || isToday(toDo.date)) {
|
||||
dateKey = "Today";
|
||||
} else if (isTomorrow(toDo.date)) {
|
||||
dateKey = "Tomorrow";
|
||||
@ -228,42 +231,47 @@ const SingleUserChoreList = ({ user }: { user: UserProfile }) => {
|
||||
|
||||
return (
|
||||
<View
|
||||
marginB-402
|
||||
marginT-10
|
||||
paddingH-10
|
||||
backgroundColor="#f9f8f7"
|
||||
style={{ minHeight: 800, borderRadius: 9.11 }}
|
||||
style={{
|
||||
minHeight: 600,
|
||||
maxHeight: 600,
|
||||
borderRadius: 9.11,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
width={355}
|
||||
>
|
||||
<ScrollView>
|
||||
{noDateToDos.length > 0 && (
|
||||
<View key="No Date">
|
||||
<View row spread paddingH-19 marginB-12>
|
||||
<Text
|
||||
text70
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Unscheduled
|
||||
</Text>
|
||||
<AntDesign
|
||||
name={expandNoDate ? "caretdown" : "caretright"}
|
||||
size={24}
|
||||
color="#fd1575"
|
||||
onPress={() => {
|
||||
setExpandNoDate(!expandNoDate);
|
||||
}}
|
||||
/>
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
<View paddingH-10 paddingB-90>
|
||||
{noDateToDos.length > 0 && (
|
||||
<View key="No Date">
|
||||
<View row spread paddingH-19 marginB-12>
|
||||
<Text
|
||||
text70
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Unscheduled
|
||||
</Text>
|
||||
<AntDesign
|
||||
name={expandNoDate ? "caretdown" : "caretright"}
|
||||
size={24}
|
||||
color="#fd1575"
|
||||
onPress={() => {
|
||||
setExpandNoDate(!expandNoDate);
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
{expandNoDate &&
|
||||
noDateToDos
|
||||
.sort((a, b) => Number(a.done) - Number(b.done))
|
||||
.map((item) => <ToDoItem key={item.id} item={item} />)}
|
||||
</View>
|
||||
{expandNoDate &&
|
||||
noDateToDos
|
||||
.sort((a, b) => Number(a.done) - Number(b.done))
|
||||
.map((item) => <ToDoItem key={item.id} item={item} />)}
|
||||
</View>
|
||||
)}
|
||||
)}
|
||||
|
||||
{datedToDos.map(renderTodoGroup)}
|
||||
{datedToDos.map(renderTodoGroup)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
|
||||
@ -8,6 +8,7 @@ import { ImageBackground, StyleSheet } from "react-native";
|
||||
import { colorMap } from "@/constants/colorMap";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
|
||||
import AddChore from "../../todos/AddChore";
|
||||
|
||||
const TabletChoresPage = () => {
|
||||
const {data: users} = useGetFamilyMembers();
|
||||
@ -98,6 +99,9 @@ const TabletChoresPage = () => {
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
<View style={styles.addBtn}>
|
||||
<AddChore />
|
||||
</View>
|
||||
</TabletContainer>
|
||||
);
|
||||
};
|
||||
@ -113,6 +117,11 @@ const styles = StyleSheet.create({
|
||||
fontSize: 22.43,
|
||||
color: "#2c2c2c",
|
||||
},
|
||||
addBtn: {
|
||||
position: 'absolute',
|
||||
bottom: 50,
|
||||
right: 220
|
||||
}
|
||||
});
|
||||
|
||||
export default TabletChoresPage;
|
||||
|
||||
@ -5,9 +5,9 @@ import { InnerCalendar } from "@/components/pages/calendar/InnerCalendar";
|
||||
export default function CalendarPage() {
|
||||
return (
|
||||
<View
|
||||
style={{ flex: 1, height: "100%", padding: 10 }}
|
||||
paddingH-22
|
||||
paddingT-22
|
||||
style={{ flex: 1, height: "100%", padding: 0 }}
|
||||
paddingH-0
|
||||
paddingT-0
|
||||
>
|
||||
{/*<HeaderTemplate
|
||||
message={"Let's get your week started !"}
|
||||
|
||||
@ -25,9 +25,10 @@ export const InnerCalendar = () => {
|
||||
return (
|
||||
<>
|
||||
<View
|
||||
style={{flex: 1, backgroundColor: "#fff", borderRadius: 30, marginBottom: 10, overflow: "hidden"}}
|
||||
style={{flex: 1, backgroundColor: "#fff", borderRadius: 0, marginBottom: 0, overflow: "hidden"}}
|
||||
ref={calendarContainerRef}
|
||||
onLayout={onLayout}
|
||||
paddingB-15
|
||||
>
|
||||
<CalendarHeader/>
|
||||
{calendarHeight > 0 && (
|
||||
|
||||
@ -40,6 +40,7 @@ import DeleteEventDialog from "./DeleteEventDialog";
|
||||
import { useDeleteEvent } from "@/hooks/firebase/useDeleteEvent";
|
||||
import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
|
||||
import { addHours, startOfHour, startOfMinute } from "date-fns";
|
||||
import { useAuthContext } from "@/contexts/AuthContext";
|
||||
|
||||
const daysOfWeek = [
|
||||
{ label: "Monday", value: "monday" },
|
||||
@ -53,6 +54,7 @@ const daysOfWeek = [
|
||||
|
||||
export const ManuallyAddEventModal = () => {
|
||||
const insets = useSafeAreaInsets();
|
||||
const { user } = useAuthContext();
|
||||
|
||||
const [selectedNewEventDate, setSelectedNewEndDate] = useAtom(
|
||||
selectedNewEventDateAtom
|
||||
@ -115,7 +117,7 @@ export const ManuallyAddEventModal = () => {
|
||||
editEvent?.end ?? initialDate ?? new Date()
|
||||
);
|
||||
const [selectedAttendees, setSelectedAttendees] = useState<string[]>(
|
||||
editEvent?.attendees ?? []
|
||||
editEvent?.attendees ?? [user?.uid]
|
||||
);
|
||||
const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);
|
||||
|
||||
@ -162,7 +164,7 @@ export const ManuallyAddEventModal = () => {
|
||||
|
||||
setStartDate(initialDate ?? new Date());
|
||||
setEndDate(editEvent?.end ?? initialDate ?? new Date());
|
||||
setSelectedAttendees(editEvent?.attendees ?? []);
|
||||
setSelectedAttendees(editEvent?.attendees ?? [user?.uid]);
|
||||
setLocation(editEvent?.location ?? "");
|
||||
setRepeatInterval([]);
|
||||
}, [editEvent, selectedNewEventDate]);
|
||||
@ -247,10 +249,10 @@ export const ManuallyAddEventModal = () => {
|
||||
Alert.alert("Alert", "Title field cannot be empty");
|
||||
return false;
|
||||
}
|
||||
// if (!selectedAttendees || selectedAttendees?.length === 0) {
|
||||
// Alert.alert('Alert', 'Cannot have an event without any attendees');
|
||||
// return false;
|
||||
// }
|
||||
if (!selectedAttendees || selectedAttendees?.length === 0) {
|
||||
Alert.alert('Alert', 'Cannot have an event without any attendees');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -25,6 +25,7 @@ const GroceryItem = ({
|
||||
const { profileData } = useAuthContext();
|
||||
const { data: creator } = useGetUserById(item.creatorId);
|
||||
const isParent = profileData?.userType === ProfileType.PARENT;
|
||||
const isCaregiver = profileData?.userType === ProfileType.CAREGIVER;
|
||||
|
||||
const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
|
||||
const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);
|
||||
@ -36,7 +37,7 @@ const GroceryItem = ({
|
||||
const closeEdit = () => setIsEditingTitle(false);
|
||||
|
||||
const getInitials = (firstName: string, lastName: string) => {
|
||||
return `${firstName.charAt(0)}${lastName.charAt(0)}`;
|
||||
return `${firstName.charAt(0).toUpperCase()}${lastName.charAt(0).toUpperCase()}`;
|
||||
};
|
||||
|
||||
return (
|
||||
@ -81,7 +82,7 @@ const GroceryItem = ({
|
||||
/>
|
||||
) : (
|
||||
<View flex>
|
||||
{isParent ? (
|
||||
{(isParent || isCaregiver) && !item.bought ? (
|
||||
<TouchableOpacity onPress={() => setIsEditingTitle(true)}>
|
||||
<Text
|
||||
text70T
|
||||
@ -98,7 +99,7 @@ const GroceryItem = ({
|
||||
) : (
|
||||
<Text
|
||||
text70T
|
||||
style={[styles.title, { color: item.bought ? "red" : "black" }]}
|
||||
style={[styles.title, { textDecorationLine: item.bought ? "line-through" : "none", }]}
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
@ -108,7 +109,7 @@ const GroceryItem = ({
|
||||
|
||||
{!item.approved ? (
|
||||
<View row centerV>
|
||||
{isParent && (
|
||||
{isParent || isCaregiver && (
|
||||
<>
|
||||
<AntDesign
|
||||
name="check"
|
||||
@ -132,7 +133,7 @@ const GroceryItem = ({
|
||||
</View>
|
||||
) : (
|
||||
!isEditingTitle &&
|
||||
isParent && (
|
||||
(isParent || isCaregiver) && (
|
||||
<Checkbox
|
||||
value={item.bought}
|
||||
containerStyle={[styles.checkbox, { borderRadius: 50 }]}
|
||||
@ -180,7 +181,7 @@ const GroceryItem = ({
|
||||
width: 24.64,
|
||||
aspectRatio: 1,
|
||||
marginRight: 8,
|
||||
backgroundColor: "#ccc",
|
||||
backgroundColor: creator?.eventColor || "gray",
|
||||
borderRadius: 100,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
|
||||
@ -62,7 +62,7 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
|
||||
id: "",
|
||||
title: title,
|
||||
category: category,
|
||||
approved: profileData?.userType === ProfileType.PARENT,
|
||||
approved: profileData?.userType === ProfileType.PARENT || profileData?.userType === ProfileType.CAREGIVER,
|
||||
recurring: false,
|
||||
frequency: GroceryFrequency.Never,
|
||||
bought: false,
|
||||
|
||||
@ -18,7 +18,7 @@ import {Ionicons} from "@expo/vector-icons";
|
||||
import {PanningDirectionsEnum} from "react-native-ui-lib/src/incubator/panView";
|
||||
import {Alert, Dimensions, KeyboardAvoidingView, StyleSheet} from "react-native";
|
||||
import DropModalIcon from "@/assets/svgs/DropModalIcon";
|
||||
import {IToDo} from "@/hooks/firebase/types/todoData";
|
||||
import {IToDo, REPEAT_TYPE} from "@/hooks/firebase/types/todoData";
|
||||
import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
|
||||
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import CalendarIcon from "@/assets/svgs/CalendarIcon";
|
||||
@ -39,7 +39,7 @@ const defaultTodo = {
|
||||
points: 10,
|
||||
date: new Date(),
|
||||
rotate: false,
|
||||
repeatType: "Every week",
|
||||
repeatType: REPEAT_TYPE.NONE,
|
||||
assignees: [],
|
||||
repeatDays: []
|
||||
};
|
||||
@ -138,6 +138,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
|
||||
padding: 0,
|
||||
paddingTop: 4,
|
||||
margin: 0,
|
||||
maxWidth: 600
|
||||
}}
|
||||
visible={addChoreDialogProps.isVisible}
|
||||
>
|
||||
@ -260,7 +261,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
|
||||
))}
|
||||
</Picker>
|
||||
</View>
|
||||
{todo.repeatType == "Every week" && <RepeatFreq handleRepeatDaysChange={handleRepeatDaysChange}
|
||||
{todo.repeatType == REPEAT_TYPE.EVERY_WEEK && <RepeatFreq handleRepeatDaysChange={handleRepeatDaysChange}
|
||||
repeatDays={todo.repeatDays ?? []}/>}
|
||||
</View>
|
||||
<View style={styles.divider}/>
|
||||
|
||||
@ -8,7 +8,7 @@ import {IToDo} from "@/hooks/firebase/types/todoData";
|
||||
import DropdownIcon from "@/assets/svgs/DropdownIcon";
|
||||
import {Dropdown} from "react-native-element-dropdown";
|
||||
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import {useAuthContext} from "@/contexts/AuthContext";
|
||||
import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
|
||||
import {StyleSheet} from "react-native";
|
||||
|
||||
const FILTER_OPTIONS = {
|
||||
@ -17,7 +17,12 @@ const FILTER_OPTIONS = {
|
||||
};
|
||||
|
||||
const groupToDosByDate = (toDos: IToDo[]) => {
|
||||
let sortedTodos = toDos.sort((a, b) => a.date - b.date);
|
||||
let sortedTodos = toDos.sort((a, b) => {
|
||||
const dateA = a.date === null ? new Date() : a.date;
|
||||
const dateB = b.date === null ? new Date() : b.date;
|
||||
return dateA - dateB;
|
||||
});
|
||||
|
||||
return sortedTodos.reduce(
|
||||
(groups, toDo) => {
|
||||
let dateKey;
|
||||
@ -36,9 +41,15 @@ const groupToDosByDate = (toDos: IToDo[]) => {
|
||||
});
|
||||
};
|
||||
|
||||
if (toDo.date === null) {
|
||||
dateKey = "No Date";
|
||||
} else if (isToday(toDo.date)) {
|
||||
const isOverdue = (date: Date) => {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
return date < today;
|
||||
};
|
||||
|
||||
if (isOverdue(toDo.date) && !toDo.done) {
|
||||
dateKey = "Overdue";
|
||||
} else if (toDo.date === null || isToday(toDo.date)) {
|
||||
dateKey = "Today";
|
||||
} else if (isTomorrow(toDo.date)) {
|
||||
dateKey = "Tomorrow";
|
||||
@ -48,7 +59,8 @@ const groupToDosByDate = (toDos: IToDo[]) => {
|
||||
dateKey = "Next 30 Days";
|
||||
subDateKey = format(toDo.date, "MMM d");
|
||||
} else {
|
||||
return groups;
|
||||
dateKey = "Later";
|
||||
subDateKey = format(toDo.date, "MMM d, yyyy");
|
||||
}
|
||||
|
||||
if (!groups[dateKey]) {
|
||||
@ -58,7 +70,7 @@ const groupToDosByDate = (toDos: IToDo[]) => {
|
||||
};
|
||||
}
|
||||
|
||||
if (dateKey === "Next 30 Days" && subDateKey) {
|
||||
if ((dateKey === "Next 30 Days" || dateKey === "Later") && subDateKey) {
|
||||
if (!groups[dateKey].subgroups[subDateKey]) {
|
||||
groups[dateKey].subgroups[subDateKey] = [];
|
||||
}
|
||||
@ -80,12 +92,16 @@ const groupToDosByDate = (toDos: IToDo[]) => {
|
||||
|
||||
const resolveFilterOptions = (members, user) => {
|
||||
|
||||
let options = members?.map((member) => {
|
||||
let options = [];
|
||||
members?.forEach((member) => {
|
||||
let label = member?.firstName;
|
||||
if (member.uid === user?.uid) {
|
||||
label = FILTER_OPTIONS.ME;
|
||||
}
|
||||
return {value: member?.uid, label: label};
|
||||
|
||||
if (member.userType !== ProfileType.FAMILY_DEVICE) {
|
||||
options.push({value: member?.uid, label: label});
|
||||
}
|
||||
});
|
||||
options.push({value: FILTER_OPTIONS.EVERYONE, label: FILTER_OPTIONS.EVERYONE})
|
||||
|
||||
@ -138,14 +154,17 @@ const ToDosList = ({ isSettings }: { isSettings?: boolean }) => {
|
||||
};
|
||||
|
||||
const noDateToDos = groupedToDos["No Date"]?.items || [];
|
||||
const datedToDos = Object.keys(groupedToDos).filter(
|
||||
(key) => key !== "No Date"
|
||||
);
|
||||
const datedToDos = Object.keys(groupedToDos)
|
||||
.filter((key) => key !== "No Date")
|
||||
.sort((a, b) => {
|
||||
const order = ["Overdue", "Today", "Tomorrow", "Next 7 Days", "Next 30 Days", "Later"];
|
||||
return order.indexOf(a) - order.indexOf(b);
|
||||
});
|
||||
|
||||
const renderTodoGroup = (dateKey: string) => {
|
||||
const isExpanded = expandedGroups[dateKey] || false;
|
||||
|
||||
if (dateKey === "Next 30 Days") {
|
||||
if (dateKey === "Next 30 Days" || dateKey === "Later") {
|
||||
const subgroups = Object.entries(groupedToDos[dateKey].subgroups).sort(
|
||||
([dateA], [dateB]) => {
|
||||
const dateAObj = new Date(dateA);
|
||||
|
||||
67
components/shared/RefreshButton.tsx
Normal file
67
components/shared/RefreshButton.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import { TouchableOpacity, Animated, Easing } from 'react-native';
|
||||
import { Feather } from '@expo/vector-icons';
|
||||
|
||||
interface RefreshButtonProps {
|
||||
onRefresh: () => Promise<void>;
|
||||
isSyncing: boolean;
|
||||
size?: number;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
const RefreshButton = ({
|
||||
onRefresh,
|
||||
isSyncing,
|
||||
size = 24,
|
||||
color = "#83807F"
|
||||
}: RefreshButtonProps) => {
|
||||
const rotateAnim = useRef(new Animated.Value(0)).current;
|
||||
const rotationLoop = useRef<Animated.CompositeAnimation | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSyncing) {
|
||||
startContinuousRotation();
|
||||
} else {
|
||||
stopRotation();
|
||||
}
|
||||
}, [isSyncing]);
|
||||
|
||||
const startContinuousRotation = () => {
|
||||
rotateAnim.setValue(0);
|
||||
rotationLoop.current = Animated.loop(
|
||||
Animated.timing(rotateAnim, {
|
||||
toValue: 1,
|
||||
duration: 1000,
|
||||
easing: Easing.linear,
|
||||
useNativeDriver: true,
|
||||
})
|
||||
);
|
||||
rotationLoop.current.start();
|
||||
};
|
||||
|
||||
const stopRotation = () => {
|
||||
rotationLoop.current?.stop();
|
||||
rotateAnim.setValue(0);
|
||||
};
|
||||
|
||||
const rotate = rotateAnim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: ['0deg', '360deg'],
|
||||
});
|
||||
|
||||
const handlePress = async () => {
|
||||
if (!isSyncing) {
|
||||
await onRefresh();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TouchableOpacity onPress={handlePress} disabled={isSyncing}>
|
||||
<Animated.View style={{ transform: [{ rotate }] }}>
|
||||
<Feather name="refresh-cw" size={size} color={color} />
|
||||
</Animated.View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
export default RefreshButton;
|
||||
Reference in New Issue
Block a user