From 944202a65cd12c010da42f3824874b0cb863dd7a Mon Sep 17 00:00:00 2001
From: beny25585 <binyamin25585@gmail.com>
Date: Wed, 10 Dec 2025 23:21:55 +0200
Subject: [PATCH 1/2] complete task

---
 src/App.tsx                          | 13 ++++-
 src/components/showCard/ShowCard.tsx | 75 +++++++++++++++-------------
 2 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b16f189..091187a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -56,7 +56,18 @@ export default function App() {
 
       <main>
         <div className="shows-grid">
-        {/* TODO - shows.map((show)=>{ return <ShowCard id={show.id} .../> })*/}
+          {shows.map((show) => {
+            return (
+              <ShowCard
+                artist={show.artist}
+                stage={show.stage}
+                day={show.day}
+                hour={show.hour}
+                ticketsLeft={show.ticketsLeft}
+                image={show.image}
+              />
+            );
+          })}
         </div>
       </main>
     </div>
diff --git a/src/components/showCard/ShowCard.tsx b/src/components/showCard/ShowCard.tsx
index 7e18a47..9b8ba5e 100644
--- a/src/components/showCard/ShowCard.tsx
+++ b/src/components/showCard/ShowCard.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export interface ShowCardProps {
   artist: string;
@@ -9,64 +9,67 @@ export interface ShowCardProps {
   image: string;
 }
 
-export default function ShowCard(
-  /* TODO 1: Accept props with ShowCardProps type here */
-) {
-  // TODO 2: Create state called isInterested of type boolean (default false)
-  // const [isInterested, setIsInterested] = ...
+export default function ShowCard(ShowProps: ShowCardProps) {
+  const [isInterested, setisInterested] = useState(false);
+  const [ticketsStatusText, setTicketsStatusText] = useState("");
 
-  // TODO 3: Function that toggles true/false in isInterested
-  // function handleToggleInterested() {}
+  useEffect(() => {
+    handleTicketsStatusText(ShowProps.ticketsLeft);
+  }, []);
 
-  // TODO 4: Create ticketsStatusText (string):
-  // 0 → "SOLD OUT"
-  // 1–30 → "Last tickets – hurry up!"
-  // >30 → "Tickets available"
+  const handleTicketsStatusText = (ticketsLeft: number) => {
+    if (ticketsLeft === 0) {
+      setTicketsStatusText("SOLD OUT");
+    }
 
-  // TODO 5: Create text for interest status based on isInterested:
-  // false → "You haven't added this show yet"
-  // true → "This show is in your interested list 🎟️"
+    if (ticketsLeft > 0 && ticketsLeft <= 30) {
+      setTicketsStatusText("Last tickets hurry up!");
+    }
+
+    if (ticketsLeft > 30) {
+      setTicketsStatusText("Tickets available");
+    }
+  };
+
+  //  Function that toggles true/false in isInterested
+
+  const handleToggleInterested = () => {
+    setisInterested(!isInterested);
+  };
 
   return (
     <article className="show-card">
       <div className="show-image-wrapper">
-        {/* TODO 6: Replace placeholder with real <img> from props */}
-        {/* <img src={image} alt={artist} className="show-image" /> */}
+        <img
+          src={ShowProps.image}
+          alt={ShowProps.artist}
+          className="show-image"
+        />
+
         <div className="show-image-placeholder">Image goes here</div>
       </div>
 
       <header className="show-header">
         <h2 className="show-artist">
-          {/* TODO 7: If isInterested → show ⭐ before artist name */}
-          "Artist name here"
+          {isInterested ? "⭐ " : ""} {ShowProps.artist}
         </h2>
         <p className="show-meta">
-          {/* TODO 8: Display stage, day, hour from props */}
-          "Stage · Day · Hour"
+          {ShowProps.stage}· {ShowProps.day} ·{ShowProps.hour}
         </p>
       </header>
 
       <section className="show-info">
-        <p className="tickets-status">
-          {/* TODO 9: Display the ticketsStatusText */}
-          "Tickets status text"
-        </p>
+        <p className="tickets-status">{ticketsStatusText}</p>
 
         <p className="interested-status">
-          {/* TODO 10: Display the interestedText */}
-          "Interested status text"
+          {isInterested
+            ? "This show is in your interested list 🎟️"
+            : "You haven't added this show yet"}
         </p>
       </section>
 
-      <button
-        className="interested-button"
-        // TODO 11: Connect onClick to handleToggleInterested function
-      >
-        {/* TODO 12: Button text:
-            false → "Mark as interested"
-            true  → "Remove from my list"
-        */}
-        "Button text"
+      <button className="interested-button" onClick={handleToggleInterested}>
+        {isInterested ? "Remove from interested" : "Add to interested"}
       </button>
     </article>
   );

From 34fb31f5373acb1cc47c88c979fafca94f66aab5 Mon Sep 17 00:00:00 2001
From: beny25585 <binyamin25585@gmail.com>
Date: Fri, 12 Dec 2025 12:47:54 +0200
Subject: [PATCH 2/2] cleaner code and added variables

---
 src/App.tsx                          | 11 +---
 src/components/showCard/ShowCard.tsx | 76 ++++++++++++++++------------
 2 files changed, 46 insertions(+), 41 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 091187a..7ebbb9a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -57,16 +57,7 @@ export default function App() {
       <main>
         <div className="shows-grid">
           {shows.map((show) => {
-            return (
-              <ShowCard
-                artist={show.artist}
-                stage={show.stage}
-                day={show.day}
-                hour={show.hour}
-                ticketsLeft={show.ticketsLeft}
-                image={show.image}
-              />
-            );
+            return <ShowCard key={show.id} {...show} />;
           })}
         </div>
       </main>
diff --git a/src/components/showCard/ShowCard.tsx b/src/components/showCard/ShowCard.tsx
index 9b8ba5e..3721fe2 100644
--- a/src/components/showCard/ShowCard.tsx
+++ b/src/components/showCard/ShowCard.tsx
@@ -8,53 +8,67 @@ export interface ShowCardProps {
   ticketsLeft: number;
   image: string;
 }
+const BUTTON_INTERESTED_STATUS = {
+  ADDED: "Add to interested",
+  REMOVE: "Remove from interested",
+};
 
-export default function ShowCard(ShowProps: ShowCardProps) {
-  const [isInterested, setisInterested] = useState(false);
-  const [ticketsStatusText, setTicketsStatusText] = useState("");
-
-  useEffect(() => {
-    handleTicketsStatusText(ShowProps.ticketsLeft);
-  }, []);
+const INTERESTED_STATUS = {
+  ADDED: "This show is in your interested list 🎟️",
+  NOT_ADDED: "You haven't added this show yet",
+};
 
-  const handleTicketsStatusText = (ticketsLeft: number) => {
-    if (ticketsLeft === 0) {
-      setTicketsStatusText("SOLD OUT");
-    }
+const TICKETS_STATUS = {
+  SOLD_OUT: "SOLD OUT",
+  LAST_TICKETS: "Last tickets hurry up!",
+  AVAILABLE: "Tickets available",
+};
 
-    if (ticketsLeft > 0 && ticketsLeft <= 30) {
-      setTicketsStatusText("Last tickets hurry up!");
-    }
+export default function ShowCard({
+  artist,
+  stage,
+  day,
+  hour,
+  ticketsLeft,
+  image,
+}: ShowCardProps) {
+  const [isInterested, setIsInterested] = useState(false);
+  const [ticketsStatusText, setTicketsStatusText] = useState("");
 
-    if (ticketsLeft > 30) {
-      setTicketsStatusText("Tickets available");
-    }
-  };
+  useEffect(() => {
+    const handleTicketsStatusText = (ticketsLeft: number) => {
+      if (ticketsLeft === 0) {
+        setTicketsStatusText(TICKETS_STATUS.SOLD_OUT);
+        return;
+      }
+      if (ticketsLeft > 0 && ticketsLeft <= 30) {
+        setTicketsStatusText(TICKETS_STATUS.LAST_TICKETS);
+        return;
+      }
 
-  //  Function that toggles true/false in isInterested
+      setTicketsStatusText(TICKETS_STATUS.AVAILABLE);
+    };
+    handleTicketsStatusText(ticketsLeft);
+  }, []);
 
   const handleToggleInterested = () => {
-    setisInterested(!isInterested);
+    setIsInterested(!isInterested);
   };
 
   return (
     <article className="show-card">
       <div className="show-image-wrapper">
-        <img
-          src={ShowProps.image}
-          alt={ShowProps.artist}
-          className="show-image"
-        />
+        <img src={image} alt={artist} className="show-image" />
 
         <div className="show-image-placeholder">Image goes here</div>
       </div>
 
       <header className="show-header">
         <h2 className="show-artist">
-          {isInterested ? "⭐ " : ""} {ShowProps.artist}
+          {isInterested ? "⭐ " : ""} {artist}
         </h2>
         <p className="show-meta">
-          {ShowProps.stage}· {ShowProps.day} ·{ShowProps.hour}
+          {stage}· {day} ·{hour}
         </p>
       </header>
 
@@ -62,14 +76,14 @@ export default function ShowCard(ShowProps: ShowCardProps) {
         <p className="tickets-status">{ticketsStatusText}</p>
 
         <p className="interested-status">
-          {isInterested
-            ? "This show is in your interested list 🎟️"
-            : "You haven't added this show yet"}
+          {isInterested ? INTERESTED_STATUS.ADDED : INTERESTED_STATUS.NOT_ADDED}
         </p>
       </section>
 
       <button className="interested-button" onClick={handleToggleInterested}>
-        {isInterested ? "Remove from interested" : "Add to interested"}
+        {isInterested
+          ? BUTTON_INTERESTED_STATUS.REMOVE
+          : BUTTON_INTERESTED_STATUS.ADDED}
       </button>
     </article>
   );