mirror of
https://github.com/urosran/cally.git
synced 2025-07-15 09:45:20 +00:00
changes to groceries, todos
This commit is contained in:
ivic00
@ -3,16 +3,12 @@ import GroceryList from "@/components/pages/grocery/GroceryList";
|
||||
import AddGroceryItem from "@/components/pages/grocery/AddGroceryItem";
|
||||
import { GroceryProvider } from "@/contexts/GroceryContext";
|
||||
import React from "react";
|
||||
import HeaderTemplate from "@/components/shared/HeaderTemplate";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
import GroceryWrapper from "@/components/pages/grocery/GroceryWrapper";
|
||||
|
||||
export default function Screen() {
|
||||
return (
|
||||
<GroceryProvider>
|
||||
<ScrollView>
|
||||
<GroceryList />
|
||||
<AddGroceryItem />
|
||||
</ScrollView>
|
||||
<GroceryWrapper />
|
||||
</GroceryProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import AddChore from "@/components/pages/todos/AddChore";
|
||||
import ProgressCard from "@/components/pages/todos/ProgressCard";
|
||||
import ToDoItem from "@/components/pages/todos/ToDoItem";
|
||||
import ToDosList from "@/components/pages/todos/ToDosList";
|
||||
import HeaderTemplate from "@/components/shared/HeaderTemplate";
|
||||
@ -13,7 +14,8 @@ export default function Screen() {
|
||||
<ToDosContextProvider>
|
||||
<ScrollView>
|
||||
<View backgroundColor="#f9f8f7">
|
||||
<HeaderTemplate message="Here are your To Do's" />
|
||||
<HeaderTemplate message="Here are your To Do's" isWelcome={true} />
|
||||
<ProgressCard />
|
||||
<ToDosList />
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
@ -1,15 +1,22 @@
|
||||
import React from "react";
|
||||
import { View, Text, TouchableOpacity } from "react-native-ui-lib";
|
||||
import { GroceryCategory } from "@/contexts/GroceryContext";
|
||||
import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
|
||||
const CategoryDropdown = () => {
|
||||
const CategoryDropdown = (props: {
|
||||
setSelectedCategory: (category: GroceryCategory) => void;
|
||||
}) => {
|
||||
const groceryCategories = Object.values(GroceryCategory);
|
||||
|
||||
return (
|
||||
<ScrollView height={100}>
|
||||
<View height={100}>
|
||||
<ScrollView>
|
||||
{groceryCategories.map((category) => (
|
||||
<TouchableOpacity onPress={() => {}}>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
props.setSelectedCategory(category);
|
||||
}}
|
||||
>
|
||||
<View
|
||||
key={category}
|
||||
style={{
|
||||
@ -21,6 +28,7 @@ const CategoryDropdown = () => {
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
28
components/pages/grocery/EditGroceryItem.tsx
Normal file
28
components/pages/grocery/EditGroceryItem.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { View, Text } from 'react-native'
|
||||
import React from 'react'
|
||||
import { TextField } from 'react-native-ui-lib'
|
||||
import CategoryDropdown from './CategoryDropdown'
|
||||
import { GroceryCategory } from '@/contexts/GroceryContext'
|
||||
|
||||
const EditGroceryItem = (props: {title: string, setTitle: (value: string) => void, setCategory: (category: GroceryCategory) => void}) => {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
width: "100%",
|
||||
borderRadius: 25,
|
||||
padding: 15,
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
placeholder="Grocery"
|
||||
value={props.title}
|
||||
onChangeText={(value) => props.setTitle(value)}
|
||||
maxLength={25}
|
||||
/>
|
||||
<CategoryDropdown setSelectedCategory={props.setCategory} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditGroceryItem
|
||||
@ -9,9 +9,14 @@ import React, { useEffect, useState } from "react";
|
||||
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
|
||||
import { MaterialCommunityIcons, AntDesign } from "@expo/vector-icons";
|
||||
import { ListItem } from "react-native-ui-lib";
|
||||
import { IGrocery, useGroceryContext } from "@/contexts/GroceryContext";
|
||||
import {
|
||||
GroceryCategory,
|
||||
IGrocery,
|
||||
useGroceryContext,
|
||||
} from "@/contexts/GroceryContext";
|
||||
import EditGroceryFrequency from "./EditGroceryFrequency";
|
||||
import { TextInput } from "react-native";
|
||||
import EditGroceryItem from "./EditGroceryItem";
|
||||
|
||||
const GroceryItem = ({
|
||||
item,
|
||||
@ -20,8 +25,7 @@ const GroceryItem = ({
|
||||
item: IGrocery;
|
||||
handleItemApproved: (id: number, changes: Partial<IGrocery>) => void;
|
||||
}) => {
|
||||
const { updateGroceryItem, groceries } =
|
||||
useGroceryContext();
|
||||
const { updateGroceryItem, groceries } = useGroceryContext();
|
||||
|
||||
const { profileType } = useAuthContext();
|
||||
const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
|
||||
@ -32,13 +36,17 @@ const GroceryItem = ({
|
||||
updateGroceryItem(item.id, { title: newTitle });
|
||||
};
|
||||
|
||||
const handleCategoryChange = (newCategory: GroceryCategory) => {
|
||||
updateGroceryItem(item.id, { category: newCategory });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setNewTitle(item.title);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ListItem
|
||||
style={{borderRadius: 50, marginVertical: 5, height: 55}}
|
||||
style={{ borderRadius: 50, marginVertical: 5, height: 55 }}
|
||||
backgroundColor="white"
|
||||
centerV
|
||||
padding-0
|
||||
@ -69,12 +77,12 @@ const GroceryItem = ({
|
||||
/>
|
||||
}
|
||||
/>*/}
|
||||
<View>
|
||||
{!isEditingTitle ? (
|
||||
<View>
|
||||
<TouchableOpacity onPress={() => setIsEditingTitle(true)}>
|
||||
<Text text70BL>{item.title}</Text>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
{ /*
|
||||
<TextInput
|
||||
value={item.title}
|
||||
onChangeText={handleTitleChange}
|
||||
@ -90,8 +98,15 @@ const GroceryItem = ({
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
*/}
|
||||
</View>
|
||||
) : (
|
||||
<EditGroceryItem
|
||||
title={item.title}
|
||||
setTitle={handleTitleChange}
|
||||
setCategory={handleCategoryChange}
|
||||
/>
|
||||
)}
|
||||
</ListItem.Part>
|
||||
<ListItem.Part right containerStyle={{ paddingEnd: 20 }}>
|
||||
{!item.approved ? (
|
||||
|
||||
@ -1,38 +1,69 @@
|
||||
import { FlatList } from "react-native";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
ListItem,
|
||||
Button,
|
||||
TextField,
|
||||
Picker,
|
||||
} from "react-native-ui-lib";
|
||||
import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
|
||||
import { useAuthContext } from "@/contexts/AuthContext";
|
||||
import AntDesign from "@expo/vector-icons/AntDesign";
|
||||
import AddGroceryItem from "./AddGroceryItem";
|
||||
import { View, Text, ListItem, Button, TextField } from "react-native-ui-lib";
|
||||
import GroceryItem from "./GroceryItem";
|
||||
import {
|
||||
GroceryCategory,
|
||||
IGrocery,
|
||||
GroceryCategory,
|
||||
GroceryFrequency,
|
||||
useGroceryContext,
|
||||
} from "@/contexts/GroceryContext";
|
||||
import HeaderTemplate from "@/components/shared/HeaderTemplate";
|
||||
import CategoryDropdown from "./CategoryDropdown";
|
||||
import { MaterialIcons } from "@expo/vector-icons";
|
||||
import EditGroceryItem from "./EditGroceryItem";
|
||||
|
||||
const GroceryList = () => {
|
||||
const { groceries, updateGroceryItem, isAddingGrocery } = useGroceryContext();
|
||||
const {
|
||||
groceries,
|
||||
updateGroceryItem,
|
||||
isAddingGrocery,
|
||||
setIsAddingGrocery,
|
||||
addGrocery,
|
||||
} = useGroceryContext();
|
||||
const [approvedGroceries, setapprovedGroceries] = useState<IGrocery[]>(
|
||||
groceries.filter((item) => item.approved == true)
|
||||
groceries.filter((item) => item.approved === true)
|
||||
);
|
||||
const [pendingGroceries, setPendingGroceries] = useState<IGrocery[]>(
|
||||
groceries.filter((item) => item.approved != true)
|
||||
groceries.filter((item) => item.approved !== true)
|
||||
);
|
||||
const [category, setCategory] = useState<GroceryCategory>(
|
||||
GroceryCategory.Bakery
|
||||
);
|
||||
const [title, setTitle] = useState<string>("");
|
||||
|
||||
// Group approved groceries by category
|
||||
const approvedGroceriesByCategory = approvedGroceries.reduce(
|
||||
(groups: any, item: IGrocery) => {
|
||||
const category = item.category || "Uncategorized";
|
||||
if (!groups[category]) {
|
||||
groups[category] = [];
|
||||
}
|
||||
groups[category].push(item);
|
||||
return groups;
|
||||
},
|
||||
{}
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setapprovedGroceries(groceries.filter((item) => item.approved == true));
|
||||
setPendingGroceries(groceries.filter((item) => item.approved != true));
|
||||
if (title?.length > 2 && title?.length <= 25) {
|
||||
addGrocery({
|
||||
id: 0,
|
||||
title: title,
|
||||
category: category,
|
||||
approved: false,
|
||||
recurring: false,
|
||||
frequency: GroceryFrequency.Never,
|
||||
bought: false,
|
||||
});
|
||||
|
||||
setIsAddingGrocery(false);
|
||||
}
|
||||
}, [category]);
|
||||
|
||||
useEffect(() => {
|
||||
setapprovedGroceries(groceries.filter((item) => item.approved === true));
|
||||
setPendingGroceries(groceries.filter((item) => item.approved !== true));
|
||||
}, [groceries]);
|
||||
|
||||
return (
|
||||
@ -49,7 +80,7 @@ const GroceryList = () => {
|
||||
>
|
||||
<Text text70BL color="#46a80a">
|
||||
{approvedGroceries.length} list{" "}
|
||||
{approvedGroceries.length == 1 ? (
|
||||
{approvedGroceries.length === 1 ? (
|
||||
<Text text70BL color="#46a80a">
|
||||
item
|
||||
</Text>
|
||||
@ -69,6 +100,13 @@ const GroceryList = () => {
|
||||
{pendingGroceries.length} pending
|
||||
</Text>
|
||||
</View>
|
||||
<Button
|
||||
backgroundColor='transparent'
|
||||
paddingH-10
|
||||
iconSource={() => (
|
||||
<MaterialIcons name="person-add-alt" size={24} color="gray" />
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
</HeaderTemplate>
|
||||
|
||||
@ -119,25 +157,36 @@ const GroceryList = () => {
|
||||
</View>
|
||||
</View>
|
||||
{isAddingGrocery && (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
width: "100%",
|
||||
borderRadius: 25,
|
||||
padding: 15,
|
||||
}}
|
||||
>
|
||||
<TextField placeholder="Grocery" maxLength={25} />
|
||||
<CategoryDropdown />
|
||||
</View>
|
||||
<EditGroceryItem title={title} setTitle={setTitle} setCategory={setCategory} />
|
||||
)}
|
||||
|
||||
{/* Render Approved Groceries Grouped by Category */}
|
||||
{approvedGroceries.length > 0 ? (
|
||||
<FlatList
|
||||
data={approvedGroceries}
|
||||
renderItem={({ item }) => (
|
||||
<GroceryItem item={item} handleItemApproved={updateGroceryItem} />
|
||||
data={Object.keys(approvedGroceriesByCategory)}
|
||||
renderItem={({ item: category }) => (
|
||||
<View key={category}>
|
||||
{/* Render Category Header */}
|
||||
<Text
|
||||
text70M
|
||||
style={{ marginVertical: 10, paddingHorizontal: 15 }}
|
||||
color="#666"
|
||||
>
|
||||
{category}
|
||||
</Text>
|
||||
{/* Render Grocery Items for this Category */}
|
||||
{approvedGroceriesByCategory[category].map(
|
||||
(grocery: IGrocery) => (
|
||||
<GroceryItem
|
||||
key={grocery.id}
|
||||
item={grocery}
|
||||
handleItemApproved={updateGroceryItem}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
keyExtractor={(item) => item.id.toString()}
|
||||
</View>
|
||||
)}
|
||||
keyExtractor={(category) => category}
|
||||
/>
|
||||
) : (
|
||||
<Text>No approved items.</Text>
|
||||
|
||||
22
components/pages/grocery/GroceryWrapper.tsx
Normal file
22
components/pages/grocery/GroceryWrapper.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import { Text, ScrollView } from "react-native";
|
||||
import { View } from "react-native-ui-lib";
|
||||
import React from "react";
|
||||
import AddGroceryItem from "./AddGroceryItem";
|
||||
import GroceryList from "./GroceryList";
|
||||
import { useGroceryContext } from "@/contexts/GroceryContext";
|
||||
|
||||
const GroceryWrapper = () => {
|
||||
const { isAddingGrocery } = useGroceryContext();
|
||||
return (
|
||||
<View height={"100%"}>
|
||||
<View height={'90%'}>
|
||||
<ScrollView>
|
||||
<GroceryList />
|
||||
</ScrollView>
|
||||
</View>
|
||||
{!isAddingGrocery && <AddGroceryItem />}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroceryWrapper;
|
||||
@ -13,20 +13,24 @@ import {
|
||||
NumberInputData,
|
||||
DateTimePicker,
|
||||
Switch,
|
||||
Picker,
|
||||
} from "react-native-ui-lib";
|
||||
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
|
||||
import LinearGradient from "react-native-linear-gradient";
|
||||
import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
|
||||
import { useToDosContext } from "@/contexts/ToDosContext";
|
||||
import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
|
||||
import { setDate } from "date-fns";
|
||||
|
||||
const AddChore = () => {
|
||||
const { addToDo, toDos } = useToDosContext();
|
||||
|
||||
const [newTitle, setNewTitle] = useState<string>("");
|
||||
const [isVisible, setIsVisible] = useState<boolean>(false);
|
||||
|
||||
const [newTitle, setNewTitle] = useState<string>("");
|
||||
const [points, setPoints] = useState<number>(10);
|
||||
const [choreDate, setChoreDate] = useState<Date>(new Date());
|
||||
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);
|
||||
@ -68,17 +72,28 @@ const AddChore = () => {
|
||||
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
|
||||
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)}}
|
||||
)}
|
||||
onPress={() => {
|
||||
setIsVisible(false);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
color="#05a8b6"
|
||||
@ -92,6 +107,7 @@ const AddChore = () => {
|
||||
date: choreDate,
|
||||
points: points,
|
||||
rotate: rotate,
|
||||
repeatType: repeatType,
|
||||
});
|
||||
setIsVisible(false);
|
||||
console.log(toDos);
|
||||
@ -99,7 +115,7 @@ const AddChore = () => {
|
||||
/>
|
||||
</View>
|
||||
<TextField
|
||||
placeholder="Add chore title"
|
||||
placeholder="Add a To Do"
|
||||
value={newTitle}
|
||||
onChangeText={(text) => {
|
||||
setNewTitle(text);
|
||||
@ -109,28 +125,58 @@ const AddChore = () => {
|
||||
marginT-15
|
||||
marginL-30
|
||||
/>
|
||||
<View style={styles.divider} />
|
||||
<View style={styles.divider} marginT-8 />
|
||||
<View marginL-30 centerV>
|
||||
<View row marginB-10>
|
||||
<Feather name="calendar" size={28} color="#919191" />
|
||||
{choreDate && (
|
||||
<View row centerV>
|
||||
<Feather name="calendar" size={25} color="#919191" />
|
||||
<DateTimePicker
|
||||
value={choreDate}
|
||||
text70
|
||||
marginL-10
|
||||
marginL-8
|
||||
onChange={(date) => {
|
||||
setChoreDate(date);
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View row>
|
||||
<AntDesign name="clockcircleo" size={28} color="#919191" />
|
||||
)}
|
||||
</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={30} color="#919191" />
|
||||
<Text text60R marginL-10>
|
||||
<Ionicons name="person-circle-outline" size={28} color="#919191" />
|
||||
<Text text70R marginL-10>
|
||||
Assignees
|
||||
</Text>
|
||||
<Button
|
||||
@ -150,12 +196,12 @@ const AddChore = () => {
|
||||
label="Assign"
|
||||
/>
|
||||
</View>
|
||||
<View row>
|
||||
<View row marginH-13 marginT-13>
|
||||
<View
|
||||
marginL-30
|
||||
style={{
|
||||
aspectRatio: 1,
|
||||
width: 60,
|
||||
width: 50,
|
||||
backgroundColor: "red",
|
||||
borderRadius: 50,
|
||||
}}
|
||||
@ -164,22 +210,30 @@ const AddChore = () => {
|
||||
marginL-30
|
||||
style={{
|
||||
aspectRatio: 1,
|
||||
width: 60,
|
||||
width: 50,
|
||||
backgroundColor: "red",
|
||||
borderRadius: 50,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<Switch onColor={'#ea156c'} value={rotate} style={styles.rotateSwitch} onValueChange={(value) => setRotate(value)} />
|
||||
<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-10 row centerV>
|
||||
<Ionicons name="gift-outline" size={30} color="#919191" />
|
||||
<Text text60R marginL-10>
|
||||
<View marginH-30 marginB-15 row centerV>
|
||||
<Ionicons name="gift-outline" size={25} color="#919191" />
|
||||
<Text text70BL marginL-10>
|
||||
Reward Points
|
||||
</Text>
|
||||
</View>
|
||||
<View marginH-30 row spread>
|
||||
<View width={"85%"}>
|
||||
<View width={"80%"}>
|
||||
<Slider
|
||||
value={points}
|
||||
onValueChange={(value) => setPoints(value)}
|
||||
@ -237,7 +291,8 @@ const styles = StyleSheet.create({
|
||||
color: "#05a8b6",
|
||||
},
|
||||
rotateSwitch: {
|
||||
marginLeft: 'auto',
|
||||
marginRight: 35
|
||||
}
|
||||
marginLeft: 35,
|
||||
marginBottom: 10,
|
||||
marginTop: 25,
|
||||
},
|
||||
});
|
||||
|
||||
48
components/pages/todos/ProgressCard.tsx
Normal file
48
components/pages/todos/ProgressCard.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import { View, Text, Button } from "react-native-ui-lib";
|
||||
import React from "react";
|
||||
import { Fontisto } from "@expo/vector-icons";
|
||||
import { ProgressBar } from "react-native-ui-lib/src/components/progressBar";
|
||||
|
||||
const ProgressCard = () => {
|
||||
return (
|
||||
<View
|
||||
backgroundColor="white"
|
||||
marginH-25
|
||||
marginB-30
|
||||
padding-15
|
||||
style={{ borderRadius: 22 }}
|
||||
>
|
||||
<View row centerV>
|
||||
<Fontisto name="day-sunny" size={30} color="#ff9900" />
|
||||
<Text marginL-5 text70>
|
||||
You have earned XX points this week!{" "}
|
||||
</Text>
|
||||
</View>
|
||||
<ProgressBar
|
||||
progress={50}
|
||||
progressColor="#ea156c"
|
||||
style={{
|
||||
height: 21,
|
||||
backgroundColor: "#fcf2f6",
|
||||
marginTop: 15,
|
||||
marginBottom: 5,
|
||||
}}
|
||||
/>
|
||||
<View row spread>
|
||||
<Text color={"#868686"}>0</Text>
|
||||
<Text color={"#868686"}>1000</Text>
|
||||
</View>
|
||||
<View centerV centerH>
|
||||
<Button
|
||||
backgroundColor="transparent"
|
||||
>
|
||||
<Text style={{ textDecorationLine: "underline", color: "#05a8b6" }}>
|
||||
View your full progress report here
|
||||
</Text>
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProgressCard;
|
||||
@ -8,15 +8,25 @@ const ToDoItem = (props: { item: IToDo }) => {
|
||||
return (
|
||||
<View
|
||||
centerV
|
||||
backgroundColor="white"
|
||||
paddingV-10
|
||||
paddingH-10
|
||||
marginH-25
|
||||
marginV-10
|
||||
style={{ borderRadius: 22 }}
|
||||
style={{
|
||||
borderRadius: 22,
|
||||
backgroundColor: props.item.done ? "#e0e0e0" : "white",
|
||||
opacity: props.item.done ? 0.3 : 1,
|
||||
}}
|
||||
>
|
||||
<View paddingB-5 row spread>
|
||||
<Text text70R>{props.item.title}</Text>
|
||||
<Text
|
||||
text70R
|
||||
style={{
|
||||
textDecorationLine: props.item.done ? "line-through" : "none",
|
||||
}}
|
||||
>
|
||||
{props.item.title}
|
||||
</Text>
|
||||
<Checkbox
|
||||
value={props.item.done}
|
||||
onValueChange={(value) => {
|
||||
@ -29,7 +39,9 @@ const ToDoItem = (props: { item: IToDo }) => {
|
||||
centerV
|
||||
height={2}
|
||||
width={"100%"}
|
||||
backgroundColor="#e7e7e7"
|
||||
style={{
|
||||
backgroundColor: props.item.done ? '#b8b8b8' : "#e7e7e7",
|
||||
}}
|
||||
centerH
|
||||
/>
|
||||
</View>
|
||||
|
||||
@ -3,15 +3,20 @@ import React from "react";
|
||||
import { IToDo, useToDosContext } from "@/contexts/ToDosContext";
|
||||
import ToDoItem from "./ToDoItem";
|
||||
import { format, isToday, isTomorrow } from "date-fns";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
|
||||
const groupToDosByDate = (toDos: IToDo[]) => {
|
||||
return toDos.reduce((groups, toDo) => {
|
||||
const dateKey = isToday(toDo.date)
|
||||
? "Today • " + format(toDo.date, "EEE MMM dd")
|
||||
: isTomorrow(toDo.date)
|
||||
? "Tomorrow • " + format(toDo.date, "EEE MMM dd")
|
||||
: format(toDo.date, "EEE MMM dd");
|
||||
let dateKey;
|
||||
|
||||
if (toDo.date === null) {
|
||||
dateKey = "No Date";
|
||||
} else if (isToday(toDo.date)) {
|
||||
dateKey = "Today • " + format(toDo.date, "EEE MMM dd");
|
||||
} else if (isTomorrow(toDo.date)) {
|
||||
dateKey = "Tomorrow • " + format(toDo.date, "EEE MMM dd");
|
||||
} else {
|
||||
dateKey = format(toDo.date, "EEE MMM dd");
|
||||
}
|
||||
|
||||
if (!groups[dateKey]) {
|
||||
groups[dateKey] = [];
|
||||
@ -20,32 +25,54 @@ const groupToDosByDate = (toDos: IToDo[]) => {
|
||||
groups[dateKey].push(toDo);
|
||||
return groups;
|
||||
}, {} as { [key: string]: IToDo[] });
|
||||
};
|
||||
};
|
||||
|
||||
const ToDosList = () => {
|
||||
const { toDos } = useToDosContext();
|
||||
const groupedToDos = groupToDosByDate(toDos);
|
||||
|
||||
const noDateToDos = groupedToDos["No Date"] || [];
|
||||
const datedToDos = Object.keys(groupedToDos).filter((key) => key !== "No Date");
|
||||
|
||||
return (
|
||||
<View marginB-140>
|
||||
{Object.keys(groupedToDos).map((dateKey) => (
|
||||
<View key={dateKey}>
|
||||
<Text text70 style={{ fontWeight: "bold", marginVertical: 8, paddingHorizontal: 20}}>
|
||||
{dateKey}
|
||||
</Text>
|
||||
{groupedToDos[dateKey].map((item) => (
|
||||
|
||||
{noDateToDos.length > 0 && (
|
||||
<View key="No Date">
|
||||
{noDateToDos
|
||||
.sort((a, b) => Number(a.done) - Number(b.done))
|
||||
.map((item) => (
|
||||
<ToDoItem key={item.id} item={item} />
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{datedToDos.map((dateKey) => {
|
||||
const sortedToDos = [
|
||||
...groupedToDos[dateKey].filter((toDo) => !toDo.done),
|
||||
...groupedToDos[dateKey].filter((toDo) => toDo.done),
|
||||
];
|
||||
|
||||
return (
|
||||
<View key={dateKey}>
|
||||
<Text
|
||||
text70
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginVertical: 8,
|
||||
paddingHorizontal: 20,
|
||||
}}
|
||||
>
|
||||
{dateKey}
|
||||
</Text>
|
||||
{sortedToDos.map((item) => (
|
||||
<ToDoItem key={item.id} item={item} />
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default ToDosList;
|
||||
|
||||
/*const groupToDosByDate = (toDos: IToDo[]) => {
|
||||
return toDos.reduce((groups, toDo) => {
|
||||
const dateKey
|
||||
})
|
||||
}*/
|
||||
|
||||
@ -56,6 +56,7 @@ interface IGroceryContext {
|
||||
updateGroceryItem: (id: number, changes: Partial<IGrocery>) => void;
|
||||
isAddingGrocery: boolean;
|
||||
setIsAddingGrocery: (value: boolean) => void;
|
||||
addGrocery: (grocery: IGrocery) => void;
|
||||
}
|
||||
|
||||
const GroceryContext = createContext<IGroceryContext | undefined>(undefined);
|
||||
@ -103,6 +104,17 @@ export const GroceryProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
},
|
||||
]);
|
||||
|
||||
const addGrocery = (grocery: IGrocery) => {
|
||||
setGroceries((prevGroceries) => [
|
||||
...prevGroceries,
|
||||
{
|
||||
...grocery,
|
||||
id: prevGroceries.length ? prevGroceries[prevGroceries.length - 1].id + 1 : 0,
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
|
||||
const updateGroceryItem = (id: number, changes: Partial<IGrocery>) => {
|
||||
setGroceries((prevGroceries) =>
|
||||
prevGroceries.map((grocery) =>
|
||||
@ -113,7 +125,7 @@ export const GroceryProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
|
||||
return (
|
||||
<GroceryContext.Provider
|
||||
value={{ groceries, iconMapping, updateGroceryItem, isAddingGrocery, setIsAddingGrocery }}
|
||||
value={{ groceries, iconMapping, updateGroceryItem, isAddingGrocery, setIsAddingGrocery, addGrocery }}
|
||||
>
|
||||
{children}
|
||||
</GroceryContext.Provider>
|
||||
|
||||
@ -1,12 +1,22 @@
|
||||
import { createContext, FC, ReactNode, useContext, useState } from "react";
|
||||
|
||||
export interface IToDo {
|
||||
id: number;
|
||||
title: string;
|
||||
done: boolean;
|
||||
date: Date;
|
||||
date: Date | null;
|
||||
points?: number;
|
||||
rotate: boolean;
|
||||
repeatType: string;
|
||||
}
|
||||
|
||||
export const repeatOptions = [
|
||||
{ label: "None", value: "None" },
|
||||
{ label: "Every week", value: "Every week" },
|
||||
{ label: "Once a month", value: "Once a month" },
|
||||
{ label: "Once a year", value: "Once a year" },
|
||||
];
|
||||
|
||||
interface IToDosContext {
|
||||
toDos: IToDo[];
|
||||
updateToDo: (id: number, changes: Partial<IToDo>) => void;
|
||||
@ -25,6 +35,7 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
|
||||
done: false,
|
||||
date: new Date(),
|
||||
rotate: true,
|
||||
repeatType: "Every week"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
@ -32,6 +43,7 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
|
||||
done: false,
|
||||
date: new Date(),
|
||||
rotate: false,
|
||||
repeatType: "Every week"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@ -39,6 +51,7 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
|
||||
done: false,
|
||||
date: new Date(),
|
||||
rotate: true,
|
||||
repeatType: "Every week"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
@ -47,6 +60,7 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
|
||||
date: new Date(Date.now() + 86400000),
|
||||
points: 40,
|
||||
rotate: false,
|
||||
repeatType: "Every week"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
@ -54,6 +68,7 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
|
||||
done: false,
|
||||
date: new Date(Date.now() + 86400000),
|
||||
rotate: false,
|
||||
repeatType: "Once a Month"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
@ -61,6 +76,7 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
|
||||
done: false,
|
||||
date: new Date(Date.now() + 2 * 86400000),
|
||||
rotate: true,
|
||||
repeatType: "Once a Month"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
@ -68,6 +84,23 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
|
||||
done: false,
|
||||
date: new Date(Date.now() + 3 * 86400000),
|
||||
rotate: false,
|
||||
repeatType: "Once a year"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Buy Nautica Voyage",
|
||||
done: false,
|
||||
date: null,
|
||||
rotate: false,
|
||||
repeatType: "None"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "Sell Dan's Xbox",
|
||||
done: false,
|
||||
date: null,
|
||||
rotate: false,
|
||||
repeatType: "None"
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user