hooks

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",

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;

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;

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;

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;

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;

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();
+  });
+});

src/components/form/form.scss

@@ -79,4 +79,4 @@
 
   font-size: 20px;
   color: $accent2-color;
-}
+}

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
@@ -88,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"', () => {