react-sdk: useJoinSpace (#599)

This updates the `useJoinSpace` action to have the signature of `join :
(spaceId, signer, options) => void`, instead of passing the `spaceId` as
a hook parameter

packages/playground/src/components/blocks/channels.tsx

@@ -33,16 +33,18 @@ export const ChannelsBlock = ({ changeChannel }: ChannelsBlockProps) => {
     return (
         <Block title={`Channels in ${space.metadata?.name || 'Unnamed Space'}`}>
             <CreateChannel variant="secondary" spaceId={spaceId} onChannelCreated={changeChannel} />
-            <div className="flex flex-col gap-1">
+            <div className="flex flex-col gap-2">
                 <span className="text-xs">Select a channel to start messaging</span>
-                {space.channelIds.map((channelId) => (
-                    <ChannelInfo
-                        key={`${spaceId}-${channelId}`}
-                        spaceId={space.id}
-                        channelId={channelId}
-                        changeChannel={changeChannel}
-                    />
-                ))}
+                <div className="flex max-h-64 flex-col gap-1 overflow-y-auto">
+                    {space.channelIds.map((channelId) => (
+                        <ChannelInfo
+                            key={`${spaceId}-${channelId}`}
+                            spaceId={space.id}
+                            channelId={channelId}
+                            changeChannel={changeChannel}
+                        />
+                    ))}
+                </div>
             </div>
             {space.channelIds.length === 0 && (
                 <p className="pt-4 text-center text-sm text-secondary-foreground">
@@ -94,7 +96,7 @@ export const CreateChannel = (
         <Block {...rest}>
             <Form {...form}>
                 <form
-                    className="space-y-8"
+                    className="space-y-3"
                     onSubmit={form.handleSubmit(async ({ channelName }) => {
                         if (!signer) {
                             return

packages/playground/src/components/blocks/spaces.tsx

@@ -1,4 +1,4 @@
-import { useCreateSpace, useSpace, useUserSpaces } from '@river-build/react-sdk'
+import { useCreateSpace, useJoinSpace, useSpace, useUserSpaces } from '@river-build/react-sdk'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
@@ -21,7 +21,7 @@ type SpacesBlockProps = {
     changeSpace: (spaceId: string) => void
 }
 
-const formSchema = z.object({
+const createSpaceFormSchema = z.object({
     spaceName: z.string().min(1, { message: 'Space name is required' }),
 })
 
@@ -30,6 +30,7 @@ export const SpacesBlock = ({ changeSpace }: SpacesBlockProps) => {
     return (
         <Block title="Spaces">
             <CreateSpace variant="secondary" onCreateSpace={changeSpace} />
+            <JoinSpace variant="secondary" onJoinSpace={changeSpace} />
             <span className="text-xs">Select a space to start messaging</span>
             <div className="flex flex-col gap-1">
                 {spaceIds.map((spaceId) => (
@@ -64,21 +65,71 @@ const SpaceInfo = ({
     )
 }
 
+const joinSpaceFormSchema = z.object({
+    spaceId: z.string().min(1, { message: 'Space Id is required' }),
+})
+export const JoinSpace = (props: { onJoinSpace: (spaceId: string) => void } & BlockProps) => {
+    const { onJoinSpace, ...rest } = props
+    const { joinSpace, isPending } = useJoinSpace()
+    const signer = useEthersSigner()
+
+    const form = useForm<z.infer<typeof joinSpaceFormSchema>>({
+        resolver: zodResolver(joinSpaceFormSchema),
+        defaultValues: { spaceId: '' },
+    })
+
+    return (
+        <Block {...rest}>
+            <Form {...form}>
+                <form
+                    className="space-y-4"
+                    onSubmit={form.handleSubmit(async ({ spaceId }) => {
+                        if (!signer) {
+                            return
+                        }
+                        joinSpace(spaceId, signer).then(() => {
+                            onJoinSpace(spaceId)
+                        })
+                    })}
+                >
+                    <FormField
+                        control={form.control}
+                        name="spaceId"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Join Space</FormLabel>
+                                <FormControl>
+                                    <Input placeholder="spaceId" {...field} />
+                                </FormControl>
+                                <FormDescription>
+                                    The spaceId of the space you want to join.
+                                </FormDescription>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                    <Button type="submit"> {isPending ? 'Joining...' : 'Join'}</Button>
+                </form>
+            </Form>
+        </Block>
+    )
+}
+
 export const CreateSpace = (props: { onCreateSpace: (spaceId: string) => void } & BlockProps) => {
     const { onCreateSpace, ...rest } = props
     const { createSpace, isPending } = useCreateSpace()
     const signer = useEthersSigner()
 
-    const form = useForm<z.infer<typeof formSchema>>({
-        resolver: zodResolver(formSchema),
+    const form = useForm<z.infer<typeof createSpaceFormSchema>>({
+        resolver: zodResolver(createSpaceFormSchema),
         defaultValues: { spaceName: '' },
     })
 
     return (
         <Block {...rest}>
             <Form {...form}>
                 <form
-                    className="space-y-8"
+                    className="space-y-3"
                     onSubmit={form.handleSubmit(async ({ spaceName }) => {
                         if (!signer) {
                             return

packages/playground/src/components/ui/input.tsx

@@ -9,6 +9,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         return (
             <input
                 type={type}
+                spellCheck={false}
+                autoComplete="off"
                 className={cn(
                     'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1',
                     'text-sm shadow-sm transition-colors placeholder:text-muted-foreground',

packages/playground/src/routes/components.tsx

@@ -73,7 +73,7 @@ const FormExample = () => {
     }
     return (
         <Form {...form}>
-            <form className="space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
+            <form className="space-y-3" onSubmit={form.handleSubmit(onSubmit)}>
                 <FormField
                     control={form.control}
                     name="username"

packages/react-sdk/src/index.ts

@@ -6,6 +6,7 @@ export * from './connectRiver'
 export * from './useChannel'
 export * from './useCreateChannel'
 export * from './useCreateSpace'
+export * from './useJoinSpace'
 export * from './useObservable'
 export * from './useRiver'
 export * from './useRiverAuthStatus'

packages/react-sdk/src/useJoinSpace.ts

@@ -1,16 +1,15 @@
 'use client'
 
-import type { Space } from '@river-build/sdk'
+import type { Spaces } from '@river-build/sdk'
 import { type ActionConfig, useAction } from './internals/useAction'
 import { useSyncAgent } from './useSyncAgent'
 
-export const useJoinSpace = (spaceId: string, config: ActionConfig<Space['join']> = {}) => {
+export const useJoinSpace = (config: ActionConfig<Spaces['joinSpace']> = {}) => {
     const sync = useSyncAgent()
-    const space = sync.spaces.getSpace(spaceId)
-    const { action: join, ...rest } = useAction(space, 'join', config)
+    const { action: joinSpace, ...rest } = useAction(sync.spaces, 'joinSpace', config)
 
     return {
-        join,
+        joinSpace,
         ...rest,
     }
 }

packages/sdk/src/sync-agent/spaces/spaces.ts

@@ -115,4 +115,9 @@ export class Spaces extends PersistedObservable<SpacesModel> {
         })
         return { spaceId, defaultChannelId }
     }
+
+    async joinSpace(spaceId: string, ...args: Parameters<Space['join']>) {
+        const space = this.getSpace(spaceId)
+        return space.join(...args)
+    }
 }