hw1

public_html/js/react/react01/.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>

public_html/js/react/react01/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

public_html/js/react/react01/src/App.jsx

@@ -1,69 +0,0 @@
-import './App.css';
-import {userData} from "./condidateArr";
-import React from "react";
-import {useState} from 'react';
-
-let def = [...userData]
-
-let Card = (props) => {
-    return (
-        <div className='mainContent'>
-            <div className='card'>
-                <p className='CardText'>{props.name}</p>
-                <p className='CardText'>{props.age}</p>
-                <p className='CardText'>{props.gender}</p>
-                <p className='CardText'>{props.balance}</p>
-                <img className='YouImg' src='https://i1.sndcdn.com/artworks-000580655825-uvkn3k-t500x500.jpg'
-                     alt='Ваше фото'/>
-            </div>
-        </div>
-    )
-}
-
-function App() {
-    const [find, setFind] = useState('')
-    def = userData.filter(user => {
-        return user.name.toLowerCase().includes(find.toLowerCase())
-    })
-    const [sort, setSort] = useState('default')
-
-    let sortByAges = () => {
-        return def =  userData.sort((a, b) => {
-            if (sort === "big") {
-                return a.age < b.age ? -1 : 1
-            }else{
-                return a.age > b.age ? -1 : 1
-            }
-        })
-    }
-
-    let clear = () => {
-        setFind('')
-        setSort('default')
-    }
-    return (
-        <>
-            <header>
-                <div className='searchBar'>
-                    <input id='findUser' placeholder={'Enter user name...'}
-                           onChange={event => setFind(event.target.value)}/>
-                </div>
-                <div className="sortBar"><select name="selection" id="selectionBar" onChange={e => {
-                    sortByAges()
-                    setSort(e.target.value)
-                }}>
-                    <option value="default">...</option>
-                    <option value="big">От стариков до молдых</option>
-                    <option value="small">От молодых к старикров</option>
-                </select>
-                    <button className='clear' onClick={clear}>Clear all</button>
-                </div>
-            </header>
-            <div className='mainContent'>
-                {def.map(item => <Card {...item}/>)}
-            </div>
-        </>
-    )
-}
-
-export default App;

public_html/js/react/react01/.idea/modules.xml

@@ -2,7 +2,7 @@
 <project version="4">
   <component name="ProjectModuleManager">
     <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/react01.iml" filepath="$PROJECT_DIR$/.idea/react01.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/reactcw3.iml" filepath="$PROJECT_DIR$/.idea/reactcw3.iml" />
     </modules>
   </component>
 </project>

public_html/js/react/react01/.idea/vcs.xml

@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$/../../.." vcs="Git" />
     <mapping directory="$PROJECT_DIR$" vcs="Git" />
   </component>
 </project>

public_html/js/react/react01/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "react01",
+  "name": "reactcw3",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -2154,9 +2154,9 @@
       }
     },
     "@testing-library/user-event": {
-      "version": "12.2.2",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.2.2.tgz",
-      "integrity": "sha512-mTYL9LrwiSeyorStUOMuRGQDn1ca40tIhuv//o/K3lY8wBEp+9Im90MFVx5i3u7zCPmavn3uWZs/10chsbI8Tg==",
+      "version": "12.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.5.0.tgz",
+      "integrity": "sha512-9uXr4+OwjHVUxzdfYZ2yCnF3xlEzr8cZOdqjGnqD8Qb1NoCJrm7UXxG3RUpL2QqcqZ1eqVuxkFJTCky5Yit+XQ==",
       "requires": {
         "@babel/runtime": "^7.10.2"
       }
@@ -2209,9 +2209,9 @@
       }
     },
     "@types/eslint": {
-      "version": "7.2.5",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.5.tgz",
-      "integrity": "sha512-Dc6ar9x16BdaR3NSxSF7T4IjL9gxxViJq8RmFd+2UAyA+K6ck2W+gUwfgpG/y9TPyUuBL35109bbULpEynvltA==",
+      "version": "7.2.6",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.6.tgz",
+      "integrity": "sha512-I+1sYH+NPQ3/tVqCeUSBwTE/0heyvtXqpIopUUArlBm0Kpocb8FbMa3AZ/ASKIFpN3rnEx932TTXDbt9OXsNDw==",
       "requires": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -2266,9 +2266,9 @@
       }
     },
     "@types/jest": {
-      "version": "26.0.15",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.15.tgz",
-      "integrity": "sha512-s2VMReFXRg9XXxV+CW9e5Nz8fH2K1aEhwgjUqPPbQd7g95T0laAcvLv032EhFHIa5GHsZ8W7iJEQVaJq6k3Gog==",
+      "version": "26.0.16",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.16.tgz",
+      "integrity": "sha512-Gp12+7tmKCgv9JjtltxUXokohCAEZfpJaEW5tn871SGRp8I+bRWBonQO7vW5NHwnAHe5dd50+Q4zyKuN35i09g==",
       "requires": {
         "jest-diff": "^26.0.0",
         "pretty-format": "^26.0.0"
@@ -2381,9 +2381,9 @@
       }
     },
     "@types/webpack-sources": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-2.0.0.tgz",
-      "integrity": "sha512-a5kPx98CNFRKQ+wqawroFunvFqv7GHm/3KOI52NY9xWADgc8smu4R6prt4EU/M4QfVjvgBkMqU4fBhw3QfMVkg==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-2.1.0.tgz",
+      "integrity": "sha512-LXn/oYIpBeucgP1EIJbKQ2/4ZmpvRl+dlrFdX7+94SKRUV3Evy3FsfMZY318vGhkWUS5MPhtOM3w1/hCOAOXcg==",
       "requires": {
         "@types/node": "*",
         "@types/source-list-map": "*",
@@ -2398,9 +2398,9 @@
       }
     },
     "@types/yargs": {
-      "version": "15.0.10",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.10.tgz",
-      "integrity": "sha512-z8PNtlhrj7eJNLmrAivM7rjBESG6JwC5xP3RVk12i/8HVP7Xnx/sEmERnRImyEuUaJfO942X0qMOYsoupaJbZQ==",
+      "version": "15.0.11",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.11.tgz",
+      "integrity": "sha512-jfcNBxHFYJ4nPIacsi3woz1+kvUO6s1CyeEhtnDHBjHUMNj5UlW2GynmnSgiJJEdNg9yW5C8lfoNRZrHGv5EqA==",
       "requires": {
         "@types/yargs-parser": "*"
       }
@@ -2411,12 +2411,12 @@
       "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw=="
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.8.2.tgz",
-      "integrity": "sha512-gQ06QLV5l1DtvYtqOyFLXD9PdcILYqlrJj2l+CGDlPtmgLUzc1GpqciJFIRvyfvgLALpnxYINFuw+n9AZhPBKQ==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.9.0.tgz",
+      "integrity": "sha512-WrVzGMzzCrgrpnQMQm4Tnf+dk+wdl/YbgIgd5hKGa2P+lnJ2MON+nQnbwgbxtN9QDLi8HO+JAq0/krMnjQK6Cw==",
       "requires": {
-        "@typescript-eslint/experimental-utils": "4.8.2",
-        "@typescript-eslint/scope-manager": "4.8.2",
+        "@typescript-eslint/experimental-utils": "4.9.0",
+        "@typescript-eslint/scope-manager": "4.9.0",
         "debug": "^4.1.1",
         "functional-red-black-tree": "^1.0.1",
         "regexpp": "^3.0.0",
@@ -2425,50 +2425,50 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.8.2.tgz",
-      "integrity": "sha512-hpTw6o6IhBZEsQsjuw/4RWmceRyESfAiEzAEnXHKG1X7S5DXFaZ4IO1JO7CW1aQ604leQBzjZmuMI9QBCAJX8Q==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.9.0.tgz",
+      "integrity": "sha512-0p8GnDWB3R2oGhmRXlEnCvYOtaBCijtA5uBfH5GxQKsukdSQyI4opC4NGTUb88CagsoNQ4rb/hId2JuMbzWKFQ==",
       "requires": {
         "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/scope-manager": "4.8.2",
-        "@typescript-eslint/types": "4.8.2",
-        "@typescript-eslint/typescript-estree": "4.8.2",
+        "@typescript-eslint/scope-manager": "4.9.0",
+        "@typescript-eslint/types": "4.9.0",
+        "@typescript-eslint/typescript-estree": "4.9.0",
         "eslint-scope": "^5.0.0",
         "eslint-utils": "^2.0.0"
       }
     },
     "@typescript-eslint/parser": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.8.2.tgz",
-      "integrity": "sha512-u0leyJqmclYr3KcXOqd2fmx6SDGBO0MUNHHAjr0JS4Crbb3C3d8dwAdlazy133PLCcPn+aOUFiHn72wcuc5wYw==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.9.0.tgz",
+      "integrity": "sha512-QRSDAV8tGZoQye/ogp28ypb8qpsZPV6FOLD+tbN4ohKUWHD2n/u0Q2tIBnCsGwQCiD94RdtLkcqpdK4vKcLCCw==",
       "requires": {
-        "@typescript-eslint/scope-manager": "4.8.2",
-        "@typescript-eslint/types": "4.8.2",
-        "@typescript-eslint/typescript-estree": "4.8.2",
+        "@typescript-eslint/scope-manager": "4.9.0",
+        "@typescript-eslint/types": "4.9.0",
+        "@typescript-eslint/typescript-estree": "4.9.0",
         "debug": "^4.1.1"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.8.2.tgz",
-      "integrity": "sha512-qHQ8ODi7mMin4Sq2eh/6eu03uVzsf5TX+J43xRmiq8ujng7ViQSHNPLOHGw/Wr5dFEoxq/ubKhzClIIdQy5q3g==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.9.0.tgz",
+      "integrity": "sha512-q/81jtmcDtMRE+nfFt5pWqO0R41k46gpVLnuefqVOXl4QV1GdQoBWfk5REcipoJNQH9+F5l+dwa9Li5fbALjzg==",
       "requires": {
-        "@typescript-eslint/types": "4.8.2",
-        "@typescript-eslint/visitor-keys": "4.8.2"
+        "@typescript-eslint/types": "4.9.0",
+        "@typescript-eslint/visitor-keys": "4.9.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.8.2.tgz",
-      "integrity": "sha512-z1/AVcVF8ju5ObaHe2fOpZYEQrwHyZ7PTOlmjd3EoFeX9sv7UekQhfrCmgUO7PruLNfSHrJGQvrW3Q7xQ8EoAw=="
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.9.0.tgz",
+      "integrity": "sha512-luzLKmowfiM/IoJL/rus1K9iZpSJK6GlOS/1ezKplb7MkORt2dDcfi8g9B0bsF6JoRGhqn0D3Va55b+vredFHA=="
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.8.2.tgz",
-      "integrity": "sha512-HToGNwI6fekH0dOw3XEVESUm71Onfam0AKin6f26S2FtUmO7o3cLlWgrIaT1q3vjB3wCTdww3Dx2iGq5wtUOCg==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.9.0.tgz",
+      "integrity": "sha512-rmDR++PGrIyQzAtt3pPcmKWLr7MA+u/Cmq9b/rON3//t5WofNR4m/Ybft2vOLj0WtUzjn018ekHjTsnIyBsQug==",
       "requires": {
-        "@typescript-eslint/types": "4.8.2",
-        "@typescript-eslint/visitor-keys": "4.8.2",
+        "@typescript-eslint/types": "4.9.0",
+        "@typescript-eslint/visitor-keys": "4.9.0",
         "debug": "^4.1.1",
         "globby": "^11.0.1",
         "is-glob": "^4.0.1",
@@ -2478,11 +2478,11 @@
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.8.2.tgz",
-      "integrity": "sha512-Vg+/SJTMZJEKKGHW7YC21QxgKJrSbxoYYd3MEUGtW7zuytHuEcksewq0DUmo4eh/CTNrVJGSdIY9AtRb6riWFw==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.9.0.tgz",
+      "integrity": "sha512-sV45zfdRqQo1A97pOSx3fsjR+3blmwtdCt8LDrXgCX36v4Vmz4KHrhpV6Fo2cRdXmyumxx11AHw0pNJqCNpDyg==",
       "requires": {
-        "@typescript-eslint/types": "4.8.2",
+        "@typescript-eslint/types": "4.9.0",
         "eslint-visitor-keys": "^2.0.0"
       }
     },
@@ -3692,15 +3692,15 @@
       }
     },
     "browserslist": {
-      "version": "4.14.7",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.7.tgz",
-      "integrity": "sha512-BSVRLCeG3Xt/j/1cCGj1019Wbty0H+Yvu2AOuZSuoaUWn3RatbL33Cxk+Q4jRMRAbOm0p7SLravLjpnT6s0vzQ==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.15.0.tgz",
+      "integrity": "sha512-IJ1iysdMkGmjjYeRlDU8PQejVwxvVO5QOfXH7ylW31GO6LwNRSmm/SgRXtNsEXqMLl2e+2H5eEJ7sfynF8TCaQ==",
       "requires": {
-        "caniuse-lite": "^1.0.30001157",
+        "caniuse-lite": "^1.0.30001164",
         "colorette": "^1.2.1",
-        "electron-to-chromium": "^1.3.591",
+        "electron-to-chromium": "^1.3.612",
         "escalade": "^3.1.1",
-        "node-releases": "^1.1.66"
+        "node-releases": "^1.1.67"
       }
     },
     "bser": {
@@ -3844,12 +3844,19 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
     },
     "camel-case": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.1.tgz",
-      "integrity": "sha512-7fa2WcG4fYFkclIvEmxBbTvmibwF2/agfEBc6q3lOpVu0A13ltLsA+Hr/8Hp6kp5f+G7hKi6t8lys6XxP+1K6Q==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
       "requires": {
-        "pascal-case": "^3.1.1",
-        "tslib": "^1.10.0"
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
       }
     },
     "camelcase": {
@@ -3869,9 +3876,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001162",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001162.tgz",
-      "integrity": "sha512-E9FktFxaNnp4ky3ucIGzEXLM+Knzlpuq1oN1sFAU0KeayygabGTmOsndpo8QrL4D9pcThlf4D2pUKaDxPCUmVw=="
+      "version": "1.0.30001165",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001165.tgz",
+      "integrity": "sha512-8cEsSMwXfx7lWSUMA2s08z9dIgsnR5NAqjXP23stdsU3AUWkCr/rr4s4OFtHXn5XXr6+7kam3QFVoYyXNPdJPA=="
     },
     "capture-exit": {
       "version": "2.0.0",
@@ -5060,9 +5067,9 @@
       },
       "dependencies": {
         "domelementtype": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.2.tgz",
-          "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA=="
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz",
+          "integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w=="
         }
       }
     },
@@ -5109,12 +5116,19 @@
       }
     },
     "dot-case": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.3.tgz",
-      "integrity": "sha512-7hwEmg6RiSQfm/GwPL4AAWXKy3YNNZA3oFv2Pdiey0mwkRCPZ9x6SZbkLcn8Ma5PYeVokzoD4Twv2n7LKp5WeA==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
       "requires": {
-        "no-case": "^3.0.3",
-        "tslib": "^1.10.0"
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
       }
     },
     "dot-prop": {
@@ -5195,9 +5209,9 @@
       "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA=="
     },
     "electron-to-chromium": {
-      "version": "1.3.610",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.610.tgz",
-      "integrity": "sha512-eFDC+yVQpEhtlapk4CYDPfV9ajF9cEof5TBcO49L1ETO+aYogrKWDmYpZyxBScMNe8Bo/gJamH4amQ4yyvXg4g=="
+      "version": "1.3.615",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.615.tgz",
+      "integrity": "sha512-fNYTQXoUhNc6RmHDlGN4dgcLURSBIqQCN7ls6MuQ741+NJyLNRz8DxAC+pZpOKfRs6cfY0lv2kWdy8Oxf9j4+A=="
     },
     "elliptic": {
       "version": "6.5.3",
@@ -5905,9 +5919,9 @@
       "integrity": "sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ=="
     },
     "eslint-webpack-plugin": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/eslint-webpack-plugin/-/eslint-webpack-plugin-2.4.0.tgz",
-      "integrity": "sha512-j0lAJj3RnStAFdIH2P0+nsEImiBijwogZhL1go4bI6DE+9OhQuOmJ/xtmxkLtNr1w0cf5SRNkDlmIe8t/pHgww==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/eslint-webpack-plugin/-/eslint-webpack-plugin-2.4.1.tgz",
+      "integrity": "sha512-cj8iPWZKuAiVD8MMgTSunyMCAvxQxp5mxoPHZl1UMGkApFXaXJHdCFcCR+oZEJbBNhReNa5SjESIn34uqUbBtg==",
       "requires": {
         "@types/eslint": "^7.2.4",
         "arrify": "^2.0.1",
@@ -9677,11 +9691,18 @@
       }
     },
     "lower-case": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.1.tgz",
-      "integrity": "sha512-LiWgfDLLb1dwbFQZsSglpRj+1ctGnayXz3Uv0/WO8n558JycT5fg6zkNcnW0G68Nn0aEldTFeEfmjCfmqry/rQ==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
       "requires": {
-        "tslib": "^1.10.0"
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
       }
     },
     "lru-cache": {
@@ -10055,9 +10076,9 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
     },
     "nanoid": {
-      "version": "3.1.18",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.18.tgz",
-      "integrity": "sha512-rndlDjbbHbcV3xi+R2fpJ+PbGMdfBxz5v1fATIQFq0DP64FsicQdwnKLy47K4kZHdRpmQXtz24eGsxQqamzYTA=="
+      "version": "3.1.20",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
+      "integrity": "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw=="
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -10111,12 +10132,19 @@
       "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ=="
     },
     "no-case": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.3.tgz",
-      "integrity": "sha512-ehY/mVQCf9BL0gKfsJBvFJen+1V//U+0HQMPrWct40ixE4jnv0bfvxDbWtAHL9EcaPEOJHVVYKoQn1TlZUB8Tw==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
       "requires": {
-        "lower-case": "^2.0.1",
-        "tslib": "^1.10.0"
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
       }
     },
     "node-forge": {
@@ -10329,9 +10357,9 @@
       }
     },
     "object-inspect": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",
-      "integrity": "sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA=="
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
+      "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw=="
     },
     "object-is": {
       "version": "1.1.4",
@@ -10597,12 +10625,19 @@
       }
     },
     "param-case": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.3.tgz",
-      "integrity": "sha512-VWBVyimc1+QrzappRs7waeN2YmoZFCGXWASRYX1/rGHtXqEcrGEIDm+jqIwFa2fRXNgQEwrxaYuIrX0WcAguTA==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
       "requires": {
-        "dot-case": "^3.0.3",
-        "tslib": "^1.10.0"
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
       }
     },
     "parent-module": {
@@ -10647,12 +10682,19 @@
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
     },
     "pascal-case": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.1.tgz",
-      "integrity": "sha512-XIeHKqIrsquVTQL2crjq3NfJUxmdLasn3TYOU0VBM+UX2a6ztAWBlJQBePLGY7VHW8+2dRadeIPK5+KImwTxQA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
       "requires": {
-        "no-case": "^3.0.3",
-        "tslib": "^1.10.0"
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
       }
     },
     "pascalcase": {
@@ -11775,14 +11817,13 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "8.1.10",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.10.tgz",
-          "integrity": "sha512-iBXEV5VTTYaRRdxiFYzTtuv2lGMQBExqkZKSzkJe+Fl6rvQrA/49UVGKqB+LG54hpW/TtDBMGds8j33GFNW7pg==",
+          "version": "8.1.14",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.14.tgz",
+          "integrity": "sha512-KatkyVPBKfENS+c3dpXJoDXnDD5UZs5exAnDksLqaRJPKwYphEPZt4N0m0i049v2/BtWVQibAhxW4ilXXcolpA==",
           "requires": {
             "colorette": "^1.2.1",
-            "nanoid": "^3.1.18",
-            "source-map": "^0.6.1",
-            "vfile-location": "^3.2.0"
+            "nanoid": "^3.1.20",
+            "source-map": "^0.6.1"
           }
         },
         "source-map": {
@@ -14875,11 +14916,6 @@
         "extsprintf": "^1.2.0"
       }
     },
-    "vfile-location": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-3.2.0.tgz",
-      "integrity": "sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA=="
-    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -16310,9 +16346,9 @@
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
     "y18n": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
+      "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ=="
     },
     "yallist": {
       "version": "4.0.0",

public_html/js/react/react01/package.json

@@ -1,11 +1,11 @@
 {
-  "name": "react01",
+  "name": "reactcw3",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.2.2",
+    "@testing-library/user-event": "^12.5.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",

public_html/js/react/react01/src/index.css

@@ -2,15 +2,15 @@ body {
 
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  monospace;
 }
 .mainContent{
   display: flex;
@@ -54,4 +54,42 @@ code {
 .clear:hover{
   transform: scale(1.05);
 }
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 

public_html/react/react01/src/App.jsx

@@ -0,0 +1,63 @@
+    import './App.css';
+    import {userData} from "./condidateArr";
+    import React from "react";
+    import {useState} from 'react';
+    import Header from "./component/header";
+
+    let Card = (props) => {
+        return (
+            <div className='mainContent'>
+                <div className='card'>
+                    <p className='CardText'>{props.name}</p>
+                    <p className='CardText'>{props.age}</p>
+                    <p className='CardText'>{props.gender}</p>
+                    <p className='CardText'>{props.balance}</p>
+                    <img className='YouImg' src='https://i1.sndcdn.com/artworks-000580655825-uvkn3k-t500x500.jpg'
+                         alt='Ваше фото'/>
+                </div>
+            </div>
+        )
+    }
+
+    function App() {
+        const [state, setState] = useState(userData)
+
+        const HandleSortByAges = evt => {
+            const {value} = evt.target;
+            if (value === '') {
+                setState(userData)
+                return
+            }
+            const result = [...userData].sort((a, b) => {
+                return value === 'small' ? a.age - b.age : b.age - a.age
+
+            })
+            setState(result)
+        }
+
+        let clear = () => {
+            setState(userData)
+        }
+
+        const filterByName = evt => {
+            const {value} = evt.target;
+            const result = userData.filter(user => {
+                return user.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
+
+            })
+            setState(result)
+        }
+        return (
+            <>
+                <Header filterByName={filterByName}
+                        HandleSortByAges={HandleSortByAges}
+                        clear={clear}/>
+
+                <div className='mainContent'>
+                    {state.map(item => <Card {...item}/>)}
+                </div>
+            </>
+        )
+    }
+
+    export default App;

public_html/react/react01/src/component/header/header.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Input from "../input";
+
+const Header =({filterByName,
+              HandleSortByAges,
+               clear})=>{
+    return (
+        <header>
+            <select name="selection" id="selectionBar" onChange={HandleSortByAges}>
+                <option value=''>...</option>
+                <option value="big">От стариков до молдых</option>
+                <option value="small">От молодых к старикров</option>
+            </select>
+            <Input onChange={filterByName} placeholder="Search"/>
+            <button className='clear' onClick={clear}>Reset all</button>
+        </header>
+    );
+}
+
+export default Header;

public_html/react/react01/src/component/header/index.js

@@ -0,0 +1,2 @@
+import Header from "./header";
+export default Header

public_html/react/react01/src/component/input/index.js

@@ -0,0 +1,2 @@
+import Input from "./input";
+export default Input

public_html/react/react01/src/component/input/input.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import './style.css'
+
+const Input = ({
+                   placeholder,
+                   onChange
+               }) => {
+    return <input
+        placeholder={placeholder}
+        onChange={(e) => onChange && onChange(e)}
+    />
+}
+
+export default Input

public_html/react/react01/src/component/input/style.css

@@ -0,0 +1,5 @@
+input{
+    margin: 20px 20px 0;
+    border: 2px solid black;
+    font-size: 20px;
+}

public_html/react/react01/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

public_html/js/react/react01/src/index.js

@@ -2,7 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import './condidateArr.js'
+
+
 ReactDOM.render(
   <React.StrictMode>
     <App />
@@ -10,4 +11,3 @@ ReactDOM.render(
   document.getElementById('root')
 );
 
-