From e2278495e03a620482c9ded1de83e2bcd253a166 Mon Sep 17 00:00:00 2001
From: Simon <simonorugbo15@gmail.com>
Date: Wed, 20 Dec 2023 20:46:02 +0100
Subject: [PATCH 1/3] added stats

---
 packages/nextjs/pages/artist/[artistId].tsx   | 33 +++++-----
 packages/nextjs/pages/dashboard/overview.tsx  | 65 +++++++++++++++++++
 packages/nextjs/pages/login.tsx               |  2 +-
 .../nextjs/pages/playlists/[playlistId].tsx   |  2 +-
 4 files changed, 82 insertions(+), 20 deletions(-)
 create mode 100644 packages/nextjs/pages/dashboard/overview.tsx

diff --git a/packages/nextjs/pages/artist/[artistId].tsx b/packages/nextjs/pages/artist/[artistId].tsx
index d46faee..ee4b4c5 100644
--- a/packages/nextjs/pages/artist/[artistId].tsx
+++ b/packages/nextjs/pages/artist/[artistId].tsx
@@ -88,24 +88,21 @@ export default function SingleArtist({
                 </div>
               </div>
 
-              <div>
-                <button
-                  className={`bg-lightgreen text-black px-8 py-2 rounded bg-[#9DFF94] text-sm font-bold ${
-                    userFollowsArtist ? "hidden" : ""
-                  }`}
-                >
-                  Follow
-                </button>
-              </div>
-              <div>
-                <button
-                  className={`bg-lightgreen text-black px-8 py-2 rounded bg-[#9DFF94] text-sm font-bold ${
-                    userFollowsArtist ? "" : "hidden"
-                  }`}
-                >
-                  Unfollow
-                </button>
-              </div>
+              <button
+                className={`bg-lightgreen text-black px-8 py-2 rounded bg-[#9DFF94] text-sm font-bold ${
+                  userFollowsArtist ? "hidden" : ""
+                }`}
+              >
+                Follow
+              </button>
+
+              <button
+                className={`bg-lightgreen text-black px-8 py-2 rounded bg-[#9DFF94] text-sm font-bold ${
+                  userFollowsArtist ? "" : "hidden"
+                }`}
+              >
+                Unfollow
+              </button>
             </div>
 
             <div className="text-center py-8">
diff --git a/packages/nextjs/pages/dashboard/overview.tsx b/packages/nextjs/pages/dashboard/overview.tsx
new file mode 100644
index 0000000..1262734
--- /dev/null
+++ b/packages/nextjs/pages/dashboard/overview.tsx
@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { GetServerSideProps } from "next";
+import { getSession } from "next-auth/react";
+import DashboardLayout from "~~/components/dashboard/DashboardLayout";
+import ArtistList from "~~/components/spotify/ArtistList";
+import Heading from "~~/components/spotify/Heading";
+import Layout from "~~/components/spotify/Layout";
+import { MySession } from "~~/types/session";
+import { Artist } from "~~/types/spotify";
+import { customGet } from "~~/utils/beat-bridge/customGet";
+import { isAuthenticated } from "~~/utils/beat-bridge/isAuthenticated";
+
+interface IProps {
+  topArtists: Artist[];
+}
+
+export default function FollowedArtists({ topArtists }: IProps) {
+  const [timeRange, setTimeRange] = useState("short_term");
+
+  return (
+    <Layout title="Beat Bridge - Your Library">
+      <DashboardLayout>
+        <Heading text="Your Artists" />
+        <select
+          name="time-range"
+          onChange={e => setTimeRange(e.target.value)}
+          className="mx-2 pr-1 bg-transparent border-none rounded cursor-pointer text-base p-2 "
+        >
+          <option className="text-black" value="short_term">
+            the last 4 weeks
+          </option>
+          <option className="text-black" value="medium_term">
+            the last 6 months
+          </option>
+          <option className="text-black" value="long_term">
+            all time
+          </option>
+        </select>
+        <ArtistList artists={topArtists} />
+      </DashboardLayout>
+    </Layout>
+  );
+}
+
+export const getServerSideProps: GetServerSideProps = async ctx => {
+  const session = (await getSession(ctx)) as MySession | null;
+
+  if (!(await isAuthenticated(session))) {
+    return {
+      redirect: {
+        destination: "/login",
+        permanent: false,
+      },
+    };
+  }
+
+  const timeRange = ctx.query.time_range || "short_term";
+
+  const topArtists = await customGet(
+    `https://api.spotify.com/v1/me/top/artists?time_range=${timeRange}&limit=50`,
+    session,
+  );
+
+  return { props: { topArtists: topArtists.items } };
+};
diff --git a/packages/nextjs/pages/login.tsx b/packages/nextjs/pages/login.tsx
index cf1003a..ce2feec 100644
--- a/packages/nextjs/pages/login.tsx
+++ b/packages/nextjs/pages/login.tsx
@@ -11,7 +11,7 @@ export default function Login() {
       style={{ backgroundImage: `url("/assets/bg.png")`, backgroundColor: "#00011e" }}
     >
       <button className="bg-[#9DFF94] py-4 px-8 font-bold rounded-full text-black" onClick={handleLogin}>
-        Login to Spotify
+        Login with Spotify
       </button>
     </div>
   );
diff --git a/packages/nextjs/pages/playlists/[playlistId].tsx b/packages/nextjs/pages/playlists/[playlistId].tsx
index f6ac2ab..96e5d01 100644
--- a/packages/nextjs/pages/playlists/[playlistId].tsx
+++ b/packages/nextjs/pages/playlists/[playlistId].tsx
@@ -32,7 +32,7 @@ export default function Playlist({ playlist }: IProps) {
                 <h5 className="text-xs font-bold uppercase">{playlist.type}</h5>
                 <h2 className="text-5xl font-bold">{playlist.name}</h2>
 
-                <p className="w-full text-xs leading-5">{parse(playlist.description || "")}</p>
+                <p className="w-full text-xs leading-5">{parse(playlist.description || "Playlist")}</p>
 
                 <div className="flex items-center gap-5 text-sm">
                   <span className="font-bold">{playlist.owner?.display_name}</span>

From 84ad6e9669e19b5d10078c5e40cca79fd01994c6 Mon Sep 17 00:00:00 2001
From: Simon <simonorugbo15@gmail.com>
Date: Wed, 20 Dec 2023 20:47:03 +0100
Subject: [PATCH 2/3] fixed typo

---
 packages/nextjs/pages/dashboard/overview.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/nextjs/pages/dashboard/overview.tsx b/packages/nextjs/pages/dashboard/overview.tsx
index 1262734..708a074 100644
--- a/packages/nextjs/pages/dashboard/overview.tsx
+++ b/packages/nextjs/pages/dashboard/overview.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { GetServerSideProps } from "next";
 import { getSession } from "next-auth/react";
 import DashboardLayout from "~~/components/dashboard/DashboardLayout";
@@ -15,15 +14,13 @@ interface IProps {
 }
 
 export default function FollowedArtists({ topArtists }: IProps) {
-  const [timeRange, setTimeRange] = useState("short_term");
-
   return (
     <Layout title="Beat Bridge - Your Library">
       <DashboardLayout>
         <Heading text="Your Artists" />
         <select
           name="time-range"
-          onChange={e => setTimeRange(e.target.value)}
+          onChange={e => e.target.value}
           className="mx-2 pr-1 bg-transparent border-none rounded cursor-pointer text-base p-2 "
         >
           <option className="text-black" value="short_term">

From b722cd49669c809ca2a15c3ad4499c131e8732ca Mon Sep 17 00:00:00 2001
From: Simon <simonorugbo15@gmail.com>
Date: Thu, 21 Dec 2023 13:19:45 +0100
Subject: [PATCH 3/3] added mint button

---
 packages/nextjs/components/ClaimNft.tsx       |  9 +-
 .../nextjs/components/spotify/CardItem.tsx    |  2 +-
 packages/nextjs/pages/artist/[artistId].tsx   |  4 +-
 .../nextjs/pages/playlists/[playlistId].tsx   | 88 ++++++++++---------
 packages/nextjs/pages/wrapped/index.tsx       | 43 ++++++---
 5 files changed, 88 insertions(+), 58 deletions(-)

diff --git a/packages/nextjs/components/ClaimNft.tsx b/packages/nextjs/components/ClaimNft.tsx
index cc4980f..1cfd1f6 100644
--- a/packages/nextjs/components/ClaimNft.tsx
+++ b/packages/nextjs/components/ClaimNft.tsx
@@ -47,7 +47,7 @@ const ClaimNFT: React.FC = () => {
 
   return (
     <div className="flex justify-center">
-      <div className="w-full max-w-screen-lg rounded-lg bg-black">
+      <div className="w-full max-w-screen-lg rounded-lg bg-[#00000090]">
         {tasks.map((task, index) => (
           <div key={index} className=" p-6 px-6 flex items-center  justify-between gap-12">
             <h3 className="w-[20%] font-bold uppercase">{task.name}</h3>
@@ -59,7 +59,7 @@ const ClaimNFT: React.FC = () => {
           </div>
         ))}
       </div>
-
+      f
       {selectedTask && (
         <div
           className={`fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 ${
@@ -68,12 +68,11 @@ const ClaimNFT: React.FC = () => {
         >
           <div className="bg-[#1A1D1F] p-32 min-w-lg mx-auto rounded-lg text-center">
             <h3 className="text-2xl">Congratulations!</h3>
+            <button onClick={closeModal}>Close</button>
             <img src={selectedTask.imageUrl} alt={selectedTask.name} className="w-64 h-64 object-contain mb-4" />
 
             <h3 className="text-2xl font-bold mb-4">{selectedTask.name}</h3>
-            <button className="bg-[#9DFF94] text-black px-8 py-2" onClick={closeModal}>
-              Mint
-            </button>
+            <button className="bg-[#9DFF94] text-black px-8 py-2">Mint</button>
           </div>
         </div>
       )}
diff --git a/packages/nextjs/components/spotify/CardItem.tsx b/packages/nextjs/components/spotify/CardItem.tsx
index a0a58ca..f7cb74d 100644
--- a/packages/nextjs/components/spotify/CardItem.tsx
+++ b/packages/nextjs/components/spotify/CardItem.tsx
@@ -22,7 +22,7 @@ export default function CardItem({
 }: IProps) {
   return (
     <Link href={`/${type}/${id}`} passHref>
-      <div className="transition duration-300 p-3 rounded cursor-pointer hover:bg-[#282828] bg-paper border-2 border-[#ffffff50]">
+      <div className="transition duration-300 p-3 rounded cursor-pointer hover:bg-[#282828] bg-[#00000090] border-2 border-[#ffffff30]">
         {images.length > 0 ? (
           <img
             src={images[0].url}
diff --git a/packages/nextjs/pages/artist/[artistId].tsx b/packages/nextjs/pages/artist/[artistId].tsx
index ee4b4c5..44e5335 100644
--- a/packages/nextjs/pages/artist/[artistId].tsx
+++ b/packages/nextjs/pages/artist/[artistId].tsx
@@ -196,8 +196,8 @@ export default function SingleArtist({
         )}
 
         {relatedArtists?.artists.length > 0 && (
-          <div className="mt-12">
-            <Heading text="Fans also like" />
+          <div className="mt-12 bg-[#00011e] rounded-lg p-12">
+            <Heading text="Similar Artists" />
             <ArtistList artists={relatedArtists.artists} />
           </div>
         )}
diff --git a/packages/nextjs/pages/playlists/[playlistId].tsx b/packages/nextjs/pages/playlists/[playlistId].tsx
index 96e5d01..85915f9 100644
--- a/packages/nextjs/pages/playlists/[playlistId].tsx
+++ b/packages/nextjs/pages/playlists/[playlistId].tsx
@@ -18,50 +18,58 @@ export default function Playlist({ playlist }: IProps) {
   return (
     <DashboardLayout>
       <Layout title={`Beat Bridge - ${playlist?.name}`}>
-        <div className="flex items-end gap-6">
-          {playlist && (
-            <>
-              {playlist.images && playlist.images?.length > 0 ? (
-                <img src={playlist.images[0].url || ""} alt={playlist.name} className="object-contain w-60 h-60 " />
-              ) : (
-                <div className="w-full h-40">
-                  <RiMusic2Fill className="w-full h-full bg-paper " />
-                </div>
-              )}
-              <div className="flex flex-col gap-3">
-                <h5 className="text-xs font-bold uppercase">{playlist.type}</h5>
-                <h2 className="text-5xl font-bold">{playlist.name}</h2>
+        <div className="bg-[#00011e] rounded-lg p-6 md:p-12">
+          <div className="flex items-end gap-6">
+            {playlist && (
+              <>
+                {playlist.images && playlist.images?.length > 0 ? (
+                  <img
+                    src={playlist.images[0].url || ""}
+                    alt={playlist.name}
+                    className="object-contain w-60 h-60 rounded-lg "
+                  />
+                ) : (
+                  <div className="w-full h-40">
+                    <RiMusic2Fill className="w-full h-full bg-paper " />
+                  </div>
+                )}
+                <div className="flex flex-col gap-3">
+                  <h5 className="text-xs font-bold uppercase">{playlist.type}</h5>
+                  <h2 className="text-5xl font-bold">{playlist.name}</h2>
 
-                <p className="w-full text-xs leading-5">{parse(playlist.description || "Playlist")}</p>
+                  <p className="w-full text-xs leading-5">{parse(playlist.description || "Playlist")}</p>
 
-                <div className="flex items-center gap-5 text-sm">
-                  <span className="font-bold">{playlist.owner?.display_name}</span>
-                  {playlist?.followers?.total ? (
-                    playlist?.followers?.total > 0 && (
-                      <span className="text-gray">
-                        {playlist.followers?.total.toLocaleString()} {playlist.followers?.total > 1 ? "likes" : "like"}
-                      </span>
-                    )
-                  ) : (
-                    <span className="text-gray">0 likes</span>
-                  )}
-                  {playlist?.tracks?.items && playlist?.tracks?.items?.length > 0 && (
-                    <span className="text-gray">{playlist.tracks.total.toLocaleString()} songs</span>
-                  )}{" "}
+                  <div className="flex items-center gap-5 text-sm">
+                    <span className="font-bold">{playlist.owner?.display_name}</span>
+                    {playlist?.followers?.total ? (
+                      playlist?.followers?.total > 0 && (
+                        <span className="text-gray">
+                          {playlist.followers?.total.toLocaleString()}{" "}
+                          {playlist.followers?.total > 1 ? "likes" : "like"}
+                        </span>
+                      )
+                    ) : (
+                      <span className="text-gray">0 likes</span>
+                    )}
+                    {playlist?.tracks?.items && playlist?.tracks?.items?.length > 0 && (
+                      <span className="text-gray">{playlist.tracks.total.toLocaleString()} songs</span>
+                    )}
+                  </div>
+                  <button className="bg-[#9DFF94] text-black px-8 py-2 rounded-full">Mint</button>
                 </div>
-              </div>
-            </>
-          )}
-        </div>
+              </>
+            )}
+          </div>
 
-        <div className="mt-5">
-          <TracksTable
-            tracks={
-              playlist?.tracks?.items
-                ? playlist.tracks.items.filter(item => item.track !== null).map(item => item.track)
-                : []
-            }
-          />
+          <div className="mt-5">
+            <TracksTable
+              tracks={
+                playlist?.tracks?.items
+                  ? playlist.tracks.items.filter(item => item.track !== null).map(item => item.track)
+                  : []
+              }
+            />
+          </div>
         </div>
       </Layout>
     </DashboardLayout>
diff --git a/packages/nextjs/pages/wrapped/index.tsx b/packages/nextjs/pages/wrapped/index.tsx
index f47d719..0f06149 100644
--- a/packages/nextjs/pages/wrapped/index.tsx
+++ b/packages/nextjs/pages/wrapped/index.tsx
@@ -1,24 +1,41 @@
 import { GetServerSideProps } from "next";
 import { getSession } from "next-auth/react";
 import DashboardLayout from "~~/components/dashboard/DashboardLayout";
+import ArtistList from "~~/components/spotify/ArtistList";
 import Heading from "~~/components/spotify/Heading";
 import Layout from "~~/components/spotify/Layout";
 import { MySession } from "~~/types/session";
-import { PlaylistType } from "~~/types/spotify";
+import { Artist } from "~~/types/spotify";
+import { customGet } from "~~/utils/beat-bridge/customGet";
 import { isAuthenticated } from "~~/utils/beat-bridge/isAuthenticated";
 
 interface IProps {
-  userPlaylist: PlaylistType[];
+  topArtists: Artist[];
 }
 
-export default function FollowedArtists({ userPlaylist }: IProps) {
-  console.log(userPlaylist);
+export default function ToArtists({ topArtists }: IProps) {
   return (
-    <DashboardLayout>
-      <Layout title="Beat Bridge - Your Wrapped">
-        <Heading text="Your Wrapped" />
-      </Layout>
-    </DashboardLayout>
+    <Layout title="Beat Bridge - Your Wrapped">
+      <DashboardLayout>
+        <Heading text="Your Artists" />
+        <select
+          name="time-range"
+          onChange={e => e.target.value}
+          className="mx-2 pr-1 bg-transparent border-none rounded cursor-pointer text-base p-2 "
+        >
+          <option className="text-black" value="short_term">
+            the last 4 weeks
+          </option>
+          <option className="text-black" value="medium_term">
+            the last 6 months
+          </option>
+          <option className="text-black" value="long_term">
+            all time
+          </option>
+        </select>
+        <ArtistList artists={topArtists} />
+      </DashboardLayout>
+    </Layout>
   );
 }
 
@@ -33,6 +50,12 @@ export const getServerSideProps: GetServerSideProps = async ctx => {
       },
     };
   }
+  const timeRange = ctx.query.time_range || "long_term";
 
-  return { props: { userPlaylist: [] } };
+  const topArtists = await customGet(
+    `https://api.spotify.com/v1/me/top/artists?time_range=${timeRange}&limit=50`,
+    session,
+  );
+
+  return { props: { topArtists: topArtists.items } };
 };