29.03.2023 04:25

js/Project/project/package-lock.json

@@ -16,6 +16,7 @@
         "@fontsource/roboto": "^4.5.8",
         "@mui/icons-material": "^5.11.11",
         "@mui/material": "^5.11.11",
+        "@mui/material-next": "^6.0.0-alpha.79",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -3208,15 +3209,15 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
     "node_modules/@mui/base": {
-      "version": "5.0.0-alpha.119",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.119.tgz",
-      "integrity": "sha512-XA5zhlYfXi67u613eIF0xRmktkatx6ERy3h+PwrMN5IcWFbgiL1guz8VpdXON+GWb8+G7B8t5oqTFIaCqaSAeA==",
+      "version": "5.0.0-alpha.123",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.123.tgz",
+      "integrity": "sha512-pxzcAfET3I6jvWqS4kijiLMn1OmdMw+mGmDa0SqmDZo3bXXdvLhpCCPqCkULG3UykhvFCOcU5HclOX3JCA+Zhg==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
         "@emotion/is-prop-valid": "^1.2.0",
         "@mui/types": "^7.2.3",
-        "@mui/utils": "^5.11.11",
-        "@popperjs/core": "^2.11.6",
+        "@mui/utils": "^5.11.13",
+        "@popperjs/core": "^2.11.7",
         "clsx": "^1.2.1",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
@@ -3245,9 +3246,9 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.11.11",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.11.tgz",
-      "integrity": "sha512-0YK0K9GfW1ysw9z4ztWAjLW+bktf+nExMyn2+EQe1Ijb0kF2kz1kIOmb4+di0/PsXG70uCuw4DhEIdNd+JQkRA==",
+      "version": "5.11.15",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.15.tgz",
+      "integrity": "sha512-Q0e2oBsjHyIWWj1wLzl14btunvBYC0yl+px7zL9R69tF87uenj6q72ieS369BJ6jxYpJwvXfR6/f+TC+ZUsKKg==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui"
@@ -3279,16 +3280,16 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.11.11",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.11.tgz",
-      "integrity": "sha512-sSe0dmKjB1IGOYt32Pcha+cXV3IIrX5L5mFAF9LDRssp/x53bluhgLLbkc8eTiJvueVvo6HAyze6EkFEYLQRXQ==",
+      "version": "5.11.15",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.15.tgz",
+      "integrity": "sha512-E5RbLq9/OvRKmGyeZawdnmFBCvhKkI/Zqgr0xFqW27TGwKLxObq/BreJc6Uu5Sbv8Fjj34vEAbRx6otfOyxn5w==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
-        "@mui/base": "5.0.0-alpha.119",
-        "@mui/core-downloads-tracker": "^5.11.11",
-        "@mui/system": "^5.11.11",
+        "@mui/base": "5.0.0-alpha.123",
+        "@mui/core-downloads-tracker": "^5.11.15",
+        "@mui/system": "^5.11.15",
         "@mui/types": "^7.2.3",
-        "@mui/utils": "^5.11.11",
+        "@mui/utils": "^5.11.13",
         "@types/react-transition-group": "^4.4.5",
         "clsx": "^1.2.1",
         "csstype": "^3.1.1",
@@ -3322,18 +3323,100 @@
         }
       }
     },
+    "node_modules/@mui/material-next": {
+      "version": "6.0.0-alpha.79",
+      "resolved": "https://registry.npmjs.org/@mui/material-next/-/material-next-6.0.0-alpha.79.tgz",
+      "integrity": "sha512-a6M9q5ZpeXXNLChqx1GrOPY+3/u3KE3yDyIwRbajJ2XbNb77bCV6c4hxv+jJSEzIaDEMsi+QP6qHGqAdWVRpEw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@mui/base": "5.0.0-alpha.122",
+        "@mui/material": "^5.11.14",
+        "@mui/system": "^5.11.14",
+        "@mui/types": "^7.2.3",
+        "@mui/utils": "^5.11.13",
+        "@popperjs/core": "^2.11.6",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "csstype": "^3.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "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/material-next/node_modules/@mui/base": {
+      "version": "5.0.0-alpha.122",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.122.tgz",
+      "integrity": "sha512-IgZEFQyHa39J1+Q3tekVdhPuUm1fr3icddaNLmiAIeYTVXmR7KR5FhBAIL0P+4shlPq0liUPGlXryoTm0iCeFg==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@emotion/is-prop-valid": "^1.2.0",
+        "@mui/types": "^7.2.3",
+        "@mui/utils": "^5.11.13",
+        "@popperjs/core": "^2.11.6",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "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/material-next/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/@mui/material/node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.11.11",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.11.tgz",
-      "integrity": "sha512-yLgTkjNC1mpye2SOUkc+zQQczUpg8NvQAETvxwXTMzNgJK1pv4htL7IvBM5vmCKG7IHAB3hX26W2u6i7bxwF3A==",
+      "version": "5.11.13",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.13.tgz",
+      "integrity": "sha512-PJnYNKzW5LIx3R+Zsp6WZVPs6w5sEKJ7mgLNnUXuYB1zo5aX71FVLtV7geyPXRcaN2tsoRNK7h444ED0t7cIjA==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
-        "@mui/utils": "^5.11.11",
+        "@mui/utils": "^5.11.13",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3385,15 +3468,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.11.11",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.11.tgz",
-      "integrity": "sha512-a9gaOAJBjpzypDfhbGZQ8HzdcxdxsKkFvbp1aAWZhFHBPdehEkARNh7mj851VfEhD/GdffYt85PFKFKdUta5Eg==",
+      "version": "5.11.15",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.15.tgz",
+      "integrity": "sha512-vCatoWCTnAPquoNifHbqMCMnOElEbLosVUeW0FQDyjCq+8yMABD9E6iY0s14O7iq1wD+qqU7rFAuDIVvJ/AzzA==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
-        "@mui/private-theming": "^5.11.11",
+        "@mui/private-theming": "^5.11.13",
         "@mui/styled-engine": "^5.11.11",
         "@mui/types": "^7.2.3",
-        "@mui/utils": "^5.11.11",
+        "@mui/utils": "^5.11.13",
         "clsx": "^1.2.1",
         "csstype": "^3.1.1",
         "prop-types": "^15.8.1"
@@ -3437,9 +3520,9 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.11.11",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.11.tgz",
-      "integrity": "sha512-neMM5rrEXYQrOrlxUfns/TGgX4viS8K2zb9pbQh11/oUUYFlGI32Tn+PHePQx7n6Fy/0zq6WxdBFC9VpnJ5JrQ==",
+      "version": "5.11.13",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.13.tgz",
+      "integrity": "sha512-5ltA58MM9euOuUcnvwFJqpLdEugc9XFsRR8Gt4zZNb31XzMfSKJPR4eumulyhsOTK1rWf7K4D63NKFPfX0AxqA==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
         "@types/prop-types": "^15.7.5",
@@ -3609,9 +3692,9 @@
       }
     },
     "node_modules/@popperjs/core": {
-      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -22013,15 +22096,15 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
     "@mui/base": {
-      "version": "5.0.0-alpha.119",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.119.tgz",
-      "integrity": "sha512-XA5zhlYfXi67u613eIF0xRmktkatx6ERy3h+PwrMN5IcWFbgiL1guz8VpdXON+GWb8+G7B8t5oqTFIaCqaSAeA==",
+      "version": "5.0.0-alpha.123",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.123.tgz",
+      "integrity": "sha512-pxzcAfET3I6jvWqS4kijiLMn1OmdMw+mGmDa0SqmDZo3bXXdvLhpCCPqCkULG3UykhvFCOcU5HclOX3JCA+Zhg==",
       "requires": {
         "@babel/runtime": "^7.21.0",
         "@emotion/is-prop-valid": "^1.2.0",
         "@mui/types": "^7.2.3",
-        "@mui/utils": "^5.11.11",
-        "@popperjs/core": "^2.11.6",
+        "@mui/utils": "^5.11.13",
+        "@popperjs/core": "^2.11.7",
         "clsx": "^1.2.1",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
@@ -22035,9 +22118,9 @@
       }
     },
     "@mui/core-downloads-tracker": {
-      "version": "5.11.11",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.11.tgz",
-      "integrity": "sha512-0YK0K9GfW1ysw9z4ztWAjLW+bktf+nExMyn2+EQe1Ijb0kF2kz1kIOmb4+di0/PsXG70uCuw4DhEIdNd+JQkRA=="
+      "version": "5.11.15",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.15.tgz",
+      "integrity": "sha512-Q0e2oBsjHyIWWj1wLzl14btunvBYC0yl+px7zL9R69tF87uenj6q72ieS369BJ6jxYpJwvXfR6/f+TC+ZUsKKg=="
     },
     "@mui/icons-material": {
       "version": "5.11.11",
@@ -22048,16 +22131,16 @@
       }
     },
     "@mui/material": {
-      "version": "5.11.11",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.11.tgz",
-      "integrity": "sha512-sSe0dmKjB1IGOYt32Pcha+cXV3IIrX5L5mFAF9LDRssp/x53bluhgLLbkc8eTiJvueVvo6HAyze6EkFEYLQRXQ==",
+      "version": "5.11.15",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.15.tgz",
+      "integrity": "sha512-E5RbLq9/OvRKmGyeZawdnmFBCvhKkI/Zqgr0xFqW27TGwKLxObq/BreJc6Uu5Sbv8Fjj34vEAbRx6otfOyxn5w==",
       "requires": {
         "@babel/runtime": "^7.21.0",
-        "@mui/base": "5.0.0-alpha.119",
-        "@mui/core-downloads-tracker": "^5.11.11",
-        "@mui/system": "^5.11.11",
+        "@mui/base": "5.0.0-alpha.123",
+        "@mui/core-downloads-tracker": "^5.11.15",
+        "@mui/system": "^5.11.15",
         "@mui/types": "^7.2.3",
-        "@mui/utils": "^5.11.11",
+        "@mui/utils": "^5.11.13",
         "@types/react-transition-group": "^4.4.5",
         "clsx": "^1.2.1",
         "csstype": "^3.1.1",
@@ -22073,13 +22156,55 @@
         }
       }
     },
+    "@mui/material-next": {
+      "version": "6.0.0-alpha.79",
+      "resolved": "https://registry.npmjs.org/@mui/material-next/-/material-next-6.0.0-alpha.79.tgz",
+      "integrity": "sha512-a6M9q5ZpeXXNLChqx1GrOPY+3/u3KE3yDyIwRbajJ2XbNb77bCV6c4hxv+jJSEzIaDEMsi+QP6qHGqAdWVRpEw==",
+      "requires": {
+        "@babel/runtime": "^7.21.0",
+        "@mui/base": "5.0.0-alpha.122",
+        "@mui/material": "^5.11.14",
+        "@mui/system": "^5.11.14",
+        "@mui/types": "^7.2.3",
+        "@mui/utils": "^5.11.13",
+        "@popperjs/core": "^2.11.6",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "csstype": "^3.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "dependencies": {
+        "@mui/base": {
+          "version": "5.0.0-alpha.122",
+          "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.122.tgz",
+          "integrity": "sha512-IgZEFQyHa39J1+Q3tekVdhPuUm1fr3icddaNLmiAIeYTVXmR7KR5FhBAIL0P+4shlPq0liUPGlXryoTm0iCeFg==",
+          "requires": {
+            "@babel/runtime": "^7.21.0",
+            "@emotion/is-prop-valid": "^1.2.0",
+            "@mui/types": "^7.2.3",
+            "@mui/utils": "^5.11.13",
+            "@popperjs/core": "^2.11.6",
+            "clsx": "^1.2.1",
+            "prop-types": "^15.8.1",
+            "react-is": "^18.2.0"
+          }
+        },
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
     "@mui/private-theming": {
-      "version": "5.11.11",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.11.tgz",
-      "integrity": "sha512-yLgTkjNC1mpye2SOUkc+zQQczUpg8NvQAETvxwXTMzNgJK1pv4htL7IvBM5vmCKG7IHAB3hX26W2u6i7bxwF3A==",
+      "version": "5.11.13",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.13.tgz",
+      "integrity": "sha512-PJnYNKzW5LIx3R+Zsp6WZVPs6w5sEKJ7mgLNnUXuYB1zo5aX71FVLtV7geyPXRcaN2tsoRNK7h444ED0t7cIjA==",
       "requires": {
         "@babel/runtime": "^7.21.0",
-        "@mui/utils": "^5.11.11",
+        "@mui/utils": "^5.11.13",
         "prop-types": "^15.8.1"
       }
     },
@@ -22095,15 +22220,15 @@
       }
     },
     "@mui/system": {
-      "version": "5.11.11",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.11.tgz",
-      "integrity": "sha512-a9gaOAJBjpzypDfhbGZQ8HzdcxdxsKkFvbp1aAWZhFHBPdehEkARNh7mj851VfEhD/GdffYt85PFKFKdUta5Eg==",
+      "version": "5.11.15",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.15.tgz",
+      "integrity": "sha512-vCatoWCTnAPquoNifHbqMCMnOElEbLosVUeW0FQDyjCq+8yMABD9E6iY0s14O7iq1wD+qqU7rFAuDIVvJ/AzzA==",
       "requires": {
         "@babel/runtime": "^7.21.0",
-        "@mui/private-theming": "^5.11.11",
+        "@mui/private-theming": "^5.11.13",
         "@mui/styled-engine": "^5.11.11",
         "@mui/types": "^7.2.3",
-        "@mui/utils": "^5.11.11",
+        "@mui/utils": "^5.11.13",
         "clsx": "^1.2.1",
         "csstype": "^3.1.1",
         "prop-types": "^15.8.1"
@@ -22116,9 +22241,9 @@
       "requires": {}
     },
     "@mui/utils": {
-      "version": "5.11.11",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.11.tgz",
-      "integrity": "sha512-neMM5rrEXYQrOrlxUfns/TGgX4viS8K2zb9pbQh11/oUUYFlGI32Tn+PHePQx7n6Fy/0zq6WxdBFC9VpnJ5JrQ==",
+      "version": "5.11.13",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.13.tgz",
+      "integrity": "sha512-5ltA58MM9euOuUcnvwFJqpLdEugc9XFsRR8Gt4zZNb31XzMfSKJPR4eumulyhsOTK1rWf7K4D63NKFPfX0AxqA==",
       "requires": {
         "@babel/runtime": "^7.21.0",
         "@types/prop-types": "^15.7.5",
@@ -22226,9 +22351,9 @@
       }
     },
     "@popperjs/core": {
-      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
     },
     "@remix-run/router": {
       "version": "1.3.3",

js/Project/project/package.json

@@ -11,6 +11,7 @@
     "@fontsource/roboto": "^4.5.8",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.11",
+    "@mui/material-next": "^6.0.0-alpha.79",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

js/Project/project/src/App.js

@@ -1,133 +1,132 @@
-// import React, { useEffect, useState } from 'react'
-// import { Router, Route, Redirect, withRouter, Switch } from 'react-router-dom';
-// import { Provider, useSelector } from 'react-redux';
-// import { store } from './components/redux/index';
-// import createHistory from "history/createBrowserHistory";
-
-// import './App.css';
-// // import logo from './logo.svg';
-
-// // импорт страниц
-// import { CUser } from './components/user';
-// import { CFeed } from './components/feed';
-// import { CComments } from './components/post';
-// import { CreatePost } from './components/create_post';
-// import AuthReg from './components/auth_reg';
-// // import Header from './components/structure/header';
-// import { CHeader } from './components/structure/header';
-// import Footer from './components/structure/footer';
-// import Search from './components/search';
-// import Page404 from './components/404/page404';
-
-// // url проекта
-// export const url = 'http://hipstagram.node.ed.asmer.org.ua/'
-
-
-// const history = createHistory()
-
-
-// // Приватный роутинг - удалить, если не буду использовать
-
-// {
-//     // фейковый авторизатор
-//     const fakeAuth = {
-//         isAuthenticated: false,
-//         authenticate(cb) {
-//             this.isAuthenticated = true
-//             setTimeout(cb, 100)
-//         },
-//         signout(cb) {
-//             this.isAuthenticated = false
-//             setTimeout(cb, 100)
-//         }
-//     }
-
-
-
-//     // кнопка разлогина, которая рисуется, если залогинен
-//     const AuthButton = withRouter(({ history }) => (
-//         fakeAuth.isAuthenticated && (
-//             <p>
-//                 Welcome! <button onClick={() => {
-//                     fakeAuth.signout(() => history.push('/'))
-//                 }}>Sign out</button>
-//             </p>
-//         )
-//     ))
-
-//     const PrivateRoute = ({ component: Component, ...rest }) => (
-//         <Route {...rest} render={(props) => (
-//             typeof localStorage.authToken === 'string'
-//                 ? <Component {...props} />
-//                 : <Redirect to={{
-//                     pathname: '/authorization',
-//                     state: { from: props.location }
-//                 }} />
-//         )} />
-//     )
-
-
-// }
-
-// // роутинг в зависимости от того.залогинен пользователь или нет
-// const MainRoutes = () => {
-//     const currentState = useSelector(state => state?.auth?.token)
-
-//     return (
-//         <main style={{ flexGrow: '1' }}>
-//             {currentState
-//                 ? <Switch>
-//                     <Route path="/" component={CFeed} exact />
-//                     <Route path="/post/:postId" component={CComments} />
-//                     <Route path="/user/:userId" component={CUser} />
-//                     <Route path="/createpost" component={CreatePost} />
-//                     <Route path='/search' component={Search} />
-//                     <Route path="*" component={Page404} />
-//                 </Switch>
-//                 : <Switch>
-//                     <Route path="/" component={AuthReg} exact />
-//                     <Route path="/registration" component={AuthReg} />
-//                     <Route path="*" component={Page404} />
-//                 </Switch>
-//             }
-//         </main>
-//     )
+// {// старая версия
+//     // import React, { useEffect, useState } from 'react'
+//     // import { Router, Route, Redirect, withRouter, Switch } from 'react-router-dom';
+//     // import { Provider, useSelector } from 'react-redux';
+//     // import { store } from './components/redux/index';
+//     // import createHistory from "history/createBrowserHistory";
+
+//     // import './App.css';
+//     // // import logo from './logo.svg';
+
+//     // // импорт страниц
+//     // import { CUser } from './components/user';
+//     // import { CFeed } from './components/feed';
+//     // import { CComments } from './components/post';
+//     // import { CreatePost } from './components/create_post';
+//     // import AuthReg from './components/auth_reg';
+//     // // import Header from './components/structure/header';
+//     // import { CHeader } from './components/structure/header';
+//     // import Footer from './components/structure/footer';
+//     // import Search from './components/search';
+//     // import Page404 from './components/404/page404';
+
+//     // // url проекта
+//     // export const url = 'http://hipstagram.node.ed.asmer.org.ua/'
+
+
+//     // const history = createHistory()
+
+
+//     // // Приватный роутинг - удалить, если не буду использовать
+
+//     // {
+//     //     // фейковый авторизатор
+//     //     const fakeAuth = {
+//     //         isAuthenticated: false,
+//     //         authenticate(cb) {
+//     //             this.isAuthenticated = true
+//     //             setTimeout(cb, 100)
+//     //         },
+//     //         signout(cb) {
+//     //             this.isAuthenticated = false
+//     //             setTimeout(cb, 100)
+//     //         }
+//     //     }
+
+
+
+//     //     // кнопка разлогина, которая рисуется, если залогинен
+//     //     const AuthButton = withRouter(({ history }) => (
+//     //         fakeAuth.isAuthenticated && (
+//     //             <p>
+//     //                 Welcome! <button onClick={() => {
+//     //                     fakeAuth.signout(() => history.push('/'))
+//     //                 }}>Sign out</button>
+//     //             </p>
+//     //         )
+//     //     ))
+
+//     //     const PrivateRoute = ({ component: Component, ...rest }) => (
+//     //         <Route {...rest} render={(props) => (
+//     //             typeof localStorage.authToken === 'string'
+//     //                 ? <Component {...props} />
+//     //                 : <Redirect to={{
+//     //                     pathname: '/authorization',
+//     //                     state: { from: props.location }
+//     //                 }} />
+//     //         )} />
+//     //     )
+
+
+//     // }
+
+//     // // роутинг в зависимости от того.залогинен пользователь или нет
+//     // const MainRoutes = () => {
+//     //     const currentState = useSelector(state => state?.auth?.token)
+
+//     //     return (
+//     //         <main style={{ flexGrow: '1' }}>
+//     //             {currentState
+//     //                 ? <Switch>
+//     //                     <Route path="/" component={CFeed} exact />
+//     //                     <Route path="/post/:postId" component={CComments} />
+//     //                     <Route path="/user/:userId" component={CUser} />
+//     //                     <Route path="/createpost" component={CreatePost} />
+//     //                     <Route path='/search' component={Search} />
+//     //                     <Route path="*" component={Page404} />
+//     //                 </Switch>
+//     //                 : <Switch>
+//     //                     <Route path="/" component={AuthReg} exact />
+//     //                     <Route path="/registration" component={AuthReg} />
+//     //                     <Route path="*" component={Page404} />
+//     //                 </Switch>
+//     //             }
+//     //         </main>
+//     //     )
+//     // }
+
+
+//     // export default function App() {
+//     //     return (
+//     //         <Provider store={store}>
+//     //             <Router history={history}>
+//     //                 <div className="wrapper">
+//     //                     <CHeader />
+//     //                     <MainRoutes />
+//     //                     <Footer />
+//     //                 </div>
+//     //             </Router>
+//     //         </Provider>
+
+//     //     )
+//     // }
 // }
 
 
-// export default function App() {
-//     return (
-//         <Provider store={store}>
-//             <Router history={history}>
-//                 <div className="wrapper">
-//                     <CHeader />
-//                     <MainRoutes />
-//                     <Footer />
-//                 </div>
-//             </Router>
-//         </Provider>
-
-//     )
-// }
 
-
-
-import React, { createContext, useContext, useEffect, useState } from 'react'
+import React, { createContext, useState } from 'react'
 import { Router, Route, Redirect, withRouter, Switch } from 'react-router-dom';
 import { Provider, useSelector } from 'react-redux';
-import { store } from './components/redux/index';
+import { store } from './redux/index';
 import createHistory from "history/createBrowserHistory";
 
 import './App.css';
-// import logo from './logo.svg';
 
-// импорт страниц
 import { CUser } from './components/user';
 import { CFeed } from './components/feed';
 import { CComments } from './components/post';
 import { CreatePost } from './components/create_post';
 import AuthReg from './components/auth_reg';
-// import Header from './components/structure/header';
 import { CHeader } from './components/structure/header';
 import Footer from './components/structure/footer';
 import Search from './components/search';
@@ -138,56 +137,24 @@ export const url = 'http://hipstagram.node.ed.asmer.org.ua/'
 
 const history = createHistory()
 
-
-// общий контекст для модального окна
 export const ModalForCountsContext = createContext()
 export const UpdateProfile = createContext()
 
 
-// Приватный роутинг - удалить, если не буду использовать
-
-{
-    // фейковый авторизатор
-    const fakeAuth = {
-        isAuthenticated: false,
-        authenticate(cb) {
-            this.isAuthenticated = true
-            setTimeout(cb, 100)
-        },
-        signout(cb) {
-            this.isAuthenticated = false
-            setTimeout(cb, 100)
-        }
-    }
-
-
-
-    // кнопка разлогина, которая рисуется, если залогинен
-    const AuthButton = withRouter(({ history }) => (
-        fakeAuth.isAuthenticated && (
-            <p>
-                Welcome! <button onClick={() => {
-                    fakeAuth.signout(() => history.push('/'))
-                }}>Sign out</button>
-            </p>
-        )
-    ))
-
-    const PrivateRoute = ({ component: Component, ...rest }) => (
-        <Route {...rest} render={(props) => (
-            typeof localStorage.authToken === 'string'
-                ? <Component {...props} />
-                : <Redirect to={{
-                    pathname: '/authorization',
-                    state: { from: props.location }
-                }} />
-        )} />
+const MyRouter = () => {
+    return (
+        <Switch>
+            <Route path="/" component={CFeed} exact />
+            <Route path="/post/:postId" component={CComments} />
+            <Route path="/user/:userId" component={CUser} />
+            <Route path="/createpost" component={CreatePost} />
+            <Route path='/search' component={Search} />
+            <Route path="*" component={Page404} />
+        </Switch>
     )
-
-
 }
 
-// роутинг в зависимости от того.залогинен пользователь или нет
+
 const MainRoutes = () => {
     const currentState = useSelector(state => state?.auth?.token)
 
@@ -197,40 +164,32 @@ const MainRoutes = () => {
     const [openModal, setOpenModal] = useState(false);
     const handleOpenModal = (param) => {
         setOpenModal(true)
-        param.arr && setModalArray([...param.arr]) // идет проверка на null, из-за баги на беке?
+        param.arr && setModalArray([...param.arr]) // идет проверка на null, из-за баги на беке - на комментах отдается null?
         setModalName(param.name)
     }
     const handleCloseModal = () => {
         setOpenModal(false)
-        setModalArray([])
+        setModalArray(modalArray.length = 0)
+        console.log('modalArray: ', modalArray)
     }
 
-
     const aboutMe = useSelector(state => state?.promise?.AboutMe?.payload)
-    const myFollowings = aboutMe?.following.map(item => {
+    const myFollowings = aboutMe?.following?.map(item => {
         return { _id: item._id }
     })
 
     // функция управления моими данными для обновления профиля
     const [updateProfile, setUpdateProfile] = useState({ _id: aboutMe?._id, login: aboutMe?.login, nick: aboutMe?.nick, avatar: { _id: aboutMe?.avatar?._id }, following: myFollowings })
-    // console.log('updateProfile: ', updateProfile)
 
 
     return (
         <main style={{ flexGrow: '1' }}>
             {currentState
-                ? <Switch>
-                    <UpdateProfile.Provider value={[updateProfile, setUpdateProfile]}>
-                        <ModalForCountsContext.Provider value={[modalName, setModalName, modalArray, setModalArray, openModal, setOpenModal, handleOpenModal, handleCloseModal]}>
-                            <Route path="/" component={CFeed} exact />
-                            <Route path="/post/:postId" component={CComments} />
-                            <Route path="/user/:userId" component={CUser} />
-                        </ModalForCountsContext.Provider>
-                        <Route path='/search' component={Search} />
-                    </UpdateProfile.Provider>
-                    <Route path="/createpost" component={CreatePost} />
-                    <Route path="*" component={Page404} />
-                </Switch>
+                ? <UpdateProfile.Provider value={[updateProfile, setUpdateProfile]}>
+                    <ModalForCountsContext.Provider value={[modalName, setModalName, modalArray, setModalArray, openModal, setOpenModal, handleOpenModal, handleCloseModal]}>
+                        <MyRouter />
+                    </ModalForCountsContext.Provider>
+                </UpdateProfile.Provider>
                 : <Switch>
                     <Route path="/" component={AuthReg} exact />
                     <Route path="/registration" component={AuthReg} />
@@ -253,6 +212,5 @@ export default function App() {
                 </div>
             </Router>
         </Provider>
-
     )
 }

js/Project/project/src/components/auth_reg/index(classic).js

@@ -1,150 +0,0 @@
-import { store } from '../redux';
-import { useState } from "react";
-import { Link, Redirect, useHistory } from "react-router-dom";
-// import { actionFullLogin } from "../redux/action";
-import { actionFullLogin } from "../redux/thunks";
-
-
-import { Paper, Box, Typography, Button, Stack, OutlinedInput, IconButton, InputLabel, InputAdornment, FormControl } from "@mui/material";
-
-import { Visibility, VisibilityOff } from '@mui/icons-material';
-
-// поля логин/пароль/кнопка входа
-const LoginForm = ({ onLogin }) => {
-    // отслеживаем введение данных в полях логин/пароль
-    const [login, setLogin] = useState('')
-    const [pass, setPass] = useState('')
-
-    // включаем,выклюаем отображение пароля
-    const [showPassword, setShowPassword] = useState(false);
-    const handleClickShowPassword = () => setShowPassword((show) => !show);
-    const handleMouseDownPassword = (event) => {
-        event.preventDefault();
-    };
-
-
-
-    return (
-        <Box sx={{ width: '100%' }}>
-            <Stack spacing={2}>
-                <FormControl variant="outlined">
-                    <InputLabel htmlFor="outlined-adornment-password">Имя пользователя</InputLabel>
-                    <OutlinedInput
-                        id="login"
-                        label="Имя пользователя"
-                        type="text"
-                        size="small"
-                        value={login}
-                        onChange={e => setLogin(e.target.value)}
-                    />
-                </FormControl>
-
-                <FormControl variant="outlined">
-                    <InputLabel htmlFor="outlined-adornment-password">Пароль</InputLabel>
-                    <OutlinedInput
-                        id="password"
-                        label="Пароль"
-                        size="small"
-                        type={showPassword ? 'text' : 'password'}
-                        value={pass}
-                        onChange={e => setPass(e.target.value)}
-
-                        endAdornment={
-                            <InputAdornment position="end">
-                                <IconButton
-                                    aria-label="toggle password visibility"
-                                    onClick={handleClickShowPassword}
-                                    onMouseDown={handleMouseDownPassword}
-                                    edge="end"
-                                >
-                                    {showPassword ? <VisibilityOff /> : <Visibility />}
-                                </IconButton>
-                            </InputAdornment>
-                        }
-                    />
-                </FormControl>
-
-                <Button
-                    variant="contained"
-                    disabled={((login == '') || (pass == '')) || false}
-                    onClick={() => onLogin(login, pass)}
-                >
-                    Войти
-                </Button>
-            </Stack>
-        </Box>
-    )
-}
-
-// Вся страница формы
-export default function Authorization() {
-    const history = useHistory();
-
-    return (
-        <Box sx={{
-            display: 'grid',
-            height: '80vh',
-            justifyContent: 'center',
-            alignItems: 'center'
-        }}>
-            <Paper elevation={3}
-                sx={{
-                    padding: '5px',
-                    width: '400px',
-                    height: '500px',
-                    display: 'grid',
-                    justifyContent: 'center',
-                    alignItems: 'center'
-                }}>
-                <Typography
-                    variant="h4"
-                    noWrap
-                    sx={{
-                        display: 'grid',
-                        fontFamily: 'monospace',
-                        fontWeight: 700,
-                        letterSpacing: '.3rem',
-                        color: 'inherit',
-                        textDecoration: 'none',
-                        flexGrow: '1',
-                        marginTop: '20px',
-                        justifyContent: 'center'
-                    }} >
-                    Hipstagram
-                </Typography>
-
-                <Box
-                    sx={{
-                        display: 'grid',
-                        alignSelf: 'start'
-                    }}>
-                    <LoginForm
-                        onLogin={async (login, pass) => {
-                            await store.dispatch(actionFullLogin(login, pass))
-
-                            if ((Object.keys(store.getState().auth)).length) {
-                                history.push('/')
-                            }
-                        }}
-                    />
-                </Box>
-
-
-                <Typography
-                    variant="subtitle1"
-                    sx={{
-                        display: 'grid',
-                        alignSelf: 'end',
-                        justifyContent: 'center',
-                    }}>
-                    <Link
-                        color="inherit"
-                        to='/registration'
-                    >
-                        Зарегистрироваться
-                    </Link>
-                </Typography>
-            </Paper>
-        </Box >
-    )
-}

js/Project/project/src/components/auth_reg/index(privateRoute).js

@@ -1,167 +0,0 @@
-import React from 'react'
-import { store } from '../redux';
-import { useState } from "react";
-import { Link, Redirect } from "react-router-dom";
-// import { actionFullLogin } from "../redux/action";
-import { actionFullLogin } from "../redux/thunks";
-
-
-import { Paper, Box, Typography, Button, Stack, OutlinedInput, IconButton, InputLabel, InputAdornment, FormControl } from "@mui/material";
-
-import { Visibility, VisibilityOff } from '@mui/icons-material';
-
-// поля логин/пароль/кнопка входа
-const LoginForm = ({ onLogin }) => {
-    // отслеживаем введение данных в полях логин/пароль
-    const [login, setLogin] = useState('')
-    const [pass, setPass] = useState('')
-
-    // включаем,выклюаем отображение пароля
-    const [showPassword, setShowPassword] = useState(false);
-    const handleClickShowPassword = () => setShowPassword((show) => !show);
-    const handleMouseDownPassword = (event) => {
-        event.preventDefault();
-    };
-
-
-
-    return (
-        <Box sx={{ width: '100%' }}>
-            <Stack spacing={2}>
-                <FormControl variant="outlined">
-                    <InputLabel htmlFor="outlined-adornment-password">Имя пользователя</InputLabel>
-                    <OutlinedInput
-                        id="login"
-                        label="Имя пользователя"
-                        type="text"
-                        size="small"
-                        value={login}
-                        onChange={e => setLogin(e.target.value)}
-                    />
-                </FormControl>
-
-                <FormControl variant="outlined">
-                    <InputLabel htmlFor="outlined-adornment-password">Пароль</InputLabel>
-                    <OutlinedInput
-                        id="password"
-                        label="Пароль"
-                        size="small"
-                        type={showPassword ? 'text' : 'password'}
-                        value={pass}
-                        onChange={e => setPass(e.target.value)}
-
-                        endAdornment={
-                            <InputAdornment position="end">
-                                <IconButton
-                                    aria-label="toggle password visibility"
-                                    onClick={handleClickShowPassword}
-                                    onMouseDown={handleMouseDownPassword}
-                                    edge="end"
-                                >
-                                    {showPassword ? <VisibilityOff /> : <Visibility />}
-                                </IconButton>
-                            </InputAdornment>
-                        }
-                    />
-                </FormControl>
-
-                <Button
-                    variant="contained"
-                    disabled={((login == '') || (pass == '')) || false}
-                    onClick={() => onLogin(login, pass)}
-                >
-                    Войти
-                </Button>
-            </Stack>
-        </Box>
-    )
-}
-
-class Authorization extends React.Component {
-
-    state = {
-        redirectToReferrer: false
-    }
-    login = () => {
-        this.setState(() => ({
-            redirectToReferrer: true
-        }))
-    }
-    render() {
-        const { from } = this.props.location.state || { from: { pathname: '/' } }
-        const { redirectToReferrer } = this.state
-
-        if (redirectToReferrer === true) {
-            return <Redirect to={from} />
-        }
-
-        return (
-            <Box sx={{
-                display: 'grid',
-                height: '80vh',
-                justifyContent: 'center',
-                alignItems: 'center'
-            }}>
-                <Paper elevation={3}
-                    sx={{
-                        padding: '5px',
-                        width: '400px',
-                        height: '500px',
-                        display: 'grid',
-                        justifyContent: 'center',
-                        alignItems: 'center'
-                    }}>
-                    <Typography
-                        variant="h4"
-                        noWrap
-                        sx={{
-                            display: 'grid',
-                            fontFamily: 'monospace',
-                            fontWeight: 700,
-                            letterSpacing: '.3rem',
-                            color: 'inherit',
-                            textDecoration: 'none',
-                            flexGrow: '1',
-                            marginTop: '20px',
-                            justifyContent: 'center'
-                        }} >
-                        Hipstagram
-                    </Typography>
-
-                    <Box
-                        sx={{
-                            display: 'grid',
-                            alignSelf: 'start'
-                        }}>
-                        <LoginForm
-                            onLogin={async (login, pass) => {
-                                await store.dispatch(actionFullLogin(login, pass))
-
-                                this.login()
-                            }}
-                            onClick={() => { console.log('click on login') }}
-
-                        />
-                    </Box>
-
-                    <Typography
-                        variant="subtitle1"
-                        sx={{
-                            display: 'grid',
-                            alignSelf: 'end',
-                            justifyContent: 'center',
-                        }}>
-                        <Link
-                            color="inherit"
-                            to='/registration'
-                        >
-                            Зарегистрироваться
-                        </Link>
-                    </Typography>
-                </Paper>
-            </Box >
-        )
-    }
-}
-
-export default Authorization

js/Project/project/src/components/auth_reg/index.js

@@ -17,32 +17,41 @@ import {
 // ссылка на страницу регистрации
 function RegistrationLink() {
     const history = useHistory()
+    let location = useLocation().pathname === '/'
+
+    function regLogLink() {
+        // location ? history.push('/registration') : history.push('/')
+        history.push(location ? '/registration' : '/')
+    }
 
     return (
         <Typography
             variant="subtitle1"
+            align='center'
             sx={{
-                display: 'grid',
                 alignSelf: 'end',
-                justifyContent: 'center',
-                cursor: 'pointer'
-            }
-            }
-            onClick={() => {
-                history.push('/registration')
             }}
         >
-            Зарегистрироваться
+            {location ? 'Нет аккаунта?' : 'Уже зарегистрированы? '}
+            <Typography
+                variant="body1"
+                align='center'
+                color='primary.main'
+                sx={{
+                    cursor: 'pointer'
+                }
+                }
+                onClick={regLogLink}
+            >
+                {location ? 'Зарегистрироваться' : `Войти`}
+            </Typography >
         </Typography >
-
     )
 }
 
 
 // Основное окно регистрации (без полей ввода и кнопок)
 function AuthReg() {
-    let location = useLocation().pathname === '/'
-
     return (
         <Box sx={{
             display: 'grid',
@@ -84,7 +93,7 @@ function AuthReg() {
                     <LoginForm />
                 </Box>
 
-                {location && <RegistrationLink />}
+                <RegistrationLink />
             </Paper>
         </Box >
     )

js/Project/project/src/components/auth_reg/login_form.js

@@ -2,13 +2,12 @@ import React, {
     forwardRef,
     useState
 } from 'react';
-import { store } from '../redux';
+import { store } from '../../redux';
 import {
     useHistory,
     useLocation
 } from "react-router-dom";
-// import { actionFullLogin, actionFullRegistration } from "../redux/action";
-import { actionFullLogin, actionFullRegistration } from "../redux/thunks";
+import { actionFullLogin, actionFullRegistration } from "../../redux/thunks";
 
 import {
     Dialog,
@@ -24,7 +23,6 @@ import {
     InputLabel,
     InputAdornment,
     FormControl,
-    TextField,
     Slide,
     Tooltip,
     ClickAwayListener
@@ -43,7 +41,6 @@ const Transition = forwardRef(function Transition(props, ref) {
     return <Slide direction="up" ref={ref} {...props} />;
 })
 
-
 // поля ввода и кнопки
 function LoginForm() {
     const location = useLocation().pathname === '/';
@@ -53,7 +50,6 @@ function LoginForm() {
     const [data, setData] = useState({ login: '', pass: '', confirmPass: '' })
     console.log('data: ', data)
 
-
     //  модальное окно ошибки при реге открытие/закрытие
     const [open, setOpen] = useState(false);
     const openModalAlertWindow = () => {
@@ -63,22 +59,23 @@ function LoginForm() {
         setOpen(false);
     }
 
-    // Блок проверки логина,пароля
-    // регулярка для проверки нового пароля
-    const patternPassword = /(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])/g
-    // регулярка для проверки логина на латинские символы и цифры
-    const patternLogin = /^[a-zA-Z0-9]+$/
-    // указываем минимальную длинну для нового пароля
-    const passLength = 8;
-
-    let isValidate, isCorrect, isLogin
+    // проверяем данные на валидность, чтобы активировать кнопку
+    const [isDataValid, setIsDataValid] = useState(false)
+    // проверяем данные только после ухода с фокуса(чтобы при открытии страницы сразу не горело красным все)
+    const [passwordInFocus, setPassworInFocus] = useState(false)
 
-    ((patternLogin.test(data.login))) || (isLogin = true);
-    ((data.pass.length < passLength) || !(patternPassword.test(data.pass))) && (isValidate = true);
-    (data.pass != data.confirmPass) && (isCorrect = true);
+    // функция проверки пароля, которая запускается, когда уходит фокус с поля пароля
+    function isPasswordValid() {
+        setPassworInFocus(true)
 
-    const validation = (data.login == '') || (data.pass == '')
+        // регулярка для проверка пароля
+        const patternPassword = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+        // регулярка для проверки логина на латинские символы и цифры
+        const patternLogin = /^[a-zA-Z0-9]+$/
 
+        // сама проверка на валидность сразу всего
+        setIsDataValid(patternLogin.test(data.login) && patternPassword.test(data.pass) && (data.pass === data.confirmPass))
+    }
 
     // функция генерации случайного логина
     function generateRandomLogin() {
@@ -91,10 +88,12 @@ function LoginForm() {
         return word
     }
 
-    // генерируем новый пароль при клике на иконку
+    // генерируем новый логин при клике на иконку
     function generateLogin() {
         const newLogin = generateRandomLogin()
 
+        document.getElementById('login').focus()
+
         setData({ ...data, login: newLogin })
 
         // и проворачиваем иконку
@@ -102,10 +101,9 @@ function LoginForm() {
         rotate.classList.add('rotate');
         setTimeout(() => {
             rotate.classList.remove('rotate');
-        }, 3000)
+        }, 2000)
     }
 
-
     // включаем,выклюаем отображение пароля
     const [showPassword, setShowPassword] = useState(false);
     const handleClickShowPassword = () => setShowPassword((show) => !show);
@@ -120,9 +118,8 @@ function LoginForm() {
         event.preventDefault();
     };
 
-
     // отрабатывание Tooltips при клике на логин
-    const [openToolTipsLogin, setOpenToolTipsLogin] = React.useState(false);
+    const [openToolTipsLogin, setOpenToolTipsLogin] = useState(false);
     const handleTooltipCloseLogin = () => {
         setOpenToolTipsLogin(false);
     };
@@ -130,9 +127,8 @@ function LoginForm() {
         setOpenToolTipsLogin(true);
     };
 
-
     // отрабатывание Tooltips при клике на пароль
-    const [openToolTipsPass, setOpenToolTipsPass] = React.useState(false);
+    const [openToolTipsPass, setOpenToolTipsPass] = useState(false);
     const handleTooltipClose = () => {
         setOpenToolTipsPass(false);
     };
@@ -140,8 +136,7 @@ function LoginForm() {
         setOpenToolTipsPass(true);
     };
 
-
-    // Thunk регистрация
+    // Регистрация
     async function fullRegistration() {
         const token = await store.dispatch(actionFullRegistration(data.login, data.confirmPass))
 
@@ -152,7 +147,7 @@ function LoginForm() {
         }
     }
 
-    // Thunk логинизация
+    // Авторизация
     async function fullLogin() {
         const token = await store.dispatch(actionFullLogin(data.login, data.pass))
 
@@ -180,24 +175,13 @@ function LoginForm() {
                                 title={!location && 'Сгенерируйте или введите пароль (только латинские буквы и цифры)'}
                                 arrow
                             >
-                                {/* <TextField
-                                    error={!location && isLogin}
-                                    fullWidth
-                                    variant='outlined'
-                                    id='login'
-                                    label='Логин'
-                                    size='normal'
-                                    value={data.login}
-                                    onChange={e => setData({ ...data, login: e.target.value })}
-                                    onClick={handleTooltipOpenLogin}
-                                /> */}
                                 <FormControl
                                     variant="outlined"
                                     onClick={handleTooltipOpenLogin}
+                                    error={!location && passwordInFocus && !isDataValid}
                                 >
                                     <InputLabel htmlFor="outlined-adornment-password">Логин</InputLabel>
                                     <OutlinedInput
-                                        error={!location && isLogin}
                                         fullWidth
                                         id="login"
                                         label="Логин"
@@ -205,6 +189,7 @@ function LoginForm() {
                                         type='text'
                                         value={data.login}
                                         onChange={e => setData({ ...data, login: e.target.value })}
+                                        onBlur={isPasswordValid}
 
                                         endAdornment={
                                             <InputAdornment position="end">
@@ -212,12 +197,14 @@ function LoginForm() {
                                                     aria-label="login"
                                                     onClick={generateLogin}
                                                     edge="end"
+                                                    title='Сгенерировать логин'
                                                 >
                                                     <Refresh id='loginUpdate' />
                                                 </IconButton>}
                                                 {location && <IconButton
                                                     aria-label="login"
                                                     edge="end"
+                                                    title='Логин'
                                                 >
                                                     <Person />
                                                 </IconButton>}
@@ -246,10 +233,10 @@ function LoginForm() {
                                 <FormControl
                                     variant="outlined"
                                     onClick={handleTooltipOpen}
+                                    error={!location && passwordInFocus && !isDataValid}
                                 >
                                     <InputLabel htmlFor="outlined-adornment-password">Пароль</InputLabel>
                                     <OutlinedInput
-                                        error={!location && isValidate}
                                         fullWidth
                                         id="password"
                                         label="Пароль"
@@ -257,6 +244,7 @@ function LoginForm() {
                                         type={showPassword ? 'text' : 'password'}
                                         value={data.pass}
                                         onChange={e => setData({ ...data, pass: e.target.value })}
+                                        onBlur={isPasswordValid}
 
                                         endAdornment={
                                             <InputAdornment position="end">
@@ -265,6 +253,7 @@ function LoginForm() {
                                                     onClick={handleClickShowPassword}
                                                     onMouseDown={handleMouseDownPassword}
                                                     edge="end"
+                                                    title={showPassword ? 'Скрыть пароль' : 'Показать пароль'}
                                                 >
                                                     {showPassword ? <VisibilityOff /> : <Visibility />}
                                                 </IconButton>
@@ -276,11 +265,12 @@ function LoginForm() {
                         </div>
                     </ClickAwayListener>
 
-
-                    {!location && <FormControl variant="outlined">
+                    {!location && <FormControl
+                        variant="outlined"
+                        error={passwordInFocus && !isDataValid}
+                    >
                         <InputLabel htmlFor="outlined-adornment-password">Подтвердите пароль</InputLabel>
                         <OutlinedInput
-                            error={isCorrect}
                             fullWidth
                             id="confirmPassword"
                             label="Подтвердите пароль"
@@ -288,6 +278,7 @@ function LoginForm() {
                             type={showPasswordConfirm ? 'text' : 'password'}
                             value={data.confirmPass}
                             onChange={e => setData({ ...data, confirmPass: e.target.value })}
+                            onBlur={isPasswordValid}
 
                             endAdornment={
                                 <InputAdornment position="end">
@@ -296,6 +287,7 @@ function LoginForm() {
                                         onClick={handleClickShowPasswordConfirm}
                                         onMouseDown={handleMouseDownPasswordConfirm}
                                         edge="end"
+                                        title={showPasswordConfirm ? 'Скрыть пароль' : 'Показать пароль'}
                                     >
                                         {showPasswordConfirm ? <VisibilityOff /> : <Visibility />}
                                     </IconButton>
@@ -308,8 +300,8 @@ function LoginForm() {
                         size="large"
                         variant="contained"
                         disabled={location
-                            ? (validation || false)
-                            : (validation || isCorrect || isLogin) || false}
+                            ? (isDataValid || false)
+                            : !isDataValid}
                         onClick={location ? fullLogin : fullRegistration}
                     >
                         {location

js/Project/project/src/components/create_post/index.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useState, useEffect } from 'react';
 import { connect, useDispatch, useSelector } from 'react-redux';
 import { useHistory } from "react-router-dom";
-import { store } from '../redux';
+import { store } from '../../redux';
 
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
@@ -13,8 +13,8 @@ import SendRoundedIcon from '@mui/icons-material/SendRounded';
 
 import { StyledDropzone } from './dropzone';
 // import { actionFilesUpload, actionCreatePost, actionFullCreatePost } from '../redux/action';
-import { actionFilesUpload, actionFullCreatePost } from '../redux/thunks';
-import { actionCreatePost } from '../redux/action';
+import { actionFilesUpload, actionFullCreatePost } from '../../redux/thunks';
+import { actionCreatePost } from '../../redux/action';
 import HighlightOffRoundedIcon from '@mui/icons-material/HighlightOffRounded';
 import { Dnd } from './dnd';
 import { UploadedFiles } from './uploaded_files';

js/Project/project/src/components/feed/aboutMe.js

@@ -1,183 +1,183 @@
-// import React, { useState } from 'react';
-// import { Avatar, Typography, Box, Stack, CardHeader, Backdrop, Modal, Fade, Divider, IconButton } from '@mui/material'
-// import { Close } from '@mui/icons-material'
-// import { useSelector, connect } from 'react-redux'
-// import { useHistory } from 'react-router-dom'
-
-// import { RecommendedCard } from './recommended';
-
-// import './style.scss'
-
-// import { url } from "../../App"
-
-
-// const style = {
-//     position: 'absolute',
-//     top: '50%',
-//     left: '50%',
-//     transform: 'translate(-50%, -50%)',
-//     width: 400,
-//     height: 'fit-content',
-//     bgcolor: 'background.paper',
-//     boxShadow: 24,
-//     outline: 0,
-//     borderRadius: 3,
-//     padding: '5px 0'
-// };
-
-
-
-
-// function AboutMe({ aboutMe = {} }) {
-//     let history = useHistory()
-
-//     const myPostsCount = useSelector(state => state?.promise?.MyPostsCount?.payload)
-
-//     function toMyAccount() {
-//         history.push(`/user/${aboutMe?._id}`)
-//     }
-
-//     // функции управления открытием/закрытием модального окна
-//     const [modalName, setModalName] = useState('')
-//     const [modalArray, setModalArray] = useState([])
-//     const [openModal, setOpenModal] = useState(false);
-//     const handleOpenModal = (param) => {
-//         setOpenModal(true)
-//         setModalArray([...param.arr])
-//         setModalName(param.name)
-//     }
-
-//     const handleCloseModal = () => setOpenModal(false);
-
-//     return (
-//         <Box sx={{
-//             maxWidth: 400
-//         }}>
-//             <CardHeader
-//                 avatar={
-//                     <Avatar
-//                         sx={{ width: 50, height: 50 }}
-//                         alt={aboutMe?.login}
-//                         src={url + aboutMe?.avatar?.url}
-//                     />
-//                 }
-
-//                 subheader={
-//                     <Typography
-//                         sx={{
-//                             cursor: 'pointer'
-//                         }}
-//                         variant='h6'
-//                         onClick={toMyAccount}>
-//                         {aboutMe?.login}
-//                     </Typography>
-//                 }
-//             />
-//             <Stack
-//                 sx={{
-//                     paddingTop: '5px',
-//                     paddingLeft: '20px',
-//                     flexWrap: 'wrap'
-//                 }}
-//                 direction="row"
-//                 spacing={1}
-//                 padding={2}>
-//                 <Typography
-//                     sx={{
-//                         cursor: 'pointer'
-//                     }}
-//                     onClick={toMyAccount}
-//                 >
-//                     {myPostsCount || '0'} публикаций
-//                 </Typography>
-//                 <Typography
-//                     sx={{
-//                         cursor: 'pointer'
-//                     }}
-//                     onClick={() => handleOpenModal({ arr: aboutMe?.followers, name: 'Ваши подписчики' })}
-//                 >
-//                     {aboutMe?.followers?.length || '0'} подписчиков
-//                 </Typography>
-//                 <Typography
-//                     sx={{
-//                         cursor: 'pointer'
-//                     }}
-//                     onClick={() => handleOpenModal({ arr: aboutMe?.following, name: 'Ваши подписки' })}
-//                 >
-//                     {aboutMe?.following?.length || '0'} подписок
-//                 </Typography>
-//             </Stack>
-
-//             {modalArray && <Modal
-//                 aria-labelledby="transition-modal-title"
-//                 aria-describedby="transition-modal-description"
-//                 open={openModal}
-//                 onClose={handleCloseModal}
-//                 closeAfterTransition
-//                 slots={{ backdrop: Backdrop }}
-//                 slotProps={{
-//                     backdrop: {
-//                         timeout: 500,
-//                     },
-//                 }}
-//             >
-//                 <Fade in={openModal}>
-//                     <Box sx={style}>
-//                         <Stack
-//                             direction="row"
-//                             justifyContent="space-between"
-//                             alignItems="center"
-//                             sx={{
-//                                 padding: '0 24px'
-//                             }}>
-//                             <Typography
-//                                 variant="subtitle1"
-//                                 color='text.primary'
-//                                 gutterBottom
-//                             >
-//                                 {modalName}
-//                             </Typography>
-
-//                             <IconButton
-//                                 onClick={handleCloseModal}
-//                                 title='Закрыть'
-//                             >
-//                                 <Close
-//                                     sx={{
-//                                         position: 'absolute',
-//                                         color: 'black'
-//                                     }}
-//                                     fontSize='medium'
-//                                 />
-//                             </IconButton>
-//                         </Stack>
-
-//                         <Divider />
-
-//                         <Box
-//                             className='recommendedBox'
-//                             sx={{
-//                                 margin: '8px 0',
-//                                 width: '95%',
-//                                 paddingLeft: '8px',
-//                                 minHeight: 'fit-content',
-//                                 maxHeight: 350,
-//                                 overflowY: 'auto'
-//                             }}>
-//                             {modalArray.map(item => <RecommendedCard key={item._id} data={item} />)}
-//                         </Box>
-//                     </Box>
-//                 </Fade>
-//             </Modal>}
-//         </Box>
-
-//     )
+// {//старая версия
+//     // import React, { useState } from 'react';
+//     // import { Avatar, Typography, Box, Stack, CardHeader, Backdrop, Modal, Fade, Divider, IconButton } from '@mui/material'
+//     // import { Close } from '@mui/icons-material'
+//     // import { useSelector, connect } from 'react-redux'
+//     // import { useHistory } from 'react-router-dom'
+
+//     // import { RecommendedCard } from './recommended';
+
+//     // import './style.scss'
+
+//     // import { url } from "../../App"
+
+
+//     // const style = {
+//     //     position: 'absolute',
+//     //     top: '50%',
+//     //     left: '50%',
+//     //     transform: 'translate(-50%, -50%)',
+//     //     width: 400,
+//     //     height: 'fit-content',
+//     //     bgcolor: 'background.paper',
+//     //     boxShadow: 24,
+//     //     outline: 0,
+//     //     borderRadius: 3,
+//     //     padding: '5px 0'
+//     // };
+
+
+
+
+//     // function AboutMe({ aboutMe = {} }) {
+//     //     let history = useHistory()
+
+//     //     const myPostsCount = useSelector(state => state?.promise?.MyPostsCount?.payload)
+
+//     //     function toMyAccount() {
+//     //         history.push(`/user/${aboutMe?._id}`)
+//     //     }
+
+//     //     // функции управления открытием/закрытием модального окна
+//     //     const [modalName, setModalName] = useState('')
+//     //     const [modalArray, setModalArray] = useState([])
+//     //     const [openModal, setOpenModal] = useState(false);
+//     //     const handleOpenModal = (param) => {
+//     //         setOpenModal(true)
+//     //         setModalArray([...param.arr])
+//     //         setModalName(param.name)
+//     //     }
+
+//     //     const handleCloseModal = () => setOpenModal(false);
+
+//     //     return (
+//     //         <Box sx={{
+//     //             maxWidth: 400
+//     //         }}>
+//     //             <CardHeader
+//     //                 avatar={
+//     //                     <Avatar
+//     //                         sx={{ width: 50, height: 50 }}
+//     //                         alt={aboutMe?.login}
+//     //                         src={url + aboutMe?.avatar?.url}
+//     //                     />
+//     //                 }
+
+//     //                 subheader={
+//     //                     <Typography
+//     //                         sx={{
+//     //                             cursor: 'pointer'
+//     //                         }}
+//     //                         variant='h6'
+//     //                         onClick={toMyAccount}>
+//     //                         {aboutMe?.login}
+//     //                     </Typography>
+//     //                 }
+//     //             />
+//     //             <Stack
+//     //                 sx={{
+//     //                     paddingTop: '5px',
+//     //                     paddingLeft: '20px',
+//     //                     flexWrap: 'wrap'
+//     //                 }}
+//     //                 direction="row"
+//     //                 spacing={1}
+//     //                 padding={2}>
+//     //                 <Typography
+//     //                     sx={{
+//     //                         cursor: 'pointer'
+//     //                     }}
+//     //                     onClick={toMyAccount}
+//     //                 >
+//     //                     {myPostsCount || '0'} публикаций
+//     //                 </Typography>
+//     //                 <Typography
+//     //                     sx={{
+//     //                         cursor: 'pointer'
+//     //                     }}
+//     //                     onClick={() => handleOpenModal({ arr: aboutMe?.followers, name: 'Ваши подписчики' })}
+//     //                 >
+//     //                     {aboutMe?.followers?.length || '0'} подписчиков
+//     //                 </Typography>
+//     //                 <Typography
+//     //                     sx={{
+//     //                         cursor: 'pointer'
+//     //                     }}
+//     //                     onClick={() => handleOpenModal({ arr: aboutMe?.following, name: 'Ваши подписки' })}
+//     //                 >
+//     //                     {aboutMe?.following?.length || '0'} подписок
+//     //                 </Typography>
+//     //             </Stack>
+
+//     //             {modalArray && <Modal
+//     //                 aria-labelledby="transition-modal-title"
+//     //                 aria-describedby="transition-modal-description"
+//     //                 open={openModal}
+//     //                 onClose={handleCloseModal}
+//     //                 closeAfterTransition
+//     //                 slots={{ backdrop: Backdrop }}
+//     //                 slotProps={{
+//     //                     backdrop: {
+//     //                         timeout: 500,
+//     //                     },
+//     //                 }}
+//     //             >
+//     //                 <Fade in={openModal}>
+//     //                     <Box sx={style}>
+//     //                         <Stack
+//     //                             direction="row"
+//     //                             justifyContent="space-between"
+//     //                             alignItems="center"
+//     //                             sx={{
+//     //                                 padding: '0 24px'
+//     //                             }}>
+//     //                             <Typography
+//     //                                 variant="subtitle1"
+//     //                                 color='text.primary'
+//     //                                 gutterBottom
+//     //                             >
+//     //                                 {modalName}
+//     //                             </Typography>
+
+//     //                             <IconButton
+//     //                                 onClick={handleCloseModal}
+//     //                                 title='Закрыть'
+//     //                             >
+//     //                                 <Close
+//     //                                     sx={{
+//     //                                         position: 'absolute',
+//     //                                         color: 'black'
+//     //                                     }}
+//     //                                     fontSize='medium'
+//     //                                 />
+//     //                             </IconButton>
+//     //                         </Stack>
+
+//     //                         <Divider />
+
+//     //                         <Box
+//     //                             className='recommendedBox'
+//     //                             sx={{
+//     //                                 margin: '8px 0',
+//     //                                 width: '95%',
+//     //                                 paddingLeft: '8px',
+//     //                                 minHeight: 'fit-content',
+//     //                                 maxHeight: 350,
+//     //                                 overflowY: 'auto'
+//     //                             }}>
+//     //                             {modalArray.map(item => <RecommendedCard key={item._id} data={item} />)}
+//     //                         </Box>
+//     //                     </Box>
+//     //                 </Fade>
+//     //             </Modal>}
+//     //         </Box>
+
+//     //     )
+//     // }
+
+//     // export const CAboutMe = connect(state => ({ aboutMe: state?.promise?.AboutMe?.payload }))(AboutMe)
 // }
 
-// export const CAboutMe = connect(state => ({ aboutMe: state?.promise?.AboutMe?.payload }))(AboutMe)
-
-
-
 
 
 
@@ -193,7 +193,7 @@ import { useHistory } from 'react-router-dom'
 
 import { RecommendedCard } from './recommended';
 import { ModalWindow } from '../structure/modal';
-import { ModalForCountsContext } from "../../App";
+import { ModalForCountsContext, UpdateProfile } from "../../App";
 
 import './style.scss'
 
@@ -216,7 +216,6 @@ const style = {
 
 
 
-
 function AboutMe({ aboutMe = {} }) {
     let history = useHistory()
 
@@ -226,18 +225,6 @@ function AboutMe({ aboutMe = {} }) {
         history.push(`/user/${aboutMe?._id}`)
     }
 
-    // // функции управления открытием/закрытием модального окна
-    // const [modalName, setModalName] = useState('')
-    // const [modalArray, setModalArray] = useState([])
-    // const [openModal, setOpenModal] = useState(false);
-    // const handleOpenModal = (param) => {
-    //     setOpenModal(true)
-    //     setModalArray([...param.arr])
-    //     setModalName(param.name)
-    // }
-
-    // const handleCloseModal = () => setOpenModal(false);
-
     // контекст модального окна
     const [modalName, setModalName, modalArray, setModalArray, openModal, setOpenModal, handleOpenModal, handleCloseModal] = useContext(ModalForCountsContext)
 
@@ -300,69 +287,7 @@ function AboutMe({ aboutMe = {} }) {
                 </Typography>
             </Stack>
 
-            {modalArray && <ModalWindow />
-                //     <ModalWindow
-                //     aria-labelledby="transition-modal-title"
-                //     aria-describedby="transition-modal-description"
-                //     open={openModal}
-                //     onClose={handleCloseModal}
-                //     closeAfterTransition
-                //     slots={{ backdrop: Backdrop }}
-                //     slotProps={{
-                //         backdrop: {
-                //             timeout: 500,
-                //         },
-                //     }}
-                // >
-                //     <Fade in={openModal}>
-                //         <Box sx={style}>
-                //             <Stack
-                //                 direction="row"
-                //                 justifyContent="space-between"
-                //                 alignItems="center"
-                //                 sx={{
-                //                     padding: '0 24px'
-                //                 }}>
-                //                 <Typography
-                //                     variant="subtitle1"
-                //                     color='text.primary'
-                //                     gutterBottom
-                //                 >
-                //                     {modalName}
-                //                 </Typography>
-
-                //                 <IconButton
-                //                     onClick={handleCloseModal}
-                //                     title='Закрыть'
-                //                 >
-                //                     <Close
-                //                         sx={{
-                //                             position: 'absolute',
-                //                             color: 'black'
-                //                         }}
-                //                         fontSize='medium'
-                //                     />
-                //                 </IconButton>
-                //             </Stack>
-
-                //             <Divider />
-
-                //             <Box
-                //                 className='recommendedBox'
-                //                 sx={{
-                //                     margin: '8px 0',
-                //                     width: '95%',
-                //                     paddingLeft: '8px',
-                //                     minHeight: 'fit-content',
-                //                     maxHeight: 350,
-                //                     overflowY: 'auto'
-                //                 }}>
-                //                 {modalArray.map(item => <RecommendedCard key={item._id} data={item} />)}
-                //             </Box>
-                //         </Box>
-                //     </Fade>
-                // </ModalWindow>
-            }
+            {modalArray && <ModalWindow />}
         </Box>
 
     )

js/Project/project/src/components/feed/index.js

@@ -7,7 +7,7 @@ import { Container } from '@mui/system';
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
 
 // import { actionAboutMe, actionDownloadFeed } from '../redux/action';
-import { actionAboutMe, actionDownloadFeed } from '../redux/thunks';
+import { actionAboutMe, actionDownloadFeed } from '../../redux/thunks';
 import { CardFeed } from './card_feed';
 import { CAboutMe } from './aboutMe';
 import Recommended from './recommended';

js/Project/project/src/components/feed/recommended.js

@@ -1,19 +1,28 @@
 import { url } from '../../App';
 
-import * as React from 'react';
-import { useSelector } from "react-redux"
+import React, { useContext } from 'react';
+import { useDispatch, useSelector } from "react-redux"
 import { useHistory } from 'react-router-dom';
 
-import { CardHeader, Avatar, Typography, Button, Box } from '@mui/material';
+import { CardHeader, Avatar, Typography, Button, Box, Divider } from '@mui/material';
+import { UpdateProfile } from '../../App';
+import { actionFullUpdateProfile } from '../../redux/thunks';
 
 import './style.scss'
 
 
-// Компонент карточки-рекомендации юзера 
-export function RecommendedCard({ data }) {
+// Карточки блока с рекомендациями
+// export function RecommendedCard({ data }) {
+function RecommendedCard({ data }) {
+    // console.log('data: ', data)
     const history = useHistory()
+    const dispatch = useDispatch()
 
-    // проверка, является ли пользователь моим подписчиком
+    // контекст обновления профиля
+    const [updateProfile, setUpdateProfile] = useContext(UpdateProfile)
+    // console.log('test context3: ', updateProfile)
+
+    // проверка, является ли пользователь моим подписчиком (нужна, потому что эта карта дергается для модалки)
     const myFollowings = useSelector(state => state?.promise?.AboutMe?.payload?.following)
     const isFollowing = myFollowings && myFollowings.some(item => item._id === data._id)
 
@@ -22,6 +31,15 @@ export function RecommendedCard({ data }) {
         history.push(`user/${data._id}`)
     }
 
+    // функция подписки/отписки
+    function subscribing() {
+        const newData = ({
+            ...updateProfile, following: [...updateProfile.following, updateProfile.following.push({ _id: data._id })]
+        })
+
+        newData && dispatch(actionFullUpdateProfile(updateProfile))
+    }
+
     return (
         <CardHeader
             avatar={
@@ -36,9 +54,9 @@ export function RecommendedCard({ data }) {
                 <Button
                     variant="text"
                     size="small"
-                    onClick={() => console.log('click')}
+                    onClick={subscribing}
                 >
-                    {isFollowing ? 'Отписаться' : 'Подписаться'}
+                    Подписаться
                 </Button>
             }
 
@@ -52,7 +70,7 @@ export function RecommendedCard({ data }) {
                     color='text.secondary'
                     onClick={toAccount}
                 >
-                    {data?.login || 'anon user'}
+                    {data?.login || 'Anonim'}
                 </Typography>
             }
         />
@@ -60,6 +78,7 @@ export function RecommendedCard({ data }) {
 }
 
 
+// Блок с рекомендациями
 function Recommended() {
 
     const followers = useSelector(state => state?.promise?.FindFollowers?.payload)
@@ -68,6 +87,7 @@ function Recommended() {
 
     let recommendedList = []
 
+    // собираем список подписок и подписчиков моих подписок и подписчико и удаляем из него повторы и моих подписок
     if (followers && followings && myFollowings) {
         const joinArr = [
             ...followers,
@@ -78,8 +98,8 @@ function Recommended() {
             !myFollowings.some((current) => current._id === item._id)
         )
 
-        const random = 10
         // теперь оставляем в массиве только random рандомных элементов элементов
+        const random = 10
         for (let i = 0; i < random; i++) {
             const randomIndex = Math.floor(Math.random() * joinArr.length)
             recommendedList.push(joinArr[randomIndex])
@@ -91,12 +111,14 @@ function Recommended() {
 
 
     return (
-        <Box sx={{
-            marginTop: '10px'
-        }}>
-            <Box sx={{
-                padding: '0 24px'
+        <Box
+            sx={{
+                marginTop: '10px'
             }}>
+            <Box
+                sx={{
+                    padding: '0 24px'
+                }}>
                 <Typography
                     variant="subtitle1"
                     color='text.secondary'
@@ -108,7 +130,6 @@ function Recommended() {
 
             <Box
                 className='recommendedBox'
-
                 sx={{
                     margin: '8px 0',
                     width: '95%',

js/Project/project/src/components/post/comments.js

@@ -1,343 +1,334 @@
-// import { url } from "../../App";
-// import { useHistory, useParams } from "react-router-dom";
-// import { createContext, useState, useContext } from "react";
-
-// import './style.scss'
-
-// import {
-//     Card,
-//     CardHeader,
-//     CardContent,
-//     CardActions,
-//     Avatar,
-//     IconButton,
-//     Typography,
-//     Box,
-//     Divider,
-//     Popover,
-//     Tooltip
-// } from '@mui/material'
-
-// import {
-//     FavoriteBorderRounded,
-//     SendRounded,
-//     ChatBubbleOutline,
-//     TurnedInNot,
-// } from '@mui/icons-material/'
-
-// import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
-
-// import { actionFullAddLike, actionFullDeleteLike } from "../redux/thunks";
-
-// import Grid from '@mui/material/Unstable_Grid2';
-
-// import { ModalForCountsContext } from "../../App";
-
-// import CCommentsFeed from "./comments_feed";
-// import CommentField from "./comments_add_field";
-// import { ModalWindow } from "../structure/modal";
-// import { useDispatch } from "react-redux";
-
-// // контекст для управления состоянием данных для отправки комментов
-// export const CommentContext = createContext()
-
-
-// export function CardPost({ postData }) {
-//     // console.log('postData: ', postData)
-
-//     const dispatch = useDispatch()
-
-//     const history = useHistory()
-//     const { postId } = useParams()
-
-//     // отслеживаем состояние поля ввода комментария для поста
-//     const [comment, setComment] = useState({ text: '', post: { _id: postId } })
-
-//     // отслеживаем, к какой именно сущности будет добавляться лайк
-//     const [like, setLike] = useState({})
-
-//     // контекст модального окна
-//     const [modalName, setModalName, modalArray, setModalArray, openModal, setOpenModal, handleOpenModal, handleCloseModal] = useContext(ModalForCountsContext)
-
-//     // дата поста
-//     const dateofPost = new Date(+postData?.createdAt)
-//     const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
-//     const dateofPostParse = `${dateofPost.getDate() < 10 ? '0' + dateofPost.getDate() : dateofPost.getDate()}
-//     ${months[dateofPost.getMonth()]}
-//     ${dateofPost.getFullYear()}
-//     ${dateofPost.getHours()}:${dateofPost.getMinutes() < 10 ? '0' + dateofPost.getMinutes() : dateofPost.getMinutes()}`
-
-//     // Переход на профиль пользователя
-//     function toAccount() {
-//         history.push(`/user/${postData?.owner?._id}`)
-//     }
-
-//     // перевод фокуса на строку добавления комментария при клике на иконку комментария
-//     function addCommentFocus() {
-//         document.getElementById('addCommentField').focus()
-//     }
-
-//     // отслеживание состояния текста для ToolTips
-//     const [toolTipText, setToolTipText] = useState(true)
-//     let text = toolTipText ? 'Нажмите для копирования' : 'Ссылка скопирована в буфер обмена'
-
-//     // функция копирования ссылки на пост
-//     function copyShareLink() {
-//         // получаем урл текущей страницы
-//         const postUrl = window.location.href
-//         navigator.clipboard.writeText(postUrl)
-
-//         setToolTipText(!toolTipText)
-//         setTimeout(() => setToolTipText(toolTipText), 2000)
-//     }
-
-//     // функция отображения всех, кому понравился пост
-//     // function showLikesOwner() {
-//     //     console.log('покажи нас')
-//     // }
+// {//старые настройки
+//     // import { url } from "../../App";
+//     // import { useHistory, useParams } from "react-router-dom";
+//     // import { createContext, useState, useContext } from "react";
 
+//     // import './style.scss'
 
-//     // функия добавления лайков
-//     function addLike(params) {
-//         dispatch(actionFullAddLike(params))
-//     }
-
-
-
-
-//     return (
-//         <CommentContext.Provider value={[comment, setComment]}>
-//             <Card
-//                 sx={{
-//                     display: 'flex',
-//                     flexDirection: 'column',
-//                     minHeight: '80vh',
-//                     borderRadius: 0,
-//                     height: '100%',
-//                     maxHeight: 450,
-//                 }}
-//             >
-//                 <CardHeader
-//                     avatar={
-//                         <Avatar
-//                             alt={postData?.owner?.login}
-//                             src={(url + postData?.owner?.avatar?.url)}
-//                             sx={{
-//                                 width: 50,
-//                                 height: 50
-//                             }}
-//                         />
-//                     }
-
-//                     title={
-//                         <Typography
-//                             sx={{
-//                                 cursor: 'pointer'
-//                             }}
-//                             onClick={toAccount}
-//                         >
-//                             {postData?.owner?.login}
-//                         </Typography>
-//                     }
-
-//                     subheader={dateofPostParse}
-//                 />
-
-//                 <Divider />
-
-//                 <CardContent
-//                     className='post-comments'
-
-//                     sx={{
-//                         // flex: '0 0 450px',
-//                         flex: '1 1 auto',
-//                         overflowY: 'auto',
-//                     }}
-//                 >
-//                     <Grid
-//                         container
-//                         spacing={2}
-//                         sx={{
-//                             marginBottom: 3
-//                         }}
-//                     >
-//                         <Grid
-//                             xs={2}
-//                             sx={{
-//                                 flex: '0 0 45px'
-//                             }}
-//                         >
-//                             <Avatar
-//                                 alt={postData?.owner?.login}
-//                                 src={(url + postData?.owner?.avatar?.url)}
-//                                 sx={{
-//                                     width: 40,
-//                                     height: 40
-//                                 }}
-//                             />
-//                         </Grid>
-
-//                         <Grid
-//                             xs={10}
-//                         >
-//                             <Typography
-//                                 variant="subtitle2"
-//                                 color="text.secondary"
-//                                 sx={{
-//                                     cursor: 'pointer',
-//                                     width: 'fit-content'
-//                                 }}
-//                                 onClick={toAccount}
-//                             >
-//                                 {postData?.owner?.login}
-//                             </Typography>
-
-//                             <Typography
-//                                 variant="subtitle2"
-//                                 color="text.primary"
-//                             >
-//                                 {postData?.title}
-//                             </Typography>
-
-//                             <Typography
-//                                 variant="body2"
-//                                 color="text.secondary"
-//                             >
-//                                 {postData?.text}
-//                             </Typography>
-//                         </Grid>
-//                     </Grid>
-
-//                     <Grid>
-//                         <CCommentsFeed />
-//                     </Grid>
-//                 </CardContent>
-
-//                 <Divider />
-
-//                 <Box>
-//                     <CardActions disableSpacing>
-//                         <Box
-//                             sx={{
-//                                 flexGrow: 1
-//                             }}>
-//                             <Grid
-//                                 xs={12}
-//                                 container
-//                                 justifyContent="space-between"
-//                                 alignItems="center"
-//                                 sx={{
-//                                     fontSize: '12px'
-//                                 }}
-//                             >
-//                                 <Grid container>
-//                                     <Grid>
-//                                         <IconButton
-//                                             aria-label="add to favorites"
-//                                             onClick={() => addLike({ post: { _id: postData?._id } })}
-//                                         >
-//                                             <FavoriteBorderRounded />
-//                                         </IconButton>
-//                                     </Grid>
-
-//                                     <Grid>
-//                                         <IconButton
-//                                             onClick={addCommentFocus}
-//                                         >
-//                                             <ChatBubbleOutline />
-//                                         </IconButton>
-//                                     </Grid>
-
-//                                     <Grid>
-//                                         <PopupState variant="popover" popupId="demo-popup-popover">
-//                                             {(popupState) => (
-//                                                 <div>
-//                                                     <IconButton
-//                                                         aria-label="share"
-//                                                         {...bindTrigger(popupState)}
-//                                                     >
-//                                                         <SendRounded
-//                                                             style={{ transform: 'translate(3px, -4px) rotate(-30deg)' }}
-//                                                         />
-//                                                     </IconButton>
-//                                                     <Popover
-//                                                         {...bindPopover(popupState)}
-//                                                         anchorOrigin={{
-//                                                             vertical: 'center',
-//                                                             horizontal: 'right',
-//                                                         }}
-//                                                         transformOrigin={{
-//                                                             vertical: 'center',
-//                                                             horizontal: 'left',
-//                                                         }}
-//                                                     >
-//                                                         <Tooltip title={text} placement='bottom-start'>
-//                                                             <Typography
-//                                                                 sx={{ p: 2 }}
-//                                                                 onClick={copyShareLink}
-//                                                             >
-//                                                                 {window.location.href}
-//                                                             </Typography>
-//                                                         </Tooltip>
-//                                                     </Popover>
-//                                                 </div>
-//                                             )}
-//                                         </PopupState>
-//                                     </Grid>
-//                                 </Grid>
-
-//                                 <Grid>
-//                                     <IconButton>
-//                                         <TurnedInNot />
-//                                     </IconButton>
-//                                 </Grid>
-//                             </Grid>
-
-//                             <Grid container>
-//                                 <Typography
-//                                     variant="subtitle1"
-//                                     color="text.secondary"
-//                                     sx={{
-//                                         padding: 1,
-//                                         cursor: 'pointer'
-//                                     }}
-//                                     // onClick={showLikesOwner}
-//                                     onClick={() => handleOpenModal({ arr: postData?.likes, name: 'Отметки "Нравится"' })}
-//                                 >
-//                                     Нравится: {postData?.likes?.length || '0'}
-//                                 </Typography>
-//                             </Grid>
-//                         </Box>
-
-//                         {modalArray && <ModalWindow />}
-//                     </CardActions>
-
-//                     <Divider />
-
-//                     <CardActions>
-//                         <CommentField />
-//                     </CardActions>
-//                 </Box>
-//             </Card>
-//         </CommentContext.Provider >
-//     )
+//     // import {
+//     //     Card,
+//     //     CardHeader,
+//     //     CardContent,
+//     //     CardActions,
+//     //     Avatar,
+//     //     IconButton,
+//     //     Typography,
+//     //     Box,
+//     //     Divider,
+//     //     Popover,
+//     //     Tooltip
+//     // } from '@mui/material'
+
+//     // import {
+//     //     FavoriteBorderRounded,
+//     //     SendRounded,
+//     //     ChatBubbleOutline,
+//     //     TurnedInNot,
+//     // } from '@mui/icons-material/'
+
+//     // import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
+
+//     // import { actionFullAddLike, actionFullDeleteLike } from "../redux/thunks";
+
+//     // import Grid from '@mui/material/Unstable_Grid2';
+
+//     // import { ModalForCountsContext } from "../../App";
+
+//     // import CCommentsFeed from "./comments_feed";
+//     // import CommentField from "./comments_add_field";
+//     // import { ModalWindow } from "../structure/modal";
+//     // import { useDispatch } from "react-redux";
+
+//     // // контекст для управления состоянием данных для отправки комментов
+//     // export const CommentContext = createContext()
+
+
+//     // export function CardPost({ postData }) {
+//     //     // console.log('postData: ', postData)
+
+//     //     const dispatch = useDispatch()
+
+//     //     const history = useHistory()
+//     //     const { postId } = useParams()
+
+//     //     // отслеживаем состояние поля ввода комментария для поста
+//     //     const [comment, setComment] = useState({ text: '', post: { _id: postId } })
+
+//     //     // отслеживаем, к какой именно сущности будет добавляться лайк
+//     //     const [like, setLike] = useState({})
+
+//     //     // контекст модального окна
+//     //     const [modalName, setModalName, modalArray, setModalArray, openModal, setOpenModal, handleOpenModal, handleCloseModal] = useContext(ModalForCountsContext)
+
+//     //     // дата поста
+//     //     const dateofPost = new Date(+postData?.createdAt)
+//     //     const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
+//     //     const dateofPostParse = `${dateofPost.getDate() < 10 ? '0' + dateofPost.getDate() : dateofPost.getDate()}
+//     //     ${months[dateofPost.getMonth()]}
+//     //     ${dateofPost.getFullYear()}
+//     //     ${dateofPost.getHours()}:${dateofPost.getMinutes() < 10 ? '0' + dateofPost.getMinutes() : dateofPost.getMinutes()}`
+
+//     //     // Переход на профиль пользователя
+//     //     function toAccount() {
+//     //         history.push(`/user/${postData?.owner?._id}`)
+//     //     }
+
+//     //     // перевод фокуса на строку добавления комментария при клике на иконку комментария
+//     //     function addCommentFocus() {
+//     //         document.getElementById('addCommentField').focus()
+//     //     }
+
+//     //     // отслеживание состояния текста для ToolTips
+//     //     const [toolTipText, setToolTipText] = useState(true)
+//     //     let text = toolTipText ? 'Нажмите для копирования' : 'Ссылка скопирована в буфер обмена'
+
+//     //     // функция копирования ссылки на пост
+//     //     function copyShareLink() {
+//     //         // получаем урл текущей страницы
+//     //         const postUrl = window.location.href
+//     //         navigator.clipboard.writeText(postUrl)
+
+//     //         setToolTipText(!toolTipText)
+//     //         setTimeout(() => setToolTipText(toolTipText), 2000)
+//     //     }
+
+//     //     // функция отображения всех, кому понравился пост
+//     //     // function showLikesOwner() {
+//     //     //     console.log('покажи нас')
+//     //     // }
+
+
+//     //     // функия добавления лайков
+//     //     function addLike(params) {
+//     //         dispatch(actionFullAddLike(params))
+//     //     }
+
+
+
+
+//     //     return (
+//     //         <CommentContext.Provider value={[comment, setComment]}>
+//     //             <Card
+//     //                 sx={{
+//     //                     display: 'flex',
+//     //                     flexDirection: 'column',
+//     //                     minHeight: '80vh',
+//     //                     borderRadius: 0,
+//     //                     height: '100%',
+//     //                     maxHeight: 450,
+//     //                 }}
+//     //             >
+//     //                 <CardHeader
+//     //                     avatar={
+//     //                         <Avatar
+//     //                             alt={postData?.owner?.login}
+//     //                             src={(url + postData?.owner?.avatar?.url)}
+//     //                             sx={{
+//     //                                 width: 50,
+//     //                                 height: 50
+//     //                             }}
+//     //                         />
+//     //                     }
+
+//     //                     title={
+//     //                         <Typography
+//     //                             sx={{
+//     //                                 cursor: 'pointer'
+//     //                             }}
+//     //                             onClick={toAccount}
+//     //                         >
+//     //                             {postData?.owner?.login}
+//     //                         </Typography>
+//     //                     }
+
+//     //                     subheader={dateofPostParse}
+//     //                 />
+
+//     //                 <Divider />
+
+//     //                 <CardContent
+//     //                     className='post-comments'
+
+//     //                     sx={{
+//     //                         // flex: '0 0 450px',
+//     //                         flex: '1 1 auto',
+//     //                         overflowY: 'auto',
+//     //                     }}
+//     //                 >
+//     //                     <Grid
+//     //                         container
+//     //                         spacing={2}
+//     //                         sx={{
+//     //                             marginBottom: 3
+//     //                         }}
+//     //                     >
+//     //                         <Grid
+//     //                             xs={2}
+//     //                             sx={{
+//     //                                 flex: '0 0 45px'
+//     //                             }}
+//     //                         >
+//     //                             <Avatar
+//     //                                 alt={postData?.owner?.login}
+//     //                                 src={(url + postData?.owner?.avatar?.url)}
+//     //                                 sx={{
+//     //                                     width: 40,
+//     //                                     height: 40
+//     //                                 }}
+//     //                             />
+//     //                         </Grid>
+
+//     //                         <Grid
+//     //                             xs={10}
+//     //                         >
+//     //                             <Typography
+//     //                                 variant="subtitle2"
+//     //                                 color="text.secondary"
+//     //                                 sx={{
+//     //                                     cursor: 'pointer',
+//     //                                     width: 'fit-content'
+//     //                                 }}
+//     //                                 onClick={toAccount}
+//     //                             >
+//     //                                 {postData?.owner?.login}
+//     //                             </Typography>
+
+//     //                             <Typography
+//     //                                 variant="subtitle2"
+//     //                                 color="text.primary"
+//     //                             >
+//     //                                 {postData?.title}
+//     //                             </Typography>
+
+//     //                             <Typography
+//     //                                 variant="body2"
+//     //                                 color="text.secondary"
+//     //                             >
+//     //                                 {postData?.text}
+//     //                             </Typography>
+//     //                         </Grid>
+//     //                     </Grid>
+
+//     //                     <Grid>
+//     //                         <CCommentsFeed />
+//     //                     </Grid>
+//     //                 </CardContent>
+
+//     //                 <Divider />
+
+//     //                 <Box>
+//     //                     <CardActions disableSpacing>
+//     //                         <Box
+//     //                             sx={{
+//     //                                 flexGrow: 1
+//     //                             }}>
+//     //                             <Grid
+//     //                                 xs={12}
+//     //                                 container
+//     //                                 justifyContent="space-between"
+//     //                                 alignItems="center"
+//     //                                 sx={{
+//     //                                     fontSize: '12px'
+//     //                                 }}
+//     //                             >
+//     //                                 <Grid container>
+//     //                                     <Grid>
+//     //                                         <IconButton
+//     //                                             aria-label="add to favorites"
+//     //                                             onClick={() => addLike({ post: { _id: postData?._id } })}
+//     //                                         >
+//     //                                             <FavoriteBorderRounded />
+//     //                                         </IconButton>
+//     //                                     </Grid>
+
+//     //                                     <Grid>
+//     //                                         <IconButton
+//     //                                             onClick={addCommentFocus}
+//     //                                         >
+//     //                                             <ChatBubbleOutline />
+//     //                                         </IconButton>
+//     //                                     </Grid>
+
+//     //                                     <Grid>
+//     //                                         <PopupState variant="popover" popupId="demo-popup-popover">
+//     //                                             {(popupState) => (
+//     //                                                 <div>
+//     //                                                     <IconButton
+//     //                                                         aria-label="share"
+//     //                                                         {...bindTrigger(popupState)}
+//     //                                                     >
+//     //                                                         <SendRounded
+//     //                                                             style={{ transform: 'translate(3px, -4px) rotate(-30deg)' }}
+//     //                                                         />
+//     //                                                     </IconButton>
+//     //                                                     <Popover
+//     //                                                         {...bindPopover(popupState)}
+//     //                                                         anchorOrigin={{
+//     //                                                             vertical: 'center',
+//     //                                                             horizontal: 'right',
+//     //                                                         }}
+//     //                                                         transformOrigin={{
+//     //                                                             vertical: 'center',
+//     //                                                             horizontal: 'left',
+//     //                                                         }}
+//     //                                                     >
+//     //                                                         <Tooltip title={text} placement='bottom-start'>
+//     //                                                             <Typography
+//     //                                                                 sx={{ p: 2 }}
+//     //                                                                 onClick={copyShareLink}
+//     //                                                             >
+//     //                                                                 {window.location.href}
+//     //                                                             </Typography>
+//     //                                                         </Tooltip>
+//     //                                                     </Popover>
+//     //                                                 </div>
+//     //                                             )}
+//     //                                         </PopupState>
+//     //                                     </Grid>
+//     //                                 </Grid>
+
+//     //                                 <Grid>
+//     //                                     <IconButton>
+//     //                                         <TurnedInNot />
+//     //                                     </IconButton>
+//     //                                 </Grid>
+//     //                             </Grid>
+
+//     //                             <Grid container>
+//     //                                 <Typography
+//     //                                     variant="subtitle1"
+//     //                                     color="text.secondary"
+//     //                                     sx={{
+//     //                                         padding: 1,
+//     //                                         cursor: 'pointer'
+//     //                                     }}
+//     //                                     // onClick={showLikesOwner}
+//     //                                     onClick={() => handleOpenModal({ arr: postData?.likes, name: 'Отметки "Нравится"' })}
+//     //                                 >
+//     //                                     Нравится: {postData?.likes?.length || '0'}
+//     //                                 </Typography>
+//     //                             </Grid>
+//     //                         </Box>
+
+//     //                         {modalArray && <ModalWindow />}
+//     //                     </CardActions>
+
+//     //                     <Divider />
+
+//     //                     <CardActions>
+//     //                         <CommentField />
+//     //                     </CardActions>
+//     //                 </Box>
+//     //             </Card>
+//     //         </CommentContext.Provider >
+//     //     )
+//     // }
 // }
 
 
 
 
 
-
-
-
-
-
-
-
-
-
-
-
 import { url } from "../../App";
 import { useHistory, useParams } from "react-router-dom";
 import { createContext, useState, useContext, useEffect } from "react";
@@ -369,7 +360,7 @@ import {
 
 import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
 
-import { actionFullAddLike, actionFullDeleteLike } from "../redux/thunks";
+import { actionFullAddLike, actionFullDeleteLike } from "../../redux/thunks";
 
 import Grid from '@mui/material/Unstable_Grid2';
 
@@ -470,6 +461,10 @@ export function CardPost({ postData }) {
     // ============= функция отображения лайка (финиш) =========================
 
 
+    function showLikesOwner() {
+        handleOpenModal({ arr: postData?.likes, name: 'Отметки "Нравится"' })
+    }
+
 
     return (
         <CommentContext.Provider value={[comment, setComment]}>
@@ -689,8 +684,8 @@ export function CardPost({ postData }) {
                                         padding: 1,
                                         cursor: 'pointer'
                                     }}
-                                    // onClick={showLikesOwner}
-                                    onClick={() => handleOpenModal({ arr: postData?.likes, name: 'Отметки "Нравится"' })}
+                                    onClick={showLikesOwner}
+                                // onClick={() => handleOpenModal({ arr: postData?.likes, name: 'Отметки "Нравится"' })}
                                 >
                                     Нравится: {postData?.likes?.length || '0'}
                                 </Typography>

js/Project/project/src/components/post/comments_add_field.js

@@ -18,7 +18,7 @@ import EmojiPicker from 'emoji-picker-react';
 import { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
-import { actionFullAddComment } from "../redux/thunks";
+import { actionFullAddComment } from "../../redux/thunks";
 import { useParams } from "react-router-dom";
 
 

js/Project/project/src/components/post/comments_feed.js

@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 import { useEffect } from "react";
 import { connect, useSelector } from "react-redux";
 
-import { actionFullFindCommentsPostOne } from "../redux/thunks";
+import { actionFullFindCommentsPostOne } from "../../redux/thunks";
 
 import CommentCard from "./comments_feed_card";
 

js/Project/project/src/components/post/comments_feed_card.js

@@ -1,30 +1,34 @@
 import { url } from "../../App";
 import { useHistory } from "react-router-dom";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import {
     Avatar,
     IconButton,
     Typography,
     Divider,
+    Checkbox
 } from '@mui/material'
 
 import Grid from '@mui/material/Unstable_Grid2';
 
-import { FavoriteBorderRounded } from '@mui/icons-material/'
+import { FavoriteBorderRounded, FavoriteRounded } from '@mui/icons-material/'
 import { ModalForCountsContext } from "../../App";
 
 import './style.scss'
 
+import { actionFullAddLike, actionFullDeleteLike } from "../../redux/thunks";
+
 import { CommentContext } from "./comments";
 import { useContext } from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 
 function CommentCard({ data }) {
     // console.log('data: ', data)
 
     const history = useHistory()
+    const dispatch = useDispatch()
 
     // контекст поля ввода комментария
     const [comment, setComment] = useContext(CommentContext)
@@ -56,6 +60,47 @@ function CommentCard({ data }) {
         )
     }
 
+
+
+
+    // ============= функция отображения лайка (старт) =========================
+    // чекаем мой ид
+    const myId = useSelector(state => state?.auth?.payload?.sub?.id)
+
+    // картинка лайка включить/отключить
+    let isLike = false
+    const [checked, setChecked] = useState(isLike)
+
+    const handleChange = (event) => {
+        setChecked(event.target.checked)
+    }
+
+    // перебираем список всех лайков и сравниваем с моим ид
+    let likeId = ''
+    data?.likes?.some(item => {
+        if (item?.owner?._id === myId) {
+            isLike = true
+            likeId = item._id
+
+            return true
+        }
+    })
+
+    useEffect(() => setChecked(isLike), [isLike])
+
+
+    function likeAction() {
+        checked
+            ? dispatch(actionFullDeleteLike({ _id: likeId }))
+            : dispatch(actionFullAddLike({ comment: { _id: data?._id } }))
+    }
+    // ============= функция отображения лайка (финиш) =========================
+
+
+
+
+
+
     // функция перехода на страницу профиля
     function toAccount(id) {
         history.push(`/user/${id}`)
@@ -132,13 +177,71 @@ function CommentCard({ data }) {
                         paddingBottom: 0
                     }}
                 >
-                    <IconButton
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                    {/* <IconButton
                         onClick={() => (console.log('click like comment'))}
                     >
                         <FavoriteBorderRounded
                             fontSize='small'
                         />
-                    </IconButton>
+                    </IconButton> */}
+
+
+
+
+
+
+                    <Checkbox
+                        checked={checked}
+                        onChange={handleChange}
+                        inputProps={{ 'aria-label': 'controlled' }}
+                        icon={<FavoriteBorderRounded />}
+                        checkedIcon={<FavoriteRounded />}
+                        onClick={likeAction}
+
+                        sx={{
+                            '&.Mui-checked': {
+                                color: 'red',
+                            },
+                        }}
+                    />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
                 </Grid>
 
                 <Grid

js/Project/project/src/components/post/index.js

@@ -6,7 +6,7 @@ import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
 import { Paper, Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
-import { actionFindPostOne } from '../redux/action';
+import { actionFindPostOne } from '../../redux/action';
 import { MyCarouselPost } from './carousel';
 import { CardPost } from './comments';
 

js/Project/project/src/components/structure/header(old).js

@@ -0,0 +1,194 @@
+import { store } from '../redux';
+import React, { createContext, useContext, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { connect, useSelector } from 'react-redux';
+
+import { AppBar, Box, Toolbar, Typography, Menu, Container, Avatar, Tooltip, MenuItem, IconButton, Stack } from '@mui/material'
+import { Instagram, AddAPhotoRounded, Search } from '@mui/icons-material';
+// import { actionFullLogout } from '../redux/action';
+import { actionFullLogout } from '../redux/thunks';
+
+import { url } from '../../App';
+
+
+function UserMenu() {
+    let history = useHistory()
+    const location = useLocation().pathname
+    const user = useContext(UserContext)
+
+    // потому что запрос на логин не отдает аватар, а только id и login
+    const userData = useSelector(state => state?.promise?.AboutMe?.payload)
+
+    const [anchorElUser, setAnchorElUser] = useState(null)
+
+    // отображение/скрытие меню на аватарке
+    const handleOpenUserMenu = (event) => {
+        setAnchorElUser(event.currentTarget)
+    }
+    const handleCloseUserMenu = () => {
+        setAnchorElUser(null)
+    }
+
+    // Thunk для разлогина и редирект на главную, потому что остальные запросы не работают, если нет токена
+    async function onLogout() {
+
+        const result = await store.dispatch(actionFullLogout())
+
+        // проверяем, реально ли очистили токен (и все хранилище)
+        if (Object.keys(result).length === 0 && location != '/') {
+            history.push('/')
+        }
+    }
+
+
+    return (
+        <Stack
+            direction='row'
+        >
+            <IconButton
+                sx={{
+                    color: '#000',
+                    transform: 'scale(-1, 1)'
+                }}
+                onClick={() => {
+                    history.push('/search')
+                }}
+            >
+                <Search />
+            </IconButton>
+
+            <IconButton
+                sx={{
+                    color: '#000'
+                }}
+                onClick={() => {
+                    history.push('/createpost')
+                }}
+            >
+                <AddAPhotoRounded />
+            </IconButton>
+
+            <Box sx={{ flexGrow: 0 }}>
+                <Tooltip>
+                    <IconButton
+                        onClick={handleOpenUserMenu}
+                    >
+                        <Avatar
+                            alt={user?.login}
+                            src={url + userData?.avatar?.url}
+                        />
+                    </IconButton>
+                </Tooltip>
+
+                <Menu
+                    sx={{
+                        mt: '50px'
+                    }}
+                    id="menu-appbar"
+                    anchorEl={anchorElUser}
+                    anchorOrigin={{
+                        vertical: 'top',
+                        horizontal: 'right',
+                    }}
+                    keepMounted
+                    transformOrigin={{
+                        vertical: 'top',
+                        horizontal: 'right',
+                    }}
+                    open={Boolean(anchorElUser)}
+                    onClose={handleCloseUserMenu}
+                >
+
+                    <MenuItem
+                        onClick={() => {
+                            history.push(`/user/${user?.id}`)
+                        }}
+                    >
+                        <Typography
+                            textAlign="center">
+                            <span>
+                                {user?.login}
+                            </span>
+                        </Typography>
+                    </MenuItem>
+
+                    <MenuItem
+                        onClick={onLogout}
+                    >
+                        <Typography
+                            textAlign="center"
+                        >
+                            <span>
+                                Выйти
+                            </span>
+                        </Typography>
+                    </MenuItem>
+                </Menu>
+            </Box>
+        </Stack>
+    )
+}
+
+
+const UserContext = createContext()
+
+function Header({ login }) {
+    let history = useHistory()
+
+    function toMain() {
+        history.push('/');
+    }
+
+    return (
+        <AppBar
+            position='sticky'
+            color='inherit'
+        >
+            <UserContext.Provider value={login}>
+                <Container
+                    maxWidth="xl"
+                >
+                    <Toolbar
+                        disableGutters
+                    >
+                        <Stack
+                            direction='row'
+                            sx={{
+                                display: 'flex',
+                                flexGrow: '1'
+                            }}
+                        >
+                            <IconButton
+                                edge='start'
+                                sx={{
+                                    color: '#000'
+                                }}
+                                onClick={toMain}
+                            >
+                                <Instagram />
+
+                                <Typography
+                                    variant="h6"
+                                    sx={{
+                                        fontFamily: 'monospace',
+                                        fontWeight: 700,
+                                        letterSpacing: '.3rem',
+                                        ml: 1
+                                    }}
+                                >
+                                    Hipstagram
+                                </Typography>
+                            </IconButton>
+                        </Stack>
+
+                        {/* {login && <UserMenu login={login} />} */}
+                        {login && <UserMenu />}
+
+                    </Toolbar>
+                </Container>
+            </UserContext.Provider>
+        </AppBar>
+    )
+}
+
+export const CHeader = connect(state => ({ login: state?.auth?.payload?.sub }))(Header)

js/Project/project/src/components/structure/header.js

@@ -1,193 +1,270 @@
-import { store } from '../redux';
-import React, { createContext, useContext, useState } from 'react';
+import React, { useState, cloneElement, useContext } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { connect, useSelector } from 'react-redux';
+import { connect, useDispatch, useSelector } from 'react-redux';
 
-import { AppBar, Box, Toolbar, Typography, Menu, Container, Avatar, Tooltip, MenuItem, IconButton, Stack } from '@mui/material'
-import { Instagram, AddAPhotoRounded, Search } from '@mui/icons-material';
-// import { actionFullLogout } from '../redux/action';
-import { actionFullLogout } from '../redux/thunks';
+import { AppBar, Box, Toolbar, Typography, Menu, Container, Avatar, Tooltip, MenuItem, IconButton, Stack, useScrollTrigger, TextField } from '@mui/material'
+import Button from '@mui/material-next/Button';
+import { styled } from '@mui/material/styles';
+import { AddAPhotoRounded, SearchRounded, LogoutRounded, ManageAccountsRounded, TouchAppRounded } from '@mui/icons-material';
+import { actionFullLogout } from '../../redux/thunks';
 
 import { url } from '../../App';
 
+// Стилизация иконки поиска
+const StyledInputBase = styled(TextField)(({ theme }) => ({
+    color: 'inherit',
+    '& .MuiInputBase-input': {
+        padding: theme.spacing(0),
+        cursor: 'pointer',
+        paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+        transition: theme.transitions.create('width'),
+        width: '100%',
+        [theme.breakpoints.up('sm')]: {
+            width: '7ch',
+            '&:focus': {
+                width: '15ch',
+            },
+        },
+    },
+}))
+
+// Тень на хетере при прокручивании
+function ElevationScroll(props) {
+    const { children, window } = props;
+    const trigger = useScrollTrigger({
+        disableHysteresis: true,
+        threshold: 0,
+        target: window ? window() : undefined,
+    });
+
+    return cloneElement(children, {
+        elevation: trigger ? 4 : 0,
+    });
+}
 
-function UserMenu() {
-    let history = useHistory()
-    const location = useLocation().pathname
-    const user = useContext(UserContext)
+
+
+function UserMenu({ user }) {
+    const history = useHistory()
+    const dispatch = useDispatch()
+    const location = useLocation().pathname === '/'
 
     // потому что запрос на логин не отдает аватар, а только id и login
     const userData = useSelector(state => state?.promise?.AboutMe?.payload)
 
+    // открытие,закрытие меню на лого
     const [anchorElUser, setAnchorElUser] = useState(null)
-
-    // отображение/скрытие меню на аватарке
     const handleOpenUserMenu = (event) => {
-        setAnchorElUser(event.currentTarget)
+        setAnchorElUser(event.currentTarget);
     }
     const handleCloseUserMenu = () => {
-        setAnchorElUser(null)
+        setAnchorElUser(null);
     }
 
     // Thunk для разлогина и редирект на главную, потому что остальные запросы не работают, если нет токена
     async function onLogout() {
-
-        const result = await store.dispatch(actionFullLogout())
+        const res = await dispatch(actionFullLogout())
 
         // проверяем, реально ли очистили токен (и все хранилище)
-        if (Object.keys(result).length === 0 && location != '/') {
+        if (Object.keys(res).length === 0 && !location) {
             history.push('/')
         }
     }
 
+    function toCreatepost() {
+        history.push('/createpost')
+    }
+
+    function toMyAccount() {
+        history.push(`/user/${user?.id}`)
+    }
+
 
     return (
-        <Stack
-            direction='row'
-        >
-            <IconButton
-                sx={{
-                    color: '#000',
-                    transform: 'scale(-1, 1)'
-                }}
-                onClick={() => {
-                    history.push('/search')
-                }}
-            >
-                <Search />
-            </IconButton>
+        <Box sx={{ flexGrow: 0 }}>
+            <Tooltip title='Открыть меню'>
+                <IconButton onClick={handleOpenUserMenu}>
+                    <Avatar
+                        alt={user?.login}
+                        src={url + userData?.avatar?.url}
+                    />
+                </IconButton>
+            </Tooltip>
 
-            <IconButton
-                sx={{
-                    color: '#000'
+            <Menu
+                sx={{ mt: '45px' }}
+                id="menu-appbar"
+                anchorEl={anchorElUser}
+                anchorOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
                 }}
-                onClick={() => {
-                    history.push('/createpost')
+                keepMounted
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
                 }}
+                open={Boolean(anchorElUser)}
+                onClose={handleCloseUserMenu}
             >
-                <AddAPhotoRounded />
-            </IconButton>
-
-            <Box sx={{ flexGrow: 0 }}>
-                <Tooltip>
-                    <IconButton
-                        onClick={handleOpenUserMenu}
-                    >
-                        <Avatar
-                            alt={user?.login}
-                            src={url + userData?.avatar?.url}
-                        />
-                    </IconButton>
-                </Tooltip>
-
-                <Menu
-                    sx={{
-                        mt: '50px'
-                    }}
-                    id="menu-appbar"
-                    anchorEl={anchorElUser}
-                    anchorOrigin={{
-                        vertical: 'top',
-                        horizontal: 'right',
-                    }}
-                    keepMounted
-                    transformOrigin={{
-                        vertical: 'top',
-                        horizontal: 'right',
-                    }}
-                    open={Boolean(anchorElUser)}
-                    onClose={handleCloseUserMenu}
-                >
-                    <MenuItem
-                        onClick={() => {
-                            history.push(`/user/${user?.id}`)
-                        }}
-                    >
+                <MenuItem
+                    onClick={toMyAccount}>
+                    <Stack direction="row" spacing={1}>
+                        <ManageAccountsRounded fontSize="small" />
                         <Typography
                             textAlign="center">
                             <span>
                                 {user?.login}
                             </span>
                         </Typography>
-                    </MenuItem>
+                    </Stack>
+                </MenuItem>
 
-                    <MenuItem
-                        onClick={onLogout}
-                    >
+                <MenuItem
+                    onClick={toCreatepost}>
+                    <Stack direction="row" spacing={1}>
+                        <AddAPhotoRounded fontSize="small" />
                         <Typography
-                            textAlign="center"
-                        >
+                            textAlign="center">
+                            <span>
+                                Добавить пост
+                            </span>
+                        </Typography>
+                    </Stack>
+                </MenuItem>
+
+                <MenuItem
+                    onClick={onLogout}
+                >
+                    <Stack direction="row" spacing={1}>
+                        <LogoutRounded fontSize="small" />
+                        <Typography
+                            textAlign="center">
                             <span>
                                 Выйти
                             </span>
                         </Typography>
-                    </MenuItem>
-                </Menu>
-            </Box>
-        </Stack>
+                    </Stack>
+                </MenuItem>
+            </Menu>
+        </Box>
     )
 }
 
 
-const UserContext = createContext()
-
 function Header({ login }) {
     let history = useHistory()
 
+    const [searchText, setSearchText] = useState('')
+
     function toMain() {
         history.push('/');
     }
 
     return (
-        <AppBar
-            position='sticky'
-            color='inherit'
-        >
-            <UserContext.Provider value={login}>
-                <Container
-                    maxWidth="xl"
-                >
-                    <Toolbar
-                        disableGutters
-                    >
-                        <Stack
-                            direction='row'
-                            sx={{
-                                display: 'flex',
-                                flexGrow: '1'
-                            }}
-                        >
-                            <IconButton
-                                edge='start'
+        <React.Fragment>
+            <ElevationScroll {...login}>
+                <AppBar
+                    color='inherit'
+                    position='sticky'
+                    sx={{ borderBottom: '1px solid #E8E8E8' }}>
+                    <Container maxWidth="xl">
+                        <Toolbar disableGutters>
+                            <Stack
+                                direction='row'
                                 sx={{
-                                    color: '#000'
-                                }}
-                                onClick={toMain}
-                            >
-                                <Instagram />
+                                    display: 'flex',
+                                    flexGrow: '1'
+                                }}>
+                                <Box
+                                    onClick={toMain}
+                                    sx={{
+                                        cursor: 'pointer'
+                                    }}
+                                >
+                                    <img src='/images/logo3.png' style={{ width: '28px' }} />
+                                </Box>
 
                                 <Typography
                                     variant="h6"
+                                    noWrap
                                     sx={{
+                                        mr: 2,
                                         fontFamily: 'monospace',
                                         fontWeight: 700,
                                         letterSpacing: '.3rem',
-                                        ml: 1
+                                        color: 'inherit',
+                                        textDecoration: 'none',
+                                        marginLeft: '8px'
                                     }}
                                 >
                                     Hipstagram
                                 </Typography>
-                            </IconButton>
-                        </Stack>
+                            </Stack>
+
+                            {login &&
+                                <Box sx={{
+                                    position: 'relative',
+                                    marginLeft: 0
+                                }}>
+                                    <Box sx={{
+                                        padding: '0 16px',
+                                        height: '100%',
+                                        position: 'absolute',
+                                        pointerEvents: 'none',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                    }}>
+                                        <SearchRounded />
+                                    </Box>
+
+                                    <StyledInputBase
+                                        placeholder="Поиск..."
+                                        className='search-field'
+                                        id='searchField'
+                                        variant="standard"
+                                        value={searchText}
+                                        onChange={e => setSearchText(e.target.value)}
 
-                        {/* {login && <UserMenu login={login} />} */}
-                        {login && <UserMenu />}
+                                        InputProps={{
+                                            'disableUnderline': true,
+                                            'aria-label': 'search',
+                                            endAdornment:
+                                                <Typography
+                                                    variant='subtitle2'
+                                                    align='right'
+                                                    color='primary.main'
+                                                    sx={{
+                                                        alignSelf: 'center',
+                                                        cursor: 'pointer',
+                                                        margin: '0 8px',
+                                                        fontWeight: '700'
+                                                    }}>
+                                                    {searchText !== '' &&
+                                                        <Button
+                                                            startIcon={<TouchAppRounded />}
+                                                            color="secondary"
+                                                            size="small"
+                                                            variant="elevated"
+                                                            sx={{
+                                                                padding: '5px 10px'
+                                                            }}
+                                                        >
+                                                            Искать
+                                                        </Button>}
+                                                </Typography>
+                                        }}
+                                    />
+                                </Box>}
 
-                    </Toolbar>
-                </Container>
-            </UserContext.Provider>
-        </AppBar>
+                            {login && <UserMenu user={login} />}
+                        </Toolbar>
+                    </Container>
+                </AppBar>
+            </ElevationScroll>
+        </React.Fragment >
     )
 }
 
-export const CHeader = connect(state => ({ login: state?.auth?.payload?.sub }))(Header)
+export const CHeader = connect(state => ({ login: state?.auth?.payload?.sub }))(Header)

js/Project/project/src/components/structure/modal.js

@@ -6,7 +6,7 @@ import { Typography, Box, Stack, Backdrop, Modal, Fade, Divider, IconButton, Ava
 import { Close } from '@mui/icons-material'
 
 import { ModalForCountsContext, UpdateProfile } from "../../App";
-import { actionFullUpdateProfile } from "../redux/thunks";
+import { actionFullUpdateProfile } from "../../redux/thunks";
 import { url } from "../../App"
 
 
@@ -30,6 +30,10 @@ export function ModalWindow() {
     // контекст модального окна
     const [modalName, setModalName, modalArray, setModalArray, openModal, setOpenModal, handleOpenModal, handleCloseModal] = useContext(ModalForCountsContext)
 
+    // контекст обновления профиля
+    const [updateProfile, setUpdateProfile] = useContext(UpdateProfile)
+    // console.log('test context: ', updateProfile)
+
 
     return (
         <div>
@@ -112,6 +116,9 @@ function RecommendedCard({ data }) {
     const [updateProfile, setUpdateProfile] = useContext(UpdateProfile)
     console.log('updateProfile: ', updateProfile)
 
+    // контекст модального окна
+    const [modalName, setModalName, modalArray, setModalArray, openModal, setOpenModal, handleOpenModal, handleCloseModal] = useContext(ModalForCountsContext)
+
     // проверка, является ли пользователь моим подписчиком
     const myData = useSelector(state => state?.promise?.AboutMe?.payload)
     const isFollowing = myData?.following && (myData?.following).some(item => item._id === (data?.owner?._id || data?._id))
@@ -122,6 +129,7 @@ function RecommendedCard({ data }) {
     // переход на аккаунт
     function toAccount() {
         history.push(data?.owner?._id ? `/user/${data?.owner?._id}` : `/user/${data?._id}`)
+        setModalArray(modalArray.length = 0)
     }
 
 

js/Project/project/src/components/user/index.js

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { store } from '../redux';
+import { store } from '../../redux';
 
 import { Box, Container, Divider } from '@mui/material';
 
 import BasicCard from './userData';
 // import { actionFindUserOne, actionFullUserFindOne } from '../redux/action';
-import { actionFindUserOne, actionFullUserFindOne } from '../redux/thunks';
+import { actionFindUserOne, actionFullUserFindOne } from '../../redux/thunks';
 
 import { StandardImageList, СStandardImageList } from './gallery';
 

js/Project/project/src/components/redux/action.js

@@ -362,7 +362,11 @@ export const actionFindCommentsPostOne = id => actionPromise('PROMISE', 'FindCom
       }
     }
     likes {
-      _id
+      _id owner{
+        _id login avatar{
+          _id url
+        }
+      }
     }
   }
 }`, {
@@ -410,9 +414,12 @@ export const actionAddLike = params => actionPromise('PROMISE', 'AddLike', gql(`
       }
     }
     comment{
-      _id text likes{
+      _id likes{
         _id 
       }
+      post{
+        _id
+      }
     }
     owner{
       _id 
@@ -432,6 +439,11 @@ export const actionDeleteLike = params => actionPromise('PROMISE', 'DeleteLike',
     _id post{
       _id
     }
+    comment{
+      _id post{
+        _id
+      }
+    }
   }
 }`, {
   deleteLike: params
@@ -445,9 +457,7 @@ export const actionDeleteLike = params => actionPromise('PROMISE', 'DeleteLike',
 //обновление профил(установка аватара, ник-нейма, логина?, добавления/удаления подписчиков)
 export const actionUpdateProfile = params => actionPromise('PROMISE', 'UpdateProfile', gql(`mutation setAvatar($updateProfile: UserInput){
     UserUpsert(user: $updateProfile){
-        _id, avatar{
-            _id
-        }
+        _id
     }
 }`, {
   updateProfile: params

js/Project/project/src/components/redux/thunks.js

@@ -1,4 +1,4 @@
-import { url } from "../../App"
+import { url } from "../App"
 
 import {
     actionPromise,
@@ -202,6 +202,8 @@ export const actionFullAddComment = (nameOfPromise, params, id) =>
     async dispatch => {
         const newComment = await dispatch(actionAddComment(nameOfPromise, params))
 
+
+        console.log('comment_id: ', id)
         if (typeof newComment._id === 'string') {
             dispatch(actionFullFindCommentsPostOne(id))
         }
@@ -216,14 +218,14 @@ export const actionFullAddLike = params =>
     async dispatch => {
         const res = await dispatch(actionAddLike(params))
 
-        // загружаем данные поста с бетка, если лайк был для поста
+        // обновляем данные поста с бека, если лайк был для поста
         if (res?.post) {
             dispatch(actionFindPostOne(res?.post?._id))
         }
 
-        // загружаем данные комментариев для поста с бетка, если лайк был для комментарий
+
         if (res?.comment) {
-            dispatch(actionFindPostOne(res.comment._id))
+            dispatch(actionFullFindCommentsPostOne(res?.comment?.post?._id))
         }
     }
 
@@ -236,10 +238,15 @@ export const actionFullDeleteLike = params =>
     async dispatch => {
         const res = await dispatch(actionDeleteLike(params))
 
-        // при удачном удалении отправляем запрос на обновление данных страницы
-        if (res?._id) {
+
+        // обновляем данные комментариев к посту с бека, если лайк был для поста
+        if (res?.post) {
             dispatch(actionFindPostOne(res.post._id))
         }
+
+        if (res?.comment) {
+            dispatch(actionFullFindCommentsPostOne(res?.comment?.post?._id))
+        }
     }
 
 
@@ -249,8 +256,10 @@ export const actionFullDeleteLike = params =>
 // запрос на обновление профиля и последующая отправка запрос обо мне на бек
 export const actionFullUpdateProfile = params =>
     async dispatch => {
-        console.log('params: ', params)
-        // const res = await dispatch(actionUpdateProfile(params))
+        const res = await dispatch(actionUpdateProfile(params))
 
-        // console.log('res: ', res)
+
+        if (res._id) {
+            dispatch(actionAboutMe())
+        }
     }