Partially re-implement user library in Rx

packages/components/library/index.ts

@@ -0,0 +1 @@
+export { UserLibraryWithSuspense as UserLibrary } from "./src/Library";

packages/components/library/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@echo/components-library",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@echo/core-types": "^1.0.0",
+    "@echo/services-bootstrap": "^1.0.0",
+    "@echo/services-library": "^1.0.0",
+    "@effect-rx/rx": "^0.33.8",
+    "@effect-rx/rx-react": "^0.30.11",
+    "effect": "^3.2.8"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22"
+  }
+}

packages/components/library/src/Library.tsx

@@ -0,0 +1,55 @@
+import { Library, type Track } from "@echo/core-types";
+import { MainLive } from "@echo/services-bootstrap";
+import { Rx } from "@effect-rx/rx";
+import { Layer, Match, Stream } from "effect";
+import { Suspense, useState } from "react";
+import { LibraryLive } from "@echo/services-library";
+import { useRx } from "@effect-rx/rx-react";
+
+const runtime = Rx.runtime(LibraryLive.pipe(Layer.provide(MainLive)));
+const observeLibrary = runtime.pull(Stream.unwrap(Library.observeAlbums()), {
+  initialValue: [],
+});
+
+const UserLibrary = () => {
+  const [src, setSrc] = useState<string | undefined>(undefined);
+  const [result] = useRx(observeLibrary);
+
+  const playFirstTrack = (tracks: Track[]) => {
+    const track = tracks[0];
+    switch (track.resource.type) {
+      case "file":
+        setSrc(track.resource.uri);
+        break;
+      case "api":
+        break;
+    }
+  };
+
+  return Match.value(result).pipe(
+    Match.tag("Initial", () => <h5>Loading...</h5>),
+    // FIXME: Why does this render only one?
+    Match.tag("Success", ({ value: { items } }) => (
+      <div>
+        <br />
+        <audio src={src} autoPlay controls />
+        {items.map(([album, tracks]) => (
+          <div key={album.id}>
+            <h3>{album.name}</h3>
+            <p>{album.artist.name}</p>
+            <button onClick={() => playFirstTrack(tracks)}>Play</button>
+            <hr />
+          </div>
+        ))}
+      </div>
+    )),
+    Match.tag("Failure", (error) => <h5>{JSON.stringify(error)}</h5>),
+    Match.exhaustive,
+  );
+};
+
+export const UserLibraryWithSuspense = () => (
+  <Suspense fallback="Loading library...">
+    <UserLibrary />
+  </Suspense>
+);

packages/components/library/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/components/library/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "include": [
+    "src",
+    "index.ts"
+  ],
+  "extends": "../../../tsconfig.json"
+}

packages/core/types/src/services/library.ts

@@ -1,4 +1,4 @@
-import { Context, Effect, Stream } from "effect";
+import { Effect, Stream } from "effect";
 import type { Album, ArtistId, Track } from "../model";
 
 /**
@@ -15,7 +15,7 @@ export class NonExistingArtistReferenced extends Error {
 /**
  * Service that provides access to the user's library.
  */
-export type Library = {
+export type ILibrary = {
   /**
    * Returns a stream of albums that are currently stored in the database.
    */
@@ -27,4 +27,7 @@ export type Library = {
 /**
  * Tag to identify the library service.
  */
-export const Library = Context.GenericTag<Library>("@echo/core-types/Library");
+export class Library extends Effect.Tag("@echo/core-types/Library")<
+  Library,
+  ILibrary
+>() {}

packages/web/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@echo/components-add-provider": "^1.0.0",
+    "@echo/components-library": "^1.0.0",
     "@echo/components-provider-status": "^1.0.0",
     "@echo/core-types": "^1.0.0",
     "@echo/services-bootstrap": "^1.0.0",

packages/web/src/App.tsx

@@ -1,49 +1,11 @@
 import { AddProvider } from "@echo/components-add-provider";
+import { UserLibrary } from "@echo/components-library";
 import { ProviderStatus } from "@echo/components-provider-status";
 
 export const App = () => (
   <div>
     <AddProvider />
     <ProviderStatus />
+    <UserLibrary />
   </div>
 );
-
-// const observeLibrary = Effect.gen(function* () {
-//   const library = yield* Library;
-//   return yield* library.observeAlbums();
-// }).pipe(Effect.provide(MainLive));
-
-// const UserLibrary = () => {
-//   const [src, setSrc] = useState<string | undefined>(undefined);
-//   const [albumStream, matcher] = useStream(observeLibrary);
-
-//   const playFirstTrack = (tracks: Track[]) => {
-//     const track = tracks[0];
-//     switch (track.resource.type) {
-//       case "file":
-//         setSrc(track.resource.uri);
-//         break;
-//       case "api":
-//         break;
-//     }
-//   };
-
-//   return matcher.pipe(
-//     Match.tag("empty", () => <h1>Nothing in your library</h1>),
-//     Match.tag("items", ({ items }) => (
-//       <div>
-//         <audio src={src} autoPlay controls />
-//         {items.map(([album, tracks]) => (
-//           <div key={album.id}>
-//             <h1>{album.name}</h1>
-//             <p>{album.artist.name}</p>
-//             <button onClick={() => playFirstTrack(tracks)}>Play</button>
-//             <hr />
-//           </div>
-//         ))}
-//       </div>
-//     )),
-//     Match.tag("failure", () => <h1>Failed to load library</h1>),
-//     Match.exhaustive,
-//   )(albumStream);
-// };