Questionnaire hw#3

.eslintcache

@@ -1 +1 @@
-[{"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Form/Form.jsx":"1","/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Profile/Profile.jsx":"2","/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/common/Header/Header.jsx":"3","/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/App/App.jsx":"4","/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Form/Input/Input.jsx":"5","/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Form/TextArea/TextArea.jsx":"6","/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/common/Button/Button.jsx":"7","/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/common/ErrorMsg/ErrorMsg.jsx":"8"},{"size":8179,"mtime":1659003939264,"results":"9","hashOfConfig":"10"},{"size":1423,"mtime":1659003939668,"results":"11","hashOfConfig":"10"},{"size":326,"mtime":1658568106156,"results":"12","hashOfConfig":"10"},{"size":813,"mtime":1659003939171,"results":"13","hashOfConfig":"10"},{"size":1011,"mtime":1659003939287,"results":"14","hashOfConfig":"10"},{"size":1085,"mtime":1659003939593,"results":"15","hashOfConfig":"10"},{"size":564,"mtime":1659003939692,"results":"16","hashOfConfig":"10"},{"size":289,"mtime":1659003939702,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","suppressedMessages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"hwzgkr",{"filePath":"21","messages":"22","suppressedMessages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","suppressedMessages":"26","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","suppressedMessages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","suppressedMessages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","suppressedMessages":"35","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","suppressedMessages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","suppressedMessages":"41","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Form/Form.jsx",[],[],"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Profile/Profile.jsx",[],[],"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/common/Header/Header.jsx",[],[],"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/App/App.jsx",[],[],"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Form/Input/Input.jsx",[],[],"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Form/TextArea/TextArea.jsx",[],[],"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/common/Button/Button.jsx",[],[],"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/common/ErrorMsg/ErrorMsg.jsx",[],[]]
+[{"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Form/Form.jsx":"1","/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Profile/Profile.jsx":"2","/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/common/Header/Header.jsx":"3","/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/App/App.jsx":"4","/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Form/Input/Input.jsx":"5","/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Form/TextArea/TextArea.jsx":"6","/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/common/Button/Button.jsx":"7","/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/common/ErrorMsg/ErrorMsg.jsx":"8","/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/common/Container/Container.jsx":"9"},{"size":7892,"mtime":1659024050697,"results":"10","hashOfConfig":"11"},{"size":1423,"mtime":1659003939668,"results":"12","hashOfConfig":"11"},{"size":143,"mtime":1659015067131,"results":"13","hashOfConfig":"11"},{"size":544,"mtime":1659015067058,"results":"14","hashOfConfig":"11"},{"size":582,"mtime":1659024050716,"results":"15","hashOfConfig":"11"},{"size":673,"mtime":1659024050729,"results":"16","hashOfConfig":"11"},{"size":277,"mtime":1659015067076,"results":"17","hashOfConfig":"11"},{"size":207,"mtime":1659015067122,"results":"18","hashOfConfig":"11"},{"size":165,"mtime":1659015067106,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","suppressedMessages":"22","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"hwzgkr",{"filePath":"23","messages":"24","suppressedMessages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","suppressedMessages":"28","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","suppressedMessages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","suppressedMessages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"35","messages":"36","suppressedMessages":"37","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","suppressedMessages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"41","messages":"42","suppressedMessages":"43","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","suppressedMessages":"46","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Form/Form.jsx",[],[],"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Profile/Profile.jsx",[],[],"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/common/Header/Header.jsx",[],[],"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/App/App.jsx",[],[],"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Form/Input/Input.jsx",[],[],"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/Form/TextArea/TextArea.jsx",[],[],"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/common/Button/Button.jsx",[],[],"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/common/ErrorMsg/ErrorMsg.jsx",[],[],"/Users/katerynaborysenko/Documents/andersen-react-hw/src/components/common/Container/Container.jsx",[],[]]

README.md

@@ -70,3 +70,9 @@
 Для выполнения задания используем только React (классовые компоненты). Другие вспомогательные библиотеки использовать нельзя.
 
 Стилизуем приложение на свой вкус с помощью CSS модулей.
+
+<br>
+
+# `ДЗ №3`
+
+Переписать классовые компоненты на функциональные

public/index.html

@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Questionnaire HW 1 and 2</title>
+    <title>Questionnaire HW 3</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/components/App/App.jsx

@@ -1,43 +1,23 @@
-import React, { Component } from "react";
+import { useState } from "react";
 import Container from "../common/Container/Container";
 import Form from "../Form/Form";
 import Profile from "../Profile/Profile";
 
-const INITIAL_STATE = {
-  name: "",
-  surname: "",
-  birthday: "",
-  phone: "",
-  website: "",
-  about: "",
-  technologies: "",
-  project: "",
+const App = () => {
+  const [data, setData] = useState({});
+  const [submitted, setSubmitted] = useState(false);
 
-  submitted: false,
-};
-
-class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      ...INITIAL_STATE,
-    };
-  }
-
-  handleAddData = (newData) => {
-    this.setState({ ...newData, submitted: true });
+  const handleAddData = (newData) => {
+    setData(newData);
+    setSubmitted(true);
   };
 
-  render() {
-    const { submitted, ...data } = this.state;
-
-    return (
-      <Container>
-        {!submitted && <Form onSubmit={this.handleAddData} />}
-        {submitted && <Profile data={data} />}
-      </Container>
-    );
-  }
-}
+  return (
+    <Container>
+      {!submitted && <Form onSubmit={handleAddData} />}
+      {submitted && <Profile data={data} />}
+    </Container>
+  );
+};
 
 export default App;

src/components/Form/Form.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import { useState } from "react";
 import s from "./Form.module.css";
 import Input from "./Input/Input";
 import TextArea from "./TextArea/TextArea";
@@ -27,15 +27,10 @@ const INITIAL_STATE = {
   projectError: "",
 };
 
-class Form extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      ...INITIAL_STATE,
-    };
-  }
+const Form = ({ onSubmit }) => {
+  const [customState, setState] = useState(INITIAL_STATE);
 
-  handleChangeInput = (name, e) => {
+  const handleChangeInput = (name, e) => {
     let value = e.target.value;
 
     if (name === "phone") {
@@ -48,16 +43,22 @@ class Form extends Component {
         .filter((item) => item !== "")
         .join("-");
 
-      this.setState({ [e.target.name]: value });
+      setState((customState) => ({
+        ...customState,
+        [e.target.name]: value,
+      }));
     } else {
-      this.setState({ [name]: value });
+      setState((customState) => ({
+        ...customState,
+        [e.target.name]: value,
+      }));
     }
   };
 
-  handleSubmit = (e) => {
+  const handleSubmit = (e) => {
     e.preventDefault();
 
-    const state = { ...this.state };
+    const state = { ...customState };
 
     let isError = false;
 
@@ -147,7 +148,7 @@ class Form extends Component {
     }
 
     if (isError) {
-      this.setState(state);
+      setState(state);
     } else {
       let {
         name,
@@ -160,7 +161,7 @@ class Form extends Component {
         project,
       } = state;
 
-      this.props.onSubmit({
+      onSubmit({
         name,
         surname,
         birthday,
@@ -173,117 +174,106 @@ class Form extends Component {
     }
   };
 
-  reset = () => {
-    this.setState({ ...INITIAL_STATE });
+  const reset = () => {
+    setState(INITIAL_STATE);
   };
 
-  handleChange = (e) => {
-    const { name, value } = e.target;
-    this.setState({ [name]: value });
-  };
-
-  render() {
-    return (
-      <div className={s.container}>
-        <div className={s.wrap}>
-          <div className={s.contentWrap}>
-            <Header text="Создание анкеты" />
-            <img src={rocket} className={s.image} alt="rocket" />
-          </div>
+  return (
+    <div className={s.container}>
+      <div className={s.wrap}>
+        <div className={s.contentWrap}>
+          <Header text="Создание анкеты" />
+          <img src={rocket} className={s.image} alt="rocket" />
         </div>
-
-        <form className={s.form}>
-          <Input
-            label="Имя"
-            name="name"
-            value={this.state.name}
-            placeholder="пример: Екатерина"
-            onChange={this.handleChangeInput}
-          />
-          <ErrorMsg error={this.state.nameError} />
-
-          <Input
-            label="Фамилия"
-            name="surname"
-            value={this.state.surname}
-            placeholder="пример: Борисенко"
-            onChange={this.handleChangeInput}
-          />
-          <ErrorMsg error={this.state.surnameError} />
-
-          <Input
-            label="Дата Рождения"
-            type="date"
-            name="birthday"
-            value={this.state.birthday}
-            onChange={this.handleChangeInput}
-          />
-          <ErrorMsg error={this.state.birthdayError} />
-
-          <Input
-            label="Телефон"
-            type="tel"
-            name="phone"
-            value={this.state.phone}
-            placeholder="пример: X-XXXX-XX-XX"
-            onChange={this.handleChangeInput}
-          />
-          <ErrorMsg error={this.state.phoneError} />
-
-          <Input
-            label="Сайт"
-            name="website"
-            value={this.state.website}
-            placeholder="пример: http://website.com"
-            onChange={this.handleChangeInput}
-          />
-          <ErrorMsg error={this.state.websiteError} />
-
-          <TextArea
-            label="О себе"
-            name="about"
-            value={this.state.about}
-            rows={7}
-            placeholder="Напишите коротко о себе ..."
-            maxLength={600}
-            onChange={this.handleChangeInput}
-          />
-          <ErrorMsg error={this.state.aboutError} />
-
-          <TextArea
-            label="Стек технологий"
-            name="technologies"
-            value={this.state.technologies}
-            rows={7}
-            placeholder="Перечислите стек технологий которыми Вы владеете..."
-            maxLength={600}
-            onChange={this.handleChangeInput}
-          />
-          <ErrorMsg error={this.state.technologiesError} />
-
-          <TextArea
-            label="Описание последнего проекта"
-            name="project"
-            value={this.state.project}
-            rows={7}
-            placeholder="Опишите свой последний проект..."
-            maxLength={600}
-            onChange={this.handleChangeInput}
-          />
-          <ErrorMsg error={this.state.projectError} />
-
-          <div className={s.buttonWrapper}>
-            <Button text="Отменить" type="button" onClick={this.reset} />
-            <Button
-              text="Сохранить"
-              type="button"
-              onClick={this.handleSubmit}
-            />
-          </div>
-        </form>
       </div>
-    );
-  }
-}
+
+      <form className={s.form}>
+        <Input
+          label="Имя"
+          name="name"
+          value={customState.name}
+          placeholder="пример: Екатерина"
+          onChange={handleChangeInput}
+        />
+        <ErrorMsg error={customState.nameError} />
+
+        <Input
+          label="Фамилия"
+          name="surname"
+          value={customState.surname}
+          placeholder="пример: Борисенко"
+          onChange={handleChangeInput}
+        />
+        <ErrorMsg error={customState.surnameError} />
+
+        <Input
+          label="Дата Рождения"
+          type="date"
+          name="birthday"
+          value={customState.birthday}
+          onChange={handleChangeInput}
+        />
+        <ErrorMsg error={customState.birthdayError} />
+
+        <Input
+          label="Телефон"
+          type="tel"
+          name="phone"
+          value={customState.phone}
+          placeholder="пример: X-XXXX-XX-XX"
+          onChange={handleChangeInput}
+        />
+        <ErrorMsg error={customState.phoneError} />
+
+        <Input
+          label="Сайт"
+          name="website"
+          value={customState.website}
+          placeholder="пример: http://website.com"
+          onChange={handleChangeInput}
+        />
+        <ErrorMsg error={customState.websiteError} />
+
+        <TextArea
+          label="О себе"
+          name="about"
+          value={customState.about}
+          rows={7}
+          placeholder="Напишите коротко о себе ..."
+          maxLength={600}
+          onChange={handleChangeInput}
+        />
+        <ErrorMsg error={customState.aboutError} />
+
+        <TextArea
+          label="Стек технологий"
+          name="technologies"
+          value={customState.technologies}
+          rows={7}
+          placeholder="Перечислите стек технологий которыми Вы владеете..."
+          maxLength={600}
+          onChange={handleChangeInput}
+        />
+        <ErrorMsg error={customState.technologiesError} />
+
+        <TextArea
+          label="Описание последнего проекта"
+          name="project"
+          value={customState.project}
+          rows={7}
+          placeholder="Опишите свой последний проект..."
+          maxLength={600}
+          onChange={handleChangeInput}
+        />
+        <ErrorMsg error={customState.projectError} />
+
+        <div className={s.buttonWrapper}>
+          <Button text="Отменить" type="button" onClick={reset} />
+          <Button text="Сохранить" type="button" onClick={handleSubmit} />
+        </div>
+      </form>
+    </div>
+  );
+};
 
 export default Form;