Luftbnb bookings and playlist dreams (#111)

seefeldb · web-flow · commit c9c7434b368f · 2024-06-25T10:22:06.000-07:00
* add very simple bookings to luftbnb
* playlists for trips being suggested as dream
* terrible hack to open dream in new tab
diff --git a/typescript/packages/lookslike-high-level/src/data.ts b/typescript/packages/lookslike-high-level/src/data.ts
@@ -9,7 +9,9 @@ import { luftBnBSearch } from "./recipes/luft-bnb-search.js";
 import { ticket } from "./recipes/ticket.js";
 import { routine } from "./recipes/routine.js";
 
-import "./recipes/todo-list-as-task.js"; // Necessary, so that suggestions are indexed.
+// Necessary, so that suggestions are indexed.
+import "./recipes/todo-list-as-task.js";
+import "./recipes/playlist.js";
 
 export const dataGems = state<Gem[]>([]);
 
@@ -30,6 +32,7 @@ addGems([
   }),
   ticket({
     title: "Reservation for 'Counterstrike the Musical'",
+    show: "Counterstrike the Musical",
     date: "2021-07-07",
     location: "New York",
   }),
@@ -85,3 +88,10 @@ function getFridayAndMondayDateStrings() {
     endDate: formatDate(followingMonday),
   };
 }
+
+// Terrible hack to open a saga from a recipe
+let openSagaOpener: (saga: Gem) => void = () => {};
+export const openSaga = (saga: Gem) => openSagaOpener(saga);
+openSaga.set = (opener: (saga: Gem) => void) => {
+  openSagaOpener = opener;
+};
diff --git a/typescript/packages/lookslike-high-level/src/main.ts b/typescript/packages/lookslike-high-level/src/main.ts
@@ -1,12 +1,13 @@
 export { components } from "@commontools/common-ui";
 import { CommonWindowManager } from "./components/window-manager.js";
 export { components as myComponents } from "./components.js";
-import { dataGems, recipes } from "./data.js";
+import { dataGems, recipes, openSaga } from "./data.js";
 import { home } from "./recipes/home.js";
 
 document.addEventListener("DOMContentLoaded", () => {
   const windowManager = document.getElementById(
-    "window-manager",
+    "window-manager"
   )! as CommonWindowManager;
+  openSaga.set(windowManager.openSaga.bind(windowManager));
   windowManager.openSaga(home({ sagas: dataGems, recipes }));
 });
diff --git a/typescript/packages/lookslike-high-level/src/recipes/annotation.ts b/typescript/packages/lookslike-high-level/src/recipes/annotation.ts
@@ -1,6 +1,6 @@
 import { tags } from "@commontools/common-ui";
 import { signal, stream } from "@commontools/common-frp";
-import { dataGems } from "../data.js";
+import { dataGems, openSaga } from "../data.js";
 import {
   recipe,
   Recipe,
@@ -13,7 +13,7 @@ import {
 } from "../recipe.js";
 import { effect } from "@commontools/common-frp/signal";
 import { suggestionClient } from "../llm-client.js";
-const { include } = tags;
+const { include, div } = tags;
 const { state, computed, isSignal } = signal;
 const { subject } = stream;
 
@@ -63,14 +63,19 @@ export const annotation = recipe(
     });
 
     const UI = computed(
-      [suggestion, acceptedSuggestion],
-      (suggestion, acceptedSuggestion) => {
+      [suggestion, acceptedSuggestion, target],
+      (suggestion, acceptedSuggestion, target) => {
         if (acceptedSuggestion) {
           const acceptedRecipe = acceptedSuggestion.recipe;
           const accepted = acceptedRecipe({
             ...data,
             ...acceptedSuggestion.boundGems,
           });
+          // HACK: -1 is home screen and so let's open a new tab
+          if (target === -1) {
+            openSaga(accepted);
+            return div({});
+          }
           return include({ content: accepted.UI });
         } else if (suggestion) {
           return tags.suggestions({
diff --git a/typescript/packages/lookslike-high-level/src/recipes/home.ts b/typescript/packages/lookslike-high-level/src/recipes/home.ts
@@ -3,6 +3,7 @@ import { signal } from "@commontools/common-frp";
 import { recipe, Gem, ID } from "../recipe.js";
 import { sagaLink } from "../components/saga-link.js";
 import { recipeLink } from "../components/recipe-link.js";
+import { annotation } from "../components/annotation.js";
 const { binding, repeat } = view;
 const { vstack } = tags;
 
@@ -34,6 +35,11 @@ export const home = recipe("home screen", ({ sagas, recipes }) => {
         {},
         repeat(recipesWithIDs, recipeLink({ recipe: binding("recipe") }))
       ),
+      annotation({
+        query: "dream fun things to explore",
+        target: -1,
+        data: { sagas, recipes },
+      }),
     ]),
   };
 });
diff --git a/typescript/packages/lookslike-high-level/src/recipes/luft-bnb-search.ts b/typescript/packages/lookslike-high-level/src/recipes/luft-bnb-search.ts
@@ -3,6 +3,7 @@ import { signal, stream, Sendable } from "@commontools/common-frp";
 import { generateData } from "@commontools/llm-client";
 import { Gem, recipe, NAME, addSuggestion, description } from "../recipe.js";
 import { sagaLink } from "../components/saga-link.js";
+import { addGems } from "../data.js";
 import { mockResultClient } from "../llm-client.js";
 const { binding, repeat } = view;
 const { vstack, hstack, div, commonInput, button, input, include } = tags;
@@ -55,17 +56,21 @@ export const luftBnBSearch = recipe(
     );
 
     const book = subject<{ id: string }>();
+    const booking = state<Gem | undefined>(undefined);
     book.sink({
-      send: ({ id }) =>
-        console.log(
-          "Booked",
-          places.get().find((place) => place.id === id)
-        ),
+      send: ({ id }) => {
+        const place = places.get().find((place) => place.id === id);
+        const newBooking = luftBnBBooking({ place, startDate, endDate });
+        addGems([newBooking]);
+        booking.send(newBooking);
+        console.log("Booked", place);
+      },
     });
 
     const summaryUI = computed(
-      [places, startDate, endDate],
-      (places: LuftBnBPlace[], startDate, endDate) => {
+      [booking, places, startDate, endDate],
+      (booking, places: LuftBnBPlace[], startDate, endDate) => {
+        if (booking) return booking.UI;
         if (!places.length) return div({}, ["Searching..."]);
         const place = places[0];
         return vstack({}, [
@@ -79,47 +84,55 @@ export const luftBnBSearch = recipe(
     );
 
     return {
-      UI: vstack({}, [
-        hstack({}, [
-          input({
-            type: "date",
-            value: startDate,
-            placeholder: "Type of place",
-            "@common-input#value": startDate,
-          }),
-          input({
-            type: "date",
-            value: endDate,
-            placeholder: "Type of place",
-            "@common-input#value": endDate,
-          }),
-        ]),
-        commonInput({
-          value: location,
-          placeholder: "Location",
-          "@common-input#value": location,
-        }),
-        button({ "@click": search }, ["Search"]),
-        vstack(
-          {},
-          repeat(
-            summaries,
-            vstack({}, [
-              div({}, binding("name")),
-              div({}, binding("description")),
-              div({}, binding("location")),
-              div({}, binding("rating")),
-              include({ content: binding("annotationUI") }),
-              button({ "@click": book, id: binding("id") }, binding("bookFor")),
+      UI: computed([booking], (booking) =>
+        booking
+          ? include({ content: booking.UI })
+          : vstack({}, [
+              hstack({}, [
+                input({
+                  type: "date",
+                  value: startDate,
+                  placeholder: "Type of place",
+                  "@common-input#value": startDate,
+                }),
+                input({
+                  type: "date",
+                  value: endDate,
+                  placeholder: "Type of place",
+                  "@common-input#value": endDate,
+                }),
+              ]),
+              commonInput({
+                value: location,
+                placeholder: "Location",
+                "@common-input#value": location,
+              }),
+              button({ "@click": search }, ["Search"]),
+              vstack(
+                {},
+                repeat(
+                  summaries,
+                  vstack({}, [
+                    div({}, binding("name")),
+                    div({}, binding("description")),
+                    div({}, binding("location")),
+                    div({}, binding("rating")),
+                    include({ content: binding("annotationUI") }),
+                    button(
+                      { "@click": book, id: binding("id") },
+                      binding("bookFor")
+                    ),
+                  ])
+                )
+              ),
             ])
-          )
-        ),
-      ]),
+      ),
       summaryUI: summaryUI,
       startDate,
       endDate,
       location,
       places,
+      booking,
       [NAME]: computed(
         [location, startDate, endDate],
         (location, startDate: string, endDate: string) =>
@@ -129,6 +142,22 @@ export const luftBnBSearch = recipe(
   }
 );
 
+export const luftBnBBooking = recipe(
+  "booking",
+  ({ place, startDate, endDate }) => {
+    const text = computed(
+      [place, startDate, endDate],
+      (place: LuftBnBPlace, startDate, endDate) =>
+        `Booked ${place.title} LuftBnB from ${startDate} to ${endDate} for $${place.pricePerNight} per night`
+    );
+    const name = computed(
+      [place],
+      (place: LuftBnBPlace) => `Booking for LuftBnB in ${place.location}`
+    );
+    return { UI: div({}, text), [NAME]: name, place, startDate, endDate };
+  }
+);
+
 async function performLuftBnBSearch(location: string): Promise<LuftBnBPlace[]> {
   if (!location) return [];
   const result = (await generateData(
diff --git a/typescript/packages/lookslike-high-level/src/recipes/playlist.ts b/typescript/packages/lookslike-high-level/src/recipes/playlist.ts
@@ -0,0 +1,75 @@
+import { view, tags } from "@commontools/common-ui";
+import { state, computed, effect } from "@commontools/common-frp/signal";
+import { generateData } from "@commontools/llm-client";
+import { mockResultClient } from "../llm-client.js";
+import { recipe, Gem, NAME, addSuggestion, description } from "../recipe.js";
+const { repeat } = view;
+const { vstack, hstack, div, commonInput, button, input, include } = tags;
+
+interface Playlist {
+  title: string;
+  songs: string[];
+}
+
+export const playlistForTrip = recipe(
+  "playlist for trip",
+  ({ ticket, booking }) => {
+    const playlist = state<Playlist>({ title: "", songs: [] });
+    const name = computed([playlist, ticket], (playlist, ticket: Gem) =>
+      playlist.title
+        ? playlist.title
+        : `Creating playlist for ${ticket.show.get()}`
+    );
+
+    effect([ticket, booking], (ticket: Gem, booking: Gem) => {
+      if (!ticket || !booking) return;
+      const result = generateData(
+        mockResultClient,
+        `Create a playlist in anticipation of a trip to see ${ticket.show.get()}`,
+        {},
+        {
+          type: "object",
+          properties: {
+            title: {
+              type: "string",
+              title: "Title of the playlist",
+            },
+            songs: {
+              type: "array",
+              title: "Songs",
+              items: {
+                type: "string",
+              },
+              description: "10 songs to listen to on the way to the show",
+            },
+          },
+        }
+      );
+
+      result.then((data) => playlist.send(data as Playlist));
+    });
+    return {
+      UI: computed([playlist], (playlist: Playlist) =>
+        vstack({}, [
+          playlist.title,
+          vstack(
+            {},
+            repeat(state(playlist.songs), (song: string) => div({}, [song]))
+          ),
+        ])
+      ),
+      [NAME]: name,
+      playlist,
+    };
+  }
+);
+
+addSuggestion({
+  description: description`Make a playlist for ${"ticket"}`,
+  recipe: playlistForTrip,
+  bindings: { sagas: "sagas" },
+  dataGems: {
+    ticket: "ticket",
+    booking: "booking",
+  },
+});
