Merge pull request #48 from Marx-wrld/Debug-and-Deploy

Debug and deploy

actions/getActiveProductsWithPrices.ts

@@ -19,7 +19,7 @@ const getActiveProductsWithPrices = async (): Promise<ProductWithPrice[]> => {
         .order('unit_amount', { foreignTable: 'prices' }) //we then order them by unit-amount in the foreignTable by prices
 
     if (error) {
-        console.log(error);
+        console.log(error.message);
     }
 
     return (data as any) || [];

app/account/components/AccountContent.tsx

@@ -34,13 +34,13 @@ const AccountContent = () => {
             }
         }
         setLoading(false);
-    }
+    };
 
     return ( 
         <div className="mb-7 px-6">
             {!subscription && (
                 <div className="flex flex-col gap-y-4">
-                    <p>No active plan</p>
+                    <p>No active plan.</p>
                     <Button
                         onClick={subscribeModal.onOpen}
                         className="w-[300px]"
@@ -52,7 +52,7 @@ const AccountContent = () => {
             {subscription && (
                 <div className="flex flex-col gap-y-4">
                     <p>
-                        You are currently on the <b>{subscription?.prices?.products?.name}plan.</b>
+                        You are currently on the <b>{subscription?.prices?.products?.name}</b>plan.
                     </p>
 
                     <Button 

app/api/create-checkout-session/route.ts

@@ -1,7 +1,7 @@
 //route that creates our checkout session
 
 import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
-import { headers, cookies } from "next/headers";
+import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
 import { stripe } from "@/libs/stripe";
 import { getUrl } from "@/libs/helpers";
@@ -24,7 +24,7 @@ export async function POST (
         //creating our customer
         const customer  = await createOrRetrieveCustomer({
             uuid: user?.id || '',
-            email: user?.email || '',
+            email: user?.email || ''
         });
 
         //creating our checkout session
@@ -33,9 +33,9 @@ export async function POST (
             billing_address_collection: "required",
             customer,
             line_items: [
-                {
+            {
                 price: price.id,
-                quantity,
+                quantity
             }
         ],
         mode: 'subscription',

app/api/create-portal-link/route.ts

@@ -15,16 +15,16 @@ export async function POST(){
 
         const { data: { user } } = await supabase.auth.getUser(); //extracting data anad user from data object
 
-        if (!user) throw new Error('User not found'); //if user is not found, throw an error
+        if (!user) throw Error('User not found'); //if user is not found, throw an error
 
         //else
 
         const customer = await createOrRetrieveCustomer({
             uuid: user?.id || '',
-            email: user?.email || '',
+            email: user?.email || ''
         });
 
-        if (!customer) throw new Error('Customer not found'); //if customer is not found, throw an error
+        if (!customer) throw Error('Customer not found'); //if customer is not found, throw an error
 
         const { url } = await stripe.billingPortal.sessions.create({
             customer,
@@ -34,6 +34,6 @@ export async function POST(){
         return NextResponse.json({ url });
     } catch (error: any) {
         console.log(error);
-        return new  NextResponse('Internal Error', {status: 500 });
+        new  NextResponse('Internal Error', {status: 500 });
     };
-}
+}

app/api/webhooks/route.ts

@@ -31,13 +31,14 @@ export async function POST(
     const sig = headers().get('Stripe-Signature')
     //Adding our webhook secret
     const webhookSecret = 
+        process.env.STRIPE_WEBHOOK_SECRET_LIVE ??
         process.env.STRIPE_WEBHOOK_SECRET;
     let event: Stripe.Event;
 
-    try{
+    try {
         //if their is no signature or webhookSecret we break the function otherwise we'll pass an event
         if (!sig || !webhookSecret) return;
-        event = stripe.webhooks.constructEvent(body, sig, webhookSecret)
+        event = stripe.webhooks.constructEvent(body, sig, webhookSecret);
     } //catching the error
     catch (error: any){
         console.log('Error message: ' + error.message);
@@ -81,10 +82,9 @@ export async function POST(
             }
         } catch (error) {
             console.log(error);
-            return new NextResponse('Webhook error', { status: 400});
+            return new NextResponse('Webhook error: "Webhook handler failed. View logs." ', { status: 400});
         }
     }
 
     return NextResponse.json ({ received: true }, { status: 200});
-
-}
+};

app/layout.tsx

@@ -13,7 +13,7 @@ import getActiveProductsWithPrices from '@/actions/getActiveProductsWithPrices'
 const font = Figtree({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Vocalshare',
+  title: 'Vocalshare: Your favourite music app',
   description: 'Your favourite music app',
 }
 

components/MediaItem.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import useLoadImage from "@/hooks/useLoadImage";
+import usePlayer from "@/hooks/usePlayer";
 import { Song } from "@/types";
 import Image from "next/image";
 
@@ -15,14 +16,16 @@ const MediaItem: React.FC<MediaItemProps> = ({
     onClick
 }) => {
 
+    const player = usePlayer();
     const imageUrl = useLoadImage(data);
 
     const handleClick = () => {
         if (onClick) {
             return onClick(data.id);
         }
 
-        //we'll add default to turn on player because we don't have a player yet
+        // default to turn on player 
+        return player.setId(data.id);
     }
 
     return ( 

components/SubscribeModal.tsx

@@ -42,7 +42,6 @@ const SubscribeModal: React.FC<SubscribeModalProps> = ({
 
     const handleCheckout = async (price: Price) => {
         setPriceIdLoading(price.id); //we're setting the priceIdLoading to the price.id
-
 
         if (!user){
             setPriceIdLoading(undefined);
@@ -51,7 +50,7 @@ const SubscribeModal: React.FC<SubscribeModalProps> = ({
 
         if (subscription){
             setPriceIdLoading(undefined);
-            return toast.error("Already subscribed");
+            return toast("Already subscribed");
         }
 
         try{
@@ -61,9 +60,9 @@ const SubscribeModal: React.FC<SubscribeModalProps> = ({
             });
 
             const stripe = await getStripe();
-            stripe?.redirectToCheckout({ sessionId });
+            stripe?.redirectToCheckout({ sessionId }); //creates a checkout screen for the currently logged in user
         } catch (error){
-           return toast.error((error as Error)?.message);
+           toast.error((error as Error)?.message);
         } finally{
             setPriceIdLoading(undefined);
         }
@@ -102,7 +101,7 @@ const SubscribeModal: React.FC<SubscribeModalProps> = ({
         )
     }
 
-    //Adding a modal for user is already subscribed
+    //Adding modal for a user already subscribed
     if (subscription){
         content = (
             <div className="text-center">

hooks/useGetSongById.ts

@@ -9,7 +9,7 @@ import toast from "react-hot-toast";
 const useGetSongById = (id?: string) => {
     const [isLoading, setIsLoading] = useState(false);
     const [song, setSong] = useState<Song | undefined>(undefined);
-    const {supabaseClient} = useSessionContext(); //Both authenticated and unauthenticated users have read access to our page but if we were to allow only authenticated users to have access to our page then we use the above method
+    const { supabaseClient } = useSessionContext(); //Both authenticated and unauthenticated users have read access to our page but if we were to allow only authenticated users to have access to our page then we use the above method
 
     useEffect(() => {
         //checking if id wasn't passed

libs/helpers.ts

@@ -8,7 +8,7 @@ export const getUrl = () => {
     let url = 
         process?.env?.NEXT_PUBLIC_SITE_URL ??
         process?.env?.NEXT_PUBLIC_VERCEL_URL ??
-        'https://localhost:3000/';
+        'http://localhost:3000/';
 
     //code to confirm that the url that we passed, just in case we change it includes https
     url = url.includes('http') ? url : `https://${url}`;

libs/supabaseAdmin.ts

@@ -68,7 +68,7 @@ const createOrRetrieveCustomer = async ({
 }) => {
     const { data, error } = await supabaseAdmin
         .from('customers') //table customers
-        .select('id, stripe_customer_id') //finding stripe customer id
+        .select('stripe_customer_id') //finding stripe customer id
         .eq('id', uuid) // retrieving this id
         .single(); //retrieving a single record
 
@@ -94,7 +94,7 @@ const createOrRetrieveCustomer = async ({
         //checking if there is a supabase error
         if (supabaseError) throw supabaseError; 
 
-        console.log(`New customer created and inserted for ${uuid}`)
+        console.log(`New customer created and inserted for ${uuid}.`)
         return customer.id;
     };
 
@@ -138,6 +138,8 @@ const manageSubscriptionStatusChange = async (
     customerId: string,
     createAction = false
 ) => {
+
+    //getting customer's UUID from mapping table
     const { data: customerData, error: noCustomerError } = await supabaseAdmin
         .from('customers')
         .select('id')
@@ -192,7 +194,7 @@ const manageSubscriptionStatusChange = async (
         await copyBillingDetailsToCustomer(
             uuid,
             subscription.default_payment_method as Stripe.PaymentMethod
-        )
+        );
 };
 
 //exporting all our functions and data
@@ -202,4 +204,4 @@ export {
     upsertPriceRecord,
     createOrRetrieveCustomer,
     manageSubscriptionStatusChange
-}
+};