Add profileReducer

package-lock.json

@@ -31,6 +31,7 @@
         "react-sortable-hoc": "^2.0.0",
         "react-string-replace": "^1.0.0",
         "redux": "^4.1.2",
+        "redux-saga": "^1.1.3",
         "redux-thunk": "^2.4.1",
         "web-vitals": "^2.1.4"
       },
@@ -2836,6 +2837,53 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@redux-saga/core": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@redux-saga/core/-/core-1.1.3.tgz",
+      "integrity": "sha512-8tInBftak8TPzE6X13ABmEtRJGjtK17w7VUs7qV17S8hCO5S3+aUTWZ/DBsBJPdE8Z5jOPwYALyvofgq1Ws+kg==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@redux-saga/deferred": "^1.1.2",
+        "@redux-saga/delay-p": "^1.1.2",
+        "@redux-saga/is": "^1.1.2",
+        "@redux-saga/symbols": "^1.1.2",
+        "@redux-saga/types": "^1.1.0",
+        "redux": "^4.0.4",
+        "typescript-tuple": "^2.2.1"
+      }
+    },
+    "node_modules/@redux-saga/deferred": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/deferred/-/deferred-1.1.2.tgz",
+      "integrity": "sha512-908rDLHFN2UUzt2jb4uOzj6afpjgJe3MjICaUNO3bvkV/kN/cNeI9PMr8BsFXB/MR8WTAZQq/PlTq8Kww3TBSQ=="
+    },
+    "node_modules/@redux-saga/delay-p": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/delay-p/-/delay-p-1.1.2.tgz",
+      "integrity": "sha512-ojc+1IoC6OP65Ts5+ZHbEYdrohmIw1j9P7HS9MOJezqMYtCDgpkoqB5enAAZrNtnbSL6gVCWPHaoaTY5KeO0/g==",
+      "dependencies": {
+        "@redux-saga/symbols": "^1.1.2"
+      }
+    },
+    "node_modules/@redux-saga/is": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/is/-/is-1.1.2.tgz",
+      "integrity": "sha512-OLbunKVsCVNTKEf2cH4TYyNbbPgvmZ52iaxBD4I1fTif4+MTXMa4/Z07L83zW/hTCXwpSZvXogqMqLfex2Tg6w==",
+      "dependencies": {
+        "@redux-saga/symbols": "^1.1.2",
+        "@redux-saga/types": "^1.1.0"
+      }
+    },
+    "node_modules/@redux-saga/symbols": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/symbols/-/symbols-1.1.2.tgz",
+      "integrity": "sha512-EfdGnF423glv3uMwLsGAtE6bg+R9MdqlHEzExnfagXPrIiuxwr3bdiAwz3gi+PsrQ3yBlaBpfGLtDG8rf3LgQQ=="
+    },
+    "node_modules/@redux-saga/types": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@redux-saga/types/-/types-1.1.0.tgz",
+      "integrity": "sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg=="
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz",
@@ -14346,6 +14394,14 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "node_modules/redux-saga": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/redux-saga/-/redux-saga-1.1.3.tgz",
+      "integrity": "sha512-RkSn/z0mwaSa5/xH/hQLo8gNf4tlvT18qXDNvedihLcfzh+jMchDgaariQoehCpgRltEm4zHKJyINEz6aqswTw==",
+      "dependencies": {
+        "@redux-saga/core": "^1.1.3"
+      }
+    },
     "node_modules/redux-thunk": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
@@ -16036,6 +16092,27 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/typescript-compare": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/typescript-compare/-/typescript-compare-0.0.2.tgz",
+      "integrity": "sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA==",
+      "dependencies": {
+        "typescript-logic": "^0.0.0"
+      }
+    },
+    "node_modules/typescript-logic": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/typescript-logic/-/typescript-logic-0.0.0.tgz",
+      "integrity": "sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q=="
+    },
+    "node_modules/typescript-tuple": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/typescript-tuple/-/typescript-tuple-2.2.1.tgz",
+      "integrity": "sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q==",
+      "dependencies": {
+        "typescript-compare": "^0.0.2"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -19080,6 +19157,53 @@
         }
       }
     },
+    "@redux-saga/core": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@redux-saga/core/-/core-1.1.3.tgz",
+      "integrity": "sha512-8tInBftak8TPzE6X13ABmEtRJGjtK17w7VUs7qV17S8hCO5S3+aUTWZ/DBsBJPdE8Z5jOPwYALyvofgq1Ws+kg==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@redux-saga/deferred": "^1.1.2",
+        "@redux-saga/delay-p": "^1.1.2",
+        "@redux-saga/is": "^1.1.2",
+        "@redux-saga/symbols": "^1.1.2",
+        "@redux-saga/types": "^1.1.0",
+        "redux": "^4.0.4",
+        "typescript-tuple": "^2.2.1"
+      }
+    },
+    "@redux-saga/deferred": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/deferred/-/deferred-1.1.2.tgz",
+      "integrity": "sha512-908rDLHFN2UUzt2jb4uOzj6afpjgJe3MjICaUNO3bvkV/kN/cNeI9PMr8BsFXB/MR8WTAZQq/PlTq8Kww3TBSQ=="
+    },
+    "@redux-saga/delay-p": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/delay-p/-/delay-p-1.1.2.tgz",
+      "integrity": "sha512-ojc+1IoC6OP65Ts5+ZHbEYdrohmIw1j9P7HS9MOJezqMYtCDgpkoqB5enAAZrNtnbSL6gVCWPHaoaTY5KeO0/g==",
+      "requires": {
+        "@redux-saga/symbols": "^1.1.2"
+      }
+    },
+    "@redux-saga/is": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/is/-/is-1.1.2.tgz",
+      "integrity": "sha512-OLbunKVsCVNTKEf2cH4TYyNbbPgvmZ52iaxBD4I1fTif4+MTXMa4/Z07L83zW/hTCXwpSZvXogqMqLfex2Tg6w==",
+      "requires": {
+        "@redux-saga/symbols": "^1.1.2",
+        "@redux-saga/types": "^1.1.0"
+      }
+    },
+    "@redux-saga/symbols": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/symbols/-/symbols-1.1.2.tgz",
+      "integrity": "sha512-EfdGnF423glv3uMwLsGAtE6bg+R9MdqlHEzExnfagXPrIiuxwr3bdiAwz3gi+PsrQ3yBlaBpfGLtDG8rf3LgQQ=="
+    },
+    "@redux-saga/types": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@redux-saga/types/-/types-1.1.0.tgz",
+      "integrity": "sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz",
@@ -27368,6 +27492,14 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "redux-saga": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/redux-saga/-/redux-saga-1.1.3.tgz",
+      "integrity": "sha512-RkSn/z0mwaSa5/xH/hQLo8gNf4tlvT18qXDNvedihLcfzh+jMchDgaariQoehCpgRltEm4zHKJyINEz6aqswTw==",
+      "requires": {
+        "@redux-saga/core": "^1.1.3"
+      }
+    },
     "redux-thunk": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
@@ -28621,6 +28753,27 @@
       "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
       "peer": true
     },
+    "typescript-compare": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/typescript-compare/-/typescript-compare-0.0.2.tgz",
+      "integrity": "sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA==",
+      "requires": {
+        "typescript-logic": "^0.0.0"
+      }
+    },
+    "typescript-logic": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/typescript-logic/-/typescript-logic-0.0.0.tgz",
+      "integrity": "sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q=="
+    },
+    "typescript-tuple": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/typescript-tuple/-/typescript-tuple-2.2.1.tgz",
+      "integrity": "sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q==",
+      "requires": {
+        "typescript-compare": "^0.0.2"
+      }
+    },
     "unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",

package.json

@@ -27,6 +27,7 @@
     "react-sortable-hoc": "^2.0.0",
     "react-string-replace": "^1.0.0",
     "redux": "^4.1.2",
+    "redux-saga": "^1.1.3",
     "redux-thunk": "^2.4.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -18,12 +18,14 @@ import {
   actionAllPostsFeed,
   actionAllPosts,
   actionSetAvatar,
+  aboutMeWorker,
   actionPostsFeed,
   actionAllFollowing,
   actionAllFollowers,
   actionPostsMyFollowing2,
   actionSearchUser,
 } from './actions'
+import { actionFullProfilePage } from './reducers'
 import { Upload, Button, DatePicker, Space } from 'antd'
 import moment from 'moment'
 import { UploadOutlined, SearchOutlined } from '@ant-design/icons'
@@ -203,8 +205,11 @@ function App() {
   if (store.getState().auth?.token) {
     console.log('токенчик ', store.getState().auth?.payload?.sub?.id)
 
-    store.dispatch(actionAboutMe(store.getState().auth?.payload?.sub?.id))
-    store.dispatch(actionAllPosts(store.getState().auth?.payload?.sub?.id))
+    // store.dispatch(actionAboutMe(store.getState().auth?.payload?.sub?.id))
+    // store.dispatch(actionAllPosts(store.getState().auth?.payload?.sub?.id))
+    store.dispatch(actionFullProfilePage(store.getState().auth?.payload?.sub?.id))
+   // actionFullProfilePageData
+    // aboutMeWorker()
   }
   else {
     console.log('ошибочка')

src/actions/index.js

@@ -51,6 +51,23 @@ export const actionPromise = (name, promise) => async (dispatch) => {
     dispatch(actionRejected(name, error))
   }
 }
+  export const actionAboutMe = (_id) =>
+      actionPromise(
+      'aboutMe',
+        gql(
+          `query AboutMe($userId:String){
+            UserFindOne(query:$userId)
+            {
+              _id createdAt login nick avatar{_id url} 
+              followers{_id login nick avatar{_id url}} 
+              following{_id login nick avatar{_id url}}
+            }
+          }`,
+          {
+            userId: JSON.stringify([{ _id }]),
+          },
+        ),
+      )
 
 export const actionFullLogin = (login, password) => async (dispatch) => {
   let token = await dispatch(
@@ -141,25 +158,7 @@ export const actionAvatar = (imageId) => async (dispatch, getState) => {
 //     ),
 //   )
 // }
-export const actionAboutMe = () => async (dispatch, getState) => {
-  await dispatch(
-    actionPromise(
-    'aboutMe',
-      gql(
-        `query AboutMe($userId:String){
-  UserFindOne(query:$userId)
-  {
-    _id createdAt login nick avatar{_id url} 
-     followers{_id login nick avatar{_id url}} following{_id login nick avatar{_id url}}
-  }
-}`,
-        {
-          userId: JSON.stringify([{ _id: getState().auth?.payload?.sub?.id }]),
-        },
-      ),
-    ),
-  )
-}
+
 // export const actionAboutUser = actionAboutMe
 // :'aboutMe'
 export const actionPostUpsert = (post) =>
@@ -238,7 +237,7 @@ export const actionOnePost = (_id) => async (dispatch) => {
         likes{
           _id
           owner{				
-             _id login avatar {url}
+             _id login avatar {_id url}
             }
       }
         }

src/components/Post.js

@@ -204,7 +204,9 @@ const Like = ({ my_Id, postId, addLike, deleteLike, likes=[], children }) =>
         '0 likes'}
       </div>
       <Modal title="Likes" className="Modal"
-        visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
+        footer={null}
+        onCancel={handleCancel}
+        visible={isModalVisible}>
           <Likes likes={likes}/>
       </Modal>
     </>
@@ -273,7 +275,7 @@ export const PagePost = ({my_Id, onePost,likes, addComment,addCommentReply, addL
 export const CPost = connect((state) => ({
   onePost: state.promise.onePost?.payload,
   my_Id: state.auth.payload.sub.id || '',
-  aboutMe: state.promise?.aboutMe?.payload,
+  aboutMe: state.profileData?.aboutMe,
   addComment: state.promise?.addComment?.payload,
   addSubComment: state.promise?.addSubComment,
   

src/components/Search_Users.js

@@ -13,12 +13,23 @@ import {
     actionAllFollowing,
     actionAllFollowers,
     actionPostsMyFollowing2,
-    actionSearchUser,
-  } from '../actions'
-export const ResultUserFind = ({ userFind }) => (
-    <div>
-      {userFind?.map(({ _id, login, avatar }) => (
-        <Link to={`/profile/${_id}`}>
+  actionSearchUser,
+ 
+} from '../actions'
+  import {actionFullProfilePage} from '../reducers'
+export const ResultUserFind = ({ my_Id, userFind = [], onPageData }) => {
+  
+  const checkMyId = userFind.find(user => user?._id === my_Id)
+
+  checkMyId ? (console.log('да єто мой айди ти чо')) : console.log('ЦЕ НЕ МИЙ АЙДИ')
+  
+   return(<div>
+     {
+       userFind?.map(({ _id, login, avatar }) => (
+        
+        <Link onClick={()=>onPageData(_id)} to={`/profile/${_id}`}>
+          
+          {console.log('Login: ', login, '  _id: ', _id)}
           <Avatar
             style={{
               width: '20px',
@@ -32,9 +43,9 @@ export const ResultUserFind = ({ userFind }) => (
           <h3 style={{ marginLeft: '30px' }}> {login}</h3>
         </Link>
       ))}
-    </div>
-)
- const SearchUser = ({ onSearch, searchUser }) => {
+</div>)
+}
+ const SearchUser = ({my_Id, onSearch, searchUser,onPageData }) => {
     // const [value, setValue]=useState('')
     const onSearchUser = (value) => onSearch(value)
     const { Search } = Input
@@ -42,7 +53,7 @@ export const ResultUserFind = ({ userFind }) => (
       <>
         <Popover
           placement="bottom"
-          content={<ResultUserFind userFind={searchUser} />}
+          content={<ResultUserFind my_Id={my_Id} onPageData={onPageData} userFind={searchUser} />}
           trigger="click"
         >
           <Search
@@ -57,6 +68,14 @@ export const ResultUserFind = ({ userFind }) => (
     )
   }
  export const CSearch = connect(
-    (state) => ({ searchUser: state.promise?.searchUser?.payload }),
-    { onSearch: actionSearchUser },
+   (state) => ({
+    aboutMe: state.profileData?.aboutMe,
+     searchUser: state.promise?.searchUser?.payload,
+     my_Id: state.auth.payload.sub.id || '',
+   }),
+
+   {
+     onSearch: actionSearchUser,
+     onPageData:actionFullProfilePage
+   },
   )(SearchUser)

src/components/User.js

@@ -110,6 +110,7 @@ export const CEditInfo = connect(
   },
 )(EditInfo)
 export const PageAboutUser = ({
+  my_Id,
   aboutMe: { _id, login, nick, createdAt, avatar, followers, following } = {},
   allPosts,
   onPosts,
@@ -123,6 +124,8 @@ export const PageAboutUser = ({
     // onePost(post?._id)
     // "62361ebb92c08631bc4b0e96")
   }, [])
+  const checkMyId = (_id === my_Id)
+
   return (
   
     <>
@@ -160,15 +163,20 @@ export const PageAboutUser = ({
 
           <h3 style={{ marginLeft: '20px' }}>{following?.length} following </h3>
         </div>
-        <h3> nick: {nick == null ? login : nick}</h3>
-        <EditAccount>
+              <h3> nick: {nick == null ? login : nick}</h3>
+              {
+                checkMyId ?
+                  <EditAccount>
           <div>
             <h2>Edit login</h2>
             <p>Edit avatar</p>
             <CEditInfo />
           </div>
                 </EditAccount>
-                 </div>
+                : null
+                  
+              }
+       </div>
         </section>
             
         </Col>
@@ -195,8 +203,9 @@ export const PageAboutUser = ({
 }
 export const CPageAboutUser = connect(
   (state) => ({
-    aboutMe: state.promise?.aboutMe?.payload,
-    allPosts: state.promise?.allPosts?.payload,
+    my_Id: state.auth.payload.sub.id || '',
+    aboutMe: state.profileData?.aboutMe,
+    allPosts: state.profileData?.allPosts,
     onePost: state.promise?.onePost?.payload,
     // post:state.promise?.onePost?.payload,
     // allPosts: state.promise?.allPosts?.payload,

src/reducers/index.js

@@ -1,6 +1,7 @@
 import thunk from 'redux-thunk';
-import { actionAuthLogin } from '../actions'
-import {createStore, combineReducers, applyMiddleware} from 'redux';
+import { actionAuthLogin, gql, actionPromise, actionAllPosts, actionAboutMe } from '../actions'
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+
 function promiseReducer(state = {}, { type, name, status, payload, error }) {
     if (type === 'PROMISE') {
       return {
@@ -17,7 +18,36 @@ const jwtDecode = (token) => {
     } catch (e) {
       return null
     }
+}
+
+export const actionProfilePageDataType= (aboutMe, allPosts) =>
+  ({ type: 'PROFILE-PAGE', aboutMe, allPosts })
+
+
+export const actionFullProfilePage = (_id) =>
+  async dispatch => {
+    const aboutMe = await dispatch(actionAboutMe(_id))
+    const allPosts = await dispatch(actionAllPosts(_id))
+    if (aboutMe && allPosts) {
+      await dispatch(actionProfilePageDataType(aboutMe, allPosts))
+    }
+  }
+
+export const profileReducer = (state = {}, { type, aboutMe,allPosts, newResult }) => {
+  const types = {
+      'PROFILE-PAGE': () => {
+          return {
+              ...state, aboutMe, allPosts
+          }
+      }
+
+  }
+  if (type in types) {
+      return types[type]()
   }
+  return state
+}
+
   function authReducer(state, { type, token }) {
     if (state === undefined && localStorage.authToken) {
       token = localStorage.authToken
@@ -39,6 +69,8 @@ const jwtDecode = (token) => {
     combineReducers({
       promise: promiseReducer,
       auth: authReducer,
+      profileData:profileReducer
     }),
     applyMiddleware(thunk),
-  )
+)
+