diff --git a/package-lock.json b/package-lock.json
index b7f1663b1..7fac695ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "1.0.0",
"license": "ISC",
"dependencies": {
+ "numeralize-ru": "^2.0.0",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
@@ -4873,6 +4874,12 @@
"url": "https://github.com/fb55/nth-check?sponsor=1"
}
},
+ "node_modules/numeralize-ru": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/numeralize-ru/-/numeralize-ru-2.0.0.tgz",
+ "integrity": "sha512-6EDlOoJ/Bf7vhNzotsbDo9pWQBMd3aYDom3yAl2lj6sYeNEcNbZFbuWgstBq2w2HGXoBOhvSWdNhicZSetTiFQ==",
+ "license": "MIT"
+ },
"node_modules/object-inspect": {
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
@@ -10168,6 +10175,11 @@
"boolbase": "^1.0.0"
}
},
+ "numeralize-ru": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/numeralize-ru/-/numeralize-ru-2.0.0.tgz",
+ "integrity": "sha512-6EDlOoJ/Bf7vhNzotsbDo9pWQBMd3aYDom3yAl2lj6sYeNEcNbZFbuWgstBq2w2HGXoBOhvSWdNhicZSetTiFQ=="
+ },
"object-inspect": {
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
diff --git a/package.json b/package.json
index 52df4d73f..110fd07df 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/src/app.js b/src/app.js
index 8ad1c64b4..b311b80a7 100644
--- a/src/app.js
+++ b/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)}
>
{item.code}
- {item.title}
+ {item.title}{getClicksCount(item)}
diff --git a/src/index.js b/src/index.js
index faa61aa77..f8108ab67 100644
--- a/src/index.js
+++ b/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: 'Седьмая запись' },
],
});
diff --git a/src/store.js b/src/store.js
index 9afab7e81..975ec543f 100644
--- a/src/store.js
+++ b/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;
}),
diff --git a/src/utils.js b/src/utils.js
index d1b605243..e98de35b6 100644
--- a/src/utils.js
+++ b/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, 'раз', 'раза', 'раз')}`;
+}