added newPost

package-lock.json

@@ -2024,6 +2024,96 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@material-ui/core": {
+      "version": "4.12.4",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz",
+      "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.11.5",
+        "@material-ui/system": "^4.12.2",
+        "@material-ui/types": "5.1.0",
+        "@material-ui/utils": "^4.11.3",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0",
+        "react-transition-group": "^4.4.0"
+      }
+    },
+    "@material-ui/icons": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz",
+      "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.11.5",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
+      "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "5.1.0",
+        "@material-ui/utils": "^4.11.3",
+        "clsx": "^1.0.4",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.5.1",
+        "jss-plugin-camel-case": "^10.5.1",
+        "jss-plugin-default-unit": "^10.5.1",
+        "jss-plugin-global": "^10.5.1",
+        "jss-plugin-nested": "^10.5.1",
+        "jss-plugin-props-sort": "^10.5.1",
+        "jss-plugin-rule-value-function": "^10.5.1",
+        "jss-plugin-vendor-prefixer": "^10.5.1",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.20",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+          "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+        }
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
+      "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.3",
+        "csstype": "^2.5.2",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.20",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+          "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+        }
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
+    },
+    "@material-ui/utils": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
+      "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      }
+    },
     "@mui/base": {
       "version": "5.0.0-alpha.89",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.89.tgz",
@@ -2362,6 +2452,41 @@
         "fastq": "^1.6.0"
       }
     },
+    "@pandemicode/material-ui-dropzone": {
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/@pandemicode/material-ui-dropzone/-/material-ui-dropzone-3.5.5.tgz",
+      "integrity": "sha512-dpZDvAoIkO51xcWpPjgbr3o/deptoq+ZhZX5SvE78MGIwzX72u9glI0QB/UWK+tb0HPubIH1YWsW0geO6HpKPQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "clsx": "^1.0.2",
+        "react-dropzone": "^10.2.1"
+      },
+      "dependencies": {
+        "file-selector": {
+          "version": "0.1.19",
+          "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.1.19.tgz",
+          "integrity": "sha512-kCWw3+Aai8Uox+5tHCNgMFaUdgidxvMnLWO6fM5sZ0hA2wlHP5/DHGF0ECe84BiB95qdJbKNEJhWKVDvMN+JDQ==",
+          "requires": {
+            "tslib": "^2.0.1"
+          }
+        },
+        "react-dropzone": {
+          "version": "10.2.2",
+          "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-10.2.2.tgz",
+          "integrity": "sha512-U5EKckXVt6IrEyhMMsgmHQiWTGLudhajPPG77KFSvgsMqNEHSyGpqWvOMc5+DhEah/vH4E1n+J5weBNLd5VtyA==",
+          "requires": {
+            "attr-accept": "^2.0.0",
+            "file-selector": "^0.1.12",
+            "prop-types": "^15.7.2"
+          }
+        },
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        }
+      }
+    },
     "@pmmmwh/react-refresh-webpack-plugin": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.4.tgz",
@@ -3604,9 +3729,9 @@
       "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0="
     },
     "async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
       "requires": {
         "lodash": "^4.17.14"
       }
@@ -3626,6 +3751,11 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
+    },
     "autoprefixer": {
       "version": "10.4.2",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
@@ -4132,6 +4262,11 @@
         "supports-color": "^5.3.0"
       }
     },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha512-YXzt1cQ4a2jqazhcuSWEOc1K2q8g9H6eWNsyZgi640LDzRWVQ2eDe+Y/kVdftH+vYdPF2rgDb3dLdpxE1jvAxw=="
+    },
     "char-regex": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
@@ -5071,11 +5206,11 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "ejs": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz",
-      "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz",
+      "integrity": "sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==",
       "requires": {
-        "jake": "^10.6.1"
+        "jake": "^10.8.5"
       }
     },
     "electron-to-chromium": {
@@ -5103,6 +5238,24 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "requires": {
+        "iconv-lite": "^0.6.2"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
     "enhanced-resolve": {
       "version": "5.9.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.0.tgz",
@@ -5854,6 +6007,35 @@
         "bser": "2.1.1"
       }
     },
+    "fbjs": {
+      "version": "0.8.18",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz",
+      "integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.30"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA=="
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -5871,12 +6053,45 @@
         "schema-utils": "^3.0.0"
       }
     },
+    "file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "requires": {
+        "tslib": "^2.4.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        }
+      }
+    },
     "filelist": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz",
-      "integrity": "sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
       "requires": {
-        "minimatch": "^3.0.4"
+        "minimatch": "^5.0.1"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
+          "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
       }
     },
     "filesize": {
@@ -6888,6 +7103,15 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "istanbul-lib-coverage": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
@@ -6964,20 +7188,63 @@
       }
     },
     "jake": {
-      "version": "10.8.2",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz",
-      "integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==",
+      "version": "10.8.5",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
+      "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==",
       "requires": {
-        "async": "0.9.x",
-        "chalk": "^2.4.2",
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
         "filelist": "^1.0.1",
         "minimatch": "^3.0.4"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "async": {
-          "version": "0.9.2",
-          "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-          "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0="
+          "version": "3.2.4",
+          "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+          "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
         }
       }
     },
@@ -8556,6 +8823,49 @@
         "tmpl": "1.0.5"
       }
     },
+    "material-ui-dropzone": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/material-ui-dropzone/-/material-ui-dropzone-3.5.0.tgz",
+      "integrity": "sha512-3BC6mz/4OEM4ZpbqMfuMN065JQyqfEbifT6/VzIua7Zj4b0DaR5YPCgpN+fL/e8yBgTs9MGBZJQY06p5pfKwvw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "clsx": "^1.0.2",
+        "react-dropzone": "^10.2.1"
+      },
+      "dependencies": {
+        "file-selector": {
+          "version": "0.1.19",
+          "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.1.19.tgz",
+          "integrity": "sha512-kCWw3+Aai8Uox+5tHCNgMFaUdgidxvMnLWO6fM5sZ0hA2wlHP5/DHGF0ECe84BiB95qdJbKNEJhWKVDvMN+JDQ==",
+          "requires": {
+            "tslib": "^2.0.1"
+          }
+        },
+        "react-dropzone": {
+          "version": "10.2.2",
+          "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-10.2.2.tgz",
+          "integrity": "sha512-U5EKckXVt6IrEyhMMsgmHQiWTGLudhajPPG77KFSvgsMqNEHSyGpqWvOMc5+DhEah/vH4E1n+J5weBNLd5VtyA==",
+          "requires": {
+            "attr-accept": "^2.0.0",
+            "file-selector": "^0.1.12",
+            "prop-types": "^15.7.2"
+          }
+        },
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        }
+      }
+    },
+    "material-ui-icons": {
+      "version": "1.0.0-beta.36",
+      "resolved": "https://registry.npmjs.org/material-ui-icons/-/material-ui-icons-1.0.0-beta.36.tgz",
+      "integrity": "sha512-7rS6b2EV5QXCB/gTi/Ac9Wbxd+h9EZv1Td3rLLJe4IER8mVHRgdqZccB3EsjW2DrJ7opdY1+8X3/vyrS7CQNpg==",
+      "requires": {
+        "recompose": "^0.26.0"
+      }
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -8690,9 +9000,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
     "mkdirp": {
       "version": "0.5.5",
@@ -8757,10 +9067,26 @@
         }
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      },
+      "dependencies": {
+        "is-stream": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+          "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ=="
+        }
+      }
+    },
     "node-forge": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.2.1.tgz",
-      "integrity": "sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w=="
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA=="
     },
     "node-int64": {
       "version": "0.4.0",
@@ -9212,6 +9538,11 @@
         }
       }
     },
+    "popper.js": {
+      "version": "1.16.1-lts",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -10166,6 +10497,16 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-dropzone": {
+      "version": "14.2.2",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.2.tgz",
+      "integrity": "sha512-5oyGN/B5rNhop2ggUnxztXBQ6q6zii+OMEftPzsxAR2hhpVWz0nAV+3Ktxo2h5bZzdcCKrpd8bfWAVsveIBM+w==",
+      "requires": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.10",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
@@ -10287,6 +10628,15 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-smooth-dnd": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/react-smooth-dnd/-/react-smooth-dnd-0.11.1.tgz",
+      "integrity": "sha512-+lVWQwPlK980VbFLtMSKfAJBt5ep37H/rVm3OnFiTpMFAghB9YQmrj3MnoIZ8tF+/niM/FFLpnSo8IgnbEY4Kg==",
+      "requires": {
+        "prop-types": ">=15.6.0",
+        "smooth-dnd": "0.12.1"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -10316,6 +10666,24 @@
         "picomatch": "^2.2.1"
       }
     },
+    "recompose": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz",
+      "integrity": "sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==",
+      "requires": {
+        "change-emitter": "^0.1.2",
+        "fbjs": "^0.8.1",
+        "hoist-non-react-statics": "^2.3.1",
+        "symbol-observable": "^1.0.4"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        }
+      }
+    },
     "recursive-readdir": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
@@ -10857,6 +11225,11 @@
         "send": "0.17.2"
       }
     },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -10910,6 +11283,11 @@
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
     },
+    "smooth-dnd": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/smooth-dnd/-/smooth-dnd-0.12.1.tgz",
+      "integrity": "sha512-Dndj/MOG7VP83mvzfGCLGzV2HuK1lWachMtWl/Iuk6zV7noDycIBnflwaPuDzoaapEl3Pc4+ybJArkkx9sxPZg=="
+    },
     "sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -11297,6 +11675,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -11610,6 +11993,11 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "ua-parser-js": {
+      "version": "0.7.31",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
+      "integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ=="
+    },
     "unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",

package.json

@@ -6,19 +6,26 @@
   "dependencies": {
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.9.0",
     "@mui/styled-engine-sc": "^5.4.2",
     "@mui/styles": "^5.9.0",
+    "@pandemicode/material-ui-dropzone": "^3.5.5",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
+    "material-ui-dropzone": "^3.5.0",
+    "material-ui-icons": "^1.0.0-beta.36",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-dropzone": "^14.2.2",
     "react-material-ui-carousel": "^3.4.2",
     "react-redux": "^7.2.6",
     "react-router": "^6.2.1",
     "react-scripts": "5.0.0",
+    "react-smooth-dnd": "^0.11.1",
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.1",

src/components/AvaLoginBlock.js

@@ -13,19 +13,18 @@ const Nick = styled.div`
 
 `
 const AvatarNickWrapper = styled.div`
+  margin: 5px 10px;
+  cursor: pointer;
   display: flex`
 
 function AvaLoginBlock({user, closeModal, setActiveUserAllPosts, setUserDataAsync, activeUserPosts}) {
-    // console.log(user)
     const navigate = useNavigate();
 
     const name = user.owner?.login || user.login;
     const urlAva = user.owner?.avatar || user.avatar
 
     function chooseUser(user) {
-        // console.log(user)
         const userId = user.owner ? user.owner._id : user._id;
-        // console.log(userId)
         closeModal();
         setUserDataAsync(userId, false)
         navigate("/profile")

src/components/ChangeAvatarComponent.js

@@ -0,0 +1,107 @@
+import {DropzoneArea} from "material-ui-dropzone";
+import styled from 'styled-components';
+import {connect} from "react-redux";
+import {uploadFile} from "../shared/services&utilits/utilits";
+import {useState} from "react";
+import {gqlSetAvatar} from "../shared/services&utilits/gqlRequest";
+import {setActiveUserData, setOwnerData} from "../store/actionCreators/ActionCreators";
+import avatar from "../assets/img/avatarGolub.jpg"
+import {SendButton} from "../shared/styledComponents";
+
+const DropZone = styled.div`
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 45%;
+  margin-right: 7%;
+`
+
+const AvatarComponent = styled.div`
+  display: flex;
+  width: 70vw;
+  height: 70vh;
+`
+
+const AvatarImg = styled.img`
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+`
+
+const OldAvatar = styled.div`
+  width: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 50%;
+`
+
+const SaveButton = styled(SendButton)`
+    margin-top: 50px;
+`
+
+
+
+function ChangeAvatarComponent({ownerData, closeModal, setOwnerData, setActiveUserData}) {
+    const [avatarImagePreview, setAvatarImagePreview] = useState(ownerData && ownerData.avatar || null)
+
+
+    const loadFIle = async (file) => {
+        const img = await uploadFile(file);
+        setAvatarImagePreview(img)
+    }
+
+    const loadAvatar = async(files) => {
+        const newPreviewPicures = [];
+        await files.forEach((file => {
+            loadFIle(file, newPreviewPicures)
+        }))
+    }
+
+    const saveAvatar = async () => {
+        if (avatarImagePreview){
+            const responce = await gqlSetAvatar(avatarImagePreview._id,ownerData._id)
+            if (responce.ok) {
+                setOwnerData(null);
+                setActiveUserData(null);
+                closeModal();
+            }
+        }
+    }
+
+    return <AvatarComponent>
+        <OldAvatar>
+            <AvatarImg src={avatarImagePreview && avatarImagePreview.url || avatar}/>
+        </OldAvatar>
+        <DropZone>
+            <DropzoneArea
+                key={avatarImagePreview._id}
+                filesLimit={1}
+                showPreviews={false}
+                acceptedFiles={['image/*']}
+                dropzoneText={"Drag and drop new avatar here or click"}
+                onChange={(files) => loadAvatar(files)}
+                showPreviewsInDropzone={false}
+            />
+            <SaveButton onClick={saveAvatar}>Save</SaveButton>
+        </DropZone>
+    </AvatarComponent>
+}
+
+
+const mapStateToProps = (state) => {
+    return {
+        ownerData: state.ownerData,
+    }
+}
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setOwnerData: (user) => dispatch(setOwnerData(user)),
+        setActiveUserData: (user) => dispatch(setActiveUserData(user))
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChangeAvatarComponent);

src/components/Comment.js

@@ -1,24 +1,45 @@
 import AvaLoginBlock from "./AvaLoginBlock";
 import TimeOfCreation from "./TimeOfCreation";
 import styled from "styled-components";
+import {SpaceBetweenWrapper} from "../shared/styledComponents";
 
 const AnswerWrap = styled.div`
-  margin-left: 30px`
+  margin-left: 30px;
+  margin-top: 3px;
+  min-width: 100px;
+  overflow: auto;
+`
 
+const CommentBlockStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 100px;
+  overflow: auto;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
 
- const Comment = ({commentData, closeModal}) => {
+`
+const CommentText = styled.p`
+  word-wrap: break-word;
+  padding-right: 10px;
+`
+
+const Comment = ({commentData, closeModal}) => {
     return (
         <>
-            <AvaLoginBlock user={commentData.owner} closeModal={closeModal}
-                           styled={{height: "30px"}}/>
-            <p>{commentData.text}</p>
-            <TimeOfCreation createdTime={commentData.createdAt}/>
-            {commentData.answers &&
-            <AnswerWrap>
-                <p>OTVET</p>
-                {commentData.answers.map((item, i) => <Comment commentData={item} key={i}/>)}
-            </AnswerWrap>
-            }
+            <CommentBlockStyled>
+                <SpaceBetweenWrapper>
+                    <AvaLoginBlock user={commentData.owner} closeModal={closeModal}
+                                   styled={{height: "30px"}}/>
+                    <TimeOfCreation createdTime={commentData.createdAt}/>
+                </SpaceBetweenWrapper>
+                <CommentText>{commentData.text}</CommentText>
+
+                {commentData.answers &&
+                <AnswerWrap>
+                    {commentData.answers.map((item, i) => <Comment commentData={item} key={i}/>)}
+                </AnswerWrap>
+                }
+            </CommentBlockStyled>
         </>
     )
 }

src/components/CommentMessageBlock.js

@@ -1,27 +1,38 @@
 import {useState} from "react";
 import styled from "styled-components";
 import {gqlSendComment} from "../shared/services&utilits/gqlRequest";
+import {SendButton} from "../shared/styledComponents";
 
 
 const MessageWrapper = styled.div`
+  display: flex;
+  align-items: center;
+    width: 100%;
 `
 
+
+const TextArea = styled.textarea`
+  resize: none;
+  width: 60%;
+  height: 30%;
+`
 function CommentMessageBlock({postId,updatePostData}){
     const [textMessage, setTextMessage ] = useState("");
 
     function inputHandler(e){
         setTextMessage(e.target.value)
     }
-    async function sendMessage(){
-      await  gqlSendComment(postId,textMessage);
-        setTextMessage("");
-        updatePostData();
 
+    async function sendMessage(){
+            await  gqlSendComment(postId,textMessage);
+            setTextMessage("");
+            updatePostData();
     }
+
     return(
         <MessageWrapper>
-            <input onChange={inputHandler} value={textMessage}/>
-            <button onClick={sendMessage}>Send</button>
+            <TextArea onChange={inputHandler} value={textMessage}/>
+            <SendButton disabled={!textMessage.length} onClick={sendMessage}>Send</SendButton>
         </MessageWrapper>
 
     )

src/components/CommentsBlock.js

@@ -11,7 +11,7 @@ const CommentsBlockStyled = styled.div`
 
 function CommentsBlock({post, closeModal}) {
     return (<CommentsBlockStyled>
-            <div>комент</div>
+            <div>comments:</div>
             {post && post.comments &&
             <>
                 {post.comments.map((item, i) => <Comment closeModal={closeModal} commentData={item} key={i}/>)}

src/components/ImgBlock.js

@@ -17,7 +17,6 @@ const ImgBlock = ({images}) => {
                                                      backgroundPosition: "center" ,
                                                      backgroundSize: "contain",
                                                      backgroundRepeat: "no-repeat"}}
-
                     />)
                 }
                 </Carousel>

src/components/LikeBlock.js

@@ -8,11 +8,15 @@ import ModalWindow from "./ModalWindow";
 import UserList from "./UserList";
 
 const LikesWrapper = styled.div`
+  margin-left: 10px;
   display: flex;
   align-items: center;
+  cursor: pointer;
 `
 const TextStyled = styled.p`
-  margin-left: 10px`
+  margin-left: 10px;
+  `
+
 
 const UserListWrapper = styled.div`
   width: 30vw;

src/components/NewPost.js

@@ -0,0 +1,174 @@
+import {useState} from "react";
+import styled from 'styled-components';
+import {DropzoneArea} from 'material-ui-dropzone';
+import {applyDrag, uploadFile} from "../shared/services&utilits/utilits";
+import {gqlSendPost} from "../shared/services&utilits/gqlRequest";
+import {
+    setActiveUserAllPosts,
+    setActiveUserAllPostsAsync
+} from "../store/actionCreators/ActionCreators";
+import {connect} from "react-redux";
+import DeleteForeverSharpIcon from '@mui/icons-material/DeleteForeverSharp';
+import {Container, Draggable} from 'react-smooth-dnd';
+import {SendButton} from "../shared/styledComponents";
+
+const NewPostWrapper = styled.div`
+  width: 50vw;
+  height: 70vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+`
+const DropZOne = styled.div`
+    width:80%;
+`
+
+const Title = styled.div`
+    
+  font-weight: 700;
+`
+const TitleInput = styled.input`
+  margin-left: 20px;
+    width: 300px;
+`
+const ButtonBlock = styled.div`
+    
+`
+
+const CancelButton = styled(SendButton)`
+`
+const TextArea = styled.textarea`
+  resize: none;
+  width: 80%;
+  height: 20%;
+`
+const Preview = styled.div`
+  display: flex;
+`
+const PreviewImg = styled.img`
+  width: 120px;
+  height: 80px;
+`
+
+const ImageWrapper = styled.div`
+  position: relative;
+  width: 120px;
+  height: 80px;
+  margin: 5px;
+`
+
+function NewPost({closeModal, postData, loadedImages, setActiveUserAllPosts}) {
+
+    const [title, setTitle] = useState((postData && postData.title) || "");
+    const [description, setDescription] = useState((postData && postData.text) || "");
+    const [previewImages, setPreviewImages] = useState(loadedImages || []);
+
+
+    const sendHandler = async () => {
+        const responce = await gqlSendPost({
+            _id: (postData && postData._id) || "",
+            title: title,
+            text: description,
+            images: previewImages,
+        })
+
+        if (responce.ok) {
+            cancelHandler();
+            setActiveUserAllPosts(null)
+        }
+    }
+    const cancelHandler = () => {
+        setTitle("")
+        setDescription("")
+        closeModal()
+    }
+
+    const deleteImage = (e, index) => {
+        const filteredPreviewImages = previewImages.filter((img, i) => index !== i);
+        setPreviewImages(filteredPreviewImages);
+    }
+
+
+    const getPreviewImages = () => {
+        return previewImages.map((img, index) => {
+            return <Draggable key={index}>
+                <div className="draggable-item-horizontal">
+                    <ImageWrapper>
+                        <PreviewImg src={img.url}/>
+                        <DeleteForeverSharpIcon style={{color: "red", position: "absolute", top: "1px", right: "1px"}}
+                                                onClick={(e) => deleteImage(e, index)}/>
+                    </ImageWrapper>
+                </div>
+            </Draggable>
+        })
+    }
+
+    const loadFIle = async (file, newPreviewPicures) => {
+        const img = await uploadFile(file);
+        newPreviewPicures.push(img)
+        setPreviewImages([...previewImages, ...newPreviewPicures])
+    }
+
+    const saveFiles = async (files) => {
+        const newPreviewPicures = [];
+        await files.forEach((file => {
+            loadFIle(file, newPreviewPicures)
+        }))
+
+    }
+
+    return (
+        <NewPostWrapper>
+            <DropZOne>
+                <DropzoneArea
+                    key={previewImages.length}
+                    showPreviews={false}
+                    acceptedFiles={['image/*']}
+                    dropzoneText={"Drag and drop an image here or click"}
+                    onChange={(files) => saveFiles(files)}
+                    showPreviewsInDropzone={false}
+                />
+                <Preview>
+                    <Container groupName="1" orientation="horizontal"
+                               getChildPayload={i => previewImages[i]}
+                               onDrop={e => setPreviewImages(applyDrag(previewImages, e))}
+                    >
+                        {getPreviewImages()}
+                    </Container>
+
+                </Preview>
+            </DropZOne>
+            <Title> Title:
+                <TitleInput type={"text"} value={title} onChange={(e) => {
+                    setTitle(e.target.value)
+                }}/>
+            </Title>
+            Text:
+            <TextArea value={description} onChange={(e) => {
+                setDescription(e.target.value)
+            }} cols="30" rows="10"/>
+            <ButtonBlock>
+                <SendButton onClick={sendHandler}>Send</SendButton>
+                <CancelButton onClick={cancelHandler}>Cancel</CancelButton>
+            </ButtonBlock>
+        </NewPostWrapper>
+    )
+
+}
+
+const mapStateToProps = (state) => {
+    return {
+        id: state.auth.user.sub.id,
+
+    }
+}
+const mapDispatchToProps = (dispatch) => {
+    return {
+
+        setActiveUserAllPostsAsync: (id) => dispatch(setActiveUserAllPostsAsync(id)),
+        setActiveUserAllPosts: (id) => dispatch(setActiveUserAllPosts(id)),
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(NewPost);

src/components/OwnerHeader.js

@@ -1,7 +1,7 @@
 import {Avatar} from '@mui/material';
 import styled from 'styled-components';
 import {connect} from "react-redux";
-import {useEffect} from "react";
+import {useEffect, useState} from "react";
 import {
     changeAuthData,
     changeAuthDataAsync,
@@ -10,15 +10,28 @@ import {
 } from "../store/actionCreators/ActionCreators";
 import {useNavigate} from "react-router-dom";
 import avatar from "../assets/img/avatarGolub.jpg"
+import ModalWindow from "./ModalWindow";
+import NewPost from "./NewPost";
+import {HeaderButtons} from "../shared/styledComponents";
+
 
 const HeaderWrapper = styled.div`
+  padding: 2px 80px;
   display: flex;
   justify-content: space-evenly;
+  align-items: center;
   box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(41, 78, 255, 0);
 `
+const Logotip = styled.p`
+font-size: 30px;
+  margin: 0;
+color:grey;
+`
+
 
 const OwnerHeader = (props) => {
 
+    const [isModal, setisModal] = useState(false);
     const navigate = useNavigate();
 
     useEffect(() => {
@@ -38,23 +51,35 @@ const OwnerHeader = (props) => {
 
     }
 
-    const feedHandler=()=>{
+    const feedHandler = () => {
         navigate("/feed")
     }
-    const clickHandler=()=>{
+    const clickHandler = () => {
+        props.setUserDataAsync(props.id)
+        // props.setActiveUserData(props.ownerData);
         navigate("/profile")
-        // props.setUserDataAsync(props.id, true)
-        props.setActiveUserData(props.ownerData);
+    }
 
+    const toogleModal = () => {
+        setisModal(!isModal);
     }
+
+
     return (
         <HeaderWrapper>
-            <button onClick={logout}>Logout</button>
-            <p>HIPSTARGAM</p>
-            <button onClick={feedHandler}>Feed</button>
 
-            <p>Hello</p>
-            <Avatar onClick={clickHandler} src={props.ownerData && props.ownerData.avatar ? props.ownerData.avatar.url : avatar} alt={"avatar"} sx={{border:"1px solid grey"}}/>
+            <Logotip>=HIPSTARGAM=</Logotip>
+            <HeaderButtons onClick={feedHandler}>Feed</HeaderButtons>
+
+            <HeaderButtons onClick={toogleModal}>+ post</HeaderButtons>
+            <Avatar onClick={clickHandler}
+                    src={props.ownerData && props.ownerData.avatar ? props.ownerData.avatar.url : avatar} alt={"avatar"}
+                    sx={{border: "1px solid grey", cursor: "pointer" }}/>
+            <HeaderButtons onClick={logout}>Logout</HeaderButtons>
+            {isModal && <ModalWindow closeModal={toogleModal}>
+                <NewPost closeModal={toogleModal}/>
+            </ModalWindow>
+            }
         </HeaderWrapper>
     )
 };

src/components/Post.js

@@ -4,6 +4,11 @@ import CommentsBlock from "./CommentsBlock";
 import LikeBlock from "./LikeBlock";
 import CommentMessageBlock from "./CommentMessageBlock";
 import styled from "styled-components";
+import {connect} from "react-redux";
+import {useState} from "react";
+import ModalWindow from "./ModalWindow";
+import NewPost from "./NewPost";
+import {EditPostButton, SpaceBetweenWrapper} from "../shared/styledComponents";
 
 const AvaLoginWrap = styled.div`
   display: flex;
@@ -15,6 +20,7 @@ const DescriptionPostWrapper = styled.div`
   height: fit-content;
   width: 100%;
   box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
+  padding-bottom: 5px;
 `
 const InfoBlockInModalWrapper = styled.div`
   width: 50%;
@@ -34,21 +40,35 @@ const PicsInModalWrapper = styled.div`
   box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
 `
 
-function Post({postData, updatePostData ,closeModal}) {
-console.log(postData.owner)
+
+function Post({postData, updatePostData, closeModal, id}) {
+    const [isModal, setIsModal] = useState(false);
+    console.log(postData.images)
+
+    function toogleModalWindow() {
+        setIsModal(!isModal)
+    }
+
+    function editPostHandler() {
+        toogleModalWindow();
+    }
 
     return (<>
             <PicsInModalWrapper>
                 <ImgBlock images={postData.images}/>
             </PicsInModalWrapper>
             <InfoBlockInModalWrapper>
+                <SpaceBetweenWrapper>
+                    <AvaLoginWrap>
+                        <AvaLoginBlock closeModal={closeModal} user={postData.owner}/>
+                    </AvaLoginWrap>
+                    {postData.owner._id === id && <EditPostButton onClick={editPostHandler}>Edit Post</EditPostButton>}
+                </SpaceBetweenWrapper>
 
-                <AvaLoginWrap>
-                    <AvaLoginBlock closeModal={closeModal} user={postData.owner}/>
-                </AvaLoginWrap>
                 <DescriptionPostWrapper>
                     <Title>Title:{postData.title}</Title>
                     <Text>{postData.text}</Text>
+
                 </DescriptionPostWrapper>
                 <CommentsBlock post={postData} closeModal={closeModal}/>
                 {postData.likes &&
@@ -56,9 +76,17 @@ console.log(postData.owner)
                 }
                 <CommentMessageBlock postId={postData._id} updatePostData={updatePostData}/>
             </InfoBlockInModalWrapper>
+            {isModal && <ModalWindow closeModal={toogleModalWindow}>
+                <NewPost postData={postData} loadedImages={postData.images}/>
+            </ModalWindow>}
         </>
 
     )
 }
 
-export default Post;
+const mapStateToProps = (state) => {
+    return {
+        id: state.auth.user.sub.id,
+    }
+}
+export default connect(mapStateToProps)(Post);

src/components/PostFeed.js

@@ -7,10 +7,14 @@ import LikeBlock from "./LikeBlock";
 import TimeOfCreation from "./TimeOfCreation";
 import ModalWindow from "./ModalWindow";
 import Post from "./Post";
+import {SpaceBetweenWrapper, StyledButton} from "../shared/styledComponents";
 
 const Title = styled.p`
+    margin-left: 20px;
+  font-weight: 700;
 `
 const Text = styled.p`
+  margin-left: 20px;
 `
 const ImgWrapper = styled.div`
   width: 100%;
@@ -18,10 +22,7 @@ const ImgWrapper = styled.div`
   display: flex;
   align-items: center;
 `
-const LikeWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-`
+
 const InnerModalWrapper = styled.div`
   width: 60vw;
   height: 80vh;
@@ -52,19 +53,20 @@ function PostFeed({post}) {
             {post && postFeedData && <>
                 <AvaLoginBlock user={postFeedData.owner}
                                closeModal={toggleModalWindow}/>
-
                 <ImgWrapper>
                     <ImgBlock images={post.images}/>
                 </ImgWrapper>
-                <LikeWrapper>
+                <SpaceBetweenWrapper>
                     <LikeBlock likes={postFeedData.likes} postId={postFeedData._id} updatePostData={updPostData}/>
                     <TimeOfCreation createdTime={postFeedData.createdAt}/>
-                </LikeWrapper>
-                <Title>{postFeedData.title}</Title>
-                <Text>{postFeedData.text}</Text>
-                <button onClick={toggleModalWindow}>Show all comments
+                </SpaceBetweenWrapper>
+
+                <Title>Title: {postFeedData.title}</Title>
+                <Text>Text: {postFeedData.text}</Text>
+
+                <StyledButton onClick={toggleModalWindow}>Show all comments
                     ({postFeedData.comments && postFeedData.comments.length || 0})
-                </button>
+                </StyledButton>
                 {isModal &&
                 <ModalWindow closeModal={toggleModalWindow}>
                     <InnerModalWrapper>

src/components/PostPreview.js

@@ -14,6 +14,7 @@ const PostWrapper = styled.div`
   max-width: 300px;
   margin: 15px;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
+  cursor: pointer;
 `
 const LogoManyImg = styled.div`
   position: absolute;

src/components/SubscribeButton.js

@@ -1,11 +1,14 @@
 import {connect} from "react-redux";
 import {useEffect, useState} from "react";
-import {gqlSubscribe, gqlUnSubscribe} from "../shared/services&utilits/gqlRequest";
+import {gqlGetUserFollowers, gqlSubscribe, gqlUnSubscribe} from "../shared/services&utilits/gqlRequest";
+import {
+    setActiveUserData,
+} from "../store/actionCreators/ActionCreators";
 
 
-function SubscribeButton({followers, id, activeUserId}){
+function SubscribeButton({followers, id, activeUser, setActiveUserData, ownerData}){
     const [isSabscribed, setIsSabscribed] = useState(isAlreadySubscribed())
-
+    console.log(followers)
     useEffect(()=>{
         if (isAlreadySubscribed() && !isSabscribed){
             setIsSabscribed(true)
@@ -21,20 +24,34 @@ function SubscribeButton({followers, id, activeUserId}){
 
     function clickHandler(){
         if (!isSabscribed){
-            gqlSubscribe(id, activeUserId, followers)
+            gqlSubscribe(id, activeUser._id, []).then((res)=> res.ok && updateUserFollowers())
         } else {
-            gqlUnSubscribe(id, [])
+            gqlUnSubscribe(id, []).then((res)=> res.ok && updateUserFollowers())
+        }
+    }
+    async function updateUserFollowers(){
+        const a= await gqlGetUserFollowers(activeUser._id)
+        const res = await a.json()
+        if (res){
+            activeUser.followers = await  res.data.UserFindOne.followers;
+            console.log(activeUser)
+            setActiveUserData(activeUser);
         }
     }
-
-    console.log(isAlreadySubscribed())
 
     return <button onClick={clickHandler}>{isSabscribed ? "unsabscribe" : "sabscribe"}</button>
 }
 const mapStateToProps = (state) => {
     return {
         id: state.auth.user.sub.id,
-        activeUserId: state.activeUser._id,
+        ownerData: state.ownerData,
+        activeUser: state.activeUser,
     }
 }
-export default connect(mapStateToProps)(SubscribeButton)
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setActiveUserData: (user) => dispatch(setActiveUserData(user))
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SubscribeButton)

src/components/UserContent.js

@@ -12,6 +12,9 @@ import UserInfoBlock from "./UserInfoBlock";
 import ModalWindow from "./ModalWindow";
 import UserList from "./UserList";
 import SubscribeButton from "./SubscribeButton";
+import ChangeAvatarComponent from "./ChangeAvatarComponent";
+import TimeOfCreation from "./TimeOfCreation";
+import {EditPostButton, HeaderButtons, StyledButtonsShadow} from "../shared/styledComponents";
 
 
 const UserContentWrapper = styled.div`
@@ -46,6 +49,7 @@ const UserInfoBlockWrapper = styled.div`
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  margin-bottom: 20px;
 `
 const AvatarWrapper = styled.div`
   width: 100px;
@@ -61,68 +65,80 @@ const UserListWrapper = styled.div`
   height: 50vh;
   display: flex;
 `
-
-const tempUser = "62c1cc5e4535fc62e2a185ad"; // test - should be deleted
+const InfoBlockWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`
 
 
 function UserContent(props) {
     const [isModal, setModal] = useState(false);
     const [userList, setUserList] = useState("");
+    const [isModalAvatar, setisModalAvatar] = useState(false);
 
-    // console.log(props.activeUser?._id === props.id)
+    console.log(props.activeUser && props.activeUser)
     useEffect(() => {
         if (!props.activeUser) {
             props.setUserDataAsync(props.id)
         }
         if (props.activeUser && props.activeUserPosts === null) {
-            // props.setActiveUserAllPostsAsync(tempUser);
-
             props.setActiveUserAllPostsAsync(props.activeUser._id)
         }
     })
 
-    useEffect(()=>{
-        if(props.activeUserPosts && props.activeUserPosts[0] && props.activeUserPosts[0].owner && props.activeUser && props.activeUserPosts[0].owner._id !== props.activeUser._id ){
+    useEffect(() => {
+        if (props.activeUserPosts && props.activeUserPosts[0] && props.activeUserPosts[0].owner && props.activeUser && props.activeUserPosts[0].owner._id !== props.activeUser._id) {
             // console.log("2 useEffect")
             props.setActiveUserAllPosts(null)
         }
     })
 
-    // console.log(props.activeUserPosts)
-
     function toggleModalWindow(userList) {
         setModal(!isModal)
-
         setUserList(userList)
-        // console.log(props.activeUser.followers)
     }
-// console.log(props.activeUser?.followers)
+
+    function toggleAvatarModalWindow() {
+        setisModalAvatar(!isModalAvatar)
+    }
+
+    console.log(props.activeUser)
     return (
         <>
             {props.activeUser && <UserContentWrapper>
                 <UserInfoWrapper>
                     <AvatarBlock>
                         <AvatarWrapper>
-                            <img style={{height: "100%"}}
+                            <img style={{width: "100%"}}
                                  src={props.activeUser && props.activeUser.avatar ? props.activeUser.avatar.url : avatar}
                                  alt={"avatar"}/>
                         </AvatarWrapper>
                         <h2>{props.activeUser.login}</h2>
-                    </AvatarBlock>
-                    <UserInfoBlockWrapper>
-                        <UserInfoBlock count={props.activeUserPosts?.length} description={"posts"}/>
-                        <div onClick={()=>toggleModalWindow( props.activeUser.followers)}>
-                            <UserInfoBlock count={props.activeUser.followers?.length} description={"followers"}/>
-                        </div>
-                        <div onClick={()=>toggleModalWindow( props.activeUser.following)}>
-                            <UserInfoBlock count={props.activeUser.following?.length} description={"followings"}/>
-                        </div>
-                    </UserInfoBlockWrapper>
-
-
-                    {props.activeUser?._id === props.id && <button>fix profile</button> || <SubscribeButton followers={props.activeUser?.followers}/>}
+                        {/*<p>{props.activeUser.nick}</p>*/}
+                        <p>Account was created: </p>
+                        <TimeOfCreation createdTime={props.activeUser.createdAt}/>
 
 
+                    </AvatarBlock>
+                    <InfoBlockWrapper>
+                        <UserInfoBlockWrapper>
+                            <UserInfoBlock count={props.activeUserPosts?.length} description={"posts"}/>
+                            <div onClick={() => toggleModalWindow(props.activeUser.followers)}>
+                                <UserInfoBlock count={props.activeUser.followers?.length} description={"followers"}/>
+                            </div>
+                            <div onClick={() => toggleModalWindow(props.activeUser.following)}>
+                                <UserInfoBlock count={props.activeUser.following?.length} description={"followings"}/>
+                            </div>
+                        </UserInfoBlockWrapper>
+                        {(props.activeUser?._id === props.id) &&
+                        <EditPostButton onClick={toggleAvatarModalWindow}>fix profile</EditPostButton> ||
+                        <SubscribeButton followers={props.activeUser?.followers}/>}
+                    </InfoBlockWrapper>
+                    {isModalAvatar && <ModalWindow closeModal={toggleAvatarModalWindow}>
+                        <ChangeAvatarComponent closeModal={toggleAvatarModalWindow}/>
+                    </ModalWindow>}
                 </UserInfoWrapper>
 
                 {props.activeUserPosts &&
@@ -140,7 +156,7 @@ function UserContent(props) {
             }
         </>
     )
-}
+};
 
 
 const mapStateToProps = (state) => {
@@ -159,4 +175,4 @@ const mapDispatchToProps = (dispatch) => {
     }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(UserContent);
+export default connect(mapStateToProps, mapDispatchToProps, null, {pure: false})(UserContent);

src/components/UserInfoBlock.js

@@ -1,17 +1,25 @@
 import styled from "styled-components";
 
+
 const UserInfoBlockStyled = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 0 40px;
+  margin: 0 20px;
   flex-direction: column;
+  min-width: 100px;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+  cursor: pointer;
 `
 
+
+
 const UserInfoBlock = ({count, description}) => {
     return (<UserInfoBlockStyled>
+
         <p>{count ? count : 0}</p>
         <p>{description}</p>
+
     </UserInfoBlockStyled>)
 }
 export default UserInfoBlock;

src/components/UserList.js

@@ -8,7 +8,7 @@ const UserListWrapper = styled.div`
   width: 100%;
 `
 const EveryUserWrapper = styled.div`
-  margin: 20px 0 0 30px;
+  //margin: 20px 0 0 30px;
 `
 
 function UserList({users, closeModal}) {

src/index.js

@@ -7,9 +7,7 @@ import store from "./store/store";
 
 ReactDOM.render(
     <Provider store={store}>
-        <React.StrictMode>
             <App/>
-        </React.StrictMode>
     </Provider>,
     document.getElementById('root')
 );

src/shared/services&utilits/gqlRequest.js

@@ -12,18 +12,8 @@ const getGQL = (url) => (query, variables) => {
         body: JSON.stringify({query, variables}),
     })
         .then((res) => {
-            // console.log(res)
-            // return res.json()
             return res;
         })
-    // .then((data) => {
-    //     console.log(data)
-    //     if (data.data) {
-    //         console.log(data.data) //token
-    //
-    //         return Object.values(data.data)[0];
-    //     } else throw new Error(JSON.stringify(data.errors));
-    // });
 }
 
 // const backendURL = 'http://hipstagram.asmer.fs.a-level.com.ua'
@@ -206,4 +196,37 @@ export const gqlUnSubscribe = (my_Id, oldFollowing) =>
                 following: oldFollowing || [],
             },
         },
+    )
+
+export const gqlGetUserFollowers = (_id) =>
+    gql(` query followers($id:String!){
+        UserFindOne(query: $id){
+                            followers {_id nick login}
+        }
+    }`, {id: JSON.stringify([{_id}])})
+
+export const gqlSendPost = (post, postId) =>
+    gql(`mutation PostUpsert($post:PostInput){
+  PostUpsert(post:$post){
+    _id title text images{_id url}
+  }
+}`,
+        {
+            post: {
+                ...post,
+                _id: postId,
+                images: post.images.map(({_id}) => ({_id})),
+            },
+        },
+    )
+export const gqlSetAvatar = (imageId, _id) =>
+    gql(
+        `mutation setAvatar($imageId:ID, $userId:String){
+    UserUpsert(user:{_id: $userId, avatar: {_id: $imageId}}){
+    _id, avatar{
+        _id
+    }
+    }
+    }`,
+        {imageId, userId: _id},
     )

src/shared/services&utilits/utilits.js

@@ -3,4 +3,34 @@ export const jwtDecode = (token) => {
         const user = JSON.parse(atob(token.split(".")[1]));
         return user;
     } catch (e) {}
+};
+
+export const uploadFile = (file) => {
+    const myForm = new FormData()
+    myForm.append('photo', file)
+    return fetch('/upload', {
+        method: 'POST',
+        headers: localStorage.authToken
+            ? { Authorization: 'Bearer ' + localStorage.authToken }
+            : {},
+        body: myForm,
+    }).then((result) => result.json())
+}
+
+export const applyDrag = (arr, dragResult) => {
+    const { removedIndex, addedIndex, payload } = dragResult;
+    if (removedIndex === null && addedIndex === null) return arr;
+
+    const result = [...arr];
+    let itemToAdd = payload;
+
+    if (removedIndex !== null) {
+        itemToAdd = result.splice(removedIndex, 1)[0];
+    }
+
+    if (addedIndex !== null) {
+        result.splice(addedIndex, 0, itemToAdd);
+    }
+
+    return result;
 };

src/shared/styledComponents.js

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+
+export const HeaderButtons = styled.button`
+  width: 80px;
+  height: 35px;
+  border: none;
+  margin-bottom: 5px;
+  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
+  cursor: pointer;
+`
+export const EditPostButton  = styled.button`
+  margin-top: 30px;
+  width: 100px;
+  height: 30px;
+  border: none;
+  margin-bottom: 5px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+  cursor: pointer;
+`
+export const SpaceBetweenWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px 0 0;
+`
+export const SendButton  = styled.button`
+  width: 100px;
+  height: 36px;
+  border: none;
+  margin-left: 15px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+  cursor: pointer;
+`
+export const StyledButton  = styled.button`
+  width: 100%;
+  height: 30px;
+  border: none;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+  cursor: pointer;
+`

src/store/actionCreators/ActionCreators.js

@@ -4,7 +4,7 @@ import {jwtDecode} from "../../shared/services&utilits/utilits";
 // async actions
 
 export const changeAuthDataAsync = ({login, password, authType, navigateCallback}) => {
-     return async (dispatch) => {
+    return async (dispatch) => {
         let response = ""
         if (authType === "signUp") {
             response = await gqlRegistration(login, password)
@@ -31,7 +31,7 @@ export const changeAuthDataAsync = ({login, password, authType, navigateCallback
             const responseData = await response.json();
             console.log(responseData)
             const token = responseData.data.login;
-            if (jwtDecode(token)){
+            if (jwtDecode(token)) {
                 localStorage.authToken = token
             }
 
@@ -50,29 +50,31 @@ export const setUserDataAsync = (id, isOwner) => {
 
     return async (dispatch) => {
         let response = ""
-            response = await gqlAboutUser(id)
+        response = await gqlAboutUser(id)
 
-            if (!response.ok) {
-                dispatch(setError("No user data received"))
-            }
-            const responseData = await response.json();
-            if(isOwner){
-                dispatch(setOwnerData(responseData.data.UserFindOne))
-            }else{
-                dispatch(setActiveUserData(responseData.data.UserFindOne))
-            }
+        if (!response.ok) {
+            dispatch(setError("No user data received"))
+        }
+        const responseData = await response.json();
+        console.log(responseData)
+        if (isOwner) {
+            console.log(responseData)
+            dispatch(setOwnerData(responseData.data.UserFindOne))
+        } else {
+            console.log(responseData)
+            dispatch(setActiveUserData(responseData.data.UserFindOne))
         }
+    }
 };
 
-export const setActiveUserAllPostsAsync = (id)=>{
-    return async(dispatch)=>{
+export const setActiveUserAllPostsAsync = (id) => {
+    return async (dispatch) => {
         let response = ""
         response = await gqlAllPosts(id)
 
         if (!response.ok) {
             dispatch(setError("No user data received"))
         }
-
         const responseData = await response.json();
         dispatch(setActiveUserAllPosts(responseData.data.PostFind))
         // console.log(responseData.data.PostFind)
@@ -92,16 +94,16 @@ export const setError = error => ({
     payload: error
 })
 
-export const setActiveUserData =(data)=>({
+export const setActiveUserData = (data) => ({
     type: "SET_ACTIVE_USER_DATA",
     payload: data,
-} )
-export const setOwnerData =(data)=>({
+})
+export const setOwnerData = (data) => ({
     type: "SET_OWNER_DATA",
     payload: data,
-} )
+})
 
-export const setActiveUserAllPosts =(data)=>({
+export const setActiveUserAllPosts = (data) => ({
     type: "SET_ACTIVE_USER_ALL_POSTS",
     payload: data,
 })

src/store/rootReducer.js

@@ -38,6 +38,7 @@ const rootReducer = (state = initialState, action) => {
                 activeUserPosts: action.payload
             }
         case "SET_OWNER_DATA":
+            console.log(action.payload)
             return{
                 ...state, ownerData: action.payload,
             }