+registration +dropDownMenu +LogOut +actions(aboutMe(for feeds),uploadFile,setAvatar)

src/App.js

@@ -17,6 +17,7 @@ function App() {
       <Provider store={store}>
       <Switch>
     <div className="App">
+        {/* {store.auth.payload?.sub?.id && } */}
         <Route exact path="/login" component={CLoginForm}/>
         <Route exact path="/register" component={Register}/>
         <Route exact path="/" component={Header}/>

src/actions/index.js

@@ -19,6 +19,19 @@ const backendURL = 'http://hipstagram.asmer.fs.a-level.com.ua';
 const gql = getGQL(backendURL + '/graphql');
 
 
+const uploadFile = file => {
+    const fd = new FormData;
+    fd.append('photo', file);
+  return  fetch(backendURL+'/upload', {
+      method: "POST",
+      headers: localStorage.authToken ? {Authorization: 'Bearer ' + localStorage.authToken} : {},
+      body: fd
+  }).then(res => res.json());
+  
+}
+
+
+
 
 export const actionPromise = (name,promise) =>{
  const actionPending = name => ({name,type:"PROMISE",status:'PENDING'})
@@ -39,16 +52,28 @@ export const actionPromise = (name,promise) =>{
  }
 }
 
+export const actionUploadFile = file => 
+  actionPromise('fileUpload', uploadFile(file));
+export const actionAvatar = (userrId, fileeId) => 
+  actionPromise("userAvatar", gql(`mutation setAvatar($userId: String, $fileId: ID){
+    UserUpsert(user:{_id: $userId, avatar: {_id: $fileId}}){
+        _id, avatar{
+            _id
+        }
+    }
+}`, {userId: userrId,
+      fileId: fileeId}))
+
 export const actionAuthLogin = (tokennn) =>({type:'AUTH_LOGIN',token:tokennn})
 export const actionAuthLogout= () => ({type: 'AUTH_LOGOUT'})
 
 
 export const actionFullRegister = (Login,password) =>
-          actionPromise('fullRegister', gql(`mutation register($Login:String,$password:String){
-            UserUpsert(user:{login:$Login,password:$password}){
+          actionPromise('fullRegister', gql(`mutation register($login:String!,$password:String!){
+            UserUpsert(user:{login:$login,password:$password}){
               _id login
             }
-          }`,{Login: Login, password: password}))
+          }`,{login: Login, password: password}))
 
 export const actionFullLogin = (login,password) => async (dispatch) => {
    const tokennn = await dispatch(
@@ -58,3 +83,26 @@ export const actionFullLogin = (login,password) => async (dispatch) => {
    );
    await dispatch(actionAuthLogin(tokennn));
 }
+
+export const actionAboutMe = (_id) => 
+        actionPromise("userInfo", gql(`query AboutMe ($Id: String){
+            UserFindOne(query:$Id){
+              _id,nick, avatar{
+                url
+              },
+              following{
+                _id
+              }
+            }
+          }`,{
+              Id: JSON.stringify([{_id}])
+          }))
+
+export const actionSetAvatar = file => 
+          async(dispatch, getState) => {
+             await dispatch(actionUploadFile(file))
+             const {auth:{payload:{sub:{id}}},promise:{fileUpload:{payload:{_id}}}} = getState() 
+            await dispatch(actionAvatar(id,_id))
+            await dispatch(actionAboutMe(id))
+          }
+        

src/components/Header.js

@@ -1,7 +1,22 @@
 import {IoHome, IoPaperPlane} from "react-icons/io5";
 import {IoIosAddCircle, IoIosHeart} from "react-icons/io";
 import {Link} from "react-router-dom"
-const Header =  () => {
+import { useState } from "react";
+import { actionAuthLogout } from "../actions";
+import { connect } from "react-redux";
+
+
+const LogOutButton = ({onClick})=> {
+    return(
+        <button className="flex px-4 py-2 text-sm text-center" onClick={() => onClick()}>log out</button>
+    )
+}
+const CLogOut = connect(state => ({children: `logout(${state.auth.payload && state.auth.payload.sub.login || 'anon'})`}),
+{onClick: actionAuthLogout})(LogOutButton)
+
+
+const Header =  ({onLogOut}) => {
+    const [isOpen, setIsOpen] = useState(false);
     return(
         <nav className="flex mx-auto px-4 justify-between p-6 xl:container xls:mx-auto dark:bg-slate-900 dark:text-white">
             {/* left */}
@@ -39,13 +54,33 @@ const Header =  () => {
                     </div>
                 </div>
                 <div>
-                    <Link to="/user">
-                        <img  className="rounded-full"alt="user"/>
+                    <div className="relative inline-block text-left">
+                        <button onClick={() => setIsOpen(!isOpen)}>
+                            Account
+                        </button>
+                    {isOpen && <div className="origin-top-right absolute right-0 mt-2 w-36 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none flex justify-center">
+                        <div className="py-1 w-full text-center">
+                            <div className="text-gray-700   hover:bg-fuchsia-700 hover:rounded-md hover:text-white">
+                            <Link to="/user" className="block px-4 py-2 text-sm">
+                            Account
                     </Link>
+                            </div>
+                            <div className="text-gray-700   hover:bg-fuchsia-700 hover:rounded-md hover:text-white">
+                            <a className="block px-4 py-2 text-sm">settings</a>
+                            </div>
+                            <div className="text-gray-700 flex justify-center  hover:bg-fuchsia-700 hover:rounded-md hover:text-white">
+                                <CLogOut/>
+                            </div>
+                        </div>
+                        </div>}
+                    
+                    </div>
+        
                 </div>
             </div>
         </nav>
     )
 }
 
+
 export default Header;

src/components/LoginPage/Login.js

@@ -6,6 +6,8 @@ import {Link} from "react-router-dom"
 const Login = ({onLogin}) => {
        const[login,setLogin] = useState('');
        const[password,setPassword] = useState(''); 
+       console.log(login);
+       console.log(password);
     return (
         <div className="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
                 <div className="max-w-md w-full space-y-8">

src/components/MainPage/Main.js

@@ -3,6 +3,8 @@ import Feed from '../Feed/Feed';
 import User from '../UserPage/User';
 import Collections from '../CollectionsPage/Collections';
 import UpsertPost from '../CreatePostPage/UpsertPost';
+
+
 const Main = () => {
 
 

src/components/RegisterPage/Register.js

@@ -1,23 +1,23 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
 
 const Register = () => {
 
-    const [login, setLogin] = useState("");
-    const [password, setPassword] = useState("");
-    const [confpassword, setConfPassword] = useState("");
-    const [errmsg, setErrMsg] = useState("");
-    const min = 4;
-    const pswdPattern = /^[0-9a-zA-Z]+$/;
-    const validate = () => {
+    const [login, setLogin] = useState('');
+    const [password, setPassword] = useState('');
+    const [confpassword, setConfPassword] = useState('');
+    const [errmsg, setErrMsg] = useState('');
+    useEffect(() => {
+        const min = 4;
+        const pswdPattern = /^[0-9a-zA-Z]+$/;
         if(password.length > min && confpassword.length > min && password.match(pswdPattern)&& confpassword.match(pswdPattern) && password === confpassword){
             console.log("all ok")
+            setErrMsg("");
     } else {
         setErrMsg("password not match");
     } 
-    }
-    
+    },[password,confpassword])
    /*  */
     return(
         <div className="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
@@ -28,15 +28,15 @@ const Register = () => {
                 <div className="mt-8 space-y-6 rounded-md shadow-sm ">
                     <div>
                     <label>Login:</label>
-                    <input placeholder="login" value={login} type="text" className="LoginInput" onChange={event => setLogin(event.target.value)}/>
+                    <input placeholder="login" value={login} type="text" className="LoginInput" name="login" onChange={(event) => {setLogin(event.target.value)}}/>
                     </div>
                     <div>
                     <label>Password:</label>
-                    <input placeholder="password" value={password} type="password" className="LoginInput" onChange={event => setPassword(event.target.value)}/>
+                    <input placeholder="password" value={password} type="password" className="LoginInput" name="password" onChange={(event) => {setPassword(event.target.value)}}/>
                     </div>
                     <div>                    
                     <label>Confirm Password:</label>
-                    <input placeholder="password" value={confpassword} type="password" className="LoginInput" onChange={event => setConfPassword(event.target.value)}/>
+                    <input placeholder="password" value={confpassword} type="password" className="LoginInput" name="confpassword" onChange={(event) => {setConfPassword(event.target.value)}}/>
                     </div>
                     <label className="text-red-400">
                             {errmsg}