Add avatar

src/App.scss

@@ -147,12 +147,21 @@ html,body {
     border-radius: 15px;
 }
 
+.profile {
+    img {
+        width: 10%;
+        height: 20vh;
+        border-radius: 100%;
+    }
+}
+
 .loader {
+    position: absolute;
+    top: 40%;
+    left: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: auto 0;
-    
     .lds-ring {
         position: relative;
         width: 80px;

src/Components/DropZone.js

@@ -1,25 +1,25 @@
-import React, { useState, useEffect, useRef, useCallback, MyContext} from "react";
+import React, {useRef} from "react";
+import { actionAvaChange } from "../actions";
 
 import { connect } from "react-redux";
 import {useDropzone} from 'react-dropzone'
 
-export function MyDropzone({getData,onSend,todo}) {
-    console.log(todo)
-    const {acceptedFiles, getRootProps, getInputProps} = useDropzone({onDrop: files => files.map(x=> onSend(x,todo))});
-    const files = acceptedFiles.map(file => <li key={file.path}>{file.path}</li>);
-  
+export function MyDropzone({onSend}) {
+  const loading = useRef()  
+    const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
+    // const files = acceptedFiles.map(file => <li key={file.path}>{file.path}</li>);
+    if(acceptedFiles.length > 0 && !loading.current) {
+      onSend(acceptedFiles[0])
+      loading.current = true
+    }
     return (
-      <section className="container">
+      
         <div {...getRootProps({className: 'dropzone'})}>
           <input {...getInputProps() }/>
-          <p>Drag 'n' drop some files here, or click to select files</p>
-        </div>
-        <aside>
-          <h4>Files</h4>
-          <ul> {files} </ul>
-        </aside>
-      </section>
+          <p>Нажмите для смены аватарки</p>
+        </div>      
     );
   }
 
-connect()(MyDropzone)
+const CDrop = connect(null,{onSend:actionAvaChange})(MyDropzone)
+export default CDrop

src/Components/PrivateRoute.js

@@ -23,4 +23,4 @@ const PrivateRoute = ({component,roles,auth, fallback='/login',...originProps})
     )
   }
 const RoleRoute = connect(state => ({auth: state.authReducer?.payload?.sub.acl[1]}))(PrivateRoute)
-export default RoleRoute
+export default RoleRoute

src/Components/Profile.js

@@ -1,13 +1,20 @@
 import React from "react";
+import { Container } from "react-bootstrap";
 import { connect } from "react-redux";
+import CDrop from "./DropZone";
 
-const Profile = ({login,posts}) => {
+const Profile = ({login,avatar,posts}) => {
     return (
-        <div>
-            <p>{login}</p>
-        </div>
+        <Container>
+            <div className='d-flex flex-column justify-content-center align-items-center profile'>
+                <p>{login}</p>
+                <img src={avatar} alt='avatar' />
+                {console.log(avatar)}
+                <CDrop />
+            </div>
+        </Container>
     )
 }
 
-const CProfile = connect(state => ({login: state.authReducer.payload.sub.login}))(Profile)
+const CProfile = connect(state => ({login: state.authReducer.payload.sub.login, avatar: state.promiseReducer?.photo?.payload?.url}))(Profile)
 export default CProfile

src/actions/index.js

@@ -132,29 +132,46 @@ export const actionPostAd = (title,description,price) =>
                 }
               }`,{ad: {title,description,price}}))
 
-// export const actionUploadFile = (file) =>{  
-// let fd = new FormData
-// fd.append('photo', file)
-
-// return actionPromise('forma', fetch('/upload', {
-//   method: "POST",
-//   headers: localStorage.authToken ? {Authorization: 'Bearer ' + localStorage.authToken} : {},
-//   body: fd
-// }).then(res => res.json()))
-// }
-
-export const actionUpLoadAva = (ava,user) =>
-    async dispatch => {
-        const formData = new FormData();
-        formData.set("avatar", ava);
-        let sendData = await dispatch(actionPromise('send', fetch(`/upload`,
-            {
-                method: 'POST',
-                headers: localStorage.authToken ? { Authorization: 'Bearer ' + localStorage.authToken } : {},
-                body: formData
-            })))
-        let responce = await dispatch(actionPromise('sendData', sendData.json()))
-        console.log(user)
-        let AddAva = dispatch(actionFullRegister(responce._id,user))
-        console.log(AddAva)
-    }
+export const actionMyPosts = () =>
+              actionPromise('MyPosts',shopGQL(``))
+
+export const actionCommentAdd = () =>
+              actionPromise('CommentAdd',shopGQL(`
+              mutation Comment($comment : CommentInput){
+                CommentUpsert(comment: $comment) {
+                  _id
+                  ad
+                  text
+                }
+              }`,{comment:{text,answerTo,ad:{_id}}}))
+
+export const actionUploadFile = (file) => {
+  let fd = new FormData
+  fd.append('photo', file)
+  return actionPromise('photo',fetch('/upload', {
+    method: "POST",
+    headers: localStorage.authToken ? {Authorization: 'Bearer ' + localStorage.authToken} : {},
+    body: fd
+  }).then(res => res.json()))
+};
+
+const actionAvaAdd = (avaId) => 
+async (dispatch,getState) => {
+  let userId = getState().authReducer.payload.sub.id
+  await dispatch (actionPromise('ava',shopGQL(`mutation setAvatar($userId: String, $avaId: ID){
+  UserUpsert(user:{_id: $userId, avatar: {_id: $avaId}}){
+      _id, avatar{
+          _id
+      }
+  }
+}`,{avaId,userId})))
+}
+
+export const actionAvaChange = (file) => 
+  async (dispatch) => {
+   let res =  await dispatch(actionUploadFile(file))
+   if(res) {
+     await dispatch(actionAvaAdd(res._id))
+   }
+  }
+