ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2026-10-23 10:07:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source
This commit is contained in:
Milan Paunovic
2024-10-15 11:40:40 +02:00
parent 7d16da78d0 4b01e18ac0
commit 656622fd93
27 changed files with 1155 additions and 734 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.json
+2 -1
View File
@@ -62,7 +62,8 @@
"color": "#ffffff",
"defaultChannel": "default"
}
]
],
"expo-font"
],
"experiments": {
"typedRoutes": true
app/(auth)/_layout.tsx
+5 -3
View File
@@ -43,7 +43,7 @@ export default function TabLayout() {
return (
<DrawerContentScrollView {...props} style={{ height: "100%" }}>
<View centerH centerV margin-30>
<Text text50>Welcome to Cally</Text>
<Text text40>Welcome to Cally</Text>
</View>
<View
style={{
@@ -101,6 +101,7 @@ export default function TabLayout() {
<Button
onPress={() => props.navigation.navigate("settings")}
label={"Manage Settings"}
labelStyle={{fontFamily: "Manrope_500Medium"}}
iconSource={() => (
<View
backgroundColor="#ededed"
@@ -128,13 +129,14 @@ export default function TabLayout() {
marginH-30
paddingV-15
style={{
marginTop: "47%",
marginTop: "42%",
backgroundColor: "transparent",
borderWidth: 2,
borderWidth: 1.3,
borderColor: "#fd1775",
}}
label="Sign out of Cally"
color="#fd1775"
labelStyle={{fontFamily: 'Manrope_700Bold'}}
onPress={() => signOut()}
/>
</DrawerContentScrollView>
app/_layout.tsx
+196 -33
View File
@@ -1,44 +1,207 @@
import {DefaultTheme, ThemeProvider} from '@react-navigation/native';
import {useFonts} from 'expo-font';
import {Stack} from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import {useEffect} from 'react';
import 'react-native-reanimated';
import {AuthContextProvider} from "@/contexts/AuthContext";
import {QueryClient, QueryClientProvider} from "react-query";
import {Toast} from "react-native-ui-lib";
import React, { useEffect } from "react";
import { DefaultTheme, ThemeProvider } from "@react-navigation/native";
import {
useFonts,
Manrope_200ExtraLight,
Manrope_300Light,
Manrope_400Regular,
Manrope_500Medium,
Manrope_600SemiBold,
Manrope_700Bold,
Manrope_800ExtraBold,
} from "@expo-google-fonts/manrope";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import "react-native-reanimated";
import { AuthContextProvider } from "@/contexts/AuthContext";
import { QueryClient, QueryClientProvider } from "react-query";
import {
ThemeManager,
Typography,
Toast,
TextProps,
} from "react-native-ui-lib";
import functions from "@react-native-firebase/functions";
import auth from "@react-native-firebase/auth";
import firestore from "@react-native-firebase/firestore";
SplashScreen.preventAutoHideAsync();
const queryClient = new QueryClient();
if (__DEV__) {
functions().useEmulator('localhost', 5001);
firestore().useEmulator("localhost", 5471);
auth().useEmulator("http://localhost:9099");
}
type TextStyleBase =
| "text10"
| "text20"
| "text30"
| "text40"
| "text50"
| "text60"
| "text70"
| "text80"
| "text90"
| "text100";
type TextStyleModifier = "R" | "M" | "BO" | "H" | "BL" | "L";
type TextStyle = TextStyleBase | `${TextStyleBase}${TextStyleModifier}`;
type TextStyleProps = {
[K in TextStyle]?: boolean;
};
type ExtendedTextProps = TextProps & TextStyleProps;
interface FontStyle {
fontFamily: string;
fontSize: number;
}
const getManropeFontStyle = (style: TextStyle): FontStyle => {
let fontFamily: string;
let fontSize: number;
if (style.includes("L") || style.includes("BL"))
fontFamily = "Manrope_300Light";
else if (style.includes("R")) fontFamily = "Manrope_400Regular";
else if (style.includes("M")) fontFamily = "Manrope_500Medium";
else if (style.includes("BO") || style.includes("H"))
fontFamily = "Manrope_700Bold";
else {
const baseStyle = style.slice(0, 6) as TextStyleBase;
switch (baseStyle) {
case "text10":
case "text20":
fontFamily = "Manrope_700Bold";
break;
case "text30":
case "text40":
fontFamily = "Manrope_600SemiBold";
break;
case "text50":
fontFamily = "Manrope_400Regular";
break;
default:
fontFamily = "Manrope_300Light";
}
}
switch (style.slice(0, 6) as TextStyleBase) {
case "text10":
fontSize = 64;
break;
case "text20":
fontSize = 50;
break;
case "text30":
fontSize = 36;
break;
case "text40":
fontSize = 28;
break;
case "text50":
fontSize = 24;
break;
case "text60":
fontSize = 20;
break;
case "text70":
fontSize = 16;
break;
case "text80":
fontSize = 14;
break;
case "text90":
fontSize = 12;
break;
case "text100":
fontSize = 10;
break;
default:
fontSize = 16;
}
return { fontFamily, fontSize };
};
export default function RootLayout() {
const [loaded] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
});
const [loaded] = useFonts({
Manrope_200ExtraLight,
Manrope_300Light,
Manrope_400Regular,
Manrope_500Medium,
Manrope_600SemiBold,
Manrope_700Bold,
Manrope_800ExtraBold,
});
useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
const typographies: Partial<Record<TextStyle, FontStyle>> = {};
(
[
"text10",
"text20",
"text30",
"text40",
"text50",
"text60",
"text70",
"text80",
"text90",
"text100",
] as const
).forEach((baseStyle) => {
typographies[baseStyle] = getManropeFontStyle(baseStyle);
(["R", "M", "BO", "H", "BL", "L"] as const).forEach((modifier) => {
const style = `${baseStyle}${modifier}` as TextStyle;
typographies[style] = getManropeFontStyle(style);
});
});
useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
Typography.loadTypographies(typographies);
ThemeManager.setComponentTheme(
"Text",
(props: ExtendedTextProps, context: unknown) => {
const textStyle = (
Object.keys(props) as Array<keyof ExtendedTextProps>
).find((key) => typographies[key as TextStyle]) as
| TextStyle
| undefined;
return {
style: [
Typography.text50,
textStyle ? typographies[textStyle] : undefined,
],
};
}
}, [loaded]);
);
}
}, [loaded]);
if (!loaded) {
return null;
}
if (!loaded) {
return null;
}
return (
<QueryClientProvider client={queryClient}>
<AuthContextProvider>
<ThemeProvider value={DefaultTheme}>
<Stack>
<Stack.Screen name="(auth)" options={{headerShown: false}}/>
<Stack.Screen name="(unauth)" options={{headerShown: false}}/>
<Stack.Screen name="+not-found"/>
</Stack>
<Toast/>
</ThemeProvider>
</AuthContextProvider>
</QueryClientProvider>
);
return (
<QueryClientProvider client={queryClient}>
<AuthContextProvider>
<ThemeProvider value={DefaultTheme}>
<Stack>
<Stack.Screen name="(auth)" options={{ headerShown: false }} />
<Stack.Screen name="(unauth)" options={{ headerShown: false }} />
<Stack.Screen name="+not-found" />
</Stack>
<Toast />
</ThemeProvider>
</AuthContextProvider>
</QueryClientProvider>
);
}
assets/fonts/Manrope-VariableFont_wght.ttf
BIN
View File
Binary file not shown.
assets/images/child-picture.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

assets/images/child1-picture.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

assets/images/profile-picture.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

assets/svgs/FireworksOrangeIcon.tsx
+21
View File
@@ -0,0 +1,21 @@
import * as React from "react"
import Svg, { G, Path, Defs, ClipPath, SvgProps } from "react-native-svg"
const FireworksOrangeIcon: React.FC<SvgProps> = (props) => (
<Svg
width={props.width || 29}
height={props.height || 28}
fill="none"
{...props}
>
<G fill={props.color || "#F90"} clipPath="url(#a)">
<Path d="M14.573 4.229c.527 0 .885-1.15 1.022-2.31C15.765.468 15.152 0 14.573 0c-.58 0-1.193.467-1.023 1.92.137 1.16.495 2.309 1.023 2.309ZM14.573 22.987c-.528 0-.886 1.15-1.023 2.31-.17 1.452.443 1.92 1.023 1.92.58 0 1.193-.468 1.022-1.92-.137-1.16-.496-2.31-1.022-2.31ZM9.85 5.473c.456-.262.192-1.438-.27-2.51-.578-1.343-1.343-1.44-1.845-1.151-.503.29-.799 1.001.074 2.174.7.935 1.583 1.751 2.04 1.487ZM19.296 21.743c-.456.261-.193 1.438.268 2.51.58 1.343 1.343 1.44 1.846 1.15.502-.289.8-1.001-.074-2.173-.698-.935-1.583-1.751-2.04-1.487ZM4.95 6.845c-1.172-.873-1.884-.576-2.174-.074-.29.503-.192 1.267 1.15 1.846 1.073.461 2.249.724 2.512.269.263-.457-.554-1.343-1.489-2.041ZM25.217 18.6c-1.07-.463-2.247-.724-2.51-.27-.263.458.554 1.343 1.489 2.042 1.172.872 1.883.575 2.172.073.29-.502.193-1.266-1.15-1.845ZM5.193 13.607c0-.526-1.15-.884-2.309-1.021-1.452-.171-1.918.443-1.918 1.021 0 .581.466 1.194 1.918 1.024 1.159-.137 2.31-.496 2.31-1.024ZM26.261 12.585c-1.158.138-2.308.496-2.308 1.023 0 .527 1.15.886 2.308 1.022 1.453.172 1.92-.442 1.92-1.022 0-.58-.467-1.193-1.92-1.023ZM3.927 18.6c-1.343.579-1.44 1.343-1.15 1.845.29.502 1 .8 2.172-.073.935-.699 1.751-1.584 1.488-2.041-.262-.455-1.438-.194-2.51.269ZM25.217 8.617c1.344-.58 1.442-1.343 1.15-1.846-.288-.502-.999-.799-2.171.074-.935.698-1.752 1.584-1.489 2.04.263.456 1.44.194 2.51-.268ZM7.81 23.23c-.874 1.172-.578 1.884-.075 2.174.503.29 1.267.192 1.845-1.15.462-1.073.726-2.25.27-2.511-.457-.264-1.342.552-2.04 1.487ZM21.336 3.986c.874-1.173.578-1.884.074-2.174-.502-.29-1.267-.192-1.846 1.151-.46 1.072-.724 2.248-.268 2.51.456.264 1.342-.552 2.04-1.487ZM13.464 9.362c.398-.106.435-1.04.304-1.938-.164-1.125-.718-1.353-1.153-1.235-.436.114-.803.589-.383 1.645.337.844.838 1.636 1.232 1.528ZM15.682 17.852c-.394.107-.434 1.044-.303 1.941.164 1.125.718 1.353 1.154 1.234.435-.116.802-.59.382-1.644-.336-.844-.837-1.636-1.233-1.53ZM9.14 8.194c-.316.32-.398.91.496 1.617.71.56 1.542.996 1.829.707.29-.29-.144-1.12-.704-1.831-.705-.893-1.3-.811-1.62-.493ZM20.002 19.023c.319-.319.4-.912-.492-1.618-.712-.56-1.54-.994-1.83-.706-.289.29.145 1.12.707 1.831.704.892 1.297.811 1.615.493ZM8.38 12.79c.898.13 1.834.093 1.938-.304.107-.396-.685-.897-1.528-1.233-1.055-.42-1.527-.052-1.645.383-.117.434.11.99 1.234 1.154ZM20.767 14.427c-.898-.13-1.832-.092-1.94.303-.106.396.686.896 1.529 1.232 1.056.42 1.53.053 1.646-.382.118-.436-.11-.99-1.235-1.153ZM8.8 15.95c.842-.336 1.635-.838 1.528-1.235-.105-.393-1.042-.432-1.94-.3-1.124.162-1.352.717-1.234 1.151.116.436.59.803 1.646.385ZM20.346 11.266c-.843.338-1.634.838-1.528 1.233.106.396 1.041.434 1.94.304 1.125-.164 1.352-.72 1.235-1.153-.117-.437-.59-.804-1.647-.384ZM9.649 17.422c-.89.703-.81 1.3-.49 1.617.319.317.912.399 1.616-.493.56-.71.996-1.54.707-1.83-.291-.29-1.12.144-1.833.706ZM19.496 9.796c.892-.705.81-1.3.494-1.617-.319-.32-.914-.4-1.617.493-.563.712-.997 1.542-.707 1.83.289.29 1.118-.146 1.83-.706ZM13.45 17.862c-.394-.106-.896.685-1.232 1.529-.42 1.056-.055 1.53.383 1.645.435.118.99-.11 1.153-1.234.131-.898.091-1.834-.304-1.94ZM16.545 6.18c-.434-.119-.99.11-1.152 1.234-.131.899-.093 1.833.302 1.94.395.107.897-.686 1.233-1.528.42-1.056.055-1.529-.383-1.647ZM12.37 13.607a2.204 2.204 0 1 0 4.407.001 2.204 2.204 0 0 0-4.408 0Z" />
</G>
<Defs>
<ClipPath id="a">
<Path fill={props.color || "#fff"} d="M.965 0H28.18v27.216H.965z" />
</ClipPath>
</Defs>
</Svg>
)
export default FireworksOrangeIcon
assets/svgs/GiftIcon.tsx
+23
View File
@@ -0,0 +1,23 @@
import * as React from "react";
import Svg, { Path, SvgProps } from "react-native-svg";
const GiftIcon: React.FC<SvgProps> = (props) => (
<Svg width={props.width || 14} height={props.height || 14} fill="none" {...props}>
<Path
fill={props.color || "#46A80A"}
d="M6.09 12.581V8.834H1.872v-.937H6.09V4.149H1.873v8.432H6.09Zm.936 0h4.216V4.15H7.026v3.748h4.216v.937H7.026v3.747ZM.936 3.212H12.18v9.838a.469.469 0 0 1-.468.468H1.405a.468.468 0 0 1-.468-.468V3.212Z"
/>
<Path
fill={props.color || "#46A80A"}
d="M.468 3.212h12.18c.312 0 .468.157.468.469 0 .312-.156.468-.468.468H.468C.156 4.15 0 3.993 0 3.681c0-.312.156-.469.468-.469Z"
/>
<Path
fill={props.color || "#46A80A"}
d="M5.153 3.213a.937.937 0 1 0 0-1.874.937.937 0 0 0 0 1.874Zm0 .936a1.874 1.874 0 1 1 0-3.747 1.874 1.874 0 0 1 0 3.747Z"
/>
<Path
fill={props.color || "#46A80A"}
d="M7.964 3.213a.937.937 0 1 0 0-1.874.937.937 0 0 0 0 1.874Zm0 .936a1.874 1.874 0 1 1 0-3.747 1.874 1.874 0 0 1 0 3.747Z"
/>
</Svg>
);
export default GiftIcon;
components/pages/brain_dump/BrainDumpPage.tsx
+8 -9
View File
@@ -54,21 +54,20 @@ const BrainDumpPage = () => {
height: 40,
borderRadius: 30,
backgroundColor: "#fd1775",
alignItems: "center",
justifyContent: "center",
}}
centerV
color="white"
enableShadow
iconSource={() => (
<MaterialIcons name="add" size={22} color={"white"} />
)}
onPress={() => {
setIsAddVisible(true);
}}
label="New"
text60R
/>
>
<View row centerV centerH>
<MaterialIcons name="add" size={22} color={"white"} />
<Text white tex30 style={{ fontSize: 17 }}>
New
</Text>
</View>
</Button>
<AddBrainDump
addBrainDumpProps={{
isVisible: isAddVisible,
components/pages/brain_dump/DumpItem.tsx
+2 -2
View File
@@ -16,10 +16,10 @@ const BrainDumpItem = (props: { item: IBrainDump }) => {
padding-15
style={{ borderRadius: 20, elevation: 2 }}
>
<Text text70BL marginB-8>
<Text text70B style={{fontSize: 17, fontFamily: 'Manrope_700Bold'}} marginB-8>
{props.item.title}
</Text>
<Text text70>{props.item.description}</Text>
<Text text70 style={{fontSize: 15, fontFamily: "Manrope_400Regular", color: '#5c5c5c'}}>{props.item.description}</Text>
</View>
</TouchableWithoutFeedback>
<MoveBrainDump item={props.item} isVisible={isVisible} setIsVisible={setIsVisible} />
components/pages/brain_dump/DumpList.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ const DumpList = (props: { searchText: string }) => {
);
return (
<View>
<View marginB-70>
<FlatList
data={filteredBrainDumps}
keyExtractor={(item) => item.title}
components/pages/calendar/AddEventDialog.tsx
+121 -112
View File
@@ -20,7 +20,6 @@ import AddChoreDialog from "../todos/AddChoreDialog";
import { ToDosContextProvider } from "@/contexts/ToDosContext";
import UploadImageDialog from "./UploadImageDialog";
export const AddEventDialog = () => {
const [show, setShow] = useState(false);
const [showManualInputModal, setShowManualInputModal] = useState(false);
@@ -37,127 +36,137 @@ export const AddEventDialog = () => {
const handleScanImageDialog = () => {
setShow(false);
setTimeout(() => {
setShowUploadDialog(true);
setShowUploadDialog(true);
}, 100);
}
};
return (
<ToDosContextProvider>
<>
<Button
style={{
position: "absolute",
bottom: 20,
right: 20,
height: 40,
borderRadius: 30,
backgroundColor: "#fd1775",
alignItems: "center",
justifyContent: "center",
}}
centerV
color="white"
enableShadow
iconSource={() => (
<MaterialIcons name="add" size={22} color={"white"} />
)}
onPress={() => setShow(true)}
label="New"
text60R
/>
<Dialog
visible={show}
onDismiss={() => setShow(false)}
panDirection={PanningProvider.Directions.DOWN}
center
>
<Card
<>
<Button
style={{
paddingHorizontal: 40,
paddingTop: 40,
paddingBottom: 20,
justifyContent: "center",
position: "absolute",
bottom: 20,
right: 20,
height: 40,
borderRadius: 30,
backgroundColor: "#fd1775",
alignItems: "center",
justifyContent: "center",
}}
color="white"
enableShadow
onPress={() => setShow(true)}
>
<Text text50R>Create a new event</Text>
<View style={{ marginTop: 20, alignItems: "center", width: "100%" }}>
<Button
style={{
marginBottom: 10,
backgroundColor: "#ea156c",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
}}
label="Scan Image"
onPress={handleScanImageDialog}
iconSource={() => (
<Feather
name="camera"
size={21}
style={{ marginRight: 7 }}
color="white"
/>
)}
/>
<Button
style={{
marginBottom: 10,
backgroundColor: "#e28800",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
}}
label="Create Event"
onPress={handleOpenManualInputModal}
iconSource={() => (
<MaterialCommunityIcons
name="calendar-text-outline"
size={22}
style={{ marginRight: 5 }}
color="white"
/>
)}
/>
<Button
style={{
marginBottom: 10,
backgroundColor: "#05a8b6",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
}}
label="Add To Do"
onPress={() => setChoreDialogVisible(true)}
iconSource={() => (
<AntDesign
name="checkcircleo"
size={20}
style={{ marginRight: 7 }}
color="white"
/>
)}
/>
<View row centerV centerH>
<MaterialIcons name="add" size={22} color={"white"} />
<Text white tex30 style={{ fontSize: 17 }}>
New
</Text>
</View>
</Button>
<TouchableOpacity onPress={() => setShow(false)}>
<Text style={{ marginTop: 20, color: "#999999" }} text70>Go back to calendar</Text>
</TouchableOpacity>
</Card>
</Dialog>
<AddChoreDialog isVisible={choreDialogVisible} setIsVisible={setChoreDialogVisible} />
<ManuallyAddEventModal
show={showManualInputModal}
close={() => setShowManualInputModal(false)}
/>
<UploadImageDialog show={showUploadDialog} setShow={setShowUploadDialog} />
</>
<Dialog
visible={show}
onDismiss={() => setShow(false)}
panDirection={PanningProvider.Directions.DOWN}
center
>
<Card
style={{
paddingHorizontal: 40,
paddingTop: 40,
paddingBottom: 20,
justifyContent: "center",
alignItems: "center",
}}
>
<Text text50R>Create a new event</Text>
<View
style={{ marginTop: 20, alignItems: "center", width: "100%" }}
>
<Button
style={{
marginBottom: 10,
backgroundColor: "#ea156c",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
}}
label="Scan Image"
onPress={handleScanImageDialog}
iconSource={() => (
<Feather
name="camera"
size={21}
style={{ marginRight: 7 }}
color="white"
/>
)}
/>
<Button
style={{
marginBottom: 10,
backgroundColor: "#e28800",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
}}
label="Create Event"
onPress={handleOpenManualInputModal}
iconSource={() => (
<MaterialCommunityIcons
name="calendar-text-outline"
size={22}
style={{ marginRight: 5 }}
color="white"
/>
)}
/>
<Button
style={{
marginBottom: 10,
backgroundColor: "#05a8b6",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
}}
label="Add To Do"
onPress={() => setChoreDialogVisible(true)}
iconSource={() => (
<AntDesign
name="checkcircleo"
size={20}
style={{ marginRight: 7 }}
color="white"
/>
)}
/>
</View>
<TouchableOpacity onPress={() => setShow(false)}>
<Text style={{ marginTop: 20, color: "#999999" }} text70>
Go back to calendar
</Text>
</TouchableOpacity>
</Card>
</Dialog>
<AddChoreDialog
isVisible={choreDialogVisible}
setIsVisible={setChoreDialogVisible}
/>
<ManuallyAddEventModal
show={showManualInputModal}
close={() => setShowManualInputModal(false)}
/>
<UploadImageDialog
show={showUploadDialog}
setShow={setShowUploadDialog}
/>
</>
</ToDosContextProvider>
);
};
components/pages/calendar/CalendarPage.tsx
+3 -1
View File
@@ -41,6 +41,8 @@ export default function CalendarPage() {
const styles = StyleSheet.create({
segmentslblStyle: {
fontSize: 14,
fontFamily: 'Manrope',
fontWeight: 'bold'
},
calHeader: {
borderWidth: 0,
@@ -89,7 +91,7 @@ export default function CalendarPage() {
};
return (
<View style={{flex: 1, height: "100%", padding: 10}}>
<View style={{flex: 1, height: "100%", padding: 10}} paddingH-22 paddingT-10>
<HeaderTemplate
message={"Let's get your week started!"}
isWelcome={true}
components/pages/grocery/AddGroceryItem.tsx
+5 -1
View File
@@ -45,8 +45,11 @@ const AddGroceryItem = () => {
text70L
iconSource={() => <FontAwesome6 name="add" size={18} color="white" />}
style={styles.finishShopBtn}
labelStyle={styles.addBtnLbl}
enableShadow
onPress={() => {setIsAddingGrocery(true)}}
onPress={() => {
setIsAddingGrocery(true);
}}
/>
</View>
</View>
@@ -89,4 +92,5 @@ const styles = StyleSheet.create({
flex: 1,
marginHorizontal: 3,
},
addBtnLbl: { fontFamily: "Manrope_500Medium", fontSize: 17, marginLeft: 5 },
});
components/pages/grocery/GroceryList.tsx
+75 -42
View File
@@ -1,13 +1,17 @@
import {FlatList, StyleSheet} from "react-native";
import React, {useEffect, useState} from "react";
import {Button, Text, View} from "react-native-ui-lib";
import { FlatList, StyleSheet } from "react-native";
import React, { useEffect, useState } from "react";
import { Button, Text, TouchableOpacity, View } from "react-native-ui-lib";
import GroceryItem from "./GroceryItem";
import {GroceryCategory, GroceryFrequency, useGroceryContext,} from "@/contexts/GroceryContext";
import {
GroceryCategory,
GroceryFrequency,
useGroceryContext,
} from "@/contexts/GroceryContext";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import {AntDesign, MaterialIcons} from "@expo/vector-icons";
import { AntDesign, MaterialIcons } from "@expo/vector-icons";
import EditGroceryItem from "./EditGroceryItem";
import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
import {IGrocery} from "@/hooks/firebase/types/groceryData";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { IGrocery } from "@/hooks/firebase/types/groceryData";
const GroceryList = () => {
const {
@@ -81,20 +85,35 @@ const GroceryList = () => {
message={"Welcome to your grocery list"}
isWelcome={false}
>
<View row spread gap-5>
<View row centerV>
<View
backgroundColor="#e2eed8"
padding-8
paddingH-5
paddingV-8
marginR-5
centerV
style={{ borderRadius: 50 }}
>
<Text text70BL color="#46a80a">
<Text
text70BL
color="#46a80a"
style={{ fontFamily: "Manrope_700Bold" }}
>
{approvedGroceries?.length} list{" "}
{approvedGroceries?.length === 1 ? (
<Text text70BL color="#46a80a">
<Text
text70BL
color="#46a80a"
style={{ fontFamily: "Manrope_700Bold" }}
>
item
</Text>
) : (
<Text text70BL color="#46a80a">
<Text
text70BL
color="#46a80a"
style={{ fontFamily: "Manrope_700Bold" }}
>
items
</Text>
)}
@@ -103,19 +122,21 @@ const GroceryList = () => {
<View
backgroundColor="#faead2"
padding-8
paddingH-12
marginR-15
style={{ borderRadius: 50 }}
>
<Text text70BL color="#e28800">
<Text
text70
style={{ fontFamily: "Manrope_700Bold" }}
color="#e28800"
>
{pendingGroceries?.length} pending
</Text>
</View>
<Button
backgroundColor="transparent"
paddingH-10
iconSource={() => (
<MaterialIcons name="person-add-alt" size={24} color="gray" />
)}
/>
<TouchableOpacity>
<MaterialIcons name="person-add-alt" size={24} color="gray" />
</TouchableOpacity>
</View>
</HeaderTemplate>
@@ -167,38 +188,42 @@ const GroceryList = () => {
renderItem={({ item }) => (
<GroceryItem
item={item}
handleItemApproved={(id, changes) => updateGroceryItem({...changes, id: id})}
handleItemApproved={(id, changes) =>
updateGroceryItem({ ...changes, id: id })
}
/>
)}
keyExtractor={(item) => item.id.toString()}
/>
)
: pendingVisible && <Text>No items pending approval.</Text>}
: pendingVisible && (
<Text style={styles.noItemTxt}>No items pending approval.</Text>
)}
{/* Approved Section */}
<View row spread marginT-40 marginB-0 centerV>
<View row centerV>
{approvedVisible && (
<AntDesign
name="down"
size={17}
style={styles.dropIcon}
color="#9f9f9f"
onPress={() => {
setApprovedVisible(false);
}}
/>
<AntDesign
name="down"
size={17}
style={styles.dropIcon}
color="#9f9f9f"
onPress={() => {
setApprovedVisible(false);
}}
/>
)}
{!approvedVisible && (
<AntDesign
name="right"
size={15}
style={styles.dropIcon}
color="#9f9f9f"
onPress={() => {
setApprovedVisible(true);
}}
/>
<AntDesign
name="right"
size={15}
style={styles.dropIcon}
color="#9f9f9f"
onPress={() => {
setApprovedVisible(true);
}}
/>
)}
<Text text70BL>Shopping List</Text>
</View>
@@ -245,7 +270,9 @@ const GroceryList = () => {
<GroceryItem
key={grocery.id}
item={grocery}
handleItemApproved={(id, changes) => updateGroceryItem({...changes, id: id})}
handleItemApproved={(id, changes) =>
updateGroceryItem({ ...changes, id: id })
}
/>
)
)}
@@ -254,7 +281,9 @@ const GroceryList = () => {
keyExtractor={(category) => category}
/>
)
: approvedVisible && <Text>No approved items.</Text>}
: approvedVisible && (
<Text style={styles.noItemTxt}>No approved items.</Text>
)}
</View>
);
};
@@ -263,6 +292,10 @@ const styles = StyleSheet.create({
dropIcon: {
marginHorizontal: 10,
},
noItemTxt: {
fontFamily: "Manrope_400Regular",
fontSize: 14,
},
});
export default GroceryList;
components/pages/grocery/GroceryWrapper.tsx
+2 -2
View File
@@ -19,7 +19,7 @@ const GroceryWrapper = () => {
}, [isAddingGrocery]);
return (
<View height={"100%"}>
<View height={"100%"} paddingT-15 paddingH-15>
<View height={"100%"}>
<ScrollView
ref={scrollViewRef} // Assign the ref to the ScrollView
@@ -29,8 +29,8 @@ const GroceryWrapper = () => {
<GroceryList />
</View>
</ScrollView>
</View>
{!isAddingGrocery && <AddGroceryItem />}
</View>
</View>
);
};
components/pages/todos/ProgressCard.tsx
+5 -4
View File
@@ -3,6 +3,7 @@ import React from "react";
import { Fontisto } from "@expo/vector-icons";
import { ProgressBar } from "react-native-ui-lib/src/components/progressBar";
import { useToDosContext } from "@/contexts/ToDosContext";
import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
const ProgressCard = ({children}: {children?: React.ReactNode}) => {
const { maxPoints } = useToDosContext();
@@ -14,8 +15,8 @@ const ProgressCard = ({children}: {children?: React.ReactNode}) => {
style={{ borderRadius: 22 }}
>
<View row centerV>
<Fontisto name="day-sunny" size={30} color="#ff9900" />
<Text marginL-5 text70>
<FireworksOrangeIcon />
<Text marginL-15 text70 style={{fontFamily: 'Manrope_600SemiBold', fontSize: 14}}>
You have earned XX points this week!{" "}
</Text>
</View>
@@ -30,8 +31,8 @@ const ProgressCard = ({children}: {children?: React.ReactNode}) => {
}}
/>
<View row spread>
<Text color={"#868686"}>0</Text>
<Text color={"#868686"}>{maxPoints}</Text>
<Text style={{fontSize: 13, color: '#858585'}}>0</Text>
<Text style={{fontSize: 13, color: '#858585'}}>{maxPoints}</Text>
</View>
<View centerV centerH>
{children}
components/pages/todos/ToDoItem.tsx
+27 -17
View File
@@ -13,7 +13,8 @@ import React, { useEffect, useState } from "react";
import { useToDosContext } from "@/contexts/ToDosContext";
import { Ionicons } from "@expo/vector-icons";
import PointsSlider from "@/components/shared/PointsSlider";
import {IToDo} from "@/hooks/firebase/types/todoData";
import { IToDo } from "@/hooks/firebase/types/todoData";
import { ImageBackground } from "react-native";
const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
const { updateToDo } = useToDosContext();
@@ -33,8 +34,8 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
return (
<View
centerV
paddingV-10
paddingH-10
paddingV-15
paddingH-15
marginV-10
style={{
borderRadius: 22,
@@ -42,12 +43,14 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
opacity: props.item.done ? 0.3 : 1,
}}
>
<View paddingB-5 row spread>
<View paddingB-8 row spread>
{!editing ? (
<Text
text70R
text70
style={{
textDecorationLine: props.item.done ? "line-through" : "none",
fontFamily: "Manrope_600SemiBold",
fontSize: 18,
}}
onPress={() => {
if (props.isSettings) {
@@ -62,7 +65,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
value={props.item.title}
text70R
onChangeText={(text) => {
updateToDo({id: props.item.id, title: text });
updateToDo({ id: props.item.id, title: text });
}}
onSubmitEditing={() => {
setEditing(false);
@@ -74,8 +77,10 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
)}
<Checkbox
value={props.item.done}
containerStyle={{borderWidth: 1, borderRadius: 50, borderColor: 'gray', height: 28, width: 28}}
color="#fd1575"
onValueChange={(value) => {
updateToDo({id: props.item.id, done: !props.item.done });
updateToDo({ id: props.item.id, done: !props.item.done });
}}
/>
</View>
@@ -90,7 +95,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
centerH
/>
</View>
<View centerH row spread>
<View centerV centerH marginT-8 row spread>
{props.item.points && props.item.points > 0 ? (
<TouchableOpacity
onPress={() => {
@@ -99,19 +104,24 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
}
}}
>
<View centerV row>
<View centerV row gap-3>
<Ionicons name="gift-outline" size={20} color="#46a80a" />
<Text color="#46a80a">{props.item.points} points</Text>
<Text color="#46a80a" style={{ fontSize: 16 }}>
{props.item.points} points
</Text>
</View>
</TouchableOpacity>
) : (
<View />
)}
<View
height={25}
width={25}
backgroundColor="red"
style={{ borderRadius: 50 }}
<ImageBackground
source={require("../../../assets/images/child-picture.png")}
style={{
height: 28,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
</View>
<Dialog
@@ -150,9 +160,9 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
size={ButtonSize.large}
label="Save points"
backgroundColor="#fd1775"
style={{height: 60, width: 150}}
style={{ height: 60, width: 150 }}
onPress={() => {
updateToDo({id: props.item.id, points: points });
updateToDo({ id: props.item.id, points: points });
setPointsModalVisible(false);
}}
/>
components/pages/todos/ToDosPage.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ const ToDosPage = () => {
const { profileData } = useAuthContext();
const pageLink = (
<TouchableOpacity onPress={() => setPageIndex(1)}>
<Text color="#ea156d">View family progress</Text>
<Text color="#ea156d" style={{fontSize: 14}}>View family progress</Text>
</TouchableOpacity>
);
return (
components/pages/todos/family-chores/FamilyChoresProgress.tsx
+98 -16
View File
@@ -1,6 +1,6 @@
import { View, Text } from "react-native-ui-lib";
import React from "react";
import { StyleSheet } from "react-native";
import { ImageBackground, StyleSheet } from "react-native";
import FamilyChart from "./FamilyChart";
import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
@@ -12,34 +12,116 @@ const FamilyChoresProgress = ({
return (
<View marginT-20 marginH-5>
<TouchableOpacity onPress={() => setPageIndex(0)}>
<Text>Back to ToDos</Text>
<Text style={{ fontFamily: "Manrope_200", fontSize: 12 }}>Back to ToDos</Text>
</TouchableOpacity>
<View centerH>
<Text text50R>Family Chores Progress Report</Text>
<Text style={{ fontFamily: "Manrope_700Bold", fontSize: 19 }}>
Family Chores Progress Report
</Text>
</View>
<View row spread marginT-25 marginB-20>
<Text text70>Points earned this week</Text>
<View row spread marginT-35 marginB-20>
<Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
Points earned this week
</Text>
<View row>
<View style={styles.pfpSmall} backgroundColor="#05a8b6" />
<View style={styles.pfpSmall} backgroundColor="#ebd825" />
<View
style={styles.pfpSmall}
backgroundColor="#05a8b6"
center
children={
<ImageBackground
source={require("../../../../assets/images/child1-picture.png")}
style={{
height: 25,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
}
/>
<View
style={styles.pfpSmall}
backgroundColor="#ebd825"
center
children={
<ImageBackground
source={require("../../../../assets/images/child-picture.png")}
style={{
height: 25,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
}
/>
</View>
</View>
<View style={styles.card} paddingL-10>
<FamilyChart />
</View>
<Text text70 marginV-20>
<Text text70 style={{ fontFamily: "Manrope_600SemiBold" }} marginV-20>
Chore Tracker
</Text>
<View style={styles.card} marginB-20 row spread>
<View style={styles.pfpBig} backgroundColor="#05a8b6" />
<View width={"100%"} centerV centerH>
<Text> x/y chores completed</Text>
<View style={styles.card} marginB-20 row spread centerV>
<View
style={styles.pfpBig}
backgroundColor="#05a8b6"
center
children={
<ImageBackground
source={require("../../../../assets/images/child1-picture.png")}
style={{
height: 45,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
}
/>
<Text
color="#858585"
style={{ fontFamily: "Manrope_600SemiBold", fontSize: 17 }}
>
Emily
</Text>
<View centerV>
<Text style={{ fontSize: 16, fontFamily: "Manrope_700Bold" }}>
{" "}
x/y chores completed
</Text>
</View>
</View>
<View style={styles.card} row spread>
<View style={styles.pfpBig} backgroundColor="#ebd825" />
<View width={"100%"} centerV centerH>
<Text> x/y chores completed</Text>
<View style={styles.card} row spread centerV>
<View
style={styles.pfpBig}
backgroundColor="#ebd825"
center
children={
<ImageBackground
source={require("../../../../assets/images/child-picture.png")}
style={{
height: 45,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
}
/>
<Text
color="#858585"
style={{ fontFamily: "Manrope_600SemiBold", fontSize: 17 }}
>
Austin
</Text>
<View row centerV centerH>
<Text style={{ fontSize: 16, fontFamily: "Manrope_700Bold" }}>
{" "}
x/y chores completed
</Text>
</View>
</View>
</View>
components/pages/todos/user-chores/UserChoresProgress.tsx
+40 -14
View File
@@ -6,15 +6,16 @@ import {
ButtonSize,
Modal,
Dialog,
TouchableOpacity,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { StyleSheet } from "react-native";
import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
import UserChart from "./UserChart";
import ProgressCard from "../ProgressCard";
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
import { ScrollView } from "react-native-gesture-handler";
import { PanViewDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
const UserChoresProgress = ({
setPageIndex,
@@ -29,29 +30,41 @@ const UserChoresProgress = ({
showsHorizontalScrollIndicator={false}
>
<TouchableOpacity onPress={() => setPageIndex(0)}>
<Text>Back to ToDos</Text>
<Text style={{ fontSize: 14 }}>Back to ToDos</Text>
</TouchableOpacity>
<View centerH>
<Text text50R>Your To Dos Progress Report</Text>
<View>
<Text style={{ fontFamily: "Manrope_700Bold", fontSize: 20 }}>
Your To Do's Progress Report
</Text>
</View>
<View row spread marginT-25 marginB-5>
<Text text70>Daily Goal</Text>
<Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
Daily Goal
</Text>
</View>
<ProgressCard />
<View row spread marginT-10 marginB-5>
<Text text70>Points Earned This Week</Text>
<View row spread marginT-15 marginB-8>
<Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
Points Earned This Week
</Text>
</View>
<View style={styles.card} paddingL-10>
<UserChart />
</View>
<View row spread marginT-20 marginB-8 centerV>
<Text text70>Total Reward Points</Text>
<Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
Total Reward Points
</Text>
<Button
size={ButtonSize.small}
label="Spend my points"
color="#50be0c"
backgroundColor="#ebf2e4"
onPress={() => setModalVisible(true)}
labelStyle={{
fontSize: 13,
fontFamily: "Manrope_400Regular",
}}
iconSource={() => (
<AntDesign
name="gift"
@@ -64,8 +77,12 @@ const UserChoresProgress = ({
</View>
<View style={styles.card}>
<View row centerV>
<Ionicons name="flower-outline" size={30} color="#8005eb" />
<Text text70 marginL-5>
<FireworksOrangeIcon color="#8005eb" />
<Text
marginL-8
text70
style={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
>
You have 1200 points saved!
</Text>
</View>
@@ -80,8 +97,8 @@ const UserChoresProgress = ({
}}
/>
<View row spread>
<Text>0</Text>
<Text>5000</Text>
<Text style={{ fontSize: 13, color: "#858585" }}>0</Text>
<Text style={{ fontSize: 13, color: "#858585" }}>5000</Text>
</View>
</View>
</ScrollView>
@@ -90,7 +107,7 @@ const UserChoresProgress = ({
onDismiss={() => setModalVisible(false)}
children={
<View style={styles.card} paddingH-35 paddingT-35>
<Text text60 center marginB-35>
<Text text60 center marginB-35 style={{fontFamily: 'Manrope_600SemiBold'}}>
How would you like to spend your points?
</Text>
<Button
@@ -99,6 +116,7 @@ const UserChoresProgress = ({
marginB-15
backgroundColor="#05a8b6"
size={ButtonSize.large}
labelStyle={styles.bigButtonText}
/>
<Button
label="Extra Screen Time - 100 pts"
@@ -106,6 +124,7 @@ const UserChoresProgress = ({
marginB-15
backgroundColor="#ea156c"
size={ButtonSize.large}
labelStyle={styles.bigButtonText}
/>
<Button
label="Movie Night - 50 pts"
@@ -113,6 +132,7 @@ const UserChoresProgress = ({
marginB-15
backgroundColor="#7305d4"
size={ButtonSize.large}
labelStyle={styles.bigButtonText}
/>
<Button
label="Ice Cream Treat - 25 pts"
@@ -120,9 +140,12 @@ const UserChoresProgress = ({
marginB-15
backgroundColor="#e28800"
size={ButtonSize.large}
labelStyle={styles.bigButtonText}
/>
<TouchableOpacity onPress={() => setModalVisible(false)}>
<Text text70 center color="#999999">Go back to my to dos</Text>
<Text text70 marginT-20 center color="#999999" style={{fontFamily: 'Manrope_500Medium'}} >
Go back to my to dos
</Text>
</TouchableOpacity>
</View>
}
@@ -147,6 +170,9 @@ const styles = StyleSheet.create({
borderRadius: 20,
padding: 20,
},
bigButtonText:{
fontFamily: 'Manrope_400Regular'
}
});
export default UserChoresProgress;
components/shared/DrawerButton.tsx
+3 -2
View File
@@ -15,7 +15,7 @@ const DrawerButton = (props: IDrawerButtonProps) => {
<Button
onPress={props.pressFunc}
label={props.title}
labelStyle={{ fontSize: 14 }}
labelStyle={styles.labelStyle}
color={props.color}
backgroundColor="white"
iconSource={() => (
@@ -43,8 +43,9 @@ export default DrawerButton;
const styles = StyleSheet.create({
iconContainer: {
width: '70%',
width: "70%",
aspectRatio: 1,
borderRadius: 50,
},
labelStyle: { fontSize: 14, fontFamily: "Manrope_600SemiBold" },
});
components/shared/HeaderTemplate.tsx
+18 -10
View File
@@ -1,6 +1,7 @@
import { View, Text } from "react-native-ui-lib";
import React from "react";
import { useAuthContext } from "@/contexts/AuthContext";
import { ImageBackground } from "react-native";
const HeaderTemplate = (props: {
message: string;
@@ -9,22 +10,29 @@ const HeaderTemplate = (props: {
link?: React.ReactNode;
}) => {
const { user, profileData } = useAuthContext();
const headerHeight:number = 80;
return (
<View row centerV marginV-15>
<View
backgroundColor="pink"
height={65}
width={65}
style={{ borderRadius: 22 }}
marginR-20
<ImageBackground
source={require("../../assets/images/profile-picture.png")}
style={{
height: headerHeight,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
marginRight: 20,
}}
/>
<View>
<View gap-3>
{props.isWelcome && (
<Text text70L>Welcome, {profileData?.firstName}!</Text>
<Text text70L style={{fontSize: 17, fontFamily: "Manrope_400Regular"}}>Welcome, {profileData?.firstName}!</Text>
)}
<Text text70BL>{props.message}</Text>
<Text text70B style={{ fontSize: 18, fontFamily: "Manrope_700Bold" }}>
{props.message}
</Text>
{props.children && <View>{props.children}</View>}
{props.link && <View>{props.link}</View>}
{props.link && <View marginT-8>{props.link}</View>}
</View>
</View>
);
components/shared/PointsSlider.tsx
+3 -3
View File
@@ -20,9 +20,9 @@ const PointsSlider = (props: {
maximumValue={100}
/>
<View row spread>
<Text>0</Text>
<Text>50</Text>
<Text>100</Text>
<Text style={{fontSize: 13, color: '#858585'}}>0</Text>
<Text style={{fontSize: 13, color: '#858585'}}>50</Text>
<Text style={{fontSize: 13, color: '#858585'}}>100</Text>
</View>
</View>
<View style={{ marginLeft: "auto" }}>
package.json
+3 -1
View File
@@ -27,6 +27,7 @@
"preset": "jest-expo"
},
"dependencies": {
"@expo-google-fonts/manrope": "^0.2.3",
"@expo/vector-icons": "^14.0.2",
"@react-native-community/blur": "^4.4.0",
"@react-native-community/datetimepicker": "^8.2.0",
@@ -40,6 +41,7 @@
"date-fns": "^3.6.0",
"debounce": "^2.1.1",
"expo": "~51.0.24",
"expo-app-loading": "^2.1.1",
"expo-auth-session": "^5.5.2",
"expo-barcode-scanner": "~13.0.1",
"expo-build-properties": "~0.12.4",
@@ -47,7 +49,7 @@
"expo-constants": "~16.0.2",
"expo-dev-client": "~4.0.27",
"expo-device": "~6.0.2",
"expo-font": "~12.0.9",
"expo-font": "~12.0.10",
"expo-image-picker": "~15.0.7",
"expo-linking": "~6.3.1",
"expo-notifications": "~0.28.18",
yarn.lock
+493 -459
View File
File diff suppressed because it is too large Load Diff