Merge pull request #149 from simonv3/nowplaying-on-home

feat: now playing on the homepage

src/components/Explore/NowPlaying.tsx

@@ -0,0 +1,50 @@
+import { css } from "@emotion/css";
+import React from "react";
+import { fetchLatestTracks } from "../../services/Api";
+import usePagination from "../../utils/usePagination";
+import { CenteredSpinner } from "../common/Spinner";
+import TrackList from "../common/TrackList";
+
+export const NowPlaying: React.FC = () => {
+  const [tracks, setTracks] = React.useState<Track[]>([]);
+
+  const { results, isLoading } = usePagination<Track>({
+    apiCall: React.useCallback(fetchLatestTracks, []),
+    options: React.useMemo(() => ({ limit: 2, order: "plays" }), []),
+  });
+
+  React.useEffect(() => {
+    setTracks(
+      results.map((r) => ({
+        ...r,
+        images: {
+          ...r.images,
+          small: {
+            // FIXME: There's a bug with the API's `images` being returned
+            // from fetchTracks. The URLs seem to not point to any existing files.
+            url: r.cover,
+            width: 120,
+            height: 120,
+          },
+        },
+      }))
+    );
+  }, [results]);
+
+  return (
+    <>
+      <h3>Now Playing</h3>
+      <p
+        className={css`
+          margin-bottom: 1rem;
+        `}
+      >
+        What's currently playing in the Resonate ecosystem?
+      </p>
+      {isLoading && <CenteredSpinner />}
+      <TrackList tracks={tracks} />
+    </>
+  );
+};
+
+export default NowPlaying;

src/components/Home.tsx

@@ -4,6 +4,7 @@ import { tags } from "../constants";
 import Tags from "./common/Tags";
 import NewReleases from "./NewReleases";
 import StaffPicks from "./StaffPicks";
+import NowPlaying from "./Explore/NowPlaying";
 
 export const Home: React.FC = () => {
   return (
@@ -20,6 +21,7 @@ export const Home: React.FC = () => {
         >
           <Tags tags={tags} />
         </ul>
+        <NowPlaying />
         <NewReleases />
         <StaffPicks />
       </div>