Created Genre, Playlists, Search Pages

packages/nextjs/pages/genre/[category].tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import { customGet } from "../../utils/beat-bridge/customGet";
+import { isAuthenticated } from "../../utils/beat-bridge/isAuthenticated";
+import { GetServerSideProps } from "next";
+import { getSession } from "next-auth/react";
+import DashboardLayout from "~~/components/dashboard/DashboardLayout";
+import Heading from "~~/components/spotify/Heading";
+import Layout from "~~/components/spotify/Layout";
+import PlaylistList from "~~/components/spotify/PlaylistList";
+import { MySession } from "~~/types/session";
+import { PlaylistType } from "~~/types/spotify";
+
+interface IProps {
+  categoryName?: string;
+  playlists: {
+    items: PlaylistType[];
+  };
+}
+
+export default function CategoryPlaylists({ categoryName, playlists }: IProps) {
+  const [capitalizedCategory, setCapitalizedCategory] = useState("");
+
+  useEffect(() => {
+    if (categoryName) {
+      const afterName = categoryName
+        .split(" ")
+        .map(i => i[0].toUpperCase() + i.slice(1))
+        .join(" ");
+      setCapitalizedCategory(afterName);
+    }
+  }, [categoryName]);
+
+  return (
+    <DashboardLayout>
+      <Layout title={`Spotify - ${capitalizedCategory}`}>
+        <Heading text={categoryName || ""} className="capitalize" />
+        <PlaylistList playlists={playlists?.items} />
+      </Layout>
+    </DashboardLayout>
+  );
+}
+
+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 categoryId = ctx.params?.category;
+  const category = await customGet(`https://api.spotify.com/v1/browse/categories/${categoryId}`, session);
+  const playlists = await customGet(
+    `https://api.spotify.com/v1/browse/categories/${categoryId}/playlists?limit=50`,
+    session,
+  );
+
+  const categoryName = category.name?.toString().split("_").join(" ") || "";
+
+  console.log(playlists.playlists);
+  return { props: { categoryName, playlists: playlists.playlists } };
+};

packages/nextjs/pages/playlists/[playlistId].tsx

@@ -0,0 +1,87 @@
+import Layout from "../../components/spotify/Layout";
+import TracksTable from "../../components/spotify/TracksTable";
+import { PlaylistType } from "../../types/spotify";
+import { customGet } from "../../utils/beat-bridge/customGet";
+import { isAuthenticated } from "../../utils/beat-bridge/isAuthenticated";
+import parse from "html-react-parser";
+import { GetServerSideProps } from "next";
+import { getSession } from "next-auth/react";
+import { RiMusic2Fill } from "react-icons/ri";
+import DashboardLayout from "~~/components/dashboard/DashboardLayout";
+import { MySession } from "~~/types/session";
+
+interface IProps {
+  playlist: PlaylistType;
+}
+
+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>
+
+                <p className="w-full text-xs leading-5">{parse(playlist.description || "")}</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>
+              </div>
+            </>
+          )}
+        </div>
+
+        <div className="mt-5">
+          <TracksTable
+            tracks={
+              playlist?.tracks?.items
+                ? playlist.tracks.items.filter(item => item.track !== null).map(item => item.track)
+                : []
+            }
+          />
+        </div>
+      </Layout>
+    </DashboardLayout>
+  );
+}
+
+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 playlistId = ctx.params?.playlistId;
+  const playlist = await customGet(`https://api.spotify.com/v1/playlists/${playlistId}`, session);
+
+  return { props: { playlist: playlist } };
+};

packages/nextjs/pages/playlists/index.tsx

@@ -0,0 +1,42 @@
+import { GetServerSideProps } from "next";
+import { getSession } from "next-auth/react";
+import DashboardLayout from "~~/components/dashboard/DashboardLayout";
+import Heading from "~~/components/spotify/Heading";
+import Layout from "~~/components/spotify/Layout";
+import PlaylistList from "~~/components/spotify/PlaylistList";
+import { MySession } from "~~/types/session";
+import { PlaylistType } from "~~/types/spotify";
+import { customGet } from "~~/utils/beat-bridge/customGet";
+import { isAuthenticated } from "~~/utils/beat-bridge/isAuthenticated";
+
+interface IProps {
+  userPlaylist: PlaylistType[];
+}
+
+export default function FollowedArtists({ userPlaylist }: IProps) {
+  return (
+    <DashboardLayout>
+      <Layout title="Beat Bridge - Your Playlist">
+        <Heading text="Your Playlist" />
+        <PlaylistList playlists={userPlaylist} />
+      </Layout>
+    </DashboardLayout>
+  );
+}
+
+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 userPlaylist = await customGet(`https://api.spotify.com/v1/me/playlists?limit=50`, session);
+
+  return { props: { userPlaylist: userPlaylist.items } };
+};

packages/nextjs/pages/search/[query]/index.tsx

@@ -1,6 +1,5 @@
 import { Fragment } from "react";
 import Link from "next/link";
-import { useSpotify } from "../../../context/SpotifyContext";
 import { GetServerSideProps } from "next";
 import { getSession } from "next-auth/react";
 import DashboardLayout from "~~/components/dashboard/DashboardLayout";
@@ -9,6 +8,7 @@ import ArtistList from "~~/components/spotify/ArtistList";
 import Heading from "~~/components/spotify/Heading";
 import Layout from "~~/components/spotify/Layout";
 import PlaylistList from "~~/components/spotify/PlaylistList";
+import { useSpotify } from "~~/context/SpotifyContext";
 import { MySession } from "~~/types/session";
 import { SearchResults, Track } from "~~/types/spotify";
 import { customGet } from "~~/utils/beat-bridge/customGet";

packages/nextjs/pages/search/index.tsx

@@ -54,6 +54,7 @@ export const getServerSideProps: GetServerSideProps = async ctx => {
     };
   }
 
-  const categories = await customGet("https://api.spotify.com/v1/browse/categories?limit=50&country=IN", session);
+  // const country = ctx.req.headers.get("cf-ipcountry") ?? "";
+  const categories = await customGet("https://api.spotify.com/v1/browse/categories?limit=50&country=NG", session);
   return { props: { categories } };
 };

packages/nextjs/types/spotify.ts

@@ -40,7 +40,7 @@ export interface PlaylistType {
   description?: string;
   id: string;
   followers?: {
-    total?: number;
+    total: number;
   };
   images?: [Image];
   name: string;