getting token / error

src/components/login/LoginForm/index.tsx

@@ -1,103 +0,0 @@
-import * as React from 'react';
-import { TextInput } from "~/components/input/TextInput";
-import { Button } from "~/components/input/Button";
-import { connect } from 'react-redux';
-import { bindActionCreators } from "redux";
-import { userSendLoginRequest, userSetLoginError } from "~/redux/user/actions";
-import { IUserFormStateLogin, IUserState } from "~/redux/user/reducer";
-import { Info } from "~/components/input/Info";
-
-import * as login from '~/containers/login/LoginLayout/styles.scss';
-import * as style from './style.scss';
-
-interface ILoginFormProps {
-  error: IUserFormStateLogin['error'],
-
-  userSendLoginRequest: typeof userSendLoginRequest,
-  userSetLoginError: typeof userSetLoginError,
-}
-
-interface ILoginFormState {
-  username: string,
-  password: string,
-}
-
-class Component extends React.PureComponent<ILoginFormProps, ILoginFormState> {
-  state = {
-    username: 'user',
-    password: 'password',
-  };
-
-  sendRequest = () => {
-    console.log('send?');
-    this.props.userSendLoginRequest(this.state);
-  };
-
-  changeField = <T extends keyof ILoginFormState>(field: T) => ({ target: { value }}: React.ChangeEvent<HTMLInputElement>) => {
-    if (this.props.error) this.props.userSetLoginError({ error: null });
-    this.setState({ [field]: value } as Pick<ILoginFormState, keyof ILoginFormState>);
-  };
-
-  render() {
-    const { error } = this.props;
-    const { username, password } = this.state;
-
-    return (
-      <div className={login.form}>
-        <div className={style.container}>
-          <div className={style.area_left}>
-
-          </div>
-          <div className={style.area_right}>
-            <div className={style.area_sign}>
-              РЕШИТЕЛЬНО<br />ВОЙТИ
-            </div>
-
-            <div className="spc double" />
-
-            <div className={style.inputs}>
-              <TextInput
-                label="Логин"
-                value={username}
-                onChange={this.changeField('username')}
-              />
-
-              <div className="gap" />
-
-              <TextInput
-                label="Пароль"
-                type="password"
-                value={password}
-                onChange={this.changeField('password')}
-              />
-
-              <div className="spc double" />
-
-              <Button onClick={this.sendRequest}>
-                Войти
-              </Button>
-
-              {
-                error &&
-                <React.Fragment>
-                  <div className="spc" />
-                  <Info>
-                    {error}
-                  </Info>
-                </React.Fragment>
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = ({ user: { form_state: { login }}}: { user: IUserState }) => ({ ...login });
-const mapDispatchToProps = dispatch => bindActionCreators({
-  userSendLoginRequest,
-  userSetLoginError,
-}, dispatch);
-
-export const LoginForm = connect(mapStateToProps, mapDispatchToProps)(Component);

src/components/login/LoginForm/style.scss

@@ -1,44 +0,0 @@
-.container {
-  display: grid;
-  flex: 1;
-
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: 1fr;
-  grid-row-gap: $grid_line;
-  grid-column-gap: $grid_line;
-}
-
-.area_left {
-  grid-column-end: span 3;
-  //background: $content_bg_color;
-  padding: $spc;
-  border-radius: $panel_radius 0 0 $panel_radius;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  //background: url('../../../sprites/splotchy.svg');
-  // background-size: cover;
-  //@include outer_shadow();
-}
-
-.area_right {
-  grid-column-end: span 1;
-  background: $content_bg_secondary;
-  padding: $spc;
-  border-radius: $panel_radius 0 0 $panel_radius;
-  user-select: none;
-
-  @include outer_shadow();
-}
-
-.area_sign {
-  font-size: $text_sign;
-  font-weight: 800;
-  line-height: 1.2em;
-}
-
-.inputs {
-  display: flex;
-  align-items: stretch;
-  flex-direction: column;
-}

src/components/main/Header/index.tsx

@@ -1,29 +1,23 @@
 import * as React from "react";
 import { Logo } from "~/components/main/Logo";
 import { connect } from "react-redux";
-import { IUserState } from "~/redux/user/reducer";
 import { push as historyPush } from "connected-react-router";
 
 import * as style from "./style.scss";
 import { Filler } from "~/components/containers/Filler";
 import { Link } from "react-router-dom";
+import {selectUser} from "~/redux/auth/selectors";
+import {Group} from "~/components/containers/Group";
 
-const mapStateToProps = ({
-  user: {
-    profile: { username, is_user }
-  }
-}: {
-  user: IUserState;
-}) => ({ username, is_user });
+const mapStateToProps = selectUser;
 
 const mapDispatchToProps = {
   push: historyPush
 };
 
-type IHeaderProps = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps & {};
+type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-export const Component: React.FunctionComponent<IHeaderProps> = ({
+const HeaderUnconnected: React.FunctionComponent<IProps> = ({
   username,
   is_user
 }) => {
@@ -43,16 +37,18 @@ export const Component: React.FunctionComponent<IHeaderProps> = ({
 
         <Filler />
 
-        {/* <Group horizontal className={style.user_button}>
+        <Group horizontal className={style.user_button}>
           <div>username</div>
           <div className={style.user_avatar}/>
-        </Group> */}
+        </Group>
       </div>
     </div>
   );
 };
 
-export const Header = connect(
+const Header = connect(
   mapStateToProps,
   mapDispatchToProps
-)(Component);
+)(HeaderUnconnected);
+
+export { Header };