From db74eed2e0e94a787fb8634c79a17e719b9c4891 Mon Sep 17 00:00:00 2001
From: avshir <av.shirinskaya@gmail.com>
Date: Sun, 2 Apr 2023 18:15:37 +0200
Subject: [PATCH 01/13] feat: add tests for Footer, FormValidate, SearchPanel
 components

---
 src/components/footer/footer.test.tsx         | 11 +++
 src/components/form/formValidate.test.tsx     | 75 +++++++++++++++++++
 .../search-panel/search-panel.test.tsx        | 16 ++++
 3 files changed, 102 insertions(+)
 create mode 100644 src/components/footer/footer.test.tsx
 create mode 100644 src/components/form/formValidate.test.tsx
 create mode 100644 src/components/search-panel/search-panel.test.tsx

diff --git a/src/components/footer/footer.test.tsx b/src/components/footer/footer.test.tsx
new file mode 100644
index 0000000..07e1643
--- /dev/null
+++ b/src/components/footer/footer.test.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import Footer from './footer';
+
+describe('test Header component', () => {
+  test('it renders', () => {
+    render(<Footer />);
+    expect(screen.getByText(/avshir/i)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/form/formValidate.test.tsx b/src/components/form/formValidate.test.tsx
new file mode 100644
index 0000000..4d61248
--- /dev/null
+++ b/src/components/form/formValidate.test.tsx
@@ -0,0 +1,75 @@
+import { userNameValidate, feedbackTextValidate, dateBirthdayValidate } from './formValidate';
+
+describe('check userNameValidate function', () => {
+  test('case: unvalid - empty value', () => {
+    expect(userNameValidate('')).toBe(false);
+  });
+
+  test('case: unvalid - 2 letter ', () => {
+    expect(userNameValidate('An')).toBe(false);
+  });
+
+  test('case: unvalid - 21 letters', () => {
+    expect(userNameValidate('Annnnnnnnnnnnnnnnnnnn')).toBe(false);
+  });
+
+  test('case: unvalid - first letter is in lowerCase', () => {
+    expect(userNameValidate('ann')).toBe(false);
+  });
+
+  test('case: valid name value 3 letter', () => {
+    expect(userNameValidate('Ann')).toBe(true);
+  });
+
+  test('case: valid name value 10 letters', () => {
+    expect(userNameValidate('Anna-Maria')).toBe(true);
+  });
+});
+
+describe('check feedbackTextValidate function', () => {
+  test('case: unvalid - empty value', () => {
+    expect(feedbackTextValidate('')).toBe(false);
+  });
+  test('case: unvalid - 4 words ', () => {
+    expect(feedbackTextValidate('Anna go to the')).toBe(false);
+  });
+  test('case: unvalid - 51 words', () => {
+    const words51 =
+      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis ipsa numquam provident nisi ex ipsam repudiandae quam ut, hic rerum repellat sequi reprehenderit, magnam molestiae cupiditate porro autem est iusto eaque voluptate nihil ducimus saepe veniam! Repellendus, ullam voluptates consectetur facilis delectus deleniti maxime labore, aliquam fugit corrupti libero cupiditate jest?';
+    expect(feedbackTextValidate(words51)).toBe(false);
+  });
+
+  test('case: valid 5 words', () => {
+    expect(feedbackTextValidate('Anna go to the shop')).toBe(true);
+  });
+  test('case: valid 50 words', () => {
+    const words50 =
+      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis ipsa numquam provident nisi ex ipsam repudiandae quam ut, hic rerum repellat sequi reprehenderit, magnam molestiae cupiditate porro autem est iusto eaque voluptate nihil ducimus saepe veniam! Repellendus, ullam voluptates consectetur facilis delectus deleniti maxime labore, aliquam fugit corrupti libero cupiditate?';
+    expect(feedbackTextValidate(words50)).toBe(true);
+  });
+});
+
+describe('check dateBirthdayValidate function', () => {
+  test('case: unvalid - empty value', () => {
+    expect(dateBirthdayValidate('')).toBe(false);
+  });
+  test('case: unvalid - only 2 part of date ', () => {
+    expect(dateBirthdayValidate('2012-12')).toBe(false);
+  });
+  test('case: unvalid - year < 1900', () => {
+    expect(dateBirthdayValidate('1899-12-01')).toBe(false);
+  });
+  test('case: unvalid - year >= currentYear ', () => {
+    const currentYear: number = new Date().getFullYear();
+    const upperCurrentYear = currentYear + 1;
+    expect(dateBirthdayValidate(`${upperCurrentYear}-12-01`)).toBe(false);
+  });
+
+  test('case: valid full date, year > 1900', () => {
+    expect(dateBirthdayValidate('2012-05-12')).toBe(true);
+  });
+  test('case: valid full date and year <= currentYear ', () => {
+    const currentYear: number = new Date().getFullYear();
+    expect(dateBirthdayValidate(`${currentYear}-12-01`)).toBe(true);
+  });
+});
diff --git a/src/components/search-panel/search-panel.test.tsx b/src/components/search-panel/search-panel.test.tsx
new file mode 100644
index 0000000..e424e2d
--- /dev/null
+++ b/src/components/search-panel/search-panel.test.tsx
@@ -0,0 +1,16 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import SearchPanel from './search-panel';
+
+describe('test SearchPanel component', () => {
+  test('should contains input', () => {
+    render(<SearchPanel />);
+    expect(screen.getByRole('search-input')).toBeInTheDocument();
+  });
+
+  test('value of input changes by user', () => {
+    render(<SearchPanel />);
+    const input = screen.getByRole('search-input') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'some text for test' } });
+    expect(input.value).toBe('some text for test');
+  });
+});

From aadce3e834cdac5a12bacd88582caeee1ff2fabb Mon Sep 17 00:00:00 2001
From: avshir <av.shirinskaya@gmail.com>
Date: Sun, 2 Apr 2023 18:16:52 +0200
Subject: [PATCH 02/13] fix: update test in Form component

---
 src/components/form/form.test.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/form/form.test.tsx b/src/components/form/form.test.tsx
index eaac760..167495b 100644
--- a/src/components/form/form.test.tsx
+++ b/src/components/form/form.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 
 import Form from './form';
 
@@ -25,6 +25,19 @@ describe('test Form component', () => {
     expect(screen.getByRole('user-name')).toBeInTheDocument();
   });
 
+  test('value of input type="text" field "userName" changes by user', () => {
+    render(
+      <Form
+        addCardForm={() => {
+          throw new Error();
+        }}
+      />
+    );
+    const input = screen.getByRole('user-name') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'Anna' } });
+    expect(input.value).toBe('Anna');
+  });
+
   test('should contain input type="date" field "date-birthday"', () => {
     render(
       <Form

From f2e63074d3c553542e86dc2c2166c9d92153bd54 Mon Sep 17 00:00:00 2001
From: avshir <av.shirinskaya@gmail.com>
Date: Sun, 2 Apr 2023 18:18:00 +0200
Subject: [PATCH 03/13] fix: styles .scss

---
 src/components/card/card.scss     | 6 +++---
 src/components/form/form.scss     | 2 +-
 src/components/header/header.scss | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index e9794e3..18f0c1b 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -116,16 +116,16 @@
   top: 24px;
   background: #e7e9fe;
   background: $accent2-color;
-  color: $accent3-color;
+  color: $text-color-light;
   padding: 8px 16px;
 }
 
-.topLeft {
+.top-left {
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
 }
 
-.topRight {
+.top-right {
   right: 0;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
diff --git a/src/components/form/form.scss b/src/components/form/form.scss
index 2fc13c4..f98e2ab 100644
--- a/src/components/form/form.scss
+++ b/src/components/form/form.scss
@@ -79,4 +79,4 @@
 
   font-size: 20px;
   color: $accent2-color;
-}
\ No newline at end of file
+}
diff --git a/src/components/header/header.scss b/src/components/header/header.scss
index bb44dea..3da3c35 100644
--- a/src/components/header/header.scss
+++ b/src/components/header/header.scss
@@ -13,7 +13,7 @@
   margin: 0 0 0 auto;
 
   @media (max-width: 640px) {
-    max-width: 200px;;
+    max-width: 200px;
   }
 }
 

From 267e15f259249f249193e356beb2375c23a2b73e Mon Sep 17 00:00:00 2001
From: avshir <av.shirinskaya@gmail.com>
Date: Sun, 2 Apr 2023 18:26:46 +0200
Subject: [PATCH 04/13] feat: replace Card, CardsList and Layout class
 components to functional components

---
 src/components/card/card.tsx             | 45 ++++++++++++------------
 src/components/cards-list/cards-list.tsx | 23 ++++++------
 src/components/layout/layout.tsx         | 26 +++++++-------
 3 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 65d21fe..52b77e3 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -1,31 +1,30 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import './card.scss';
 import { IProduct } from '../types';
 
 type CardProps = { product: IProduct };
-type CardState = {};
 
-export default class Card extends Component<CardProps, CardState> {
-  render() {
-    const { product } = this.props;
-    const { title, brand, images, price } = product;
+const Card = (props: CardProps) => {
+  const { product } = props;
+  const { title, brand, images, price } = product;
 
-    return (
-      <article className='card stacked'>
-        <div className='image-wrap'>
-          <img className='card-image' src={images[0]} alt='image' />
+  return (
+    <article className='card stacked'>
+      <div className='image-wrap'>
+        <img className='card-image' src={images[0]} alt='image' />
+      </div>
+      <div className='card-content card-content-wrapper'>
+        <div className='card-side card-content-button'>
+          <h2 className='card-title'>{title}</h2>
+          <div className='card-price'>{price}$</div>
+          <cite className='card-subtitle'>{brand}</cite>
+          <button className='card-button'>Learn more</button>
         </div>
-        <div className='card-content card-content-wrapper'>
-          <div className='card-side card-content-Button'>
-            <h2 className='card-title'>{title}</h2>
-            <div className='card-price'>{price}$</div>
-            <cite className='card-subtitle'>{brand}</cite>
-            <button className='card-button'>Learn more</button>
-          </div>
-        </div>
-        <span className='tag topLeft'>Top</span>
-      </article>
-    );
-  }
-}
+      </div>
+      <span className='tag top-left'>Top</span>
+    </article>
+  );
+};
+
+export default Card;
diff --git a/src/components/cards-list/cards-list.tsx b/src/components/cards-list/cards-list.tsx
index d74bbc5..2ede2f0 100644
--- a/src/components/cards-list/cards-list.tsx
+++ b/src/components/cards-list/cards-list.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import './cards-list.scss';
 
@@ -8,10 +8,9 @@ import { IProduct } from '../types';
 type CardListProps = {
   products: IProduct[];
 };
-type CardListState = {};
 
-export default class CardList extends Component<CardListProps, CardListState> {
-  cards = this.props.products.slice(0, 8).map((product) => {
+const CardList = ({ products }: CardListProps) => {
+  const cards = products.map((product) => {
     const { id } = product;
 
     return (
@@ -21,11 +20,11 @@ export default class CardList extends Component<CardListProps, CardListState> {
     );
   });
 
-  render() {
-    return (
-      <ul className='cards-list' data-testid='cards-list'>
-        {this.cards}
-      </ul>
-    );
-  }
-}
+  return (
+    <ul className='cards-list' data-testid='cards-list'>
+      {cards}
+    </ul>
+  );
+};
+
+export default CardList;
diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx
index dc7bf78..3410314 100644
--- a/src/components/layout/layout.tsx
+++ b/src/components/layout/layout.tsx
@@ -1,18 +1,20 @@
-import { Component } from 'react';
+import React, { FC } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import Header from '../header';
 
-export default class Layout extends Component {
-  render() {
-    return (
-      <>
-        <Header />
+const Layout: FC = () => {
+  return (
+    <>
+      <Header />
 
-        <main className='container main'>
+      <main className='main'>
+        <div className='container'>
           <Outlet />
-        </main>
-      </>
-    );
-  }
-}
+        </div>
+      </main>
+    </>
+  );
+};
+
+export default Layout;

From 66a669e7da8fe9f5b86a4f5cf7d217cf8060790a Mon Sep 17 00:00:00 2001
From: avshir <av.shirinskaya@gmail.com>
Date: Sun, 2 Apr 2023 18:28:06 +0200
Subject: [PATCH 05/13] feat: replace HomePage class component to a functional
 component

---
 src/pages/homePage/homePage.tsx | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/pages/homePage/homePage.tsx b/src/pages/homePage/homePage.tsx
index dc3d00b..00c514e 100644
--- a/src/pages/homePage/homePage.tsx
+++ b/src/pages/homePage/homePage.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { FC } from 'react';
 
 import './homePage.scss';
 import { dataGoods } from '../../data/data';
@@ -6,19 +6,16 @@ import { IProduct } from '../../components/types';
 import CardList from '../../components/cards-list';
 import SearchPanel from '../../components/search-panel';
 
-type HomePageProps = {};
-type HomePageState = {};
+const HomePage: FC = () => {
+  const products: IProduct[] = dataGoods.products.slice(0, 8); //get only 8 products
 
-export default class HomePage extends Component<HomePageProps, HomePageState> {
-  render() {
-    const products: IProduct[] = dataGoods.products;
+  return (
+    <div className='home-page container'>
+      <h2 className='page__title'>HomePage</h2>
+      <SearchPanel />
+      <CardList products={products} />
+    </div>
+  );
+};
 
-    return (
-      <div className='home-page container '>
-        <h2 className='page__title'>HomePage</h2>
-        <SearchPanel />
-        <CardList products={products} />
-      </div>
-    );
-  }
-}
+export default HomePage;

From c02f608b9943853a7b7d1682bbe59ff522b9a6c7 Mon Sep 17 00:00:00 2001
From: avshir <av.shirinskaya@gmail.com>
Date: Sun, 2 Apr 2023 22:30:27 +0200
Subject: [PATCH 06/13] feat: replace SearchPanel class component to a
 functional component

---
 src/components/search-panel/search-panel.tsx | 66 +++++++-------------
 1 file changed, 24 insertions(+), 42 deletions(-)

diff --git a/src/components/search-panel/search-panel.tsx b/src/components/search-panel/search-panel.tsx
index e39275d..a5c7dcc 100644
--- a/src/components/search-panel/search-panel.tsx
+++ b/src/components/search-panel/search-panel.tsx
@@ -1,50 +1,32 @@
-import React, { Component, ChangeEvent } from 'react';
+import React, { FC, ChangeEvent, useState, useEffect } from 'react';
 
 import './search-panel.scss';
 
-type SearchPanelProps = {};
-type SearchPanelState = { searchValue: string };
+const SearchPanel: FC = () => {
+  const initSearchValue: string = localStorage.getItem('searchValue') || '';
+  const [searchValue, setSearchValue] = useState(initSearchValue);
 
-export default class SearchPanel extends Component<SearchPanelProps, SearchPanelState> {
-  state = {
-    searchValue: localStorage.getItem('searchValue') || '',
-  };
-
-  componentDidMount() {
-    this.getSearchValue();
-  }
-
-  componentWillUnmount() {
-    localStorage.setItem('searchValue', this.state.searchValue);
-  }
+  useEffect(() => {
+    localStorage.setItem('searchValue', searchValue);
+  }, [searchValue]);
 
-  getSearchValue(): void {
-    const searchValueLS = localStorage.getItem('searchValue') || '';
-    if (searchValueLS) {
-      this.setState({
-        searchValue: searchValueLS,
-      });
-    }
-  }
-
-  onSearchChange = (e: ChangeEvent<HTMLInputElement>): void => {
+  const onSearchChange = (e: ChangeEvent<HTMLInputElement>): void => {
     const newSearchValue = e.target.value.trimStart();
-    this.setState({
-      searchValue: newSearchValue,
-    });
+    setSearchValue(newSearchValue);
   };
 
-  render() {
-    const searchText = 'Type here to search...';
-
-    return (
-      <input
-        type='text'
-        className='search-panel search-input btn--border'
-        placeholder={searchText}
-        value={this.state.searchValue}
-        onChange={this.onSearchChange}
-      />
-    );
-  }
-}
+  const searchText = 'Type here to search...';
+
+  return (
+    <input
+      type='text'
+      className='search-panel search-input btn--border'
+      placeholder={searchText}
+      value={searchValue}
+      onChange={(e) => onSearchChange(e)}
+      role='search-input'
+    />
+  );
+};
+
+export default SearchPanel;

From d981a0f7a10b21dbac60eeee87934618dfcdcb98 Mon Sep 17 00:00:00 2001
From: avshir <av.shirinskaya@gmail.com>
Date: Sun, 2 Apr 2023 23:36:54 +0200
Subject: [PATCH 07/13] feat: add library react-hook-form

---
 package-lock.json | 22 ++++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 23 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 90f04fa..afe06d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "axios": "^1.3.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-hook-form": "^7.43.9",
         "react-router-dom": "^6.9.0",
         "react-scripts": "5.0.1",
         "sass": "^1.59.3",
@@ -14537,6 +14538,21 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-hook-form": {
+      "version": "7.43.9",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.9.tgz",
+      "integrity": "sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -27725,6 +27741,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-hook-form": {
+      "version": "7.43.9",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.9.tgz",
+      "integrity": "sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index f48e4d5..14d9b0e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "axios": "^1.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.43.9",
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
     "sass": "^1.59.3",

From a6dda6292fc06242a65e30e735ebd30dc7b482f5 Mon Sep 17 00:00:00 2001
From: avshir <av.shirinskaya@gmail.com>
Date: Sun, 2 Apr 2023 23:39:28 +0200
Subject: [PATCH 08/13] feat: replace Form class component to a functional
 component

---
 src/components/form/form.tsx | 344 +++++++++++++++++------------------
 1 file changed, 165 insertions(+), 179 deletions(-)

diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
index b173e5d..5dc9fcb 100644
--- a/src/components/form/form.tsx
+++ b/src/components/form/form.tsx
@@ -1,4 +1,4 @@
-import React, { Component, FormEvent } from 'react';
+import React, { FC, useState, useRef, FormEvent } from 'react';
 
 import './form.scss';
 import { ICardForm } from '../cardForm/cardForm';
@@ -8,212 +8,198 @@ import { feedbackTextValidate, userNameValidate, dateBirthdayValidate } from './
 type FormProps = {
   addCardForm: (card: ICardForm) => void;
 };
-type FormState = {
-  errors: FormErrors;
-  success: string;
-};
-
-export default class Form extends Component<FormProps, FormState> {
-  state: FormState = {
-    errors: {
-      userName: '',
-      country: '',
-      birthday: '',
-      feedbackText: '',
-      imageSrc: '',
-      isConsent: '',
-    },
-    success: '',
-  };
 
-  private formRef = React.createRef<HTMLFormElement>();
-  private userNameRef = React.createRef<HTMLInputElement>();
-  private birthdayRef = React.createRef<HTMLInputElement>();
-  private countryRef = React.createRef<HTMLSelectElement>();
-  private feedbackTextRef = React.createRef<HTMLTextAreaElement>();
-  private isConsentRef = React.createRef<HTMLInputElement>();
-  private imageRef = React.createRef<HTMLInputElement>();
-
-  createCardForm(): ICardForm {
-    const genderArr: HTMLInputElement[] = [...this.formRef.current?.['gender']];
+const Form: FC<FormProps> = (props: FormProps) => {
+  const [errors, setErrors] = useState<FormErrors>({
+    userName: '',
+    country: '',
+    birthday: '',
+    feedbackText: '',
+    imageSrc: '',
+    isConsent: '',
+  });
+  const [success, setSuccess] = useState('');
+
+  const formRef = useRef<HTMLFormElement>(null);
+  const userNameRef = useRef<HTMLInputElement>(null);
+  const birthdayRef = useRef<HTMLInputElement>(null);
+  const countryRef = useRef<HTMLSelectElement>(null);
+  const feedbackTextRef = useRef<HTMLTextAreaElement>(null);
+  const isConsentRef = useRef<HTMLInputElement>(null);
+  const imageRef = useRef<HTMLInputElement>(null);
+
+  const createCardForm = (): ICardForm => {
+    const genderArr: HTMLInputElement[] = [...formRef.current?.['gender']];
     const gender = (genderArr.find((el) => el.checked) as HTMLInputElement).value;
 
     return {
-      userName: this.userNameRef.current?.value || '',
+      userName: userNameRef.current?.value || '',
       gender: gender || '',
-      birthday: this.birthdayRef.current?.value || '',
-      country: this.countryRef.current?.value || '',
-      feedbackText: this.feedbackTextRef.current?.value || '',
-      isConsentPersonalData: this.isConsentRef.current?.checked,
-      imageSrc: this.imageRef.current?.files ? URL.createObjectURL(this.imageRef.current.files[0]) : '',
+      birthday: birthdayRef.current?.value || '',
+      country: countryRef.current?.value || '',
+      feedbackText: feedbackTextRef.current?.value || '',
+      isConsentPersonalData: isConsentRef.current?.checked,
+      imageSrc: imageRef.current?.files ? URL.createObjectURL(imageRef.current.files[0]) : '',
     };
-  }
-
-  validate() {
-    const errors: FormErrors = {
-      userName: userNameValidate(this.userNameRef.current?.value || '') ? '' : errorTextMessage.userName,
-      feedbackText: feedbackTextValidate(this.feedbackTextRef.current?.value || '')
-        ? ''
-        : errorTextMessage.feedbackText,
-      country: this.formRef.current?.['country'].value ? '' : errorTextMessage.country,
-      isConsent: this.formRef.current?.['agree-consent-data'].checked ? '' : errorTextMessage.isConsent,
-      birthday: dateBirthdayValidate(this.formRef.current?.['date-birthday'].value) ? '' : errorTextMessage.birthday,
-      imageSrc: this.imageRef.current?.value ? '' : errorTextMessage.imageSrc,
+  };
+
+  const validate = (): boolean => {
+    const newErrors: FormErrors = {
+      userName: userNameValidate(userNameRef.current?.value || '') ? '' : errorTextMessage.userName,
+      feedbackText: feedbackTextValidate(feedbackTextRef.current?.value || '') ? '' : errorTextMessage.feedbackText,
+      country: formRef.current?.['country'].value ? '' : errorTextMessage.country,
+      isConsent: formRef.current?.['agree-consent-data'].checked ? '' : errorTextMessage.isConsent,
+      birthday: dateBirthdayValidate(formRef.current?.['date-birthday'].value) ? '' : errorTextMessage.birthday,
+      imageSrc: imageRef.current?.value ? '' : errorTextMessage.imageSrc,
     };
 
-    this.setState({ errors: errors });
+    setErrors(newErrors);
 
-    const isValid = Object.values(errors).every((elem) => !elem);
+    const isValid = Object.values(newErrors).every((elem) => !elem);
     return isValid;
-  }
+  };
 
-  resetErrorsInfo = () => {
-    this.setState({
-      errors: { userName: '', country: '', birthday: '', feedbackText: '', imageSrc: '', isConsent: '' },
-    });
+  const resetErrorsInfo = () => {
+    const clearErrors = { userName: '', country: '', birthday: '', feedbackText: '', imageSrc: '', isConsent: '' };
+    setErrors(clearErrors);
   };
 
-  showSuccessMessage() {
-    this.setState({ success: 'Your feedback will be added! Thanks' });
+  const showSuccessMessage = () => {
+    setSuccess('Your feedback will be added! Thanks');
 
     setTimeout(() => {
-      this.setState({ success: '' });
+      setSuccess('');
     }, 3000);
-  }
+  };
 
-  handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    const isValid = this.validate();
+    const isValid = validate();
 
     if (isValid) {
-      const newCardForm = this.createCardForm();
-      this.props.addCardForm(newCardForm);
+      const newCardForm = createCardForm();
+      props.addCardForm(newCardForm);
 
-      this.showSuccessMessage();
+      showSuccessMessage();
 
-      if (this.formRef.current) {
-        this.formRef.current.reset();
+      if (formRef.current) {
+        formRef.current.reset();
       }
     }
   };
 
-  render() {
-    const successMessage = this.state.success ? (
-      <div className='form__success-message popup'>
-        <div className='popup__content'>{this.state.success}</div>
+  const successMessage = success ? (
+    <div className='form__success-message popup'>
+      <div className='popup__content'>{success}</div>
+    </div>
+  ) : null;
+
+  return (
+    <form
+      id='add-card-form'
+      role='form'
+      className='form'
+      action='/'
+      method='post'
+      onSubmit={handleSubmit}
+      onChange={resetErrorsInfo}
+      ref={formRef}
+    >
+      {successMessage}
+
+      <h3 className='form__title'>Add feedback</h3>
+      <div className='form__item'>
+        <label className='form__label' htmlFor='userName'>
+          Your name
+        </label>
+        <input
+          className='form__input user-name'
+          type='text'
+          placeholder='Name'
+          name='userName'
+          ref={userNameRef}
+          role='user-name'
+        ></input>
+        <span className='form__error'>{errors.userName}</span>
       </div>
-    ) : null;
-
-    return (
-      <form
-        id='add-card-form'
-        role='form'
-        className='form'
-        action='/'
-        method='post'
-        onSubmit={this.handleSubmit}
-        onChange={this.resetErrorsInfo}
-        ref={this.formRef}
-      >
-        {successMessage}
-
-        <h3 className='form__title'>Add feedback</h3>
-        <div className='form__item'>
-          <label className='form__label' htmlFor='userName'>
-            Your name
-          </label>
-          <input
-            className='form__input user-name'
-            type='text'
-            placeholder='Name'
-            name='userName'
-            ref={this.userNameRef}
-            role='user-name'
-          ></input>
-          <span className='form__error'>{this.state.errors.userName}</span>
-        </div>
-        <div className='form__item'>
-          <label className='form__label' htmlFor='date-birthday'>
-            Your birthday
-          </label>
-          <input
-            className='form__input date'
-            type='date'
-            name='date-birthday'
-            ref={this.birthdayRef}
-            role='date-birthday'
-          ></input>
-          <span className='form__error'>{this.state.errors.birthday}</span>
-        </div>
-        <div className='form__item'>
-          <label className='form__label' htmlFor='country'>
-            Where are you from?
-          </label>
-          <select className='form__input' name='country' ref={this.countryRef} role='select-country'>
-            <option value=''>Choose country</option>
-            <option value='Belarus'>Belarus</option>
-            <option value='Poland'>Poland</option>
-            <option value='Lithuania'>Lithuania</option>
-            <option value='France'>France</option>
-            <option value='Sweden'>Sweden</option>
-          </select>
-          <span className='form__error'>{this.state.errors.country}</span>
-        </div>
-        <div className='form__radio'>
-          <div className='form__radio-item'>
-            <input className='form__radio-input' type='radio' name='gender' defaultValue='female' defaultChecked />
-            <label htmlFor='female'>female</label>
-          </div>
-          <div className='form__radio-item'>
-            <input className='form__radio-input' type='radio' name='gender' defaultValue='male' />
-            <label htmlFor='male'>male</label>
-          </div>
-        </div>
-        <div className='form__item'>
-          <label className='form__label' htmlFor='profile'>
-            Profile picture
-          </label>
-          <input
-            className='form__input user-image'
-            type='file'
-            name='profile'
-            accept='image/*,.pdf'
-            ref={this.imageRef}
-            role='profile'
-          ></input>
-          <span className='form__error'>{this.state.errors.imageSrc}</span>
+      <div className='form__item'>
+        <label className='form__label' htmlFor='date-birthday'>
+          Your birthday
+        </label>
+        <input
+          className='form__input date'
+          type='date'
+          name='date-birthday'
+          ref={birthdayRef}
+          role='date-birthday'
+        ></input>
+        <span className='form__error'>{errors.birthday}</span>
+      </div>
+      <div className='form__item'>
+        <label className='form__label' htmlFor='country'>
+          Where are you from?
+        </label>
+        <select className='form__input' name='country' ref={countryRef} role='select-country'>
+          <option value=''>Choose country</option>
+          <option value='Belarus'>Belarus</option>
+          <option value='Poland'>Poland</option>
+          <option value='Lithuania'>Lithuania</option>
+          <option value='France'>France</option>
+          <option value='Sweden'>Sweden</option>
+        </select>
+        <span className='form__error'>{errors.country}</span>
+      </div>
+      <div className='form__radio'>
+        <div className='form__radio-item'>
+          <input className='form__radio-input' type='radio' name='gender' defaultValue='female' defaultChecked />
+          <label htmlFor='female'>female</label>
         </div>
-        <div className='form__item'>
-          <label className='form__label' htmlFor='feedback'>
-            Your feedback
-          </label>
-          <textarea className='form__input form__textarea' name='feedback' ref={this.feedbackTextRef}></textarea>
-          <span className='form__error'>{this.state.errors.feedbackText}</span>
+        <div className='form__radio-item'>
+          <input className='form__radio-input' type='radio' name='gender' defaultValue='male' />
+          <label htmlFor='male'>male</label>
         </div>
+      </div>
+      <div className='form__item'>
+        <label className='form__label' htmlFor='profile'>
+          Profile picture
+        </label>
+        <input
+          className='form__input user-image'
+          type='file'
+          name='profile'
+          accept='image/*,.pdf'
+          ref={imageRef}
+          role='profile'
+        ></input>
+        <span className='form__error'>{errors.imageSrc}</span>
+      </div>
+      <div className='form__item'>
+        <label className='form__label' htmlFor='feedback'>
+          Your feedback
+        </label>
+        <textarea className='form__input form__textarea' name='feedback' ref={feedbackTextRef}></textarea>
+        <span className='form__error'>{errors.feedbackText}</span>
+      </div>
 
-        <div className='form__item-checkbox'>
-          <input
-            className='form__input-checkbox'
-            type='checkbox'
-            name='agree-consent-data'
-            ref={this.isConsentRef}
-          ></input>
-          <label className='form__label-checkbox' htmlFor='agree-consent-data'>
-            I consent to my personal data
-          </label>
-        </div>
-        <span className='form__error'>{this.state.errors.isConsent}</span>
-
-        <div className='form__wrapper'>
-          <button className='btn' type='submit'>
-            Submit
-          </button>
-          <button className='btn btn--col-5' type='reset'>
-            Reset
-          </button>
-        </div>
-      </form>
-    );
-  }
-}
+      <div className='form__item-checkbox'>
+        <input className='form__input-checkbox' type='checkbox' name='agree-consent-data' ref={isConsentRef}></input>
+        <label className='form__label-checkbox' htmlFor='agree-consent-data'>
+          I consent to my personal data
+        </label>
+      </div>
+      <span className='form__error'>{errors.isConsent}</span>
+
+      <div className='form__wrapper'>
+        <button className='btn' type='submit'>
+          Submit
+        </button>
+        <button className='btn btn--col-5' type='reset'>
+          Reset
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default Form;

From f104938d6bf98a80eeec1d4ecb44d74adb4f9265 Mon Sep 17 00:00:00 2001
From: avshir <av.shirinskaya@gmail.com>
Date: Sun, 2 Apr 2023 23:59:27 +0200
Subject: [PATCH 09/13] feat: replace CardForm, CardFormList class components
 to functional components

---
 .../cardForm-list/cardForm-list.tsx           | 35 +++++-----
 src/components/cardForm/cardForm.tsx          | 65 +++++++++----------
 2 files changed, 49 insertions(+), 51 deletions(-)

diff --git a/src/components/cardForm-list/cardForm-list.tsx b/src/components/cardForm-list/cardForm-list.tsx
index 2797e17..99d21ee 100644
--- a/src/components/cardForm-list/cardForm-list.tsx
+++ b/src/components/cardForm-list/cardForm-list.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { FC } from 'react';
 
 import { ICardForm } from '../cardForm/cardForm';
 import CardForm from '../cardForm';
@@ -8,24 +8,23 @@ import './cardForm-list.scss';
 type CardFormListProps = {
   cardsForm: ICardForm[];
 };
-type CardFormListState = {};
 
-export default class CardFormList extends Component<CardFormListProps, CardFormListState> {
-  render() {
-    const cards = this.props.cardsForm.map((card) => {
-      const { id } = card;
-
-      return (
-        <li key={id} className='cards-list__item'>
-          <CardForm card={card} />
-        </li>
-      );
-    });
+const CardFormList: FC<CardFormListProps> = (props: CardFormListProps) => {
+  const cards = props.cardsForm.map((card) => {
+    const { id } = card;
 
     return (
-      <ul className='card-form-list' data-testid='card-form-list'>
-        {cards}
-      </ul>
+      <li key={id} className='cards-list__item'>
+        <CardForm card={card} />
+      </li>
     );
-  }
-}
+  });
+
+  return (
+    <ul className='card-form-list' data-testid='card-form-list'>
+      {cards}
+    </ul>
+  );
+};
+
+export default CardFormList;
diff --git a/src/components/cardForm/cardForm.tsx b/src/components/cardForm/cardForm.tsx
index f13534a..4fca094 100644
--- a/src/components/cardForm/cardForm.tsx
+++ b/src/components/cardForm/cardForm.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { FC } from 'react';
 
 import './cardForm.scss';
 
@@ -14,40 +14,39 @@ export interface ICardForm {
 }
 
 type CardFormProps = { card: ICardForm };
-type CardFormState = {};
-
-export default class CardForm extends Component<CardFormProps, CardFormState> {
-  render() {
-    const { card } = this.props;
-    const { userName, gender, birthday, country, isConsentPersonalData, feedbackText, imageSrc } = card;
-
-    return (
-      <div className='card' role='card-form'>
-        <div className='card__img'>
-          <div className='card__img-wrapper'>
-            <img src={imageSrc} alt='image profile' />
-          </div>
-        </div>
-        <div className='card__main-info'>
-          <div className='card__title'>{userName}</div>
-          <div className='card__country'>{country}</div>
-        </div>
 
-        <div className='card__second-info'>
-          <div className='card__item'>
-            <span>Birthday: </span>
-            {birthday}
-          </div>
-          <div className='card__item'>{gender}</div>
-        </div>
+const CardForm: FC<CardFormProps> = (props: CardFormProps) => {
+  const { card } = props;
+  const { userName, gender, birthday, country, isConsentPersonalData, feedbackText, imageSrc } = card;
 
-        <div className='card__info'>
-          <p className='card__feedback-text'>{feedbackText}</p>
+  return (
+    <div className='card' role='card-form'>
+      <div className='card__img'>
+        <div className='card__img-wrapper'>
+          <img src={imageSrc} alt='image profile' />
         </div>
-        <div className='card__consent-data'>
-          Do you consent to my personal data? <span>{isConsentPersonalData ? 'Yes' : 'No'}</span>
+      </div>
+      <div className='card__main-info'>
+        <div className='card__title'>{userName}</div>
+        <div className='card__country'>{country}</div>
+      </div>
+
+      <div className='card__second-info'>
+        <div className='card__item'>
+          <span>Birthday: </span>
+          {birthday}
         </div>
+        <div className='card__item'>{gender}</div>
       </div>
-    );
-  }
-}
+
+      <div className='card__info'>
+        <p className='card__feedback-text'>{feedbackText}</p>
+      </div>
+      <div className='card__consent-data'>
+        Do you consent to my personal data? <span>{isConsentPersonalData ? 'Yes' : 'No'}</span>
+      </div>
+    </div>
+  );
+};
+
+export default CardForm;

From 80f153d22999fffb8bbc6307c1a2702c0ca1cc65 Mon Sep 17 00:00:00 2001
From: avshir <av.shirinskaya@gmail.com>
Date: Mon, 3 Apr 2023 00:58:20 +0200
Subject: [PATCH 10/13] fix: update SearchPanel component

---
 src/components/search-panel/search-panel.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/search-panel/search-panel.tsx b/src/components/search-panel/search-panel.tsx
index a5c7dcc..d7cbdb9 100644
--- a/src/components/search-panel/search-panel.tsx
+++ b/src/components/search-panel/search-panel.tsx
@@ -1,18 +1,24 @@
-import React, { FC, ChangeEvent, useState, useEffect } from 'react';
+import React, { FC, ChangeEvent, useState, useEffect, useRef } from 'react';
 
 import './search-panel.scss';
 
 const SearchPanel: FC = () => {
   const initSearchValue: string = localStorage.getItem('searchValue') || '';
   const [searchValue, setSearchValue] = useState(initSearchValue);
+  const searchRef = useRef<string>(searchValue);
 
   useEffect(() => {
-    localStorage.setItem('searchValue', searchValue);
-  }, [searchValue]);
+    //like componentWillUnmount
+    return function saveToLS() {
+      const currentSearchValue = searchRef?.current || '';
+      localStorage.setItem('searchValue', currentSearchValue);
+    };
+  }, []);
 
   const onSearchChange = (e: ChangeEvent<HTMLInputElement>): void => {
     const newSearchValue = e.target.value.trimStart();
     setSearchValue(newSearchValue);
+    searchRef.current = newSearchValue;
   };
 
   const searchText = 'Type here to search...';

From 68fa9b5ecd003f8aa203d02e76185d2be417d920 Mon Sep 17 00:00:00 2001
From: avshir <av.shirinskaya@gmail.com>
Date: Mon, 3 Apr 2023 04:01:21 +0200
Subject: [PATCH 11/13] feat: update Form component with react-hook-form

---
 src/components/form/form.tsx | 163 ++++++++++++++---------------------
 1 file changed, 64 insertions(+), 99 deletions(-)

diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
index 5dc9fcb..344e095 100644
--- a/src/components/form/form.tsx
+++ b/src/components/form/form.tsx
@@ -1,68 +1,33 @@
-import React, { FC, useState, useRef, FormEvent } from 'react';
+import React, { FC, useState } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
 
 import './form.scss';
 import { ICardForm } from '../cardForm/cardForm';
-import { FormErrors, errorTextMessage } from './form-utils';
-import { feedbackTextValidate, userNameValidate, dateBirthdayValidate } from './formValidate';
+import { errorTextMessage } from './form-utils';
 
 type FormProps = {
   addCardForm: (card: ICardForm) => void;
 };
 
-const Form: FC<FormProps> = (props: FormProps) => {
-  const [errors, setErrors] = useState<FormErrors>({
-    userName: '',
-    country: '',
-    birthday: '',
-    feedbackText: '',
-    imageSrc: '',
-    isConsent: '',
-  });
-  const [success, setSuccess] = useState('');
-
-  const formRef = useRef<HTMLFormElement>(null);
-  const userNameRef = useRef<HTMLInputElement>(null);
-  const birthdayRef = useRef<HTMLInputElement>(null);
-  const countryRef = useRef<HTMLSelectElement>(null);
-  const feedbackTextRef = useRef<HTMLTextAreaElement>(null);
-  const isConsentRef = useRef<HTMLInputElement>(null);
-  const imageRef = useRef<HTMLInputElement>(null);
-
-  const createCardForm = (): ICardForm => {
-    const genderArr: HTMLInputElement[] = [...formRef.current?.['gender']];
-    const gender = (genderArr.find((el) => el.checked) as HTMLInputElement).value;
-
-    return {
-      userName: userNameRef.current?.value || '',
-      gender: gender || '',
-      birthday: birthdayRef.current?.value || '',
-      country: countryRef.current?.value || '',
-      feedbackText: feedbackTextRef.current?.value || '',
-      isConsentPersonalData: isConsentRef.current?.checked,
-      imageSrc: imageRef.current?.files ? URL.createObjectURL(imageRef.current.files[0]) : '',
-    };
-  };
-
-  const validate = (): boolean => {
-    const newErrors: FormErrors = {
-      userName: userNameValidate(userNameRef.current?.value || '') ? '' : errorTextMessage.userName,
-      feedbackText: feedbackTextValidate(feedbackTextRef.current?.value || '') ? '' : errorTextMessage.feedbackText,
-      country: formRef.current?.['country'].value ? '' : errorTextMessage.country,
-      isConsent: formRef.current?.['agree-consent-data'].checked ? '' : errorTextMessage.isConsent,
-      birthday: dateBirthdayValidate(formRef.current?.['date-birthday'].value) ? '' : errorTextMessage.birthday,
-      imageSrc: imageRef.current?.value ? '' : errorTextMessage.imageSrc,
-    };
-
-    setErrors(newErrors);
+type FormValues = {
+  userName: string;
+  country: string;
+  birthday: string;
+  feedbackText: string;
+  image: FileList;
+  isConsentPersonalData: boolean;
+  gender: string;
+};
 
-    const isValid = Object.values(newErrors).every((elem) => !elem);
-    return isValid;
-  };
+const Form: FC<FormProps> = (props: FormProps) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<FormValues>();
 
-  const resetErrorsInfo = () => {
-    const clearErrors = { userName: '', country: '', birthday: '', feedbackText: '', imageSrc: '', isConsent: '' };
-    setErrors(clearErrors);
-  };
+  const [success, setSuccess] = useState('');
 
   const showSuccessMessage = () => {
     setSuccess('Your feedback will be added! Thanks');
@@ -72,21 +37,15 @@ const Form: FC<FormProps> = (props: FormProps) => {
     }, 3000);
   };
 
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const isValid = validate();
-
-    if (isValid) {
-      const newCardForm = createCardForm();
-      props.addCardForm(newCardForm);
+  const onSubmit: SubmitHandler<FormValues> = (data) => {
+    const { image, ...dataLast } = data;
+    const imageSrc: string = URL.createObjectURL(image[0]);
+    const newCardForm: ICardForm = { imageSrc, ...dataLast };
 
-      showSuccessMessage();
+    props.addCardForm(newCardForm);
 
-      if (formRef.current) {
-        formRef.current.reset();
-      }
-    }
+    showSuccessMessage();
+    reset();
   };
 
   const successMessage = success ? (
@@ -96,16 +55,7 @@ const Form: FC<FormProps> = (props: FormProps) => {
   ) : null;
 
   return (
-    <form
-      id='add-card-form'
-      role='form'
-      className='form'
-      action='/'
-      method='post'
-      onSubmit={handleSubmit}
-      onChange={resetErrorsInfo}
-      ref={formRef}
-    >
+    <form id='add-card-form' role='form' className='form' action='/' method='post' onSubmit={handleSubmit(onSubmit)}>
       {successMessage}
 
       <h3 className='form__title'>Add feedback</h3>
@@ -117,30 +67,30 @@ const Form: FC<FormProps> = (props: FormProps) => {
           className='form__input user-name'
           type='text'
           placeholder='Name'
-          name='userName'
-          ref={userNameRef}
+          {...register('userName', { required: true, minLength: 3, maxLength: 20 })}
           role='user-name'
         ></input>
-        <span className='form__error'>{errors.userName}</span>
+        {errors.userName && <span className='form__error'>{errorTextMessage.userName}</span>}
       </div>
+
       <div className='form__item'>
-        <label className='form__label' htmlFor='date-birthday'>
+        <label className='form__label' htmlFor='birthday'>
           Your birthday
         </label>
         <input
           className='form__input date'
           type='date'
-          name='date-birthday'
-          ref={birthdayRef}
+          {...register('birthday', { required: true })}
           role='date-birthday'
         ></input>
-        <span className='form__error'>{errors.birthday}</span>
+        {errors.birthday && <span className='form__error'>{errorTextMessage.birthday}</span>}
       </div>
+
       <div className='form__item'>
         <label className='form__label' htmlFor='country'>
           Where are you from?
         </label>
-        <select className='form__input' name='country' ref={countryRef} role='select-country'>
+        <select className='form__input' {...register('country', { required: true })} role='select-country'>
           <option value=''>Choose country</option>
           <option value='Belarus'>Belarus</option>
           <option value='Poland'>Poland</option>
@@ -148,47 +98,62 @@ const Form: FC<FormProps> = (props: FormProps) => {
           <option value='France'>France</option>
           <option value='Sweden'>Sweden</option>
         </select>
-        <span className='form__error'>{errors.country}</span>
+        {errors.country && <span className='form__error'>{errorTextMessage.country}</span>}
       </div>
+
       <div className='form__radio'>
         <div className='form__radio-item'>
-          <input className='form__radio-input' type='radio' name='gender' defaultValue='female' defaultChecked />
+          <input
+            className='form__radio-input'
+            type='radio'
+            defaultValue='female'
+            defaultChecked
+            {...register('gender')}
+          />
           <label htmlFor='female'>female</label>
         </div>
         <div className='form__radio-item'>
-          <input className='form__radio-input' type='radio' name='gender' defaultValue='male' />
+          <input className='form__radio-input' type='radio' defaultValue='male' {...register('gender')} />
           <label htmlFor='male'>male</label>
         </div>
       </div>
+
       <div className='form__item'>
-        <label className='form__label' htmlFor='profile'>
+        <label className='form__label' htmlFor='image'>
           Profile picture
         </label>
         <input
           className='form__input user-image'
           type='file'
-          name='profile'
           accept='image/*,.pdf'
-          ref={imageRef}
+          {...register('image', { required: true })}
           role='profile'
         ></input>
-        <span className='form__error'>{errors.imageSrc}</span>
+        {errors.image && <span className='form__error'>{errorTextMessage.imageSrc}</span>}
       </div>
+
       <div className='form__item'>
-        <label className='form__label' htmlFor='feedback'>
+        <label className='form__label' htmlFor='feedbackText'>
           Your feedback
         </label>
-        <textarea className='form__input form__textarea' name='feedback' ref={feedbackTextRef}></textarea>
-        <span className='form__error'>{errors.feedbackText}</span>
+        <textarea
+          className='form__input form__textarea'
+          {...register('feedbackText', { required: true, minLength: 5, maxLength: 50 })}
+        ></textarea>
+        {errors.feedbackText && <span className='form__error'>{errorTextMessage.feedbackText}</span>}
       </div>
 
       <div className='form__item-checkbox'>
-        <input className='form__input-checkbox' type='checkbox' name='agree-consent-data' ref={isConsentRef}></input>
-        <label className='form__label-checkbox' htmlFor='agree-consent-data'>
+        <input
+          className='form__input-checkbox'
+          type='checkbox'
+          {...register('isConsentPersonalData', { required: true })}
+        ></input>
+        <label className='form__label-checkbox' htmlFor='isConsentPersonalData'>
           I consent to my personal data
         </label>
       </div>
-      <span className='form__error'>{errors.isConsent}</span>
+      {errors.isConsentPersonalData && <span className='form__error'>{errorTextMessage.isConsent}</span>}
 
       <div className='form__wrapper'>
         <button className='btn' type='submit'>

From ddd37fcf923f9ee090b9f50865b9d6d77a8d19f1 Mon Sep 17 00:00:00 2001
From: avshir <av.shirinskaya@gmail.com>
Date: Wed, 5 Apr 2023 00:26:50 +0200
Subject: [PATCH 12/13] feat: replace FormPage class component to a functional
 component

---
 src/pages/formPage/formPage.tsx | 58 +++++++++++++--------------------
 1 file changed, 23 insertions(+), 35 deletions(-)

diff --git a/src/pages/formPage/formPage.tsx b/src/pages/formPage/formPage.tsx
index 31251d7..6139756 100644
--- a/src/pages/formPage/formPage.tsx
+++ b/src/pages/formPage/formPage.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { FC, useState } from 'react';
 
 import './formPage.scss';
 
@@ -6,32 +6,22 @@ import Form from '../../components/form';
 import { ICardForm } from '../../components/cardForm/cardForm';
 import CardFormList from '../../components/cardForm-list';
 
-type FormPageProps = {};
-type FormPageState = {
-  cardsForm: ICardForm[];
-};
-
-export default class FormPage extends Component<FormPageProps, FormPageState> {
-  cardId = 1;
-
-  state = {
-    cardsForm: [],
-  };
+const FormPage: FC = () => {
+  let cardId = 1;
+  const [cardsForm, setCardsForm] = useState<ICardForm[]>([]);
 
-  addCardForm = (card: ICardForm): void => {
-    const newCard = this.createCard(card);
+  const addCardForm = (card: ICardForm): void => {
+    const newCard = createCard(card);
 
-    this.setState(({ cardsForm }) => {
-      const newArr = [...cardsForm];
+    setCardsForm((prevCardsForm) => {
+      const newArr = [...prevCardsForm];
       newArr.push(newCard);
 
-      return {
-        cardsForm: newArr,
-      };
+      return newArr;
     });
   };
 
-  createCard(cardData: ICardForm) {
+  const createCard = (cardData: ICardForm) => {
     const { userName, gender, birthday, country, isConsentPersonalData, feedbackText, imageSrc } = cardData;
 
     return {
@@ -42,19 +32,17 @@ export default class FormPage extends Component<FormPageProps, FormPageState> {
       isConsentPersonalData,
       feedbackText,
       imageSrc,
-      id: this.cardId++,
+      id: cardId++,
     };
-  }
-
-  render() {
-    const { cardsForm } = this.state;
-
-    return (
-      <div className='form-page container' role='form-page'>
-        <h2 className='page__title'>Form page</h2>
-        <Form addCardForm={this.addCardForm} />
-        <CardFormList cardsForm={cardsForm} />
-      </div>
-    );
-  }
-}
+  };
+
+  return (
+    <div className='form-page container' role='form-page'>
+      <h2 className='page__title'>Form page</h2>
+      <Form addCardForm={addCardForm} />
+      <CardFormList cardsForm={cardsForm} />
+    </div>
+  );
+};
+
+export default FormPage;

From 734bdd3c58bb5c37e8e8b271a7d38dee86d8851e Mon Sep 17 00:00:00 2001
From: avshir <av.shirinskaya@gmail.com>
Date: Wed, 5 Apr 2023 00:28:31 +0200
Subject: [PATCH 13/13] fix: update test for Form component

---
 src/components/form/form.test.tsx | 2 +-
 src/components/form/form.tsx      | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/form/form.test.tsx b/src/components/form/form.test.tsx
index 167495b..cd4e2fd 100644
--- a/src/components/form/form.test.tsx
+++ b/src/components/form/form.test.tsx
@@ -101,7 +101,7 @@ describe('test Form component', () => {
         }}
       />
     );
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByRole('textarea')).toBeInTheDocument();
   });
 
   test('should contain 1 input type="checkbox" name="agree-consent-data"', () => {
diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
index 344e095..3a5757c 100644
--- a/src/components/form/form.tsx
+++ b/src/components/form/form.tsx
@@ -25,7 +25,7 @@ const Form: FC<FormProps> = (props: FormProps) => {
     handleSubmit,
     formState: { errors },
     reset,
-  } = useForm<FormValues>();
+  } = useForm<FormValues>({ mode: 'onSubmit' });
 
   const [success, setSuccess] = useState('');
 
@@ -137,6 +137,7 @@ const Form: FC<FormProps> = (props: FormProps) => {
           Your feedback
         </label>
         <textarea
+          role='textarea'
           className='form__input form__textarea'
           {...register('feedbackText', { required: true, minLength: 5, maxLength: 50 })}
         ></textarea>