Did the correct work of editing and creating new posts

src/App.js

@@ -21,7 +21,8 @@ import user from './materials/user1.png'
 import photoNotFound from './materials/photoNotFound.png'
 // import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
 // import { Carousel } from 'react-responsive-carousel';
-import { CPostForFeed,Feed } from './components/PostFeed'
+import { CPostForFeed, Feed } from './components/PostFeed'
+import {CPostEditor } from './components/NewPost'
 
 import { Header } from './components/Header'
 
@@ -36,8 +37,9 @@ const Main = () => (
     <Switch>
       <Route path="/" exact component={PageMain} />
       <Route path="/profile/:_id" component={CPageAboutUser} />
-      <Route path="/edit/post/:_id" component={PageCreatePost} />
-      <Route path="/edit/post/new" component={PageCreatePost} />
+
+      <Route path="/edit/post/:_id" component={CPostEditor} />
+      
 
       <Route path="/post/:_id" component={CPost} />
 
@@ -82,6 +84,7 @@ const CProtectedRoute = connect((state) => ({
 export const history = createHistory()
 
 function App() {
+
   if (store.getState().auth?.token) {
     console.log('токен', store.getState().auth?.payload?.sub?.id)
     store.dispatch(actionFullProfilePage(store.getState().auth?.payload?.sub?.id))

src/App.scss

@@ -19,19 +19,22 @@ body{
   border-width: 2px;
   border-radius: 2px;
   border-style: dashed;
-  background-color: #fafafa;
-  color: #bdbdbd;
+  background-color: #ccb2eb;
+  color: #1d5b78;
   outline: none;
   transition: border .24s ease-in-out;
+  font-size: medium;
+  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
 }
 .Header{
   display: flex;
 position: fixed;
-margin: 40px;
+align-items: center;
+justify-content: center;
 padding: 20px;
-//  z-index: 4;
-  width: 60%; 
-  right:0;
+ z-index: 4;
+  width: 100%; 
+
  top: 0;
  background-color: white;
 }
@@ -49,11 +52,15 @@ padding: 20px;
 }
 .Post{
   max-width: 600px;
-  display: block; margin: 0 auto;
+  // display: block;
+   margin: 0 auto;
   background-color: #faf6fd;
   border: 6px solid #7922CC;
   padding: 10px;
   border-radius: 25px;
+ display:'flex';
+   align-items: 'center';
+    justify-content: 'center'
 }
 ul{
   margin: 0; 
@@ -75,10 +82,19 @@ main{
 }
 .Input{ 
 
-  // display: flex;
-  width: 50%;
+  display: flex;
+  width: 90%;
+  padding: 5px;
+  margin:20px;
+  border-radius: 10px;
+  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  font-size: 20px;
 
 }
+.container{
+  padding: 20px;
+  margin: 20px;
+}
 .AboutMe{
   
   display: flex;
@@ -200,7 +216,21 @@ Link{
    font-weight: bold;
    color: rgb(10, 9, 58);
 }
-Link:hover{
+.Link{
+  display: flex;
+  align-items: center;
+   justify-content: center;
+   text-decoration: none;
+   font-family: serif;
+   background-color: rgb(174, 172, 240);  
+   border: 2px solid rgb(37, 140, 184);
+   border-radius: 10px;
+   margin: 10px ;
+   padding: 10px;
+   font-weight: bold;
+   color: rgb(10, 9, 58);
+}
+.Link:hover{
   text-decoration: underline; 
   background-color: rgb(123, 119, 228);  
 }

src/actions/index.js

@@ -114,14 +114,17 @@ export const uploadFile = (file) => {
     body: myForm,
   }).then((result) => result.json())
 }
-export const actionUploadFile = (file) =>
-  actionPromise('uploadFile', uploadFile(file))
+export const actionUploadFile = (file) => 
+    actionPromise('uploadFile', uploadFile(file))
+
+
+export const actionUploadFiles = (files) => 
+
+    actionPromise(
+      'uploadFiles',
+      Promise.all(files.map((file) => uploadFile(file))),
+    )
 
-export const actionUploadFiles = (files) =>
-  actionPromise(
-    'uploadFiles',
-    Promise.all(files.map((file) => uploadFile(file))),
-  )
 
 export const actionAvatar = (imageId, myId) =>
   actionPromise(
@@ -159,24 +162,25 @@ export const actionAvatar = (imageId, myId) =>
 
 // export const actionAboutUser = actionAboutMe
 // :'aboutMe'
-export const actionPostUpsert = (post) =>
-  actionPromise(
-    'postUpsert',
-    gql(
-      `
+export const actionPostUpsert = (post) => async (dispatch) => {
+  await dispatch(
+    actionPromise(
+      'postUpsert',
+      gql(
+        `
 mutation PostUpsert($post:PostInput){
   PostUpsert(post:$post){
     _id title text images{_id url}
   }
 }`,
-      {
-        post: {
-          ...post,
-          images: post.images.map(({ _id }) => ({ _id })),
+        {
+          post: {
+            ...post,
+            images: post.images.map(({ _id }) => ({ _id })),
+          },
         },
-      },
-    ),
-  )
+      ),
+    ))}
 
 export const actionAllPosts = (userId) =>
   actionPromise(
@@ -236,42 +240,43 @@ export const actionAllPostsFeed = () =>
     ),
   )
 
-export const actionOnePost = (_id) => async (dispatch) => {
-  await dispatch(
-    actionPromise(
-      'onePost',
-      gql(
-        `query OneFind($post:String){
-         PostFindOne(query:$post){
-        _id title text images{_id url}
-        createdAt
-        comments{
-          _id, createdAt, text  owner{_id login avatar{_id url}}
-          answers{
-            _id, createdAt, text owner{_id login  avatar{_id url}}
-           
-          }
-        owner{_id login avatar{_id url}}}
-        likes{
-          _id
-          owner{				
-             _id login avatar {_id url}
-            }
-      }
-        }
-      }`,
-        {
-          post: JSON.stringify([{ _id }]),
-        },
-      ),
-    ),
+export const actionOnePost = (_id) => 
+  actionPromise(
+    'onePost',
+    gql(
+      `query OneFind($post:String){
+        PostFindOne(query:$post){
+       _id title text images{_id url}
+       createdAt
+       comments{
+         _id, createdAt, text  owner{_id login avatar{_id url}}
+         answers{
+           _id, createdAt, text owner{_id login  avatar{_id url}}
+          
+         }
+       owner{_id login avatar{_id url}}}
+       likes{
+         _id
+         owner{				
+            _id login avatar {_id url}
+           }
+     }
+       
+ }
+     }
+
+      `,
+      {
+        post: JSON.stringify([{ _id }]),
+      },
+    )
   )
-}
+
 
 export const actionFindLikes = (_id) => async (dispatch) => {
   await dispatch(
     actionPromise(
-      'onePost',
+      'onePostFindLike',
       gql(
         `query OneFind($post:String){
          PostFindOne(query:$post){

src/components/NewPost.js

@@ -2,7 +2,7 @@ import React, { useMemo, useState, useEffect } from 'react'
 import { Router, Route, Link, Redirect, Switch } from 'react-router-dom'
 import { Provider, connect } from 'react-redux'
 import { actionUploadFile, actionUploadFiles, actionPostUpsert,actionUserUpdate} from '../actions'
-import {actionClearPostsOneAC} from '../reducers'
+import {actionClearPostsOne} from '../reducers'
 
 import { Upload, Button, DatePicker, Space,message  } from 'antd'
 import {Basic, SortableContainer, SortableItem , ImageDemo} from '../components/DropZone'
@@ -10,27 +10,6 @@ import { arrayMove, arrayMoveImmutable, arrayMoveMutable } from 'array-move'
 import { ConsoleSqlOutlined } from '@ant-design/icons'
 import ReactDOM from 'react-dom';
 import { history } from '../App'
-const defaultPost = {
-  title: '',
-  text: '',
-  images: [
-    // {_id: '6231c4292be7e42fbc9096c4',
-    //  url: 'images/d2438e8c6502eb5da60ecc8f7a6b8aff'}
-    // {
-    //   _id: '620b8374ad55d22f3e2fb316',
-    //   url: 'images/e125a428191726307968880977dac103',
-    // },
-    // {
-    //   _id: '620b8399ad55d22f3e2fb317',
-    //   url: 'images/4ae46578989c497582995ba8caeb5de5',
-    // },
-    // {
-    //   _id: '620b83b0ad55d22f3e2fb318',
-    //   url: 'images/ae839539f61249b15feda98cad7eb858',
-    // },
-  ],
-}
-
 export const PageCreatePost = () => (
     <div style={{background: '#FFFACD' }}>
       <h2>Edit Post</h2>
@@ -59,110 +38,120 @@ export const AddPost = ({ children }) => {
       onChange={onChangeText}
     />
   )
-  var mountNode = document.getElementById('root');
-  //  mountNode = document.getElementById('root')
-// const ImageDemo = ({_id,index,url})=> {
-//     return (
-      
-//       <SortableItem key={`item-${_id}`} index={index} url={url} />
-//     );
-//   }
 
-
-  // match: { params: { _id } }
-  // console.log('PARAMS ', match?.params?._id)
-  const PostEditor = ({myID,post={}, match: { params: { _id } },
-    onSave, onFileDrop, fileStatus, clearPostOne }) => {
+const PostEditor = ({ match: { params: { _id } }, myID, post,
+  onSave, onFileDrop, fileStatus, clearPostOne }) => {
  
   console.log('PARAMS ', _id)
-  console.log('post ', post)
-
-  console.log('filestatus ', fileStatus)
-const [state, setState] = useState(post)
-//   useEffect(() => {
-//     if (_id === 'new') {
-//         clearPostOne()
-//       setState(defaultPost)
-//     }
-// }, [_id]);
-
-useEffect(() => {
-  if ( fileStatus?.status== 'FULFILLED') {
-      message.success(`post published, can create a new one`)
-      history.push(`/profile/${myID}`)
-  } else if (fileStatus?.status === "REJECTED") {
-      message.error('Error')
+  
+  post = {
+  //  _id: post?._id || 'new',
+    title: post?.title || '',
+    text: post?.text || '',
+    images: post?.images || []
   }
-}, [fileStatus?.status])  
-    useEffect(() => {
-      fileStatus?.status == 'FULFILLED' &&
-        setState({
-          ...state,
-          images: [
-            ...state?.images,
-            ...fileStatus?.payload
-          ],
-        })
-    }, [fileStatus])
-  console.log('state', state)
-    const onSortEnd = ({ oldIndex, newIndex }) => {
-      setState({
-        ...state,
-        images: arrayMoveImmutable(state.images, oldIndex, newIndex),
-      })
+  //console.log('post на 85 строке ', post)
+ 
+ // console.log('filestatus ', fileStatus)
+   const [state, setState] = useState(post)
+  // console.log('state на 89 строке ', state)
+ 
+  useEffect(() => {
+    if (_id === 'new' && Object.keys(post)) {
+      clearPostOne()
+      setState(post)
+
     }
-    const onChangeTitle = (event) =>
+  }, [_id]);
+  useEffect(() => {
+    fileStatus?.status == 'FULFILLED' &&
       setState({
         ...state,
-        title: event.target.value,
+        images: [
+          ...state?.images,
+          ...fileStatus?.payload
+        ],
       })
+   
   
-    const onChangeText = (event) =>
-      setState({
-        ...state,
-        text: event.target.value,
-      })
-    const onRemoveImage = (_id) =>
-      setState({
-        ...state,
-        images: state.images.filter((item) => item._id !== _id),
-      })
-    // ReactDOM.render(  <SortableItem key={`item-${_id}`} index={index} url={url} />, mountNode)
-    return (
-      <section className="Post">
-        <Basic onLoad={onFileDrop} />
-        <SortableContainer onSortEnd={onSortEnd}>
-          {(state?.images || []).map(({ _id, url }, index) => (
-          <div >
-          <SortableItem key={`item-${_id}`} index={index} url={url} /> 
-              <button onClick={() => onRemoveImage(_id)}> x </button> 
-              </div>
-          ))}
-        </SortableContainer>
-        <h1 className="Title"> Title </h1>
-        <Input state={state.title || ''} onChangeText={onChangeTitle} />
-        <h1 className="Title"> Text </h1>
+  }, [fileStatus])
+  // useEffect(() => {
+  //   if ( fileStatus?.status== 'FULFILLED') {
+  //           message.success(`post published, can create a new one`)
+  //           history.push(`/profile/${myID}`)
+  //       } else if (fileStatus?.status === "REJECTED") {
+  //           message.error('Error')
+  //       }
   
-        <Input state={state.text || ''} onChangeText={onChangeText} />
-        <button
-          disabled={state?.images?.length == 0}
-          onClick={() => onSave(state)}
-        >
-          Save
-        </button>
-      </section>
-    )
+  // }, [fileStatus?.status])
+  console.log('post на 135 строке ', post)
+  console.log('state на 136 строке', state)
+
+  const onSortEnd = ({ oldIndex, newIndex }) => {
+    setState({
+      ...state,
+      images: arrayMoveImmutable(state.images, oldIndex, newIndex),
+    })
   }
+  const onChangeTitle = (event) =>
+    setState({
+      ...state,
+      title: event.target.value,
+    })
+  
+  const onChangeText = (event) =>
+    setState({
+      ...state,
+      text: event.target.value,
+    })
+  const onRemoveImage = (_id) =>
+    setState({
+      ...state,
+      images: state.images.filter((item) => item._id !== _id),
+    })
+    const disabledBtn = state.images && state.title && state.text ? false : true
+  
+  const savePost = () => onSave(state) && message.success(`post published, can create a new one`)
+  &&history.push(`/profile/${myID}`)
+  return (
+    <section className="Post">
+      <Basic onLoad={onFileDrop} />
+      <SortableContainer onSortEnd={onSortEnd}>
+        {(state?.images || []).map(({ _id, url }, index) => (
+          <div >
+            <SortableItem key={`item-${_id}`} index={index} url={url} />
+            <button onClick={() => onRemoveImage(_id)}> x </button>
+          </div>
+        ))}
+      </SortableContainer>
+      <h1 className="Title"> Title </h1>
+      <Input state={state.title || ''} className="Input" onChangeText={onChangeTitle} />
+      <h1 className="Title"> Text </h1>
+  
+      <Input state={state.text || ''}  className="Input" onChangeText={onChangeText} />
+      <br/>
+      <button 
+        disabled={disabledBtn} className="Link" style={{width:"40%", margin:'30px',padding:'20px'}}  
+        onClick={savePost}  >
+     
+        Save
+      </button>
+
+
+    </section>
+  )
+}
+      
  export const CPostEditor = connect(
    (state) => ({
      fileStatus: state.promise?.uploadFiles,
-     post:state?.onePost?.payload,
-     myID: state?.aboutMe?._id,
+     post:state?.post?.onePost,
+     myID: state?.profileData?.aboutMe?._id,
    
    }),
     {
       onSave: actionPostUpsert,
       onFileDrop: actionUploadFiles,
-      clearPostOne: actionClearPostsOneAC
+      clearPostOne: actionClearPostsOne
     },
   )(PostEditor)

src/components/Post.js

@@ -14,6 +14,7 @@ import { EditOutlined } from '@ant-design/icons'
 import moment from 'moment';
 import { CComments, AddComment } from '../components/Post_Comment'
 import { CPostEditor } from '../components/NewPost'
+import { actionFullOnePost} from '../reducers'
 
 import { ConstructorModal} from '../helpers'
 import React, { useMemo, useState, useEffect } from 'react'
@@ -309,7 +310,7 @@ export const PagePost = ({ my_Id, onePost, likes, addComment,
 }
 
 export const CPost = connect((state) => ({
-  onePost: state.promise.onePost?.payload,
+  onePost: state.post.onePost,
   my_Id: state.auth.payload.sub.id || '',
   aboutUser: state.profilePage?.aboutUser,
   addComment: state.promise?.addComment?.payload,
@@ -322,5 +323,5 @@ export const CPost = connect((state) => ({
   addComment: actionAddFullComment, 
   addCommentReply: actionAddSubFullComment,
   findLikes: actionFindLikes,
-  onPost:actionOnePost
+  onPost:actionFullOnePost
 })(PagePost)

src/components/Post_Comment.js

@@ -45,7 +45,7 @@ export const AddComment = ({ addComment, onePost }) => {
         onPressEnter={e => { setComment(e.target.value) }}/> 
         
         <Button size="large" disabled={text.length < 1} type="primary"
-          onClick={() => addComment(onePost?._id, text)}> Publish </Button>
+          onClick={(e) => addComment(onePost?._id, text)&&setComment(e.target.value="")}> Publish </Button>
       {console.log('comment ', text )}
      
       <SmileOutlined className='smile-btn' style={{ fontSize: 'xx-large' }} 

src/reducers/index.js

@@ -2,7 +2,7 @@ import thunk from 'redux-thunk';
 import {
   actionAuthLogin, gql, actionPromise,
   actionAllPosts, actionAboutMe, actionAllPostsUser, actionAboutUser,
-  actionPostsFeed,actionPostsFeedCount,
+  actionPostsFeed,actionPostsFeedCount,actionOnePost
 } from '../actions'
 import { createStore, combineReducers, applyMiddleware } from 'redux';
 
@@ -114,7 +114,7 @@ export const profileUserReducer = (state = {}, { type, aboutUser, allPosts }) =>
         console.log('SKIIIP ', skip)
         const newPosts = await dispatch(actionPostsFeed(getState, skip))
         if (newPosts) {
-          dispatch(actionFeedType(newPosts));
+          await dispatch(actionFeedType(newPosts));
           const postsFeedCount = await dispatch(actionPostsFeedCount(getState))
           console.log('postsFeedCount ', postsFeedCount)
         }
@@ -122,7 +122,7 @@ export const profileUserReducer = (state = {}, { type, aboutUser, allPosts }) =>
         }
      
     }
-    export const actionOnePost= (onePost) =>
+    export const actionOnePostType= (onePost) =>
     ({ type: 'ONE-POST', onePost })
   
   export const actionClearFeedPosts = () => ({ type: 'DELETE-POSTS' });
@@ -130,10 +130,12 @@ export const profileUserReducer = (state = {}, { type, aboutUser, allPosts }) =>
   export const actionFullClearFeedPosts = () => (dispatch) => {
     return dispatch(actionClearFeedPosts())
   }
-  export const actionFullOnePost = () =>
-    async (dispatch, getState) => {
-  
-  const onePost = await dispatch(actionOnePost(getState))
+  export const actionFullOnePost = (_id) =>
+    async (dispatch) => {
+      console.log('ID POST ', _id)
+      const onePost = await dispatch(actionOnePost(_id))
+      console.log(' one post ', onePost)
+      
     //  const skip = postsFeed.length
     // console.log('postsFeed ', postsFeed)
     // const postsFeedCount = await dispatch(actionPostsFeedCount(getState))
@@ -142,8 +144,9 @@ export const profileUserReducer = (state = {}, { type, aboutUser, allPosts }) =>
       // {
       //   console.log('SKIIIP ', skip)
       //   const newPosts = await dispatch(actionPostsFeed(getState, skip))
-        if (onePost) {
-          dispatch(actionOnePost(onePost));
+      if (onePost) {
+        console.log('УСПЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕХ')
+         await dispatch(actionOnePostType(onePost));
           console.log('onePost ', onePost)
         }
       }
@@ -168,12 +171,11 @@ export const feedReducer = (state = {}, {skip, type, newPosts=[], postsFeed,post
     }
     return state
   }
-  export const postReducer = (state = {}, {skip, type, newPosts=[], postsFeed,postsFeedCount }) => {
+  export const postReducer = (state = {}, {skip, type, newPosts=[],onePost, postsFeed,postsFeedCount }) => {
     const types = {
-      'ADD-POSTS': () => {
+      'ONE-POST': () => {
         return {
-          ...state,
-         onePost: state?.onePost
+          ...state,onePost
         }
       },
       'CLEAR-POST-ONE': () => {
@@ -223,7 +225,7 @@ export const profileReducer = (state = {}, { type, aboutMe, newResult }) => {
     }
     return state || {}
   }
-  export const actionClearPostsOneAC = () => ({ type: 'CLEAR-POST-ONE' })
+  export const actionClearPostsOne = () => ({ type: 'CLEAR-POST-ONE' })
 
  export const store = createStore(
     combineReducers({