45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import { useState } from "react";
|
|
import { View } from "react-native";
|
|
|
|
import { Todo } from "@/store/models/Todo.model";
|
|
import { useAppSelector } from "@/store/hooks";
|
|
import { selectIsMobile } from "@/store/screen/screenSizeSlice";
|
|
import { TodoDetailsModal } from "@/components/features/todos/TodoDetailsModal";
|
|
import { MobileTodoListItem } from "@/components/features/dashboard/todo/MobileTodoListItem";
|
|
import { DesktopTodoListItem } from "@/components/features/dashboard/todo/DesktopTodoListItem";
|
|
|
|
interface ToDoListItemProps {
|
|
item: Todo;
|
|
}
|
|
|
|
export const ToDoListItem = ({ item }: ToDoListItemProps) => {
|
|
const isMobile = useAppSelector(selectIsMobile);
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
|
|
return (
|
|
<View className="bg-white rounded-lg p-4 mb-3 shadow-sm">
|
|
<View className="flex-row items-center justify-between mb-2">
|
|
{isMobile ? (
|
|
<MobileTodoListItem
|
|
dialogOpen={dialogOpen}
|
|
setDialogOpen={setDialogOpen}
|
|
item={item}
|
|
/>
|
|
) : (
|
|
<DesktopTodoListItem
|
|
dialogOpen={dialogOpen}
|
|
setDialogOpen={setDialogOpen}
|
|
item={item}
|
|
/>
|
|
)}
|
|
</View>
|
|
|
|
<TodoDetailsModal
|
|
visible={dialogOpen}
|
|
todo={item}
|
|
onClose={() => setDialogOpen(false)}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|