Add change password in setting, update scroll in explore posts page

src/App.js

@@ -7,7 +7,7 @@ import 'antd/dist/antd.css'
 import { actionFullProfilePage } from './redux/thunk'
 import { actionFullAllGetPosts } from './actions'
 
-import { CShowHeader } from './pages/header/Header'
+import { CShowHeader } from './pages/header'
 import { CRouting } from './components/Routing'
 import {history} from './helpers'
 console.log(store.getState())
@@ -15,7 +15,6 @@ store.subscribe(() => console.log(store.getState()))
 console.log('ABOUT ME', store.getState().auth?.payload?.sub?.id)
 
 
-
 function App() {
   if (store.getState().auth?.token) {
     console.log('токен', store.getState().auth?.payload?.sub?.id)

src/App.scss

@@ -18,22 +18,21 @@ body {
 //   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 // }
 /* width */
-::-webkit-scrollbar {
-width: 20px;
-// height: 20px;
-}
+// ::-webkit-scrollbar {
+// width: 20px;
+// // height: 20px;
+// }
 
-/* Track */
-::-webkit-scrollbar-track {
-box-shadow: inset 0 0 5px #32373b;
-// border-radius: 2px;
-}
+// ::-webkit-scrollbar-track {
+// box-shadow: inset 0 0 5px #32373b;
+// // border-radius: 2px;
+// }
 
-/* Handle */
-::-webkit-scrollbar-thumb {
-background: #1d5b78;
-border-radius: 3px;
-}
+// /* Handle */
+// ::-webkit-scrollbar-thumb {
+// background: #1d5b78;
+// border-radius: 3px;
+// }
 @import '~antd/dist/antd.css';
 
 .Dropzone {
@@ -127,7 +126,7 @@ main {
   display: flex;
   width: 90%;
   padding: 5px;
-  margin: 10px;
+  // margin: 5px;
   border-radius: 10px;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: 20px;

src/actions/index.js

@@ -35,6 +35,25 @@ export const getGQL = (url) => (query, variables) =>
 
 export const gql = getGQL('/graphql')
 
+export const getGQLAnon = (url) => (query, variables) =>
+  fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ query, variables }),
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      if (data.data) {
+        return Object.values(data.data)[0]
+      } else {
+        throw new Error(JSON.stringify(data.errors))
+      }
+    })
+
+export const gqlAnon = getGQLAnon('/graphql')
+
 export const actionPending = (name) => ({
   type: 'PROMISE',
   name,
@@ -112,9 +131,9 @@ export const actionRegister = (login, password) =>
 export const actionChangePassword = (login, password, newPassword) =>
   actionPromise(
     'newPassword',
-    gql(
-      `mutation changePassword($login: String!, $password: String!, $newPassword: newPassword) {
-        changePassword (login: $login, password: $password$newPassword: newPassword) {
+    gqlAnon(
+      `mutation changePassword($login: String!, $password: String!, $newPassword: String!) {
+        changePassword (login: $login, password: $password, newPassword: $newPassword) {
                   _id login
                 }
               }`,
@@ -157,6 +176,9 @@ export const actionClearPromiseForName = (name) => ({
   type: 'PROMISE_CLEAR',
   name,
 })
+export const actionAllClearPromise = () => ({
+  type: 'PROMISE_All_CLEAR',
+})
 
 export const actionUploadFiles = (files) =>
   actionPromise(
@@ -616,7 +638,8 @@ export const actionFullAllGetPosts = () => async (dispatch, getState) => {
     aboutMe?.following && aboutMe?.following?.map(({ _id }) => _id)
   const myId = getState().auth.payload?.sub?.id
   console.log('myId', myId)
-  if (!myFollowing) await dispatch(actionFullProfilePage(myId))
+  if (!myFollowing)
+    await dispatch(actionFullProfilePage(myId))
   myFollowing =
     getState().profileData.aboutMe?.following &&
     getState().profileData.aboutMe?.following?.map(({ _id }) => _id)
@@ -723,7 +746,7 @@ export const actionExplorePosts = (skip) =>
           {
             sort: [{ _id: -1 }],
             skip: [skip || 0],
-            limit: [10],
+            limit: [12],
           },
         ]),
       },
@@ -781,7 +804,8 @@ export const actionUserUpsert = (user, myId) =>
       {
         user: {
           _id: myId,
-          ...user,
+          login: user?.login,
+          nick : user?.nick
         },
       },
     ),
@@ -822,7 +846,7 @@ PostFind(query:$userId){
           {
             sort: [{ _id: -1 }],
             skip: [skip || 0],
-            limit: [300],
+            limit: [10],
           },
         ]),
       },

src/components/Comment.js

@@ -76,7 +76,7 @@ export const AddComment = ({ addComment, postId }) => {
     </>
   )
 }
-const SpoilerButton = ({ text, close, children }) => {
+export const SpoilerButton = ({ text, close, children, style }) => {
   const [opened, setOpened] = useState(close)
   return (
     <>
@@ -84,6 +84,7 @@ const SpoilerButton = ({ text, close, children }) => {
         onClick={() => {
           setOpened(!opened)
         }}
+        style={style}
       >
         {text}
       </Button>

src/components/EditAvatar.js

@@ -1,11 +1,23 @@
 import { connect } from 'react-redux'
 import { message, Image, Button } from 'antd'
-import { actionUploadFile, actionSetAvatar, actionUserUpsert, actionUserUpdate } from '../actions'
+import {
+  actionUploadFile,
+  actionSetAvatar,
+  actionUserUpsert,
+  actionUserUpdate,
+} from '../actions'
 import React, { useState, useEffect } from 'react'
 import { Basic, ConstructorModal } from '../helpers'
-import {Input} from './Input'
+import { Input } from './Input'
 
-const EditAvatar = ({ info, onSaveAvatar, setIsModalVisibleEdit, onFileDrop, fileStatus, myId }) => {
+const EditAvatar = ({
+  info,
+  onSaveAvatar,
+  setIsModalVisibleEdit,
+  onFileDrop,
+  fileStatus,
+  myId,
+}) => {
   const [state, setState] = useState(info)
 
   console.log('state my ', state)
@@ -14,39 +26,41 @@ const EditAvatar = ({ info, onSaveAvatar, setIsModalVisibleEdit, onFileDrop, fil
       setState({
         ...state,
         // ...state?.avatar?._id,
-        ...fileStatus?.payload
+        ...fileStatus?.payload,
       })
   }, [fileStatus])
-  // onSaveAvatar(state?._id, myId)&& 
+  // onSaveAvatar(state?._id, myId)&&
   const saveAvatar = () => {
     if (fileStatus)
-      onSaveAvatar(state?._id, myId)
-        && message.success(`Avatar success changed!`)
-        && setIsModalVisibleEdit(false)
+      onSaveAvatar(state?._id, myId) &&
+        message.success(`Avatar success changed!`) &&
+        setIsModalVisibleEdit(false)
   }
 
   return (
-    <div>
-      <h2> Edit avatar </h2>
-      <div style={{
-        display: 'flex', alignItems: 'center', flexDirection: 'column'
-      }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'column',
+        }}
+      >
         <Basic onLoad={onFileDrop} />
 
         {fileStatus?.payload?.url && (
-
           <Image
             style={{
-              marginBottom: '30px', width: '200px',
+              marginBottom: '30px',
+              width: '200px',
               objectFit: 'cover',
-              height: '150px'
+              height: '150px',
             }}
-
-
             src={'/' + fileStatus?.payload?.url}
           />
-        )}<br />
-        <Button style={{ width: "200px" }}
+        )}
+        <br />
+        <Button
+          style={{ width: '200px' }}
           disabled={fileStatus ? false : true}
           onClick={saveAvatar}
           size="large"
@@ -55,7 +69,6 @@ const EditAvatar = ({ info, onSaveAvatar, setIsModalVisibleEdit, onFileDrop, fil
           Save avatar
         </Button>
       </div>
-    </div>
   )
 }
 export const CEditAvatar = connect(
@@ -69,4 +82,3 @@ export const CEditAvatar = connect(
     onFileDrop: actionUploadFile,
   },
 )(EditAvatar)
-

src/components/LoginRegisterLogout.js

@@ -1,4 +1,4 @@
-import { actionFullLogin, actionFullRegister }
+import { actionFullLogin, actionFullRegister, actionClearPromise}
  from '../actions'
 import React, { useState } from 'react'
 import { connect } from 'react-redux'
@@ -8,11 +8,10 @@ import { actionClearUserData } from '../redux/thunk'
 import { message } from 'antd'
 import { useEffect } from 'react'
 
-const LoginForm = ({ onLogin, children, auth }) => {
+const LoginForm = ({ onLogin, children, auth,register, onClearPromise }) => {
   const [login, setLogin] = useState('')
   const [password, setPassword] = useState('')
   const [checked, setChecked] = useState(false)
-
   useEffect(() => {
     if (auth?.status === 'FULFILLED' && auth?.payload === null) {
       message.error({
@@ -23,7 +22,25 @@ const LoginForm = ({ onLogin, children, auth }) => {
       })
     }
   }, [auth])
-
+  
+  useEffect(() => {
+    if (register?.status === 'FULFILLED' && register?.payload === null) {
+      message.error({
+        content: 'This login is already in the database',
+        style: {
+          marginTop: '80px',
+        },
+      })
+      &&
+      onClearPromise('register')
+  
+    }
+  }, [register])
+  const input = () => {
+    onLogin(login, password)
+      // &&
+    // onClearPromise('auth')
+  }
   return (
     <>
       <center>
@@ -95,7 +112,7 @@ const LoginForm = ({ onLogin, children, auth }) => {
               style={{ width: '100%' }}
               className="Btn"
               disabled={login.length < 5 || password.length < 5}
-              onClick={() => onLogin(login, password)}
+              onClick={input}
             >
               {children}
             </Button>
@@ -112,15 +129,20 @@ export const CLoginForm = connect(
   }),
   {
     onLogin: actionFullLogin,
+    onClearPromise:actionClearPromise
+
   },
 )(LoginForm)
 
 export const CRegisterForm = connect(
   (state) => ({
     children: `Register`,
+    register: state.promise?.register
   }),
   {
     onLogin: actionFullRegister,
+    onClearPromise:actionClearPromise
+
   },
 )(LoginForm)
 

src/components/Post.js

@@ -11,7 +11,7 @@ import user from '../materials/user.png'
 import { connect } from 'react-redux'
 import { Row, Col } from 'antd'
 import { CComments, AddComment } from './Comment'
-import { CPostEditor } from '../pages/createAndEditPost/CreateAndEditPost'
+import { CPostEditor } from '../pages/createAndEditPost'
 import { actionFullOnePost } from '../redux/reducers/post/postReducer'
 import { CLike} from './Like'
 import { ConstructorModal } from '../helpers'

src/components/Routing.js

@@ -1,9 +1,9 @@
 import { InputForm, CRegisterForm, CLoginForm } from './LoginRegisterLogout'
 import { Router, Route, Redirect, Switch } from 'react-router-dom'
-import { CExplorePosts } from '../pages/explorePosts/ExplorePosts'
-import { CPostForFeed, Feed } from '../pages/feedPosts/FeedPosts'
-import { CPostEditor } from '../pages/createAndEditPost/CreateAndEditPost'
-import { CPageAboutUser } from '../pages/profilePage/ProfilePageUser'
+import { CExplorePosts } from '../pages/explorePosts'
+import { CPostForFeed, Feed } from '../pages/feedPosts'
+import { CPostEditor } from '../pages/createAndEditPost'
+import { CPageAboutUser } from '../pages/profilePage'
 import { CPost } from './Post'
 import { Provider, connect } from 'react-redux'
 

src/pages/createAndEditPost/CreateAndEditPost.js

@@ -12,7 +12,7 @@ import {
   Basic,
   SortableContainer,
   SortableItem,
-} from '../../components/DropZone'
+} from '../../components/Dropzone'
 import { arrayMoveImmutable } from 'array-move'
 import { Row, Col } from 'antd'
 import { history } from '../../helpers'

src/pages/explorePosts/ExplorePosts.js

@@ -11,6 +11,7 @@ import {
     actionClearExplorePosts,
     actionAllClearExplore,
   } from '../../redux/reducers/explore/exploreReducer'
+import load from '../../materials/load.gif'
   
   const ExplorePosts = ({
     explorePosts = [],
@@ -18,15 +19,15 @@ import {
     onClearExplore,
     onExlorePosts,
     explorePostsCount,
+    explorePostsPromise
   }) => {
     const [checkScroll, setScroll] = useState(true)
     console.log('scroll ', checkScroll)
     useEffect(() => {
       if (checkScroll) {
         onExlorePosts()
-  
-        setScroll(false)
       }
+      setScroll(false)
     }, [checkScroll])
   
     useEffect(() => {
@@ -37,6 +38,20 @@ import {
         onClearExplore()
       }
     }, [])
+    useEffect(() => {
+      document.addEventListener('scroll', scrollHandler)
+    }, [explorePosts.length])
+
+    // useEffect(() => {
+    //   if (explorePostsPromise?.status == "PENDING") {
+    //     console.log('explorePostsPromise?.status',explorePostsPromise?.status)
+    //     return () => (
+    //       <h1> ГРУЖУУУУУ </h1>
+    //     //  <img src={load} width="500" height="600"/>
+    //     )
+    //   }
+    
+    // }, [explorePostsPromise?.status])
   
     const scrollHandler = (e) => {
       if (
@@ -45,15 +60,12 @@ import {
         200
       ) {
         setScroll(true)
+        document.removeEventListener('scroll', scrollHandler)
       }
     }
-    // useEffect(() => {
-    //     onExlorePosts()
-  
-    //   }, [])
     return (
-      <>
-        <Row>
+      <> 
+        <Row>   
           <Col span={18} offset={4}>
             <div
               style={{
@@ -64,12 +76,19 @@ import {
                 marginTop: '50px',
               }}
             >
+ 
+
               {(explorePosts || [])?.map((item) => (
                 <Card post={item} onPost={onPost} />
               ))}
+                        
             </div>
           </Col>
         </Row>
+      {(explorePostsPromise?.status == "PENDING") &&  
+          <img style={{ display: 'block', margin: '0 auto', marginBottom:'200px', padding: '10px' }}
+            src={load} width="100" height="100" />
+        }
       </>
     )
   }
@@ -78,6 +97,8 @@ import {
       my_Id: state.auth?.payload?.sub?.id || '',
       countAllPostsUser: state.promise?.countAllPostsUser?.payload,
       explorePosts: state.explore?.explorePosts,
+      explorePostsPromise: state.promise?.explorePosts,
+
       explorePostsCount: state.explore?.explorePostsCount,
     }),
     {

src/pages/feedPosts/FeedPosts.js

@@ -31,12 +31,15 @@ import LinkToUser from '../../components/LinkToUser'
 import { AddComment, Comments } from '../../components/Comment'
 import { Like, Likes } from '../../components/Like'
 import { MyCarousel } from '../../components/Carousel'
+import load from '../../materials/load.gif'
+
 const MyPostFeed = ({
   profileData,
   postsFeed = [],
   onPostsFeed,
   addComment,
-  onClearFeed
+  onClearFeed,
+  postsFeedPromise
 }) => {
   const [checkScroll, setScroll] = useState(true)
   useEffect(() => {
@@ -111,9 +114,14 @@ const MyPostFeed = ({
                  
                 ),
               )}
+             
             </div>
           </Col>
-          </Row>
+        </Row>
+        {(postsFeedPromise?.status == "PENDING") &&
+                
+               <img style={{display:'block', margin: '0 auto', padding:'10px' }} src={load} width="100" height="100" />
+             }
       </div>
     </div>
   )
@@ -136,6 +144,7 @@ export const CPostForFeed = connect(
     profileData:  state?.profileData.aboutMe || '',
     postsFeed: state.feed?.postsFeed,
     addComment: state.promise?.addComment?.payload,
+    postsFeedPromise :state.promise?.postsFeed
   }),
   {
     onPostsFeed: actionFullAllGetPosts,

src/pages/profilePage/ProfilePageUser.js

@@ -8,7 +8,7 @@ import { Avatar, Button } from 'antd'
 import { actionFullProfilePageUser } from '../../redux/thunk'
 import { Row, Col } from 'antd'
 import { CSubscribe } from '../../components/Subscribe'
-import { CEditSetting } from '../setting/Setting'
+import { CEditSetting } from '../setting'
 
 export const PageAboutUser = ({
   match: {
@@ -19,7 +19,6 @@ export const PageAboutUser = ({
   allPosts,
   onPost,
   onAboutUser,
-  onPageData,
   countAllPostsUser,
 }) => {
   useEffect(() => {
@@ -78,14 +77,14 @@ export const PageAboutUser = ({
                   <ListOfUsers
                     listResult={followers}
                     listUsers={followers}
-                                      onPageData={onPageData}
+                                      onPageData={onAboutUser}
                                       text={'followers'}
                   />
 
                   <ListOfUsers
                    listResult={following}
                    listUsers={following}
-                                     onPageData={onPageData}
+                                     onPageData={onAboutUser}
                                      text={'following'}
                   />
                 </div>
@@ -132,6 +131,6 @@ export const CPageAboutUser = connect(
   {
     onAboutUser: actionFullProfilePageUser,
     onPost: actionOnePost,
-    onPageData: actionFullProfilePageUser,
+    // onPageData: actionFullProfilePageUser,
   },
 )(PageAboutUser)

src/pages/setting/Setting.js

@@ -1,104 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { CEditAvatar } from '../../components/EditAvatar'
-import { Input } from '../../components/Input'
-import { message, Image, Button } from 'antd'
-import { connect } from 'react-redux'
-import { actionUploadFile, actionSetAvatar, actionUserUpsert, actionUserUpdate } from '../../actions'
-import { Basic, ConstructorModal } from '../../helpers'
-export const EditAccount = ({showModalEdit }) => {
-    return (
-         <Button
-            type="primary" style={{
-              fontWeight: '600',
-              fontSize: '15px',
-              transition: ".3s",
-              boxShadow: "0 5px 15px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
-            }}
-    
-          onClick={showModalEdit}>Edit Setting</Button>
-    )
-  }
-const EditSetting = ({ info, myId, onSaveUserUpsert }) => {
-    const [state, setState] = useState(info)
-    const [isModalVisibleEdit, setIsModalVisibleEdit] = useState(false);
-    // actionChangePassword
-    console.log('all info ', info)
-    const showModalEdit = () => {
-      setIsModalVisibleEdit(true);
-    };
-    const handleCancelEdit = () => {
-      setIsModalVisibleEdit(false)
-    }
-    const onChangeLogin = (event) =>
-      setState({
-        ...state,
-        login: event.target.value,
-      })
-    const onChangeNick = (event) =>
-      setState({
-        ...state,
-        nick: event.target.value,
-      })
-  
-    const saveChange = () => {
-      onSaveUserUpsert(state, myId)
-      && message.success(`Save success changed!`)
-      && setIsModalVisibleEdit(false)
-    }
-
-    return (
-      <div>
-        <EditAccount showModalEdit={showModalEdit}/>
-  
-        <ConstructorModal title={'Edit setting'}
-          isModalVisible={isModalVisibleEdit}
-          setIsModalVisible={setIsModalVisibleEdit}
-          handleCancel={handleCancelEdit}
-        >
-  
-          <CEditAvatar setIsModalVisibleEdit={setIsModalVisibleEdit} />
-  
-          <h2> Edit login </h2>
-          <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
-            <Input
-              state={state?.login || ''}
-              className="Input"
-              onChangeText={onChangeLogin}
-            />
-            <Button size="large" style={{ margin: '10px' }}
-            onClick={saveChange}
-            disabled={state?.login ? false : true}
-  
-              type="primary"> Save login </Button>
-          </div>
-          <h2> Edit nick </h2>
-          <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
-            <Input
-              state={state?.nick || ''}
-              className="Input"
-              onChangeText={onChangeNick}
-            />
-            <Button style={{ margin: '10px' }}
-              disabled={state?.nick ? false : true}
-              onClick={saveChange}
-              size="large"
-              type="primary"
-            >
-              Save nick
-            </Button>
-          </div>
-        
-        </ConstructorModal>
-      </div>
-    )
-  }
-  export const CEditSetting = connect(
-    (state) => ({
-      myId: state?.auth.payload.sub?.id,
-      info: state?.profileData?.aboutMe,
-    }),
-    {
-      onSaveUserUpsert: actionUserUpdate,
-    },
-  )(EditSetting)
-  

src/pages/setting/index.js

@@ -0,0 +1,198 @@
+import React, { useState, useEffect } from 'react'
+import { CEditAvatar } from '../../components/EditAvatar'
+import { Input } from '../../components/Input'
+import { message, Image, Button } from 'antd'
+import { connect } from 'react-redux'
+import {
+  actionUploadFile, actionSetAvatar,
+  actionUserUpsert, actionUserUpdate,
+  actionChangePassword,actionClearPromise
+} from '../../actions'
+import { Basic, ConstructorModal } from '../../helpers'
+import { SpoilerButton } from '../../components/Comment'
+export const EditAccount = ({showModalEdit }) => {
+    return (
+         <Button
+            type="primary" style={{
+              fontWeight: '600',
+              fontSize: '15px',
+              transition: ".3s",
+              boxShadow: "0 5px 15px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
+            }}
+    
+          onClick={showModalEdit}>Edit Setting</Button>
+    )
+  }
+const EditSetting = ({ info, myId, onSaveUserUpsert,
+  onSaveNewPassword, changePassword, onClearPromise}) => {
+  const [state, setState] = useState(info)
+  const [changePass, setChangePass] = useState(changePassword)
+    const [isModalVisibleEdit, setIsModalVisibleEdit] = useState(false);
+    // actionChangePassword
+  console.log('all info ', info)
+  console.log('login ', info?.login)
+  
+    const showModalEdit = () => {
+      setIsModalVisibleEdit(true);
+    };
+    const handleCancelEdit = () => {
+      setIsModalVisibleEdit(false)
+    }
+    const onChangeLogin = (event) =>
+      setState({
+        ...state,
+        login: event.target.value,
+      })
+    const onChangeNick = (event) =>
+      setState({
+        ...state,
+        nick: event.target.value,
+      })
+      const onChangePassLogin = (event) =>
+      setChangePass({
+        ...changePass,
+        login: event.target.value,
+      })
+      const onChangePassPassword = (event) =>
+      setChangePass({
+        ...changePass,
+        password: event.target.value,
+      })
+      const onChangePassNew = (event) =>
+      setChangePass({
+        ...changePass,
+        newPassword: event.target.value,
+      })
+    const saveChange = () => {
+      onSaveUserUpsert(state, myId)
+      && message.success(`Successfully saved changed new login!`)
+        && setIsModalVisibleEdit(false)
+      &&onClearPromise('userUpsert')
+  }
+  // const saveChangeNick = () => {
+  //   onSaveUserUpsert(state?.nick, myId)
+  //   && message.success(`Successfully saved changed new nick!`)
+  //   && setIsModalVisibleEdit(false)
+  // }
+  const saveNewPassword = () => {
+      onSaveNewPassword(changePass.login, changePass.password, changePass.newPassword)
+      if (changePassword?.payload == null || changePass.login != info?.login) {
+        message.error(`You entered wrong login/password! Try again!`) &&
+          onClearPromise('newPassword')
+      }
+      else {
+        message.success(`Successfully saved changed new password!`)
+        && setIsModalVisibleEdit(false) && onClearPromise('newPassword')
+      }
+        }
+
+    return (
+      <div>
+        <EditAccount showModalEdit={showModalEdit}/>
+        <ConstructorModal title={'Edit setting'}
+          isModalVisible={isModalVisibleEdit}
+          setIsModalVisible={setIsModalVisibleEdit}
+          handleCancel={handleCancelEdit}
+        >
+      
+           <h2> Edit avatar </h2>
+          <SpoilerButton text={'Change avatar'} style={{width:'100%'}}>
+  
+          <CEditAvatar setIsModalVisibleEdit={setIsModalVisibleEdit} />
+          </SpoilerButton>
+          <h2> Edit login </h2>
+          <SpoilerButton text={'Change login'} style={{width:'100%'}}>
+  
+          <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
+            <Input
+              state={state?.login || ''}
+  
+              onChangeText={onChangeLogin}
+            />
+            <Button size="large" style={{ margin: '10px' }}
+            onClick={saveChange}
+            disabled={state?.login ? false : true}
+  
+              type="primary"> Save login </Button> 
+            </div>
+          </SpoilerButton>
+        
+          <h2> Edit nick </h2>
+          <SpoilerButton text={'Change nick'} style={{width:'100%'}}>
+      
+          <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
+            <Input
+              state={state?.nick || ''}
+              onChangeText={onChangeNick}
+            />
+            <Button style={{ margin: '10px' }}
+              disabled={state?.nick ? false : true}
+              onClick={saveChange}
+              size="large"
+              type="primary"
+            >
+              Save nick
+              </Button>
+             
+            </div>
+            </SpoilerButton>
+          <h2> Edit password </h2>
+          <SpoilerButton text={'Change password'} style={{width:'100%'}}>
+          
+            <h3> Login</h3>
+            <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
+              <Input
+              state={changePass?.login || ''}
+              onChangeText={onChangePassLogin}
+            />
+          </div>
+          <h3> Old password</h3>
+          <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
+            <Input
+              state={changePass?.password || ''}
+              onChangeText={onChangePassPassword}
+            />
+          </div>
+          
+          <h3> New password</h3>
+          <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
+          
+            <Input
+              state={changePass?.newPassword || ''}
+      
+              onChangeText={onChangePassNew}
+            />
+          </div>
+          <div   style={{
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'column',
+        }}>
+            <Button style={{ margin: '10px' }}
+              disabled={changePass?.login&&changePass?.password && changePass?.newPassword ? false : true}
+              onClick={saveNewPassword}
+              size="large"
+              type="primary"
+            >
+              Save new password
+            </Button>
+      
+            </div>
+            </SpoilerButton>
+        </ConstructorModal>
+      </div>
+    )
+  }
+  export const CEditSetting = connect(
+    (state) => ({
+      myId: state?.auth.payload.sub?.id,
+      info: state?.profileData?.aboutMe,
+      changePassword : state.promise?.newPassword
+    }),
+    {
+      onSaveUserUpsert: actionUserUpdate,
+      onSaveNewPassword: actionChangePassword,
+      onClearPromise:actionClearPromise
+    },
+  )(EditSetting)
+  

src/redux/reducers/feed/feedReducer.js

@@ -29,7 +29,7 @@ export const feedReducer = (
         }
       },
       'CLEAR-POSTS': () => ({
-        ...state,
+
         postsFeed: [],
         postsFeedCount: 0,
     }),

src/redux/reducers/profileData/profileReducer.js

@@ -9,7 +9,6 @@ export const profileReducer = (state = {}, { type, aboutMe, newResult }) => {
       },
       'REMOVE-DATA': () => {
         return {
-          ...(state = {}),
           aboutMe: {},
         }
       },
@@ -27,7 +26,7 @@ export const profileReducer = (state = {}, { type, aboutMe, newResult }) => {
     
 
   
-  export const actionRemoveDataUser = () => 
+  export const actionRemoveDataAboutMe = () => 
   ({ type: 'REMOVE-DATA' })
   
   

src/redux/reducers/profileUserPage/profileUserReducer.js

@@ -13,7 +13,6 @@ export const profileUserReducer = (
       },
       'CLEAR-DATA': () => {
         return {
-          ...(state = {}),
           aboutUser: {},
           allPosts: [],
         }

src/redux/reducers/promise/promiseReducer.js

@@ -11,7 +11,13 @@ export function promiseReducer(state = {}, { type, name, status, payload, error
         ...state,
         [name]: null,
       }
+  }
+  if (type === 'PROMISE_All_CLEAR') {
+    return {
+      state:null
+     
     }
+  }
     return state
   }
   

src/redux/thunk/index.js

@@ -11,16 +11,20 @@ import {
     actionDeleteLike,
     actionPostsCount,
     actionAuthLogout,
-    actionClearPromiseForName
+    actionAllClearPromise
   } from '../../actions'
 import { history } from '../../helpers'
   import{actionClearDataUserType} from '../reducers/profileUserPage/profileUserReducer'
 import { actionProfilePageDataType } from '../reducers/profileData/profileReducer'
 import { actionFullAllGetPosts } from '../../actions'
-import { actionAddLikePostInTape } from '../reducers/feed/feedReducer'
-import{actionDeleteLikePostInTape} from '../reducers/feed/feedReducer'
-import{actionAddCommentPostInTape} from '../reducers/feed/feedReducer'
+import {
+  actionAddLikePostInTape,
+  actionDeleteLikePostInTape,
+  actionAddCommentPostInTape,
+  actionClearFeedPosts
+} from '../reducers/feed/feedReducer'
 import { actionProfilePageDataTypeUser } from '../reducers/profileUserPage/profileUserReducer'
+import {actionRemoveDataAboutMe} from '../reducers/profileData/profileReducer'
 //profile page about me
 export const actionFullProfilePage = (_id) => async (dispatch) => {
     const aboutMe = await dispatch(actionAboutMe(_id))
@@ -82,18 +86,30 @@ export const actionClearUserData = () => async (dispatch) => {
     const logOut = await dispatch(actionAuthLogout())
     if (logOut) {
       history.push('/input')
-       await dispatch(actionClearDataUserType())
+      await dispatch(actionClearDataUserType())
+      await dispatch(actionClearFeedPosts())
+      await dispatch(actionRemoveDataAboutMe())
+      await dispatch(actionAllClearPromise())
+      
     }
   }
 
 
 //full profile user
-export const actionFullProfilePageUser = (_id) => async (dispatch) => {
+export const actionFullProfilePageUser = (_id) => async (dispatch, getState) => {
+  const {
+    profilePage
+  } = getState()
+  console.log('тут айдиии', _id)
+  if (_id != undefined) {
     const aboutUser = await dispatch(actionAboutUser(_id))
     const allPosts = await dispatch(actionAllPostsUser(_id))
     await dispatch(actionPostsCount(_id))
     if (aboutUser && allPosts) {
       await dispatch(actionProfilePageDataTypeUser(aboutUser, allPosts))
+    }
   }
+  _id = getState().profilePage.aboutUser?._id
+  console.log('тут айдиии после', _id)
 
   }