ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 08:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

todos collapse

Browse Source
This commit is contained in:
ivic00
2024-10-11 23:30:08 +02:00
parent cd62837198
commit 9c6cc16f16
3 changed files with 70 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/(auth)/_layout.tsx
View File

@ -90,7 +90,7 @@ export default function TabLayout() {
/>*/}
<DrawerButton
color="#8005eb"
title={"To Dos"}
title={"To Do's"}
bgColor={"#f3e6fd"}
pressFunc={() => props.navigation.navigate("todos")}
icon={
@ -197,7 +197,7 @@ export default function TabLayout() {
name="todos"
options={{
drawerLabel: "To-Do",
title: "To-Do",
title: "To-Do's",
}}
/>
</Drawer>

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

@ -44,7 +44,7 @@ const AddChore = () => {
>
<AntDesign name="plus" size={24} color="white" />
<Text white text60R marginL-10>
Add to do
Add To Do
</Text>
</Button>
</View>

85
components/pages/todos/ToDosList.tsx
View File

@ -1,8 +1,10 @@
import { View, Text } from "react-native-ui-lib";
import React from "react";
import { View, Text, TouchableOpacity, Icon } from "react-native-ui-lib";
import React, { useState } from "react";
import { IToDo, useToDosContext } from "@/contexts/ToDosContext";
import ToDoItem from "./ToDoItem";
import { format, isToday, isTomorrow } from "date-fns";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import { AntDesign } from "@expo/vector-icons";
const groupToDosByDate = (toDos: IToDo[]) => {
return toDos.reduce((groups, toDo) => {
@ -31,23 +33,53 @@ const ToDosList = () => {
const { toDos } = useToDosContext();
const groupedToDos = groupToDosByDate(toDos);
const [expandedGroups, setExpandedGroups] = useState<{
[key: string]: boolean;
}>({});
const [expandNoDate, setExpandNoDate] = useState<boolean>(true);
const toggleExpand = (dateKey: string) => {
setExpandedGroups((prev) => ({
...prev,
[dateKey]: !prev[dateKey],
}));
};
const noDateToDos = groupedToDos["No Date"] || [];
const datedToDos = Object.keys(groupedToDos).filter((key) => key !== "No Date");
const datedToDos = Object.keys(groupedToDos).filter(
(key) => key !== "No Date"
);
return (
<View marginB-140>
<View marginB-402>
{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 row spread paddingH-19 marginB-12>
<Text
text70
style={{
fontWeight: "bold",
}}
>
Unscheduled
</Text>
{!expandNoDate && (
<AntDesign name="caretright" size={24} color="#fd1575" onPress={() => {setExpandNoDate(!expandNoDate)}}/>
)}
{expandNoDate && (
<AntDesign name="caretdown" size={24} color="#fd1575" onPress={() => {setExpandNoDate(!expandNoDate)}}/>
)}
</View>
{expandNoDate &&
noDateToDos
.sort((a, b) => Number(a.done) - Number(b.done))
.map((item) => <ToDoItem key={item.id} item={item} />)}
</View>
)}
{datedToDos.map((dateKey) => {
const isExpanded = expandedGroups[dateKey] || false;
const sortedToDos = [
...groupedToDos[dateKey].filter((toDo) => !toDo.done),
...groupedToDos[dateKey].filter((toDo) => toDo.done),
@ -55,19 +87,34 @@ const ToDosList = () => {
return (
<View key={dateKey}>
<Text
text70
<TouchableOpacity
onPress={() => toggleExpand(dateKey)}
style={{
fontWeight: "bold",
marginVertical: 8,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 20,
marginVertical: 8,
}}
>
{dateKey}
</Text>
{sortedToDos.map((item) => (
<ToDoItem key={item.id} item={item} />
))}
<Text
text70
style={{
fontWeight: "bold",
}}
>
{dateKey}
</Text>
{!isExpanded && (
<AntDesign name="caretright" size={24} color="#fd1575" />
)}
{isExpanded && (
<AntDesign name="caretdown" size={24} color="#fd1575" />
)}
</TouchableOpacity>
{isExpanded &&
sortedToDos.map((item) => <ToDoItem key={item.id} item={item} />)}
</View>
);
})}