finished first home task

package.json

@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/ylabio/react-webinar-3#readme",
   "dependencies": {
+    "numeralize-ru": "^2.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -31,9 +32,9 @@
     "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.0",
     "mini-css-extract-plugin": "^2.9.1",
+    "prettier": "3.3.3",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0",
-    "prettier": "3.3.3"
+    "webpack-dev-server": "^5.1.0"
   }
 }

src/app.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createElement } from './utils.js';
 import './styles.css';
+import { getClicksCount } from './utils.js';
 
 /**
  * Приложение
@@ -27,7 +28,7 @@ function App({ store }) {
                 onClick={() => store.selectItem(item.code)}
               >
                 <div className="Item-code">{item.code}</div>
-                <div className="Item-title">{item.title}</div>
+                <div className="Item-title">{item.title}{getClicksCount(item)}</div>
                 <div className="Item-actions">
                   <button onClick={() => store.deleteItem(item.code)}>Удалить</button>
                 </div>

src/index.js

@@ -3,16 +3,17 @@ import { createRoot } from 'react-dom/client';
 import { createElement } from './utils.js';
 import App from './app.js';
 import Store from './store.js';
+import { getRandomNumber } from './utils.js';
 
 const store = new Store({
   list: [
-    { code: 1, title: 'Название элемента' },
-    { code: 2, title: 'Некий объект' },
-    { code: 3, title: 'Заголовок' },
-    { code: 4, title: 'Очень длинное название элемента из семи слов' },
-    { code: 5, title: 'Запись' },
-    { code: 6, title: 'Шестая запись' },
-    { code: 7, title: 'Седьмая запись' },
+    { code: getRandomNumber(), title: 'Название элемента' },
+    { code: getRandomNumber(), title: 'Некий объект' },
+    { code: getRandomNumber(), title: 'Заголовок' },
+    { code: getRandomNumber(), title: 'Очень длинное название элемента из семи слов' },
+    { code: getRandomNumber(), title: 'Запись' },
+    { code: getRandomNumber(), title: 'Шестая запись' },
+    { code: getRandomNumber(), title: 'Седьмая запись' },
   ],
 });
 

src/store.js

@@ -1,3 +1,4 @@
+import { getRandomNumber } from "./utils";
 /**
  * Хранилище состояния приложения
  */
@@ -44,7 +45,7 @@ class Store {
   addItem() {
     this.setState({
       ...this.state,
-      list: [...this.state.list, { code: this.state.list.length + 1, title: 'Новая запись' }],
+      list: [...this.state.list, { code: getRandomNumber(), title: 'Новая запись' }],
     });
   }
 
@@ -69,6 +70,11 @@ class Store {
       list: this.state.list.map(item => {
         if (item.code === code) {
           item.selected = !item.selected;
+        } else {
+          item.selected = '';
+        }
+        if (item.selected) {
+          item.clickedTimes = item.clickedTimes ? item.clickedTimes + 1 : 1;
         }
         return item;
       }),

src/utils.js

@@ -1,3 +1,5 @@
+import { pluralize } from "numeralize-ru";
+
 const propNames = new Set(['id', 'className', 'textContent', 'onclick']);
 
 /**
@@ -26,3 +28,19 @@ export function createElement(name, props = {}, ...children) {
 
   return element;
 }
+
+function generateRandomNumber() {
+  let number = 1;
+    return function() {
+        return number++;
+    };
+}
+
+export const getRandomNumber = generateRandomNumber();
+
+export function getClicksCount(item) {
+  if (!item.clickedTimes) {
+    return '';
+  }
+  return ` | Выделили ${item.clickedTimes} ${pluralize(item.clickedTimes, 'раз', 'раза', 'раз')}`;
+}