added react-sortaible-hoc and upload photo

src/actions/actionQueries.js

@@ -12,12 +12,9 @@ export const queries = {
                                     avatar {url}
                                 }
                             answers{
-                                _id createdAt text 
-                                likes{ _id} 
-                                }
-                            answerTo {
-                                    _id text createdAt
+                                _id 
                                 }
+                               answerTo{_id} 
                             }
                         likes{ _id
                             owner{_id}

src/actions/index.js

@@ -204,6 +204,7 @@ export const actionFindLikeComment = (findId) =>
         }
     }`, { id: JSON.stringify([{ _id: findId }]) }))
 
+
 //****************---Action Subscribe ---*************************//
 
 
@@ -232,6 +233,7 @@ export const actionUpdateMyFollowing = (_id) =>
                             following {_id nick login}
         }
     }`, { id: JSON.stringify([{ _id }]) }))
+
 export const actionUpdateFollowers = (_id) =>
     actionPromise('upDateFollowers', gql(` query followers($id:String!){
         UserFindOne(query: $id){
@@ -244,21 +246,49 @@ export const actionUpdateFollowers = (_id) =>
 
 
 export const actionAddCommentAC = (findId, newResult) => ({ type: 'ADD-COMMENT', findId, newResult })
-export const actionFullAddComment = (findId, text) => ({ type: 'COMMENT_POST', findId, text })
+export const actionUpdateSubCommentAC = (findId, newResult) => ({ type: 'UPDATE-SUBCOMMENT', findId, newResult })
 
-export const actionAddComment = (findId, text) =>
+export const actionFullAddComment = (postId, text) => ({ type: 'COMMENT_POST', postId, text })
+export const actionAddSubComment = (commentId, text) => ({ type: 'ADD_SUB_COMMENT', commentId, text })
+export const actionSubComment = (commentId) => ({ type: 'FIND_SUBCOMMENT', commentId })
+
+export const actionAddComment = (postId, text) =>
     actionPromise('addcomment', gql(`mutation addcomment($comment: CommentInput ){
         CommentUpsert(comment:$comment){
             _id text
         }
-    }`, { comment: { post: { _id: findId }, text } }))
+    }`, { comment: { post: { _id: postId }, text } }))
+
 export const actionFindComment = (findId) =>
     actionPromise('findCommentPost', gql(`query commentFindPost ($id:String!){
         PostFindOne(query:$id){
-            comments{_id text owner{_id nick login} likes{_id}}
+            comments{_id text owner{_id nick login avatar{_id url}} likes{_id}}
         }
     }`, { id: JSON.stringify([{ _id: findId }]) }))
 
+export const actionFindSubComment = (findId) =>
+    actionPromise('findSubCommentPost#' + findId, gql(`query commentFindOne ($id:String!){
+        CommentFindOne(query:$id){
+             answers{
+                _id text createdAt
+                owner{ _id nick login } 
+                likes{_id}
+                answerTo{_id text 
+                    owner{_id nick login avatar{_id url}} 
+                    likes{_id}
+                }
+                answers{ _id }
+            }
+        } 
+    }`, { id: JSON.stringify([{ _id: findId }]) }))
+
+export const actionSubAddComment = (commentId, text, _id) =>
+    actionPromise('addcomment', gql(`mutation addcomment($comment: CommentInput ){
+        CommentUpsert(comment:$comment){
+            _id text
+        }
+    }`, { comment: { answerTo: { _id: commentId }, text } }))
+
 
 //****************---Action Udate Avatar ---*************************//
 

src/components/main/Add.js

@@ -3,8 +3,8 @@ import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
 import { connect } from 'react-redux';
 import { Upload, message } from 'antd';
 import { backURL, gql } from '../../helpers';
-import { Adafghh, Loo } from './Loo';
 import { actionUpdateAvatar } from '../../actions';
+import { Apps } from './new';
 
 const Add = ({ imageUrl, onUploadFile }) => {
     const [loading, setLoading] = useState(false)
@@ -22,7 +22,7 @@ const Add = ({ imageUrl, onUploadFile }) => {
         }
         if (file.status === 'done') {
             message.success(`${file.name} file uploaded successfully`);
-            await onUploadFile(file.response)
+            // await onUploadFile(file.response)
             console.log(file);
             setImageLoad(true)
             setLoading(false)
@@ -49,11 +49,101 @@ const Add = ({ imageUrl, onUploadFile }) => {
             <hr />
             <hr />
             <hr />
-            <Loo />
-            <Adafghh />
+            <Apps />
         </>
 
     )
 }
 
-export const CAdd = connect(state => ({ imageUrl: state?.myData?.avatar?.url }), { onUploadFile: actionUpdateAvatar })(Add)
+export const CAdd = connect(state => ({ imageUrl: state?.myData?.avatar?.url }), { onUploadFile: actionUpdateAvatar })(Add)
+
+
+
+
+// function getBase64(file) {
+//   return new Promise((resolve, reject) => {
+//     const reader = new FileReader();
+//     reader.readAsDataURL(file);
+//     reader.onload = () => resolve(reader.result);
+//     reader.onerror = error => reject(error);
+//   });
+// }
+
+// class PicturesWall extends React.Component {
+//   state = {
+//     previewVisible: false,
+//     previewImage: '',
+//     fileList: [
+//       {
+//         uid: '-1',
+//         name: 'image.png',
+//         status: 'done',
+//         url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+//       },
+//       {
+//         uid: '-2',
+//         name: 'image.png',
+//         status: 'done',
+//         url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+//       },
+//       {
+//         uid: '-3',
+//         name: 'image.png',
+//         status: 'done',
+//         url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+//       },
+//       {
+//         uid: '-4',
+//         name: 'image.png',
+//         status: 'done',
+//         url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+//       },
+//       {
+//         uid: '-5',
+//         name: 'image.png',
+//         status: 'error',
+//       },
+//     ],
+//   };
+
+//   handleCancel = () => this.setState({ previewVisible: false });
+
+//   handlePreview = async file => {
+//     if (!file.url && !file.preview) {
+//       file.preview = await getBase64(file.originFileObj);
+//     }
+
+//     this.setState({
+//       previewImage: file.url || file.preview,
+//       previewVisible: true,
+//     });
+//   };
+
+//   handleChange = ({ fileList }) => this.setState({ fileList });
+
+//   render() {
+//     const { previewVisible, previewImage, fileList } = this.state;
+//     const uploadButton = (
+//       <div>
+//         <Icon type="plus" />
+//         <div className="ant-upload-text">Upload</div>
+//       </div>
+//     );
+//     return (
+//       <div className="clearfix">
+//         <Upload
+//           action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+//           listType="picture-card"
+//           fileList={fileList}
+//           onPreview={this.handlePreview}
+//           onChange={this.handleChange}
+//         >
+//           {fileList.length >= 8 ? null : uploadButton}
+//         </Upload>
+//         <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+//           <img alt="example" style={{ width: '100%' }} src={previewImage} />
+//         </Modal>
+//       </div>
+//     );
+//   }
+// }

src/components/main/Loo.js

@@ -1,160 +0,0 @@
-import { Upload, Modal } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
-import { backURL } from '../../helpers';
-import React, { Component } from 'react';
-import { render } from 'react-dom';
-import { arrayMove, sortableContainer, sortableElement } from 'react-sortable-hoc';
-
-function getBase64(file) {
-    return new Promise((resolve, reject) => {
-
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = () => resolve(reader.result);
-        reader.onerror = error => reject(error);
-    });
-}
-
-export class Loo extends React.Component {
-    state = {
-        previewVisible: false,
-        previewImage: '',
-        previewTitle: '',
-        fileList: [
-            {
-                uid: '-1',
-                name: 'image.png',
-                status: 'done',
-                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-            },
-            {
-                uid: '-2',
-                name: 'image.png',
-                status: 'done',
-                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-            },
-            {
-                uid: '-3',
-                name: 'image.png',
-                status: 'done',
-                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-            },
-            {
-                uid: '-4',
-                name: 'image.png',
-                status: 'done',
-                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-            },
-            {
-                uid: '-xxx',
-                percent: 50,
-                name: 'image.png',
-                status: 'uploading',
-                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-            },
-            {
-                uid: '-5',
-                name: 'image.png',
-                status: 'error',
-            },
-        ],
-    };
-
-    handleCancel = () => this.setState({ previewVisible: false });
-
-    handlePreview = async (file, fileList) => {
-        console.log(fileList);
-        if (!file.url && !file.preview) {
-            file.preview = await getBase64(file.originFileObj);
-        }
-
-        this.setState({
-            previewImage: file.url || file.preview,
-            previewVisible: true,
-            previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
-        });
-    };
-
-    handleChange = ({ file, fileList }) => {
-        if (file.status === 'uploading') {
-            // setLoading(true)
-        }
-        if (file.status === 'done') {
-            console.log(fileList);
-            // message.success(`${file.name} file uploaded successfully`);
-            // await onUploadFile(file.response)
-            // setImageLoad(true)
-            // setLoading(false)
-        } else if (file.status === 'error') {
-            // message.error(`${file.name} file upload failed.`);
-        }
-        this.setState({ fileList });
-    }
-    render() {
-        const { previewVisible, previewImage, fileList, previewTitle } = this.state;
-        const uploadButton = (
-            <div>
-                <PlusOutlined />
-                <div style={{ marginTop: 8 }}>Upload</div>
-            </div>
-        );
-        const props = {
-            name: 'photo',
-            action: `${backURL}/upload`,
-            headers: localStorage.authToken || sessionStorage.authToken ? { Authorization: 'Bearer ' + (localStorage.authToken || sessionStorage.authToken) } : {}
-        }
-        return (
-            <>
-                <Upload {...props}
-                    listType="picture-card"
-                    multiple={true}
-                    onPreview={this.handlePreview}
-                    onChange={this.handleChange}
-                >
-                    {fileList.length >= 8 ? null : uploadButton}
-                </Upload>
-                {/* <Modal
-                    visible={previewVisible}
-                    title={previewTitle}
-                    footer={null}
-                    onCancel={this.handleCancel}
-                >
-                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
-                </Modal> */}
-            </>
-        );
-    }
-}
-
-
-const SortableItem = sortableElement(({ value }) => <li>{value}</li>);
-
-const SortableContainer = sortableContainer(({ children }) => {
-    return <ul>{children}</ul>;
-});
-
-export class Adafghh extends Component {
-    state = {
-        items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
-    };
-
-    onSortEnd = ({ oldIndex, newIndex }) => {
-        this.setState(({ items }) => ({
-            items: arrayMove(items, oldIndex, newIndex),
-        }));
-    };
-
-    render() {
-
-        const { items } = this.state;
-
-        return (
-            <SortableContainer onSortEnd={this.onSortEnd} >
-                {items.map((value, index) => (
-                    <SortableItem key={`item-${value}`} index={index} axis="xy" value={value} />
-                ))}
-            </SortableContainer>
-        );
-    }
-}
-

src/components/main/new/index.js

@@ -0,0 +1,133 @@
+import { PlusOutlined } from "@ant-design/icons";
+import { Button, message,Icon,  Upload } from "antd";
+import React, { useState } from "react";
+import ReactDOM from "react-dom";
+import {
+    arrayMove,
+    SortableContainer,
+    SortableElement,
+    SortableHandle
+} from "react-sortable-hoc";
+import { backURL } from "../../../helpers";
+
+import style from "./styles.scss";
+
+
+function getBase64(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = error => reject(error);
+    });
+}
+
+
+
+const Handle = SortableHandle(({ props, tabIndex }) => {
+    return (
+        < div className={style.handle} tabIndex={tabIndex} >
+            box
+            <img src={`${backURL + '/' + props.response.url}`} alt="avatar" style={{ width: '100%' }} />
+
+        </ div>
+    )
+})
+
+
+
+const SortableItem = SortableElement(props => {
+    const { value } = props;
+    console.log(props);
+    return (
+        <div className="qq">
+            <div className="content">
+                {props.shouldUseDragHandle && <Handle props={value} />}
+            </div>
+            {/* <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+                <img alt="example" style={{ width: '100%' }} src={previewImage} />
+            </Modal> */}
+        </div>
+
+    );
+});
+
+   const props = {
+        name: 'photo',
+        action: `${backURL}/upload`,
+        headers: localStorage.authToken || sessionStorage.authToken ? { Authorization: 'Bearer ' + (localStorage.authToken || sessionStorage.authToken) } : {}
+    }
+
+const SortableList = SortableContainer(({ items, handlerChange, ...restProps }) => {
+ 
+    return (
+        <div className='ww'>
+            {items.map((item, index) => (
+                <SortableItem
+                    key={`item-${item.uid}`}
+                    index={index}
+                    value={item}
+                    {...restProps}
+                />
+
+            ))}
+        
+        </div>
+    );
+});
+
+
+export function Apps() {
+    const [photos, setPhotos] = useState([]);
+    const [loading, setLoading] = useState(false)
+    const [imageLoad, setImageLoad] = useState(false)
+
+
+    const handlerChange = async ({ file, fileList }) => {
+        if (file.status === 'uploading') {
+            // setLoading(true)
+        }
+        if (file.status === 'done') {
+            console.log(file, fileList);
+            setPhotos([...photos, file])
+            message.success(`${file.name} file uploaded successfully`);
+            // // await onUploadFile(file.response)
+            // console.log(file);
+            // setImageLoad(true)
+            // setLoading(false)
+        } else if (file.status === 'error') {
+            // message.error(`${file.name} file upload failed.`);
+        }
+    }
+console.log(photos);
+    const onSortEnd = ({ oldIndex, newIndex }) => {
+        setPhotos(arrayMove(photos, oldIndex, newIndex));
+    };
+
+    return (
+        <div className="rrr" >
+            <SortableList
+                shouldUseDragHandle={true}
+                useDragHandle
+                axis="xy"
+                items={photos}
+                loading={loading}
+                handlerChange={handlerChange}
+                onSortEnd={onSortEnd}
+            />
+            <Upload {...props}
+                multiple={true}
+                listType="picture-card"
+                showUploadList={false}
+                onChange={handlerChange}>
+                {/* {items.length >= 8 ? null : <div>
+                    <PlusOutlined />
+                
+                </div>} */} 
+                <div className="ant-upload-text">Upload</div>
+            </Upload>   
+        </div>
+    );
+}
+
+

src/components/main/new/styles.css

@@ -0,0 +1,4 @@
+.App {
+  font-family: sans-serif;
+  text-align: center;
+}

src/components/main/new/styles.scss

@@ -0,0 +1,45 @@
+.App {
+    font-family: sans-serif;
+    text-align: center;
+}
+
+.handle {
+    display: block;
+    width: 18px;
+    height: 18px;
+    margin-right: 20px;
+    overflow: hidden;
+
+    > svg {
+        opacity: 0.3;
+    }
+
+    cursor: grab;
+}
+.qq {
+    float: left;
+    padding-left: 8px;
+    padding-right: 8px;
+    width: calc(25% - 16px);
+    .content {
+        padding: 8px 12px;
+        background-color: #ddd;
+        height: 150px;
+        background-color: blue;
+    }
+}
+.ww {
+    background-color: #ddd;
+    margin-left: -8px;
+    margin-right: -8px;
+    white-space: nowrap;
+    &:after {
+        content: "";
+        clear: both;
+        display: table;
+    }
+}
+.rrr {
+    width: 600px;
+    margin: 0 auto;
+}

src/components/main/postsFeed/FieldComment.jsx

@@ -4,10 +4,10 @@ import TextArea from 'antd/lib/input/TextArea'
 import { SendOutlined, } from '@ant-design/icons'
 import { connect } from 'react-redux'
 import { Button, Col, Row } from 'antd'
-import { actionFullAddComment } from '../../../actions'
+import { actionAddSubComment, actionFullAddComment } from '../../../actions'
 
 
-const FieldCommentSend = ({ postId, sentComment }) => {
+const FieldCommentSend = ({ id, sentComment }) => {
     const [commentValue, setCommentValue] = useState('')
     const [error, setError] = useState(false)
 
@@ -17,7 +17,7 @@ const FieldCommentSend = ({ postId, sentComment }) => {
     }
     const sendCommentValid = (value) => {
         if (value.trim() !== '') {
-            sentComment(postId, value.trim())
+            sentComment(id, value.trim())
             setCommentValue('')
         } else {
             setError(true)
@@ -48,4 +48,6 @@ const FieldCommentSend = ({ postId, sentComment }) => {
     )
 }
 
-export const CFieldCommentSend = connect(null, { sentComment: actionFullAddComment })(FieldCommentSend)
+export const CFieldCommentSend = connect(null, { sentComment: actionFullAddComment })(FieldCommentSend)
+
+export const CFieldSubCommentSend = connect(null, { sentComment: actionAddSubComment })(FieldCommentSend)

src/pages/PostPage.jsx

@@ -4,14 +4,14 @@ import { connect } from 'react-redux'
 import PostImage from '../components/main/postsFeed/PostImage'
 import { PostTitle, PostDescription } from './MainPostsFeed';
 import Text from 'antd/lib/typography/Text';
-import { CFieldCommentSend } from '../components/main/postsFeed/FieldComment';
+import { CFieldCommentSend, CFieldSubCommentSend } from '../components/main/postsFeed/FieldComment';
 import { CPostUserPanel } from '../components/main/postsFeed/PostUserPanel';
 import { Comment, Tooltip, Avatar } from 'antd';
 import moment from 'moment';
 import { UserAvatar } from './Header';
 import { Link } from 'react-router-dom';
 import { LikeFilled, LikeOutlined } from '@ant-design/icons';
-import { actionLikeComment, actionAddLikeCommentAC, actionFindLikeComment, actionDelLikeComment } from '../actions';
+import { actionLikeComment, actionAddLikeCommentAC, actionFindLikeComment, actionDelLikeComment, actionFindSubComment, actionSubComment } from '../actions';
 
 
 const PostPageTitle = ({ data: { owner } }) =>
@@ -29,9 +29,8 @@ const PostCommentAuthor = ({ owner }) => {
 }
 
 
-const PostComment = ({ myID, data: { _id, answerTo, answers, createdAt, likes = [], text, owner }, addLikeComment, removeLikeComment, children }) => {
+const PostComment = ({ myID, cId, data: { _id, answerTo, answers, createdAt, likes = [], text, owner }, addLikeComment, removeLikeComment, findSubComment }) => {
     const [open, setOpen] = useState(false);
-
     let likeStatus
     let likeId
     likes.find(l => {
@@ -44,20 +43,21 @@ const PostComment = ({ myID, data: { _id, answerTo, answers, createdAt, likes =
     })
 
     const changeLike = () => likeStatus ? removeLikeComment(likeId, _id) : addLikeComment(_id)
-
+    // 
+{ console.log(_id, cId); }
     const actions = [
         <span onClick={changeLike}>
             {likeStatus ? <LikeFilled /> : <LikeOutlined />}
             <span style={{ paddingLeft: 8, cursor: 'auto' }}>{likes.length ? likes.length : ''}</span>
         </span>,
         <span onClick={() => setOpen(true)}>Reply to</span>,
-        open && <CFieldCommentSend onFocus />
+
     ];
     return (
         <Comment
             actions={actions}
             author={<PostCommentAuthor owner={owner} />}
-            avatar={< UserAvatar avatar={owner.avatar} avatarSize={'35px'} />}
+            avatar={< UserAvatar avatar={owner?.avatar} avatarSize={'35px'} />}
             content={<p>{text}</p >}
             datetime={
                 < Tooltip title={moment(new Date(+createdAt)).format('DD-MM-YYYY HH:mm:ss')} >
@@ -67,7 +67,17 @@ const PostComment = ({ myID, data: { _id, answerTo, answers, createdAt, likes =
                 </ Tooltip>
             }
         >
-            {children}
+            {answers?.length >= 0 && <Divider plain>
+                <Text type='secodary' onClick={() => findSubComment(_id)}>View answers</Text>
+            </Divider>}
+            {answers?.length >= 0 && answers.map(a => {
+                if (Object.keys(a).length > 1) {
+                    return <CPostComment key={a._id} data={a} cId={cId} />
+                }
+
+            })}
+
+            {open && <CFieldSubCommentSend id={_id}/>}
         </Comment>
     )
 }
@@ -76,6 +86,7 @@ const CPostComment = connect(state => ({
 }), {
     addLikeComment: actionLikeComment,
     removeLikeComment: actionDelLikeComment,
+    findSubComment: actionSubComment,
 }
 )(PostComment)
 
@@ -83,7 +94,7 @@ const PostComments = ({ comments }) => {
     return (
         <>
             {
-                comments.map(c => <CPostComment key={c._id} data={c}></CPostComment>)
+                comments.map(c => <CPostComment key={c._id} data={c} cId={c._id} />)
             }
         </>
     )
@@ -97,7 +108,7 @@ const PostPageDescrption = ({ data: { _id, likes, text, title, createdAt, } }) =
     <div className='PostOne__description-inner'>
         <div className='PostOne__description-top'>
             <PostDescription title={title} description={text} date={createdAt} />
-            <Divider plain><Text type='secodary'></Text>Comments</Divider>
+            <Divider plain><Text type='secodary'>Comments</Text></Divider>
             <CPostComments />
         </div>
         <div className='PostOne__description-bottom'>

src/redux/reducers/postFeed-reducer.js

@@ -49,10 +49,36 @@ export const postsFeedReducer = (state = {}, { type, findId, newResult, userData
         'ADD-COMMENT': () => {
             return {
                 ...state,
-                posts: posts.map(p => p._id === findId ? { ...p, comments: [...newResult] } : p)
+                posts: Array.isArray(posts)
+                    ? posts.map(p => p._id === findId ? { ...p, comments: [...newResult] } : p)
+                    : { ...state.posts, comments: [...newResult] },
+            }
+        },
+        'UPDATE-SUBCOMMENT': () => {
+            return {
+                ...state,
+                posts: {
+                    ...state.posts,
+                    comments: posts.comments.map(c => c._id === findId ? c = { ...c, answers: [...newResult] } : c)
+                }
             }
+
         },
         'ADD-LIKE-COMMENT': () => {
+            console.log(state);
+            for (const answers of state.posts.comments) {
+                console.log(answers);
+            }
+            // const newState = [...state].posts.comments.map(c)
+            // function findNode(id, currentNode) {
+            //     if (id == currentNode.id) {
+            //         return currentNode;
+            //     } else {
+            //         currentNode.children.forEach(function (currentChild) {
+            //             findNode(id, currentChild);
+            //         });
+            //     }
+            // }
             return {
                 ...state,
                 posts: {
@@ -62,6 +88,7 @@ export const postsFeedReducer = (state = {}, { type, findId, newResult, userData
             }
         },
         'REMOVE-LIKE-COMMENT': () => {
+            // console.log(state);
             return {
                 ...state,
                 posts: {