chatbotTG1

src/App.js

@@ -1,54 +1,17 @@
-import React, { useState } from 'react';
-import fs from 'fs';
-import { Route, Router, Text, ButtonGroup, Button, useText, Image } from '@urban-bot/core';
-import logo from './assets/logo.jpg';
-
-function Echo() {
-    const [text, setText] = useState('Say something');
-
-    useText(({ text }) => {
-        setText(text);
-    });
-
-    return (
-        <Text>
-            <i>{text}</i>
-        </Text>
-    );
-}
-
-function Logo() {
-    const [title, setTitle] = useState('Urban Bot');
-
-    const addRobot = () => {
-        setTitle(title + '🤖');
-    };
-
-    return (
-        <Image
-            title={title}
-            file={fs.createReadStream(logo)}
-            buttons={
-                <ButtonGroup>
-                    <Button onClick={addRobot}>Add robot</Button>
-                </ButtonGroup>
-            }
-        />
-    );
-}
+import { Text } from '@urban-bot/core';
+import React from 'react';
+import { Logo } from './Logo';
+import { TodoList } from './TodoList';
 
 export function App() {
     return (
         <>
-            <Text>Welcome to My Macbaren Bot!!! Type /echo or /logo.</Text>
-            <Router>
-                <Route path="/echo">
-                    <Echo />
-                </Route>
-                <Route path="/logo">
-                    <Logo />
-                </Route>
-            </Router>
+            <Logo />
+            <Text>
+                <strong>Welcome to Macbaren todo list</strong>
+            </Text>
+            <Text>Type your new todo.</Text>
+            <TodoList />
         </>
     );
 }

src/Logo.js

@@ -0,0 +1,7 @@
+import { Image } from '@urban-bot/core';
+import React from 'react';
+import logo from './assets/logo.jpg';
+
+export function Logo() {
+    return <Image file={logo} />;
+}

src/TodoList.js

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { useText, Button, ButtonGroup, Text } from '@urban-bot/core';
+
+const DELETE_TODOS_MODE = 'DELETE_TODOS_MODE';
+const COMPLETE_TODOS_MODE = 'COMPLETE_TODOS_MODE';
+
+export function TodoList() {
+    const [mode, setMode] = React.useState(COMPLETE_TODOS_MODE);
+    const [todos, setTodos] = useState([]);
+
+    function addTodo(text) {
+        const newTodo = { text, id: Math.random(), isCompleted: false };
+
+        setTodos([...todos, newTodo]);
+    }
+
+    function deleteTodo(deletedId) {
+        const newTodos = todos.filter(({ id }) => id !== deletedId);
+
+        setTodos(newTodos);
+    }
+
+    function toggleTodo(toggledId) {
+        const newTodos = todos.map((todo) => {
+            if (todo.id === toggledId) {
+                return {
+                    ...todo,
+                    isCompleted: !todo.isCompleted,
+                };
+            }
+
+            return todo;
+        });
+
+        setTodos(newTodos);
+    }
+
+    function toggleMode() {
+        setMode(mode === DELETE_TODOS_MODE ? COMPLETE_TODOS_MODE : DELETE_TODOS_MODE);
+    }
+
+    function clickTodo(id) {
+        if (mode === DELETE_TODOS_MODE) {
+            deleteTodo(id);
+        } else {
+            toggleTodo(id);
+        }
+    }
+
+    useText(({ text }) => {
+        addTodo(text);
+    });
+
+    if (todos.length === 0) {
+        return <Text>Now todo list is empty</Text>;
+    }
+
+    const title = todos.map((todo) => (
+        <>
+            {todo.isCompleted ? <s>{todo.text}</s> : todo.text}
+            <br />
+        </>
+    ));
+
+    const todosButtons = todos.map(({ text, id }) => (
+        <Button key={id} onClick={() => clickTodo(id)}>
+            {text}
+        </Button>
+    ));
+
+    return (
+        <ButtonGroup title={title} maxColumns={3}>
+            <Button key={mode} onClick={toggleMode}>
+                {mode === DELETE_TODOS_MODE ? 'Режим удаления' : 'Режим выполнения'}
+            </Button>
+            {todosButtons}
+        </ButtonGroup>
+    );
+}

src/render/telegram.js

@@ -20,7 +20,7 @@ const urbanBotTelegram = new UrbanBotTelegram({
 });
 
 render(
-    <Root bot={urbanBotTelegram} port={PORT ? Number(PORT) : undefined}>
+    <Root bot={urbanBotTelegram} port={PORT ? Number(PORT) : undefined} isNewMessageEveryRender={false}>
         <App />
     </Root>,
     () => console.log('telegram bot has started'),