add tabs translation, refactoring tab filter

Author: blitzard7

public/locales/de/translation.json

@@ -6,6 +6,9 @@
   "delete": "Löschen",
   "edit": "Bearbeiten",
   "done": "Fertig",
+  "allTab": "Alle",
+  "activeTab": "Offen",
+  "completedTab": "Abgeschlossen",
   "todoNameLabel": "Todo Name",
   "todoNamePlaceholder": "Gib einen Todo Namen ein",
   "todoDescriptionLabel": "Beschreibung",

public/locales/en/translation.json

@@ -6,6 +6,9 @@
   "delete": "Delete",
   "edit": "Edit",
   "done": "Done",
+  "allTab": "All",
+  "activeTab": "Active",
+  "completedTab": "Completed",
   "todoNameLabel": "Todo name",
   "todoNamePlaceholder": "Enter todo name",
   "todoDescriptionLabel": "Description",

src/lib/todo-filter.ts

@@ -0,0 +1,15 @@
+import type { Todo } from '@/store/todo-store';
+
+type TabValue = 'all' | 'active' | 'completed';
+
+const tabFilter: Record<TabValue, (todo: Todo) => boolean> = {
+  all: () => true,
+  active: (todo) => !todo.completed,
+  completed: (todo) => todo.completed,
+};
+
+function getTodosByTab(todos: Todo[], tab: TabValue): Todo[] {
+  return todos.filter(tabFilter[tab]);
+}
+
+export { getTodosByTab, type TabValue };

src/routes/index.tsx

@@ -1,4 +1,5 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { type TabValue, getTodosByTab } from '@/lib/todo-filter';
 import { useTodoStore } from '@/store/todo-store';
 import { ButtonLink, Header, SearchBar, TodoList } from '@/ui';
 import { createFileRoute } from '@tanstack/react-router';
@@ -10,12 +11,11 @@ export const Route = createFileRoute('/')({
 });
 
 function App() {
+  const { t } = useTranslation();
   const navigate = Route.useNavigate();
   const [searchQuery, setSearchQuery] = useState('');
+  const [tab, setTab] = useState<TabValue>('all');
   const todos = useTodoStore((state) => state.todos);
-  const deleteTodos = useTodoStore((state) => state.delete);
-
-  const { t } = useTranslation();
 
   const onSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
@@ -27,12 +27,13 @@ function App() {
 
   const lowerSearchQuery = searchQuery.toLowerCase();
   const filteredTodos = useMemo(() => {
-    return todos.filter(
+    const matchingTodos = todos.filter(
       (todo) =>
         todo.title.toLowerCase().includes(lowerSearchQuery) ||
         todo.description?.toLowerCase().includes(lowerSearchQuery),
     );
-  }, [todos, lowerSearchQuery]);
+    return getTodosByTab(matchingTodos, tab);
+  }, [todos, lowerSearchQuery, tab]);
 
   return (
     <div className="min-h-screen bg-gray-50 pt-16 space-y-8">
@@ -64,40 +65,18 @@ function App() {
         </div>
         <Tabs defaultValue="all" className="mt-4">
           <TabsList className="grid grid-cols-3 w-full max-w-md">
-            <TabsTrigger value="all">All</TabsTrigger>
-            <TabsTrigger
-              value="active"
-              onClick={() => filteredTodos.filter((todo) => !todo.completed)}
-            >
-              Active
+            <TabsTrigger value="all" onClick={() => setTab('all')}>
+              {t('allTab')}
             </TabsTrigger>
-            <TabsTrigger
-              value="completed"
-              onClick={() => filteredTodos.filter((todo) => todo.completed)}
-            >
-              Completed
+            <TabsTrigger value="active" onClick={() => setTab('active')}>
+              {t('activeTab')}
+            </TabsTrigger>
+            <TabsTrigger value="completed" onClick={() => setTab('completed')}>
+              {t('completedTab')}
             </TabsTrigger>
           </TabsList>
-          <TabsContent value="all">
-            <TodoList
-              todos={filteredTodos}
-              onDelete={deleteTodos}
-              onEdit={onEdit}
-            />
-          </TabsContent>
-          <TabsContent value="active">
-            <TodoList
-              todos={filteredTodos.filter((todo) => !todo.completed)}
-              onDelete={deleteTodos}
-              onEdit={onEdit}
-            />
-          </TabsContent>
-          <TabsContent value="completed">
-            <TodoList
-              todos={filteredTodos.filter((todo) => todo.completed)}
-              onDelete={deleteTodos}
-              onEdit={onEdit}
-            />
+          <TabsContent value={tab}>
+            <TodoList todos={filteredTodos} onEdit={onEdit} />
           </TabsContent>
         </Tabs>
       </div>

src/store/todo-store.ts

@@ -17,6 +17,7 @@ type TodoAction = {
   add: (todo: Omit<Todo, 'id'>) => void;
   delete: (id: string) => void;
   update: (id: string, updatedTodo: Omit<Todo, 'id'>) => void;
+  changeStatus: (id: string, isCompleted: boolean) => void;
 };
 
 const useTodoStore = create<TodoState & TodoAction>((set) => ({
@@ -41,6 +42,12 @@ const useTodoStore = create<TodoState & TodoAction>((set) => ({
         todo.id === id ? { ...updatedTodo, id } : todo,
       ),
     })),
+  changeStatus: (id: string, isCompleted: boolean) =>
+    set((state: TodoState) => ({
+      todos: state.todos.map((todo) =>
+        todo.id === id ? { ...todo, id, completed: isCompleted } : todo,
+      ),
+    })),
 }));
 
 const todoStore = useTodoStore;

src/ui/todos/todo-card.tsx

@@ -11,12 +11,14 @@ import { CheckIcon, ClockIcon, PriorityIcon } from '../icons';
 
 interface TodoCardProp {
   todo: Todo;
-  onDelete: (id: string) => void;
   onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
+  onChangeState: (id: string, state: boolean) => void;
 }
 
-function TodoCard({ todo, onDelete, onEdit }: TodoCardProp) {
+function TodoCard({ todo, onDelete, onEdit, onChangeState }: TodoCardProp) {
   const { t } = useTranslation();
+
   const colorClasses = {
     high: 'bg-red-100 text-red-800',
     medium: 'bg-yellow-100 text-yellow-800',
@@ -40,7 +42,7 @@ function TodoCard({ todo, onDelete, onEdit }: TodoCardProp) {
               </svg>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
-              <DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onChangeState(todo.id, true)}>
                 <CheckIcon className="h-4 w-4 mr-2" />
                 <span>{t('done')}</span>
               </DropdownMenuItem>

src/ui/todos/todo-list.tsx

@@ -1,13 +1,15 @@
-import type { Todo } from '@/store/todo-store';
+import { useTodoStore, type Todo } from '@/store/todo-store';
 import { EmptyTodoList, TodoCard } from '@/ui/todos';
 
 interface TodoListProps {
   todos: Todo[];
-  onDelete: (id: string) => void;
   onEdit: (id: string) => void;
 }
 
-function TodoList({ todos, onDelete, onEdit }: TodoListProps) {
+function TodoList({ todos, onEdit }: TodoListProps) {
+  const onDelete = useTodoStore((state) => state.delete);
+  const onChangeState = useTodoStore((state) => state.changeStatus);
+
   if (todos.length === 0) {
     return <EmptyTodoList />;
   }
@@ -23,6 +25,7 @@ function TodoList({ todos, onDelete, onEdit }: TodoListProps) {
           todo={todo}
           onDelete={onDelete}
           onEdit={onEdit}
+          onChangeState={onChangeState}
         />
       ))}
     </div>