Add Form Login and Register

src/App.js

@@ -24,37 +24,83 @@ import {CExplorePosts} from './components/Expore'
 // import { Carousel } from 'react-responsive-carousel';
 import { CPostForFeed, Feed } from './components/PostFeed'
 import {CPostEditor } from './components/NewPost'
-
+import { CLoginForm,CRegisterForm,InputForm } from './components/LoginRegisterLogout'
 import { Header } from './components/Header'
-
+import {actionRemoveDataUser,actionClearDataUserType,actionClearUserData}  from './reducers'
 console.log(store.getState())
 store.subscribe(() => console.log(store.getState()))
 console.log('ABOUT ME', store.getState().auth?.payload?.sub?.id)
-
+const OldMain = () =>
+
+  <Switch>
+  <Header />
+<Route path="/" exact component={PageMain}  />
+<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}   />
+<CProtectedRoute
+     roles={['user']}
+     fallback="/feed"
+     path="/*"
+     component={CPostForFeed}
+   />
+
+</Switch>
+  
 const PageMain = () => <div className="PageMain">ГЛАВНАЯ</div>
-const CUserEdit = connect((state) => ({}), {})(PageAboutUser)
-const Main = () => (
-  <main>
-    <Switch>
-      <Route path="/" exact component={PageMain} />
-      <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="/editProfile" component={CUserEdit} />
-    </Switch>
-  </main>
-)
-
+const Main = ({ _id }) => {
+  console.log('_id token in app: ', _id)
+  
+  // console.log('TOKEN ', _id)
+  console.log('localStorage.getItem: ', localStorage.getItem("authToken"))
+  return (
+    (!localStorage.getItem("authToken")&&!_id)
+      ?  
+      // {
+      //   actionClearDataUserType() 
+   <Switch>
+      <Route path='/login'
+            component={CLoginForm} exact  />
+          {/* <Route path='/input'
+            component={InputForm} /> */}
+            <Route path='/register'
+            component={CRegisterForm}   />
+            <CProtectedRoute
+            roles={['anon']}
+            fallback="/input"
+            path="/*"
+            component={InputForm}
+          />
+          {/* <Redirect from='/*' to='/input' /> */}
+       </Switch >  
+          // }  
+      :
+      <Switch>
+         <Header />
+    <Route path="/" exact component={PageMain}  />
+    <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}   />
+    <CProtectedRoute
+            roles={['user']}
+            fallback="/feed"
+            path="/*"
+            component={CPostForFeed}
+          />
 
+</Switch>
+    )
+}
 
-const CBasic = connect(null, { onLoad: actionSetAvatar })(Basic)
 
 
+const CMain =  connect((state) => ({
+  _id: state.auth?.payload?.sub?.id
+}))(Main)
 
 const ProtectedRoute = ({
   roles = [],
@@ -79,7 +125,7 @@ const PageRegister = () => {
   return <div>REGISTER</div>
 }
 const CProtectedRoute = connect((state) => ({
-  auth: state.auth?.payload?.sub.acl,
+  auth: state.auth?.payload?.sub?.acl,
 }))(ProtectedRoute)
 
 export const history = createHistory()
@@ -87,35 +133,41 @@ export const history = createHistory()
 function App() {
 
   if (store.getState().auth?.token) {
+    history.push('/feed')
     console.log('токен', store.getState().auth?.payload?.sub?.id)
     store.dispatch(actionFullProfilePage(store.getState().auth?.payload?.sub?.id))
+    store.dispatch(actionFullProfilePageUser(store.getState().auth?.payload?.sub?.id))
+    localStorage.authToken = store.getState().auth?.token;
+  }else {
+    history.push('/input')
+    store.dispatch(actionRemoveDataUser())
+    store.dispatch(actionClearUserData())
+    store.dispatch(actionClearDataUserType())
   }
-  else {
-    console.log('ошибочка')
-  }
-  if (document.body.offsetHeight > document.documentElement.clientHeight) 
-    console.log("Скролл есть");
-else {
-    console.log("Скролла нет");
-}
-
 
+  store.getState().auth.payload?.sub?.id ? <Redirect to="/"/> : <Redirect to="/input"/>
   return (
     <Router history={history}>
       <Provider store={store}>
         <div className="App">
-          <Header />
           <Divider />
-          <Main />
+          <OldMain />
+{/*          
           <CProtectedRoute
             roles={['anon']}
-            fallback="/dashboard"
-            path="/register"
-            component={PageRegister}
+            fallback="/input"
+            path="/*"
+            component={InputForm}
           />
+          <CProtectedRoute
+            roles={['user']}
+            fallback="/feed"
+            path="/*"
+            component={CPostForFeed}
+          /> */}
         </div>
       </Provider>
     </Router>
   )
 }
-export default App
+export default App

src/actions/index.js

@@ -87,10 +87,13 @@ export const actionFullLogin = (login, password) => async (dispatch) => {
       ),
     ),
   )
+  console.log('localStorage.getItem: ', localStorage.getItem("authToken"))
+  console.log('AUTH TOKEN IN ACTION ', token)
   if (token) {
-    dispatch(actionAuthLogin(token))
+    await dispatch(actionAuthLogin(token))
   }
 }
+
 export const actionRegister = (login, password) =>
   actionPromise(
     'register',
@@ -105,9 +108,9 @@ export const actionRegister = (login, password) =>
   )
 export const actionFullRegister = (login, password) => async (dispatch) => {
   let tokenCheck = await dispatch(actionRegister(login, password))
-
+  console.log('TOKEN CHECK', tokenCheck)
   if (tokenCheck?.login === login) {
-    dispatch(actionFullLogin(login, password))
+   await dispatch(actionFullLogin(login, password))
   }
 }
 export const uploadFile = (file) => {

src/components/EditAvatar.js

@@ -36,7 +36,6 @@ const EditInfo = ({ info, onSave, onFileDrop, fileStatus, myId }) => {
   console.log('state my ', state)
   useEffect(() => {
     fileStatus?.status == 'FULFILLED' &&
-      message.success(`File success uploaded!`) &&
       setState({
         ...state,
         ...state?.avatar,

src/components/Header.js

@@ -48,7 +48,7 @@ const User = ({ my_Id, aboutMe: { _id, login, avatar } = {}, onMyPage }) => {
 
 const CUser = connect(
   (state) => ({
-    my_Id: state.auth.payload?.sub?.id || '',
+    my_Id: state.auth?.payload?.sub?.id,
     aboutMe: state.profileData.aboutMe,
   }),
   { onMyPage: actionFullProfilePageUser },

src/components/LoginRegisterLogout.js

@@ -10,15 +10,14 @@ import {
     EyeOutlined,EyeInvisibleOutlined
 } from '@ant-design/icons';
 import { Link } from 'react-router-dom'
-  
-
-
-
+import {actionClearUserData} from '../reducers'
 const LoginForm = ({ onLogin, children }) => {
   const [login, setLogin] = useState('')
   const [password, setPassword] = useState('')
-const [checked, setChecked] = useState(false)
-  console.log('checked ', checked)
+  const [checked, setChecked] = useState(false)
+  console.log('LOGIN ', login)
+  console.log('PASSWORD ', password)
+  
     return (
       <>
         <Form size="large"
@@ -31,9 +30,11 @@ const [checked, setChecked] = useState(false)
               <h1 style={{marginLeft:'400px'}}> {children} </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)} />
+            name="login" size="large"
+           
+            rules={[{ required: true, message: 'Please input login!' }]}>
+            
+          <Input value={login} size="large" onChange={(e) => setLogin(e.target.value)} />
                   
       </Form.Item>
 
@@ -119,33 +120,21 @@ export const CRegisterForm = connect(
 export const CLogout = connect(
   (state) => ({
     children: `Logout (${state.auth.payload?.sub?.login || 'Anon'})`,
+    // _id: state.auth.payload.sub.id
   }),
-  { onClick: actionAuthLogout },
+  { onClick: actionClearUserData },
 )('a')
 
-// export const InputForm = ({}) =>
-
-//         <div>
-//             если есть акк выберите сигн ин, если нету регистр
-//         {console.log('шото есть сук')}
-//             <Button> Sign In </Button>
-//             <Button> Register </Button>
-
-//         </div>
- 
-// // CForm
+export const InputForm = ({ }) => {
 
-export const InputForm = ({ onLogin, children }) => {
-    const [login, setLogin] = useState('')
-    const [password, setPassword] = useState('')
-  const [checked, setChecked] = useState(false)
-    console.log('checked ', checked)
       return (
           <>
               {/* display:'flex', flexDirection:'row', */}
-           <div style={{ background:'cyan', top:'0',position:'fixed'}}>
-          <h1>  если есть акк выберите сигн ин, если нету регистр</h1>
-         {console.log('шото есть сук')}
+           <div style={{ background:'cyan', display:'flex',alignItems: 'center'}}>
+            <h1>  If you have account, click on SignIn</h1>
+          <h1>  If no, click on Register</h1>
+            
+       
                       <Link className='Link' to={`/login`}> Sign In </Link>  
             
                       <Link className='Link' to={`/register`}> Register </Link> 

src/components/Search_Users.js

@@ -17,7 +17,7 @@ export const ResultUserFind = ({ my_Id, userFind = [], onPageData, size,handleCa
        userFind?.map(({ _id, login, avatar }) => (
         <Link to={`/profile/${_id}`} onClick={handleCancel} key={_id}>
        
-              <Row>
+            <Row>
              <Col offset={1}>
             {avatar?.url ?  <Avatar
               style={{
@@ -82,7 +82,7 @@ export const ResultUserFind = ({ my_Id, userFind = [], onPageData, size,handleCa
    (state) => ({
     aboutUser: state.profilePage?.aboutUser,
     searchUser: state.promise?.searchUser?.payload,
-    my_Id: state.auth.payload.sub.id || '',
+    my_Id: state.auth?.payload?.sub?.id || '',
    }),
 
    {

src/components/User.js

@@ -80,30 +80,6 @@ export const PageAboutUser = ({
   aboutMeFollowing,
   countAllPostsUser,
 }) => {
-  const [checkScroll, setCheckScroll] = useState(true);
-
-  useEffect(() => {
-    if (checkScroll) {
-      actionFullProfilePageUser(_id);
-      setCheckScroll(false);
-    }
-  }, [checkScroll]);
-
-  useEffect(() => {
-    document.addEventListener('scroll', scrollHandler);
-    return () => {
-      document.removeEventListener('scroll', scrollHandler);
-      // clearDataProfile()
-    }
-  }, [allPosts]);
-
-  const scrollHandler = (e) => {
-    if(e.target.documentElement.scrollHeight - e.target.documentElement.scrollTop - e.target.documentElement.clientHeight <20)
-    // if (e.target.documentElement.scrollHeight -
-    //   (e.target.documentElement.scrollTop + window.innerHeight) < 20)
-    { setCheckScroll(true) }
-  };
-
 
   useEffect(() => {
     onAboutUser(_id)
@@ -246,18 +222,18 @@ const Subscribe = ({
         {checkFollowId ? (
           <Button
             size="large"
-            primary
+             danger
             onClick={() => deleteSubscribe(my_Id, followId)}
           >
-            unsubscribe
+            Unsubscribe
           </Button>
         ) : (
           <Button
             size="large"
-            danger
+           primary
             onClick={() => addSubscribe(my_Id, followId)}
           >
-            subscribe
+            Subscribe
           </Button>
         )}
       </div>

src/reducers/index.js

@@ -3,7 +3,7 @@ import {
   actionAuthLogin, gql, actionPromise,
   actionAllPosts, actionAboutMe, actionAllPostsUser, actionAboutUser,
   actionPostsFeed, actionPostsFeedCount, actionOnePost, actionAddComment,
-  actionAddLike,actionDeleteLike,actionPostsCount
+  actionAddLike,actionDeleteLike,actionPostsCount,actionAuthLogout
 } from '../actions'
 import { createStore, combineReducers, applyMiddleware } from 'redux';
 
@@ -47,22 +47,34 @@ export const actionProfilePageData = (id) => ({ type: 'DATA_PROFILE', id })
       await dispatch(actionProfilePageDataTypeUser(aboutUser, allPosts))
     }
   }
+  export const actionClearDataUserType= () =>
+  ({ type: 'CLEAR-DATA' })
 
+  export const actionClearUserData = () =>
+  async dispatch => {
+    const logOut = await dispatch(actionAuthLogout())
+    console.log('logOut ', logOut)
+  
+   
+    if (logOut) {
+      const clearData = await dispatch(actionClearDataUserType())
+       console.log('clearData ', clearData )
+      // await dispatch(actionClearDataUserType())
+    }
+  }
 
   export const actionFullProfilePage = (_id) =>
   async dispatch => {
     const aboutMe = await dispatch(actionAboutMe(_id))
-    console.log('actionFullProfilePage ', actionFullProfilePage)
+    console.log('aboutMe ', aboutMe)
     // const allPostsMe = await dispatch(actionAllPosts(_id))
     if (aboutMe) {
       await dispatch(actionProfilePageDataType(aboutMe))
     }
-
-
   }
+
   export const actionRemoveDataUser= () =>
   ({ type: 'REMOVE-DATA' })
-
 export const profileUserReducer = (state = {}, { type, aboutUser, allPosts,newPosts }) => {
   const types = {
     'PROFILE-PAGE-USER': () => {
@@ -70,7 +82,7 @@ export const profileUserReducer = (state = {}, { type, aboutUser, allPosts,newPo
         ...state, aboutUser, allPosts
       }
     },
-    'REMOVE-DATA': () => {
+    'CLEAR-DATA': () => {
       return {
         ...state = {},
         aboutUser: {},
@@ -84,8 +96,6 @@ export const profileUserReducer = (state = {}, { type, aboutUser, allPosts,newPo
     }
   
     ,
-
-
   }
 
     if (type in types) {
@@ -266,7 +276,13 @@ export const profileReducer = (state = {}, { type, aboutMe, newResult }) => {
           return {
               ...state, aboutMe
           }
+    },
+    'REMOVE-DATA': () => {
+      return {
+        ...state = {},
+        aboutMe: {}
       }
+    }
 
   }
   if (type in types) {