Add userUpdateWatcher, setAvatarWatcher, clearAllDataWatcher + change login/register form

src/App.scss

@@ -35,12 +35,10 @@ body {
 @import '~antd/dist/antd.css';
 
 .Dropzone {
-  // flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 10px;
-  // width: 100%;
   border-width: 2px;
   border-radius: 2px;
   background-color: #74d2e7;
@@ -53,35 +51,33 @@ body {
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
   font-size: 20px;
 }
-.Links{
-  margin:10px;
-  font-size:xx-large;
-   color:black;
+.Links {
+  margin: 10px;
+  font-size: xx-large;
+  color: black;
   transition: 0.3s;
-
 }
-.Links:hover{
-  color:white;
+.Links:hover {
+  color: white;
 
   opacity: 0.7;
-  }
+}
 
-.Links:active{
-    transform: scale(1.10); /* Увеличение картинки */
-  }
+.Links:active {
+  transform: scale(1.1); /* Увеличение картинки */
+}
 .Header {
   display: flex;
   position: fixed;
   align-items: center;
   justify-content: center;
-  // padding-top: 10px;
+  padding: 10px;
   z-index: 4;
   width: 100%;
   background: #74d2e7;
   top: 0;
   transition: 0.3s;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-
 }
 
 .Recomendations {
@@ -100,12 +96,11 @@ body {
   align-items: 'center';
   justify-content: 'center';
 }
-.EditSetting{
+.EditSetting {
   display: 'flex';
   align-items: 'center';
   justify-content: 'center';
   margin: 0 auto;
-
 }
 .Post {
   max-width: 450px;
@@ -117,7 +112,7 @@ body {
   display: 'flex';
   align-items: 'center';
   justify-content: 'center';
-  margin-top:100px ;
+  margin-top: 100px;
   transition: 0.3s;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
   box-shadow: inset 2px 2px 5px rgba(128, 125, 125, 0.9);
@@ -164,9 +159,7 @@ main {
   flex-direction: column;
 }
 .Card {
-
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25),
-   0 10px 10px rgba(0, 0, 0, 0.22);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
   // animation: fade .5s linear forwards;
 }
 // @keyframes fade {
@@ -182,60 +175,54 @@ main {
 //   display: block;
 //   background: rgba(0, 0, 0, 0.5);
 //   cursor: pointer;
-  
 
 // }
-.Wrapper{
+.Wrapper {
   // background: rgba(0, 0, 0, 0.5);
-  // opacity: 0; 
+  // opacity: 0;
   //  padding: 10px;
   margin: 40px;
   // background: rgb(0, 0, 0);
-  
+
   // opacity: 1;
-  transition: filter .5s;
+  transition: filter 0.5s;
   // background: #000;  /* У блока, оборачивающего картинку при наведении будет просвечивать черный фон */
-    // overflow: hidden;  /* Ограничиваем видиую область */
+  // overflow: hidden;  /* Ограничиваем видиую область */
 }
-.Wrapper:hover{
-  // opacity: 0.8;
-  // opacity: 0.7; /* Высветляем картинку, но она становится темнее, так как под ней черный фон */
-
+.Wrapper:hover {
   -webkit-filter: brightness(40%);
   filter: brightness(50%);
-  // transform: scale(1.05); /* Увеличение картинки */
 }
 
-.Like{
-    cursor: pointer;
-    font-size: xx-large;
-    color: red;
+.Like {
+  cursor: pointer;
+  font-size: xx-large;
+  color: red;
 
-    // background-color: red;
+  // background-color: red;
 }
-.Like:active{
-  transform: scale(1.10); /* Увеличение картинки */
+.Like:active {
+  transform: scale(1.1); 
 }
-.UnLike{
+.UnLike {
   cursor: pointer;
   font-size: xx-large;
   // opacity: 1;
-  color:white;
-  transition: filter .3s;
-
+  color: white;
+  transition: filter 0.3s;
 }
-.UnLike:hover{
-opacity: 0.6;
+.UnLike:hover {
+  opacity: 0.6;
 }
 
 .MyCarousel {
   display: block;
-  min-width: 60%;
-  min-height: 60%;
-  background: #c6cece87;
+  // min-width: 60%;
+  // min-height: 60%;
+  object-fit: cover;
+  background: #84898987;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
   box-shadow: inset 2px 2px 5px rgba(128, 125, 125, 0.9);
-
   background-color: white;
   border: 6px solid #dbebfa;
   margin: 0 10%;
@@ -250,51 +237,81 @@ opacity: 0.6;
 }
 .PostFeed {
   border-width: 20;
-  border-color: #74d2e7;
+  border-color: #ffffff;
   background: #edf8f89e;
   border-radius: 5px;
-
   border-style: solid;
   margin-bottom: 40px;
-
   transition: 0.3s;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25),
+   0 10px 10px rgba(0, 0, 0, 0.22);
   // padding: 20px;
 }
 .InputForm {
   position: fixed;
   color: black;
   flex-direction: column;
-  width: 800px;
-  height: 400px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 30px;
-  padding-top: 10px;
-  background: #74d2e7;
-  padding: 50px;
+  width: 100%;
+  height: 100%;
+  float: right;
+  background: rgb(58,100,180);
+  background: linear-gradient(90deg,
+   rgba(58,100,180,1) 0%, rgba(92,168,221,1) 51%, 
+   rgba(29,253,182,1) 100%);
   transition: 0.3s;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  right:0;
+
+}
+.LoginPage{
+  margin:150px;
+
+}
+.LoginForm{
+  margin:100px;
+  padding: 20px 0px;
+  background:  rgba(58,100,180,1);
+  border-radius: 15px;
+  text-align: center;
+  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
+
+  
+}
+.NextArrow {
+  font-size: 50px;
+  color: #41607d;
+  position: absolute;
+  left: 100%;
+  top: 50%;
   margin: auto;
+  padding-left: 20px;
+  text-shadow: black 1px 0 10px;
+  transition: opacity 0.3s;
+
+}
+.NextArrow:hover{
+  opacity: 0.6;
+}
+.NextArrow:active{
+  transform: scale(1.1); 
+  
+
 }
 .PostImage {
   display: flex;
   align-items: center;
   width: 700px;
-  margin: 20px;
+  // margin: 20px;
   height: 500px;
   object-fit: cover;
   margin-left: auto;
   margin-right: auto;
+  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
 }
 .Form {
-  padding: 300px;
   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
-  background: #74d2e7;
+  background: rgb(142, 199, 239);
+  border-radius: 10px;
+  
 }
 .Comments {
   position: fixed;
@@ -341,14 +358,12 @@ opacity: 0.6;
   margin: 20px;
   padding: 40px;
   // overflow-y: scroll;
-
 }
 .SpoilerButton {
   right: 30px;
   margin: 20px;
 }
 
-
 .Avatar {
   margin-left: 20px;
   width: 100px;

src/actions/index.js

@@ -8,7 +8,7 @@ import { actionFeedType } from '../redux/reducers/feed/feedReducer'
 import { actionExploreTypeCount } from '../redux/reducers/explore/exploreReducer'
 import { actionClearExplorePosts } from '../redux/reducers/explore/exploreReducer'
 import { actionExploreType } from '../redux/reducers/explore/exploreReducer'
-import { actionClearFeedPosts } from '../redux/reducers/feed/feedReducer'
+import { actionClearFeedPostsType } from '../redux/reducers/feed/feedReducer'
 import {actionProfilePageDataType} from '../redux/reducers/myData/myProfileReducer'
 import { history } from '../helpers'
 import{promiseWorker} from '../redux/saga'
@@ -106,6 +106,21 @@ export const actionAboutMe = (_id) =>
     ),
   )
 
+  export const actionGetAvatar= (_id) =>
+  actionPromise(
+    'getAvatar',
+    gql(
+      `query AboutMe($userId:String){
+            UserFindOne(query:$userId)
+            {
+             avatar{_id url}
+            }
+          }`,
+      {
+        userId: JSON.stringify([{ _id }]),
+      },
+    ),
+  )
   export const actionAboutMeLikes = (_id) =>
   actionPromise(
     'aboutMeLikes',
@@ -124,14 +139,11 @@ export const actionAboutMe = (_id) =>
       },
     ),
   )
- export const actionFullLogin = (login, password) =>  //упрощенный action для саги
-    ({type: 'FULL_LOGIN', login, password})
-    
-export const actionLogin = (login, password) => { //функция, которая возвращает результат actionPromise
+export const actionLogin = (login, password) => {
     return actionPromise(
         "auth",
         gql(
-            `query log($login:String, $password:String) {
+            `query log($login:String!, $password:String!) {
               login(login:$login, password:$password)
              }`,
             { login, password }
@@ -165,7 +177,7 @@ export const actionRegister = (login, password) =>
                   _id login
                 }
               }`,
-      { login: login, password: password },
+      { login, password },
     ),
   )
 
@@ -181,13 +193,13 @@ export const actionChangePassword = (login, password, newPassword) =>
       { login, password, newPassword },
     ),
   )
-export const actionFullRegister = (login, password) => async (dispatch) => {
-  let tokenCheck = await dispatch(actionRegister(login, password))
-  if (tokenCheck?.login === login) {
-    await dispatch(actionFullLogin(login, password))
-    history.push('/feed')
-  }
-}
+// export const actionFullRegister = (login, password) => async (dispatch) => {
+//   let tokenCheck = await dispatch(actionRegister(login, password))
+//   if (tokenCheck?.login === login) {
+//     await dispatch(actionFullLogin(login, password))
+//     history.push('/feed')
+//   }
+// }
 export const uploadFile = (file) => {
   const myForm = new FormData()
   myForm.append('photo', file)
@@ -217,7 +229,7 @@ export const actionClearPromiseForName = (name) => ({
   type: 'PROMISE_CLEAR',
   name,
 })
-export const actionAllClearPromise = () => ({
+export const actionAllClearPromiseType = () => ({
   type: 'PROMISE_All_CLEAR',
 })
 
@@ -227,7 +239,7 @@ export const actionUploadFiles = (files) =>
     Promise.all(files.map((file) => uploadFile(file))),
   )
 
-export const actionAvatar = (imageId, myId) =>
+export const actionAvatar = (imageId, _id) =>
   actionPromise(
     'setAvatar',
     gql(
@@ -238,7 +250,7 @@ export const actionAvatar = (imageId, myId) =>
     }
     }
     }`,
-      { imageId, userId: myId },
+      { imageId, userId: _id },
     ),
   )
 
@@ -612,15 +624,15 @@ export const actionDeleteLike = (likeId, postId) =>
     ),
   )
 
-export const actionSetAvatar = (file, myId) => async (dispatch) => {
-  const avatar = await dispatch(actionAvatar(file, myId))
-  if (avatar) {
-    await dispatch(actionFullProfilePageUser(myId))
-    await dispatch(actionFullProfilePage(myId))
-    await dispatch(actionClearPromise('setAvatar'))
-    await dispatch(actionClearPromise('uploadFile'))
-  }
-}
+// export const actionSetAvatar = (file, myId) => async (dispatch) => {
+//   const avatar = await dispatch(actionAvatar(file, myId))
+//   if (avatar) {
+//     await dispatch(actionFullProfilePageUser(myId))
+//     await dispatch(actionFullProfilePage(myId))
+//     await dispatch(actionClearPromise('setAvatar'))
+//     await dispatch(actionClearPromise('uploadFile'))
+//   }
+// }
 
 export const actionPostsFeed = (myFollowing, skip) =>
   actionPromise(
@@ -766,7 +778,7 @@ export const actionSearchUser = (userName) =>
       ),
     )
 
-export const actionUserUpsert = (user, myId) =>
+export const actionUserUpsert = (user, _id) =>
   actionPromise(
     'userUpsert',
     gql(
@@ -777,7 +789,7 @@ export const actionUserUpsert = (user, myId) =>
               }`,
       {
         user: {
-          _id: myId,
+          _id,
           login: user?.login,
           nick : user?.nick
         },
@@ -812,7 +824,6 @@ export const actionAboutUser = (_id) =>
       `query GetFollowing($userId:String){
       UserFindOne(query:$userId)
       {
-        _id
         following{_id login nick avatar{_id url}}
       }
     }`,
@@ -863,50 +874,7 @@ PostFind(query:$userId){
       },
     ),
   )
-export const actionSubscribe = (my_Id, followId, oldFollowing) =>
-  actionPromise(
-    'subscribe',
-    gql(
-      `mutation subscribe($user:UserInput) {
-        UserUpsert(user: $user) {
-          _id following{_id login}
-          followers{
-            _id login
-          }
-        }
-      }
-      `,
-      {
-        user: {
-          _id: my_Id,
-          following: [...(oldFollowing || []), { _id: followId }],
-        },
-      },
-    ),
-  )
-
 
-export const actionUnSubscribe = (my_Id, oldFollowing) =>
-  actionPromise(
-    'unSubscribe',
-    gql(
-      `mutation unSubscribe($user:UserInput) {
-        UserUpsert(user: $user) {
-          _id following{_id login}
-          followers{
-            _id login
-          }
-        }
-      }
-      `,
-      {
-        user: {
-          _id: my_Id,
-          following: oldFollowing || [],
-        },
-      },
-    ),
-  )
 
   export const actionChangeSubscribe = (oldFollowing) =>
   actionPromise(
@@ -915,66 +883,17 @@ export const actionUnSubscribe = (my_Id, oldFollowing) =>
       `mutation changeSubscribe($user:UserInput) {
         UserUpsert(user: $user) {
           _id
-        
         }
       }
       `,
       {
         user: 
-          // _id: my_Id,
          oldFollowing 
         ,
       },
     ),
   )
 
-export const actionFullSubscribe = (my_Id, followId) => async (
-  dispatch,
-  getState,
-) => {
-  const oldFollowing = (
-    getState().promise.aboutMe?.payload?.following || []
-  ).map(({ _id }) => ({ _id }))
-  let followingId = await dispatch(
-    actionSubscribe(my_Id, followId, oldFollowing),
-  )
-  if (followingId) {
-    Promise.all([
-      await dispatch(actionFullProfilePageUser(followId)),
-      await dispatch(actionFullProfilePage(my_Id)),
-    ])
-    await dispatch(actionClearFeedPosts())
-  }
-}
-
-export const actionFullUnSubscribe = (my_Id, followId) => async (
-  dispatch,
-  getState,
-) => {
-  const oldFollowing = (getState().promise.aboutMe?.payload?.following || [])
-    .filter((item) => item._id !== followId)
-    .map(({ _id }) => ({ _id }))
-  if (oldFollowing) {
-    await dispatch(actionUnSubscribe(my_Id, oldFollowing))
-    Promise.all([
-      await dispatch(actionFullProfilePageUser(followId)),
-      await dispatch(actionFullProfilePage(my_Id)),
-    ])
-    await dispatch(actionClearFeedPosts())
-  }
-}
-export const actionAddFullLike = (postId) => async (dispatch, getState) => {
-  await dispatch(actionAddLike(postId))
-  const {
-    promise: {
-      addLike: { status },
-    },
-  } = getState()
-  if (status === 'FULFILLED') {
-    await dispatch(actionOnePost(postId))
-  }
-  //  await dispatch(actionOnePost(postId));
-}
 
 export const actionAddFullLikeForFeed = (postId) => async (
   dispatch,
@@ -1009,18 +928,6 @@ export const actionDeleteFullLikeForFeed = (likeId, postId) => async (
   //  await dispatch(actionOnePost(postId));
 }
 
-export const actionUserUpdate = (user, myId) => async (dispatch, getState) => {
-  await dispatch(actionUserUpsert(user, myId))
-  const {
-    promise: {
-      userUpsert: { status },
-    },
-  } = getState()
-  if (status === 'FULFILLED') {
-    await dispatch(actionFullProfilePage(myId))
-    await dispatch(actionFullProfilePageUser(myId))
-  }
-}
 
 export const actionFindSubComment = (findId) =>
   actionPromise(

src/components/Carousel.js

@@ -5,17 +5,7 @@ import photoNotFound from '../materials/photoNotFound.png'
 const SampleNextArrow = (props) => {
     const { onClick } = props
     return (
-      <div
-        style={{
-          fontSize: '50px',
-          color: '#41607d',
-          position: 'absolute',
-          left: '100%',
-          top: '50%',
-          margin: 'auto',
-          paddingLeft: '20px',
-          textShadow: 'black 1px 0 10px',
-        }}
+      <div className='NextArrow'
         onClick={onClick}
       >
         <RightCircleFilled />

src/components/EditAvatar.js

@@ -9,7 +9,7 @@ import {
 import React, { useState, useEffect } from 'react'
 import { Basic, ConstructorModal } from '../helpers'
 import { Input } from './Input'
-
+import {actionSetAvatarTypeSaga} from '../redux/saga'
 const EditAvatar = ({
   info,
   onSaveAvatar,
@@ -18,7 +18,7 @@ const EditAvatar = ({
   fileStatus,
   myId,
 }) => {
-  const [state, setState] = useState(info)
+  const [state, setState] = useState({})
 
   console.log('state my ', state)
   useEffect(() => {
@@ -78,7 +78,7 @@ export const CEditAvatar = connect(
     info: state?.myData?.aboutMe?.avatar,
   }),
   {
-    onSaveAvatar: actionSetAvatar,
+    onSaveAvatar: actionSetAvatarTypeSaga,
     onFileDrop: actionUploadFile,
   },
 )(EditAvatar)

src/components/HeaderButtons.js

@@ -50,9 +50,8 @@ export const AddPost = ({ children }) => {
     </>
   )
 }
-export const LogOut = () => 
-<DefaultLink
-tag={<ImportOutlined  />}/>
+export const LogOut = ({onClick}) => 
+  <ImportOutlined className="Links" onClick={onClick} />
 
 // export const Feed = () => {
 //   return (

src/components/LinkToUser.js

@@ -12,6 +12,8 @@ export const LinkToUser = ({
     onClick, key
 }) => {
   return (
+    // <Row style={{ margin:'10px', marginBottom:'20px' }}>
+ 
     <Row style={{ margin:'10px', marginBottom:'20px' }}>
       <Link
         to={`/profile/${_id}`}
@@ -29,13 +31,13 @@ export const LinkToUser = ({
             <Avatar
               size={size}
               src={'/' + avatar?.url}
-              style={{ marginRight: '5px' }}
+              style={{ marginRight: '3px' }}
             />
           ) : (
-            <Avatar size={size} src={user} style={{ marginRight: '5px' }} />
+            <Avatar size={size} src={user} style={{ marginRight: '3px' }} />
           )}
         </Col>
-        <Col offset={2}>
+        <Col offset={2} style={{marginTop:'5px'}}>
           <h3> {login || 'Anon'}</h3>
         </Col>
       </Link>

src/components/LoginRegisterLogout.js

@@ -1,15 +1,21 @@
-import { actionFullLogin, actionFullRegister, actionClearPromise}
- from '../actions'
+import { actionFullRegister, actionClearPromise } from '../actions'
 import React, { useState } from 'react'
 import { connect } from 'react-redux'
-import { Button, Input, Checkbox, Form } from 'antd'
+import { Button, Input, Checkbox, Form, Row, Col } from 'antd'
 import { Link } from 'react-router-dom'
 import { actionClearUserData } from '../redux/saga'
 import { message } from 'antd'
 import { useEffect } from 'react'
 import { LogOut } from './HeaderButtons'
+import { ImportOutlined } from '@ant-design/icons'
+import {
+  actionClearDataLogoutTypeSaga,
+  actionLoginTypeSaga,
+  actionRegisterTypeSaga,
+} from '../redux/saga'
+import logo from '../materials/logo3.png'
 
-const LoginForm = ({ onLogin, children, auth,register, onClearPromise }) => {
+const LoginForm = ({ onLogin, children, auth, register, onClearPromise }) => {
   const [login, setLogin] = useState('')
   const [password, setPassword] = useState('')
   const [checked, setChecked] = useState(false)
@@ -23,7 +29,7 @@ const LoginForm = ({ onLogin, children, auth,register, onClearPromise }) => {
       })
     }
   }, [auth])
-  
+
   useEffect(() => {
     if (register?.status === 'FULFILLED' && register?.payload === null) {
       message.error({
@@ -32,170 +38,156 @@ const LoginForm = ({ onLogin, children, auth,register, onClearPromise }) => {
           marginTop: '80px',
         },
       })
-      &&
-      onClearPromise('register')
-  
     }
   }, [register])
   const input = () => {
-    onLogin(login, password)
-      // &&
+    onLogin(login, password) && setPassword('') && setLogin('')
+    // &&
     // onClearPromise('auth')
   }
   return (
     <>
-      <center>
-        <Form
-          className="Form"
-          size="large"
-          name="basic"
-          style={{
-            marginTop: '200px',
-            padding: '100px',
-            width:'50%'
-          }}
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 10 }}
-          initialValues={{ remember: true }}
-          autoComplete="off"
+      <Form
+        className="Form"
+        size="medium"
+        name="basic"
+        style={{
+
+          margin: '0 auto',
+          margin: '50px',
+          padding: '20px',
+          textAlign: 'center',
+        }}
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 13 }}
+        autoComplete="off"
+      >
+        <h2 style={{}}> {children} </h2>
+        <h4> Login and password must be at least 5 characters </h4>
+        <Form.Item
+          label="Login"
+          name="login"
+          size="medium"
+          rules={[
+            {
+              required: true,
+              message: 'Please input login!',
+            },
+          ]}
         >
-          <h1> {children} </h1>
-          <h1> Login and password must be at least 5 characters </h1>
-          <Form.Item
-            label="Login"
-            name="login"
-            size="large"
-            rules={[{ required: true, message: 'Please input login!' }]}
-          >
-            <Input
-              value={login}
-              size="large"
-              onChange={(e) => setLogin(e.target.value)}
-            />
-          </Form.Item>
+          <Input
+            value={login}
+            size="medium"
+            onChange={(e) => setLogin(e.target.value)}
+          />
+        </Form.Item>
 
-          <Form.Item
-            label="Password"
-            name="password"
+        <Form.Item
+          label="Password"
+          name="password"
+          size="medium"
+          rules={[
+            {
+              required: true,
+              message: 'Please input your password!',
+            },
+          ]}
+        >
+          <Input
+            size="medium"
+            type={checked ? 'text' : 'password'}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="checked"
+          valuePropName="checked"
+          wrapperCol={{ offset: 5, span: 10 }}
+        >
+          <Checkbox
+            checked={checked}
+            onChange={(e) => {
+              setChecked(e.target.checked)
+            }}
             size="large"
-            rules={[{ required: true, message: 'Please input your password!' }]}
           >
-            <Input
-              size="large"
-              type={checked ? 'password' : 'text'}
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-            />
-          </Form.Item>
+            See the password
+          </Checkbox>
+        </Form.Item>
 
-          <Form.Item
-            name="remember"
-            valuePropName="checked"
-            wrapperCol={{ offset: 8, span: 10 }}
+        <Form.Item wrapperCol={{ offset: 6, span: 13 }}>
+          <Button
+            size="medium"
+            type="primary"
+            htmlType="submit"
+            primary
+            style={{ width: '100%' }}
+            className="Btn"
+            disabled={login.length < 5 || password.length < 5}
+            onClick={input}
           >
-            <Checkbox
-              checked={checked}
-              onChange={(e) => {
-                setChecked(e.target.checked)
-              }}
-              size="large"
-            >
-              See the password
-            </Checkbox>
-          </Form.Item>
-
-          <Form.Item wrapperCol={{ offset: 8, span: 10 }}>
-            <Button
-              size="large"
-              type="primary"
-              htmlType="submit"
-              primary
-              style={{ width: '100%' }}
-              className="Btn"
-              disabled={login.length < 5 || password.length < 5}
-              onClick={input}
-            >
-              {children}
-            </Button>
-          </Form.Item>
-        </Form>
-      </center>
+            {children}
+          </Button>
+        </Form.Item>
+      </Form>
     </>
   )
 }
+export const CLogout = connect(null, {
+  onClick: actionClearDataLogoutTypeSaga,
+})(LogOut)
+
+export const InputForm = ({onLogin,auth,register, children}) => {
+  return (
+    // <div style={{display:'flex',flexDirection:'row'}}>
+    <div className="InputForm">
+      <Row>
+        <Col span={12}>
+          <img className="LoginPage" src={logo} />
+        </Col>
+
+        <Col span={12}>
+          <div className="LoginForm">
+            <LoginForm onLogin={onLogin} auth={auth} children={children} />
+            {children === "Register" ?
+                <h2>
+               Have an account?
+                <Link to="/login"
+                style={{ color: 'white', marginLeft: '5px' }}>Login</Link>
+              </h2>
+              :
+              <h2>
+                Don't have an account yet?
+                <Link to="/register" style={{ color: 'white', marginLeft: '5px' }}>Register</Link>
+              </h2>
+            }
+          </div>
+        </Col>
+      </Row>
+    </div>
+
+  )
+}
+// export const CInputForm = connect()(InputForm)
 export const CLoginForm = connect(
   (state) => ({
     children: `Sign In`,
     auth: state.promise?.auth,
   }),
   {
-    onLogin: actionFullLogin,
-    onClearPromise:actionClearPromise
-
+    onLogin: actionLoginTypeSaga,
+    // onClearPromise: actionClearPromise,
   },
-)(LoginForm)
-
+)(InputForm)
 export const CRegisterForm = connect(
   (state) => ({
     children: `Register`,
-    register: state.promise?.register
+    register: state.promise?.register,
   }),
   {
-    onLogin: actionFullRegister,
-    onClearPromise:actionClearPromise
-
+    onLogin: actionRegisterTypeSaga,
+    onClearPromise: actionClearPromise,
   },
-)(LoginForm)
-
-export const CLogout = connect(
-  null,{ onClick: actionClearUserData },
-)(LogOut)
-
-export const InputForm = ({}) => {
-  return (
-    <>
-      <center>
-        <div className="InputForm">
-          <h1>
-            {' '}
-            If you have account, click on Sign In,
-            <br />
-            else - click on Register
-          </h1>
-          <div>
-            <Link to={`/login`}>
-              <Button
-                style={{
-                  margin: '50px',
-                  width: '100px',
-                  boxShadow:
-                    '0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
-                }}
-                size="large"
-                type="primary"
-              >
-                Sign In
-              </Button>
-            </Link>
-
-            <Link to={`/register`}>
-              <Button
-                style={{
-                  marginLeft: '100px',
-                  width: '100px',
-                  boxShadow:
-                    '0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
-                }}
-                size="large"
-                type="primary"
-              >
-                Register
-              </Button>
-            </Link>
-          </div>
-        </div>
-      </center>
-    </>
-  )
-}
-export const CInputForm = connect()(InputForm)
+)(InputForm)

src/components/Routing.js

@@ -24,8 +24,8 @@ const Routing = ({ token }) => {
         <Switch>
           <Route path="/login" exact component={CLoginForm} />
           <Route path="/register" component={CRegisterForm} />
-          <Route path="/input" component={InputForm} />
-          <Redirect from="/*" to="/input" />
+          {/* <Route path="/input" component={InputForm} /> */}
+          <Redirect from="/*" to="/login" />
           <CProtectedRoute
             roles={['anon']}
             fallback="/*"

src/components/Sortable.js

@@ -6,9 +6,6 @@ export const SortableItem = SortableElement(({ url, onRemoveImage, _id }) => {
       <>
       <img
         style={{
-          // margin: '20px',
-         
-          
             objectFit: 'cover',
           boxShadow: '0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
           height: '100px',

src/pages/feedPosts/index.js

@@ -20,7 +20,7 @@ import {
   // actionDeleteFullLikeFeed,
  
 } from '../../redux/saga'
-import {actionClearFeedPosts} from '../../redux/reducers/feed/feedReducer'
+import {actionClearFeedPostsType} from '../../redux/reducers/feed/feedReducer'
 import { Link } from 'react-router-dom'
 import { Provider, connect } from 'react-redux'
 import { Upload, Button, DatePicker, Space } from 'antd'
@@ -91,9 +91,12 @@ const MyPostFeed = ({
               )}
               {(postsFeed || []).map(
                 ({ _id, images, title, text, owner, comments, likes }) => (
-                  <div className="PostFeed" >
-                    <LinkToUser _id={owner?._id} key={_id} login={owner?.login} avatar={owner?.avatar} size={50} />
-                    <MyCarousel images={images} style={{ marginTop: '60px' }} />
+                  <div className='PostFeed'>
+                    <LinkToUser _id={owner?._id} key={_id} style={{marginLeft:"50px"}}
+                      login={owner?.login} avatar={owner?.avatar}
+                      size={50} />
+                    <MyCarousel images={images} />
+                    <div style={{margin:"0 10%"}}>
                     <h1 className='Title'> Title: {title || ''}</h1>
                     <h1  className='Title'> Text: {text || ''}</h1>
                     <Divider>Comments</Divider>
@@ -111,7 +114,7 @@ const MyPostFeed = ({
                       </div>
                        </center>
                     </div>
-                 
+                 </div>
                 ),
               )}
              
@@ -148,7 +151,7 @@ export const CPostForFeed = connect(
   }),
   {
     onPostsFeed: actionFullAllGetPosts,
-    onClearFeed: actionClearFeedPosts,
+    onClearFeed: actionClearFeedPostsType,
     // addComment: actionAddFullCommentFeed,
     // addCommentReply: actionAddSubFullComment,
     // addLike: actionAddFullLikeForFeed,

src/pages/profilePage/index.js

@@ -9,13 +9,12 @@ import { actionFullProfilePageUser } from '../../redux/saga'
 import { Row, Col } from 'antd'
 import { CSubscribe } from '../../components/Subscribe'
 import { CEditSetting } from '../setting'
-import { Link,useParams} from 'react-router-dom'
+import { Link} from 'react-router-dom'
 
 export const PageAboutUser = ({
-  // match: {
-  //   params: { _id },
-  // },
-  
+  match: {
+    params: { _id },
+  },
   my_Id,
   aboutUser: { login, nick, createdAt, avatar, followers, following } = {},
   allPosts,
@@ -23,12 +22,11 @@ export const PageAboutUser = ({
   onAboutUser,
   countAllPostsUser,
 }) => {
-  const { _id } = useParams();
   useEffect(() => {
     onAboutUser(_id)
     // console.log('USER DATA ', login, _id)
   }, [_id])
-
+  // const { _id } = useParams();
   const checkMyId = _id === my_Id
 
   return (
@@ -92,13 +90,12 @@ export const PageAboutUser = ({
                   />
                 </div>
                 <h3> nick: {nick == null ? login : nick}</h3>
-                {checkMyId ? (
-                  <>
+                {checkMyId ? 
                     <CEditSetting />
-                  </>
-                ) : (
+                  : 
+                    
                   <CSubscribe />
-                )}
+                }
               </div>
             </Row>
           </section>

src/pages/setting/index.js

@@ -10,6 +10,7 @@ import {
 } from '../../actions'
 import { Basic, ConstructorModal } from '../../helpers'
 import { SpoilerButton } from '../../components/Comment'
+import{actionUserUpdateTypeSaga} from '../../redux/saga'
 export const EditAccount = ({showModalEdit }) => {
     return (
          <Button
@@ -24,7 +25,8 @@ export const EditAccount = ({showModalEdit }) => {
     )
   }
 const EditSetting = ({ info, myId, onSaveUserUpsert,
-  onSaveNewPassword, changePassword, onClearPromise}) => {
+  onClearPromise,
+  onSaveNewPassword, changePassword}) => {
   const [state, setState] = useState(info)
   const [changePass, setChangePass] = useState(changePassword)
     const [isModalVisibleEdit, setIsModalVisibleEdit] = useState(false);
@@ -190,9 +192,9 @@ const EditSetting = ({ info, myId, onSaveUserUpsert,
       changePassword : state.promise?.newPassword
     }),
     {
-      onSaveUserUpsert: actionUserUpdate,
+      onSaveUserUpsert: actionUserUpdateTypeSaga,
       onSaveNewPassword: actionChangePassword,
-      onClearPromise:actionClearPromise
+      // onClearPromise:actionClearPromise
     },
   )(EditSetting)
   

src/redux/index.js

@@ -19,7 +19,11 @@ onePostWatcher,
   addCommentOnePostWatcher,
   changeLikePostWatcher,
   editPostWatcher,
-  changeSubscribeWatcher
+  changeSubscribeWatcher,
+  userUpdateWatcher,
+  setAvatarWatcher,
+  clearAllDataWatcher,
+  registerWatcher
 } from './saga'
 import createSagaMiddleware from 'redux-saga' //функция по созданию middleware
 import {
@@ -49,6 +53,7 @@ function* rootSaga() {
     promiseWatcher(), 
     fullProfilePageWatcher(),
     loginWatcher(),
+    registerWatcher(),
     fullPageAboutUserWatcher(),
     feedWatcher(),
     exploreWatcher(),
@@ -56,7 +61,10 @@ function* rootSaga() {
     addCommentOnePostWatcher(),
     changeLikePostWatcher(),
     editPostWatcher(),
-    changeSubscribeWatcher()
+    changeSubscribeWatcher(),
+    userUpdateWatcher(),
+    setAvatarWatcher(),
+    clearAllDataWatcher()
     // addCommentFeedWatcher()
   ])
 }

src/redux/reducers/feed/feedReducer.js

@@ -64,7 +64,7 @@ export const feedReducer = (
 //   return dispatch(actionClearFeedPosts())
 // }
 
-export const actionClearFeedPosts = () =>
+export const actionClearFeedPostsType= () =>
   ({ type: 'CLEAR_POSTS' })
 
 //type

src/redux/reducers/myData/myProfileReducer.js

@@ -19,6 +19,16 @@ export const myProfileReducer = (state = {}, { type, aboutMe, newResult }) => {
 
         }
       },
+      'UPDATE_AVATAR': () => {
+        return {
+          ...state,
+          aboutMe: ({
+            ...state.aboutMe,
+            avatar: { ...newResult }
+          })
+
+        }
+      },
     }
     if (type in types) {
       return types[type]()
@@ -33,10 +43,14 @@ export const myProfileReducer = (state = {}, { type, aboutMe, newResult }) => {
     
 
   
-  export const actionRemoveDataAboutMe = () => 
+  export const actionClearAboutMeType = () => 
   ({ type: 'REMOVE-DATA' })
   
   export const actionChangeFollowingType = (newResult) => ({
     type:"UPDATE_FOLLOWING", newResult
     
-  })
+})
+  
+export const actionUpdateAvatarType= (newResult) => ({
+  type:"UPDATE_AVATAR", newResult
+})

src/redux/saga/index.js

@@ -10,8 +10,11 @@ import {
     actionAddLike,
     actionDeleteLike,
     actionPostsCount,
-    actionAuthLogout,
+  actionAuthLogout,
+  actionRegister,
+  actionGetAvatar,
   actionAllClearPromise,
+  actionAvatar,
   actionLogin,
   actionAuthLogin,
   actionClearPromise,
@@ -22,9 +25,13 @@ import {
   actionChangeSubscribe,
   actionGetFollowing,
   actionGetFollowers,
+  actionUserUpsert,
+  actionAllClearPromiseType
   // actionOnePost
 } from '../../actions'
-  
+import { message } from 'antd'
+
+import { actionClearAboutMeType } from '../reducers/myData/myProfileReducer'
 import { history } from '../../helpers'
 import {
   actionClearDataUserType,
@@ -39,10 +46,11 @@ import {
   actionDeleteLikePostInTape,
   actionAddCommentPostInTape,
   actionClearFeedPosts,
-  actionFeedType
+  actionFeedType,
+  actionClearFeedPostsType
 } from '../reducers/feed/feedReducer'
 import { actionProfilePageDataTypeUser,actionCountPostsType } from '../reducers/userData/userProfileReducer'
-import { actionRemoveDataAboutMe } from '../reducers/myData/myProfileReducer'
+import { actionRemoveDataAboutMe,actionUpdateAvatarType } from '../reducers/myData/myProfileReducer'
 import {actionExploreType,actionClearExplorePosts} from '../reducers/explore/exploreReducer'
 import { all, put,take, fork, takeEvery, takeLatest, takeLeading, select,call, join } from 'redux-saga/effects'; //
 import {actionPending,actionFulfilled,actionRejected,actionExplorePosts,actionExplorePostsCount} from '../../actions'
@@ -69,6 +77,7 @@ import {actionAddCommentType} from '../../actions/types/postActionTypes'
 //login
 function* loginWorker({login, password}){ //обработчик экшона FULL_LOGIN
   let token = yield call(promiseWorker,actionLogin(login, password)) //dispatch(actionLogin(login, password));
+  console.log('token login ', token)
   if (token) {
       yield put(actionAuthLogin(token));
   }
@@ -77,6 +86,28 @@ export function* loginWatcher() {
 yield takeEvery("FULL_LOGIN", loginWorker)
 
 }
+export const actionLoginTypeSaga = (login, password) =>  //упрощенный action для саги
+({type: 'FULL_LOGIN', login, password})
+
+//register 
+
+function* registerWorker({ login, password }) {
+  let token = yield call(promiseWorker,actionRegister(login, password)) //dispatch(actionLogin(login, password));
+  console.log('token reg ', token)
+  if (token) {
+  console.log('token reg в ифе ', token)
+    yield put(actionLoginTypeSaga(login, password ))
+    history.push('/feed')
+  }
+}
+export function* registerWatcher() {
+yield takeEvery("REGISTER", registerWorker)
+
+}
+export const actionRegisterTypeSaga = (login, password) =>  //упрощенный action для саги
+({type: 'REGISTER', login, password})
+
+
 //profile page about me
 export const actionFullProfilePage = () =>
 ({
@@ -326,27 +357,22 @@ export const actionCreateEditPost= (state) =>
 //change subscribe 
 function* changeSubscribeWorker({ followId, checkFollowId }) {
   const { myData: { aboutMe: { _id, following } } } = yield select()
-  // const checkFollowId = following?.find(
-  //   (follower) => follower?._id === followId,
-  // )?._id
   console.log('my following', following)
-
   console.log('check follow id', checkFollowId)
   console.log('my id', _id)
  
   const oldFollowing = checkFollowId ?
     {
-      
       _id,
-      following: [...following.filter((item) => item._id !== followId).map(({ _id }) => ({ _id }))]
+      following: [...(following||[]).filter((item) =>
+        item._id !== followId).map(({ _id }) => ({ _id }))]
     } 
   : {
       
     _id,
-    following:[...following.map(({ _id }) => ({ _id })), {_id: followId}]
-
+      following: [...(following||[]).map(({ _id }) =>
+        ({ _id })), { _id: followId }]
     }
-    
   console.log('old following', oldFollowing)
   console.log('еще раз май фолловинг ', following)
   
@@ -362,11 +388,7 @@ console.log('change', change)
   if (updateMyFollowing)
    yield put(actionChangeFollowingType(updateMyFollowing?.following))
  if (updateUserFollowers)
-  {
-   
     yield put(actionChangeFollowersType(updateUserFollowers?.followers))
-    
-    }
 }
 
 
@@ -379,38 +401,80 @@ export const actionChangeSubscribeSaga= (followId,checkFollowId) =>
     type:"CHANGE_SUBSCRIBE", followId,checkFollowId
 })
 
-
-// export const actionDeleteFullLikeFeed = (likeId, postId) => async (
-//     dispatch,
-//     getState,
-//   ) => {
-//     await dispatch(actionDeleteLike(likeId, postId))
-//     const {
-//       promise: {
-//         deleteLike: { status },
-//       },
-//     } = getState()
-//     if (status === 'FULFILLED') {
-//       const onePost = await dispatch(actionOnePost(postId))
-//       if (onePost) await dispatch(actionDeleteLikePostInTape(likeId, postId))
-//     }
-//   }
-
   //comment
 export const actionAddFullCommentFeed = (postId, newResult) => ({
   type:"ADD_COMMENT_FEED", postId, newResult
 })
 
+export const actionUserUpdateTypeSaga = (user) => ({
+  type:"USER_UPDATE", user
+})
+function* userUpdateWorker({ user }) {
+  const {myData:{aboutMe:{_id}}}= yield select()
+  const userUpsert = yield call(promiseWorker, actionUserUpsert(user, _id))
+  if (userUpsert) {
+    yield call(fullPageAboutUserWorker, { _id })
+   yield call(fullProfilePageWorker)
+  }
+}
+
+export function* userUpdateWatcher() {
+  yield takeEvery("USER_UPDATE", userUpdateWorker)
+}
+
+export const actionSetAvatarTypeSaga = (file) => ({
+  type:"SET_AVATAR", file
+})
+
+function* setAvatarWorker({ file }) {
+  const {myData:{aboutMe:{_id}}}= yield select()
+  const setAvatar = yield call(promiseWorker, actionAvatar(file, _id))
+  console.log('setAvatar', setAvatar)
+  const {avatar} =yield call(promiseWorker,actionGetAvatar(_id))
+  if (setAvatar) {
+    yield call(fullPageAboutUserWorker, { _id })
+    yield put(actionUpdateAvatarType(avatar))
+    // yield call(promiseWorker,actionClearPromiseForName("setAvatar"))
+    // yield call(promiseWorker,actionClearPromiseForName("uploadFile"))
+
+  }
+}
+
+export function* setAvatarWatcher() {
+  yield takeEvery("SET_AVATAR", setAvatarWorker)
+}
+
+// export const actionUserUpdate = (user, myId) => async (dispatch, getState) => {
+//   await dispatch(actionUserUpsert(user, myId))
+//   const {
+//     promise: {
+//       userUpsert: { status },
+//     },
+//   } = getState()
+//   if (status === 'FULFILLED') {
+//     await dispatch(actionFullProfilePage(myId))
+//     await dispatch(actionFullProfilePageUser(myId))
+//   }
+// }
+
+
 //clear user data after log out
-export const actionClearUserData = () => async (dispatch) => {
-    const logOut = await dispatch(actionAuthLogout())
-    if (logOut) {
-      history.push('/input')
-      await dispatch(actionClearDataUserType())
-      await dispatch(actionClearFeedPosts())
-      await dispatch(actionRemoveDataAboutMe())
-      await dispatch(actionAllClearPromise())
-      
-    }
+
+export const actionClearDataLogoutTypeSaga = () => ({
+  type:"CLEAR_ALL_DATA"
+})
+function* clearAllDataWorker() {
+  const logOut = yield put (actionAuthLogout())
+  if (logOut) {
+    history.push('/input')
+      yield put(actionClearDataUserType())
+      yield put(actionClearFeedPostsType())
+      yield put(actionClearAboutMeType())
+      yield put(actionAllClearPromiseType())
+    
   }
+}
 
+export function* clearAllDataWatcher() {
+  yield takeEvery("CLEAR_ALL_DATA", clearAllDataWorker)
+}