From 7b238b81cbcaf419c878fb267ff564e6d859d9da Mon Sep 17 00:00:00 2001 From: maxim Date: Tue, 10 Sep 2024 13:38:56 +0300 Subject: [PATCH 1/2] finished first home task --- src/app.js | 3 ++- src/index.js | 15 ++++++++------- src/store.js | 6 +++++- src/utils.js | 16 ++++++++++++++++ 4 files changed, 31 insertions(+), 9 deletions(-) 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..a62364c64 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,9 @@ class Store { list: this.state.list.map(item => { if (item.code === code) { item.selected = !item.selected; + item.clickedTimes = item.clickedTimes ? item.clickedTimes + 1 : 1; + } else { + item.selected = ''; } return item; }), diff --git a/src/utils.js b/src/utils.js index d1b605243..0c4eacee3 100644 --- a/src/utils.js +++ b/src/utils.js @@ -26,3 +26,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} раз`; +} From 4d82815038f94898a68112f0a97e635901a18ee4 Mon Sep 17 00:00:00 2001 From: maxim Date: Tue, 10 Sep 2024 19:57:51 +0300 Subject: [PATCH 2/2] fixed backlight && pluralization --- package-lock.json | 12 ++++++++++++ package.json | 5 +++-- src/store.js | 4 +++- src/utils.js | 4 +++- 4 files changed, 21 insertions(+), 4 deletions(-) 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/store.js b/src/store.js index a62364c64..975ec543f 100644 --- a/src/store.js +++ b/src/store.js @@ -70,10 +70,12 @@ class Store { list: this.state.list.map(item => { if (item.code === code) { item.selected = !item.selected; - item.clickedTimes = item.clickedTimes ? item.clickedTimes + 1 : 1; } 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 0c4eacee3..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']); /** @@ -40,5 +42,5 @@ export function getClicksCount(item) { if (!item.clickedTimes) { return ''; } - return ` | Выделили ${item.clickedTimes} раз`; + return ` | Выделили ${item.clickedTimes} ${pluralize(item.clickedTimes, 'раз', 'раза', 'раз')}`; }