Fix correct routing for anon and user

src/App.js

@@ -8,31 +8,47 @@ import { CPageAboutUser } from './components/User'
 import { CPost } from './components/Post'
 import 'antd/dist/antd.css'
 import { actionFullProfilePage } from './redux/thunk'
-import{actionFullAllGetPosts} from './actions'
+import { actionFullAllGetPosts } from './actions'
 import { CExplorePosts } from './components/Explore'
 import { CPostForFeed, Feed } from './components/PostFeed'
 import { CPostEditor } from './components/NewPost'
 import { Header } from './components/Header'
-import {InputForm, CRegisterForm,CLoginForm} from './components/LoginRegisterLogout'
+import { InputForm, CRegisterForm, CLoginForm } from './components/LoginRegisterLogout'
 
 console.log(store.getState())
 store.subscribe(() => console.log(store.getState()))
 console.log('ABOUT ME', store.getState().auth?.payload?.sub?.id)
-const Main = () => (
-  <main>
-    <Switch>
-      <Route path="/profile/:_id" component={CPageAboutUser} />
-      <Route path="/explore" component={CExplorePosts} />
-      <Route path="/edit/post/:_id" component={CPostEditor} />
-      <Route path="/post/:_id" component={CPost} />
-      <Route path="/feed" component={CPostForFeed} />
-      <Route path="/login" exact component={CLoginForm} />
-      <Route path="/register" component={CRegisterForm} />
-      <Route path="/input" component={InputForm} />
-      <Redirect from="/*" to="/feed" />
-    </Switch>
-  </main>
-)
+const Routing = ({ token }) => {
+
+  return <>
+    {token ?
+      <Switch>
+        <Route path="/profile/:_id" component={CPageAboutUser} />
+        <Route path="/explore" component={CExplorePosts} />
+        <Route path="/edit/post/:_id" component={CPostEditor} />
+        <Route path="/post/:_id" component={CPost} />
+        <Route path="/feed" component={CPostForFeed} />
+        <Redirect from="/*" to="/feed" />
+      </Switch>
+      :
+      <Switch>
+        <Route path="/login" exact component={CLoginForm} />
+        <Route path="/register" component={CRegisterForm} />
+        <Route path="/input" component={InputForm} />
+        <Redirect from="/*" to="/input" />
+        <CProtectedRoute
+          roles={['anon']}
+          fallback="/*"
+          path="/input"
+          component={InputForm}
+        />
+      </Switch>
+    }
+  </>
+}
+const CRouting = connect((state) => ({
+  token: state.auth?.token,
+}))(Routing)
 
 const ProtectedRoute = ({
   roles = [],
@@ -67,24 +83,14 @@ function App() {
     console.log('токен', store.getState().auth?.payload?.sub?.id)
     store.dispatch(
       actionFullProfilePage(store.getState().auth?.payload?.sub?.id)
-   
     )
-  } else {
-    history.push('/input')
-  }
-
+    }
   return (
     <Router history={history}>
       <Provider store={store}>
         <div className="App">
+          <CRouting />
           <CShowHeader />
-          <Main />
-          <CProtectedRoute
-            roles={['anon']}
-            fallback="/*"
-            path="/input"
-            component={InputForm}
-          />
         </div>
       </Provider>
     </Router>

src/App.scss

@@ -2,6 +2,7 @@
   @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
   'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
   'Noto Color Emoji';
+  // margin-top: 50px;
 }
 body {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
@@ -11,11 +12,12 @@ body {
 @import '~antd/dist/antd.css';
 
 .Dropzone {
-  flex: 1;
+  // flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px;
+  padding: 10px;
+  // width: 100%;
   border-width: 2px;
   border-radius: 2px;
   background-color: #74d2e7;
@@ -33,7 +35,7 @@ body {
   position: fixed;
   align-items: center;
   justify-content: center;
-  padding-top: 10px;
+  // padding-top: 10px;
   z-index: 4;
   width: 100%;
   background: #74d2e7;
@@ -57,9 +59,15 @@ body {
   align-items: 'center';
   justify-content: 'center';
 }
+.EditSetting{
+  display: 'flex';
+  align-items: 'center';
+  justify-content: 'center';
+  margin: 0 auto;
 
+}
 .Post {
-  max-width: 600px;
+  max-width: 450px;
   margin: 0 auto;
   background-color: white;
   border: 6px solid #dbebfa;
@@ -68,6 +76,7 @@ body {
   display: 'flex';
   align-items: 'center';
   justify-content: 'center';
+  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);
@@ -87,23 +96,24 @@ main {
 }
 .Title {
   text-align: left;
-  margin: 20px;
+  margin: 10px;
 }
 .Input {
   display: flex;
   width: 90%;
   padding: 5px;
-  margin: 20px;
+  margin: 10px;
   border-radius: 10px;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: 20px;
 }
 .container {
-  padding: 20px;
-  margin: 20px;
+  padding: 10px;
+  margin-top: 20px;
+  // margin: 20px;
 }
 .AboutMe {
-  margin-top: 20px;
+  margin-top: 100px;
   display: flex;
   justify-content: center;
 }
@@ -145,9 +155,10 @@ main {
 
   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);
-  padding: 20px;
+  // padding: 20px;
 }
 .InputForm {
   position: fixed;

src/actions/index.js

@@ -109,6 +109,19 @@ export const actionRegister = (login, password) =>
       { login: login, password: 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) {
+                  _id login
+                }
+              }`,
+      { login, password , newPassword},
+    ),
+  )
 export const actionFullRegister = (login, password) => async (dispatch) => {
   let tokenCheck = await dispatch(actionRegister(login, password))
   if (tokenCheck?.login === login) {

src/components/DropZone.js

@@ -34,10 +34,13 @@ export const SortableItem = sortableElement(({ url }) => {
   return (
     <Image
       style={{
-        margin: '10px',
-        maxWidth: '200px',
+        // margin: '20px',
+        maxWidth: '300px',
+        minWidth: '100px',
+
         boxShadow: '0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
-        maxHeight: '200px',
+        maxHeight: '300px',
+        minHeight:'100px'
       }}
       src={'/' + url}
     />
@@ -46,7 +49,7 @@ export const SortableItem = sortableElement(({ url }) => {
 export const SortableContainer = sortableContainer(({ children }) => {
   return (
     <>
-      <ul>{children}</ul>
+      <ul style={{display:'flex', flexDirection:'row', margin:'5px'}}>{children}</ul>
     </>
   )
 })

src/components/EditAvatar.js

@@ -1,6 +1,6 @@
 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'
 const Input = ({ state, onChangeText }) => (
@@ -12,9 +12,9 @@ const Input = ({ state, onChangeText }) => (
   />
 )
 
-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)
   useEffect(() => {
     fileStatus?.status == 'FULFILLED' &&
@@ -28,46 +28,48 @@ const EditAvatar =({ info, onSaveAvatar, setIsModalVisibleEdit, onFileDrop, file
   const saveAvatar = () => {
     if (fileStatus)
       onSaveAvatar(state?._id, myId)
-      && message.success(`Avatar success changed!`)
-      && setIsModalVisibleEdit(false)
+        && message.success(`Avatar success changed!`)
+        && setIsModalVisibleEdit(false)
   }
-//  =>onSaveUserUpsert(state,myId)
-  
+  //  =>onSaveUserUpsert(state,myId)
+
 
   return (
-    <>
-        <h2> Edit avatar </h2>
+    <div>
+      <h2> Edit avatar </h2>
+      <div style={{
+        display: 'flex', alignItems: 'center', flexDirection: 'column'
+      }}>
         <Basic onLoad={onFileDrop} />
-        <center>
-          {fileStatus?.payload?.url && (
-       
-     
-        <Image
-              style={{
-                marginBottom: '30px', width: '200px',
-                objectFit: 'cover',
-                height: '150px'
-              }}
-
-        
-          src={'/' + fileStatus?.payload?.url}
-        />
-          )}<br />
-           <Button style={{width:"200px"}}
-         disabled={fileStatus ? false : true}
+
+        {fileStatus?.payload?.url && (
+
+          <Image
+            style={{
+              marginBottom: '30px', width: '200px',
+              objectFit: 'cover',
+              height: '150px'
+            }}
+
+
+            src={'/' + fileStatus?.payload?.url}
+          />
+        )}<br />
+        <Button style={{ width: "200px" }}
+          disabled={fileStatus ? false : true}
           onClick={saveAvatar}
           size="large"
           type="primary"
         >
-        Save avatar
+          Save avatar
         </Button>
-          </center>   
-    </>
+      </div>
+    </div>
   )
 }
 export const CEditAvatar = connect(
-    (state) => ({
-      myId:state?.auth.payload.sub?.id,
+  (state) => ({
+    myId: state?.auth.payload.sub?.id,
     fileStatus: state.promise?.uploadFile,
     info: state?.profileData?.aboutMe?.avatar,
   }),
@@ -80,8 +82,10 @@ export const CEditAvatar = connect(
 
 const EditInfo = ({ info, myId, onSaveUserUpsert }) => {
   const [state, setState] = useState(info)
+
   const [isModalVisibleEdit, setIsModalVisibleEdit] = useState(false);
   // const [state, setState] = useState(post)
+  // actionChangePassword
   console.log('all info ', info)
   const showModalEdit = () => {
     setIsModalVisibleEdit(true);
@@ -94,73 +98,84 @@ const EditInfo = ({ info, myId, onSaveUserUpsert }) => {
       ...state,
       login: event.target.value,
     })
-    const onChangeNick = (event) =>
+  const onChangeNick = (event) =>
     setState({
       ...state,
       nick: event.target.value,
     })
-  
-
-  const saveUserUpsert = () => {
 
-      onSaveUserUpsert(state, myId) 
-      && message.success(`Save success changed!`)
+  const saveLogin = () => {
+    onSaveUserUpsert(state?.login, myId)
+    && message.success(`Save success changed!`)
+    && setIsModalVisibleEdit(false)
+      // && message.success(`Save success changed!`)
+      // && setIsModalVisibleEdit(false)
+  }
+  const saveNick = () => {
+    onSaveUserUpsert(state?.nick, myId)
+    && message.success(`Save success changed!`)
     && setIsModalVisibleEdit(false)
- }
-//  =>onSaveUserUpsert(state,myId)
-  
+      // && message.success(`Save success changed!`)
+      // && setIsModalVisibleEdit(false)
+  }
 
   return (
-    <>
+    <div>
       <Button
         type="primary" style={{
           fontWeight: '600',
-          fontSize:'15px',
+          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>
-      
-        <ConstructorModal title={'Edit setting'}
-                isModalVisible={isModalVisibleEdit}
+
+      <ConstructorModal title={'Edit setting'}
+        isModalVisible={isModalVisibleEdit}
         setIsModalVisible={setIsModalVisibleEdit}
         handleCancel={handleCancelEdit}
-      >  
+      >
+
+        <CEditAvatar setIsModalVisibleEdit={setIsModalVisibleEdit} />
 
-        <CEditAvatar setIsModalVisibleEdit={setIsModalVisibleEdit } />
-        <center>
         <h2> Edit login </h2>
-       
-        <Input
-        state={state?.login || ''}
-        className="Input"
-        onChangeText={onChangeLogin}
+        <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
+          <Input
+            state={state?.login || ''}
+            className="Input"
+            onChangeText={onChangeLogin}
           />
+          <Button size="large" style={{ margin: '10px' }}
+          onClick={saveLogin}
+          disabled={state?.login ? false : true}
 
-            <h2> Edit nick </h2>
-       
-        <Input
-        state={state?.nick || ''}
-        className="Input"
-        onChangeText={onChangeNick}
+            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={{width:"200px"}}
-         disabled={state ? false : true}
-          onClick={saveUserUpsert}
-          size="large"
-          type="primary"
-        >
-        Save
-        </Button>
-       </center>
+          <Button style={{ margin: '10px' }}
+            disabled={state?.nick ? false : true}
+            onClick={saveNick}
+            size="large"
+            type="primary"
+          >
+            Save nick
+          </Button>
+        </div>
+      
       </ConstructorModal>
-    </>
+    </div>
   )
 }
 export const CEditInfo = connect(
-    (state) => ({
-      myId:state?.auth.payload.sub?.id,
+  (state) => ({
+    myId: state?.auth.payload.sub?.id,
     info: state?.profileData?.aboutMe,
   }),
   {

src/components/NewPost.js

@@ -116,22 +116,25 @@ const PostEditor = ({
     history.push(`/profile/${myID}`)
   return (
     <section className="Post">
-      <Basic onLoad={onFileDrop} />
-      <Row>
+    
+      <Row> 
         <Col span={12} offset={6}>
+           <Basic onLoad={onFileDrop} />
           <SortableContainer onSortEnd={onSortEnd}>
             {(state?.images || []).map(({ _id, url }, index) => (
-              <div>
-                <SortableItem key={`item-${_id}`} index={index} url={url} />
+              <div>  
                 <Button
                   type="primary"
                   danger
-                  size="large"
+                  size="small"
+                  style={{float:'right'}}
                   onClick={() => onRemoveImage(_id)}
                 >
                   {' '}
                   x{' '}
                 </Button>
+                <SortableItem key={`item-${_id}`} index={index} url={url} />
+              
               </div>
             ))}
           </SortableContainer>

src/components/PostFeed.js

@@ -65,7 +65,7 @@ const MyPostFeed = ({
   }
 
   return (
-    <>
+    <div style={{  marginTop: '50px'}}>
       <div className="PostsFeed" >
         
         <Row>
@@ -111,7 +111,7 @@ const MyPostFeed = ({
           </Col>
           </Row>
       </div>
-    </>
+    </div>
   )
 }
 

src/redux/thunk/index.js

@@ -14,7 +14,7 @@ import {
     actionClearPromiseForName
   } from '../../actions'
 import { history } from '../../App'
-  
+  import{actionClearDataUserType} from '../reducers/profileUserPage/profileUserReducer'
 import { actionProfilePageDataType } from '../reducers/profileData/profileReducer'
 import { actionFullAllGetPosts } from '../../actions'
 import { actionAddLikePostInTape } from '../reducers/feed/feedReducer'