From a50c4a001462be435cce504938a29dbd8e3ab081 Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <60105594+oluwatobiss@users.noreply.github.com>
Date: Tue, 9 Jan 2024 17:10:11 +0100
Subject: [PATCH] feat: make users provide a rating

BREAKING CHANGE: This commit breaks compatibility with the previous version
---
 src/components/TweetButton.test.tsx |  2 +-
 src/components/TweetButton.tsx      | 37 +++++++++++++++++++++++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/components/TweetButton.test.tsx b/src/components/TweetButton.test.tsx
index bb91c5b..7c57fce 100644
--- a/src/components/TweetButton.test.tsx
+++ b/src/components/TweetButton.test.tsx
@@ -4,5 +4,5 @@ import { test } from "@jest/globals";
 import { TweetButton } from "./TweetButton";
 
 test("tweet button renders correctly", () => {
-  render(<TweetButton />);
+  render(<TweetButton rating={35} />);
 });
diff --git a/src/components/TweetButton.tsx b/src/components/TweetButton.tsx
index b620f08..a9f8087 100644
--- a/src/components/TweetButton.tsx
+++ b/src/components/TweetButton.tsx
@@ -3,6 +3,17 @@ import "../index.css";
 
 interface TweetButtonPropsType {
   number?: number;
+  rating: number;
+}
+
+function generateStarIcons(rating: number) {
+  const megaStars = `⭐⭐⭐⭐⭐ x ${Math.round(rating / 5)}`;
+  let stars = "";
+
+  for (let i = 0; i < rating; i++) {
+    stars += "⭐";
+  }
+  return rating > 10 ? megaStars : stars;
 }
 
 export function TweetButton(props: TweetButtonPropsType) {
@@ -10,13 +21,35 @@ export function TweetButton(props: TweetButtonPropsType) {
     props.number && props.number > 1 ? props.number : "an"
   }+NPM+${
     props.number && props.number > 1 ? "packages" : "package"
-  }.%0A%0ACreating%20NPM%20Package:%20React%20TypeScript%20Guide%0A%0Ahttps%3A%2F%2Famzn.to/3R1M0XU`;
+  }.%0A%0ABook's+Rating:+${props.rating}-star+rating!+${generateStarIcons(
+    props.rating
+  )}+%0A%0ACreating%20NPM%20Package:%20React%20TypeScript%20Guide%0A%0Ahttps%3A%2F%2Famzn.to/3R1M0XU`;
 
-  return (
+  return props.rating ? (
     <section className="tweet-btn-container">
       <a className="tweet-button" href={tweetURL} target="_blank">
         Send a thank you tweet
       </a>
     </section>
+  ) : (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        marginTop: "30px",
+      }}
+    >
+      <p
+        style={{
+          backgroundColor: "#DC3545",
+          color: "#fff",
+          width: "35%",
+          borderRadius: "5px",
+          padding: "15px 20px",
+        }}
+      >
+        ⓘ Error: Props 'rating' is missing in 'TweetButtonPropsType'.
+      </p>
+    </div>
   );
 }