Cleanup code & prepare to deploy to Vercel

.env

@@ -3,4 +3,6 @@ NEXT_PUBLIC_REDIRECT_URI="http://localhost:3000/auth/callback"
 NEXT_PUBLIC_AUTH_ENDPOINT="https://accounts.spotify.com/authorize"
 NEXT_PUBLIC_RESPONSE_TYPE="token"
 NEXT_PUBLIC_BACKEND_URL="http://localhost:3001"
-NEXT_PUBLIC_FRONTENT_URL="localhost:3000"
+NEXT_PUBLIC_FRONTENT_URL="localhost:3000"
+NEXT_PUBLIC_SUPABASE_URL=https://dkuewaaupmoqazilskoo.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRrdWV3YWF1cG1vcWF6aWxza29vIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTA4MTc1MjIsImV4cCI6MjAyNjM5MzUyMn0.KgPgXhCY0jZxmUh9lOAYNcVBQFBU3vuSnl3Yfid_U6g

.github/workflows/test.yml

@@ -10,7 +10,7 @@ jobs:
 
     defaults:
       run:
-        working-directory: ./server
+        working-directory: ./
 
     steps:
       - uses: actions/checkout@v4

src/app/Index.jsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import IndexContent from "@/components/svg-art/index_content";
 import createClient from "@/utils/supabase/client";
-import { loginWithSpotify } from "./login/actions";
 
 export default function HomePage() {
   const supabase = createClient();
@@ -24,8 +23,8 @@ export default function HomePage() {
       } else {
         // console.log("user is not logged in");
       }
-    })().catch((err) => {
-      console.error(err); // TODO display error message to user
+    })().catch(() => {
+      // TODO display error message to user
     });
   }, []);
 

src/app/account/account-form.jsx

@@ -6,6 +6,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import PropTypes from "prop-types";
 import createClient from "@/utils/supabase/client";
 
 export default function AccountForm({ user }) {
@@ -37,8 +38,7 @@ export default function AccountForm({ user }) {
         setAvatarUrl(data.avatar_url);
       }
     } catch (error) {
-      alert("Error loading user data!");
-      console.log(error);
+      // TODO display error message to user
     } finally {
       setLoading(false);
     }
@@ -61,9 +61,9 @@ export default function AccountForm({ user }) {
         updated_at: new Date().toISOString(),
       });
       if (error) throw error;
-      alert("Profile updated!");
+      // TODO alert("Profile updated!");
     } catch (error) {
-      alert("Error updating the data!");
+      // TODO alert("Error updating the data!");
     } finally {
       setLoading(false);
     }
@@ -134,3 +134,10 @@ export default function AccountForm({ user }) {
     </div>
   );
 }
+
+AccountForm.propTypes = {
+  user: PropTypes.shape({
+    id: PropTypes.string,
+    email: PropTypes.string,
+  }).isRequired,
+};

src/app/auth/callback/route.js

@@ -10,15 +10,13 @@ export async function GET(request) {
   const redirectTo = request.nextUrl.clone();
   redirectTo.searchParams.delete("code");
 
-  // console.log("code: ", code);
-
   if (code) {
     const supabase = createClient();
 
     const { data, error } = await supabase.auth.exchangeCodeForSession(code);
 
     if (error) {
-      console.log(error.message); // TODO display error message to user
+      // TODO display error message to user error.message
       redirectTo.pathname = "/error";
       return NextResponse.redirect(redirectTo);
     }
@@ -34,15 +32,11 @@ export async function GET(request) {
     try {
       spotifyUserData = await getSpotifyData(data.session.provider_token);
     } catch (e) {
-      console.error(e); // TODO display error message to user
+      // TODO display error message to user e
       redirectTo.pathname = "/error";
       return NextResponse.redirect(redirectTo);
     }
 
-    // console.log("spotify user data: ", spotifyUserData);
-
-    // console.log("username: ", spotifyUserData.userProfile.id);
-
     // update DB with Spotify username + Spotify data
     const { dbError } = await supabase
       .from("profiles")
@@ -53,7 +47,7 @@ export async function GET(request) {
       .eq("id", data.user.id);
 
     if (dbError) {
-      console.log(dbError.message); // TODO display error message to user
+      // TODO display error message to user dbError.message
       redirectTo.pathname = "/error";
       return NextResponse.redirect(redirectTo);
     }

src/app/auth/confirm/route.js

@@ -28,7 +28,7 @@ export async function GET(request) {
       redirectTo.searchParams.delete("next");
       return NextResponse.redirect(redirectTo);
     }
-    console.log(error.message); // TODO display error message to user
+    // TODO display error message to user error.message
   }
 
   // return the user to an error page with some instructions

src/app/login/actions.js

@@ -24,7 +24,7 @@ export async function login(formData) {
   const { error } = await supabase.auth.signInWithPassword(data);
 
   if (error) {
-    console.error(error.message); // TODO display error message to user
+    // TODO display error message to user error.message
     redirect("/error");
   }
 
@@ -49,7 +49,7 @@ export async function signup(formData) {
   const { error } = await supabase.auth.signUp(data);
 
   if (error) {
-    console.error(error.message); // TODO display error message to user
+    // TODO display error message to user error.message
     redirect("/error");
   }
 
@@ -94,7 +94,7 @@ export async function loginWithSpotify() {
   });
 
   if (error) {
-    console.error(error.message); // TODO display error message to user
+    // TODO display error message to user error.message
     redirect("/error");
   } else {
     redirect(data.url);

src/app/login/page.jsx

@@ -29,8 +29,8 @@ export default function LoginPage() {
       } else {
         setLoading(false);
       }
-    })().catch((err) => {
-      console.error(err); // TODO display error message to user
+    })().catch(() => {
+      // TODO display error message to user (param)
       router.push("/error");
     });
   }, []);

src/components/UnifyContent.jsx → src/app/unify/[users]/UnifyContent.jsx

@@ -1,8 +1,9 @@
 import { ResponsiveRadar } from "@nivo/radar";
 import { ResponsivePie } from "@nivo/pie";
-import "@/app/globals.css";
 import ReactDOMServer from "react-dom/server";
+import PropTypes from "prop-types";
 import ShareUnify from "@/components/svg-art/share_unify";
+import "@/app/globals.css";
 
 function calculateSimilarity(list1, list2) {
   const intersection = Object.keys(list1).filter((key) =>
@@ -13,17 +14,11 @@ function calculateSimilarity(list1, list2) {
   return similarity * 100; // Convert to percentage
 }
 
-function UnifyContent({ user1Data, user2Data }) {
-  // console.log(user1Data.featuresData);
-  // console.log(user2Data.featuresData);
-
+export default function UnifyContent({ user1Data, user2Data }) {
   // Function to handle sharing
   const shareUnify = async () => {
-    // console.log("sharing song");
-
     // Use Web Share API to share the default image
     const svgString = ReactDOMServer.renderToString(<ShareUnify />);
-    // console.log(svgString);
 
     const img = new Image();
 
@@ -37,7 +32,7 @@ function UnifyContent({ user1Data, user2Data }) {
       const ctx = canvas.getContext("2d");
 
       if (!ctx) {
-        console.error("Unable to obtain 2D context for canvas.");
+        // TODO console.error("Unable to obtain 2D context for canvas.");
         return;
       }
 
@@ -74,10 +69,7 @@ function UnifyContent({ user1Data, user2Data }) {
 
       // Convert canvas to blob
       canvas.toBlob((blob) => {
-        // console.log(blob);
-
         if (navigator.share) {
-          // console.log("Web share API supported");
           navigator
             .share({
               title: "Unify with me!",
@@ -89,12 +81,11 @@ function UnifyContent({ user1Data, user2Data }) {
                 }),
               ],
             })
-            .then(() => {
-              // console.log("Shared successfully");
-            })
-            .catch((error) => console.error("Error sharing:", error));
+            .catch(() => {
+              // TODO console.error("Error sharing:", error);
+            });
         } else {
-          // console.log("Web Share API not supported");
+          // TODO console.log("Web Share API not supported");
         }
       }, "image/png");
     };
@@ -132,8 +123,6 @@ function UnifyContent({ user1Data, user2Data }) {
     user2Data.topGenres,
   );
 
-  // console.log("combinedFeaturesData: ", combinedFeaturesData);
-
   return (
     <>
       <div
@@ -344,4 +333,40 @@ function UnifyContent({ user1Data, user2Data }) {
     </>
   );
 }
-export default UnifyContent;
+
+UnifyContent.propTypes = {
+  user1Data: PropTypes.shape({
+    userProfile: PropTypes.shape({
+      display_name: PropTypes.string,
+    }),
+    featuresData: PropTypes.arrayOf(PropTypes.shape()),
+    topGenres: PropTypes.shape({}),
+    topSongs: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string,
+      }),
+    ),
+    topArtists: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string,
+      }),
+    ),
+  }).isRequired,
+  user2Data: PropTypes.shape({
+    userProfile: PropTypes.shape({
+      display_name: PropTypes.string,
+    }),
+    featuresData: PropTypes.arrayOf(PropTypes.shape()),
+    topGenres: PropTypes.shape({}),
+    topSongs: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string,
+      }),
+    ),
+    topArtists: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string,
+      }),
+    ),
+  }).isRequired,
+};

src/app/unify/[users]/page.jsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import createClient from "@/utils/supabase/client";
-import UnifyContent from "@/components/UnifyContent";
+import UnifyContent from "./UnifyContent";
 
 export default function UnifyPage({ params: { users } }) {
   // console.log(users);
@@ -39,8 +39,7 @@ export default function UnifyPage({ params: { users } }) {
             .eq("id", currentUser.user.id)
             .then(({ data, error2 }) => {
               if (error2) {
-                // TODO
-                console.error(error2); // TODO display error message to user
+                // TODO display error message to user error2
               }
 
               // console.log(data);
@@ -57,7 +56,7 @@ export default function UnifyPage({ params: { users } }) {
             });
         }
       } catch (error) {
-        console.error("Error fetching data:", error.message);
+        // TODO "Error fetching data:", error.message
       }
     };
 
@@ -77,8 +76,7 @@ export default function UnifyPage({ params: { users } }) {
       .eq("username", user1)
       .then(({ data, error }) => {
         if (error) {
-          // TODO
-          console.error(error); // TODO display error message to user
+          // TODO display error message to user error
         }
 
         if (data && data.length > 0) {
@@ -97,8 +95,7 @@ export default function UnifyPage({ params: { users } }) {
       .eq("username", user2)
       .then(({ data, error }) => {
         if (error) {
-          // TODO
-          console.error(error); // TODO display error message to user
+          // TODO display error message to user error
         }
 
         if (data && data.length > 0) {