Feature/issue 51 connect catalogue page

server/src/graphQL/mockAlbums.ts

@@ -50,4 +50,112 @@ export const MOCK_ALBUMS: Album[] = [
       { title: 'Beat It', duration: 258000 },
     ],
   },
+  {
+    id: '4',
+    title: 'In Rainbows',
+    artist: 'Radiohead',
+    releaseYear: 2007,
+    genre: 'Rock',
+    coverUrl: null,
+    tracks: [
+      { title: '15 Step', duration: 237000 },
+      { title: 'Bodysnatchers', duration: 242000 },
+    ],
+  },
+  {
+    id: '5',
+    title: 'Number Ones',
+    artist: 'Michael Jackson',
+    releaseYear: 2002,
+    genre: 'Pop',
+    coverUrl: null,
+    tracks: [
+      { title: 'Billie Jean', duration: 294000 },
+      { title: 'Beat It', duration: 258000 },
+    ],
+  },
+  {
+    id: '6',
+    title: '9 to 5 and Odd Jobs',
+    artist: 'Dolly Parton',
+    releaseYear: 1980,
+    genre: 'Country',
+    coverUrl: null,
+    tracks: [
+      { title: '9 to 5', duration: 163000 },
+      { title: 'Hush-A-Bye Hard Times', duration: 210000 },
+    ],
+  },
+  {
+    id: '7',
+    title: 'Rumours',
+    artist: 'Fleetwood Mac',
+    releaseYear: 1977,
+    genre: 'Rock',
+    coverUrl: null,
+    tracks: [
+      { title: 'Dreams', duration: 257000 },
+      { title: 'The Chain', duration: 270000 },
+    ],
+  },
+  {
+    id: '8',
+    title: 'Back to Black',
+    artist: 'Amy Winehouse',
+    releaseYear: 2006,
+    genre: 'Soul',
+    coverUrl: null,
+    tracks: [
+      { title: 'Rehab', duration: 214000 },
+      { title: 'Back to Black', duration: 241000 },
+    ],
+  },
+  {
+    id: '9',
+    title: 'Discovery',
+    artist: 'Daft Punk',
+    releaseYear: 2001,
+    genre: 'Electronic',
+    coverUrl: null,
+    tracks: [
+      { title: 'One More Time', duration: 320000 },
+      { title: 'Digital Love', duration: 298000 },
+    ],
+  },
+  {
+    id: '10',
+    title: 'AM',
+    artist: 'Arctic Monkeys',
+    releaseYear: 2013,
+    genre: 'Rock',
+    coverUrl: null,
+    tracks: [
+      { title: 'Do I Wanna Know?', duration: 272000 },
+      { title: 'R U Mine?', duration: 201000 },
+    ],
+  },
+  {
+    id: '11',
+    title: '2',
+    artist: 'Mac DeMarco',
+    releaseYear: 2012,
+    genre: 'Pop',
+    coverUrl: null,
+    tracks: [
+      { title: 'Dreaming', duration: 147000 },
+      { title: 'Freaking Out the Neighborhood', duration: 173000 },
+    ],
+  },
+  {
+    id: '12',
+    title: 'Doggystyle',
+    artist: 'Snoop Dogg',
+    releaseYear: 1993,
+    genre: 'HipHop',
+    coverUrl: null,
+    tracks: [
+      { title: 'Bathtub', duration: 110000 },
+      { title: 'G Funk Intro', duration: 144000 },
+    ],
+  },
 ];

server/src/graphQL/resolvers.ts

@@ -1,8 +1,9 @@
+import { start } from 'node:repl';
 import { MOCK_ALBUMS } from './mockAlbums.js';
 
 export const resolvers = {
   Query: {
-    albums: (_: unknown, args: { search?: string; genre?: string; decade?: number; first?: number }) => {
+    albums: (_: unknown, args: { search?: string; genre?: string; decade?: number; first?: number, after?: string }) => {
       let filtered = [...MOCK_ALBUMS];
 
       // Søkefilter på tittel eller artist
@@ -30,14 +31,28 @@ export const resolvers = {
         );
       }
 
-      const limit = args.first || 10;
-      const sliced = filtered.slice(0, limit);
+      const limit = args.first ?? 8;
+
+      let startIndex = 0;
+
+      if (args.after) {
+        const cursorIndex = filtered.findIndex(
+          (album) => album.id === args.after
+        );
+
+        if (cursorIndex !== -1) {
+          startIndex = cursorIndex + 1;
+        }
+      }
+
+      const sliced = filtered.slice(startIndex, startIndex + limit);
 
       return {
         edges: sliced,
+        totalCount: filtered.length,
         pageInfo: {
           endCursor: sliced.length > 0 ? sliced[sliced.length - 1].id : null,
-          hasNextPage: filtered.length > limit,
+          hasNextPage: startIndex + sliced.length < filtered.length,
         },
       };
     },

server/src/graphQL/schema.ts

@@ -11,7 +11,7 @@ export const typeDefs = `#graphql
     releaseYear: Int!
     genre: String!
     coverUrl: String     
-    tracks: [Track!]
+    tracks: [Track!]!
   }
 
   type PageInfo {
@@ -22,6 +22,7 @@ export const typeDefs = `#graphql
   type AlbumConnection {
     edges: [Album!]!
     pageInfo: PageInfo!
+    totalCount: Int!
   }
 
   type Query {
@@ -30,7 +31,7 @@ export const typeDefs = `#graphql
       genre: String
       decade: Int
       sortBy: String
-      first: Int = 10
+      first: Int = 8
       after: String
     ): AlbumConnection!
 

src/components/AlbumCard/AlbumCard.tsx

@@ -28,7 +28,7 @@ function AlbumCard({ album }: AlbumCardProps) {
         <p className="album-artist">{album.artist}</p>
         <div className="album-meta">
           <span>{album.releaseYear}</span>
-          <span>{album.genre.join(' / ')}</span>
+          <span>{album.genre}</span>
         </div>
       </div>
     </Link>

src/graphQL/queries.ts

@@ -1,7 +1,5 @@
 import { gql } from '@apollo/client'
 
-// Temporary types matching the current mock graphql schema
-// Update when the backend switches to the PostgreSQL-backend typeDefs
 export const GET_ALBUM = gql`
     query GetAlbum($id: ID!) {
         album(id: $id) {
@@ -18,4 +16,36 @@ export const GET_ALBUM = gql`
             }
         }
     }
+`
+
+export const GET_ALBUMS = gql`
+    query GetAlbums(
+        $search: String
+        $genre: String
+        $decade: Int
+        $first: Int
+        $after: String
+    ) {
+        albums(
+            search: $search
+            genre: $genre
+            decade: $decade
+            first: $first
+            after: $after
+        ) {
+            edges {
+                id
+                title
+                artist
+                releaseYear
+                genre
+                coverUrl
+            }
+            totalCount
+            pageInfo {
+                endCursor
+                hasNextPage
+            }
+        }
+    }
 `