Selaa lähdekoodia

added posts in Prifile Page

makstravm 2 vuotta sitten
vanhempi
commit
70289f6eb9

+ 3 - 4
src/App.js

@@ -7,9 +7,8 @@ import  store  from './redux/redux-store';
 import { Authorization } from './components/Authorization';
 import { Content, Main } from './pages/Content';
 import HeaderComponent from './components/header/Header';
-import { CMainPostFeed } from './components/main/MainPostFeed.js';
-import { CLoginForm, CProfilePage } from './components/main/Profile';
-import { actionAboutMe } from './actions';
+import { CMainPostsFeed } from './components/main/MainPostsFeed';
+import { CProfilePage } from './components/main/Profile';
 import { CAdd } from './components/main/Add';
 
 export const history = createHistory()
@@ -32,7 +31,7 @@ const AppContent = ({ isToken }) =>
                 <HeaderComponent />
                 <Main>
                     <Switch>
-                        <Route path='/' component={CMainPostFeed} exact />
+                        <Route path='/' component={CMainPostsFeed} exact />
                         <Route path='/profile/:_id' component={CProfilePage} />
                         <Route path='/message' component={Aside} />
                         <Route path='/add' component={CAdd} />

+ 3 - 2
src/actions/index.js

@@ -10,14 +10,15 @@ export const actionRejected = (name, error) => ({ type: 'PROMISE', status: 'REJE
 export const actionAuthLogin = (token, remember) => ({ type: 'AUTH_LOGIN', token, remember })
 export const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' })
 
-export const actionAddPostsFeedAC = (newResult) => ({ type: 'ADD-POST-FEED', newResult })
-export const actionRemovePostsFeedAC = () => ({ type: 'REMOVE-POST-FEED' })
+export const actionRenderPostsFeedAC = (newResult) => ({ type: 'RENDER-POSTS-FEED', newResult })
+export const actionRemovePostsFeedAC = () => ({ type: 'REMOVE-POSTS-FEED' })
 
 export const actionAddLikePostAC = (postId, newResult) => ({ type: 'ADD-POST-LIKE', postId, newResult })
 export const actionRemoveLikePostAC = (postId, newResult) => ({ type: 'REMOVE-POST-LIKE', postId, newResult })
 export const actionAddCommentAC = (postId, newResult) => ({ type: 'ADD-COMMENT', postId, newResult })
 
 export const actionProfilePageDataAC = (userData, userPosts) => ({ type: 'PROFILE-PAGE-DATA', userData, userPosts })
+export const actionRemovePrfilePageAC = () => ({ type: 'REMOVE-POSTS-PAGE' })
 
 export const actionUpdateFollowingAC = (newResult) => ({ type: 'UPDATE-FOLLOWING', newResult })
 

+ 1 - 1
src/components/main/Add.js

@@ -43,4 +43,4 @@ const Add = ({ imageUrl, onUploadFile }) => {
     )
 }
 
-export const CAdd = connect(state => ({ imageUrl: state.promise?.Z?.payload?.avatar.url }), { onUploadFile: actionSetAvatar })(Add)
+export const CAdd = connect(state => ({ imageUrl: state.promise?.aboutMe?.payload?.avatar.url }), { onUploadFile: actionSetAvatar })(Add)

+ 5 - 5
src/components/main/MainPostFeed.js

@@ -9,7 +9,7 @@ import { HeartFilled, HeartOutlined, LeftCircleOutlined, RightCircleOutlined, Se
 import Paragraph from 'antd/lib/typography/Paragraph'
 import Text from 'antd/lib/typography/Text'
 import TextArea from 'antd/lib/input/TextArea'
-import { actionAddPostsFeed, actionFullAddComment, actionFullAddLikePost, actionFullRemoveLikePost } from '../../redux/redux-thunk'
+import { actionAddPostsFeed, actionFullAddComment, actionFullAddLikePost, actionFullRemoveLikePost, actionRenderPostsFeed } from '../../redux/redux-thunk'
 import { actionRemovePostsFeedAC } from '../../actions'
 
 const PostTitle = ({ owner }) =>
@@ -223,7 +223,7 @@ const Post = ({ postData: { _id, text, title, owner, images, createdAt, comments
     )
 }
 
-const MainPostFeed = ({ posts, postsFollowing, postsFollowingRemove }) => {
+const MainPostsFeed = ({ posts, postsFollowing, postsFollowingRemove }) => {
     const [checkScroll, setCheckScroll] = useState(true)
     useEffect(async () => {
         if (checkScroll) {
@@ -252,9 +252,9 @@ const MainPostFeed = ({ posts, postsFollowing, postsFollowingRemove }) => {
     )
 }
 
-export const CMainPostFeed = connect(state => ({
+export const CMainPostsFeed = connect(state => ({
     posts: state?.postsFeed?.posts || []
 }), {
-    postsFollowing: actionAddPostsFeed,
+    postsFollowing: actionRenderPostsFeed,
     postsFollowingRemove: actionRemovePostsFeedAC,
-})(MainPostFeed)
+})(MainPostsFeed)

+ 28 - 2
src/components/main/Profile.js

@@ -3,6 +3,8 @@ import Modal from 'antd/lib/modal/Modal'
 import React, { useEffect, useState } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
+import { actionRemovePostsAC } from '../../actions'
+import { backURL } from '../../helpers'
 import { actionFullProfilePageData, actionFullSubscribe, actionFullUnSubscribe, actionProfilePageData } from '../../redux/redux-thunk'
 import { UserAvatar } from '../header/Header'
 
@@ -101,19 +103,43 @@ const CProfilePageData = connect(state => ({
     posts: state?.profileData?.userPosts || []
 }))(ProfilePageData)
 
-const ProfilePage = ({ match: { params: { _id, id } }, getProfileUser }) => {
+
+const ProfilePagePosts = ({ posts }) => {
+
+
+    return (
+        <Row>
+            {posts.map(p => <Col key={p._id}>
+                {console.log(p)}
+                {p.images && p.images[0] && p.images[0].url && <img src={(backURL + '/' + p?.images[0].url)} alt='post Img' />}
+            </Col>)
+
+
+            }
+        </Row >
+    )
+
+}
+
+export const CProfilePagePosts = connect(state => ({ posts: state.profileData?.userPosts || [] }))(ProfilePagePosts)
+
+const ProfilePage = ({ match: { params: { _id } }, getProfileUser }) => {
     const [followers, setFollowers] = useState(false)
     const [following, setFollowing] = useState(false)
     useEffect(() => {
         getProfileUser(_id)
+        return () => {
+            // actionRemovePrfilePageAC 
+        }
     }, [_id])
     return (
         <>
             <CProfilePageData setFollowing={setFollowing} setFollowers={setFollowers} />
             {followers && < CModalFollowers statusModal={setFollowers} title={'Followers'} />}
             {following && < CModalFollowing statusModal={setFollowing} title={'Following'} />}
+            <CProfilePagePosts />
         </>
     )
 }
 
-export const CProfilePage = connect(null, { getProfileUser: actionFullProfilePageData })(ProfilePage)
+export const CProfilePage = connect(null, { getProfileUser: actionFullProfilePageData, })(ProfilePage)

+ 6 - 6
src/redux/post-reducer.js

@@ -2,16 +2,16 @@ import React from 'react'
 import { gql } from '../helpers'
 import { actionPromise } from './redux-thunk'
 
-export const postFeedReducer = (state = {}, { type, postId, newResult }) => {
+export const postsFeedReducer = (state = {}, { type, postId, newResult }) => {
     const { posts } = state
     const types = {
-        'ADD-POST-FEED': () => {
+        'RENDER-POSTS-FEED': () => {
             return {
                 ...state,
                 posts: !!posts ? [...posts, ...newResult] : [...newResult]
             }
         },
-        'REMOVE-POST-FEED': () => {
+        'REMOVE-POSTS-FEED': () => {
             return {
                 ...state,
                 posts: []
@@ -52,7 +52,7 @@ export const postFeedReducer = (state = {}, { type, postId, newResult }) => {
 
 
 
-export const actionMyFolowisgPosts = (skip) =>
+export const actionMyFolowingPosts = (skip) =>
     actionPromise('followingPosts',
         gql(`query allposts($query: String!){
         PostFind(query:$query){
@@ -64,10 +64,10 @@ export const actionMyFolowisgPosts = (skip) =>
             createdAt
         }
     }`, {
-            query: JSON.stringify([{},
+            query: JSON.stringify([{ ___owner: { $in: ["614c8ef4f9fc3a5e42bddb28"] } },
             {
                 sort: [{ _id: -1 }],
-                skip: [skip ],
+                skip: [skip||0],
                 limit: [10]
             }])
         }))

+ 8 - 1
src/redux/profile-reducer.js

@@ -1,18 +1,25 @@
 import React from 'react'
 
-export const profileReducer = (state = {}, { type, userData, userPosts, newResult }) => {
+export const profileReducer = (state = {}, { type, userData,userPosts, newResult }) => {
     const types = {
         'PROFILE-PAGE-DATA': () => {
             return {
                 ...state, userData, userPosts
             }
         },
+        'REMOVE-POSTS-PAGE': () => {
+            return {
+                ...state,
+                posts: []
+            }
+        },
         'UPDATE-FOLLOWING': () => {
             return {
                 ...state,
                 userData: { ...state.userData, followers: [...newResult] }
             }
         }
+
     }
     if (type in types) {
         return types[type]()

+ 5 - 2
src/redux/redux-store.js

@@ -2,13 +2,16 @@ import { createStore, combineReducers, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import { actionAboutMe } from '../actions';
 import { authReducer } from './auth-reducer';
-import { postFeedReducer } from './post-reducer';
+import { postsFeedReducer } from './postsFeed-reducer';
 import { profileReducer } from './profile-reducer';
 import { promiseReducer } from './promise-reducer';
+
+
+
 const store = createStore(combineReducers({
     promise: promiseReducer,
     auth: authReducer,
-    postsFeed: postFeedReducer,
+    postsFeed: postsFeedReducer,
     profileData:profileReducer
 }),
     applyMiddleware(thunk))

+ 15 - 12
src/redux/redux-thunk.js

@@ -1,5 +1,5 @@
-import { actionAddComment, actionAddCommentAC, actionAddLikePost, actionAddLikePostAC, actionAddPostsFeedAC, actionAuthLogin, actionFindComment, actionLogin, actionMyLikePost, actionPending, actionRegister, actionRejected, actionRemoveLikePost, actionRemoveLikePostAC, actionResolved, actionSubscribe, actionUpdateFollowers, actionAboutMe, actionProfilePagePost, actionProfilePageDataAC, actionProfilePageData, actionUnSubscribe, actionUpdateFollowingAC } from "../actions"
-import { actionMyFolowisgPosts } from "./post-reducer"
+import { actionAddComment, actionAddCommentAC, actionAddLikePost, actionAddLikePostAC, actionAuthLogin, actionFindComment, actionLogin, actionMyLikePost, actionPending, actionRegister, actionRejected, actionRemoveLikePost, actionRemoveLikePostAC, actionResolved, actionSubscribe, actionUpdateFollowers, actionAboutMe, actionProfilePagePost, actionProfilePageDataAC, actionProfilePageData, actionUnSubscribe, actionUpdateFollowingAC, actionRenderPostsAC, actionRenderPostsFeedAC } from "../actions"
+import { actionMyFolowingPosts } from "./postsFeed-reducer"
 
 export const actionPromise = (name, promise) =>
     async dispatch => {
@@ -25,7 +25,7 @@ export const actionFullLogin = (login, password, remember) =>
 
 export const actionFullRegister = (login, password, remember) =>
     async dispatch => {
-        await dispatch(actionRegister(login, password))
+        await actionRegister(login, password)
         let token = await dispatch(actionLogin(login, password))
         if (token) {
             await dispatch(actionAuthLogin(token, remember))
@@ -34,7 +34,7 @@ export const actionFullRegister = (login, password, remember) =>
 
 export const actionFullRemoveLikePost = (likeId, postId) =>
     async dispatch => {
-        await dispatch(actionRemoveLikePost(likeId))
+        await actionRemoveLikePost(likeId)
         const { likes } = await dispatch(actionMyLikePost(postId))
         if (likes) {
             await dispatch(actionRemoveLikePostAC(postId, likes))
@@ -43,18 +43,18 @@ export const actionFullRemoveLikePost = (likeId, postId) =>
 
 export const actionFullAddLikePost = (postId) =>
     async dispatch => {
-        await dispatch(actionAddLikePost(postId))
+        await actionAddLikePost(postId)
         const { likes } = await dispatch(actionMyLikePost(postId))
         if (likes) {
             await dispatch(actionAddLikePostAC(postId, likes))
         }
     }
 
-export const actionAddPostsFeed = (skip) =>
+export const actionRenderPostsFeed = (skip) =>
     async dispatch => {
-        let posts = await dispatch(actionMyFolowisgPosts(skip))
+        let posts = await dispatch(actionMyFolowingPosts(skip))
         if (posts) {
-            await dispatch(actionAddPostsFeedAC(posts))
+            await dispatch(actionRenderPostsFeedAC(posts))
         }
     }
 
@@ -72,8 +72,7 @@ export const actionFullProfilePageData = (id) =>
         const userData = await dispatch(actionProfilePageData(id))
         const userPosts = await dispatch(actionProfilePagePost(id))
         if (userData && userPosts) {
-            await dispatch(actionProfilePageDataAC(userData))
-            await dispatch(actionAddPostsFeedAC (userPosts))
+            await dispatch(actionProfilePageDataAC(userData, userPosts))
         }
     }
 
@@ -81,8 +80,10 @@ export const actionFullSubscribe = (userId) =>
     async (dispatch, getState) => {
         const { auth: { payload: { sub: { id } } },
             promise: { aboutMe: { payload: { following } } } } = getState()
-        await dispatch(actionSubscribe(id, following, userId))
+        await actionSubscribe(id, following, userId)
+        await dispatch(actionAboutMe())
         const { followers } = await dispatch(actionUpdateFollowers(userId))
+
         if (followers) {
             await dispatch(actionUpdateFollowingAC(followers))
         }
@@ -93,8 +94,10 @@ export const actionFullUnSubscribe = (userId) =>
         const { auth: { payload: { sub: { id } } },
             promise: { aboutMe: { payload: { following } } } } = getState()
         const newArrFollowing = [...following].filter(f => f._id !== userId)
-        await dispatch(actionUnSubscribe(id, newArrFollowing))
+        await actionUnSubscribe(id, newArrFollowing)
+        await dispatch(actionAboutMe())
         const { followers } = await dispatch(actionUpdateFollowers(userId))
+
         if (followers) {
             await dispatch(actionUpdateFollowingAC(followers))
         }