mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 08:24:55 +00:00
Merge branch 'tablet' into dev
This commit is contained in:
ivic00
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import {Drawer} from "expo-router/drawer";
|
||||
import {useSignOut} from "@/hooks/firebase/useSignOut";
|
||||
import {DrawerContentScrollView,} from "@react-navigation/drawer";
|
||||
@ -10,7 +10,7 @@ import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
|
||||
import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
|
||||
import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
|
||||
import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
|
||||
import FeedbackNavIcon from "@/assets/svgs/FeedbackNavIcon";
|
||||
import ViewSwitch from "@/components/pages/(tablet_pages)/ViewSwitch";
|
||||
import {MaterialIcons} from "@expo/vector-icons";
|
||||
import {useSetAtom} from "jotai";
|
||||
import {
|
||||
@ -20,6 +20,9 @@ import {
|
||||
userSettingsView,
|
||||
} from "@/components/pages/calendar/atoms";
|
||||
import Ionicons from "@expo/vector-icons/Ionicons";
|
||||
import Constants from "expo-constants";
|
||||
import * as Device from "expo-device";
|
||||
import { DeviceType } from "expo-device";
|
||||
|
||||
export default function TabLayout() {
|
||||
const {mutateAsync: signOut} = useSignOut();
|
||||
@ -32,14 +35,20 @@ export default function TabLayout() {
|
||||
<Drawer
|
||||
initialRouteName={"index"}
|
||||
detachInactiveScreens
|
||||
screenOptions={{
|
||||
screenOptions={({ navigation }) => ({
|
||||
headerShown: true,
|
||||
drawerStyle: {
|
||||
headerRight: () =>
|
||||
Device.deviceType === DeviceType.TABLET ? (
|
||||
<ViewSwitch navigation={navigation} />
|
||||
) : (
|
||||
<></>
|
||||
),
|
||||
drawerStyle: {
|
||||
width: "90%",
|
||||
backgroundColor: "#f9f8f7",
|
||||
height: "100%",
|
||||
},
|
||||
}}
|
||||
})}
|
||||
drawerContent={(props) => {
|
||||
return (
|
||||
<DrawerContentScrollView {...props} style={{}}>
|
||||
|
||||
@ -4,6 +4,10 @@ import { useSetAtom } from "jotai";
|
||||
import CalendarPage from "@/components/pages/calendar/CalendarPage";
|
||||
import { refreshTriggerAtom } from "@/components/pages/calendar/atoms";
|
||||
import { colorMap } from "@/constants/colorMap";
|
||||
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() {
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
@ -26,7 +30,11 @@ export default function Screen() {
|
||||
}, [setRefreshTrigger]);
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
<View style={{ backgroundColor: "white" }}>
|
||||
{Device.deviceType === DeviceType.TABLET ? (
|
||||
<TabletCalendarPage />
|
||||
) : (
|
||||
<ScrollView
|
||||
style={{ flex: 1 }}
|
||||
contentContainerStyle={{ flex: 1 }}
|
||||
refreshControl={
|
||||
@ -49,5 +57,7 @@ export default function Screen() {
|
||||
>
|
||||
<CalendarPage />
|
||||
</ScrollView>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import TabletChoresPage from "@/components/pages/(tablet_pages)/chores/TabletChoresPage";
|
||||
import AddChore from "@/components/pages/todos/AddChore";
|
||||
import ProgressCard from "@/components/pages/todos/ProgressCard";
|
||||
import ToDoItem from "@/components/pages/todos/ToDoItem";
|
||||
@ -8,12 +9,17 @@ import { useAuthContext } from "@/contexts/AuthContext";
|
||||
import { ToDosContextProvider, useToDosContext } from "@/contexts/ToDosContext";
|
||||
import { AntDesign } from "@expo/vector-icons";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
import { Button, ButtonSize, View, Text } from "react-native-ui-lib";
|
||||
import { Button, ButtonSize, View, Text, Constants } from "react-native-ui-lib";
|
||||
import * as Device from "expo-device";
|
||||
|
||||
export default function Screen() {
|
||||
return (
|
||||
<ToDosContextProvider>
|
||||
<ToDosPage />
|
||||
{Device.deviceType === Device.DeviceType.TABLET ? (
|
||||
<TabletChoresPage />
|
||||
) : (
|
||||
<ToDosPage />
|
||||
)}
|
||||
</ToDosContextProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -7,8 +7,8 @@ interface MenuIconProps extends SvgProps {
|
||||
|
||||
const MenuIcon: React.FC<MenuIconProps> = (props) => (
|
||||
<Svg
|
||||
width={24}
|
||||
height={16}
|
||||
width={props.width || 24}
|
||||
height={props.height || 16}
|
||||
viewBox="0 0 24 16"
|
||||
fill="none"
|
||||
{...props}
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import * as React from "react"
|
||||
import Svg, { Path, SvgProps } from "react-native-svg"
|
||||
import * as React from "react";
|
||||
import Svg, { Path, SvgProps } from "react-native-svg";
|
||||
const NavBrainDumpIcon: React.FC<SvgProps> = (props) => (
|
||||
<Svg
|
||||
width={22}
|
||||
height={28}
|
||||
width={props.width || 22}
|
||||
height={props.height || 28}
|
||||
viewBox="0 0 22 28"
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<Path
|
||||
stroke="#F90"
|
||||
stroke={props.color || "#F90"}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit={10}
|
||||
@ -16,7 +17,7 @@ const NavBrainDumpIcon: React.FC<SvgProps> = (props) => (
|
||||
d="M21.1.859H3.994C2.284.859.976 2.167.976 3.877c0 1.71 1.308 3.019 3.018 3.019H21.1V27.02"
|
||||
/>
|
||||
<Path
|
||||
stroke="#F90"
|
||||
stroke={props.color || "#F90"}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit={10}
|
||||
@ -24,7 +25,7 @@ const NavBrainDumpIcon: React.FC<SvgProps> = (props) => (
|
||||
d="M21.1 27.021H3.994c-1.71 0-3.018-1.308-3.018-3.018V3.878M21.097 3.878H3.991"
|
||||
/>
|
||||
<Path
|
||||
stroke="#F90"
|
||||
stroke={props.color || "#F90"}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit={10}
|
||||
@ -32,5 +33,5 @@ const NavBrainDumpIcon: React.FC<SvgProps> = (props) => (
|
||||
d="M6.007 6.897v12.075l3.019-1.006 3.018 1.006V6.897"
|
||||
/>
|
||||
</Svg>
|
||||
)
|
||||
export default NavBrainDumpIcon
|
||||
);
|
||||
export default NavBrainDumpIcon;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import * as React from "react"
|
||||
import Svg, { Path, SvgProps } from "react-native-svg"
|
||||
import * as React from "react";
|
||||
import Svg, { Path, SvgProps } from "react-native-svg";
|
||||
const NavCalendarIcon: React.FC<SvgProps> = (props) => (
|
||||
<Svg
|
||||
width={28}
|
||||
height={28}
|
||||
width={props.width || 28}
|
||||
height={props.height || 28}
|
||||
viewBox="0 0 28 28"
|
||||
fill="none"
|
||||
{...props}
|
||||
@ -16,5 +16,5 @@ const NavCalendarIcon: React.FC<SvgProps> = (props) => (
|
||||
d="M1.825 10.075h25.043m-5.565 5.567L7.39 15.64m4.638 5.566H7.39m0-19.478V4.51m13.913-2.782V4.51M6.277 26.77h16.139c1.558 0 2.337 0 2.933-.303.523-.267.949-.692 1.216-1.216.303-.595.303-1.375.303-2.933V8.962c0-1.558 0-2.337-.303-2.933a2.782 2.782 0 0 0-1.216-1.216c-.596-.303-1.375-.303-2.933-.303H6.277c-1.558 0-2.337 0-2.933.303-.523.267-.949.693-1.216 1.216-.303.596-.303 1.375-.303 2.933v13.356c0 1.558 0 2.338.303 2.933.267.523.693.95 1.216 1.216.596.303 1.375.303 2.933.303Z"
|
||||
/>
|
||||
</Svg>
|
||||
)
|
||||
export default NavCalendarIcon
|
||||
);
|
||||
export default NavCalendarIcon;
|
||||
|
||||
@ -2,17 +2,18 @@ import * as React from "react";
|
||||
import Svg, { Path, SvgProps } from "react-native-svg";
|
||||
const NavGroceryIcon: React.FC<SvgProps> = (props) => (
|
||||
<Svg
|
||||
width={29}
|
||||
height={32}
|
||||
width={props.width || 29}
|
||||
height={props.width || 32}
|
||||
viewBox="0 0 29 32"
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<Path
|
||||
fill="#50BE0C"
|
||||
fill={props.color || "#50BE0C"}
|
||||
d="M27.8 12c-.888-2.27-2.662-4.14-4.983-4.956-2.518-.883-5.143-.382-7.636.307-.047-1.362.068-2.728.262-4.076.11-.761.634-2.335-.668-2.389-1.081-.045-1.084 1.402-1.19 2.14-.203 1.416-.323 2.85-.284 4.281-.599-.1-1.19-.322-1.787-.446a13.485 13.485 0 0 0-2.704-.3c-1.752 0-3.48.465-4.922 1.479C1.09 10.01 0 13.446.046 16.747c.052 3.575 1.263 6.99 3.3 9.905.899 1.288 1.932 2.522 3.21 3.451 1.241.903 2.628 1.325 4.133 1.54.64.093 1.29.096 1.927-.009.557-.09 1.078-.325 1.63-.419.417-.07 1.005.258 1.408.348a6.297 6.297 0 0 0 2.096.107c2.563-.292 4.594-1.449 6.28-3.387 3.71-4.264 5.921-10.791 3.77-16.284Zm-1.69 8.743c-.474 1.663-1.225 3.182-2.195 4.608-.86 1.263-1.855 2.514-3.131 3.377-1.172.79-2.76 1.223-4.173 1.093-.719-.065-1.373-.41-2.087-.478-.8-.076-1.538.352-2.318.459-3.064.416-5.485-1.665-7.146-3.972-2.04-2.831-3.249-6.214-3.134-9.732.106-3.223 1.643-6.55 4.998-7.432 1.678-.44 3.446-.188 5.099.238.715.183 1.454.48 2.196.52.572.066 1.2-.196 1.74-.344 3.233-.89 6.873-1.105 9.124 1.855 2.08 2.732 1.925 6.666 1.027 9.808Z"
|
||||
/>
|
||||
<Path
|
||||
fill="#50BE0C"
|
||||
fill={props.color || "#50BE0C"}
|
||||
d="M12 17.966c-.778.285-1.977.71-2.432 1.454.11-.183.221-.363-.002.002-.222.365-.113.186-.001.003-.668 1.099.272 2.53 1.547 2.347 1.258-.18 1.378-1.419 1.364-2.443a8.822 8.822 0 0 0-.095-1.282c-.043-.264-.157-.164-.382-.08ZM18.096 18.917c-.435-.304-.919-.542-1.405-.752-.118-.05-.698-.375-.832-.297.018-.01.036-.021 0 0-.036.023-.02.012-.001.001-.11.07-.096.609-.104.716a9.003 9.003 0 0 0-.01 1.534c.1 1.117 1.049 2.082 2.228 1.517 1.165-.558 1.095-2.04.124-2.719ZM12.223 3.815C12.343.28 8.347-.271 6.922.432c.371 4.075 3.48 4.164 5.301 3.383Z"
|
||||
/>
|
||||
</Svg>
|
||||
|
||||
@ -3,7 +3,7 @@ import Svg, { Path, SvgProps } from "react-native-svg"
|
||||
const NavToDosIcon: React.FC<SvgProps> = (props) => (
|
||||
<Svg
|
||||
width={props.width || 30}
|
||||
height={props.width || 30}
|
||||
height={props.height || 30}
|
||||
viewBox="0 0 30 30"
|
||||
fill="none"
|
||||
{...props}
|
||||
|
||||
93
components/pages/(tablet_pages)/ViewSwitch.tsx
Normal file
93
components/pages/(tablet_pages)/ViewSwitch.tsx
Normal file
@ -0,0 +1,93 @@
|
||||
import { Text, TouchableOpacity, View } from "react-native-ui-lib";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { StyleSheet } from "react-native";
|
||||
import { NavigationProp } from "@react-navigation/native";
|
||||
import view from "react-native-ui-lib/src/components/view";
|
||||
|
||||
interface ViewSwitchProps {
|
||||
navigation: NavigationProp<any>; // Adjust according to your navigation structure
|
||||
}
|
||||
|
||||
const ViewSwitch: React.FC<ViewSwitchProps> = ({ navigation }) => {
|
||||
const [pageIndex, setPageIndex] = useState<number>(navigation.getState().index);
|
||||
|
||||
useEffect(() => {
|
||||
setPageIndex(navigation.getState().index);
|
||||
}, [navigation.getState().index])
|
||||
|
||||
return (
|
||||
<View
|
||||
row
|
||||
spread
|
||||
style={{
|
||||
borderRadius: 30,
|
||||
backgroundColor: "#ebebeb",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
// iOS shadow
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowOpacity: 0,
|
||||
shadowRadius: 0,
|
||||
// Android shadow (elevation)
|
||||
elevation: 0,
|
||||
}}
|
||||
centerV
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
navigation.navigate("calendar");
|
||||
}}
|
||||
>
|
||||
<View
|
||||
centerV
|
||||
centerH
|
||||
height={54}
|
||||
paddingH-15
|
||||
style={ pageIndex == 1 || pageIndex == 0 ? styles.switchBtnActive : styles.switchBtn}
|
||||
>
|
||||
<Text color={pageIndex == 1 || pageIndex == 0 ? "white" : "black"} style={styles.switchTxt}>
|
||||
Calendar
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
navigation.navigate("todos");
|
||||
}}
|
||||
>
|
||||
<View
|
||||
centerV
|
||||
centerH
|
||||
height={54}
|
||||
paddingH-15
|
||||
style={pageIndex == 6 ? styles.switchBtnActive : styles.switchBtn}
|
||||
>
|
||||
<Text color={pageIndex == 6 ? "white" : "black"} style={styles.switchTxt}>
|
||||
Chores
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewSwitch;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
switchBtnActive: {
|
||||
backgroundColor: "#ea156c",
|
||||
borderRadius: 50,
|
||||
width: 110,
|
||||
},
|
||||
switchBtn: {
|
||||
backgroundColor: "#ebebeb",
|
||||
borderRadius: 50,
|
||||
width: 110,
|
||||
},
|
||||
switchTxt: {
|
||||
fontSize: 16,
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,29 @@
|
||||
import { View, Text } from "react-native-ui-lib";
|
||||
import React, { useEffect } from "react";
|
||||
import * as ScreenOrientation from "expo-screen-orientation";
|
||||
import { InnerCalendar } from "../../calendar/InnerCalendar";
|
||||
import TabletContainer from "../tablet_components/TabletContainer";
|
||||
|
||||
const TabletCalendarPage = () => {
|
||||
const lockScreenOrientation = async () => {
|
||||
await ScreenOrientation.lockAsync(
|
||||
ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
lockScreenOrientation();
|
||||
|
||||
return () => {
|
||||
ScreenOrientation.unlockAsync();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<TabletContainer>
|
||||
<InnerCalendar />
|
||||
</TabletContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default TabletCalendarPage;
|
||||
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;
|
||||
85
components/pages/(tablet_pages)/chores/TabletChoresPage.tsx
Normal file
85
components/pages/(tablet_pages)/chores/TabletChoresPage.tsx
Normal file
@ -0,0 +1,85 @@
|
||||
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
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
lockScreenOrientation(); // Lock orientation when the component mounts
|
||||
|
||||
return () => {
|
||||
// Optional: Unlock to default when the component unmounts
|
||||
ScreenOrientation.unlockAsync();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<TabletContainer>
|
||||
<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;
|
||||
@ -0,0 +1,52 @@
|
||||
import { View, Text, ViewProps } from "react-native-ui-lib";
|
||||
import React, { ReactNode } from "react";
|
||||
import { Dimensions, StyleSheet } from "react-native";
|
||||
import UsersList from "./UsersList";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
|
||||
interface TabletContainerProps extends ViewProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const { width, height } = Dimensions.get("window");
|
||||
|
||||
const TabletContainer: React.FC<TabletContainerProps> = ({
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View row>
|
||||
<View style={styles.calendarContainer}>{children}</View>
|
||||
<View style={styles.profilesContainer}>
|
||||
<ScrollView>
|
||||
<UsersList />
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: "white",
|
||||
flex: 1,
|
||||
borderTopColor: "#a9a9a9",
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
calendarContainer: {
|
||||
backgroundColor: "white",
|
||||
height: height,
|
||||
width: width * 0.89,
|
||||
},
|
||||
profilesContainer: {
|
||||
width: width * 0.11,
|
||||
height: height,
|
||||
borderLeftWidth: 1,
|
||||
borderLeftColor: "#a9a9a9",
|
||||
backgroundColor: "white",
|
||||
},
|
||||
});
|
||||
|
||||
export default TabletContainer;
|
||||
@ -0,0 +1,67 @@
|
||||
import { View, Text } from "react-native-ui-lib";
|
||||
import React from "react";
|
||||
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import { ImageBackground, StyleSheet } from "react-native";
|
||||
import { colorMap } from "@/constants/colorMap";
|
||||
|
||||
const UsersList = () => {
|
||||
const { data: familyMembers } = useGetFamilyMembers();
|
||||
|
||||
const capitalizeFirstLetter = (str: string) => {
|
||||
if (!str) return '';
|
||||
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
|
||||
};
|
||||
|
||||
return (
|
||||
<View centerH paddingT-10>
|
||||
{familyMembers?.map((member, index) => (
|
||||
<>
|
||||
{member.pfp ? (
|
||||
<ImageBackground
|
||||
key={index}
|
||||
source={{ uri: member.pfp }}
|
||||
style={styles.pfp}
|
||||
borderRadius={100}
|
||||
/>
|
||||
) : (
|
||||
<View
|
||||
key={index}
|
||||
style={styles.pfp}
|
||||
center
|
||||
backgroundColor={member.eventColor || colorMap.teal}
|
||||
children={
|
||||
<Text color="white">
|
||||
{member.firstName.at(0)}
|
||||
{member.lastName.at(0)}
|
||||
</Text>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<Text style={styles.fName}>{member.firstName}</Text>
|
||||
<Text style={styles.role}>{capitalizeFirstLetter(member.userType)}</Text>
|
||||
</>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
pfp: {
|
||||
aspectRatio: 1,
|
||||
width: 113,
|
||||
borderRadius: 100,
|
||||
marginBottom: 8,
|
||||
},
|
||||
fName: {
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
fontSize: 18.15,
|
||||
},
|
||||
role: {
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
fontSize: 12.95,
|
||||
color: "#9b9b9b",
|
||||
marginBottom: 20,
|
||||
},
|
||||
});
|
||||
|
||||
export default UsersList;
|
||||
@ -84,7 +84,7 @@ const ToDoItem = (props: {
|
||||
style={{
|
||||
textDecorationLine: props.item.done ? "line-through" : "none",
|
||||
fontFamily: "Manrope_500Medium",
|
||||
color: props.item.done? "#a09f9f": "black",
|
||||
color: props.item.done ? "#a09f9f" : "black",
|
||||
fontSize: 15,
|
||||
}}
|
||||
onPress={() => {
|
||||
@ -191,7 +191,7 @@ const ToDoItem = (props: {
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#ccc",
|
||||
backgroundColor: member.eventColor || "#ccc",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: 100, // Circular shape
|
||||
|
||||
@ -64,6 +64,7 @@
|
||||
"expo-localization": "~15.0.3",
|
||||
"expo-notifications": "~0.28.19",
|
||||
"expo-router": "~3.5.20",
|
||||
"expo-screen-orientation": "~7.0.5",
|
||||
"expo-splash-screen": "~0.27.6",
|
||||
"expo-status-bar": "~1.12.1",
|
||||
"expo-system-ui": "~3.0.7",
|
||||
|
||||
@ -5543,6 +5543,11 @@ expo-router@~3.5.20:
|
||||
react-native-helmet-async "2.0.4"
|
||||
schema-utils "^4.0.1"
|
||||
|
||||
expo-screen-orientation@~7.0.5:
|
||||
version "7.0.5"
|
||||
resolved "https://registry.yarnpkg.com/expo-screen-orientation/-/expo-screen-orientation-7.0.5.tgz#0a517982151c6519fa4b10ce27047de39c1f92cf"
|
||||
integrity sha512-1j0MzVzYpjKQo4BWowQ3ZYwC3OnddX/8k06C8VYTAxMyd8ou1k+rG4tm+GIV2n2RSzc3g7cfPlQwSYr3/SGmbg==
|
||||
|
||||
expo-splash-screen@0.27.5:
|
||||
version "0.27.5"
|
||||
resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.27.5.tgz#bcc1ebb4e761e19a1f2112469f3d424a36fb1e2c"
|
||||
|
||||
Reference in New Issue
Block a user