Improve item selection, unique ID generation, and selection count dis…

…play.

src/app.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createElement } from './utils.js';
+// import { createElement } from './utils.js';
 import './styles.css';
 
 /**
@@ -28,8 +28,16 @@ function App({ store }) {
               >
                 <div className="Item-code">{item.code}</div>
                 <div className="Item-title">{item.title}</div>
+                {item.selectionCount > 0 && (
+                  <div className="Item-selectionCount">
+                    Выделяли {item.selectionCount} раз
+                  </div>
+                )}
                 <div className="Item-actions">
-                  <button onClick={() => store.deleteItem(item.code)}>Удалить</button>
+                  <button onClick={(e) => {
+                    e.stopPropagation();
+                    store.deleteItem(item.code)
+                  }}>Удалить</button>
                 </div>
               </div>
             </div>

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { createElement } from './utils.js';
+// 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,
+      nextCode: initState.list.length + 1, // Начальное значение для уникальных кодов
+    }
     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.nextCode, title: 'Новая запись' }],
+      nextCode: this.state.nextCode + 1,
     });
   }
 
@@ -69,6 +73,11 @@ class Store {
       list: this.state.list.map(item => {
         if (item.code === code) {
           item.selected = !item.selected;
+          if (item.selected) {
+            item.selectionCount = (item.selectionCount || 0) + 1;
+          }          
+        } else {
+          item.selected = false;
         }
         return item;
       }),

src/styles.css

@@ -59,3 +59,9 @@ body {
   justify-content: flex-end;
   padding: 20px 20px 20px 10px;
 }
+
+.Item-selectionCount {
+  font-size: 12px;
+  color: #888;
+  padding: 5px 0;
+}