Browse Source

edit avatar, edit post, start add comments

LenDoc 2 years ago
parent
commit
ce6d8efa2f
10 changed files with 416 additions and 95 deletions
  1. 22 0
      package-lock.json
  2. 2 0
      package.json
  3. 2 1
      public/index.html
  4. 17 8
      src/App.js
  5. 1 0
      src/App.scss
  6. 99 26
      src/actions/index.js
  7. 47 10
      src/components/DropZone.js
  8. 37 23
      src/components/NewPost.js
  9. 20 9
      src/components/Post.js
  10. 169 18
      src/components/User.js

+ 22 - 0
package-lock.json

@@ -15,6 +15,7 @@
         "antd": "^4.18.6",
         "antd-img-crop": "^4.1.0",
         "array-move": "^4.0.0",
+        "cors": "^2.8.5",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-dropzone": "^12.0.2",
@@ -5559,6 +5560,18 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
@@ -21080,6 +21093,15 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "cosmiconfig": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",

+ 2 - 0
package.json

@@ -2,6 +2,7 @@
   "name": "hipstagram",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:5000",
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
     "@testing-library/jest-dom": "^5.16.2",
@@ -10,6 +11,7 @@
     "antd": "^4.18.6",
     "antd-img-crop": "^4.1.0",
     "array-move": "^4.0.0",
+    "cors": "^2.8.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-dropzone": "^12.0.2",

+ 2 - 1
public/index.html

@@ -18,6 +18,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-   
+    <div id="container" style="padding: 24px"> </div>
+    
   </body>
 </html>

+ 17 - 8
src/App.js

@@ -5,7 +5,7 @@ import createHistory from 'history/createBrowserHistory'
 import React, { useMemo, useState, useEffect } from 'react'
 import { store } from './reducers'
 import { Basic } from './components/DropZone'
-import {CPageAboutUser} from './components/User'
+import {CPageAboutUser,PageAboutUser} from './components/User'
 import { PageCreatePost,AddPost } from './components/NewPost'
 import {CPost,MyCarousel } from './components/Post'
 
@@ -14,7 +14,7 @@ import { arrayMove, arrayMoveImmutable, arrayMoveMutable } from 'array-move'
 import 'antd/dist/antd.css'
 
 import {
-  backendURL,
+  // backendURL,
   actionAboutMe,
   actionSetAvatar,
   actionPostsFeed,
@@ -56,7 +56,7 @@ const MyPostFeed =({postsFeed, onPostsFeed})=>{
 
   <div>
   {  
-
+// backendURL +
     (postsFeed||[]).map(({images, title,text,owner})=>(
      
      <div style={{borderWidth:'10',
@@ -67,7 +67,7 @@ const MyPostFeed =({postsFeed, onPostsFeed})=>{
       {owner?.avatar ? (
         <Avatar
           style={{ width: '50px', height: '50px' }}
-          src={backendURL + '/' + owner?.avatar?.url}
+          src={ '/' + owner?.avatar?.url}
         />
       ) : (
         <Avatar style={{ width: '50px', height: '50px' }} src={user} />
@@ -123,6 +123,7 @@ const Main = () => (
       <Route path="/edit/post" component={PageCreatePost} />
       <Route path="/post/:_id" component={CPost} />
       <Route path="/feed" component={CPostForFeed} />
+      <Route path="/editProfile" component={CUserEdit} />
 
       {/* <CBasic /> */}
     </Switch>
@@ -135,13 +136,14 @@ const ResultUserFind =({userFind})=>
   <Link to={`/profile/${_id}`} >
     <Avatar
           style={{ width: '20px', height: '20px',marginRight:'30px', position: 'absolute' }}
-          src={backendURL + '/' + avatar?.url || user}
+          src={ '/' + avatar?.url || user}
         />
        
           <h3 style={{ marginLeft:'30px'}} > {login}</h3>
   </Link>
 ))}
 </div>
+// backendURL
 
 const SearchUser =({onSearch,searchUser})=>{
   // const [value, setValue]=useState('')
@@ -159,7 +161,11 @@ return <>
 </Popover>
 </>
 }
-const CSearch = connect((state)=>({searchUser:state.promise?.searchUser?.payload}), {onSearch:actionSearchUser})(SearchUser)
+const CSearch = connect((state)=>({searchUser:state.promise?.searchUser?.payload}),
+ {onSearch:actionSearchUser})(SearchUser)
+const CUserEdit = connect((state)=>({}),
+{}
+)(PageAboutUser)
 const Feed = ({aboutMe,onAllFollowing, onPostsFeed, postsFeed}) => {
 console.log('POST FEED', postsFeed)
 return <> 
@@ -191,10 +197,10 @@ const CBasic = connect(null, { onLoad: actionSetAvatar })(Basic)
 const User = ({ aboutMe: { _id, login, avatar } = {} }) => (
 
   <Link className="User" to={`/profile/${_id}`}>
-    <Avatar src={backendURL + '/' + avatar?.url || user} />
+    <Avatar src={ '/' + avatar?.url || user} />
   </Link>
 )
-
+// backendURL
 const CUser = connect((state) => ({ aboutMe: state.promise.aboutMe?.payload }))(
   User
 )
@@ -241,6 +247,9 @@ function App() {
           <Main />
           <CProtectedRoute roles={["anon"]} fallback="/dashboard"
            path="/register" component={PageRegister}/>
+           
+
+
           {/* <CPostEditor /> */}
           {/* <CPost /> */}
           {/* <Gallery/> */}

+ 1 - 0
src/App.scss

@@ -1,6 +1,7 @@
 .App {
   // text-align: center;
 }
+@import '~antd/dist/antd.css';
 .Dropzone{
   flex: 1;
   display: flex;

+ 99 - 26
src/actions/index.js

@@ -1,8 +1,8 @@
 export const actionAuthLogin = (token) => ({ type: 'AUTH_LOGIN', token })
 export const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' })
-
 export const getGQL = (url) => (query, variables) =>
   fetch(url, {
+
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -21,9 +21,8 @@ export const getGQL = (url) => (query, variables) =>
       }
     })
 
-export const backendURL = 'http://hipstagram.asmer.fs.a-level.com.ua'
 
-export const gql = getGQL(backendURL + '/graphql')
+export const gql = getGQL('/graphql');
 
 export const actionPending = (name) => ({
   type: 'PROMISE',
@@ -90,7 +89,7 @@ export const actionFullRegister = (login, password) => async (dispatch) => {
 export const uploadFile = (file) => {
   const myForm = new FormData()
   myForm.append('photo', file)
-  return fetch(backendURL + '/upload', {
+  return fetch('/upload', {
     method: 'POST',
     headers: localStorage.authToken
       ? { Authorization: 'Bearer ' + localStorage.authToken }
@@ -106,7 +105,8 @@ export const actionUploadFiles = (files) =>
     'uploadFiles',
     Promise.all(files.map((file) => uploadFile(file))),
   )
-const actionAvatar = (imageId) => async (dispatch, getState) => {
+
+export const actionAvatar = (imageId) => async (dispatch, getState) => {
   await dispatch(
     actionPromise(
       'setAvatar',
@@ -123,6 +123,24 @@ const actionAvatar = (imageId) => async (dispatch, getState) => {
     ),
   )
 }
+
+// export const actionChangeLogin = (imageId) => async (dispatch, getState) => {
+//   await dispatch(
+//     actionPromise(
+//       'changeLogin',
+//       gql(
+//         `mutation setAvatar($imageId:ID, $userId:String){
+//     UserUpsert(user:{_id: $userId, avatar: {_id: $imageId}}){
+//     _id, avatar{
+//         _id
+//     }
+//     }
+//     }`,
+//         { imageId, userId: getState().auth?.payload?.sub?.id },
+//       ),
+//     ),
+//   )
+// }
 export const actionAboutMe = () => async (dispatch, getState) => {
   await dispatch(
     actionPromise(
@@ -163,27 +181,41 @@ mutation PostUpsert($post:PostInput){
     ),
   )
 
-export const actionAllPosts = () => async (dispatch, getState) => {
-  await dispatch(
-    actionPromise(
-      'allPosts',
-      gql(
-        `query allPosts($userId:String){
-  PostFind(query:$userId){
-           owner{_id} _id title text images{_id url}
-    }
-}`,
-        {
-          userId: JSON.stringify([
-            { ___owner: getState().auth?.payload?.sub?.id },
+// export const actionAllPosts = () => async (dispatch, getState) => {
+//   await dispatch(
+//     actionPromise(
+//       'allPosts',
+//       gql(
+//         `query allPosts($userId:String!){
+//   PostFind(query:$userId){
+//            owner{_id} _id title text images{_id url}
+//     }
+// }`,
+//         {
+//           userId: JSON.stringify([
+//             { ___owner: getState().auth?.payload?.sub?.id },
+
+//             { sort: [{ _id: -1 }] },
+//           ]),
+//         },
+//       ),
+//     ),
+//   )
+// }
+
+
+export const actionAllPosts = () =>
+    actionPromise('allPosts', 
+    gql(` query allPosts($_id:String!){
+                PostFind(query:$_id){
+                  owner{_id} _id title text images{_id url}
+                }
+            }`, {
+        _id: JSON.stringify([{}, {
+            sort: [{ _id: -1 }],
+        }])
+    }))
 
-            { sort: [{ _id: -1 }] },
-          ]),
-        },
-      ),
-    ),
-  )
-}
 export const actionOnePost = (_id) => async (dispatch) => {
   await dispatch(
     actionPromise(
@@ -192,6 +224,8 @@ export const actionOnePost = (_id) => async (dispatch) => {
         `query OneFind($post:String){
          PostFindOne(query:$post){
         _id title text images{_id url}
+        comments{_id, createdAt, text owner{login}}
+
     }
 }`,
         {
@@ -244,6 +278,8 @@ export const actionSetAvatar = (file) => async (dispatch) => {
   let result = await dispatch(actionUploadFile(file))
   if (result) {
     await dispatch(actionAvatar(result._id))
+    // await dispatch(actionAvatar(result._id))
+
     await dispatch(actionAboutMe())
   }
 }
@@ -298,4 +334,41 @@ export const actionSearchUser =(userName)=> async (dispatch)=>{
                 ])
     })
   ))
-}
+}
+
+export const actionUserUpsert = (user) => async (dispatch, getState) => {
+
+  await dispatch(
+      actionPromise(
+          "userUpsert",
+          gql(
+              `mutation UserUpsert($user:UserInput){
+                  UserUpsert(user:$user){
+                      _id login nick avatar{_id}
+                  }
+              }`,
+              {
+                  user: { ...user, 
+                    _id:  JSON.stringify([{ _id: 
+                      getState().auth?.payload?.sub?.id }]),
+                  },
+              }
+          )
+      )
+  );
+};
+
+export const actionUserUpdate =
+    (user = {}) =>
+    async (dispatch, getState) => {
+        await dispatch(actionUserUpsert(user));
+        const {
+            promise: {
+              userUpsert: { status },
+            },
+        } = getState();
+        if (status === "FULFILLED") {
+            await dispatch(actionAboutMe());
+        }
+        await dispatch(actionAboutMe());
+    };

+ 47 - 10
src/components/DropZone.js

@@ -1,9 +1,12 @@
 import { useDropzone } from 'react-dropzone'
 import React, { useMemo, useState, useEffect } from 'react'
-import { Upload, Button, DatePicker, Space } from 'antd'
+import { Upload, Button, DatePicker } from 'antd'
 import { UploadOutlined,SearchOutlined } from '@ant-design/icons'
 import { sortableContainer, sortableElement } from 'react-sortable-hoc'
-import {backendURL} from '../actions'
+import { Router, Route, Link, Redirect, Switch } from 'react-router-dom'
+
+// import {backendURL} from '../actions'
+import { Image } from 'antd';
 import { arrayMove, arrayMoveImmutable, arrayMoveMutable } from 'array-move'
 
 export function Basic({ onLoad }) {
@@ -35,15 +38,46 @@ export function Basic({ onLoad }) {
     )
   }
   
-export const SortableItem = sortableElement(({ url }) => (
+
+  export function ImageDemo({_id,index,url}) {
+    return (
+     <SortableItem url={url} key={`item-${_id}`} index={index} />
+    );
+  }
+export const SortableItem = sortableElement(({ url }) => {
+ // const [visible, setVisible] = useState(false);
+ const [visible, setVisible] = useState(false)
+console.log('STATE PHOTO ', visible)
+//  preview={{
+//   visible,
+//   src:  '/' + value.url,
+//   onVisibleChange: value => {
+//       setVisible(value);
+//   }}}
+  return (
     <li>
-      <img
-        src={backendURL + '/' + url}
-        style={{ maxWidth: '200px', maxHeight: '200px' }}
-      />
+      {/* <img   style={{ maxWidth: '200px', maxHeight: '200px' }} src={ '/' + url} /> */}
+          <Image 
+           width={200}
+        
+           style={{  maxWidth: '200px', maxHeight: '200px' }} src={ '/' + url} 
+          //  style={{ display: 'none' }}
+          // src={ '/' + url}
+           preview={{
+            visible,
+               src: '/' + url,
+               onVisibleChange: visible => {
+                setVisible(visible);
+               },
+           }}
+
+           onClick={() => setVisible(!visible)}
+         />
     </li>
-  ))
-  
+   )
+  }
+)
+// style={{ maxWidth: '200px', maxHeight: '200px' }} src={ '/' + url} 
  export  const SortableContainer = sortableContainer(({ children }) => {
     return (
       <>
@@ -52,4 +86,7 @@ export const SortableItem = sortableElement(({ url }) => (
         {/* <input value={title}/> */}
       </>
     )
-  })
+  })
+  
+  
+

+ 37 - 23
src/components/NewPost.js

@@ -1,28 +1,31 @@
 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} from '../actions'
+import { actionUploadFile, actionUploadFiles, actionPostUpsert,actionUserUpdate} from '../actions'
 import { Upload, Button, DatePicker, Space } from 'antd'
-import {Basic, SortableContainer, SortableItem } from '../components/DropZone'
+import {Basic, SortableContainer, SortableItem , ImageDemo} from '../components/DropZone'
 import { arrayMove, arrayMoveImmutable, arrayMoveMutable } from 'array-move'
+import { ConsoleSqlOutlined } from '@ant-design/icons'
+import ReactDOM from 'react-dom';
 
 const defaultPost = {
-  _id: '620cfd26ad55d22f3e2fb336',
   title: 'Bmw',
   text: 'Bmw',
   images: [
-    {
-      _id: '620b8374ad55d22f3e2fb316',
-      url: 'images/e125a428191726307968880977dac103',
-    },
-    {
-      _id: '620b8399ad55d22f3e2fb317',
-      url: 'images/4ae46578989c497582995ba8caeb5de5',
-    },
-    {
-      _id: '620b83b0ad55d22f3e2fb318',
-      url: 'images/ae839539f61249b15feda98cad7eb858',
-    },
+    // {_id: '6231c4292be7e42fbc9096c4',
+    //  url: 'images/d2438e8c6502eb5da60ecc8f7a6b8aff'}
+    // {
+    //   _id: '620b8374ad55d22f3e2fb316',
+    //   url: 'images/e125a428191726307968880977dac103',
+    // },
+    // {
+    //   _id: '620b8399ad55d22f3e2fb317',
+    //   url: 'images/4ae46578989c497582995ba8caeb5de5',
+    // },
+    // {
+    //   _id: '620b83b0ad55d22f3e2fb318',
+    //   url: 'images/ae839539f61249b15feda98cad7eb858',
+    // },
   ],
 }
 
@@ -54,7 +57,17 @@ export const AddPost = ({ children }) => {
       onChange={onChangeText}
     />
   )
-const PostEditor = ({ post = defaultPost, onSave, onFileDrop, fileStatus }) => {
+  var mountNode = document.getElementById('root');
+  //  mountNode = document.getElementById('root')
+// const ImageDemo = ({_id,index,url})=> {
+//     return (
+      
+//       <SortableItem key={`item-${_id}`} index={index} url={url} />
+//     );
+//   }
+
+
+const PostEditor = ({ post=defaultPost, onSave, onFileDrop, fileStatus, userUpdate }) => {
     console.log('filestatus ', fileStatus)
     const [state, setState] = useState(post)
     useEffect(() => {
@@ -67,7 +80,7 @@ const PostEditor = ({ post = defaultPost, onSave, onFileDrop, fileStatus }) => {
           ],
         })
     }, [fileStatus])
-  
+  console.log('state', state)
     const onSortEnd = ({ oldIndex, newIndex }) => {
       setState({
         ...state,
@@ -90,15 +103,16 @@ const PostEditor = ({ post = defaultPost, onSave, onFileDrop, fileStatus }) => {
         ...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) => (
-            <>
-              <SortableItem key={`item-${_id}`} index={index} url={url} />
-              <button onClick={() => onRemoveImage(_id)}> x </button>
-            </>
+          <div >
+          <SortableItem key={`item-${_id}`} index={index} url={url} /> 
+              <button onClick={() => onRemoveImage(_id)}> x </button> 
+              </div>
           ))}
         </SortableContainer>
         <h1 className="Title"> Title </h1>
@@ -116,9 +130,9 @@ const PostEditor = ({ post = defaultPost, onSave, onFileDrop, fileStatus }) => {
     )
   }
  export const CPostEditor = connect(
-    (state) => ({ fileStatus: state.promise?.uploadFiles}),
+    (state) => ({ fileStatus: state.promise?.uploadFiles, }),
     {
       onSave: actionPostUpsert,
-      onFileDrop: actionUploadFiles,
+      onFileDrop: actionUploadFiles
     },
   )(PostEditor)

+ 20 - 9
src/components/Post.js

@@ -1,18 +1,18 @@
 import { Router, Route, Link, Redirect, Switch } from 'react-router-dom'
-import {backendURL,actionAllPosts,actionOnePost} from '../actions'
+import {actionAllPosts,actionOnePost} from '../actions'
 import photoNotFound from '../materials/photoNotFound.png'
 import { LeftCircleFilled, RightCircleFilled } from '@ant-design/icons'
 import { Carousel,Avatar } from 'antd'
 import user from '../materials/user.png'
 import { Provider, connect } from 'react-redux'
-
 export const Card = ({ post, onPost }) => (
   <>
-    <Link to={`/post/${post?._id}`} onClick={() => onPost(post?._id)}>
+    <Link to={`/post/62361ebb92c08631bc4b0e96`} onClick={() => onPost("62361ebb92c08631bc4b0e96")}>
+    {/* <Link to={`/post/${post?._id}`} onClick={() => onPost(post?._id)}> */}
       {post?.images && post?.images[0] && post.images[0]?.url ? (
         <img
           className="Card"
-          src={backendURL + '/' + post.images[0].url}
+          src={ '/' + post.images[0].url}
           style={{ maxWidth: '200px', maxHeight: '200px' }}
         />
       ) : (
@@ -22,6 +22,7 @@ export const Card = ({ post, onPost }) => (
           style={{ maxWidth: '200px', maxHeight: '200px' }}
         />
       )}
+
       {/* {console.log(post?._id)} */}
     </Link>
   </>
@@ -38,6 +39,7 @@ const SampleNextArrow = (props) => {
         left: '100%',
         top: '50%',
         margin: 'auto',
+        paddingLeft:'30px'
       }}
       onClick={onClick}
     >
@@ -57,7 +59,9 @@ const SamplePrevArrow = (props) => {
         position: 'absolute',
         margin: 'auto',
         right: '100%',
-        top: '50%'
+        top: '50%',
+        paddingRight:'30px'
+
       }}
       onClick={onClick}
     >
@@ -82,7 +86,6 @@ export const MyCarousel = ({ images = [] }) => {
             margin: '0 auto'
           }}>
         <Carousel
-          
           effect="fade"
           arrows
           nextArrow={<SampleNextArrow />}
@@ -94,7 +97,7 @@ export const MyCarousel = ({ images = [] }) => {
                 <div key={index}>
                   <img
                     className="PostImage"
-                    src={backendURL + '/' + i?.url}
+                    src={ '/' + i?.url}
                     style={{
                       display: 'flex',
                       alignItems: 'center',
@@ -128,17 +131,25 @@ export const PagePost = ({ onePost, aboutMe: { avatar, login } = {}, onPost }) =
   return (
     <>
       <MyCarousel images={onePost?.images} />
+<div  style={{display: 'flex', flexDirection: 'row'}}>
+
 
       {avatar ? (
         <Avatar
           style={{ width: '50px', height: '50px' }}
-          src={backendURL + '/' + avatar?.url}
+          src={ '/' + avatar?.url}
         />
       ) : (
         <Avatar style={{ width: '50px', height: '50px' }} src={user} />
-      )}
+      )
+      }
+      <h1 style={{ marginLeft:'20px'}}> {login}</h1>
+      </div>
       <h2> {onePost?.title || ''} </h2>
       <h2> {onePost?.text || ''} </h2>
+      <h3>
+            Created Post: {new Intl.DateTimeFormat('en-GB').format(onePost?.createdAt)}
+        </h3>
     </>
   )
 }

+ 169 - 18
src/components/User.js

@@ -1,51 +1,194 @@
-import {backendURL,actionAllPosts,actionOnePost,actionAboutMe} from '../actions'
+import {actionAllPosts,actionOnePost,
+  actionAboutMe, 
+  actionUploadFile, actionUserUpsert,actionSetAvatar,actionAvatar} from '../actions'
 import user from '../materials/user.png'
 import React, { useMemo, useState, useEffect } from 'react'
 import {Card} from '../components/Post'
+// import {Basic} from '../components/DropZone'
+
 import { Provider, connect } from 'react-redux'
 import { Avatar, Image, Divider, Radio } from 'antd'
 import { store } from '../reducers'
+import { useDropzone } from 'react-dropzone'
+import { Upload, Button, DatePicker, Space } from 'antd'
+import { UploadOutlined,SearchOutlined } from '@ant-design/icons'
+
+export function Basic({ onLoad }) {
+  const { acceptedFiles, getRootProps, getInputProps } = useDropzone()
+  const files = acceptedFiles.map((file) => (
+    <li key={file.path}>
+      {file.path} - {file.size} bytes
+    </li>
+  ))
+  console.log('acceptedFiles',acceptedFiles)
+  useEffect(() => {
+    acceptedFiles[0] && onLoad(acceptedFiles[0])
+  }
+  , [acceptedFiles])
+  return (
+    <section className="container">
+      <div {...getRootProps({ className: 'Dropzone' })}>
+        <input {...getInputProps()} />
+        <Button icon={<UploadOutlined />}>
+          Drag 'n' drop some files here, or click to select files
+        </Button>
+      </div>
+      <aside>
+        <h4 style={{ color: 'black' }}>Files</h4>
+        <ul>{files}</ul>
+      </aside>
+    </section>
+  )
+}
+
+
+export const EditAccount = ({ open, children }) => {
+  const [opened, setOpened] = useState(open)
+  return (
+    <>
+     {/* <Link to={`/editProfile`}> */}
+      <button
+        onClick={() => {
+          setOpened(!opened)
+        }}>
+        Edit account
+      </button>
+      {opened && children} 
+      {/* </Link> */}
+    </>
+  )
+}
 
-const PageAboutUser = ({
+const Input = ({ state, onChangeText }) => (
+  <input
+    className="Input"
+    value={state}
+    placeholder={state || ''}
+    onChange={onChangeText}
+  />
+)
+// const defaultAboutMe = 
+// { avatar:{
+//   url: "images/04488fa15c36b875e2397a10faf3ebe7",
+//   _id: "6230d8368f316d54ac0c38a4"
+// },
+//   createdAt: "1647338874000",
+//   followers: null,
+//   following: null,
+//   login: "Lena",
+//   nick: null,
+//   _id: "6230657a2791790d34ecaecc"}
+const EditInfo =({info={}, onSave, onFileDrop, fileStatus})=>{
+  console.log('filestatus ', fileStatus)
+  const [state,setState]=useState(info)
+  useEffect(() => {
+    fileStatus?.status == 'FULFILLED' &&
+      setState({
+        ...state,
+          ...state.avatar,
+          ...fileStatus.payload
+          // _id: fileStatus?.payload._id,
+          // url: fileStatus?.payload.url
+      })
+  }, [fileStatus])
+  
+  const onChangeLogin = (event) =>
+  setState({
+    ...state,
+    login: event.target.value,
+  })
+  console.log('state my ', state)
+  return (
+    <section>
+      <Basic onLoad={onFileDrop} />
+      <Input state={state.login || ''} onChangeText={onChangeLogin} />
+        <h1 className="Title"> LOGIN </h1>
+      <button
+        disabled={state?.images?.length == 0}
+        onClick={() => onSave(state._id)}
+      >
+        Save
+      </button>
+    </section>
+  )
+}
+export const CEditInfo = connect(
+  (state) => ({ fileStatus: state.promise?.uploadFile}),
+  {
+    onSave: actionAvatar,
+    onFileDrop: actionUploadFile,
+  },
+)(EditInfo)
+
+const defaultPost={
+      "_id": "62361ebb92c08631bc4b0e96",
+      "title": "Bmw",
+      "text": "Bmw",
+      "images": [
+        {
+          "_id": "62361eb192c08631bc4b0e95",
+          "url": "images/bd9670eb58676ec2f0b5dea9e4d800c6"
+        },
+        {
+          "_id": "62361eb192c08631bc4b0e92",
+          "url": "images/b6527c979360dd52a37d0766e320cf23"
+        },
+        {
+          "_id": "62361eb192c08631bc4b0e93",
+          "url": "images/601b8f0616131b131b36927cb0603944"
+        },
+        {
+          "_id": "62361eb192c08631bc4b0e94",
+          "url": "images/4f47768ed08e4f3df1537bb4bb593e54"
+        }
+      ],
+       "createdAt": "1647713979000"
+    }
+export const PageAboutUser = ({
   aboutMe: { _id, login, nick, createdAt, avatar, followers, following } = {},
     allPosts,
     onPosts,
-    onPost,
-    onAboutUser
+    onePost,
+    onAboutUser,
+    post={}
   }) => {
     useEffect(() => {
       onAboutUser(_id)
-      onPosts()
+      // onePost("62361ebb92c08631bc4b0e96")
+        // "62361ebb92c08631bc4b0e96")
     }, [])
-
     // console.log('CREATED AT',new Intl.DateTimeFormat().format(createdAt));
     return (
       <section className="AboutMe">
         <Avatar
-          style={{ width: '150px', height: '150px', position: 'absolute' }}
-          src={backendURL + '/' + avatar?.url || user}
+          style={{ marginRight:'20px', width: '150px', height: '150px' }}
+          src={ '/' + avatar?.url || user}
         />
         <div className="Info">
           <h1> {login}</h1>
           <h3>
-            {' '}
             Created Account: {new Intl.DateTimeFormat('en-GB').format(createdAt)}
           </h3>
           <div style={{ display: 'flex' }}>
             {/* {allPosts?.length} style={{display: 'flex',justifyContent: 'space-between'}}*/}
-            <h3> {allPosts?.length} posts </h3>
+            {/* <h3> {allPosts?.length} posts </h3> */}
   
             <h3 style={{ marginLeft: '20px' }}>
-              {' '}
               {followers?.length} followers{' '}
             </h3>
-  
+
             <h3 style={{ marginLeft: '20px' }}>
-              {' '}
               {following?.length} following{' '}
             </h3>
           </div>
           <h3> nick: {nick == null ? login : nick}</h3>
+         <EditAccount>
+           <div>
+             <h2>Edit login</h2>
+          <p>Edit avatar</p>
+        <CEditInfo/>
+           </div>
+          </EditAccount>
           <div
             style={{
               display: 'flex',
@@ -54,10 +197,14 @@ const PageAboutUser = ({
               margin: '20px',
             }}
           >
-            {(allPosts || [])?.map((item) => (
+            {/* {(allPosts || [])?.map((item) => (
               <Card post={item} onPost={onPost} />
-            ))}
+            ))} */}
+          {/* {onePost("62361ebb92c08631bc4b0e96")} */}
+              <Card post={post} onPost={onePost}/>
+          
           </div>
+          {/* post={item} onPost={onPost} */}
           {/* <h3> Created Account: {
               <div>
               <img
@@ -72,9 +219,13 @@ const PageAboutUser = ({
  export const CPageAboutUser = connect(
     (state) => ({
       aboutMe: state.promise?.aboutMe?.payload,
-      allPosts: state.promise?.allPosts?.payload,
+      onePost: state.promise?.onePost?.payload,
+      // post:state.promise?.onePost?.payload,
+      // allPosts: state.promise?.allPosts?.payload,
     }),
-    { onPosts: actionAllPosts, onPost: actionOnePost,
-     onAboutUser: actionAboutMe
+    { onPosts: actionAllPosts,
+     onAboutUser: actionAboutMe,
+     onLoad:actionUploadFile,
+     onePost:actionOnePost
     },
   )(PageAboutUser)