From ab05e2acbdfb911e012a58ddf6e6735d74e9fa8a Mon Sep 17 00:00:00 2001
From: zart227 <zart227@gmail.com>
Date: Tue, 10 Sep 2024 14:32:47 +0300
Subject: [PATCH] Improve item selection, unique ID generation, and selection
 count display.

---
 src/app.js     | 12 ++++++++++--
 src/index.js   |  2 +-
 src/store.js   | 13 +++++++++++--
 src/styles.css |  6 ++++++
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/app.js b/src/app.js
index 8ad1c64b4..b333aff46 100644
--- a/src/app.js
+++ b/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>
diff --git a/src/index.js b/src/index.js
index faa61aa77..ac7274d0a 100644
--- a/src/index.js
+++ b/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';
 
diff --git a/src/store.js b/src/store.js
index 9afab7e81..67c21b205 100644
--- a/src/store.js
+++ b/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;
       }),
diff --git a/src/styles.css b/src/styles.css
index 67e37a9b3..9f8950bea 100644
--- a/src/styles.css
+++ b/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;
+}
\ No newline at end of file