import { useState } from "react"; import { useStore, Provider, connect, useCommit } from "@bylin/sote"; import { todoStore, TodoStoreState, TodoStoreValue, TodoStoreActions } from "./store"; import "./index.css"; const Time = () => { const commit = useCommit(); const store = useStore({ mapState: (s: TodoStoreState) => ({ time: s.date.time }) }); console.log("Time render"); return (

{ commit((state) => { state.date.time = new Date().toLocaleTimeString(); }); }} > {store.time}

); }; const Header = connect({ mapState: (s: TodoStoreState) => ({ display: s.date.display }), mapActions: (a: TodoStoreActions) => ({ toggleTimeDisplay: a.toggleTimeDisplay }) })(({ display, toggleTimeDisplay }) => { console.log("Header render"); return (

To Do List

{display && }

); }); const ToDoList = () => { const store = useStore({ mapState: (s: TodoStoreState) => ({ todoList: s.todoList }), mapActions: (a: TodoStoreActions) => a }); const handleToggle = (id) => { let mapped = store.todoList.map((task) => { return task.id === Number(id) ? { ...task, complete: !task.complete } : { ...task }; }); store.setToDoList(mapped); }; const handleFilter = () => { let filtered = store.todoList.filter((task) => { return !task.complete; }); store.setToDoList(filtered); }; console.log("ToDoList render"); return (

{store.todoList.map((todo, i) => { return ; })}

); }; const ToDo = ({ todo, handleToggle }) => { const handleClick = (e) => { e.preventDefault(); handleToggle(e.currentTarget.id); }; return (

{todo.task}

); }; const ToDoForm = () => { const [userInput, setUserInput] = useState(""); // subscribe map store const store = useStore({ mapState: (s: TodoStoreState) => ({ todoList: s.todoList }), mapActions: (a: TodoStoreActions) => a }); const addTask = (userInput) => { store.addToDo({ id: store.todoList.length + 1, task: userInput, complete: false }); }; const handleChange = (e) => { setUserInput(e.currentTarget.value); }; const handleSubmit = (e) => { e.preventDefault(); addTask(userInput); setUserInput(""); }; const handleWaitSubmit = (e) => { e.preventDefault(); store.waitAddToDo(userInput); setUserInput(""); }; console.log("ToDoForm render"); return ( ); }; function App() { return (

); } export default () => ( );

sote-dev