preloader + upload(dropzone)

React/CodePen/src/App.css

@@ -5,9 +5,6 @@
 }
 
 
-.headerBlock{
-	border:1px solid black;	
-}
 
 .headerBlock2{
 	position: "relative";

React/CodePen/src/actions/actionFullAvatar.js

@@ -1,10 +1,10 @@
-import { actionUploadFile } from "./actionUploadFile";
-import { actionSetAvatar } from "./actionSetAvatar";
-import { actionFindUser } from "./actionFindUser";
+import {actionUploadFile} from "./actionUploadFile";
+import {actionSetAvatar}  from "./actionSetAvatar";
+import {actionFindUser}   from "./actionFindUser";
 
 export const actionFullAvatar = (file) => async (dispatch) => {
     let result = await dispatch(actionUploadFile(file));
     await dispatch(actionSetAvatar(result._id));
     await dispatch(actionFindUser());
-  };
+};
   

React/CodePen/src/actions/actionSetAvatar.js

@@ -0,0 +1,6 @@
+import { actionPromise } from "./actionPromise";
+import { ava } from "./requests";
+
+export const actionSetAvatar = (id) => async (dispatch, getState) => {
+    return await dispatch(actionPromise("setAvatar", ava(getState()?.auth?.payload?.sub?.id, id)));
+};

React/CodePen/src/actions/actionUploadFile.js

@@ -0,0 +1,18 @@
+import {actionPromise} from "./actionPromise";
+
+export const actionUploadFile = (files) => async (dispatch) => {
+    let formdata = new FormData();
+    formdata.append("photo", files);
+    return await dispatch(
+        actionPromise(
+            "upload",
+            fetch("/upload", {
+              method: "POST",
+              headers: localStorage.authToken
+                ? { Authorization: "Bearer " + localStorage.authToken }
+                : {},
+              body: formdata,
+            }).then((res) => res.json())
+        )
+    );
+};

React/CodePen/src/components/ava.js

@@ -1,17 +1,14 @@
-import React from "react";
-import { connect } from "react-redux";
-import icon from "../icon.jpg";
+import  React       from "react";
+import 	{connect} 	from "react-redux";
+import  icon        from "../icon.jpg";
 
-function AvaLogo({px, mrgn, link}) {
-  // Import result is the URL of your image
-  return (
-    <img src={link ? "http://localhost:3000/" + link : icon} className="ava" style={{ width: px, marginRight: mrgn, borderRadius: "50%" }}/>
-  );
+function AvaLogo({link}) {
+	return (
+	    <img src={link ? "http://localhost:3000/" + link : icon} className="ava" 
+	    	style={{width:"100px",borderRadius: '50%'}}/>
+	);
 }
 
-const ConnectedAvaLogo = connect((state) => ({
-  link: state?.promise?.findUser?.payload?.data?.UserFindOne?.avatar?.url,
-}))(AvaLogo);
-//'http://localhost:3000/images/5d6600e2254cff050d32c6967bcf3104'
+const ConnectedAvaLogo = connect((state) => ({link: state?.promise?.findUser?.payload?.data?.UserFindOne?.avatar?.url,}))(AvaLogo);
 
 export default ConnectedAvaLogo;

React/CodePen/src/components/routes.js

@@ -1,18 +1,19 @@
-import React from "react";
-import createHistory from "history/createBrowserHistory";
-import {connect} from "react-redux";
-import RegForm from "../pages/reg";
-import {LogForm} from "../pages/login";
-import Home from "../pages/homePage";
-import ConnectCabinet from "../pages/cabinet";
-import Search from "../pages/search";
-import ConnectedPrivateRoute from "./privateRoute";
-import {Redirect} from "react-router";
-import {useEffect, useState, useRef} from "react";
+import React                                    from "react";
+import createHistory                            from "history/createBrowserHistory";
+import {connect}                                from "react-redux";
+import RegForm                                  from "../pages/reg";
+import {LogForm}                                from "../pages/login";
+import Home                                     from "../pages/homePage";
+import ConnectCabinet                           from "../pages/cabinet";
+import Search                                   from "../pages/search";
+import ConnectedPrivateRoute                    from "./privateRoute";
+import {Redirect}                               from "react-router";
+import {useEffect, useState, useRef}            from "react";
 import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
-import ChangePass from "../pages/changePass";
-import CProject from "../pages/project";
-import CProjects from "../pages/projects";
+import ChangePass                               from "../pages/changePass";
+import CProject                                 from "../pages/project";
+import CProjects                                from "../pages/projects";
+import CUpload                                  from "../pages/upload";
 
 
 const LoginForm = ({onLogin}) =>{
@@ -33,16 +34,17 @@ const Routes = ({ isAuth }) => {
   return (
     <div className="App">
       <div className="contentDiv">
-            <Switch>
-                <ConnectedPrivateRoute exact path="/" roles = {['user']} component={Home} />
-                <ConnectedPrivateRoute path="/cabinet" roles = {['user']} component={ConnectCabinet} />
-                <ConnectedPrivateRoute path="/search" roles = {['user']} component={Search} />
-                <ConnectedPrivateRoute path="/project/:id" roles = {['user']} component={CProject} />
-                <ConnectedPrivateRoute path="/changePass" roles={['user']} component={ChangePass} />
-                <ConnectedPrivateRoute path="/projects" roles = {['user']} component={CProjects} />
-                <ConnectedPrivateRoute path="/login" roles = {['unknown']} component={LogForm} /> 
-                <ConnectedPrivateRoute path="/registration" roles = {['unknown']} component={RegForm} />
-            </Switch>
+          <Switch>
+              <ConnectedPrivateRoute  exact path = "/"       roles = {['user']}     component = {Home}           />
+              <ConnectedPrivateRoute  path = "/cabinet"      roles = {['user']}     component = {ConnectCabinet} />
+              <ConnectedPrivateRoute  path = "/search"       roles = {['user']}     component = {Search}         />
+              <ConnectedPrivateRoute  path = "/project/:id"  roles = {['user']}     component = {CProject}       />
+              <ConnectedPrivateRoute  path = "/changePass"   roles = {['user']}     component = {ChangePass}     />
+              <ConnectedPrivateRoute  path = "/upload"       roles = {['user']}     component = {CUpload}        />
+              <ConnectedPrivateRoute  path = "/projects"     roles = {['user']}     component = {CProjects}      />
+              <ConnectedPrivateRoute  path = "/login"        roles = {['unknown']}  component = {LogForm}        /> 
+              <ConnectedPrivateRoute  path = "/registration" roles = {['unknown']}  component = {RegForm}        />
+          </Switch>
       </div>
     </div>
   );

React/CodePen/src/pages/cabinet.js

@@ -1,16 +1,17 @@
 import React from "react";
-import { connect } from "react-redux";
-import ConnectNickName from "../components/nick";
+import {connect} from "react-redux";
+import CNickName from "../components/nick";
 import ImgProfile from "../components/profile";
-import { actionAuthLogout } from "../actions/actionAuthLogout";
-import { Link } from "react-router-dom";
+import {actionAuthLogout} from "../actions/actionAuthLogout";
+import {Link} from "react-router-dom";
+import ConUpload from "./upload";
 
 const Cabinet = ({onLogOut}) => {
   return (
     <>
       <Link to="/">
           <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
-              <span>&larr;</span>   Back to Main Page
+              <span>&#8617;</span> Back to Main Page
           </button>
       </Link>
       <br/>
@@ -18,29 +19,29 @@ const Cabinet = ({onLogOut}) => {
       <div className="container" >
         <div className="card">
           <div className="upper">
-            <ImgProfile px={"300px"} />{" "}
-          </div>
-          <div>
-            <div>
-              {" "}
+            <div className="user text-center">
+              <div className="profile mt-3">
+                <ConUpload  />{" "}
+              </div>
             </div>
           </div>
-          <div>
-            <h4><ConnectNickName /></h4>
+
+          <div className="user text-center">
+            <h4><CNickName /></h4>
             <a href="/projects">
               <button type="button" className="btn btn-warning btn-sm">My Projects</button>
             </a>
             <div style={{marginTop:"5px"}}>
               <a href="/">
-                <button className="btn btn-warning btn-sm">Main Page</button>
+                <button className="btn btn-success btn-sm">Main Page</button>
               </a>
             </div>
             <div style={{marginTop:"5px"}}>
                 <Link to= "/changePass">
-                  <button className="btn btn-warning btn-sm">Change pass</button>
+                  <button className="btn btn-info btn-sm">Change pass</button>
                 </Link>
             </div>
-            <button onClick={() => onLogOut()} className="btn btn-warning btn-sm" style={{marginTop:"5px"}}>Log out</button>
+            <button onClick={() => onLogOut()} className="btn btn-danger btn-sm" style={{marginTop:"5px"}}>Log out</button>
           </div>
         </div>
       </div>

React/CodePen/src/pages/changePass.js

@@ -12,7 +12,7 @@ const ChangePass = ({onChangePass}) => {
 		<>
 			<Link to="/">
 	        	<button className="float-left btn-secondary d-inline-block mt-2 ml-2">
-	          		Back to Main Page
+	          		<span>&#8617;</span>Back to Main Page
 	        	</button>
 	      	</Link>
 	      	<br/>

React/CodePen/src/pages/homePage.js

@@ -1,9 +1,9 @@
-import  React      from "react";
-import  Header     from "../components/header";
-import  CSnippets  from "../components/snippet";
-import  Footer     from "../components/footer";
-import {useRef, useState} from "react";
-import {useEffect} from "react";
+import  React      			from "react";
+import  Header     			from "../components/header";
+import  CSnippets  			from "../components/snippet";
+import  Footer     			from "../components/footer";
+import  {useRef, useState} 	from "react";
+import  {useEffect} 		from "react";
 
 const Home = () => {
 	const [sec, setSec] = useState(2);

React/CodePen/src/pages/project.js

@@ -1,14 +1,15 @@
-import {useEffect} 				from "react";
-import {connect} 				from "react-redux";
-import {actionSnippetById} 		from "../actions/actionSnippetById";
-import {useState} 				from "react";
-import Editor 					from "../components/editor";
-import {actionSnippetAdd} 		from "../actions/actionSnippetAdd";
-import {Link} 					from "react-router-dom";
-import {Redirect} 				from "react-router";
+import {useEffect} 			    from "react";
+import {connect} 			      from "react-redux";
+import {actionSnippetById} 	from "../actions/actionSnippetById";
+import {useState} 			    from "react";
+import Editor 				      from "../components/editor";
+import {actionSnippetAdd} 	from "../actions/actionSnippetAdd";
+import {Link} 				      from "react-router-dom";
+import {Redirect} 			    from "react-router";
+
 
 const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, descriptionText, filesArr, nameText,}) => {
-	useEffect(() => {
+	  useEffect(() => {
       	getSnippet(id);
     }, []);
 
@@ -58,7 +59,7 @@ const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, de
     <div>
         <Link to="/">
             <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
-               <span>&larr;</span> Back to Main Page
+               <span>&#8617;</span> Back to Main Page
             </button>
         </Link>
         <Link to="/projects">

React/CodePen/src/pages/projects.js

@@ -6,17 +6,20 @@ const Projects = ({snippets}) => {
     return snippets ? (
         <div>
               <Link to="/">
-                  <button className="float-left btn-secondary d-inline-block mt-2 ml-2">Back to Main Page</button>
+                  <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
+                    <span>&#8617;</span>Back to Main Page
+                  </button>
               </Link>
               <br/> 
               <br/>
-              <div style={{ alignItems: "center", textAlign: "center" }}>
+              <div style={{alignItems: "center", textAlign: "center"}}>
                   <Link to="/">
                       <button className="btn btn-success">New project</button>
                   </Link>
               </div>
+
               {snippets?.map((key, index) => (
-                  <div style={{ textAlign: "center", alignItems: "center" }}>
+                  <div style={{textAlign: "center", alignItems: "center"}}>
                       <div className="card w-50 ml-auto mr-auto mt-3 mb-5" style = {{boxShadow:'0px 5px 10px 2px rgba(34, 60, 80, 0.2)'}}>
                           <div className="card-body" style={{textAlign: "center"}}>
                               <h3 className="card-title mb-4 text-info">
@@ -32,7 +35,8 @@ const Projects = ({snippets}) => {
                           </div>
                       </div>
                   </div>
-              ))}     
+              ))}    
+               
             </div>
 
           ) : (
@@ -40,7 +44,7 @@ const Projects = ({snippets}) => {
             <div>
                 <Link to="/">
                     <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
-                        Back to Main Page
+                        <span>&#8617;</span>Back to Main Page
                     </button>
                 </Link>
                 <br /> <br />
@@ -54,7 +58,7 @@ const Projects = ({snippets}) => {
     };
 
 const CProjects = connect((state) => ({
-  snippets: state?.promise?.findSnippet?.payload?.data?.SnippetFind,
+    snippets: state?.promise?.findSnippet?.payload?.data?.SnippetFind,
 }))(Projects);
 
 export default CProjects;

React/CodePen/src/pages/search.js

@@ -9,7 +9,7 @@ const Search = ({onSearch , snippets}) => {
     <>
       <Link to="/">
           <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
-            Back to Main Page
+              <span>&#8617;</span>Back to Main Page
           </button>
       </Link>
         <br/>

React/CodePen/src/pages/upload.js

@@ -0,0 +1,22 @@
+import React 			  from 'react';
+import {useDropzone}      from 'react-dropzone';
+import {actionFullAvatar} from '../actions/actionFullAvatar';
+import {connect}          from 'react-redux';
+import ConnectedAvaLogo   from '../components/ava';
+
+
+
+const Upload = ({onUpload}) => {
+	const {acceptedFiles, getRootProps, getInputProps}  = useDropzone();
+	let files 											= acceptedFiles.map(file => onUpload(file))
+	return (
+	    <div {...getRootProps({className: 'dropzone'})} style={{display:'inline'}}>
+	       	<input {...getInputProps()} />
+	       	<ConnectedAvaLogo style={{width:'100px'}} />  
+	    </div> 
+	);
+}
+
+const ConUpload = connect(null , {onUpload:actionFullAvatar})(Upload)
+
+export default ConUpload;