done

Author: kamenskiyyyy

package.json

@@ -13,6 +13,8 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "effector": "^22.1.2",
+    "effector-react": "^22.0.5",
     "framer-motion": ">=3.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

src/components/TodoAdd.tsx

@@ -1,11 +1,15 @@
 import * as React from "react";
-import { Button, Input, Grid } from "@chakra-ui/react";
+import {Button, Grid, Input} from "@chakra-ui/react";
+import {useStore} from "effector-react";
+import {$store, addTodo, setNewTodo} from "../store";
 
 function TodoAdd() {
+  const store = useStore($store)
+
   return (
     <Grid pt={2} templateColumns="5fr 1fr" columnGap="3">
-      <Input placeholder="New todo" />
-      <Button>Add Todo</Button>
+      <Input placeholder="New todo" value={store.newTodo} onChange={(e) => setNewTodo(e.target.value)}/>
+      <Button onClick={() => addTodo()}>Add Todo</Button>
     </Grid>
   );
 }

src/components/TodoList.tsx

@@ -1,14 +1,18 @@
 import * as React from "react";
-import { Button, Input, Flex, Checkbox, Heading } from "@chakra-ui/react";
+import {Button, Checkbox, Flex, Heading, Input} from "@chakra-ui/react";
+import {useStore} from "effector-react";
+import {$store, remove, toggle, update} from "../store";
 
 function TodoListItems() {
+  const store = useStore($store);
+
   return (
     <>
-      {[].map((todo: { id: number; text: string }) => (
-        <Flex pt={2} key={todo.id}>
-          <Checkbox />
-          <Input mx={2} value={todo.text} />
-          <Button>Delete</Button>
+      {store.todos.map(({id, done, text}) => (
+        <Flex pt={2} key={id}>
+          <Checkbox checked={done} onClick={() => toggle(id)}/>
+          <Input mx={2} value={text} onChange={(e) => update({id, text: e.target.value})}/>
+          <Button onClick={() => remove(id)}>Delete</Button>
         </Flex>
       ))}
     </>

src/components/TopBar.tsx

@@ -1,16 +1,15 @@
 import * as React from "react";
-import { Button, Grid } from "@chakra-ui/react";
-import { ColorModeSwitcher } from "./ColorModeSwitcher";
+import {Button, Grid} from "@chakra-ui/react";
+import {ColorModeSwitcher} from "./ColorModeSwitcher";
+import {load} from "../store";
 
-/*
-JSON source: https://raw.githubusercontent.com/jherr/todos-four-ways/master/data/todos.json
-*/
+const url = "https://raw.githubusercontent.com/jherr/todos-four-ways/master/data/todos.json";
 
 function TopBar() {
   return (
     <Grid pt={2} templateColumns="1fr 1fr" columnGap="3">
-      <ColorModeSwitcher />
-      <Button>Load</Button>
+      <ColorModeSwitcher/>
+      <Button onClick={() => load(url)}>Load</Button>
     </Grid>
   );
 }

src/store.ts

@@ -1,11 +1,14 @@
 // Standard interface and functions
+
+import {createEffect, createEvent, createStore} from "effector";
+
 export interface Todo {
   id: number;
   text: string;
   done: boolean;
 }
 
-export const updateTodo = (todos: Todo[], id: number, text: string): Todo[] =>
+const updateTodo = (todos: Todo[], id: number, text: string): Todo[] =>
   todos.map((todo) => ({
     ...todo,
     text: todo.id === id ? text : todo.text,
@@ -20,11 +23,42 @@ export const toggleTodo = (todos: Todo[], id: number): Todo[] =>
 export const removeTodo = (todos: Todo[], id: number): Todo[] =>
   todos.filter((todo) => todo.id !== id);
 
-export const addTodo = (todos: Todo[], text: string): Todo[] => [
+export const addTodoToList = (todos: Todo[], text: string): Todo[] => [
   ...todos,
   {
-    id: Math.max(0, Math.max(...todos.map(({ id }) => id))) + 1,
+    id: Math.max(0, Math.max(...todos.map(({id}) => id))) + 1,
     text,
     done: false,
   },
 ];
+
+// Effector state implementation
+type Store = {
+  todos: Todo[];
+  newTodo: string;
+}
+
+export const setNewTodo = createEvent<string>()
+export const addTodo = createEvent()
+export const update = createEvent<{ id: number, text: string }>()
+export const toggle = createEvent<number>()
+export const remove = createEvent<number>()
+
+export const load = createEffect(async (url: string) => {
+  const req = await fetch(url)
+  return req.json()
+})
+
+export const $store = createStore<Store>({todos: [], newTodo: ''})
+  .on(load.doneData, (state, todos) => ({...state, todos}))
+  .on(setNewTodo, (state, newTodo) => ({...state, newTodo}))
+  .on(addTodo, (state) => ({...state, newTodo: "", todos: addTodoToList(state.todos, state.newTodo)}))
+  .on(update, (state, {id, text}) => ({
+    ...state, newTodo: "", todos: updateTodo(state.todos, id, text)
+  }))
+  .on(toggle, (state, id) => ({
+    ...state, todos: toggleTodo(state.todos, id)
+  }))
+  .on(remove, (state, id) => ({
+    ...state, todos: removeTodo(state.todos, id)
+  }))

yarn.lock

@@ -4926,6 +4926,16 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
+effector-react@^22.0.5:
+  version "22.0.5"
+  resolved "https://registry.yarnpkg.com/effector-react/-/effector-react-22.0.5.tgz#3632d2858a32d9a0aede1d65d81be1cfdca23a93"
+  integrity sha512-JcqI3c557QRY2k+QsZjj+QdGXQprc8AwgUtUChzztzPC+PYwdvHkTlDJhd+rcO2CPtL2YWAClHDAsuO4NXFSBA==
+
+effector@^22.1.2:
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/effector/-/effector-22.1.2.tgz#5edf2aea4d6b5ae932a2a9c75312804c50e3fe55"
+  integrity sha512-myJlmwZbaoNV5YYaRmM4QhAQeUqpbnmmUXZkACzuhV/2z49qCByC4DT62hghHpGz6Knr/sbB4sAAZ8VJCUYy2g==
+
 ejs@^2.6.1:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"