From 9188a52330fdb32f9419c41ca4b659f88de08eb7 Mon Sep 17 00:00:00 2001
From: alex-ismailov <alexx.ismailov@gmail.com>
Date: Sat, 30 Mar 2024 15:44:16 -0400
Subject: [PATCH 1/6] Add react-select package [les 11 ex 1]

---
 package.json |   1 +
 yarn.lock    | 200 +++++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 194 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 68f59ae..6c0cffb 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "ramda": "^0.29.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-select": "^5.8.0",
     "styled-components": "5.3.11",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12",
diff --git a/yarn.lock b/yarn.lock
index 6eb6bd3..7c82374 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -227,6 +227,13 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-module-imports@^7.16.7":
+  version "7.24.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz#6ac476e6d168c7c23ff3ba3cf4f7841d46ac8128"
+  integrity sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==
+  dependencies:
+    "@babel/types" "^7.24.0"
+
 "@babel/helper-module-transforms@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.16.0.tgz#1c82a8dd4cb34577502ebd2909699b194c3e9bb5"
@@ -1022,6 +1029,13 @@
     "@babel/plugin-transform-react-jsx-development" "^7.22.5"
     "@babel/plugin-transform-react-pure-annotations" "^7.23.3"
 
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
+  integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.15.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.16.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
@@ -1102,16 +1116,58 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.24.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.0.tgz#3b951f435a92e7333eba05b7566fd297960ea1bf"
+  integrity sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==
+  dependencies:
+    "@babel/helper-string-parser" "^7.23.4"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
   integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
 
+"@emotion/babel-plugin@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
+  integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.1"
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/serialize" "^1.1.2"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.2.0"
+
+"@emotion/cache@^11.11.0", "@emotion/cache@^11.4.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
+  integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==
+  dependencies:
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/sheet" "^1.2.2"
+    "@emotion/utils" "^1.2.1"
+    "@emotion/weak-memoize" "^0.3.1"
+    stylis "4.2.0"
+
 "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
+"@emotion/hash@^0.9.1":
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
+  integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
+
 "@emotion/is-prop-valid@^1.1.0":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
@@ -1124,6 +1180,36 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
   integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
+"@emotion/react@^11.8.1":
+  version "11.11.4"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.4.tgz#3a829cac25c1f00e126408fab7f891f00ecc3c1d"
+  integrity sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.11.0"
+    "@emotion/cache" "^11.11.0"
+    "@emotion/serialize" "^1.1.3"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
+    "@emotion/utils" "^1.2.1"
+    "@emotion/weak-memoize" "^0.3.1"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.1.2", "@emotion/serialize@^1.1.3":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.4.tgz#fc8f6d80c492cfa08801d544a05331d1cc7cd451"
+  integrity sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==
+  dependencies:
+    "@emotion/hash" "^0.9.1"
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/unitless" "^0.8.1"
+    "@emotion/utils" "^1.2.1"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
+  integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==
+
 "@emotion/stylis@^0.8.4":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
@@ -1134,6 +1220,26 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@emotion/unitless@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
+  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
+  integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
+
+"@emotion/utils@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4"
+  integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==
+
+"@emotion/weak-memoize@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
+  integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -1149,6 +1255,26 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@floating-ui/core@^1.0.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
+  integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
+  dependencies:
+    "@floating-ui/utils" "^0.2.1"
+
+"@floating-ui/dom@^1.0.1":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
+  integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
+
 "@gar/promisify@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"
@@ -1416,7 +1542,7 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-transition-group@^4.2.0":
+"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.0":
   version "4.4.10"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
   integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
@@ -1997,6 +2123,15 @@ babel-plugin-macros@^2.8.0:
     cosmiconfig "^6.0.0"
     resolve "^1.12.0"
 
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
 babel-plugin-polyfill-corejs2@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.0.tgz#407082d0d355ba565af24126fb6cb8e9115251fd"
@@ -2675,6 +2810,11 @@ content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
+convert-source-map@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
 convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
@@ -2748,6 +2888,17 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
+cosmiconfig@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -4031,6 +4182,11 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@@ -4510,7 +4666,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -5645,6 +5801,11 @@ memoize-one@^5.1.1:
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
 
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -7185,7 +7346,7 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7387,7 +7548,22 @@ react-redux@^7.2.0:
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
-react-transition-group@^4.4.0:
+react-select@^5.8.0:
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5"
+  integrity sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.8.1"
+    "@floating-ui/dom" "^1.0.1"
+    "@types/react-transition-group" "^4.4.0"
+    memoize-one "^6.0.0"
+    prop-types "^15.6.0"
+    react-transition-group "^4.3.0"
+    use-isomorphic-layout-effect "^1.1.2"
+
+react-transition-group@^4.3.0, react-transition-group@^4.4.0:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
@@ -7626,7 +7802,7 @@ resolve@^1.1.7, resolve@^1.12.0, resolve@^1.14.2:
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
-resolve@^1.22.4:
+resolve@^1.19.0, resolve@^1.22.4:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -8108,7 +8284,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
-source-map@^0.5.0, source-map@^0.5.6:
+source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -8391,6 +8567,11 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylis@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
+  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
+
 supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -8812,6 +8993,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-isomorphic-layout-effect@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
 use-memo-one@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
@@ -9172,7 +9358,7 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.7.2:
+yaml@^1.10.0, yaml@^1.7.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==

From 3f82d3f2785443cf143d0f64b8c3ed25b36dfbcb Mon Sep 17 00:00:00 2001
From: alex-ismailov <alexx.ismailov@gmail.com>
Date: Sat, 30 Mar 2024 15:53:01 -0400
Subject: [PATCH 2/6] Add user api [les 11 ex 2]

---
 app/controllers/api/v1/users_controller.rb | 13 +++++++++++++
 app/serializers/user_serializer.rb         |  3 +++
 config/routes.rb                           |  1 +
 test/api/v1/users_controller_test.rb       | 16 ++++++++++++++++
 4 files changed, 33 insertions(+)
 create mode 100644 app/controllers/api/v1/users_controller.rb
 create mode 100644 app/serializers/user_serializer.rb
 create mode 100644 test/api/v1/users_controller_test.rb

diff --git a/app/controllers/api/v1/users_controller.rb b/app/controllers/api/v1/users_controller.rb
new file mode 100644
index 0000000..aae214b
--- /dev/null
+++ b/app/controllers/api/v1/users_controller.rb
@@ -0,0 +1,13 @@
+class Api::V1::UsersController < Api::V1::ApplicationController
+  def show
+    user = User.find(params[:id])
+
+    respond_with(user, serializer: UserSerializer)
+  end
+
+  def index
+    users = User.ransack(ransack_params).result.page(page).per(per_page)
+
+    respond_with(users, each_serializer: UserSerializer, meta: build_meta(users), root: 'items')
+  end
+end
diff --git a/app/serializers/user_serializer.rb b/app/serializers/user_serializer.rb
new file mode 100644
index 0000000..fba34c7
--- /dev/null
+++ b/app/serializers/user_serializer.rb
@@ -0,0 +1,3 @@
+class UserSerializer < ApplicationSerializer
+  attributes :id, :first_name, :last_name, :email
+end
diff --git a/config/routes.rb b/config/routes.rb
index 10019a2..0985ebc 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -15,6 +15,7 @@
   namespace :api do
     namespace :v1 do
       resources :tasks, only: [:index, :show, :create, :update, :destroy]
+      resources :users, only: [:index, :show]
     end
   end
 end
diff --git a/test/api/v1/users_controller_test.rb b/test/api/v1/users_controller_test.rb
new file mode 100644
index 0000000..21fba79
--- /dev/null
+++ b/test/api/v1/users_controller_test.rb
@@ -0,0 +1,16 @@
+require 'test_helper'
+
+class Api::V1::UsersControllerTest < ActionController::TestCase
+
+  test "should get show" do
+    user = create :user
+    get :show, params: { id: user.id, format: :json }
+    assert_response :success
+  end
+
+  test "should get index" do
+    get :index, params: { format: :json }
+    assert_response :success
+  end
+
+end

From 5fa831587ef48a58035c2c8f506f2262098fae55 Mon Sep 17 00:00:00 2001
From: alex-ismailov <alexx.ismailov@gmail.com>
Date: Sun, 31 Mar 2024 00:46:41 -0400
Subject: [PATCH 3/6] Add functionality to interact with user api [les 11 ex 3]

---
 app/controllers/api/v1/users_controller.rb    |  2 +
 .../components/AddPopup/AddPopup.js           | 15 +++-
 .../components/EditPopup/EditPopup.js         | 14 +---
 .../EditPopup/components/Form/Form.js         | 21 +++++-
 .../components/UserSelect/UserSelect.js       | 74 +++++++++++++++++++
 app/javascript/components/UserSelect/index.js |  3 +
 .../components/UserSelect/useStyles.js        |  9 +++
 .../repositories/UsersRepository.js           | 16 ++++
 app/javascript/routes/ApiRoutes.js            | 17 +++++
 app/views/layouts/application.html.slim       |  2 +-
 test/api/v1/users_controller_test.rb          |  8 +-
 11 files changed, 162 insertions(+), 19 deletions(-)
 create mode 100644 app/javascript/components/UserSelect/UserSelect.js
 create mode 100644 app/javascript/components/UserSelect/index.js
 create mode 100644 app/javascript/components/UserSelect/useStyles.js
 create mode 100644 app/javascript/repositories/UsersRepository.js

diff --git a/app/controllers/api/v1/users_controller.rb b/app/controllers/api/v1/users_controller.rb
index aae214b..9ed866b 100644
--- a/app/controllers/api/v1/users_controller.rb
+++ b/app/controllers/api/v1/users_controller.rb
@@ -1,4 +1,6 @@
 class Api::V1::UsersController < Api::V1::ApplicationController
+  respond_to :json
+
   def show
     user = User.find(params[:id])
 
diff --git a/app/javascript/components/AddPopup/AddPopup.js b/app/javascript/components/AddPopup/AddPopup.js
index 7c6ee41..3da7ad1 100644
--- a/app/javascript/components/AddPopup/AddPopup.js
+++ b/app/javascript/components/AddPopup/AddPopup.js
@@ -13,6 +13,7 @@ import Modal from '@material-ui/core/Modal';
 import TextField from '@material-ui/core/TextField';
 
 import TaskForm from 'forms/TaskForm';
+import UserSelect from 'components/UserSelect';
 
 import useStyles from './useStyles';
 
@@ -23,6 +24,8 @@ const AddPopup = (props) => {
   const [isSaving, setSaving] = useState(false);
   const [errors, setErrors] = useState({});
 
+  const styles = useStyles();
+
   const handleCreate = () => {
     setSaving(true);
 
@@ -38,7 +41,8 @@ const AddPopup = (props) => {
   };
 
   const handleChangeTextField = (fieldName) => (event) => changeTask({ ...task, [fieldName]: event.target.value });
-  const styles = useStyles();
+
+  const handleSelectChange = (fieldName) => (user) => changeTask({ ...task, [fieldName]: user });
 
   return (
     <Modal className={styles.modal} open onClose={onClose}>
@@ -71,6 +75,15 @@ const AddPopup = (props) => {
               required
               margin="dense"
             />
+            <UserSelect
+              isRequired
+              isDisabled={isSaving}
+              label="Author"
+              value={task.author}
+              error={has('author', errors)}
+              helperText={errors.author}
+              onChange={handleSelectChange('author')}
+            />
           </div>
         </CardContent>
         <CardActions className={styles.actions}>
diff --git a/app/javascript/components/EditPopup/EditPopup.js b/app/javascript/components/EditPopup/EditPopup.js
index 0b0c18e..0e39f11 100644
--- a/app/javascript/components/EditPopup/EditPopup.js
+++ b/app/javascript/components/EditPopup/EditPopup.js
@@ -24,7 +24,7 @@ const EditPopup = (props) => {
   const styles = useStyles();
 
   const isLoading = isNil(task);
-  const isEditButtonDisabled = isLoading && isSaving;
+  const isDataLoading = isLoading && isSaving;
 
   const handleCardUpdate = () => {
     setSaving(true);
@@ -72,21 +72,15 @@ const EditPopup = (props) => {
               <CircularProgress />
             </div>
           ) : (
-            <Form errors={errors} onChange={setTask} task={task} />
+            <Form isDataLoading={isDataLoading} errors={errors} onChange={setTask} task={task} />
           )}
         </CardContent>
         <CardActions className={styles.actions}>
-          <Button
-            disabled={isEditButtonDisabled}
-            size="small"
-            variant="contained"
-            color="primary"
-            onClick={handleCardUpdate}
-          >
+          <Button disabled={isDataLoading} size="small" variant="contained" color="primary" onClick={handleCardUpdate}>
             Update
           </Button>
           <Button
-            disabled={isEditButtonDisabled}
+            disabled={isDataLoading}
             size="small"
             variant="contained"
             color="secondary"
diff --git a/app/javascript/components/EditPopup/components/Form/Form.js b/app/javascript/components/EditPopup/components/Form/Form.js
index 7ef07ba..9d9e083 100644
--- a/app/javascript/components/EditPopup/components/Form/Form.js
+++ b/app/javascript/components/EditPopup/components/Form/Form.js
@@ -4,12 +4,19 @@ import { has } from 'ramda';
 
 import TextField from '@material-ui/core/TextField';
 
+import UserSelect from 'components/UserSelect';
+
 import useStyles from './useStyles';
 
-const Form = ({ errors, onChange, task }) => {
-  const handleChangeTextField = (fieldName) => (event) => onChange({ ...task, [fieldName]: event.target.value });
+const Form = (props) => {
+  const { isDataLoading, errors, onChange, task } = props;
+
   const styles = useStyles();
 
+  const handleChangeTextField = (fieldName) => (event) => onChange({ ...task, [fieldName]: event.target.value });
+
+  const handleSelectChange = (fieldName) => (user) => onChange({ ...task, [fieldName]: user });
+
   return (
     <form className={styles.root}>
       <TextField
@@ -31,11 +38,21 @@ const Form = ({ errors, onChange, task }) => {
         multiline
         margin="dense"
       />
+      <UserSelect
+        isRequired
+        isDisabled={isDataLoading}
+        label="Author"
+        value={task.author}
+        error={has('author', errors)}
+        helperText={errors.author}
+        onChange={handleSelectChange('author')}
+      />
     </form>
   );
 };
 
 Form.propTypes = {
+  isDataLoading: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
   task: PropTypes.shape().isRequired,
   errors: PropTypes.shape({
diff --git a/app/javascript/components/UserSelect/UserSelect.js b/app/javascript/components/UserSelect/UserSelect.js
new file mode 100644
index 0000000..17ab66e
--- /dev/null
+++ b/app/javascript/components/UserSelect/UserSelect.js
@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import AsyncSelect from 'react-select/async';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+
+import InputLabel from '@material-ui/core/InputLabel';
+
+import UsersRepository from 'repositories/UsersRepository';
+
+import useStyles from './useStyles';
+
+const UserSelect = (props) => {
+  const { error, label, isClearable, isDisabled, isRequired, onChange, value, helperText } = props;
+
+  const [isFocused, setFocus] = useState(false);
+
+  const styles = useStyles();
+
+  const handleLoadOptions = async (inputValue) => {
+    const response = await UsersRepository.index({ q: { firstNameOrLastNameCont: inputValue } });
+    const {
+      data: { items },
+    } = response;
+
+    return items;
+  };
+
+  return (
+    <FormControl margin="dense" disabled={isDisabled} focused={isFocused} error={error} required={isRequired}>
+      <InputLabel shrink>{label}</InputLabel>
+      <div className={styles.select}>
+        <AsyncSelect
+          cacheOptions
+          loadOptions={handleLoadOptions}
+          defaultOptions
+          getOptionLabel={(user) => `${user.firstName} ${user.lastName}`}
+          getOptionValue={(user) => user.id}
+          isDisabled={isDisabled}
+          isClearable={isClearable}
+          defaultValue={value}
+          onChange={onChange}
+          onFocus={() => setFocus(true)}
+          onBlur={() => setFocus(false)}
+          menuPortalTarget={document.body}
+          styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
+        />
+      </div>
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  );
+};
+
+UserSelect.propTypes = {
+  isRequired: PropTypes.bool,
+  isDisabled: PropTypes.bool.isRequired,
+  isClearable: PropTypes.bool,
+  label: PropTypes.string.isRequired,
+  value: PropTypes.shape(),
+  error: PropTypes.bool,
+  helperText: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+UserSelect.defaultProps = {
+  isRequired: false,
+  value: {},
+  error: {},
+  isClearable: true,
+  helperText: '',
+};
+
+export default UserSelect;
diff --git a/app/javascript/components/UserSelect/index.js b/app/javascript/components/UserSelect/index.js
new file mode 100644
index 0000000..ac13906
--- /dev/null
+++ b/app/javascript/components/UserSelect/index.js
@@ -0,0 +1,3 @@
+import UserSelect from './UserSelect';
+
+export default UserSelect;
diff --git a/app/javascript/components/UserSelect/useStyles.js b/app/javascript/components/UserSelect/useStyles.js
new file mode 100644
index 0000000..900c58b
--- /dev/null
+++ b/app/javascript/components/UserSelect/useStyles.js
@@ -0,0 +1,9 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(() => ({
+  select: {
+    paddingTop: 16,
+  },
+}));
+
+export default useStyles;
diff --git a/app/javascript/repositories/UsersRepository.js b/app/javascript/repositories/UsersRepository.js
new file mode 100644
index 0000000..f8f6bc9
--- /dev/null
+++ b/app/javascript/repositories/UsersRepository.js
@@ -0,0 +1,16 @@
+import routes from '../routes';
+import FetchHelper from 'utils/fetchHelper';
+
+export default {
+  index(params) {
+    const path = routes.apiV1UsersPath({ format: 'json' });
+
+    return FetchHelper.get(path, params);
+  },
+
+  show(id) {
+    const path = routes.apiV1UserPath(id, { format: 'json' });
+
+    return FetchHelper.get(path);
+  },
+};
diff --git a/app/javascript/routes/ApiRoutes.js b/app/javascript/routes/ApiRoutes.js
index bd65f5b..581e50a 100644
--- a/app/javascript/routes/ApiRoutes.js
+++ b/app/javascript/routes/ApiRoutes.js
@@ -567,6 +567,23 @@ export const apiV1TaskPath = /*#__PURE__*/ __jsr.r({"id":{"r":true},"format":{}}
  */
 export const apiV1TasksPath = /*#__PURE__*/ __jsr.r({"format":{}}, [2,[7,"/"],[2,[6,"api"],[2,[7,"/"],[2,[6,"v1"],[2,[7,"/"],[2,[6,"tasks"],[1,[2,[8,"."],[3,"format"]]]]]]]]]);
 
+/**
+ * Generates rails route to
+ * /api/v1/users/:id(.:format)
+ * @param {any} id
+ * @param {object | undefined} options
+ * @returns {string} route path
+ */
+export const apiV1UserPath = /*#__PURE__*/ __jsr.r({"id":{"r":true},"format":{}}, [2,[7,"/"],[2,[6,"api"],[2,[7,"/"],[2,[6,"v1"],[2,[7,"/"],[2,[6,"users"],[2,[7,"/"],[2,[3,"id"],[1,[2,[8,"."],[3,"format"]]]]]]]]]]]);
+
+/**
+ * Generates rails route to
+ * /api/v1/users(.:format)
+ * @param {object | undefined} options
+ * @returns {string} route path
+ */
+export const apiV1UsersPath = /*#__PURE__*/ __jsr.r({"format":{}}, [2,[7,"/"],[2,[6,"api"],[2,[7,"/"],[2,[6,"v1"],[2,[7,"/"],[2,[6,"users"],[1,[2,[8,"."],[3,"format"]]]]]]]]]);
+
 /**
  * Generates rails route to
  * /board(.:format)
diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim
index 6de046c..1163075 100644
--- a/app/views/layouts/application.html.slim
+++ b/app/views/layouts/application.html.slim
@@ -28,7 +28,7 @@ html lang="en"
             - if current_user.is_a? Admin
               = link_to "Admin page", admin_users_url, class: 'mdl-navigation__link'
             = current_user.first_name
-            = link_to "Log out", session_path, method: :delete, confirm: "confirm?", class: 'mdl-navigation__link'
+            = link_to "Log out", session_path, method: "delete", confirm: "confirm?", class: 'mdl-navigation__link'
           - else
             = link_to "Sign in", new_session_path, class: 'mdl-navigation__link'
             = link_to "Sign up", new_developer_path, class: 'mdl-navigation__link'
diff --git a/test/api/v1/users_controller_test.rb b/test/api/v1/users_controller_test.rb
index 21fba79..cab6b22 100644
--- a/test/api/v1/users_controller_test.rb
+++ b/test/api/v1/users_controller_test.rb
@@ -1,16 +1,14 @@
 require 'test_helper'
 
 class Api::V1::UsersControllerTest < ActionController::TestCase
-
-  test "should get show" do
-    user = create :user
+  test 'should get show' do
+    user = create(:user)
     get :show, params: { id: user.id, format: :json }
     assert_response :success
   end
 
-  test "should get index" do
+  test 'should get index' do
     get :index, params: { format: :json }
     assert_response :success
   end
-
 end

From 97a6ae664eb548e36173eff4e2501406de6339a7 Mon Sep 17 00:00:00 2001
From: alex-ismailov <alexx.ismailov@gmail.com>
Date: Sun, 31 Mar 2024 14:47:12 -0400
Subject: [PATCH 4/6] Add TaskPresenter and UserPresenter [les 11 ex 4]

---
 .../components/AddPopup/AddPopup.js           |  8 ++++---
 .../components/EditPopup/EditPopup.js         |  6 ++++-
 .../EditPopup/components/Form/Form.js         | 10 ++++----
 app/javascript/components/Task/Task.js        |  8 ++++---
 .../components/TaskBoard/TaskBoard.js         |  6 +++--
 .../components/UserSelect/UserSelect.js       | 18 +++++++++++----
 app/javascript/forms/TaskForm.js              |  6 +++--
 app/javascript/presenters/TaskPresenter.js    | 22 ++++++++++++++++++
 app/javascript/presenters/UserPresenter.js    | 21 +++++++++++++++++
 app/javascript/utils/PropTypesPresenter.js    | 23 +++++++++++++++++++
 10 files changed, 108 insertions(+), 20 deletions(-)
 create mode 100644 app/javascript/presenters/TaskPresenter.js
 create mode 100644 app/javascript/presenters/UserPresenter.js
 create mode 100644 app/javascript/utils/PropTypesPresenter.js

diff --git a/app/javascript/components/AddPopup/AddPopup.js b/app/javascript/components/AddPopup/AddPopup.js
index 3da7ad1..f4ec8ba 100644
--- a/app/javascript/components/AddPopup/AddPopup.js
+++ b/app/javascript/components/AddPopup/AddPopup.js
@@ -12,6 +12,8 @@ import IconButton from '@material-ui/core/IconButton';
 import Modal from '@material-ui/core/Modal';
 import TextField from '@material-ui/core/TextField';
 
+import TaskPresenter from 'presenters/TaskPresenter';
+
 import TaskForm from 'forms/TaskForm';
 import UserSelect from 'components/UserSelect';
 
@@ -61,7 +63,7 @@ const AddPopup = (props) => {
               error={has('name', errors)}
               helperText={errors.name}
               onChange={handleChangeTextField('name')}
-              value={task.name}
+              value={TaskPresenter.name(task)}
               label="Name"
               required
               margin="dense"
@@ -70,7 +72,7 @@ const AddPopup = (props) => {
               error={has('description', errors)}
               helperText={errors.description}
               onChange={handleChangeTextField('description')}
-              value={task.description}
+              value={TaskPresenter.description(task)}
               label="Description"
               required
               margin="dense"
@@ -79,7 +81,7 @@ const AddPopup = (props) => {
               isRequired
               isDisabled={isSaving}
               label="Author"
-              value={task.author}
+              value={TaskPresenter.author(task)}
               error={has('author', errors)}
               helperText={errors.author}
               onChange={handleSelectChange('author')}
diff --git a/app/javascript/components/EditPopup/EditPopup.js b/app/javascript/components/EditPopup/EditPopup.js
index 0e39f11..711feb6 100644
--- a/app/javascript/components/EditPopup/EditPopup.js
+++ b/app/javascript/components/EditPopup/EditPopup.js
@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { isNil } from 'ramda';
 
+import TaskPresenter from 'presenters/TaskPresenter';
+
 import Form from './components/Form';
 import Modal from '@material-ui/core/Modal';
 import Card from '@material-ui/core/Card';
@@ -64,7 +66,9 @@ const EditPopup = (props) => {
               <CloseIcon />
             </IconButton>
           }
-          title={isLoading ? 'Your task is loading. Please be patient.' : `Task # ${task.id} [${task.name}]`}
+          title={
+            isLoading ? 'Your task is loading. Please be patient.' : `Task # ${task.id} [${TaskPresenter.name(task)}]`
+          }
         />
         <CardContent>
           {isLoading ? (
diff --git a/app/javascript/components/EditPopup/components/Form/Form.js b/app/javascript/components/EditPopup/components/Form/Form.js
index 9d9e083..e184234 100644
--- a/app/javascript/components/EditPopup/components/Form/Form.js
+++ b/app/javascript/components/EditPopup/components/Form/Form.js
@@ -8,6 +8,8 @@ import UserSelect from 'components/UserSelect';
 
 import useStyles from './useStyles';
 
+import TaskPresenter from 'presenters/TaskPresenter';
+
 const Form = (props) => {
   const { isDataLoading, errors, onChange, task } = props;
 
@@ -23,7 +25,7 @@ const Form = (props) => {
         error={has('name', errors)}
         helperText={errors.name}
         onChange={handleChangeTextField('name')}
-        value={task.name}
+        value={TaskPresenter.name(task)}
         label="Name"
         required
         margin="dense"
@@ -32,7 +34,7 @@ const Form = (props) => {
         error={has('description', errors)}
         helperText={errors.description}
         onChange={handleChangeTextField('description')}
-        value={task.description}
+        value={TaskPresenter.description(task)}
         label="Description"
         required
         multiline
@@ -42,7 +44,7 @@ const Form = (props) => {
         isRequired
         isDisabled={isDataLoading}
         label="Author"
-        value={task.author}
+        value={TaskPresenter.author(task)}
         error={has('author', errors)}
         helperText={errors.author}
         onChange={handleSelectChange('author')}
@@ -54,7 +56,7 @@ const Form = (props) => {
 Form.propTypes = {
   isDataLoading: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
-  task: PropTypes.shape().isRequired,
+  task: TaskPresenter.shape().isRequired,
   errors: PropTypes.shape({
     name: PropTypes.arrayOf(PropTypes.string),
     description: PropTypes.arrayOf(PropTypes.string),
diff --git a/app/javascript/components/Task/Task.js b/app/javascript/components/Task/Task.js
index 7f9b39a..899deff 100644
--- a/app/javascript/components/Task/Task.js
+++ b/app/javascript/components/Task/Task.js
@@ -8,6 +8,8 @@ import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import EditIcon from '@material-ui/icons/Edit';
 
+import TaskPresenter from 'presenters/TaskPresenter';
+
 import useStyles from './useStyles';
 
 const Task = (props) => {
@@ -25,10 +27,10 @@ const Task = (props) => {
 
   return (
     <Card className={styles.root}>
-      <CardHeader title={task.name} action={action} />
+      <CardHeader title={TaskPresenter.name(task)} action={action} />
       <CardContent>
         <Typography variant="body2" color="textSecondary" component="p">
-          {task.description}
+          {TaskPresenter.description(task)}
         </Typography>
       </CardContent>
     </Card>
@@ -36,7 +38,7 @@ const Task = (props) => {
 };
 
 Task.propTypes = {
-  task: PropTypes.shape().isRequired,
+  task: TaskPresenter.shape().isRequired,
   onClick: PropTypes.func.isRequired,
 };
 
diff --git a/app/javascript/components/TaskBoard/TaskBoard.js b/app/javascript/components/TaskBoard/TaskBoard.js
index 71e933d..6f0a9dc 100644
--- a/app/javascript/components/TaskBoard/TaskBoard.js
+++ b/app/javascript/components/TaskBoard/TaskBoard.js
@@ -6,6 +6,8 @@ import Container from '@material-ui/core/Container';
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
 
+import TaskPresenter from 'presenters/TaskPresenter';
+
 import useStyles from './useStyles';
 
 import TaskForm from 'forms/TaskForm';
@@ -109,7 +111,7 @@ const TaskBoard = () => {
     const attributes = TaskForm.attributesToSubmit(task);
 
     return TasksRepository.update(task.id, attributes).then(() => {
-      loadColumnInitial(task.state);
+      loadColumnInitial(TaskPresenter.state(task));
       handleModalClose();
     });
   };
@@ -147,7 +149,7 @@ const TaskBoard = () => {
     const attributes = TaskForm.attributesToSubmit(params);
 
     return TasksRepository.create(attributes).then(({ data: { task } }) => {
-      loadColumnInitial(task.state);
+      loadColumnInitial(TaskPresenter.state(task));
       setMode(MODES.NONE);
     });
   };
diff --git a/app/javascript/components/UserSelect/UserSelect.js b/app/javascript/components/UserSelect/UserSelect.js
index 17ab66e..d1e6d10 100644
--- a/app/javascript/components/UserSelect/UserSelect.js
+++ b/app/javascript/components/UserSelect/UserSelect.js
@@ -10,6 +10,7 @@ import InputLabel from '@material-ui/core/InputLabel';
 import UsersRepository from 'repositories/UsersRepository';
 
 import useStyles from './useStyles';
+import UserPresenter from '../../presenters/UserPresenter';
 
 const UserSelect = (props) => {
   const { error, label, isClearable, isDisabled, isRequired, onChange, value, helperText } = props;
@@ -18,6 +19,13 @@ const UserSelect = (props) => {
 
   const styles = useStyles();
 
+  const customStyles = { menuPortal: (base) => ({ ...base, zIndex: 9999 }) };
+
+  const getOptionLabel = (user) => UserPresenter.fullName(user);
+  const getOptionValue = (user) => user.id;
+  const handleFocus = () => setFocus(true);
+  const handleBlur = () => setFocus(false);
+
   const handleLoadOptions = async (inputValue) => {
     const response = await UsersRepository.index({ q: { firstNameOrLastNameCont: inputValue } });
     const {
@@ -35,16 +43,16 @@ const UserSelect = (props) => {
           cacheOptions
           loadOptions={handleLoadOptions}
           defaultOptions
-          getOptionLabel={(user) => `${user.firstName} ${user.lastName}`}
-          getOptionValue={(user) => user.id}
+          getOptionLabel={getOptionLabel}
+          getOptionValue={getOptionValue}
           isDisabled={isDisabled}
           isClearable={isClearable}
           defaultValue={value}
           onChange={onChange}
-          onFocus={() => setFocus(true)}
-          onBlur={() => setFocus(false)}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
           menuPortalTarget={document.body}
-          styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
+          styles={customStyles}
         />
       </div>
       {helperText && <FormHelperText>{helperText}</FormHelperText>}
diff --git a/app/javascript/forms/TaskForm.js b/app/javascript/forms/TaskForm.js
index 9fb7ed1..3a7271f 100644
--- a/app/javascript/forms/TaskForm.js
+++ b/app/javascript/forms/TaskForm.js
@@ -1,5 +1,7 @@
 import { pick, propOr } from 'ramda';
 
+import TaskPresenter from 'presenters/TaskPresenter';
+
 export default {
   defaultAttributes(attributes) {
     return {
@@ -14,8 +16,8 @@ export default {
 
     return {
       ...pick(permittedKeys, task),
-      assigneeId: propOr(null, 'id', task.assignee),
-      authorId: propOr(null, 'id', task.author),
+      assigneeId: propOr(null, 'id', TaskPresenter.assignee(task)),
+      authorId: propOr(null, 'id', TaskPresenter.author(task)),
     };
   },
 };
diff --git a/app/javascript/presenters/TaskPresenter.js b/app/javascript/presenters/TaskPresenter.js
new file mode 100644
index 0000000..b8d981e
--- /dev/null
+++ b/app/javascript/presenters/TaskPresenter.js
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import PropTypesPresenter from 'utils/PropTypesPresenter';
+
+export default new PropTypesPresenter({
+  id: PropTypes.number,
+  name: PropTypes.string,
+  description: PropTypes.string,
+  state: PropTypes.string,
+  expired_at: PropTypes.string,
+  transitions: PropTypes.arrayOf({
+    event: PropTypes.string,
+    from: PropTypes.string,
+    to: PropTypes.string,
+  }),
+  author: PropTypes.shape({
+    id: PropTypes.number,
+    first_name: PropTypes.string,
+    last_name: PropTypes.string,
+    email: PropTypes.string,
+  }),
+  assignee: PropTypes.number,
+});
diff --git a/app/javascript/presenters/UserPresenter.js b/app/javascript/presenters/UserPresenter.js
new file mode 100644
index 0000000..5fee924
--- /dev/null
+++ b/app/javascript/presenters/UserPresenter.js
@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import PropTypesPresenter from 'utils/PropTypesPresenter';
+
+import { isEmpty } from 'ramda';
+
+export default new PropTypesPresenter(
+  {
+    id: PropTypes.number,
+    firstName: PropTypes.string,
+    lastName: PropTypes.string,
+  },
+  {
+    fullName(user) {
+      if (isEmpty(user)) {
+        return '';
+      }
+
+      return `${this.firstName(user)} ${this.lastName(user)}`;
+    },
+  },
+);
diff --git a/app/javascript/utils/PropTypesPresenter.js b/app/javascript/utils/PropTypesPresenter.js
new file mode 100644
index 0000000..88c738a
--- /dev/null
+++ b/app/javascript/utils/PropTypesPresenter.js
@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import { prop, keys, forEach, pipe, forEachObjIndexed } from 'ramda';
+
+export default class PropTypesPresenter {
+  constructor(propTypes, methods) {
+    this.ownPropTypes = propTypes;
+
+    pipe(
+      keys,
+      forEach((name) => {
+        this[name] = prop(name);
+      }),
+    )(propTypes);
+
+    forEachObjIndexed((method, name) => {
+      this[name] = method.bind(this);
+    })(methods);
+  }
+
+  shape() {
+    return PropTypes.shape(this.ownPropTypes);
+  }
+}

From 014cd4eebf108b66afe014cf4a7fed23696659f8 Mon Sep 17 00:00:00 2001
From: alex-ismailov <alexx.ismailov@gmail.com>
Date: Sat, 6 Apr 2024 00:46:03 -0400
Subject: [PATCH 5/6] Add assignee functionality [les 11 ex 4]

---
 .../components/AddPopup/AddPopup.js           |  9 ++++++++
 .../components/EditPopup/EditPopup.js         | 23 +++++++++++++------
 .../EditPopup/components/Form/Form.js         |  9 ++++++++
 .../components/UserSelect/UserSelect.js       |  3 ++-
 app/javascript/presenters/TaskPresenter.js    | 22 ++++++++----------
 app/javascript/presenters/UserPresenter.js    |  1 +
 6 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/app/javascript/components/AddPopup/AddPopup.js b/app/javascript/components/AddPopup/AddPopup.js
index f4ec8ba..750bf79 100644
--- a/app/javascript/components/AddPopup/AddPopup.js
+++ b/app/javascript/components/AddPopup/AddPopup.js
@@ -86,6 +86,15 @@ const AddPopup = (props) => {
               helperText={errors.author}
               onChange={handleSelectChange('author')}
             />
+            <UserSelect
+              isRequired
+              isDisabled={isSaving}
+              label="Assignee"
+              value={TaskPresenter.assignee(task)}
+              error={has('assignee', errors)}
+              helperText={errors.assignee}
+              onChange={handleSelectChange('assignee')}
+            />
           </div>
         </CardContent>
         <CardActions className={styles.actions}>
diff --git a/app/javascript/components/EditPopup/EditPopup.js b/app/javascript/components/EditPopup/EditPopup.js
index 711feb6..db32d5d 100644
--- a/app/javascript/components/EditPopup/EditPopup.js
+++ b/app/javascript/components/EditPopup/EditPopup.js
@@ -28,10 +28,12 @@ const EditPopup = (props) => {
   const isLoading = isNil(task);
   const isDataLoading = isLoading && isSaving;
 
-  const handleCardUpdate = () => {
+  const handleCardUpdate = async () => {
     setSaving(true);
 
-    onCardUpdate(task).catch((error) => {
+    try {
+      await onCardUpdate(task);
+    } catch (error) {
       setSaving(false);
       setErrors(error || {});
 
@@ -39,22 +41,29 @@ const EditPopup = (props) => {
         // eslint-disable-next-line no-alert
         alert(`Update Failed! Error: ${error.message}`);
       }
-    });
+    }
   };
 
-  const handleCardDestroy = () => {
+  const handleCardDestroy = async () => {
     setSaving(true);
 
-    onCardDestroy(task).catch((error) => {
+    try {
+      await onCardDestroy(task);
+    } catch (error) {
       setSaving(false);
 
       // eslint-disable-next-line no-alert
       alert(`Destruction Failed! Error: ${error.message}`);
-    });
+    }
   };
 
   useEffect(() => {
-    onCardLoad(cardId).then(setTask);
+    const initCard = async () => {
+      const card = await onCardLoad(cardId);
+      setTask(card);
+    };
+
+    initCard();
   }, []);
 
   return (
diff --git a/app/javascript/components/EditPopup/components/Form/Form.js b/app/javascript/components/EditPopup/components/Form/Form.js
index e184234..c12448b 100644
--- a/app/javascript/components/EditPopup/components/Form/Form.js
+++ b/app/javascript/components/EditPopup/components/Form/Form.js
@@ -49,6 +49,15 @@ const Form = (props) => {
         helperText={errors.author}
         onChange={handleSelectChange('author')}
       />
+      <UserSelect
+        isRequired
+        isDisabled={isDataLoading}
+        label="Assignee"
+        value={TaskPresenter.assignee(task)}
+        error={has('assignee', errors)}
+        helperText={errors.assignee}
+        onChange={handleSelectChange('assignee')}
+      />
     </form>
   );
 };
diff --git a/app/javascript/components/UserSelect/UserSelect.js b/app/javascript/components/UserSelect/UserSelect.js
index d1e6d10..f9b3bcc 100644
--- a/app/javascript/components/UserSelect/UserSelect.js
+++ b/app/javascript/components/UserSelect/UserSelect.js
@@ -10,7 +10,8 @@ import InputLabel from '@material-ui/core/InputLabel';
 import UsersRepository from 'repositories/UsersRepository';
 
 import useStyles from './useStyles';
-import UserPresenter from '../../presenters/UserPresenter';
+
+import UserPresenter from 'presenters/UserPresenter';
 
 const UserSelect = (props) => {
   const { error, label, isClearable, isDisabled, isRequired, onChange, value, helperText } = props;
diff --git a/app/javascript/presenters/TaskPresenter.js b/app/javascript/presenters/TaskPresenter.js
index b8d981e..23f05a9 100644
--- a/app/javascript/presenters/TaskPresenter.js
+++ b/app/javascript/presenters/TaskPresenter.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import PropTypesPresenter from 'utils/PropTypesPresenter';
+import UserPresenter from './UserPresenter';
 
 export default new PropTypesPresenter({
   id: PropTypes.number,
@@ -7,16 +8,13 @@ export default new PropTypesPresenter({
   description: PropTypes.string,
   state: PropTypes.string,
   expired_at: PropTypes.string,
-  transitions: PropTypes.arrayOf({
-    event: PropTypes.string,
-    from: PropTypes.string,
-    to: PropTypes.string,
-  }),
-  author: PropTypes.shape({
-    id: PropTypes.number,
-    first_name: PropTypes.string,
-    last_name: PropTypes.string,
-    email: PropTypes.string,
-  }),
-  assignee: PropTypes.number,
+  transitions: PropTypes.arrayOf(
+    PropTypes.shape({
+      event: PropTypes.string,
+      from: PropTypes.string,
+      to: PropTypes.string,
+    }),
+  ),
+  author: UserPresenter.shape(),
+  assignee: UserPresenter.shape(),
 });
diff --git a/app/javascript/presenters/UserPresenter.js b/app/javascript/presenters/UserPresenter.js
index 5fee924..536d766 100644
--- a/app/javascript/presenters/UserPresenter.js
+++ b/app/javascript/presenters/UserPresenter.js
@@ -8,6 +8,7 @@ export default new PropTypesPresenter(
     id: PropTypes.number,
     firstName: PropTypes.string,
     lastName: PropTypes.string,
+    email: PropTypes.string,
   },
   {
     fullName(user) {

From 08b897b02186a79de7e6513691eb18050f1c834e Mon Sep 17 00:00:00 2001
From: alex-ismailov <alexx.ismailov@gmail.com>
Date: Tue, 9 Apr 2024 01:06:40 -0400
Subject: [PATCH 6/6] Use TaskPresenter to get task props [les 11 ex 4]

---
 app/javascript/components/TaskBoard/TaskBoard.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/javascript/components/TaskBoard/TaskBoard.js b/app/javascript/components/TaskBoard/TaskBoard.js
index 6f0a9dc..447f44a 100644
--- a/app/javascript/components/TaskBoard/TaskBoard.js
+++ b/app/javascript/components/TaskBoard/TaskBoard.js
@@ -116,17 +116,15 @@ const TaskBoard = () => {
     });
   };
 
-  const handleTaskDestroy = (task) => {
-    const { id, state } = task;
-
-    return TasksRepository.destroy(id).then(() => {
-      loadColumnInitial(state);
+  const handleTaskDestroy = (task) =>
+    TasksRepository.destroy(task.id).then(() => {
+      loadColumnInitial(TaskPresenter.state(task));
       handleModalClose();
     });
-  };
 
   const handleCardDragEnd = (task, source, destination) => {
-    const transition = task.transitions.find(({ to }) => destination.toColumnId === to);
+    const taskTransitions = TaskPresenter.transitions(task);
+    const transition = taskTransitions.find(({ to }) => destination.toColumnId === to);
 
     if (!transition) {
       return null;