Homework 3

src/components/App/App.js

@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import './App.css';
+import Step from '../Step';
+import PersonalForm from '../PersonalForm';
+import CardForm from '../CardForm';
+
+class App extends Component {
+  state = {
+    step: 1,
+    firstName: '',
+    lastName: '',
+    email: '',
+    cardNumber: '',
+    steps: ['Personal information', 'Card information', 'Finish']
+  };
+
+  handleTabClick = step => {
+    this.setState({ step: step });
+  };
+
+  handleChangeForm = (name, value) => {
+    this.setState({ [name]: value });
+  };
+
+  handleClickNextForm = () => {
+    const { step } = this.state;
+    this.setState({ step: step + 1 });
+  };
+
+  renderForm = () => {
+    const { step, firstName, lastName, email, cardNumber } = this.state;
+    if (step === 1) {
+      return (
+        <PersonalForm
+          firstName={firstName}
+          lastName={lastName}
+          email={email}
+          onChangeForm={this.handleChangeForm}
+        />
+      );
+    } else if (step === 2) {
+      return (
+        <CardForm
+          cardNumber={cardNumber}
+          onChangeForm={this.handleChangeForm}
+          onChangeTimeOver={this.handleChangeTimeOver}
+        />
+      );
+    } else if (step === 3) {
+      return <p data-test="congratulations">Поздравляем!</p>;
+    }
+  };
+
+  isFormCommitable = () => {
+    const { step, firstName, lastName, email, cardNumber } = this.state;
+    if (step === 1) {
+      if (
+        firstName !== '' &&
+        lastName !== '' &&
+        email !== '' &&
+        email.includes('@')
+      ) {
+        return true;
+      }
+    } else if (step === 2) {
+      if (cardNumber.length === 16) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  render() {
+    const { step, steps } = this.state;
+    return (
+      <div className="container">
+        <div className="tab-panel">
+          {steps.map((title, key) => {
+            key++;
+            return (
+              <Step
+                key={key}
+                number={key}
+                isSelected={step === key}
+                isClickable={step > key}
+                onClick={this.handleTabClick}
+              >
+                {title}
+              </Step>
+            );
+          })}
+        </div>
+        <div className="form-content">{this.renderForm()}</div>
+        <div className="button-panel">
+          <button
+            className="button-next"
+            disabled={!this.isFormCommitable()}
+            onClick={this.handleClickNextForm}
+          >
+            Next
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;

src/components/CardForm/CardForm.js

@@ -0,0 +1,32 @@
+import React, { PureComponent } from 'react';
+import Title from '../Title';
+import './CardForm.css';
+
+class CardForm extends PureComponent {
+  handleChangeForm = event => {
+    const { onChangeForm } = this.props;
+    const { name, value } = event.target;
+    onChangeForm(name, value);
+  };
+
+  componentWillUnmount = () => {};
+
+  render() {
+    const { cardNumber } = this.props;
+    return (
+      <div data-test="card-form">
+        <Title>Номер карты</Title>
+        <div className="card-form">
+          <input
+            name="cardNumber"
+            placeholder="0000000000000000"
+            value={cardNumber}
+            onChange={this.handleChangeForm}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default CardForm;

src/components/PersonalForm/PersonalForm.js

@@ -0,0 +1,42 @@
+import React, { PureComponent } from 'react';
+import Title from '../Title';
+import './PersonalForm.css';
+
+class PersonalForm extends PureComponent {
+  handleChangeForm = event => {
+    const { onChangeForm } = this.props;
+    const { name, value } = event.target;
+    onChangeForm(name, value);
+  };
+
+  render() {
+    const { firstName, lastName, email } = this.props;
+    return (
+      <div data-test="personal-form">
+        <Title>Персональная информация</Title>
+        <div className="personal-form">
+          <input
+            name="firstName"
+            placeholder="First name"
+            value={firstName}
+            onChange={this.handleChangeForm}
+          />
+          <input
+            name="lastName"
+            placeholder="Last name"
+            value={lastName}
+            onChange={this.handleChangeForm}
+          />
+          <input
+            name="email"
+            placeholder="Email"
+            value={email}
+            onChange={this.handleChangeForm}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default PersonalForm;

src/components/PersonalForm/index.js

@@ -0,0 +1 @@
+export { default } from './PersonalForm';

src/components/Step/Step.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import './Step.css';
+
+class Step extends Component {
+  handleClick = event => {
+    const { isClickable, number } = this.props;
+    if (isClickable) {
+      this.props.onClick(number);
+    }
+  };
+
+  render() {
+    const { number, children, isSelected, isClickable } = this.props;
+    return (
+      <div
+        className={`step 
+          ${isClickable && 'step-clickable'} 
+          ${isSelected && 'step-selected'}`}
+        onClick={this.handleClick}
+      >
+        <p className="step__number">{number}</p>
+        <p className="step__title">{children}</p>
+      </div>
+    );
+  }
+}
+
+export default Step;

src/components/Title/Title.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+import './Title.css';
+
+class Title extends Component {
+  render() {
+    const { children } = this.props;
+    return <h1 className="title">{children}</h1>;
+  }
+}
+
+export default Title;