import { useSyncedStore } from "@syncedstore/react" ; import React from "react" ; import { globalStore } from "./store" ; import { TodoItem } from "./TodoItem" ; export function TodoList ( props ) { const store = useSyncedStore ( globalStore ) ; const activeTodos = store . todos . filter ( ( t ) => ! t . completed ) ; const completedTodos = store . todos . filter ( ( t ) => t . completed ) ; const shownTodos = props . view === "all" ? store . todos : props . view === "active" ? activeTodos : completedTodos ; return ( < ul className = "todo-list" > { } { shownTodos . map ( ( todo , i ) => ( < TodoItem todo = { todo } key = { i } / > ) ) } < /ul>); }