project setup

components/features/dashboard/todo/DesktopTodoListItem.tsx

@@ -0,0 +1,45 @@
+import { View, Pressable } from "react-native";
+import { Text } from "react-native-paper";
+
+import { Todo } from "@/store/models/Todo.model";
+import { PriorityIndicator } from "@/components/ui/PriorityIndicator";
+import { SizeEnum } from "@/constants/sizeEnum";
+import { StatusTableItem } from "@/components/ui/StatusTableItem";
+import { Ionicons } from "@expo/vector-icons";
+
+interface DesktopTodoListItemProps {
+  item: Todo;
+  dialogOpen: boolean;
+  setDialogOpen: (open: boolean) => void;
+}
+
+export const DesktopTodoListItem = ({
+  item,
+  dialogOpen,
+  setDialogOpen,
+}: DesktopTodoListItemProps) => {
+  return (
+    <View className="flex-1">
+      <View className="flex-row items-center">
+        <Text className="text-base font-medium flex-1 mr-2" numberOfLines={1}>
+          {item.title || item.task}
+        </Text>
+        <View className="flex-row items-center gap-2">
+          <StatusTableItem todoStatus={item.status} />
+          <PriorityIndicator priority={item.priority} size={SizeEnum.Small} />
+        </View>
+        <Pressable onPress={() => setDialogOpen(true)}>
+          <Ionicons
+            name="eye-outline"
+            size={20}
+            color="black"
+            style={{ marginLeft: 5 }}
+          />
+        </Pressable>
+      </View>
+      <Text className="text-sm text-gray-700 mt-0.5" numberOfLines={2}>
+        {item.task}
+      </Text>
+    </View>
+  );
+};

components/features/dashboard/todo/MobileTodoListItem.tsx

@@ -0,0 +1,50 @@
+import { Pressable, View } from "react-native";
+import { Badge, Text } from "react-native-paper";
+
+import { SizeEnum } from "@/constants/sizeEnum";
+import { TodoStatusColors } from "@/constants/todoStatusEnum";
+import { Ionicons } from "@expo/vector-icons";
+import { Todo } from "@/store/models/Todo.model";
+import { PriorityIndicator } from "@/components/ui/PriorityIndicator";
+
+interface MobileTodoListItemProps {
+  item: Todo;
+  dialogOpen: boolean;
+  setDialogOpen: (open: boolean) => void;
+}
+
+export const MobileTodoListItem = ({
+  item,
+  dialogOpen,
+  setDialogOpen,
+}: MobileTodoListItemProps) => {
+  return (
+    <View className="flex-1">
+      <View className="flex-row items-center mb-2">
+        <View className="mr-2">
+          <Badge
+            size={12}
+            style={{ backgroundColor: TodoStatusColors[item.status] }}
+          />
+        </View>
+        <Text className="font-bold flex-1 flex-wrap" numberOfLines={0}>
+          {item.title}
+        </Text>
+        <View className="ml-2">
+          <PriorityIndicator priority={item.priority} size={SizeEnum.Small} />
+        </View>
+        <Pressable onPress={() => setDialogOpen(true)}>
+          <Ionicons
+            name="eye-outline"
+            size={20}
+            color="black"
+            style={{ marginLeft: 5 }}
+          />
+        </Pressable>
+      </View>
+      <Text className="text-sm text-gray-600" numberOfLines={2}>
+        {item.task}
+      </Text>
+    </View>
+  );
+};

components/features/dashboard/todo/ToDoList.tsx

@@ -0,0 +1,28 @@
+import { FlatList, Text, View } from "react-native";
+
+import { ToDoListItem } from "@/components/features/dashboard/todo/ToDoListItem";
+import { Todo } from "@/store/models/Todo.model";
+
+interface ToDoListProps {
+  todos: Todo[];
+  emptyMessage?: string;
+}
+
+export const ToDoList = ({ todos, emptyMessage }: ToDoListProps) => {
+  if (todos?.length === 0) {
+    return (
+      <View className="flex-1 justify-center items-center py-10">
+        <Text className="mt-2">{emptyMessage}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <FlatList
+      data={todos}
+      renderItem={({ item }) => <ToDoListItem item={item} />}
+      keyExtractor={(item) => item.id}
+      contentContainerStyle={{ paddingBottom: 20 }}
+    />
+  );
+};

components/features/dashboard/todo/ToDoListItem.tsx

@@ -0,0 +1,44 @@
+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>
+  );
+};