mirror of
https://github.com/urosran/cally.git
synced 2025-07-10 15:17:17 +00:00
added chores page
This commit is contained in:
@ -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>
|
||||
);
|
||||
}
|
||||
|
271
components/pages/(tablet_pages)/chores/SingleUserChoreList.tsx
Normal file
271
components/pages/(tablet_pages)/chores/SingleUserChoreList.tsx
Normal 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;
|
@ -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;
|
||||
|
@ -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",
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -191,7 +191,7 @@ const ToDoItem = (props: {
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#ccc",
|
||||
backgroundColor: member.eventColor || "#ccc",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: 100, // Circular shape
|
||||
|
Reference in New Issue
Block a user