From e2acbce007b6b27759ec62119b83c8da44f0cab4 Mon Sep 17 00:00:00 2001
From: Anastasiya <arsaidaz10@mts.ru>
Date: Tue, 8 Oct 2024 16:21:35 +0300
Subject: [PATCH] Fix

---
 package-lock.json                      | 10 +++++++
 package.json                           |  1 +
 src/components/card/card.tsx           | 39 +++++++++++---------------
 src/components/main/main.tsx           |  7 +++--
 src/data/cardsData.ts                  |  9 ++++--
 src/{types.ts => lib/types.ts/card.ts} |  5 +++-
 6 files changed, 43 insertions(+), 28 deletions(-)
 rename src/{types.ts => lib/types.ts/card.ts} (70%)

diff --git a/package-lock.json b/package-lock.json
index 5b5ba40..f755ed6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@reduxjs/toolkit": "1.9.5",
         "axios": "0.27.2",
         "classnames": "2.3.2",
+        "clsx": "^2.1.1",
         "history": "5.3.0",
         "http-status-codes": "2.2.0",
         "leaflet": "1.7.1",
@@ -2372,6 +2373,15 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
diff --git a/package.json b/package.json
index 636c8a3..743e34e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@reduxjs/toolkit": "1.9.5",
     "axios": "0.27.2",
     "classnames": "2.3.2",
+    "clsx": "^2.1.1",
     "history": "5.3.0",
     "http-status-codes": "2.2.0",
     "leaflet": "1.7.1",
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 0efdd0f..5246e56 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -1,24 +1,17 @@
-/* eslint-disable arrow-body-style */
+import { SingleCard } from '../../lib/types.ts/card';
+import clsx from 'clsx';
 
-type Props = {
-  isPremium: boolean;
-  imgPath: string;
-  price: number;
-  inBookmarks: boolean;
-  rating: 1 | 2 | 3 | 4 | 5;
-  placeName: string;
-  placeType: string;
-};
+const Card = (card: SingleCard) => {
+  const {
+    isPremium,
+    imgPath,
+    price,
+    inBookmarks,
+    rating,
+    placeName,
+    placeType,
+  } = card;
 
-const Card = ({
-  isPremium,
-  imgPath,
-  price,
-  inBookmarks,
-  rating,
-  placeName,
-  placeType,
-}: Props) => {
   return (
     <article className="cities__card place-card">
       {isPremium ? (
@@ -46,9 +39,11 @@ const Card = ({
             <span className="place-card__price-text">&#47;&nbsp;night</span>
           </div>
           <button
-            className={`place-card__bookmark-button  button ${
-              inBookmarks ? 'place-card__bookmark-button--active' : ''
-            }`}
+            className={clsx(
+              'place-card__bookmark-button',
+              'button',
+              inBookmarks && 'place-card__bookmark-button--active'
+            )}
             type="button"
           >
             <svg className="place-card__bookmark-icon" width="18" height="19">
diff --git a/src/components/main/main.tsx b/src/components/main/main.tsx
index 798301f..93b9d25 100644
--- a/src/components/main/main.tsx
+++ b/src/components/main/main.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable arrow-body-style */
 
-import { cards } from '../../data/cardsData';
+import { CARDS } from '../../data/cardsData';
 import Card from '../card/card';
 
 const Main = () => {
@@ -114,9 +114,10 @@ const Main = () => {
                 </ul>
               </form>
               <div className="cities__places-list places__list tabs__content">
-                {cards.map((card) => (
+                {CARDS.map((card) => (
                   <Card
-                    key={crypto.randomUUID()}
+                    key={card.id}
+                    id={card.id}
                     isPremium={card.isPremium}
                     imgPath={card.imgPath}
                     price={card.price}
diff --git a/src/data/cardsData.ts b/src/data/cardsData.ts
index 6ccd21f..2a9ea67 100644
--- a/src/data/cardsData.ts
+++ b/src/data/cardsData.ts
@@ -1,7 +1,8 @@
-import { SingleCard } from '../types';
+import { SingleCard } from '../lib/types.ts/card';
 
-export const cards: SingleCard[] = [
+export const CARDS: SingleCard[] = [
   {
+    id: 1,
     isPremium: true,
     imgPath: 'img/apartment-01.jpg',
     price: 120,
@@ -11,6 +12,7 @@ export const cards: SingleCard[] = [
     placeType: 'Apartment',
   },
   {
+    id: 2,
     isPremium: false,
     imgPath: 'img/room.jpg',
     price: 80,
@@ -20,6 +22,7 @@ export const cards: SingleCard[] = [
     placeType: 'Private room',
   },
   {
+    id: 3,
     isPremium: false,
     imgPath: 'img/apartment-02.jpg',
     price: 132,
@@ -29,6 +32,7 @@ export const cards: SingleCard[] = [
     placeType: 'Apartment',
   },
   {
+    id: 4,
     isPremium: true,
     imgPath: 'img/apartment-03.jpg',
     price: 180,
@@ -38,6 +42,7 @@ export const cards: SingleCard[] = [
     placeType: 'Apartment',
   },
   {
+    id: 5,
     isPremium: false,
     imgPath: 'img/room.jpg',
     price: 80,
diff --git a/src/types.ts b/src/lib/types.ts/card.ts
similarity index 70%
rename from src/types.ts
rename to src/lib/types.ts/card.ts
index ce411e4..4fc05f2 100644
--- a/src/types.ts
+++ b/src/lib/types.ts/card.ts
@@ -1,9 +1,12 @@
+type Rating = 1 | 2 | 3 | 4 | 5;
+
 export type SingleCard = {
+  id: number;
   isPremium: boolean;
   imgPath: string;
   price: number;
   inBookmarks: boolean;
-  rating: 1 | 2 | 3 | 4 | 5;
+  rating: Rating;
   placeName: string;
   placeType: string;
 };