From 62162b9fd3ae892695e61ef80e7ebba3df1f82f4 Mon Sep 17 00:00:00 2001 From: Sergey Lebedev Date: Thu, 5 May 2022 20:54:02 +0300 Subject: [PATCH 1/7] hw2 --- src/App.js | 40 +++++++++++++++++++++++++++++++++++----- 1 file changed, 35 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index 65b81b4..8c78aa9 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,43 @@ import './App.css'; -import Message from './Message'; +import React, {useEffect} from "react"; +import {useState} from "react"; function App() { - const myText = "Tasks from Lesson 1 complete"; + const[messageList, setMessageList] = useState([]); + const[author, setAuthor] = useState(""); + const[message, setMessage] = useState(""); +//comment + let idCounter = messageList.length; + + useEffect(() => { + if(messageList.length > 0) + setTimeout(() => alert("Message send"), 1500) + }, [messageList]); + return ( -
- +
+ <> + setAuthor(e.target.value)}/> +
+ setMessage(e.target.value)}/> +
+ + + {messageList.map((item) => +

Author: {item.author}
Say: {item.text}

+ )} + +
+ ); + } -export default App; \ No newline at end of file +export default App; From 9268e0f8d788a7811864ae5db5b77ad4cc531802 Mon Sep 17 00:00:00 2001 From: Sergey Lebedev Date: Tue, 10 May 2022 02:13:07 +0300 Subject: [PATCH 2/7] last update --- .idea/.gitignore | 5 +++++ .idea/inspectionProfiles/Project_Default.xml | 6 ++++++ .idea/modules.xml | 8 ++++++++ .idea/myfirstapp.iml | 12 ++++++++++++ .idea/vcs.xml | 6 ++++++ src/App.js | 6 +----- 6 files changed, 38 insertions(+), 5 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/myfirstapp.iml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..03d9549 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..5a53714 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/myfirstapp.iml b/.idea/myfirstapp.iml new file mode 100644 index 0000000..0c8867d --- /dev/null +++ b/.idea/myfirstapp.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/App.js b/src/App.js index 8c78aa9..b2ddd70 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,10 @@ import './App.css'; -import React, {useEffect} from "react"; -import {useState} from "react"; +import React, {useEffect, useState} from "react"; function App() { const[messageList, setMessageList] = useState([]); const[author, setAuthor] = useState(""); const[message, setMessage] = useState(""); -//comment let idCounter = messageList.length; useEffect(() => { @@ -35,9 +33,7 @@ function App() {
- ); - } export default App; From 5c4b84077f7ddc682ba43087f1c853bc841cdc31 Mon Sep 17 00:00:00 2001 From: Sergey Lebedev Date: Wed, 11 May 2022 01:20:02 +0300 Subject: [PATCH 3/7] hw3 --- package-lock.json | 803 +++++++++++++++++++++++++++++++++++++++++++++ package.json | 6 + src/App.js | 81 +++-- src/MessageList.js | 35 ++ src/index.js | 1 + 5 files changed, 897 insertions(+), 29 deletions(-) create mode 100644 src/MessageList.js diff --git a/package-lock.json b/package-lock.json index ae660b6..bf33fee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,12 @@ "name": "myfirstapp", "version": "0.1.0", "dependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/base": "^5.0.0-alpha.79", + "@mui/icons-material": "^5.6.2", + "@mui/material": "^5.6.4", + "@mui/system": "^5.6.4", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", "@testing-library/user-event": "^13.5.0", @@ -1972,6 +1978,185 @@ "postcss": "^8.3" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.9.2", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz", + "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==", + "dependencies": { + "@babel/helper-module-imports": "^7.12.13", + "@babel/plugin-syntax-jsx": "^7.12.13", + "@babel/runtime": "^7.13.10", + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.5", + "@emotion/serialize": "^1.0.2", + "babel-plugin-macros": "^2.6.1", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.0.13" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/babel-plugin-macros": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz", + "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==", + "dependencies": { + "@babel/runtime": "^7.7.2", + "cosmiconfig": "^6.0.0", + "resolve": "^1.12.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/cosmiconfig": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", + "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.1.0", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.7.2" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@emotion/cache": { + "version": "11.7.1", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz", + "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==", + "dependencies": { + "@emotion/memoize": "^0.7.4", + "@emotion/sheet": "^1.1.0", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "stylis": "4.0.13" + } + }, + "node_modules/@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz", + "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==", + "dependencies": { + "@emotion/memoize": "^0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "node_modules/@emotion/react": { + "version": "11.9.0", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz", + "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@emotion/babel-plugin": "^11.7.1", + "@emotion/cache": "^11.7.1", + "@emotion/serialize": "^1.0.3", + "@emotion/utils": "^1.1.0", + "@emotion/weak-memoize": "^0.2.5", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz", + "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==", + "dependencies": { + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/sheet": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz", + "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==" + }, + "node_modules/@emotion/styled": { + "version": "11.8.1", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.8.1.tgz", + "integrity": "sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@emotion/babel-plugin": "^11.7.1", + "@emotion/is-prop-valid": "^1.1.2", + "@emotion/serialize": "^1.0.2", + "@emotion/utils": "^1.1.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "node_modules/@emotion/utils": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz", + "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" + }, "node_modules/@eslint/eslintrc": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.2.tgz", @@ -2760,6 +2945,237 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz", "integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg==" }, + "node_modules/@mui/base": { + "version": "5.0.0-alpha.79", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.79.tgz", + "integrity": "sha512-/lZLF027BkiEjM8MIYoeS/FEhTKf+41ePU9SOijMGrCin1Y0Igucw+IHa1fF8HXD7wDbFKqHuso3J1jMG8wyNw==", + "dependencies": { + "@babel/runtime": "^7.17.2", + "@emotion/is-prop-valid": "^1.1.2", + "@mui/types": "^7.1.3", + "@mui/utils": "^5.6.1", + "@popperjs/core": "^2.11.5", + "clsx": "^1.1.1", + "prop-types": "^15.7.2", + "react-is": "^17.0.2" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/icons-material": { + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.6.2.tgz", + "integrity": "sha512-9QdI7axKuBAyaGz4mtdi7Uy1j73/thqFmEuxpJHxNC7O8ADEK1Da3t2veK2tgmsXsUlAHcAG63gg+GvWWeQNqQ==", + "dependencies": { + "@babel/runtime": "^7.17.2" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@mui/material": "^5.0.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material": { + "version": "5.6.4", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.6.4.tgz", + "integrity": "sha512-7TD+u/SExZK2a55w6reX56oPk37gKr/M/XGt156X+m0d9LhzOsW864nkErIX/H8oSkX/6kCimxu1FDsO+gjiVw==", + "dependencies": { + "@babel/runtime": "^7.17.2", + "@mui/base": "5.0.0-alpha.79", + "@mui/system": "^5.6.4", + "@mui/types": "^7.1.3", + "@mui/utils": "^5.6.1", + "@types/react-transition-group": "^4.4.4", + "clsx": "^1.1.1", + "csstype": "^3.0.11", + "hoist-non-react-statics": "^3.3.2", + "prop-types": "^15.7.2", + "react-is": "^17.0.2", + "react-transition-group": "^4.4.2" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/private-theming": { + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.6.2.tgz", + "integrity": "sha512-IbrSfFXfiZdyhRMC2bgGTFtb16RBQ5mccmjeh3MtAERWuepiCK7gkW5D9WhEsfTu6iez+TEjeUKSgmMHlsM2mg==", + "dependencies": { + "@babel/runtime": "^7.17.2", + "@mui/utils": "^5.6.1", + "prop-types": "^15.7.2" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/styled-engine": { + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.6.1.tgz", + "integrity": "sha512-jEhH6TBY8jc9S8yVncXmoTYTbATjEu44RMFXj6sIYfKr5NArVwTwRo3JexLL0t3BOAiYM4xsFLgfKEIvB9SAeQ==", + "dependencies": { + "@babel/runtime": "^7.17.2", + "@emotion/cache": "^11.7.1", + "prop-types": "^15.7.2" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/system": { + "version": "5.6.4", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.6.4.tgz", + "integrity": "sha512-7rsWED1wMFMePySJobsBerFZNu7ga580QSi3Zd6sJR8nVj12qD3yIdfvxA70/PxJ/805KbIT0GX7edKI+hpyhA==", + "dependencies": { + "@babel/runtime": "^7.17.2", + "@mui/private-theming": "^5.6.2", + "@mui/styled-engine": "^5.6.1", + "@mui/types": "^7.1.3", + "@mui/utils": "^5.6.1", + "clsx": "^1.1.1", + "csstype": "^3.0.11", + "prop-types": "^15.7.2" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/types": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.3.tgz", + "integrity": "sha512-DDF0UhMBo4Uezlk+6QxrlDbchF79XG6Zs0zIewlR4c0Dt6GKVFfUtzPtHCH1tTbcSlq/L2bGEdiaoHBJ9Y1gSA==", + "peerDependencies": { + "@types/react": "*" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils": { + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.6.1.tgz", + "integrity": "sha512-CPrzrkiBusCZBLWu0Sg5MJvR3fKJyK3gKecLVX012LULyqg2U64Oz04BKhfkbtBrPBbSQxM+DWW9B1c9hmV9nQ==", + "dependencies": { + "@babel/runtime": "^7.17.2", + "@types/prop-types": "^15.7.4", + "@types/react-is": "^16.7.1 || ^17.0.0", + "prop-types": "^15.7.2", + "react-is": "^17.0.2" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2841,6 +3257,15 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.5", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", + "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3626,6 +4051,22 @@ "@types/react": "*" } }, + "node_modules/@types/react-is": { + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz", + "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-transition-group": { + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz", + "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -5168,6 +5609,14 @@ "wrap-ansi": "^7.0.0" } }, + "node_modules/clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==", + "engines": { + "node": ">=6" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -6118,6 +6567,15 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -7427,6 +7885,11 @@ "url": "https://github.com/avajs/find-cache-dir?sponsor=1" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -7994,6 +8457,19 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -13495,6 +13971,21 @@ } } }, + "node_modules/react-transition-group": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", + "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -14588,6 +15079,11 @@ "postcss": "^8.2.15" } }, + "node_modules/stylis": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz", + "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==" + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -17520,6 +18016,147 @@ "postcss-value-parser": "^4.2.0" } }, + "@emotion/babel-plugin": { + "version": "11.9.2", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz", + "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==", + "requires": { + "@babel/helper-module-imports": "^7.12.13", + "@babel/plugin-syntax-jsx": "^7.12.13", + "@babel/runtime": "^7.13.10", + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.5", + "@emotion/serialize": "^1.0.2", + "babel-plugin-macros": "^2.6.1", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.0.13" + }, + "dependencies": { + "babel-plugin-macros": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz", + "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==", + "requires": { + "@babel/runtime": "^7.7.2", + "cosmiconfig": "^6.0.0", + "resolve": "^1.12.0" + } + }, + "cosmiconfig": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", + "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.1.0", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.7.2" + } + }, + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + } + } + }, + "@emotion/cache": { + "version": "11.7.1", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz", + "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==", + "requires": { + "@emotion/memoize": "^0.7.4", + "@emotion/sheet": "^1.1.0", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "stylis": "4.0.13" + } + }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, + "@emotion/is-prop-valid": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz", + "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==", + "requires": { + "@emotion/memoize": "^0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "@emotion/react": { + "version": "11.9.0", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz", + "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==", + "requires": { + "@babel/runtime": "^7.13.10", + "@emotion/babel-plugin": "^11.7.1", + "@emotion/cache": "^11.7.1", + "@emotion/serialize": "^1.0.3", + "@emotion/utils": "^1.1.0", + "@emotion/weak-memoize": "^0.2.5", + "hoist-non-react-statics": "^3.3.1" + } + }, + "@emotion/serialize": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz", + "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==", + "requires": { + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", + "csstype": "^3.0.2" + } + }, + "@emotion/sheet": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz", + "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==" + }, + "@emotion/styled": { + "version": "11.8.1", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.8.1.tgz", + "integrity": "sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==", + "requires": { + "@babel/runtime": "^7.13.10", + "@emotion/babel-plugin": "^11.7.1", + "@emotion/is-prop-valid": "^1.1.2", + "@emotion/serialize": "^1.0.2", + "@emotion/utils": "^1.1.0" + } + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "@emotion/utils": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz", + "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==" + }, + "@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" + }, "@eslint/eslintrc": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.2.tgz", @@ -18104,6 +18741,101 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz", "integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg==" }, + "@mui/base": { + "version": "5.0.0-alpha.79", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.79.tgz", + "integrity": "sha512-/lZLF027BkiEjM8MIYoeS/FEhTKf+41ePU9SOijMGrCin1Y0Igucw+IHa1fF8HXD7wDbFKqHuso3J1jMG8wyNw==", + "requires": { + "@babel/runtime": "^7.17.2", + "@emotion/is-prop-valid": "^1.1.2", + "@mui/types": "^7.1.3", + "@mui/utils": "^5.6.1", + "@popperjs/core": "^2.11.5", + "clsx": "^1.1.1", + "prop-types": "^15.7.2", + "react-is": "^17.0.2" + } + }, + "@mui/icons-material": { + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.6.2.tgz", + "integrity": "sha512-9QdI7axKuBAyaGz4mtdi7Uy1j73/thqFmEuxpJHxNC7O8ADEK1Da3t2veK2tgmsXsUlAHcAG63gg+GvWWeQNqQ==", + "requires": { + "@babel/runtime": "^7.17.2" + } + }, + "@mui/material": { + "version": "5.6.4", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.6.4.tgz", + "integrity": "sha512-7TD+u/SExZK2a55w6reX56oPk37gKr/M/XGt156X+m0d9LhzOsW864nkErIX/H8oSkX/6kCimxu1FDsO+gjiVw==", + "requires": { + "@babel/runtime": "^7.17.2", + "@mui/base": "5.0.0-alpha.79", + "@mui/system": "^5.6.4", + "@mui/types": "^7.1.3", + "@mui/utils": "^5.6.1", + "@types/react-transition-group": "^4.4.4", + "clsx": "^1.1.1", + "csstype": "^3.0.11", + "hoist-non-react-statics": "^3.3.2", + "prop-types": "^15.7.2", + "react-is": "^17.0.2", + "react-transition-group": "^4.4.2" + } + }, + "@mui/private-theming": { + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.6.2.tgz", + "integrity": "sha512-IbrSfFXfiZdyhRMC2bgGTFtb16RBQ5mccmjeh3MtAERWuepiCK7gkW5D9WhEsfTu6iez+TEjeUKSgmMHlsM2mg==", + "requires": { + "@babel/runtime": "^7.17.2", + "@mui/utils": "^5.6.1", + "prop-types": "^15.7.2" + } + }, + "@mui/styled-engine": { + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.6.1.tgz", + "integrity": "sha512-jEhH6TBY8jc9S8yVncXmoTYTbATjEu44RMFXj6sIYfKr5NArVwTwRo3JexLL0t3BOAiYM4xsFLgfKEIvB9SAeQ==", + "requires": { + "@babel/runtime": "^7.17.2", + "@emotion/cache": "^11.7.1", + "prop-types": "^15.7.2" + } + }, + "@mui/system": { + "version": "5.6.4", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.6.4.tgz", + "integrity": "sha512-7rsWED1wMFMePySJobsBerFZNu7ga580QSi3Zd6sJR8nVj12qD3yIdfvxA70/PxJ/805KbIT0GX7edKI+hpyhA==", + "requires": { + "@babel/runtime": "^7.17.2", + "@mui/private-theming": "^5.6.2", + "@mui/styled-engine": "^5.6.1", + "@mui/types": "^7.1.3", + "@mui/utils": "^5.6.1", + "clsx": "^1.1.1", + "csstype": "^3.0.11", + "prop-types": "^15.7.2" + } + }, + "@mui/types": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.3.tgz", + "integrity": "sha512-DDF0UhMBo4Uezlk+6QxrlDbchF79XG6Zs0zIewlR4c0Dt6GKVFfUtzPtHCH1tTbcSlq/L2bGEdiaoHBJ9Y1gSA==", + "requires": {} + }, + "@mui/utils": { + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.6.1.tgz", + "integrity": "sha512-CPrzrkiBusCZBLWu0Sg5MJvR3fKJyK3gKecLVX012LULyqg2U64Oz04BKhfkbtBrPBbSQxM+DWW9B1c9hmV9nQ==", + "requires": { + "@babel/runtime": "^7.17.2", + "@types/prop-types": "^15.7.4", + "@types/react-is": "^16.7.1 || ^17.0.0", + "prop-types": "^15.7.2", + "react-is": "^17.0.2" + } + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -18143,6 +18875,11 @@ "source-map": "^0.7.3" } }, + "@popperjs/core": { + "version": "2.11.5", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", + "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -18735,6 +19472,22 @@ "@types/react": "*" } }, + "@types/react-is": { + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz", + "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==", + "requires": { + "@types/react": "*" + } + }, + "@types/react-transition-group": { + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz", + "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==", + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -19880,6 +20633,11 @@ "wrap-ansi": "^7.0.0" } }, + "clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -20564,6 +21322,15 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -21535,6 +22302,11 @@ "pkg-dir": "^4.1.0" } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -21915,6 +22687,21 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -25761,6 +26548,17 @@ "workbox-webpack-plugin": "^6.4.1" } }, + "react-transition-group": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", + "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -26566,6 +27364,11 @@ "postcss-selector-parser": "^6.0.4" } }, + "stylis": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz", + "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==" + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", diff --git a/package.json b/package.json index 1a8b649..3c39c72 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,12 @@ "version": "0.1.0", "private": true, "dependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/base": "^5.0.0-alpha.79", + "@mui/icons-material": "^5.6.2", + "@mui/material": "^5.6.4", + "@mui/system": "^5.6.4", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", "@testing-library/user-event": "^13.5.0", diff --git a/src/App.js b/src/App.js index b2ddd70..ca85afa 100644 --- a/src/App.js +++ b/src/App.js @@ -1,39 +1,62 @@ import './App.css'; -import React, {useEffect, useState} from "react"; +import React, {useEffect, useRef, useState} from "react"; +import {Button, TextField} from "@mui/material"; +import SendIcon from '@mui/icons-material/Send'; +import BasicList from "./MessageList"; function App() { - const[messageList, setMessageList] = useState([]); - const[author, setAuthor] = useState(""); - const[message, setMessage] = useState(""); - let idCounter = messageList.length; + const [messageList, setMessageList] = useState([]); + const [author, setAuthor] = useState(""); + const [message, setMessage] = useState(""); + const [chatArray, setChatArray] = useState([]); //массив чатов - useEffect(() => { - if(messageList.length > 0) - setTimeout(() => alert("Message send"), 1500) - }, [messageList]); + let idCounter = messageList.length; + const textfieldRef = useRef(null); - return ( -
- <> - setAuthor(e.target.value)}/> -
- setMessage(e.target.value)}/> -
- + useEffect(() => { + textfieldRef.current?.focus(); + if (messageList.length > 0) + setTimeout(() => alert("Message send"), 1500) + }, [messageList]); - {messageList.map((item) => -

Author: {item.author}
Say: {item.text}

- )} + return ( +
+ + setAuthor(e.target.value)} + inputRef={textfieldRef}/> + setMessage(e.target.value)}/> + - -
- ); + {messageList.map((item) => +

Author: {item.author}
Say: {item.text}

+ )} +
+ ); } export default App; diff --git a/src/MessageList.js b/src/MessageList.js new file mode 100644 index 0000000..5391e92 --- /dev/null +++ b/src/MessageList.js @@ -0,0 +1,35 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemButton from '@mui/material/ListItemButton'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import Divider from '@mui/material/Divider'; +import DraftsIcon from '@mui/icons-material/Drafts'; + +export default function BasicList() { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 008d8b9..7f35e74 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; + // const myName = "Sergey"; const root = ReactDOM.createRoot(document.getElementById('root')); From da0d6df6deb84961d5d1dcf1cea249ea92ad05d1 Mon Sep 17 00:00:00 2001 From: Sergey Lebedev Date: Mon, 23 May 2022 02:05:21 +0300 Subject: [PATCH 4/7] hw4 --- package-lock.json | 58 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/App.js | 28 +++++++++++++++++++--- src/Chats.js | 48 ++++++++++++++++++++++++++++++++++++++ src/Home.js | 11 +++++++++ src/Message.js | 1 - src/MessageList.js | 35 ---------------------------- src/NotFound.js | 11 +++++++++ src/Profile.js | 11 +++++++++ src/index.js | 12 +++++----- 10 files changed, 171 insertions(+), 45 deletions(-) create mode 100644 src/Chats.js create mode 100644 src/Home.js delete mode 100644 src/MessageList.js create mode 100644 src/NotFound.js create mode 100644 src/Profile.js diff --git a/package-lock.json b/package-lock.json index bf33fee..216b776 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -8457,6 +8458,14 @@ "he": "bin/he" } }, + "node_modules/history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -13899,6 +13908,30 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "dependencies": { + "history": "^5.2.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "dependencies": { + "history": "^5.2.0", + "react-router": "6.3.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -22687,6 +22720,14 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -26493,6 +26534,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "requires": { + "history": "^5.2.0", + "react-router": "6.3.0" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 3c39c72..f646131 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/src/App.js b/src/App.js index ca85afa..f63859b 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,11 @@ import './App.css'; import React, {useEffect, useRef, useState} from "react"; import {Button, TextField} from "@mui/material"; import SendIcon from '@mui/icons-material/Send'; -import BasicList from "./MessageList"; +import {Link, Route, Routes} from "react-router-dom"; +import Profile from "./Profile"; +import Home from './Home'; +import Chats from './Chats'; +import NotFound from "./NotFound"; function App() { const [messageList, setMessageList] = useState([]); @@ -21,7 +25,19 @@ function App() { return (
- +
+
    +
  • + Home +
    • +
  • + Chats +
    • +
  • + Profile +
    • +
+
Send - {messageList.map((item) =>

Author: {item.author}
Say: {item.text}

)} + + }/> + }/> + }/> + }/> + }/> +
); } diff --git a/src/Chats.js b/src/Chats.js new file mode 100644 index 0000000..348221a --- /dev/null +++ b/src/Chats.js @@ -0,0 +1,48 @@ +import React from 'react'; +import {useParams} from "react-router-dom"; +import Box from "@mui/material/Box"; +import List from "@mui/material/List"; +import ListItem from "@mui/material/ListItem"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import DraftsIcon from "@mui/icons-material/Drafts"; +import ListItemText from "@mui/material/ListItemText"; +import Divider from "@mui/material/Divider"; + +const initialChats = [ + { + name: "Chat1", + messages: { text: "FirstMessage", author: "me" }, + }, + { + name: "Chat2", + messages: { text: "FirstMessageHereToo!", author: "not me" }, + } +]; + +const Chats = (chatsList) => { + const {chatId} = useParams(); + if(!chatId) { + return null; + } + return ( + + + + + + + + + + + + + + + + + + ); +}; + +export default Chats; \ No newline at end of file diff --git a/src/Home.js b/src/Home.js new file mode 100644 index 0000000..54ba806 --- /dev/null +++ b/src/Home.js @@ -0,0 +1,11 @@ +import React from 'react'; + +const Home = () => { + return ( +
+ Home +
+ ); +}; + +export default Home; \ No newline at end of file diff --git a/src/Message.js b/src/Message.js index 92b3da9..175c947 100644 --- a/src/Message.js +++ b/src/Message.js @@ -1,5 +1,4 @@ function Message(props) { return (

{props.text}

); } -//export component export default Message; \ No newline at end of file diff --git a/src/MessageList.js b/src/MessageList.js deleted file mode 100644 index 5391e92..0000000 --- a/src/MessageList.js +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import Divider from '@mui/material/Divider'; -import DraftsIcon from '@mui/icons-material/Drafts'; - -export default function BasicList() { - return ( - - - - - - - - - - - - - - - - - - - - - - ); -} \ No newline at end of file diff --git a/src/NotFound.js b/src/NotFound.js new file mode 100644 index 0000000..be367f9 --- /dev/null +++ b/src/NotFound.js @@ -0,0 +1,11 @@ +import React from 'react'; + +const NotFound = () => { + return ( +
+

Page not found

+
+ ); +}; + +export default NotFound; \ No newline at end of file diff --git a/src/Profile.js b/src/Profile.js new file mode 100644 index 0000000..48c7fed --- /dev/null +++ b/src/Profile.js @@ -0,0 +1,11 @@ +import React from 'react'; + +const Profile = () => { + return ( +
+

Hi there!

+
+ ); +}; + +export default Profile; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 7f35e74..5fe5ddf 100644 --- a/src/index.js +++ b/src/index.js @@ -3,17 +3,17 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; +import {BrowserRouter} from "react-router-dom"; -// const myName = "Sergey"; - const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - - - + + + + + ); - // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals From 938e79bf57b8ab6e25eac926310eeb39581ba81a Mon Sep 17 00:00:00 2001 From: Sergey Lebedev Date: Mon, 30 May 2022 03:03:55 +0300 Subject: [PATCH 5/7] homework5 --- package-lock.json | 123 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 + src/App.js | 43 +++++++++++----- src/Chats.js | 50 +++---------------- src/Home.js | 2 +- src/Profile.js | 4 +- src/counter.js | 26 ++++++++++ src/index.js | 42 +++++++++++++--- 8 files changed, 230 insertions(+), 62 deletions(-) create mode 100644 src/counter.js diff --git a/package-lock.json b/package-lock.json index 216b776..3d68a69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,8 +19,10 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-redux": "^8.0.2", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", + "redux": "^4.2.0", "web-vitals": "^2.1.4" } }, @@ -3941,6 +3943,15 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -4129,6 +4140,11 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "node_modules/@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -13900,6 +13916,49 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-redux": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz", + "integrity": "sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==", + "dependencies": { + "@babel/runtime": "^7.12.1", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/use-sync-external-store": "^0.0.3", + "hoist-non-react-statics": "^3.3.2", + "react-is": "^18.0.0", + "use-sync-external-store": "^1.0.0" + }, + "peerDependencies": { + "@types/react": "^16.8 || ^17.0 || ^18.0", + "@types/react-dom": "^16.8 || ^17.0 || ^18.0", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0", + "react-native": ">=0.59", + "redux": "^4" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, + "node_modules/react-redux/node_modules/react-is": { + "version": "18.1.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz", + "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==" + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -14077,6 +14136,14 @@ "node": ">=8" } }, + "node_modules/redux": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz", + "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==", + "dependencies": { + "@babel/runtime": "^7.9.2" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -15772,6 +15839,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz", + "integrity": "sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -19394,6 +19469,15 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -19582,6 +19666,11 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" }, + "@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -26529,6 +26618,26 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-redux": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz", + "integrity": "sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==", + "requires": { + "@babel/runtime": "^7.12.1", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/use-sync-external-store": "^0.0.3", + "hoist-non-react-statics": "^3.3.2", + "react-is": "^18.0.0", + "use-sync-external-store": "^1.0.0" + }, + "dependencies": { + "react-is": { + "version": "18.1.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz", + "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==" + } + } + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -26662,6 +26771,14 @@ "strip-indent": "^3.0.0" } }, + "redux": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz", + "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -27921,6 +28038,12 @@ "punycode": "^2.1.0" } }, + "use-sync-external-store": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz", + "integrity": "sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==", + "requires": {} + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index f646131..224838f 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,10 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-redux": "^8.0.2", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", + "redux": "^4.2.0", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.js b/src/App.js index f63859b..f93d43f 100644 --- a/src/App.js +++ b/src/App.js @@ -7,6 +7,12 @@ import Profile from "./Profile"; import Home from './Home'; import Chats from './Chats'; import NotFound from "./NotFound"; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemButton from '@mui/material/ListItemButton'; +import ListItemText from '@mui/material/ListItemText'; +import Divider from '@mui/material/Divider'; +import FolderIcon from '@mui/icons-material/Folder'; function App() { const [messageList, setMessageList] = useState([]); @@ -25,19 +31,12 @@ function App() { return (
-
-
    -
  • +
    • -
  • Chats -
    • -
  • Profile -
    • -
-
+ }/> - }/> - }/> + }> + }/> + }/> }/> + + Chats List} style={{maxWidth: '360px', backgroundColor:'greenyellow'}}> + {chatArray.map((item) => { + return( + <> + + + + + №{chatArray.indexOf(item)} Name: {item.name}

} + secondary={

Chat Id: {item.id}

}/> + + + + + + ) + }) +}
); } diff --git a/src/Chats.js b/src/Chats.js index 348221a..3a6c4d7 100644 --- a/src/Chats.js +++ b/src/Chats.js @@ -1,48 +1,14 @@ import React from 'react'; import {useParams} from "react-router-dom"; -import Box from "@mui/material/Box"; -import List from "@mui/material/List"; -import ListItem from "@mui/material/ListItem"; -import ListItemIcon from "@mui/material/ListItemIcon"; -import DraftsIcon from "@mui/icons-material/Drafts"; -import ListItemText from "@mui/material/ListItemText"; -import Divider from "@mui/material/Divider"; -const initialChats = [ - { - name: "Chat1", - messages: { text: "FirstMessage", author: "me" }, - }, - { - name: "Chat2", - messages: { text: "FirstMessageHereToo!", author: "not me" }, - } -]; - -const Chats = (chatsList) => { - const {chatId} = useParams(); - if(!chatId) { - return null; - } - return ( - - - - - - - - - - - - - - - - - - ); +const Chats = ({messages}) => { + const params = useParams(); + const prodId = params.id; + const chatMessage = messages.find(p => p.id == prodId); + if(chatMessage === undefined) + return

Messages List is empty

; + else + return

{chatMessage.text}

; }; export default Chats; \ No newline at end of file diff --git a/src/Home.js b/src/Home.js index 54ba806..92d7aee 100644 --- a/src/Home.js +++ b/src/Home.js @@ -3,7 +3,7 @@ import React from 'react'; const Home = () => { return (
- Home +

Welcome

); }; diff --git a/src/Profile.js b/src/Profile.js index 48c7fed..ae03ebf 100644 --- a/src/Profile.js +++ b/src/Profile.js @@ -1,9 +1,11 @@ import React from 'react'; +import Counter from "./counter"; const Profile = () => { return (
-

Hi there!

+

Hi there!

+
); }; diff --git a/src/counter.js b/src/counter.js new file mode 100644 index 0000000..7f5676f --- /dev/null +++ b/src/counter.js @@ -0,0 +1,26 @@ +import React from 'react'; +import {useDispatch, useSelector} from 'react-redux'; + +const Counter = () => { + const counter = useSelector(state => state.count); + const dispatch = useDispatch(); + const increase = () => { + dispatch({type: 'increase'}); + }; + const decrease = () => { + dispatch({type: 'decrease'}); + }; + const reset = () => { + dispatch({type: 'reset'}) + }; + return ( +
+

{counter}

+ + + +
+ ); +}; + +export default Counter; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 5fe5ddf..8a5ae3a 100644 --- a/src/index.js +++ b/src/index.js @@ -4,15 +4,45 @@ import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import {BrowserRouter} from "react-router-dom"; - +import {createStore} from 'redux'; +import {Provider} from "react-redux"; const root = ReactDOM.createRoot(document.getElementById('root')); +const initialState = { + count: 0 +}; +const reducer = (state = initialState, action) => { + switch (action.type) { + case 'increase': + return { + ...state, + count: state.count + 1 + }; + case 'decrease': + return { + ...state, + count: state.count - 1 + }; + case 'reset': + return { + ...state, + count: state.count = 0 + }; + default: + return state; + } +}; + +const store = createStore(reducer); root.render( - - - - - + + + + + + + + ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) From 8b421e7aab0a5ef9c906a16c16c31fd74d6ee867 Mon Sep 17 00:00:00 2001 From: Sergey Lebedev Date: Fri, 3 Jun 2022 02:41:33 +0300 Subject: [PATCH 6/7] hw 6 not complete --- src/App.test.js | 8 --- src/Chats.js | 14 ----- src/Message.js | 4 -- src/NotFound.js | 11 ---- src/Profile.js | 13 ----- src/components/App.jsx | 30 ++++++++++ src/components/Chats.jsx | 30 ++++++++++ src/{Home.js => components/Home.jsx} | 6 +- src/components/Messages.jsx | 57 +++++++++++++++++++ src/components/NotFound.jsx | 9 +++ src/components/Profile.jsx | 9 +++ src/{App.js => components/yhde.ks} | 34 +---------- src/counter.js | 26 --------- src/{ => css}/App.css | 0 src/{ => css}/index.css | 0 src/index.js | 37 ++---------- src/logo.svg | 1 - src/redux/actions/actionTypes.js | 5 ++ src/redux/configureStore.js | 9 +++ .../reducers/chatsReducer/chatsReducer.js | 31 ++++++++++ src/redux/reducers/chatsReducer/selectors.js | 1 + .../messagesReducer/messagesReducer.js | 46 +++++++++++++++ .../reducers/messagesReducer/selectors.js | 1 + src/reportWebVitals.js | 13 ----- src/setupTests.js | 5 -- 25 files changed, 237 insertions(+), 163 deletions(-) delete mode 100644 src/App.test.js delete mode 100644 src/Chats.js delete mode 100644 src/Message.js delete mode 100644 src/NotFound.js delete mode 100644 src/Profile.js create mode 100644 src/components/App.jsx create mode 100644 src/components/Chats.jsx rename src/{Home.js => components/Home.jsx} (70%) create mode 100644 src/components/Messages.jsx create mode 100644 src/components/NotFound.jsx create mode 100644 src/components/Profile.jsx rename src/{App.js => components/yhde.ks} (72%) delete mode 100644 src/counter.js rename src/{ => css}/App.css (100%) rename src/{ => css}/index.css (100%) delete mode 100644 src/logo.svg create mode 100644 src/redux/actions/actionTypes.js create mode 100644 src/redux/configureStore.js create mode 100644 src/redux/reducers/chatsReducer/chatsReducer.js create mode 100644 src/redux/reducers/chatsReducer/selectors.js create mode 100644 src/redux/reducers/messagesReducer/messagesReducer.js create mode 100644 src/redux/reducers/messagesReducer/selectors.js delete mode 100644 src/reportWebVitals.js delete mode 100644 src/setupTests.js diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/Chats.js b/src/Chats.js deleted file mode 100644 index 3a6c4d7..0000000 --- a/src/Chats.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import {useParams} from "react-router-dom"; - -const Chats = ({messages}) => { - const params = useParams(); - const prodId = params.id; - const chatMessage = messages.find(p => p.id == prodId); - if(chatMessage === undefined) - return

Messages List is empty

; - else - return

{chatMessage.text}

; -}; - -export default Chats; \ No newline at end of file diff --git a/src/Message.js b/src/Message.js deleted file mode 100644 index 175c947..0000000 --- a/src/Message.js +++ /dev/null @@ -1,4 +0,0 @@ -function Message(props) { - return (

{props.text}

); -} -export default Message; \ No newline at end of file diff --git a/src/NotFound.js b/src/NotFound.js deleted file mode 100644 index be367f9..0000000 --- a/src/NotFound.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -const NotFound = () => { - return ( -
-

Page not found

-
- ); -}; - -export default NotFound; \ No newline at end of file diff --git a/src/Profile.js b/src/Profile.js deleted file mode 100644 index ae03ebf..0000000 --- a/src/Profile.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import Counter from "./counter"; - -const Profile = () => { - return ( -
-

Hi there!

- -
- ); -}; - -export default Profile; \ No newline at end of file diff --git a/src/components/App.jsx b/src/components/App.jsx new file mode 100644 index 0000000..7cac468 --- /dev/null +++ b/src/components/App.jsx @@ -0,0 +1,30 @@ +import '../css/App.css'; +import React from "react"; +import {Link, Route, Routes} from "react-router-dom"; +import {Chats} from './Chats'; +import {Messages} from "./Messages"; +import {Profile} from "./Profile"; +import {NotFound} from "./NotFound"; +import {Home} from "./Home"; + +export default function App() { + + return ( +
+ + + }/> + }/> + }/> + }/> + }/> + +
+ ); +} diff --git a/src/components/Chats.jsx b/src/components/Chats.jsx new file mode 100644 index 0000000..6e73de4 --- /dev/null +++ b/src/components/Chats.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import {Link} from "react-router-dom"; +import {useDispatch, useSelector} from "react-redux"; +import {chatsSelector} from "../redux/reducers/chatsReducer/selectors"; +import {DELETE_CHAT, DELETE_MESSAGE_WITH_CHAT} from "../redux/actions/actionTypes"; + +export const Chats = () => { + const chats = useSelector(chatsSelector); + const dispatch = useDispatch(); + const deleteChat = (id) => { + dispatch({type: DELETE_CHAT, payload: id}) + dispatch({type: DELETE_MESSAGE_WITH_CHAT, payload: id}) + }; + + return ( +
+ {chats.map((item) => { + return ( +
+ + ID {item.id} NAME {item.name} + + +
+ ) + }) + } +
+ ) +}; \ No newline at end of file diff --git a/src/Home.js b/src/components/Home.jsx similarity index 70% rename from src/Home.js rename to src/components/Home.jsx index 92d7aee..50d342d 100644 --- a/src/Home.js +++ b/src/components/Home.jsx @@ -1,11 +1,9 @@ import React from 'react'; -const Home = () => { +export const Home = () => { return (

Welcome

); -}; - -export default Home; \ No newline at end of file +}; \ No newline at end of file diff --git a/src/components/Messages.jsx b/src/components/Messages.jsx new file mode 100644 index 0000000..b5e566e --- /dev/null +++ b/src/components/Messages.jsx @@ -0,0 +1,57 @@ +import React, {useState} from 'react'; +import {useDispatch, useSelector} from "react-redux"; +import {messagesSelector} from "../redux/reducers/messagesReducer/selectors"; +import {useParams} from "react-router-dom"; +import {ADD_CHAT, ADD_MESSAGE, DELETE_MESSAGE} from "../redux/actions/actionTypes"; + +export const Messages = () => { + const {chatIds} = useParams(); + const dispatch = useDispatch(); + const messages = useSelector(messagesSelector); + const [inputAuthor, setInputAuthor] = useState(''); + const [inputMessage, setInputMessage] = useState(''); + const message = messages.filter(() => { + if(!chatIds) + return true; + return message.chatId ===+chatIds; + }); + const deleteMessage = (id) => { + dispatch({type: DELETE_MESSAGE, payload: id}) + }; + const addMessage = () => { + const random = Math.random(); + const mess = { + id: random, + chatId: chatIds, + author: inputAuthor, + say: inputMessage + }; + const chatAdd = { + id: messages.length, + name: inputAuthor + }; + console.log(chatIds); + dispatch({type: ADD_MESSAGE, payload: mess}); + dispatch({type: ADD_CHAT, payload: chatAdd}) + }; + return ( +
+ setInputAuthor(e.target.value)}/> + setInputMessage(e.target.value)}/> + + { + message.map((item) => { + return ( +
+

{item.id}

+

{item.chatId}

+

{item.author}

+

{item.say}

+ +
+ ) + }) + } +
+ ); +} diff --git a/src/components/NotFound.jsx b/src/components/NotFound.jsx new file mode 100644 index 0000000..2cd97de --- /dev/null +++ b/src/components/NotFound.jsx @@ -0,0 +1,9 @@ +import React from 'react'; + +export const NotFound = () => { + return ( +
+

Page not found

+
+ ); +}; \ No newline at end of file diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx new file mode 100644 index 0000000..76bd762 --- /dev/null +++ b/src/components/Profile.jsx @@ -0,0 +1,9 @@ +import React from 'react'; + +export const Profile = () => { + return ( +
+

This is Profile page

+
+ ); +}; \ No newline at end of file diff --git a/src/App.js b/src/components/yhde.ks similarity index 72% rename from src/App.js rename to src/components/yhde.ks index f93d43f..94e9616 100644 --- a/src/App.js +++ b/src/components/yhde.ks @@ -1,20 +1,4 @@ -import './App.css'; -import React, {useEffect, useRef, useState} from "react"; -import {Button, TextField} from "@mui/material"; -import SendIcon from '@mui/icons-material/Send'; -import {Link, Route, Routes} from "react-router-dom"; -import Profile from "./Profile"; -import Home from './Home'; -import Chats from './Chats'; -import NotFound from "./NotFound"; -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemText from '@mui/material/ListItemText'; -import Divider from '@mui/material/Divider'; -import FolderIcon from '@mui/icons-material/Folder'; - -function App() { +const messages = useSelector(state => state.id); const [messageList, setMessageList] = useState([]); const [author, setAuthor] = useState(""); const [message, setMessage] = useState(""); @@ -29,14 +13,7 @@ function App() { setTimeout(() => alert("Message send"), 1500) }, [messageList]); - return ( -
- + ) }) -} -
- ); -} - -export default App; +} \ No newline at end of file diff --git a/src/counter.js b/src/counter.js deleted file mode 100644 index 7f5676f..0000000 --- a/src/counter.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import {useDispatch, useSelector} from 'react-redux'; - -const Counter = () => { - const counter = useSelector(state => state.count); - const dispatch = useDispatch(); - const increase = () => { - dispatch({type: 'increase'}); - }; - const decrease = () => { - dispatch({type: 'decrease'}); - }; - const reset = () => { - dispatch({type: 'reset'}) - }; - return ( -
-

{counter}

- - - -
- ); -}; - -export default Counter; \ No newline at end of file diff --git a/src/App.css b/src/css/App.css similarity index 100% rename from src/App.css rename to src/css/App.css diff --git a/src/index.css b/src/css/index.css similarity index 100% rename from src/index.css rename to src/css/index.css diff --git a/src/index.js b/src/index.js index 8a5ae3a..1a5a1bb 100644 --- a/src/index.js +++ b/src/index.js @@ -1,39 +1,13 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import './css/index.css'; +import App from './components/App'; import {BrowserRouter} from "react-router-dom"; -import {createStore} from 'redux'; import {Provider} from "react-redux"; +import {store} from "./redux/configureStore"; const root = ReactDOM.createRoot(document.getElementById('root')); -const initialState = { - count: 0 -}; -const reducer = (state = initialState, action) => { - switch (action.type) { - case 'increase': - return { - ...state, - count: state.count + 1 - }; - case 'decrease': - return { - ...state, - count: state.count - 1 - }; - case 'reset': - return { - ...state, - count: state.count = 0 - }; - default: - return state; - } -}; -const store = createStore(reducer); root.render( @@ -44,7 +18,4 @@ root.render( ); -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); + diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/redux/actions/actionTypes.js b/src/redux/actions/actionTypes.js new file mode 100644 index 0000000..490cd50 --- /dev/null +++ b/src/redux/actions/actionTypes.js @@ -0,0 +1,5 @@ +export const ADD_MESSAGE = "ADD_MESSAGE"; +export const DELETE_MESSAGE = "DELETE_MESSAGE"; +export const DELETE_MESSAGE_WITH_CHAT = "DELETE_MESSAGE_WITH_CHAT"; +export const DELETE_CHAT = "DELETE_CHAT"; +export const ADD_CHAT = "ADD_CHAT"; \ No newline at end of file diff --git a/src/redux/configureStore.js b/src/redux/configureStore.js new file mode 100644 index 0000000..b8126ad --- /dev/null +++ b/src/redux/configureStore.js @@ -0,0 +1,9 @@ +import {combineReducers, createStore} from "redux"; +import {chatsReducer} from "./reducers/chatsReducer/chatsReducer"; +import {messagesReducer} from "./reducers/messagesReducer/messagesReducer"; + +export const store = createStore(combineReducers({ + chats: chatsReducer, + messages: messagesReducer} + ) +); \ No newline at end of file diff --git a/src/redux/reducers/chatsReducer/chatsReducer.js b/src/redux/reducers/chatsReducer/chatsReducer.js new file mode 100644 index 0000000..31dbf80 --- /dev/null +++ b/src/redux/reducers/chatsReducer/chatsReducer.js @@ -0,0 +1,31 @@ +import {DELETE_CHAT, ADD_CHAT} from "../../actions/actionTypes"; + +const initialState = { + chats: [ + { + id: 0, + name: 'Ivan' + }, + { + id: 1, + name: 'Fedor' + } + ] +}; + +export const chatsReducer = (state = initialState, action) => { + switch (action.type) { + case DELETE_CHAT: + return { + ...state, + chats: state.chats.filter(item => item.id !== action.payload) + }; + case ADD_CHAT: + return { + ...state, + chats: [...state.chats, action.payload] + }; + default: + return state; + } +} \ No newline at end of file diff --git a/src/redux/reducers/chatsReducer/selectors.js b/src/redux/reducers/chatsReducer/selectors.js new file mode 100644 index 0000000..806d0a8 --- /dev/null +++ b/src/redux/reducers/chatsReducer/selectors.js @@ -0,0 +1 @@ +export const chatsSelector = state => state.chats.chats; \ No newline at end of file diff --git a/src/redux/reducers/messagesReducer/messagesReducer.js b/src/redux/reducers/messagesReducer/messagesReducer.js new file mode 100644 index 0000000..dc278ff --- /dev/null +++ b/src/redux/reducers/messagesReducer/messagesReducer.js @@ -0,0 +1,46 @@ +import {ADD_MESSAGE, DELETE_MESSAGE, DELETE_MESSAGE_WITH_CHAT} from "../../actions/actionTypes"; + +const initialState = { + messages: [ + { + id: 0, + chatId: 0, + author: "Ivan", + say: "Hi" + }, + { + id: 1, + chatId: 1, + author: "Fedor", + say: "Good morning" + }, + { + id: 2, + chatId: 0, + author: "Andrey", + say: "Hello" + } + ] +}; + +export const messagesReducer = (state = initialState, action) => { + switch (action.type) { + case ADD_MESSAGE: + return { + ...state, + messages: [...state.messages, action.payload] + }; + case DELETE_MESSAGE: + return { + ...state, + messages: state.messages.filter(item => item.id !== action.payload) + }; + case DELETE_MESSAGE_WITH_CHAT: + return { + ...state, + messages: state.messages.filter(item => item.chatId !== action.payload) + }; + default: + return state; + } +} \ No newline at end of file diff --git a/src/redux/reducers/messagesReducer/selectors.js b/src/redux/reducers/messagesReducer/selectors.js new file mode 100644 index 0000000..e134b33 --- /dev/null +++ b/src/redux/reducers/messagesReducer/selectors.js @@ -0,0 +1 @@ +export const messagesSelector = state => state.messages.messages; \ No newline at end of file diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3a..0000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; From d08d0f853d0acb6324b95b4e56c138f4db10fc47 Mon Sep 17 00:00:00 2001 From: Sergey Lebedev Date: Sun, 5 Jun 2022 03:46:04 +0300 Subject: [PATCH 7/7] hw7 --- package-lock.json | 27 +++++++++++++ package.json | 1 + src/components/Chats.jsx | 6 +-- src/components/Messages.jsx | 11 +++--- src/components/yhde.ks | 75 ------------------------------------ src/redux/actions/actions.js | 24 ++++++++++++ src/redux/configureStore.js | 24 +++++++++++- 7 files changed, 82 insertions(+), 86 deletions(-) delete mode 100644 src/components/yhde.ks create mode 100644 src/redux/actions/actions.js diff --git a/package-lock.json b/package-lock.json index 3d68a69..71c2df7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "redux": "^4.2.0", + "redux-logger": "^3.0.6", "web-vitals": "^2.1.4" } }, @@ -6380,6 +6381,11 @@ "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=" }, + "node_modules/deep-diff": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz", + "integrity": "sha512-yVn6RZmHiGnxRKR9sJb3iVV2XTF1Ghh2DiWRZ3dMnGc43yUdWWF/kX6lQyk3+P84iprfWKU/8zFTrlkvtFm1ug==" + }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -14144,6 +14150,14 @@ "@babel/runtime": "^7.9.2" } }, + "node_modules/redux-logger": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz", + "integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=", + "dependencies": { + "deep-diff": "^0.3.5" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -21291,6 +21305,11 @@ "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=" }, + "deep-diff": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz", + "integrity": "sha512-yVn6RZmHiGnxRKR9sJb3iVV2XTF1Ghh2DiWRZ3dMnGc43yUdWWF/kX6lQyk3+P84iprfWKU/8zFTrlkvtFm1ug==" + }, "deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -26779,6 +26798,14 @@ "@babel/runtime": "^7.9.2" } }, + "redux-logger": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz", + "integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=", + "requires": { + "deep-diff": "^0.3.5" + } + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", diff --git a/package.json b/package.json index 224838f..37e2368 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "redux": "^4.2.0", + "redux-logger": "^3.0.6", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/components/Chats.jsx b/src/components/Chats.jsx index 6e73de4..2258f6b 100644 --- a/src/components/Chats.jsx +++ b/src/components/Chats.jsx @@ -2,14 +2,14 @@ import React from 'react'; import {Link} from "react-router-dom"; import {useDispatch, useSelector} from "react-redux"; import {chatsSelector} from "../redux/reducers/chatsReducer/selectors"; -import {DELETE_CHAT, DELETE_MESSAGE_WITH_CHAT} from "../redux/actions/actionTypes"; +import {deleteChats, deleteChatsWithMessages} from "../redux/actions/actions"; export const Chats = () => { const chats = useSelector(chatsSelector); const dispatch = useDispatch(); const deleteChat = (id) => { - dispatch({type: DELETE_CHAT, payload: id}) - dispatch({type: DELETE_MESSAGE_WITH_CHAT, payload: id}) + dispatch(deleteChats(id)); + dispatch(deleteChatsWithMessages(id)) }; return ( diff --git a/src/components/Messages.jsx b/src/components/Messages.jsx index b5e566e..d74fb59 100644 --- a/src/components/Messages.jsx +++ b/src/components/Messages.jsx @@ -2,7 +2,7 @@ import React, {useState} from 'react'; import {useDispatch, useSelector} from "react-redux"; import {messagesSelector} from "../redux/reducers/messagesReducer/selectors"; import {useParams} from "react-router-dom"; -import {ADD_CHAT, ADD_MESSAGE, DELETE_MESSAGE} from "../redux/actions/actionTypes"; +import {addChats, addMessages, deleteMessages} from "../redux/actions/actions"; export const Messages = () => { const {chatIds} = useParams(); @@ -10,13 +10,13 @@ export const Messages = () => { const messages = useSelector(messagesSelector); const [inputAuthor, setInputAuthor] = useState(''); const [inputMessage, setInputMessage] = useState(''); - const message = messages.filter(() => { + const message = messages.filter((message) => { if(!chatIds) return true; return message.chatId ===+chatIds; }); const deleteMessage = (id) => { - dispatch({type: DELETE_MESSAGE, payload: id}) + dispatch(deleteMessages(id)) }; const addMessage = () => { const random = Math.random(); @@ -30,9 +30,8 @@ export const Messages = () => { id: messages.length, name: inputAuthor }; - console.log(chatIds); - dispatch({type: ADD_MESSAGE, payload: mess}); - dispatch({type: ADD_CHAT, payload: chatAdd}) + dispatch(addMessages(mess)); + dispatch(addChats(chatAdd)) }; return (
diff --git a/src/components/yhde.ks b/src/components/yhde.ks deleted file mode 100644 index 94e9616..0000000 --- a/src/components/yhde.ks +++ /dev/null @@ -1,75 +0,0 @@ -const messages = useSelector(state => state.id); - const [messageList, setMessageList] = useState([]); - const [author, setAuthor] = useState(""); - const [message, setMessage] = useState(""); - const [chatArray, setChatArray] = useState([]); //массив чатов - - let idCounter = messageList.length; - const textfieldRef = useRef(null); - - useEffect(() => { - textfieldRef.current?.focus(); - if (messageList.length > 0) - setTimeout(() => alert("Message send"), 1500) - }, [messageList]); - - - setAuthor(e.target.value)} - inputRef={textfieldRef}/> - setMessage(e.target.value)}/> - - {messageList.map((item) => -

Author: {item.author}
Say: {item.text}

- )} - - }/> - }> - }/> - - }/> - }/> - - - Chats List} style={{maxWidth: '360px', backgroundColor:'greenyellow'}}> - {chatArray.map((item) => { - return( - <> - - - - - №{chatArray.indexOf(item)} Name: {item.name}

} - secondary={

Chat Id: {item.id}

}/> - - - - - - ) - }) -} \ No newline at end of file diff --git a/src/redux/actions/actions.js b/src/redux/actions/actions.js new file mode 100644 index 0000000..509b123 --- /dev/null +++ b/src/redux/actions/actions.js @@ -0,0 +1,24 @@ +import {ADD_CHAT, ADD_MESSAGE, DELETE_CHAT, DELETE_MESSAGE, DELETE_MESSAGE_WITH_CHAT} from "./actionTypes"; + +export const deleteMessages = (id) => ({ + type: DELETE_MESSAGE, payload: id, meta: { + delay: 1500 + } +}); + +export const addMessages = (mess) => ({ + type: ADD_MESSAGE, payload: mess +}); + + +export const addChats = (chat) => ({ + type: ADD_CHAT, payload: chat +}); + +export const deleteChats = (chatId) => ({ + type: DELETE_CHAT, payload: chatId +}); + +export const deleteChatsWithMessages = (chatId) => ({ + type: DELETE_MESSAGE_WITH_CHAT, payload: chatId +}); \ No newline at end of file diff --git a/src/redux/configureStore.js b/src/redux/configureStore.js index b8126ad..e065db2 100644 --- a/src/redux/configureStore.js +++ b/src/redux/configureStore.js @@ -1,9 +1,29 @@ -import {combineReducers, createStore} from "redux"; +import {applyMiddleware, combineReducers, createStore} from "redux"; import {chatsReducer} from "./reducers/chatsReducer/chatsReducer"; import {messagesReducer} from "./reducers/messagesReducer/messagesReducer"; +import {createLogger} from "redux-logger/src"; + +const confirmDeleteMessage = store => next => action => { + const delay = action?.meta?.delay; + if(!delay) { + return next(action); + } + + const timeOut = setTimeout(() => { + next(action); + window.confirm("Are you really want to delete this message?") + }, delay); + + return () => clearTimeout(timeOut); +} + +const logger = createLogger({ + diff: true, + collapsed: true +}) export const store = createStore(combineReducers({ chats: chatsReducer, messages: messagesReducer} - ) + ), applyMiddleware(confirmDeleteMessage, logger) ); \ No newline at end of file