feat: final cleanup (#431)

app/(marketing)/(navlayout)/auth/layout.tsx

@@ -0,0 +1,7 @@
+/* Marketing Page Layout for auth pages */
+
+const AuthLayout = ({ children }: { children: React.ReactNode }) => (
+  <div className="container mx-auto pt-5">{children}</div>
+);
+
+export default AuthLayout;

app/(marketing)/(navlayout)/auth/signin/page.tsx

@@ -49,7 +49,7 @@ const SignInPage = async ({
   const errorText = errorType ? ERROR_DESCRIPTIONS[errorType] : undefined;
 
   return (
-    <div className="px-10 pt-5">
+    <>
       <h2 className="text-2xl font-bold py-3">Sign In</h2>
       <span className="divider mt-0" />
 
@@ -74,7 +74,7 @@ const SignInPage = async ({
         </div>
       )}
       <SignInButton />
-    </div>
+    </>
   );
 };
 

app/(marketing)/(navlayout)/layout.tsx

@@ -1,4 +1,4 @@
-/* Marketing Page Layout */
+/* Marketing Page Layout for non-home pages */
 import MarketingNavbar from "@/app/(marketing)/MarketingNavbar";
 
 const NavLayout = ({ children }: { children: React.ReactNode }) => (

app/app/(music)/album/[id]/AlbumView.tsx

@@ -4,6 +4,8 @@ import MusicHeader from "@/components/music/MusicHeader";
 import ArtistLinks from "@/components/ui/ArtistLinks";
 import { capitalize, formatNumber } from "@/lib/formatters";
 
+import type { AverageAudioFeatures } from "@/lib/getAverageAudioFeatures";
+
 /* Album Page */
 const AlbumView = ({
   album,
@@ -13,7 +15,7 @@ const AlbumView = ({
 }: {
   album: SpotifyApi.AlbumObjectFull;
   artist: SpotifyApi.ArtistObjectFull;
-  averageAudioFeatures: SpotifyApi.AudioFeaturesObject;
+  averageAudioFeatures: AverageAudioFeatures;
   isPremium: boolean;
 }) => (
   <>

app/app/(music)/album/[id]/page.tsx

@@ -21,7 +21,7 @@ const getData = async (id: string) => {
       `https://api.spotify.com/v1/audio-features?ids=${album.tracks.items
         .map((track) => track.id)
         .join(",")}`
-    );
+    ).then((res) => res.audio_features);
 
   const averageAudioFeatures = getAverageAudioFeatures(audioFeatures);
 

app/app/(music)/artist/[id]/ArtistView.tsx

@@ -4,6 +4,8 @@ import { AlbumList, TrackList } from "@/components/music/lists";
 import MusicHeader from "@/components/music/MusicHeader";
 import { formatNumber } from "@/lib/formatters";
 
+import type { AverageAudioFeatures } from "@/lib/getAverageAudioFeatures";
+
 /* Artist Page */
 const ArtistView = ({
   artist,
@@ -18,7 +20,7 @@ const ArtistView = ({
   topTracks: SpotifyApi.ArtistsTopTracksResponse;
   albums: SpotifyApi.ArtistsAlbumsResponse;
   isFollowing: boolean;
-  averageAudioFeatures: SpotifyApi.AudioFeaturesObject;
+  averageAudioFeatures: AverageAudioFeatures;
   similarArtists: SpotifyApi.ArtistObjectFull[];
   isPremium: boolean;
 }) => (

app/app/(music)/artist/[id]/page.tsx

@@ -28,7 +28,7 @@ const getData = async (id: string) => {
       `https://api.spotify.com/v1/audio-features?ids=${topTracks.tracks
         .map((track) => track.id)
         .join(",")}`
-    );
+    ).then((res) => res.audio_features);
 
   /* Fetch similar artists' data for current artist */
   const similarArtistsData =

app/app/(music)/playlist/[id]/PlaylistView.tsx

@@ -5,6 +5,7 @@ import ArtistLinks from "@/components/ui/ArtistLinks";
 import { formatNumber } from "@/lib/formatters";
 
 import type { FilteredDataTrack } from "./page";
+import type { AverageAudioFeatures } from "@/lib/getAverageAudioFeatures";
 
 /* Playlist Page */
 const PlaylistView = ({
@@ -16,7 +17,7 @@ const PlaylistView = ({
 }: {
   playlist: SpotifyApi.PlaylistObjectFull;
   tracks: FilteredDataTrack[];
-  averageAudioFeatures: SpotifyApi.AudioFeaturesObject | undefined;
+  averageAudioFeatures: AverageAudioFeatures | undefined;
   hasPodcast: boolean;
   isPremium: boolean;
 }) => (

app/app/(music)/playlist/[id]/page.tsx

@@ -45,7 +45,7 @@ const getData = async (id: string) => {
       `https://api.spotify.com/v1/audio-features?ids=${tracks
         .map((track) => track.id)
         .join(",")}`
-    );
+    ).then((res) => res.audio_features);
 
   const averageAudioFeatures = tracks[0]
     ? getAverageAudioFeatures(audioFeatures)

app/app/profile/[username]/page.tsx

@@ -55,7 +55,7 @@ const getData = async (id: string) => {
       `https://api.spotify.com/v1/audio-features?ids=${topTracks
         .map((track) => track.id)
         .join(",")}`
-    );
+    ).then((res) => res.audio_features);
 
   const averageAudioFeatures = getAverageAudioFeatures(audioFeatures);
 

app/global-error.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import ErrorPage from "@/components/ui/ErrorPage";
+
+const GlobalError = ({ error, reset }: { error: Error; reset: () => void }) => (
+  <html lang="en" className="scroll-smooth">
+    <head>
+      <title>DKMS</title>
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <meta name="description" content="Generated by create next app" />
+    </head>
+    <body>
+      <ErrorPage error={error} reset={reset} />
+    </body>
+  </html>
+);
+
+export default GlobalError;

cypress/e2e/share.spec.ts

@@ -4,14 +4,7 @@ describe("Share Music to Feed", () => {
     cy.auth();
   });
 
-  it("should start on the search page", () => {
-    // Start from the search page
-    cy.visit("/app/search");
-    // The search page should contain an h1 with "Search"
-    cy.get("h1").contains("Search");
-  });
-
-  it("should search and share an album to feed", () => {
+  it("should search and share a track to feed", () => {
     // Start from the search page
     cy.visit("/app/search");
     // Search for an artist
@@ -23,8 +16,8 @@ describe("Share Music to Feed", () => {
     cy.get("a").contains("Nirvana");
     cy.url().should("include", "/search?q=Nirvana");
 
-    // Share the album to feed
-    cy.get(`button[title="Share to feed"]`).eq(4).click();
+    // Share the track to feed
+    cy.get(`button[title="Share to feed"]`).eq(0).click();
     // Add text to the post
     const postText = `Testing: ${Math.random().toString(36).substring(2, 8)}`;
     cy.get("textarea[id=comment]").click();
@@ -36,23 +29,23 @@ describe("Share Music to Feed", () => {
     cy.visit("/app");
     cy.reload();
 
-    // A feed item with the a random string for testing should be present
+    // A feed item with the text postText should be present
     cy.get("p").contains(postText);
 
-    // A feed item with a card with the album information should be present
+    // A feed item with a card with the track information should be present
     cy.get('div[class*="card"]').find("img").eq(0).click();
-    // The url should be on the album's page
-    cy.url().should("include", "/album");
+    // The url should be on the track's page
+    cy.url().should("include", "/track");
 
     // Visit the feed page
     cy.visit("/app");
     // Delete the feed item that was just posted
     cy.get(`button[title="Delete feed item"]`).eq(0).click();
-    // A feed item with the random string for testing should be deleted
+    // A feed item with postText should be deleted
     cy.get("p", { timeout: 10000 }).contains(postText).should("not.exist");
   });
 
-  it("should search and share an artist to feed", () => {
+  it("should search and share an album to feed", () => {
     // Start from the search page
     cy.visit("/app/search");
     // Search for an artist
@@ -64,8 +57,8 @@ describe("Share Music to Feed", () => {
     cy.get("a").contains("Nirvana");
     cy.url().should("include", "/search?q=Nirvana");
 
-    // Share the artist to feed
-    cy.get(`button[title="Share to feed"]`).eq(8).click();
+    // Share the album to feed
+    cy.get(`button[title="Share to feed"]`).eq(4).click();
     // Add text to the post
     const postText = `Testing: ${Math.random().toString(36).substring(2, 8)}`;
     cy.get("textarea[id=comment]").click();
@@ -77,23 +70,23 @@ describe("Share Music to Feed", () => {
     cy.visit("/app");
     cy.reload();
 
-    // A feed item with the text postText should be present
+    // A feed item with the a random string for testing should be present
     cy.get("p").contains(postText);
 
-    // A feed item with a card with the artist information should be present
+    // A feed item with a card with the album information should be present
     cy.get('div[class*="card"]').find("img").eq(0).click();
-    // The url should be on the artist's page
-    cy.url().should("include", "/artist");
+    // The url should be on the album's page
+    cy.url().should("include", "/album");
 
     // Visit the feed page
     cy.visit("/app");
     // Delete the feed item that was just posted
     cy.get(`button[title="Delete feed item"]`).eq(0).click();
-    // A feed item with postText should be deleted
+    // A feed item with the random string for testing should be deleted
     cy.get("p", { timeout: 10000 }).contains(postText).should("not.exist");
   });
 
-  it("should search and share a track to feed", () => {
+  it("should search and share an artist to feed", () => {
     // Start from the search page
     cy.visit("/app/search");
     // Search for an artist
@@ -105,8 +98,8 @@ describe("Share Music to Feed", () => {
     cy.get("a").contains("Nirvana");
     cy.url().should("include", "/search?q=Nirvana");
 
-    // Share the track to feed
-    cy.get(`button[title="Share to feed"]`).eq(0).click();
+    // Share the artist to feed
+    cy.get(`button[title="Share to feed"]`).eq(8).click();
     // Add text to the post
     const postText = `Testing: ${Math.random().toString(36).substring(2, 8)}`;
     cy.get("textarea[id=comment]").click();
@@ -121,10 +114,10 @@ describe("Share Music to Feed", () => {
     // A feed item with the text postText should be present
     cy.get("p").contains(postText);
 
-    // A feed item with a card with the track information should be present
+    // A feed item with a card with the artist information should be present
     cy.get('div[class*="card"]').find("img").eq(0).click();
-    // The url should be on the track's page
-    cy.url().should("include", "/track");
+    // The url should be on the artist's page
+    cy.url().should("include", "/artist");
 
     // Visit the feed page
     cy.visit("/app");

lib/getAverageAudioFeatures.test.ts

@@ -0,0 +1,87 @@
+import getAverageAudioFeatures from "@/lib/getAverageAudioFeatures";
+
+const AUDIO_FEATURES = [
+  {
+    danceability: 0.824,
+    energy: 0.652,
+    key: 11,
+    loudness: -5.804,
+    mode: 0,
+    speechiness: 0.0454,
+    acousticness: 0.0169,
+    instrumentalness: 0.05,
+    liveness: 0.0539,
+    valence: 0.818,
+    tempo: 119.974,
+    type: "audio_features",
+  },
+  {
+    danceability: 0.735,
+    energy: 0.578,
+    key: 9,
+    loudness: -8.58,
+    mode: 1,
+    speechiness: 0.0461,
+    acousticness: 0.0643,
+    instrumentalness: 0.0236,
+    liveness: 0.0959,
+    valence: 0.863,
+    tempo: 119.992,
+    type: "audio_features",
+  },
+] as const;
+
+describe("getAverageAudioFeatures()", () => {
+  it("correctly averages multiple audio features", () => {
+    const averageAudioFeatures = getAverageAudioFeatures(AUDIO_FEATURES);
+
+    cy.wrap(averageAudioFeatures).its("danceability").should("eq", 0.7795);
+    cy.wrap(averageAudioFeatures).its("energy").should("eq", 0.615);
+    cy.wrap(averageAudioFeatures).its("key").should("eq", 10);
+    cy.wrap(averageAudioFeatures).its("loudness").should("eq", -7.192);
+    cy.wrap(averageAudioFeatures).its("mode").should("eq", 0.5);
+    cy.wrap(averageAudioFeatures).its("speechiness").should("eq", 0.04575);
+    cy.wrap(averageAudioFeatures).its("acousticness").should("eq", 0.0406);
+    cy.wrap(averageAudioFeatures).its("instrumentalness").should("eq", 0.0368);
+    cy.wrap(averageAudioFeatures).its("liveness").should("eq", 0.0749);
+    cy.wrap(averageAudioFeatures).its("valence").should("eq", 0.8405);
+    cy.wrap(averageAudioFeatures).its("tempo").should("eq", 119.983);
+    cy.wrap(averageAudioFeatures).its("type").should("eq", "audio_features");
+  });
+
+  it("returns the same values when only one audio feature is provided", () => {
+    const averageAudioFeatures = getAverageAudioFeatures([
+      AUDIO_FEATURES[0],
+    ] as const);
+
+    cy.wrap(averageAudioFeatures).its("danceability").should("eq", 0.824);
+    cy.wrap(averageAudioFeatures).its("energy").should("eq", 0.652);
+    cy.wrap(averageAudioFeatures).its("key").should("eq", 11);
+    cy.wrap(averageAudioFeatures).its("loudness").should("eq", -5.804);
+    cy.wrap(averageAudioFeatures).its("mode").should("eq", 0);
+    cy.wrap(averageAudioFeatures).its("speechiness").should("eq", 0.0454);
+    cy.wrap(averageAudioFeatures).its("acousticness").should("eq", 0.0169);
+    cy.wrap(averageAudioFeatures).its("instrumentalness").should("eq", 0.05);
+    cy.wrap(averageAudioFeatures).its("liveness").should("eq", 0.0539);
+    cy.wrap(averageAudioFeatures).its("valence").should("eq", 0.818);
+    cy.wrap(averageAudioFeatures).its("tempo").should("eq", 119.974);
+    cy.wrap(averageAudioFeatures).its("type").should("eq", "audio_features");
+  });
+
+  it("returns all values as 0 when no audio features are provided", () => {
+    const averageAudioFeatures = getAverageAudioFeatures([]);
+
+    cy.wrap(averageAudioFeatures).its("danceability").should("eq", 0);
+    cy.wrap(averageAudioFeatures).its("energy").should("eq", 0);
+    cy.wrap(averageAudioFeatures).its("key").should("eq", 0);
+    cy.wrap(averageAudioFeatures).its("loudness").should("eq", 0);
+    cy.wrap(averageAudioFeatures).its("mode").should("eq", 0);
+    cy.wrap(averageAudioFeatures).its("speechiness").should("eq", 0);
+    cy.wrap(averageAudioFeatures).its("acousticness").should("eq", 0);
+    cy.wrap(averageAudioFeatures).its("instrumentalness").should("eq", 0);
+    cy.wrap(averageAudioFeatures).its("liveness").should("eq", 0);
+    cy.wrap(averageAudioFeatures).its("valence").should("eq", 0);
+    cy.wrap(averageAudioFeatures).its("tempo").should("eq", 0);
+    cy.wrap(averageAudioFeatures).its("type").should("eq", "audio_features");
+  });
+});