added chores page

This commit is contained in:
ivic00
2024-11-17 19:09:13 +01:00
parent 1d3daa49ec
commit 653f72dc94
5 changed files with 345 additions and 16 deletions

View File

@ -1,18 +1,18 @@
import React from "react";
import CalendarPage from "@/components/pages/calendar/CalendarPage";
import { Constants } from "react-native-ui-lib";
import { View } from "react-native-ui-lib";
import TabletCalendarPage from "@/components/pages/(tablet_pages)/calendar/TabletCalendarPage";
import { DeviceType } from "expo-device";
import * as Device from "expo-device";
export default function Screen() {
return (
<>
<View style={{ backgroundColor: "white" }}>
{Device.deviceType === DeviceType.TABLET ? (
<TabletCalendarPage />
) : (
<CalendarPage />
)}
</>
</View>
);
}

View File

@ -0,0 +1,271 @@
import { View, Text, TouchableOpacity, Icon } from "react-native-ui-lib";
import React, { useState } from "react";
import { useToDosContext } from "@/contexts/ToDosContext";
import {
addDays,
format,
isToday,
isTomorrow,
isWithinInterval,
} from "date-fns";
import { AntDesign } from "@expo/vector-icons";
import { IToDo } from "@/hooks/firebase/types/todoData";
import ToDoItem from "../../todos/ToDoItem";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
const groupToDosByDate = (toDos: IToDo[]) => {
let sortedTodos = toDos.sort((a, b) => a.date - b.date);
return sortedTodos.reduce(
(groups, toDo) => {
let dateKey;
let subDateKey;
const isNext7Days = (date: Date) => {
const today = new Date();
return isWithinInterval(date, { start: today, end: addDays(today, 7) });
};
const isNext30Days = (date: Date) => {
const today = new Date();
return isWithinInterval(date, {
start: today,
end: addDays(today, 30),
});
};
if (toDo.date === null) {
dateKey = "No Date";
} else if (isToday(toDo.date)) {
dateKey = "Today";
} else if (isTomorrow(toDo.date)) {
dateKey = "Tomorrow";
} else if (isNext7Days(toDo.date)) {
dateKey = "Next 7 Days";
} else if (isNext30Days(toDo.date)) {
dateKey = "Next 30 Days";
subDateKey = format(toDo.date, "MMM d");
} else {
return groups;
}
if (!groups[dateKey]) {
groups[dateKey] = {
items: [],
subgroups: {},
};
}
if (dateKey === "Next 30 Days" && subDateKey) {
if (!groups[dateKey].subgroups[subDateKey]) {
groups[dateKey].subgroups[subDateKey] = [];
}
groups[dateKey].subgroups[subDateKey].push(toDo);
} else {
groups[dateKey].items.push(toDo);
}
return groups;
},
{} as {
[key: string]: {
items: IToDo[];
subgroups: { [key: string]: IToDo[] };
};
}
);
};
const filterToDosByUser = (toDos: IToDo[], uid: string | undefined) => {
if (!uid) return [];
return toDos.filter((todo) =>
todo.assignees?.includes(uid)
);
};
const SingleUserChoreList = ({ user }: { user: UserProfile }) => {
const { toDos } = useToDosContext();
const userTodos = filterToDosByUser(toDos, user.uid);
const groupedToDos = groupToDosByDate(userTodos);
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"]?.items || [];
const datedToDos = Object.keys(groupedToDos).filter(
(key) => key !== "No Date"
);
const renderTodoGroup = (dateKey: string) => {
const isExpanded = expandedGroups[dateKey] || false;
if (dateKey === "Next 30 Days") {
const subgroups = Object.entries(groupedToDos[dateKey].subgroups).sort(
([dateA], [dateB]) => {
const dateAObj = new Date(dateA);
const dateBObj = new Date(dateB);
return dateAObj.getTime() - dateBObj.getTime();
}
);
return (
<View key={dateKey}>
<TouchableOpacity
onPress={() => toggleExpand(dateKey)}
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 0,
marginBottom: 4,
marginTop: 15,
}}
>
<Text
style={{
fontFamily: "Manrope_700Bold",
fontSize: 15,
color: "#484848",
}}
>
{dateKey}
</Text>
<AntDesign
name={isExpanded ? "caretdown" : "caretright"}
size={24}
color="#fd1575"
/>
</TouchableOpacity>
{isExpanded &&
subgroups.map(([subDate, items]) => {
const sortedItems = [
...items.filter((toDo) => !toDo.done),
...items.filter((toDo) => toDo.done),
];
return (
<View key={subDate} marginT-15>
<View
style={{
marginBottom: 8,
}}
>
<Text
style={{
fontFamily: "Manrope_600SemiBold",
fontSize: 14,
color: "#919191",
}}
>
{subDate}
</Text>
</View>
{sortedItems.map((item) => (
<ToDoItem key={item.id} item={item} is7Days={false} />
))}
</View>
);
})}
</View>
);
}
const sortedToDos = [
...groupedToDos[dateKey].items.filter((toDo) => !toDo.done),
...groupedToDos[dateKey].items.filter((toDo) => toDo.done),
];
return (
<View key={dateKey}>
<TouchableOpacity
onPress={() => toggleExpand(dateKey)}
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 0,
marginBottom: 4,
marginTop: 15,
}}
>
<Text
style={{
fontFamily: "Manrope_700Bold",
fontSize: 15,
color: "#484848",
}}
>
{dateKey}
</Text>
<AntDesign
name={isExpanded ? "caretdown" : "caretright"}
size={24}
color="#fd1575"
/>
</TouchableOpacity>
{isExpanded &&
sortedToDos.map((item) => (
<ToDoItem
key={item.id}
item={item}
is7Days={dateKey === "Next 7 Days"}
/>
))}
</View>
);
};
return (
<View
marginB-402
marginT-10
paddingH-10
backgroundColor="#f9f8f7"
style={{ minHeight: 800, borderRadius: 9.11 }}
width={355}
>
{noDateToDos.length > 0 && (
<View key="No Date">
<View row spread paddingH-19 marginB-12>
<Text
text70
style={{
fontWeight: "bold",
}}
>
Unscheduled
</Text>
<AntDesign
name={expandNoDate ? "caretdown" : "caretright"}
size={24}
color="#fd1575"
onPress={() => {
setExpandNoDate(!expandNoDate);
}}
/>
</View>
{expandNoDate &&
noDateToDos
.sort((a, b) => Number(a.done) - Number(b.done))
.map((item) => <ToDoItem key={item.id} item={item} />)}
</View>
)}
{datedToDos.map(renderTodoGroup)}
</View>
);
};
export default SingleUserChoreList;

View File

@ -1,13 +1,22 @@
import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import * as ScreenOrientation from 'expo-screen-orientation';
import TabletContainer from '../tablet_components/TabletContainer';
import ToDosPage from '../../todos/ToDosPage';
import React, { useEffect } from "react";
import { View, Text } from "react-native-ui-lib";
import * as ScreenOrientation from "expo-screen-orientation";
import TabletContainer from "../tablet_components/TabletContainer";
import ToDosPage from "../../todos/ToDosPage";
import ToDosList from "../../todos/ToDosList";
import SingleUserChoreList from "./SingleUserChoreList";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { ImageBackground, StyleSheet } from "react-native";
import { colorMap } from "@/constants/colorMap";
import { ScrollView } from "react-native-gesture-handler";
const TabletChoresPage = () => {
const { data: users } = useGetFamilyMembers();
// Function to lock the screen orientation to landscape
const lockScreenOrientation = async () => {
await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT);
await ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
);
};
useEffect(() => {
@ -21,9 +30,56 @@ const TabletChoresPage = () => {
return (
<TabletContainer>
<ToDosPage />
<ScrollView horizontal>
<View row gap-25 padding-25>
{users?.map((user, index) => (
<View>
<View row centerV>
{user.pfp ? (
<ImageBackground
source={{ uri: user.pfp }}
style={styles.pfp}
borderRadius={13.33}
/>
) : (
<View
center
style={styles.pfp}
backgroundColor={user.eventColor || "#00a8b6"}
>
<Text color="white">
{user.firstName.at(0)}
{user.lastName.at(0)}
</Text>
</View>
)}
<Text style={styles.name} marginL-15>
{user.firstName}
</Text>
<Text style={[styles.name, { color: "#9b9b9b" }]} marginL-5>
({user.userType})
</Text>
</View>
<SingleUserChoreList user={user} />
</View>
))}
</View>
</ScrollView>
</TabletContainer>
);
};
const styles = StyleSheet.create({
pfp: {
width: 46.74,
aspectRatio: 1,
borderRadius: 13.33,
},
name: {
fontFamily: "Manrope_600SemiBold",
fontSize: 22.43,
color: "#2c2c2c",
},
});
export default TabletChoresPage;

View File

@ -31,19 +31,21 @@ const TabletContainer: React.FC<TabletContainerProps> = ({
const styles = StyleSheet.create({
container: {
backgroundColor: "white",
width: width,
flex: 1,
borderTopColor: "#a9a9a9",
borderTopWidth: 1,
},
calendarContainer: {
backgroundColor: "white",
height: height,
width: width * 0.85,
width: width * 0.89,
},
profilesContainer: {
width: width * 0.15,
width: width * 0.11,
height: height,
borderLeftWidth: 1,
borderLeftColor: "#a9a9a9",
backgroundColor: "white",
},
});

View File

@ -191,7 +191,7 @@ const ToDoItem = (props: {
>
<View
style={{
backgroundColor: "#ccc",
backgroundColor: member.eventColor || "#ccc",
justifyContent: "center",
alignItems: "center",
borderRadius: 100, // Circular shape