Untitled

import { IContextCore, withContextCore } from "comtouch-context";
import { i18n } from "comtouch-i18n";
import {
  dataValidateAscii,
  dataValidateEmail,
  dataValidateLength,
} from "comtouch-utils";
import {
  Body,
  CheckBox,
  Container,
  Content,
  Form as NbForm,
  ListItem,
  Text,
} from "native-base";
import React, { Component } from "react";
import { Field, Form } from "react-final-form";
import {
  INavRoutes,
  IUiImportance,
  navService,
  themeBrandbook,
  themeForm,
  uiToast,
} from "src/utils";
import { InputButton, InputText } from "../shared";
import { UiSeparator } from "../ui";

//
// types
//

interface IFormData {
  userEmail: string;
  userPassword: string;
  userName?: string;
  userSurname?: string;
}

type IProps = IPropsContext & IPropsOwn;

type IPropsContext = Pick<IContextCore, "usersPost">;

interface IPropsOwn {}

interface IState {
  isAgreementAccepted: boolean;
}

//
// view
//

class View extends Component<IProps, IState> {
  private static validateStringLength = dataValidateLength(2, 20);

  public ["constructor"]: typeof View;

  public state: IState = {
    isAgreementAccepted: true,
  };

  public render() {
    const {
      constructor: { validateStringLength },
      handleSubmit,
      handleToggleAgreement,
      state: { isAgreementAccepted },
    } = this;
    const {
      checkBox: checkBoxStyle,
      form: formStyle,
      personalDataText: personalDataTextStyle,
    } = style;

    return (
      <Container>
        <Content>
          <Form onSubmit={handleSubmit as (values: object) => void}>
            {({ handleSubmit, submitting, valid }) => (
              <NbForm style={formStyle}>
                <UiSeparator transparent />
                <Field
                  component={InputText}
                  label={`${i18n._("Email")} *`}
                  name="userEmail"
                  validate={dataValidateEmail}
                />
                <Field
                  component={InputText}
                  label={`${i18n._("Password")} *`}
                  name="userPassword"
                  secure
                  validate={dataValidateAscii}
                />
                <Field
                  component={InputText}
                  label={i18n._("Name")}
                  name="userName"
                  validate={validateStringLength}
                />
                <Field
                  component={InputText}
                  label={i18n._("Surname")}
                  name="userSurname"
                  validate={validateStringLength}
                />
                <ListItem style={checkBoxStyle}>
                  <CheckBox
                    checked={isAgreementAccepted}
                    onPress={handleToggleAgreement}
                  />
                  <Body>
                    <Text style={personalDataTextStyle}>
                      {i18n._("Allow to process provided personal data")}
                    </Text>
                  </Body>
                </ListItem>
                <InputButton
                  block
                  disabled={!valid || !isAgreementAccepted}
                  loading={submitting}
                  onPress={handleSubmit}
                  text={i18n._("Registration")}
                />
              </NbForm>
            )}
          </Form>
        </Content>
      </Container>
    );
  }

  private handleToggleAgreement = () => {
    this.setState(({ isAgreementAccepted }) => ({
      isAgreementAccepted: !isAgreementAccepted,
    }));
  };

  private handleSubmit = async (formData: IFormData) => {
    const {
      props: { usersPost },
    } = this;
    try {
      const user = await usersPost({
        email: formData.userEmail,
        name: formData.userName,
        password: formData.userPassword,
        surname: formData.userSurname,
      });
      uiToast(
        IUiImportance.SUCCESS,
        i18n._("Welcome, {username}!", { username: user.name }),
      );
      navService.navigate({ route: INavRoutes.Main });
    } catch (error) {
      uiToast(IUiImportance.ERROR, error.message);
    }
  };
}

//
// style
//

const style = {
  checkBox: {
    borderBottomColor: "transparent",
    marginLeft: 0,
  },
  form: {
    marginLeft: themeForm["NativeBase.Item"].marginLeft,
    marginRight: themeForm["NativeBase.Item"].marginLeft,
    paddingBottom: themeBrandbook.Space.Vertical.XXL,
  },
  personalDataText: {
    fontSize: themeBrandbook.Font.Size.S,
  },
};

//
// export
//

export const Registration = withContextCore<IPropsContext, IPropsOwn>(
  View,
  ({ usersPost }) => ({ usersPost }),
);