added users search by login

src/App.scss

@@ -63,15 +63,41 @@ select {
         display: block;
         padding: 0 10px;
     }
-}
-.UserNav {
-    img {
-        width: 50px;
-        border-radius: 50%;
-        overflow: hidden;
-        border: 1px solid #000;
+    &__search-link {
+        display: flex;
+        align-items: center;
+        padding: 5px 20px;
+        transition: all 0.3s;
+        strong {
+            padding-left: 15px;
+            color: #000;
+        }
+        &:hover {
+            background-color: #0057ff1f;
+        }
     }
+    &__userNav {
+        div {
+            padding-left: 20px;
+        }
+    }
+}
+.ant-popover-inner-content {
+    max-width: 500px;
+    min-width: 320px;
+    max-height: 500px;
+    padding: 16px 0;
+    overflow: auto;
 }
+// .UserNav {
+//     img {
+//         width: 50px;
+//         border-radius: 50%;
+//         overflow: hidden;
+//         border: 1px solid #000;
+//     }
+// }
+
 .Authorization {
     height: 100%;
     background-position: right top;
@@ -100,19 +126,22 @@ select {
         margin-bottom: 0;
     }
 }
+
 .ant-layout-header {
     height: 58px;
     line-height: 58px;
-    padding: 0 10px;
+    padding: 0 20px;
     background-color: #fff;
     box-shadow: 0 0 9px 5px rgba($color: #001529, $alpha: 0.4);
 }
+
 .Main {
     padding-top: 58px;
     &__inner {
         padding-top: 15px;
     }
 }
+
 .Post {
     padding: 10px 0;
     position: relative;
@@ -199,7 +228,7 @@ select {
         }
     }
     &__send-comment {
-        button{
+        button {
             border: none;
             box-shadow: none;
         }

src/actions/index.js

@@ -37,6 +37,24 @@ export const actionProfilData = (_id) =>
                   }
                 }`, { id: JSON.stringify([{ ___owner: _id }]) }))
 
+//****************---Action FindUsers ---*************************//
+
+export const actionFindUsers = (value) =>
+    actionPromise('findUsersAll', gql(`query findUsersAll($query:String!) {
+                                UserFind(query: $query) {
+                                    _id login nick 
+                                    avatar { _id url } 
+                                }
+    }`, {
+        query: JSON.stringify([{
+            $or: [{ nick: `/${value}/` }, { login: `/${value}/` }]
+        },
+        {
+            sort: [{ login: 1 }]
+        },
+            ,])
+    }))
+
 //****************---Action Like ---*************************//
 
 export const actionRemoveLikePost = (_id) =>

src/components/header/Header.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import logo from '../../logo.svg';
 import { Link } from 'react-router-dom';
-import { Searcha } from './Search';
+import { CFieldSearch, Searcha } from './Search';
 import { connect } from 'react-redux';
 import { actionProfilData } from '../../actions';
 import { backURL } from '../../helpers';
@@ -33,7 +33,7 @@ export const UserAvatar = ({ avatar, login = "user", nick }) => {
                         color: '#040c80',
                         backgroundColor: '#f8cff0'
                     }}>
-                        <span style={{ fontWeight: 500, fontSize: '1.3em', lineHeight: '40px' }}>{nick ? nick[0].toUpperCase() : login[0].toUpperCase()}
+                        <span style={{ fontWeight: 500, fontSize: '1.3em', lineHeight: '40px' }}>{nick ? nick[0].toUpperCase() : login ? login[0].toUpperCase() : 'U'}
                         </span>
                     </Avatar >
             }
@@ -44,20 +44,20 @@ export const UserAvatar = ({ avatar, login = "user", nick }) => {
 
 
 const UserNavIcon = ({ userData: { _id, avatar, login } }) =>
-    <Row justify="space-between" align="middle">
-        <Col span={4}>
+    <Row justify="end" align="middle" className='Header__userNav'>
+        <Col >
             <Link to='/'>Home</Link>
         </Col>
-        <Col span={4}>
+        <Col >
             <Link to='/message'>Messsege</Link>
         </Col>
-        <Col span={4}>
+        <Col >
             <Link to='/add'>addq</Link>
         </Col>
-        <Col span={4}>
+        <Col >
             <Link to='/rar'>Random</Link>
         </Col>
-        <Col span={4}>
+        <Col>
             <Link to={`/${_id}`}>
                 <UserAvatar avatar={avatar} login={login} />
             </Link>
@@ -81,7 +81,7 @@ const HeaderComponent = () =>
                     <Logo />
                 </Col>
                 <Col span={8}>
-                    <Searcha />
+                    <CFieldSearch />
                 </Col>
                 <Col span={8}>
                     <CUserNav />

src/components/header/Search.jsx

@@ -1,17 +1,45 @@
-import { Input } from 'antd'
+import { Empty, Input, Popover } from 'antd'
 import React from 'react'
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { actionFindUsers } from '../../actions';
+import { UserAvatar } from './Header';
 
 const { Search } = Input;
+const FindUsersResult = ({ usersRes }) => {
+    console.log(usersRes);
+    return <>
+        {usersRes.length === 0 ?
+            <Empty /> :
+            usersRes.map(u => {
+                return (<Link
+                    className='Header__search-link'
+                    key={u._id}
+                    to={`/profile/${u._id}`} >
+                    <UserAvatar avatar={u.avatar} login={u.login} nick={u.nick} />
+                    <strong>{u?.nick || u?.login || 'User'}</strong>
+                </Link>)
+            })
+        }
+    </>
+}
+
 
-export const Searcha = () => {
+export const FieldSearch = ({ usersRes, findUsers }) => {
     return (
         <>
-            <Search className='Header__search'
-                onSearch={value => console.log(value)}
-                placeholder="Search users"
-                allowClear
-                enterButton="Search"
-                enterButton />
+            <Popover placement="bottom" content={<FindUsersResult usersRes={usersRes} />}
+                trigger="click">
+                <></>
+                <Search className='Header__search'
+                    onSearch={value => findUsers(value)}
+                    placeholder="Search users"
+                    allowClear
+                    enterButton="Search"
+                    enterButton />
+            </Popover>
         </>
     )
 }
+
+export const CFieldSearch = connect(state => ({ usersRes: state.promise?.findUsersAll?.payload || [] }), { findUsers: actionFindUsers })(FieldSearch) 

src/components/main/MainPostFeed.js

@@ -224,7 +224,7 @@ const Post = ({ postData: { _id, text, title, owner, images, createdAt, comments
 
 const MainPostFeed = ({ posts, postsFollowing }) => {
     const [checkScroll, setCheckScroll] = useState(true)
-    console.log(posts.length);
+    
     useEffect(async () => {
         if (checkScroll) {
             await postsFollowing(posts.length)

src/redux/postFeed-reducer.js

@@ -6,7 +6,6 @@ export const postFeedReducer = (state = {}, { type, addPosts, newLike, postId, l
     const { posts } = state
     const types = {
         'ADD-POST-FEED': () => {
-            console.log(posts, addPosts);
             return {
                 ...state,
                 posts: !!posts ? [...posts, ...addPosts] : [...addPosts]
@@ -59,10 +58,10 @@ export const actionMyFolowisgPosts = (skip) =>
             createdAt
         }
     }`, {
-            query: JSON.stringify([{},
-            {
-                sort: [{ _id: -1 }],
-                skip: [skip +735],
-                limit: [10]
-            }])
+                query: JSON.stringify([{},
+                {
+                    sort: [{ _id: -1 }],
+                    skip: [skip +735],
+                    limit: [10]
+                }])
         }))