fix: Spotify Creation of Playlist bug (#39)

* Fix Spotify Creation of Playlist bug  (#38)

* =added prisma

* feat: update Spotify API import style and add Prisma dependencies

- Changed single quotes to double quotes in `spotifyApi.ts`.
- Added Prisma dependencies in `package-lock.json` and `package.json`.
- Created initial migration for `users` table in PostgreSQL.
- Updated Prisma schema to reflect new `User` model and changed database URL environment variable.
- Modified `dev` script in `package.json` to include Node.js inspector.

* fix: update build script to include Prisma generation

* fix: Handle Spotify API authentication on the server

* fix: Update playlist creation with descriptive names

* fix: Ensure displayName is non-nullable in user upsert and make playlist type optional

* fix: Add postinstall script to ensure Prisma generation after installation

* fix: Update postinstall script to disable Prisma engine during generation

* revert old code

* Apply suggestions from code review

---------

Co-authored-by: Dunsin <[email protected]>

* fix: update .env.sample to streamline database configuration

* fix: simplify dev script in package.json and format pnpm-workspace.yaml

---------

Co-authored-by: Divine Amunega <[email protected]>

Author: Dun-sin

.env.sample

@@ -1,15 +1,10 @@
 # Get the Gemini API Key => https://aistudio.google.com/app/apikey 
 NEXT_PUBLIC_API_KEY=<Gemini API Key>
 
-# Get the postgres data => https://vercel.com/docs/storage/vercel-postgres/quickstart
-POSTGRES_DATABASE=
-POSTGRES_HOST=
-POSTGRES_PASSWORD=
-POSTGRES_PRISMA_URL=
+# Get the postgres data => https://vercel.com/marketplace/prisma
+DATABASE_URL=
+PRISMA_DATABASE_URL=
 POSTGRES_URL=
-POSTGRES_URL_NON_POOLING=
-POSTGRES_URL_NO_SSL=
-POSTGRES_USER=
 
 REDIRECT_URL=http://localhost:3000
 SECRET_KEY=<Any random string can be used here>

.gitignore

@@ -35,3 +35,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 .vercel
+
+/app/generated/prisma

app/api/auth/route.ts

@@ -1,8 +1,9 @@
-import axios, { AxiosError } from 'axios';
+import axios, { AxiosError } from "axios";
 
-import { NextResponse } from 'next/server';
-import { getUser } from '@/app/lib/spotify';
-import { sql } from '@vercel/postgres';
+import { NextResponse } from "next/server";
+import { getUser } from "@/app/lib/spotify";
+import { sql } from "@vercel/postgres";
+import prisma from "@/app/lib/prisma";
 
 const redirect_uri = process.env.REDIRECT_URL;
 const client_id = process.env.SPOTIFY_CLIENT_ID;
@@ -11,44 +12,51 @@ const client_secret = process.env.SPOTIFY_CLIENT_SECRET;
 export async function POST(req: Request) {
 	const res = await req.json();
 	const code = res.code;
-
 	if (!code) {
-		return Response.json({ error: 'Invalid request' }, { status: 400 });
+		return Response.json({ error: "Invalid request" }, { status: 400 });
 	}
 
 	try {
 		const response = await axios.post(
-			'https://accounts.spotify.com/api/token',
+			"https://accounts.spotify.com/api/token",
 			{
-				grant_type: 'authorization_code',
+				grant_type: "authorization_code",
 				code,
 				redirect_uri,
 			},
 			{
 				headers: {
 					Authorization:
-						'Basic ' +
-						Buffer.from(client_id + ':' + client_secret).toString('base64'),
-					'content-Type': 'application/x-www-form-urlencoded',
+						"Basic " +
+						Buffer.from(client_id + ":" + client_secret).toString("base64"),
+					"content-Type": "application/x-www-form-urlencoded",
 				},
-			},
+			}
 		);
 
+
 		const { access_token, refresh_token, expires_in } = response.data;
 		const user = await getUser(access_token);
 
-		if (user)
-			sql`
-        INSERT INTO users (display_name, user_id, profile_image_url)
-        VALUES (${user.display_name}, ${user.user_id}, ${user.profile_image_url})
-        ON CONFLICT (user_id) DO NOTHING;  -- Avoid duplicates
-    `;
+		if (user) {
+			const prismaUser = await prisma.user.upsert({
+				where: { userId: user.user_id },
+				create: {
+					displayName: user.display_name!,
+					userId: user.user_id,
+					profileImageUrl: user.profile_image_url,
+				},
+				update: {},
+			});
+		}
+
 
 		return NextResponse.json(
 			{ expires_in, refresh_token, access_token, user },
-			{ status: 200 },
+			{ status: 200 }
 		);
 	} catch (error) {
+		console.log(error);
 		error = error as AxiosError;
 		return NextResponse.json({ error }, { status: 400 });
 	}

app/api/users/[userId]/history/route.ts

@@ -1,29 +1,29 @@
-import { addUserHistory, getUserHistory } from '@/app/lib/db';
+import { addUserHistory, getUserHistory } from "@/app/lib/db";
 
-import { NextResponse } from 'next/server';
+import { NextResponse } from "next/server";
 
 export async function PUT(
 	req: Request,
-	{ params }: { params: { userId: string } },
+	{ params }: { params: { userId: string } }
 ) {
 	const res = await req.json();
 	const { artists } = res;
 
 	const { userId } = params;
 
 	if (!artists || !userId) {
-		return Response.json({ error: 'Invalid request' }, { status: 400 });
+		return Response.json({ error: "Invalid request" }, { status: 400 });
 	}
 
 	try {
 		const response = await addUserHistory(userId, artists);
 
-		if (response.message === 'success') {
+		if (response.message === "success") {
 			return NextResponse.json({ status: 200 });
 		} else {
 			return NextResponse.json(
 				{ message: `Could not update user history` },
-				{ status: 400 },
+				{ status: 400 }
 			);
 		}
 	} catch (error) {
@@ -33,19 +33,16 @@ export async function PUT(
 
 export async function GET(
 	req: Request,
-	{ params }: { params: { userId: string } },
+	{ params }: { params: { userId: string } }
 ) {
 	const { userId } = params;
 
 	if (!userId) {
-		return Response.json({ error: 'Invalid request' }, { status: 400 });
+		return Response.json({ error: "Invalid request" }, { status: 400 });
 	}
 	try {
 		const response = await getUserHistory(userId);
-		return NextResponse.json(
-			{ message: response?.rows[0]?.history },
-			{ status: 200 },
-		);
+		return NextResponse.json({ message: response }, { status: 200 });
 	} catch (error) {
 		return NextResponse.json({ error }, { status: 400 });
 	}

app/components/DiscoverTracks/SubmitButtion.tsx

@@ -87,10 +87,11 @@ const SubmitButtion = () => {
 			const tracks = await getAllTracks(albums as string[], 1);
 
 			setLoadingMessage('Creating The PlayList');
+			const playlistName = `Similar to ${artists.join(', ')}`;
 			const playlistInfo = await Promise.resolve(
 				createPlayList(
-					finalList.slice(0, -1).join(', ') + ' and ' + finalList.slice(-1),
-					'new',
+					playlistName,
+					'Created by HearItFresh',
 				),
 			);
 

app/components/History/index.tsx

@@ -6,6 +6,7 @@ import HistoryCard from './HistoryCard';
 import axios from 'axios';
 import { useAuth } from '@/app/context/authContext';
 import { useHistory } from '@/app/context/HistoryContext';
+import { getUser } from '@/app/lib/spotify';
 
 const History = () => {
 	const { user, logOut } = useAuth();

app/components/TopTracks/SubmitButton.tsx

@@ -42,11 +42,9 @@ const SubmitButton = () => {
 			const tracks = await getAllTracks(albums, maxTracksPerAlbum);
 
 			setLoadingMessage('Creating The PlayList');
+			const playlistName = `Top Tracks from ${artists.join(', ')}`;
 			const playlistInfo = await Promise.resolve(
-				createPlayList(
-					artists.slice(0, -1).join(', ') + ' and ' + artists.slice(-1),
-					'old',
-				),
+				createPlayList(playlistName, 'Created by HearItFresh'),
 			);
 
 			if ('isError' in playlistInfo) {

app/lib/db/index.ts

@@ -1,6 +1,7 @@
-'use server';
+"use server";
 
-import { sql } from '@vercel/postgres';
+import { sql } from "@vercel/postgres";
+import prisma from "../prisma";
 
 export interface HistoryEntry {
 	text: string;
@@ -9,7 +10,7 @@ export interface HistoryEntry {
 
 export async function addUserHistory(
 	userId: string,
-	artists: string,
+	artists: string
 ): Promise<{ message: string; history: HistoryEntry[] }> {
 	try {
 		const lastUsed = new Date();
@@ -18,79 +19,79 @@ export async function addUserHistory(
 
 		const result = await getUserHistory(userId);
 
-		const currentHistory: HistoryEntry[] = result?.rows[0]?.history || [];
+		let currentHistory: HistoryEntry[] = result ? result : [];
 
 		const artistExists = currentHistory.find(
-			(entry: HistoryEntry) => entry.text === artists,
+			(entry: HistoryEntry) => entry.text === artists
 		);
 
 		if (artistExists) {
 			const updatedHistory = currentHistory.map((entry: HistoryEntry) =>
-				entry.text === artists ? { ...entry, lastUsed: lastUsedString } : entry,
+				entry.text === artists ? { ...entry, lastUsed: lastUsedString } : entry
 			);
 
-			await sql`
-        UPDATE users
-        SET history = ${JSON.stringify(updatedHistory)}::jsonb
-        WHERE user_id = ${userId};
-      `;
-			console.log('Updated existing history entry');
+			await prisma.user.update({
+				where: { userId },
+				data: {
+					history: updatedHistory,
+				},
+			});
+
 		} else {
-			await sql`
-        UPDATE users
-        SET history = history || ${JSON.stringify([newObject])}::jsonb
-        WHERE user_id = ${userId};
-      `;
-			console.log('New history entry added');
+			currentHistory = [...currentHistory, newObject];
+			await prisma.user.update({
+				where: { userId },
+				data: { history: currentHistory },
+			});
 		}
 
 		// Fetch the updated history from the database
 		const updatedResult = await getUserHistory(userId);
-		const updatedHistory: HistoryEntry[] =
-			updatedResult?.rows[0]?.history || [];
+		const updatedHistory: HistoryEntry[] = updatedResult ? updatedResult : [];
 
-		return { message: 'success', history: updatedHistory };
+		return { message: "success", history: updatedHistory };
 	} catch (error) {
-		console.error('Error updating history:', error);
-		return { message: 'error', history: [] };
+		console.error("Error updating history:", error);
+		return { message: "error", history: [] };
 	}
 }
 
 export async function removeUserHistory(
 	userId: string,
-	artistToRemove: string,
+	artistToRemove: string
 ): Promise<string> {
 	try {
-		const result = await getUserHistory(userId);
-		const currentHistory: HistoryEntry[] = result?.rows[0]?.history || [];
+		const history = await getUserHistory(userId);
+		const currentHistory: HistoryEntry[] = history ? history : [];
 
 		const updatedHistory = currentHistory.filter(
-			(entry: HistoryEntry) => entry.text !== artistToRemove,
+			(entry: HistoryEntry) => entry.text !== artistToRemove
 		);
 
-		await sql`
-      UPDATE users
-      SET history = ${JSON.stringify(updatedHistory)}::jsonb
-      WHERE user_id = ${userId};
-    `;
+		await prisma.user.update({
+			where: { userId },
+			data: { history: updatedHistory },
+		});
 
-		console.log('History entry removed');
-		return 'success';
+		console.log("History entry removed");
+		return "success";
 	} catch (error) {
-		console.error('Error removing history:', error);
-		return 'error';
+		console.error("Error removing history:", error);
+		return "error";
 	}
 }
 
 export async function getUserHistory(
-	userId: string,
-): Promise<{ rows: { history: HistoryEntry[] }[] }> {
+	userId: string
+): Promise<HistoryEntry[] | null | undefined> {
 	try {
-		return await sql`
-      SELECT history FROM users WHERE user_id = ${userId};
-    `;
+
+		const history = (await prisma.user.findUnique({ where: { userId } }))
+			?.history;
+
+		return history as unknown as HistoryEntry[];
 	} catch (error) {
-		console.error('Error fetching user history:', error);
+		console.error("Error fetching user history:", error);
 		throw error;
 	}
 }

app/lib/prisma.ts

@@ -0,0 +1,6 @@
+import { PrismaClient } from "@/app/generated/prisma";
+import { withAccelerate } from "@prisma/extension-accelerate";
+
+const prisma = new PrismaClient().$extends(withAccelerate());
+
+export default prisma;