11import { Worker } from "@effect/platform" ;
22import { BrowserWorker } from "@effect/platform-browser" ;
3- import {
4- RuntimeLib ,
5- Service ,
6- SyncWorker ,
7- useActionEffect ,
8- } from "@local/client-lib" ;
3+ import { Service , SyncWorker , useActionEffect } from "@local/client-lib" ;
94import { createFileRoute , Link } from "@tanstack/react-router" ;
105import { Effect } from "effect" ;
116import { startTransition , useEffect } from "react" ;
12- import { useActivity } from "../../lib/hooks/use-activity" ;
13- import { useMetadata } from "../../lib/hooks/use-metadata" ;
7+ import { useFood } from "../../lib/hooks/use-food" ;
8+ import { RuntimeClient } from "../../lib/runtime-client" ;
9+ import { Storage } from "../../lib/storage" ;
1410
1511const bootstrap = ( { workspaceId } : { workspaceId : string } ) =>
1612 Effect . gen ( function * ( ) {
@@ -33,7 +29,7 @@ const bootstrap = ({ workspaceId }: { workspaceId: string }) =>
3329export const Route = createFileRoute ( "/$workspaceId/" ) ( {
3430 component : RouteComponent ,
3531 loader : ( { params : { workspaceId } } ) =>
36- RuntimeLib . runPromise (
32+ RuntimeClient . runPromise (
3733 Service . WorkspaceManager . getById ( { workspaceId } ) . pipe (
3834 Effect . flatMap ( Effect . fromNullable ) ,
3935 Effect . tap ( ( { workspaceId } ) => bootstrap ( { workspaceId } ) )
@@ -44,28 +40,27 @@ export const Route = createFileRoute("/$workspaceId/")({
4440function RouteComponent ( ) {
4541 const workspace = Route . useLoaderData ( ) ;
4642
47- const { data : metadata } = useMetadata ( {
48- workspaceId : workspace . workspaceId ,
49- } ) ;
50- const { data, error, loading } = useActivity ( {
43+ const { data, error, loading } = useFood ( {
5144 workspaceId : workspace . workspaceId ,
5245 } ) ;
5346
54- const [ , onBootstrap , bootstrapping ] = useActionEffect ( bootstrap ) ;
55- const [ , onAdd ] = useActionEffect ( ( formData : FormData ) =>
47+ const [ , onBootstrap , bootstrapping ] = useActionEffect (
48+ RuntimeClient ,
49+ bootstrap
50+ ) ;
51+ const [ , onAdd ] = useActionEffect ( RuntimeClient , ( formData : FormData ) =>
5652 Effect . gen ( function * ( ) {
57- const loroStorage = yield * Service . LoroStorage ;
53+ const loroStorage = yield * Storage ;
5854
59- const firstName = formData . get ( "firstName " ) as string ;
60- const lastName = formData . get ( "lastName " ) as string ;
55+ const name = formData . get ( "name " ) as string ;
56+ const calories = formData . get ( "calories " ) as string ;
6157
62- yield * loroStorage . insertActivity ( {
58+ yield * loroStorage . insertFood ( {
6359 workspaceId : workspace . workspaceId ,
6460 value : {
6561 id : crypto . randomUUID ( ) ,
66- firstName,
67- lastName,
68- age : 10 ,
62+ name,
63+ calories : parseInt ( calories , 10 ) ,
6964 } ,
7065 } ) ;
7166 } )
@@ -75,7 +70,7 @@ function RouteComponent() {
7570 const url = new URL ( "./src/workers/live.ts" , globalThis . origin ) ;
7671 const newWorker = new globalThis . Worker ( url , { type : "module" } ) ;
7772
78- void RuntimeLib . runPromise (
73+ void RuntimeClient . runPromise (
7974 Effect . gen ( function * ( ) {
8075 const pool = yield * Worker . makePoolSerialized ( { size : 1 } ) ;
8176 return yield * pool . broadcast (
@@ -98,7 +93,6 @@ function RouteComponent() {
9893
9994 return (
10095 < div >
101- < pre > { JSON . stringify ( metadata ) } </ pre >
10296 < Link
10397 to = "/$workspaceId/token"
10498 params = { { workspaceId : workspace . workspaceId } }
@@ -119,19 +113,18 @@ function RouteComponent() {
119113 </ button >
120114
121115 < form action = { onAdd } >
122- < input type = "text" name = "firstName " />
123- < input type = "text " name = "lastName" />
124- < button type = "submit" > Add activity </ button >
116+ < input type = "text" name = "name " />
117+ < input type = "number " name = "calories" min = { 1 } />
118+ < button type = "submit" > Add food </ button >
125119 </ form >
126120
127121 < div >
128122 { loading && < p > Loading...</ p > }
129123 { error && < pre > { JSON . stringify ( error , null , 2 ) } </ pre > }
130- { ( data ?? [ ] ) . map ( ( activity ) => (
131- < div key = { activity . id } >
132- < p > First name: { activity . firstName } </ p >
133- < p > Last name: { activity . lastName } </ p >
134- { activity . age && < p > Age: { activity . age } </ p > }
124+ { ( data ?? [ ] ) . map ( ( food ) => (
125+ < div key = { food . id } >
126+ < p > Name: { food . name } </ p >
127+ < p > Calories: { food . calories } </ p >
135128 </ div >
136129 ) ) }
137130 </ div >
0 commit comments