feat: fetch albums from Last.fm, show them in sidebar

src/albums.ts

@@ -6,11 +6,30 @@ import sortBy from 'sort-by'
 
 export async function getAlbums(query?: string) {
   await fakeNetwork(`getAlbums:${query ?? ''}`)
-  let albums = (await localforage.getItem<Album[]>('albums')) ?? []
-  if (query) {
-    albums = matchSorter(albums, query, { keys: ['first', 'last'] })
-  }
-  return albums.sort(sortBy('-last', 'createdAt'))
+
+  // Use fetch to make an HTTP request to the Last.fm API
+  const response = await fetch(
+    'http://ws.audioscrobbler.com/2.0/' +
+      '?method=artist.gettopalbums' +
+      '&artist=David Bowie' +
+      '&api_key=035db7391c866de91ad8767bbb32c4f7' +
+      '&format=json'
+  )
+
+  const data = await response.json()
+
+  const albums = data.topalbums.album.map((album: Album) => ({
+    id: album.mbid || `${album.artist.name}-${album.name}}`,
+    name: album.name,
+    artist: album.artist,
+    createdAt: Date.now()
+  }))
+
+  const sortedAlbums = query
+    ? matchSorter(albums, query, { keys: ['first', 'last'] })
+    : albums
+
+  return sortedAlbums.sort(sortBy('-last', 'createdAt'))
 }
 
 export async function createAlbum() {

src/data/albums/davidBowie1969Album.ts

@@ -1,5 +1,5 @@
 export const davidBowie1969Album: Album = {
-  artist: 'David Bowie',
+  artist: { name: 'David Bowie' },
   mbid: '',
   tags: {
     tag: [

src/routes.tsx

@@ -1,13 +1,14 @@
 import ErrorPage from './error-page'
 import './index.css'
 import Album from './routes/album'
-import Root from './routes/root'
+import Root, { loader as rootLoader } from './routes/root'
 
 export const routes = [
   {
     path: '/',
     element: <Root />,
     errorElement: <ErrorPage />,
+    loader: rootLoader,
     children: [
       {
         path: '/albums/:albumId',

src/routes/album.tsx

@@ -26,17 +26,7 @@ export default function Album() {
         </h1>
 
         {/* TODO link to artist */}
-        {album.artist && (
-          <p>
-            {/* <a
-              target="_blank"
-              href={`https://twitter.com/${album.artist}`}
-              rel="noreferrer"
-            > */}
-            {album.artist}
-            {/* </a> */}
-          </p>
-        )}
+        {album.artist && <p>{album.artist.name}</p>}
 
         {album.wiki?.summary && (
           <AlbumSummary>{album.wiki.summary}</AlbumSummary>

src/routes/root.tsx

@@ -1,6 +1,18 @@
-import { Link, Outlet } from 'react-router-dom'
+import type { LoaderFunction } from 'react-router-dom'
+import { Link, Outlet, useLoaderData } from 'react-router-dom'
+import { getAlbums } from '../albums'
+import { LoaderData } from '../types/react-router-extra-types'
+
+// change this to use funtion:
+export const loader = (async () => {
+  const albums = await getAlbums()
+  return { albums }
+}) satisfies LoaderFunction
 
 export default function Root() {
+  const { albums }: { albums: Album[] } = useLoaderData() as LoaderData<
+    typeof loader
+  >
   return (
     <>
       <div id="sidebar">
@@ -22,14 +34,22 @@ export default function Root() {
           </form>
         </div>
         <nav>
-          <ul>
-            <li>
-              <Link to="/albums/1">David Bowie (1969)</Link>
-            </li>
-            {/* <li>
-              <Link to="/albums/2">The Man Who Sold the World</Link>
-            </li> */}
-          </ul>
+          {albums.length ? (
+            <ul>
+              {albums.map((album) => (
+                <li key={album.id}>
+                  <Link to={`albums/${album.id}`}>
+                    {album.name ? album.name : <i>No Name</i>}{' '}
+                    {album.favorite && <span>★</span>}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p>
+              <i>No albums</i>
+            </p>
+          )}
         </nav>
       </div>
       <div id="detail">

src/types/album.d.ts

@@ -4,7 +4,7 @@ interface Album {
   favorite?: boolean
 
   // Last.fm properties
-  artist: string
+  artist: Artist
   mbid: string
   tags: {
     tag: {

src/types/artist.d.ts

@@ -0,0 +1,9 @@
+interface Artist {
+  // webapp properties
+  id?: string
+  favorite?: boolean
+
+  // Last.fm properties
+  name: string
+  // TODO
+}

src/types/react-router-extra-types.ts

@@ -0,0 +1,7 @@
+import { LoaderFunction } from 'react-router-dom'
+
+export type LoaderData<TLoaderFn extends LoaderFunction> = Awaited<
+  ReturnType<TLoaderFn>
+> extends Response | infer D
+  ? D
+  : never

tsconfig.json

@@ -16,5 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src", ".eslintrc.js", "src/*.d.ts"]
+  "include": ["src", ".eslintrc.js", "src/**/*.d.ts"]
 }