lesson2

src/app.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { createElement } from './utils.js';
 import './styles.css';
 
 /**
@@ -8,8 +7,8 @@ import './styles.css';
  * @returns {React.ReactElement}
  */
 function App({ store }) {
+  console.log(store.getState())
   const list = store.getState().list;
-
   return (
     <div className="App">
       <div className="App-head">
@@ -28,6 +27,7 @@ function App({ store }) {
               >
                 <div className="Item-code">{item.code}</div>
                 <div className="Item-title">{item.title}</div>
+                {item.countClick && <div className="Item-click">{`Выделяли ${item.countClick} раз`}</div>}
                 <div className="Item-actions">
                   <button onClick={() => store.deleteItem(item.code)}>Удалить</button>
                 </div>

src/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { createElement } from './utils.js';
 import App from './app.js';
 import Store from './store.js';
 

src/store.js

@@ -3,7 +3,10 @@
  */
 class Store {
   constructor(initState = {}) {
-    this.state = initState;
+    this.state = {
+      ...initState,
+      lastCodeList: initState.list.at(-1).code
+    };
     this.listeners = []; // Слушатели изменений состояния
   }
 
@@ -44,7 +47,8 @@ class Store {
   addItem() {
     this.setState({
       ...this.state,
-      list: [...this.state.list, { code: this.state.list.length + 1, title: 'Новая запись' }],
+      list: [...this.state.list, { code: this.state.lastCodeList + 1, title: `Новая запись ${this.state.lastCodeList + 1}` }],
+      lastCodeList: this.state.lastCodeList + 1
     });
   }
 
@@ -68,9 +72,14 @@ class Store {
       ...this.state,
       list: this.state.list.map(item => {
         if (item.code === code) {
-          item.selected = !item.selected;
+          return {
+            ...item,
+            selected: !item.selected,
+            countClick: item.countClick === undefined ? 1
+              : !item.selected ? item.countClick + 1 : item.countClick
+          }
         }
-        return item;
+        return { ...item, selected: false };
       }),
     });
   }

src/styles.css

@@ -54,8 +54,13 @@ body {
   padding: 20px 10px;
 }
 
+.Item-click {
+  width: 100%;
+  padding: 20px 10px;
+}
+
 .Item-actions {
   display: flex;
   justify-content: flex-end;
   padding: 20px 20px 20px 10px;
-}
+}