70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import { View, Text } from "react-native";
|
|
|
|
import { useGetTodosByUserQuery } from "@/store/api/todosApi";
|
|
import { PriorityIndicator } from "@/components/ui/PriorityIndicator";
|
|
import { SizeEnum } from "@/constants/sizeEnum";
|
|
import { StatusTableItem } from "@/components/ui/StatusTableItem";
|
|
import { User } from "@/store/models/User.model";
|
|
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
|
|
import { NoData } from "@/components/ui/NoData";
|
|
|
|
interface PersonalTodoListProps {
|
|
user: User;
|
|
}
|
|
|
|
export const PersonalTodoList = ({ user }: PersonalTodoListProps) => {
|
|
const {
|
|
data: todos,
|
|
isLoading,
|
|
isFetching,
|
|
error,
|
|
refetch,
|
|
} = useGetTodosByUserQuery(user.id, { skip: !user.id });
|
|
|
|
return (
|
|
<View className="bg-lightGray rounded-md">
|
|
<Text className="font-medium mt-0 mb-4 text-gray-600">To-Do List:</Text>
|
|
{isLoading ? (
|
|
<LoadingSpinner />
|
|
) : error ? (
|
|
<NoData
|
|
onRetry={refetch}
|
|
message="Failed to load todos"
|
|
isRetrying={isFetching}
|
|
/>
|
|
) : todos && todos.length > 0 ? (
|
|
<View style={{ gap: 8 }}>
|
|
{todos.map((todo) => (
|
|
<View
|
|
key={todo.id}
|
|
className="bg-white rounded-lg p-4 mb-3 shadow-sm"
|
|
>
|
|
<View className="flex-row items-center justify-between mb-2">
|
|
<Text
|
|
className="text-base font-medium flex-1 mr-2"
|
|
numberOfLines={10}
|
|
>
|
|
{todo.task}
|
|
</Text>
|
|
<View className="flex-row items-center gap-2">
|
|
<StatusTableItem todoStatus={todo.status} />
|
|
<PriorityIndicator
|
|
priority={todo.priority}
|
|
size={SizeEnum.Small}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
) : (
|
|
<Text className="font-medium text-black">
|
|
{user.role === "USER"
|
|
? "No todos assigned for this user"
|
|
: "No todos assigned"}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|