add live search +userPage

package-lock.json

@@ -20,6 +20,7 @@
         "react-redux": "^7.2.6",
         "react-router-dom": "^5.3.0",
         "react-scripts": "5.0.0",
+        "react-select": "^5.2.2",
         "react-sortable-hoc": "^2.0.0",
         "redux": "^4.1.2",
         "redux-thunk": "^2.4.1",
@@ -1925,6 +1926,86 @@
         "postcss": "^8.3"
       }
     },
+    "node_modules/@emotion/cache": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "4.0.13"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.7.1.tgz",
+      "integrity": "sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/cache": "^11.7.1",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "dependencies": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz",
@@ -3615,6 +3696,14 @@
         "redux": "^4.0.0"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
+      "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -6417,6 +6506,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
@@ -11464,6 +11562,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/meow": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
@@ -14334,6 +14437,24 @@
         }
       }
     },
+    "node_modules/react-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.2.2.tgz",
+      "integrity": "sha512-miGS2rT1XbFNjduMZT+V73xbJEeMzVkJOz727F6MeAr2hKE0uUSA8Ff7vD44H32x2PD3SRB6OXTY/L+fTV3z9w==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.1.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-sortable-hoc": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-2.0.0.tgz",
@@ -14349,6 +14470,21 @@
         "react-dom": "^16.3.0 || ^17.0.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -15832,6 +15968,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -18947,6 +19088,74 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "@emotion/cache": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "4.0.13"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "@emotion/react": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.7.1.tgz",
+      "integrity": "sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/cache": "^11.7.1",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@eslint/eslintrc": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz",
@@ -20193,6 +20402,14 @@
         "redux": "^4.0.0"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
+      "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -22283,6 +22500,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
@@ -25956,6 +26182,11 @@
         "fs-monkey": "1.0.3"
       }
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "meow": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
@@ -27921,6 +28152,20 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.2.2.tgz",
+      "integrity": "sha512-miGS2rT1XbFNjduMZT+V73xbJEeMzVkJOz727F6MeAr2hKE0uUSA8Ff7vD44H32x2PD3SRB6OXTY/L+fTV3z9w==",
+      "requires": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.1.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0"
+      }
+    },
     "react-sortable-hoc": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-2.0.0.tgz",
@@ -27931,6 +28176,17 @@
         "prop-types": "^15.5.7"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -29058,6 +29314,11 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
+    "stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
+    "react-select": "^5.2.2",
     "react-sortable-hoc": "^2.0.0",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",

src/App.js

@@ -1,6 +1,6 @@
 
 import './App.scss';
-import Header from './components/Header';
+import Header from './components/Header/Header';
 import CMain from './components/MainPage/Main';
 import CLoginForm from './components/LoginPage/Login';
 import CRegister from './components/RegisterPage/Register';
@@ -31,6 +31,8 @@ function App() {
         <Route exact path="/createpost" component={CMain}/>
         <Route exact path="/settings" component={Header}/>
         <Route exact path="/settings" component={CMain}/>
+        <Route exact path="/user/:id" component={Header}/>
+        <Route exact path="/user/:id" component={CMain}/>
     </div>
     </Switch>
     </Provider>

src/App.scss

@@ -8,4 +8,9 @@
 
 .LoginButton {
     @apply  relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-fuchsia-600 hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-fuchsia-500 #{!important};
+}
+
+
+.SearchInput {
+    @apply  appearance-none rounded-full relative block p-4 h-5 w-full border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-fuchsia-500 focus:border-fuchsia-500 sm:text-xs  lg:text-lg #{!important};
 }

src/actions/index.js

@@ -14,7 +14,7 @@ const getGQL = url =>
         else throw new Error(JSON.stringify(data.errors))
     })
 
-const backendURL = 'http://hipstagram.asmer.fs.a-level.com.ua';
+export const backendURL = 'http://hipstagram.asmer.fs.a-level.com.ua';
 
 const gql = getGQL(backendURL + '/graphql');
 
@@ -99,7 +99,7 @@ export const actionUploadFile = file =>
   actionPromise('fileUpload', uploadFile(file));
 
 export const actionUploadFiles = files =>
-    Promise.all(files.map(file => uploadFile(file)))
+   actionPromise('filesUpload',Promise.all(files.map(file => uploadFile(file))))
 
 export const actionAvatar = (userrId, fileeId) => 
   actionPromise("userAvatar", gql(`mutation setAvatar($userId: String, $fileId: ID){
@@ -112,7 +112,7 @@ export const actionAvatar = (userrId, fileeId) =>
       fileId: fileeId}))
 
 export const actionAboutMe = (_id) => 
-        actionPromise("userInfo", gql(`query AboutMe ($Id: String){
+        actionPromise("aboutMe", gql(`query AboutMe ($Id: String){
             UserFindOne(query:$Id){
               _id,nick, avatar{
                 url
@@ -125,6 +125,20 @@ export const actionAboutMe = (_id) =>
               Id: JSON.stringify([{_id}])
           }))
 
+export const actionAboutUser = (_id) =>
+        actionPromise("aboutUser", gql(`query AboutUser ($Id: String){
+          UserFindOne(query:$Id){
+            _id,nick, avatar{
+              url
+            },
+            following{
+              _id
+            }
+          }
+        }`,{
+            Id: JSON.stringify([{_id}])
+        }))          
+
 export const actionSetAvatar = file => 
           async(dispatch, getState) => {
              await dispatch(actionUploadFile(file))
@@ -148,4 +162,11 @@ export const actionFindUser = nick =>
                 url
               }
             }
-          }`, {query:nick}))          
+          }`, {query: JSON.stringify([
+            {
+              $or: [{nick:`/${nick}/`}]
+            },
+            {
+              sort:[{nick:1}]
+            }
+          ])}))          

src/components/Header.js

@@ -2,8 +2,9 @@ import {IoHome, IoPaperPlane} from "react-icons/io5";
 import {IoIosAddCircle, IoIosHeart} from "react-icons/io";
 import {Link} from "react-router-dom"
 import { useState } from "react";
-import { actionAuthLogout } from "../actions";
+import { actionAuthLogout } from "../../actions";
 import { connect } from "react-redux";
+import CSearchInput from "./SearchInput";
 
 
 const LogOutButton = ({onClick})=> {
@@ -27,18 +28,18 @@ const defaultUserInfo = {
         </div>
     )
 } */
-const UserBlock = ({userInfo = defaultUserInfo}) => {
+const UserBlock = ({aboutMe = defaultUserInfo}) => {
     const [isOpen, setIsOpen] = useState(false);
-    console.log(userInfo)
+    console.log(aboutMe)
     return(
         <div className="relative inline-block text-left">
                         <button onClick={() => setIsOpen(!isOpen)}>
-                            {userInfo.nick ? userInfo.nick : "something"}
+                            {aboutMe.nick ? aboutMe.nick : "something"}
                         </button>
                     {isOpen && <div className="origin-top-right absolute right-0 mt-2 w-36 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none flex justify-center">
                         <div className="py-1 w-full text-center">
                             <div className="text-gray-700   hover:bg-fuchsia-700 hover:rounded-md hover:text-white">
-                            <Link to={`/user/${userInfo._id}`} className="block px-4 py-2 text-sm">
+                            <Link to={`/user/${aboutMe._id}`} className="block px-4 py-2 text-sm">
                             Account
                     </Link>
                             </div>
@@ -55,14 +56,14 @@ const UserBlock = ({userInfo = defaultUserInfo}) => {
     )
 }
 
-const CUserBlock = connect(state => ({userInfo: state.promise?.userInfo?.payload || []}))(UserBlock)
+const CUserBlock = connect(state => ({aboutMe: state.promise?.aboutMe?.payload || []}))(UserBlock)
 
 
 const Header =  ({}) => {
     return(
         <nav className="flex mx-auto px-4 justify-between p-6 xl:container xls:mx-auto dark:bg-slate-900 dark:text-white">
             {/* left */}
-            <div className="LogoBar flex items-center space-x-2 w-1/4">
+            <div className="flex items-center space-x-2 w-1/4">
                 <div>
                     <a>
                        <img src={'/src/img/logo.svg'} alt="logo"/> 
@@ -70,11 +71,11 @@ const Header =  ({}) => {
                 </div>
             </div>
             {/* middle */}
-            <div className="SearchBar  w-1/2 sm:w-1/2  md:w-1/5 lg:w-1/4 xl:w-1/3">
-                <input  className="rounded-full outline-none p-4 h-5 w-full text-grey bg-[#3A3B3C] sm:text-xs md:text-md lg:text-lg" type="text" placeholder="search"/>
+            <div className="w-1/2 sm:w-1/2  md:w-1/5 lg:w-1/4 xl:w-1/3">
+               <CSearchInput/>
             </div>
             {/* right */}
-            <div className="NavigationBar  flex justify-between  pl-2 w-2/5 items-center sm:w-1/2 sm:text-xs md:text-sm md:flex md:justify-between md:w-1/3 ">
+            <div className="flex justify-between  pl-2 w-2/5 items-center sm:w-1/2 sm:text-xs md:text-sm md:flex md:justify-between md:w-1/3 ">
                 <div  className="group">
                      <div className="group-hover:bg-slate-800 group-hover:text-white group-hover:rounded-full" >
                     <Link to="/"><IoHome/></Link>

src/components/Header/SearchInput.js

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import { actionFindUser, backendURL } from "../../actions";
+import AsyncSelect from 'react-select/async';
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+
+
+
+const formatOptionLabel = ({value,label,avatar}) => {
+    return(
+        <div className="flex">
+
+            <img src={avatar ?`${backendURL}/${avatar.url}`: ""} alt="avatar" className="rounded-full w-36 h-36"/>
+            <Link to={`/user/${value}`}>{label}</Link>
+        </div>
+    )
+}
+
+const SearchInput = ({onSearch}) => {
+   
+    
+
+   const promiseOptions = (inputValue) =>
+        onSearch(inputValue).then(users => users.map(user =>({value: user._id, label:user.nick,avatar:user.avatar})))        
+        /* promise.then(res => filterUsers(res)); */
+
+   
+    return(
+        <>
+        {/* <input  className="SearchInput" type="text" placeholder="search" onChange={event => setSearchTerm(event.target.value)}/>  
+        <CSearchResults/> */}
+        <AsyncSelect
+            /* className="SearchInput" */
+            loadOptions={promiseOptions}
+            formatOptionLabel={formatOptionLabel}
+        />
+        </>
+    )
+}
+
+const CSearchInput = connect(null,{onSearch: actionFindUser})(SearchInput)
+
+export default CSearchInput;

src/components/UserPage/User.js

@@ -1,7 +1,20 @@
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { useParams } from "react-router-dom";
+import { actionAboutUser } from "../../actions";
+import CUserItem from "./UserItem";
+
 const User = () => {
+
+    const params = useParams();
+    const id = params.id
+    const dispatch = useDispatch()
+useEffect(() => {
+    dispatch(actionAboutUser(id))
+},[id])
     return(
         <div>
-            User
+            <CUserItem/>            
         </div>
     )
 }

src/components/UserPage/UserItem.js

@@ -0,0 +1,20 @@
+import { connect } from "react-redux"
+import { backendURL } from "../../actions"
+
+
+const UserItem = ({aboutUser = {}}) =>{
+        console.log(aboutUser);
+    return(
+        <div className="flex">
+            <div>
+            <img src={`${backendURL}/${aboutUser.avatar.url}`} alt="avatar" className="h-60 w-60 rounded-full"/>
+            </div>
+            
+            <h2>{aboutUser.nick}</h2>
+        </div>
+    )
+}
+
+const CUserItem = connect(state=>({aboutUser: state.promise?.aboutUser?.payload || {}}))(UserItem)
+
+export default CUserItem;