ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-08-25 13:49:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source 
# Conflicts:
#	app/(auth)/calendar/index.tsx
#	yarn.lock
This commit is contained in:
Milan Paunovic
2024-09-29 23:04:17 +02:00
parent 5922179584 e17dabe801
commit c726081b96
16 changed files with 967 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
components/pages/brain_dump/BrainDumpPage.tsx
View File

@ -13,27 +13,35 @@ const BrainDumpPage = () => {
return (
<View>
<ScrollView>
<HeaderTemplate message={"Welcome to your notes!"} isWelcome={false} />
<ScrollView
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
>
<View marginH-25>
<View style={styles.searchField} centerV>
<TextField
value={searchText}
onChangeText={(value) => {
setSearchText(value);
}}
leadingAccessory={
<Feather
name="search"
size={24}
color="#9b9b9b"
style={{ paddingRight: 10 }}
/>
}
placeholder="Search notes..."
/>
<HeaderTemplate
message={"Welcome to your notes!"}
isWelcome={false}
/>
<View>
<View style={styles.searchField} centerV>
<TextField
value={searchText}
onChangeText={(value) => {
setSearchText(value);
}}
leadingAccessory={
<Feather
name="search"
size={24}
color="#9b9b9b"
style={{ paddingRight: 10 }}
/>
}
placeholder="Search notes..."
/>
</View>
<DumpList searchText={searchText} />
</View>
<DumpList searchText={searchText} />
</View>
</ScrollView>
</View>

8
components/pages/brain_dump/DumpItem.tsx
View File

@ -1,7 +1,7 @@
import { View, Text } from "react-native-ui-lib";
import React, { useState } from "react";
import { IBrainDump } from "@/contexts/DumpContext";
import { TouchableOpacity } from "react-native-gesture-handler";
import { TouchableOpacity, TouchableWithoutFeedback } from "react-native-gesture-handler";
import MoveBrainDump from "./MoveBrainDump";
const BrainDumpItem = (props: { item: IBrainDump }) => {
@ -9,7 +9,7 @@ const BrainDumpItem = (props: { item: IBrainDump }) => {
return (
<View>
<TouchableOpacity onPress={() => setIsVisible(true)}>
<TouchableWithoutFeedback onPress={() => setIsVisible(true)}>
<View
backgroundColor="white"
marginV-5
@ -19,9 +19,9 @@ const BrainDumpItem = (props: { item: IBrainDump }) => {
<Text text70BL marginB-8>
{props.item.title}
</Text>
<Text text80>{props.item.description}</Text>
<Text text70>{props.item.description}</Text>
</View>
</TouchableOpacity>
</TouchableWithoutFeedback>
<MoveBrainDump item={props.item} isVisible={isVisible} setIsVisible={setIsVisible} />
</View>
);

245
components/pages/calendar/AddEventDialog.tsx
View File

@ -1,100 +1,163 @@
import React, {useState} from "react";
import {MaterialIcons} from "@expo/vector-icons";
import {Button, Card, Dialog, PanningProvider, Text, View} from "react-native-ui-lib";
import {TouchableOpacity} from "react-native";
import {ManuallyAddEventModal} from "@/components/pages/calendar/ManuallyAddEventModal";
import React, { useState } from "react";
import {
AntDesign,
Feather,
MaterialCommunityIcons,
MaterialIcons,
} from "@expo/vector-icons";
import {
Button,
ButtonSize,
Card,
Dialog,
PanningProvider,
Text,
View,
} from "react-native-ui-lib";
import { TouchableOpacity } from "react-native";
import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal";
import AddChore from "../todos/AddChore";
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);
const [show, setShow] = useState(false);
const [showManualInputModal, setShowManualInputModal] = useState(false);
const [choreDialogVisible, setChoreDialogVisible] = useState<boolean>(false);
const [showUploadDialog, setShowUploadDialog] = useState<boolean>(false);
const handleOpenManualInputModal = () => {
setShow(false);
setTimeout(() => {
setShowManualInputModal(true);
}, 500);
};
const handleOpenManualInputModal = () => {
setShow(false);
setTimeout(() => {
setShowManualInputModal(true);
}, 500);
};
return (
<>
const handleScanImageDialog = () => {
setShow(false);
setTimeout(() => {
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
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={{
position: "absolute",
bottom: 20,
right: 20,
height: 60,
width: 60,
borderRadius: 30,
backgroundColor: "#fff",
alignItems: 'center',
justifyContent: 'center',
}}
enableShadow
iconSource={() => <MaterialIcons name="add" size={30}/>}
onPress={() => setShow(true)}
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"
/>
)}
/>
<Dialog
visible={show}
onDismiss={() => setShow(false)}
panDirection={PanningProvider.Directions.DOWN}
center
>
<Card style={{padding: 20, justifyContent: 'center', alignItems: "center"}}>
<Text text60>Create a new event</Text>
<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"
/>
)}
/>
<View style={{marginTop: 20, alignItems: 'center'}}>
<Button
style={{
marginBottom: 10,
backgroundColor: "#007bff",
}}
onPress={handleOpenManualInputModal}
>
<Text style={{color: "white"}}>Create New</Text>
</Button>
<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>
<Button
style={{
marginBottom: 10,
backgroundColor: "#007bff",
opacity: 0.5
}}
disabled
>
<Text style={{color: "white"}}>Event</Text>
</Button>
<Button
style={{
marginBottom: 10,
backgroundColor: "#007bff",
opacity: 0.5
}}
disabled
>
<Text style={{color: "white"}}>To Do</Text>
</Button>
<Button
style={{
marginBottom: 10,
backgroundColor: "#007bff",
opacity: 0.5
}}
disabled
>
<Text style={{color: "white"}}>Upload Image</Text>
</Button>
</View>
<TouchableOpacity onPress={() => setShow(false)}>
<Text style={{marginTop: 20, color: "#007bff"}}>Go back</Text>
</TouchableOpacity>
</Card>
</Dialog>
<ManuallyAddEventModal show={showManualInputModal} close={() => setShowManualInputModal(false)}/>
</>
)
}
<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>
);
};

74
components/pages/calendar/CalendarViewSwitch.tsx Normal file
View File

@ -0,0 +1,74 @@
import { View, Text, Button, TouchableOpacity } from "react-native-ui-lib";
import React, { useState } from "react";
import { MaterialIcons } from "@expo/vector-icons";
import { StyleSheet } from "react-native";
const CalendarViewSwitch = () => {
const [show, setShow] = useState<boolean>(false);
const [calView, setCalView] = useState<boolean>(false);
return (
<View
row
spread
style={{
position: "absolute",
bottom: 20,
left: 20,
borderRadius: 30,
backgroundColor: "white",
alignItems: "center",
justifyContent: "center",
// iOS shadow
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
// Android shadow (elevation)
elevation: 6,
}}
centerV
>
<TouchableOpacity onPress={() => setCalView(true)}>
<View
centerV
centerH
height={40}
paddingH-15
style={calView ? styles.switchBtnActive : styles.switchBtn}
>
<Text color={calView ? "white" : "#a1a1a1"} text70R>
Family View
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => setCalView(false)}>
<View
centerV
centerH
height={40}
paddingH-15
style={!calView ? styles.switchBtnActive : styles.switchBtn}
>
<Text color={!calView ? "white" : "#a1a1a1"} text70R>
My View
</Text>
</View>
</TouchableOpacity>
</View>
);
};
export default CalendarViewSwitch;
const styles = StyleSheet.create({
switchBtnActive: {
backgroundColor: "#a1a1a1",
borderRadius: 50,
},
switchBtn: {
backgroundColor: "white",
borderRadius: 50,
},
});

178
components/pages/calendar/UploadImageDialog.tsx Normal file
View File

@ -0,0 +1,178 @@
import {
View,
Text,
TouchableOpacity,
Image,
Button,
ButtonSize,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { Dialog, PanningProvider, Card } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { Feather, MaterialIcons } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker";
interface IUploadDialogProps {
show: boolean;
setShow: (value: boolean) => void;
}
const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
const [selectedImage, setSelectedImage] = useState<string | null>(null);
const [imageTitle, setImageTitle] = useState<string | null>(null);
const handleImagePick = async () => {
const permissionResult =
await ImagePicker.requestMediaLibraryPermissionsAsync();
if (permissionResult.granted === false) {
alert("Permission to access camera roll is required!");
return;
}
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
// Check if the user canceled the image picker
if (!result.canceled) {
setSelectedImage(result.assets[0].uri);
setImageTitle(result.assets[0].fileName || "Untitled");
}
};
return (
<Dialog
visible={uploadDialogProps.show}
onDismiss={() => uploadDialogProps.setShow(false)}
panDirection={PanningProvider.Directions.DOWN}
center
>
<Card
style={{
paddingHorizontal: 40,
paddingTop: 20,
paddingBottom: 10,
justifyContent: "center",
alignItems: "center",
}}
>
<View centerH>
<Text text60 marginB-20>
Upload an Image
</Text>
{!selectedImage && (
<TouchableOpacity onPress={handleImagePick}>
<View
style={styles.uploadImgBox}
centerV
centerH
gap-8
marginB-20
>
<MaterialIcons
name="add-photo-alternate"
size={30}
color="#fd1775"
/>
<Text color="#fd1775" text70>
Click here to upload an image
</Text>
</View>
</TouchableOpacity>
)}
{selectedImage && (
<>
<View style={styles.imageContainer} row gap-15>
<Image
source={{ uri: selectedImage }}
style={styles.selectedImage}
/>
<View style={styles.imageInfo}>
<Text style={styles.imageTitle}>{imageTitle}</Text>
</View>
<TouchableOpacity
onPress={() => {
setSelectedImage(null);
setImageTitle("");
}}
>
<Feather
name="trash"
size={22}
color="#919191"
/>
</TouchableOpacity>
</View>
<Button
style={{
marginBottom: 10,
marginTop: 20,
backgroundColor: "#ea156c",
justifyContent: "center",
paddingVertical: 13,
alignItems: "center",
}}
label="Upload Image"
onPress={() => {}}
iconSource={() => (
<Feather
name="camera"
size={21}
style={{ marginRight: 7 }}
color="white"
/>
)}
/>
</>
)}
<TouchableOpacity onPress={() => uploadDialogProps.setShow(false)}>
<Text text80 color="#999999">
Go back
</Text>
</TouchableOpacity>
</View>
</Card>
</Dialog>
);
};
export default UploadImageDialog;
const styles = StyleSheet.create({
uploadImgBox: {
backgroundColor: "#ffe8f2",
width: "100%",
aspectRatio: 1.8,
borderRadius: 20,
borderWidth: 2,
borderColor: "#fd1775",
borderStyle: "dashed",
},
selectedImage: {
width: 60,
aspectRatio: 1,
borderRadius: 10,
},
imageContainer: {
alignItems: "center",
width: "80%",
borderWidth: 1,
borderColor: "#d9d9d9",
padding: 10,
borderRadius: 13,
},
imageInfo: {
marginLeft: 10,
},
imageTitle: {
fontSize: 16,
color: "#333",
},
});

173
components/pages/grocery/GroceryItem.tsx
View File

@ -4,6 +4,7 @@ import {
Button,
TouchableOpacity,
Checkbox,
ButtonSize,
} from "react-native-ui-lib";
import React, { useEffect, useState } from "react";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
@ -15,9 +16,8 @@ import {
useGroceryContext,
} from "@/contexts/GroceryContext";
import EditGroceryFrequency from "./EditGroceryFrequency";
import { TextInput } from "react-native";
import EditGroceryItem from "./EditGroceryItem";
import { TouchableWithoutFeedback } from "react-native-gesture-handler";
import { StyleSheet } from "react-native";
const GroceryItem = ({
item,
@ -32,7 +32,9 @@ const GroceryItem = ({
const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);
const [newTitle, setNewTitle] = useState<string>("");
const [category, setCategory] = useState<GroceryCategory>(GroceryCategory.None);
const [category, setCategory] = useState<GroceryCategory>(
GroceryCategory.None
);
const handleTitleChange = (newTitle: string) => {
updateGroceryItem(item.id, { title: newTitle });
@ -47,93 +49,124 @@ const GroceryItem = ({
}, []);
return (
<ListItem
<View
key={item.id}
style={{ borderRadius: 50, marginVertical: 5, height: 55 }}
style={{ borderRadius: 18, marginVertical: 5 }}
backgroundColor="white"
centerV
padding-0
onPress={() => {
setOpenFreqEdit(true);
}}
>
<EditGroceryFrequency
visible={openFreqEdit}
key={item.id}
item={item}
onClose={() => {
setOpenFreqEdit(false);
<ListItem
onPress={() => {
setOpenFreqEdit(true);
}}
/>
<ListItem.Part left containerStyle={{ flex: 1, paddingStart: 20 }}>
{!isEditingTitle ? (
<View>
<TouchableOpacity onPress={() => setIsEditingTitle(true)}>
<Text text70BL>{item.title}</Text>
</TouchableOpacity>
</View>
) : (
>
<EditGroceryFrequency
visible={openFreqEdit}
key={item.id}
item={item}
onClose={() => {
setOpenFreqEdit(false);
}}
/>
<ListItem.Part left containerStyle={{ flex: 1, paddingStart: 20 }}>
{!isEditingTitle ? (
<View>
<TouchableOpacity onPress={() => setIsEditingTitle(true)}>
<Text text70BL>{item.title}</Text>
</TouchableOpacity>
</View>
) : (
<EditGroceryItem
editGrocery={{
id: item.id,
title: newTitle,
setTitle: setNewTitle,
category:category,
category: category,
updateCategory: updateGroceryItem,
closeEdit: setIsEditingTitle,
setCategory: setCategory,
}}
/>
)}
</ListItem.Part>
<ListItem.Part right containerStyle={{ paddingEnd: 20 }}>
{!item.approved ? (
<View row>
<Button
padding-0
children={
<AntDesign
name="check"
size={24}
style={{
color: item.approved ? "green" : "#aaaaaa",
}}
/>
)}
</ListItem.Part>
<ListItem.Part right containerStyle={{ paddingEnd: item.approved ? 20 : 5 }}>
{!item.approved ? (
<View row >
<Button
padding-0
children={
<AntDesign
name="check"
size={24}
style={{
color: item.approved ? "green" : "#aaaaaa",
}}
/>
}
backgroundColor="transparent"
size={Button.sizes.small}
onPress={() => {
handleItemApproved(item.id, { approved: true });
}}
/>
<Button
padding-0
children={
<AntDesign
name="close"
size={24}
style={{ color: item.approved ? "#aaaaaa" : "red" }}
/>
}
backgroundColor="transparent"
size={Button.sizes.small}
onPress={() => {
handleItemApproved(item.id, { approved: false });
}}
/>
</View>
) : (
<Checkbox
value={item.bought}
style={styles.checkbox}
onValueChange={() =>
updateGroceryItem(item.id, { bought: !item.bought })
}
backgroundColor="transparent"
size={Button.sizes.small}
onPress={() => {
handleItemApproved(item.id, { approved: true });
}}
/>
<Button
padding-0
children={
<AntDesign
name="close"
size={24}
style={{ color: item.approved ? "#aaaaaa" : "red" }}
/>
}
backgroundColor="transparent"
size={Button.sizes.small}
onPress={() => {
handleItemApproved(item.id, { approved: false });
}}
/>
)}
</ListItem.Part>
</ListItem>
{!item.approved && (
<View>
<View centerH>
<View height={1} backgroundColor="#e7e7e7" width={"90%"} />
</View>
) : (
<Checkbox
value={item.bought}
color={"#f58749"}
onValueChange={() =>
updateGroceryItem(item.id, { bought: !item.bought })
}
/>
)}
</ListItem.Part>
</ListItem>
<View paddingL-10 paddingV-15 flexS row centerV>
<View
style={{
width: 25,
aspectRatio: 1,
borderRadius: 50,
backgroundColor: "red",
marginHorizontal: 10,
}}
></View>
<Text color="#858585" text70>Requested by Austin</Text>
</View>
</View>
)}
</View>
);
};
const styles = StyleSheet.create({
checkbox:{
borderRadius: 50,
borderWidth: 1,
color: "#bfbfbf",
borderColor: "#bfbfbf",
}
})
export default GroceryItem;

2
components/pages/grocery/GroceryList.tsx
View File

@ -83,7 +83,7 @@ const GroceryList = () => {
message={"Welcome to your grocery list"}
isWelcome={false}
>
<View row spread>
<View row spread gap-5>
<View
backgroundColor="#e2eed8"
padding-8

2
components/pages/settings/SettingsPage.tsx
View File

@ -63,7 +63,7 @@ const SettingsPage = () => {
<Button
backgroundColor="white"
style={styles.mainBtn}
label="Chore reward settings"
label="To Do reward settings"
color="#ff9900"
iconSource={() => (
<Octicons

198
components/pages/todos/AddChore.tsx
View File

@ -21,27 +21,13 @@ import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/pannin
import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
import { setDate } from "date-fns";
import PointsSlider from "@/components/shared/PointsSlider";
import AddChoreDialog from "./AddChoreDialog";
const AddChore = () => {
const { addToDo, toDos } = useToDosContext();
const [isVisible, setIsVisible] = useState<boolean>(false);
const [newTitle, setNewTitle] = useState<string>("");
const [points, setPoints] = useState<number>(10);
const [choreDate, setChoreDate] = useState<Date | null>(new Date());
const [rotate, setRotate] = useState<boolean>(false);
const [repeatType, setRepeatType] = useState<string>("Every week");
const handleChange = (text: string) => {
const numericValue = parseInt(text, 10);
if (!isNaN(numericValue) && numericValue >= 0 && numericValue <= 100) {
setPoints(numericValue);
} else if (text === "") {
setPoints(0);
}
};
return (
<LinearGradient
@ -58,187 +44,11 @@ const AddChore = () => {
>
<AntDesign name="plus" size={24} color="white" />
<Text white text60R marginL-10>
Create new chore
Add to do
</Text>
</Button>
</View>
<Dialog
bottom={true}
height={"90%"}
panDirection={PanningDirectionsEnum.DOWN}
onDismiss={() => setIsVisible(false)}
containerStyle={{
borderRadius: 10,
backgroundColor: "white",
width: "100%",
alignSelf: "stretch",
padding: 0,
paddingTop: 3,
margin: 0,
}}
visible={isVisible}
>
<View row spread>
<Button
color="#05a8b6"
style={styles.topBtn}
label="Cancel"
onPress={() => {
setIsVisible(false);
}}
/>
<Button
style={styles.topBtn}
iconSource={() => (
<Feather name="chevron-down" size={24} color="black" />
)}
onPress={() => {
setIsVisible(false);
}}
/>
<Button
color="#05a8b6"
style={styles.topBtn}
label="Save"
onPress={() => {
addToDo({
id: 0,
title: newTitle,
done: false,
date: choreDate,
points: points,
rotate: rotate,
repeatType: repeatType,
});
setIsVisible(false);
console.log(toDos);
}}
/>
</View>
<TextField
placeholder="Add a To Do"
value={newTitle}
onChangeText={(text) => {
setNewTitle(text);
}}
placeholderTextColor="#2d2d30"
text60R
marginT-15
marginL-30
/>
<View style={styles.divider} marginT-8 />
<View marginL-30 centerV>
<View row marginB-10>
{choreDate && (
<View row centerV>
<Feather name="calendar" size={25} color="#919191" />
<DateTimePicker
value={choreDate}
text70
marginL-8
onChange={(date) => {
setChoreDate(date);
}}
/>
</View>
)}
</View>
<View row centerV>
<AntDesign name="clockcircleo" size={24} color="#919191" />
<Picker
marginL-8
placeholder="Select Repeat Type"
value={repeatType}
onChange={(value) => {
if (value) {
if (value.toString() == "None") {
setChoreDate(null);
setRepeatType("None");
} else {
setRepeatType(value.toString());
setChoreDate(new Date());
}
}
}}
topBarProps={{ title: "Repeat" }}
style={{ marginVertical: 5 }}
>
{repeatOptions.map((option) => (
<Picker.Item
key={option.value}
label={option.label}
value={option.value}
/>
))}
</Picker>
</View>
</View>
<View style={styles.divider} />
<View marginH-30 marginB-10 row centerV>
<Ionicons name="person-circle-outline" size={28} color="#919191" />
<Text text70R marginL-10>
Assignees
</Text>
<Button
size={ButtonSize.small}
paddingH-8
iconSource={() => (
<Ionicons name="add-outline" size={20} color="#ea156c" />
)}
style={{
marginLeft: "auto",
borderRadius: 8,
backgroundColor: "#ffe8f1",
borderColor: "#ea156c",
borderWidth: 1,
}}
color="#ea156c"
label="Assign"
/>
</View>
<View row marginH-13 marginT-13>
<View
marginL-30
style={{
aspectRatio: 1,
width: 50,
backgroundColor: "red",
borderRadius: 50,
}}
/>
<View
marginL-30
style={{
aspectRatio: 1,
width: 50,
backgroundColor: "red",
borderRadius: 50,
}}
/>
</View>
<View row centerV style={styles.rotateSwitch}>
<Text text80>Take Turns</Text>
<Switch
onColor={"#ea156c"}
value={rotate}
marginL-10
onValueChange={(value) => setRotate(value)}
/>
</View>
<View style={styles.divider} />
<View marginH-30 marginB-15 row centerV>
<Ionicons name="gift-outline" size={25} color="#919191" />
<Text text70BL marginL-10>
Reward Points
</Text>
</View>
<PointsSlider
points={points}
setPoints={setPoints}
handleChange={handleChange}
/>
</Dialog>
<AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible} />
</LinearGradient>
);
};

251
components/pages/todos/AddChoreDialog.tsx Normal file
View File

@ -0,0 +1,251 @@
import { View, Text, Button, Switch } from "react-native-ui-lib";
import React, { useState } from "react";
import PointsSlider from "@/components/shared/PointsSlider";
import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
import { Feather, AntDesign, Ionicons } from "@expo/vector-icons";
import {
Dialog,
TextField,
DateTimePicker,
Picker,
ButtonSize,
} from "react-native-ui-lib";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import { StyleSheet } from "react-native";
interface IAddChoreDialog {
isVisible: boolean;
setIsVisible: (value: boolean) => void;
}
const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
const { addToDo, toDos } = useToDosContext();
const [newTitle, setNewTitle] = useState<string>("");
const [points, setPoints] = useState<number>(10);
const [choreDate, setChoreDate] = useState<Date | null>(new Date());
const [rotate, setRotate] = useState<boolean>(false);
const [repeatType, setRepeatType] = useState<string>("Every week");
const handleChange = (text: string) => {
const numericValue = parseInt(text, 10);
if (!isNaN(numericValue) && numericValue >= 0 && numericValue <= 100) {
setPoints(numericValue);
} else if (text === "") {
setPoints(0);
}
};
return (
<Dialog
bottom={true}
height={"90%"}
panDirection={PanningDirectionsEnum.DOWN}
onDismiss={() => addChoreDialogProps.setIsVisible(false)}
containerStyle={{
borderRadius: 10,
backgroundColor: "white",
width: "100%",
alignSelf: "stretch",
padding: 0,
paddingTop: 3,
margin: 0,
}}
visible={addChoreDialogProps.isVisible}
>
<View row spread>
<Button
color="#05a8b6"
style={styles.topBtn}
label="Cancel"
onPress={() => {
addChoreDialogProps.setIsVisible(false);
}}
/>
<Button
style={styles.topBtn}
iconSource={() => (
<Feather name="chevron-down" size={24} color="black" />
)}
onPress={() => {
addChoreDialogProps.setIsVisible(false);
}}
/>
<Button
color="#05a8b6"
style={styles.topBtn}
label="Save"
onPress={() => {
try {
addToDo({
id: 0,
title: newTitle,
done: false,
date: choreDate,
points: points,
rotate: rotate,
repeatType: repeatType,
});
addChoreDialogProps.setIsVisible(false);
console.log(toDos);
} catch (error) {
console.error(error)
}
}}
/>
</View>
<TextField
placeholder="Add a To Do"
value={newTitle}
onChangeText={(text) => {
setNewTitle(text);
}}
placeholderTextColor="#2d2d30"
text60R
marginT-15
marginL-30
/>
<View style={styles.divider} marginT-8 />
<View marginL-30 centerV>
<View row marginB-10>
{choreDate && (
<View row centerV>
<Feather name="calendar" size={25} color="#919191" />
<DateTimePicker
value={choreDate}
text70
marginL-8
onChange={(date) => {
setChoreDate(date);
}}
/>
</View>
)}
</View>
<View row centerV>
<AntDesign name="clockcircleo" size={24} color="#919191" />
<Picker
marginL-8
placeholder="Select Repeat Type"
value={repeatType}
onChange={(value) => {
if (value) {
if (value.toString() == "None") {
setChoreDate(null);
setRepeatType("None");
} else {
setRepeatType(value.toString());
setChoreDate(new Date());
}
}
}}
topBarProps={{ title: "Repeat" }}
style={{ marginVertical: 5 }}
>
{repeatOptions.map((option) => (
<Picker.Item
key={option.value}
label={option.label}
value={option.value}
/>
))}
</Picker>
</View>
</View>
<View style={styles.divider} />
<View marginH-30 marginB-10 row centerV>
<Ionicons name="person-circle-outline" size={28} color="#919191" />
<Text text70R marginL-10>
Assignees
</Text>
<Button
size={ButtonSize.small}
paddingH-8
iconSource={() => (
<Ionicons name="add-outline" size={20} color="#ea156c" />
)}
style={{
marginLeft: "auto",
borderRadius: 8,
backgroundColor: "#ffe8f1",
borderColor: "#ea156c",
borderWidth: 1,
}}
color="#ea156c"
label="Assign"
/>
</View>
<View row marginH-13 marginT-13>
<View
marginL-30
style={{
aspectRatio: 1,
width: 50,
backgroundColor: "red",
borderRadius: 50,
}}
/>
<View
marginL-30
style={{
aspectRatio: 1,
width: 50,
backgroundColor: "red",
borderRadius: 50,
}}
/>
</View>
<View row centerV style={styles.rotateSwitch}>
<Text text80>Take Turns</Text>
<Switch
onColor={"#ea156c"}
value={rotate}
marginL-10
onValueChange={(value) => setRotate(value)}
/>
</View>
<View style={styles.divider} />
<View marginH-30 marginB-15 row centerV>
<Ionicons name="gift-outline" size={25} color="#919191" />
<Text text70BL marginL-10>
Reward Points
</Text>
</View>
<PointsSlider
points={points}
setPoints={setPoints}
handleChange={handleChange}
/>
</Dialog>
);
};
export default AddChoreDialog;
const styles = StyleSheet.create({
divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
gradient: {
height: "25%",
position: "absolute",
bottom: 0,
width: "100%",
},
buttonContainer: {
position: "absolute",
bottom: 25,
width: "100%",
},
button: {
backgroundColor: "rgb(253, 23, 117)",
paddingVertical: 20,
},
topBtn: {
backgroundColor: "white",
color: "#05a8b6",
},
rotateSwitch: {
marginLeft: 35,
marginBottom: 10,
marginTop: 25,
},
});

25
components/shared/DrawerButton.tsx
View File

@ -1,5 +1,7 @@
import React from "react";
import { StyleSheet } from "react-native";
import { Button, View, Text } from "react-native-ui-lib";
interface IDrawerButtonProps {
bgColor: string;
color: string;
@ -7,6 +9,7 @@ interface IDrawerButtonProps {
icon: React.ReactNode;
title: string;
}
const DrawerButton = (props: IDrawerButtonProps) => {
return (
<Button
@ -18,9 +21,7 @@ const DrawerButton = (props: IDrawerButtonProps) => {
iconSource={() => (
<View
backgroundColor={props.bgColor}
width={60}
height={60}
style={{ borderRadius: 50 }}
style={styles.iconContainer}
centerV
centerH
>
@ -34,18 +35,16 @@ const DrawerButton = (props: IDrawerButtonProps) => {
flexDirection: "column",
justifyContent: "space-between",
paddingVertical: 15,
// Shadow for iOS
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 10, // This will create a blurry shadow
// Shadow for Android
elevation: 1,
}}
></Button>
);
};
export default DrawerButton;
const styles = StyleSheet.create({
iconContainer: {
width: '70%',
aspectRatio: 1,
borderRadius: 50,
},
});

2
components/shared/HeaderTemplate.tsx
View File

@ -10,7 +10,7 @@ const HeaderTemplate = (props: {
}) => {
const { user, profileData } = useAuthContext();
return (
<View row centerV padding-25>
<View row centerV marginV-15>
<View
backgroundColor="pink"
height={65}