@towns-labs/react-sdk 2.0.1

package/src/useUserDms.ts

@@ -0,0 +1,38 @@
+import type { Dms } from '@towns-labs/sdk'
+import type { ObservableConfig } from './useObservable'
+import { useTowns } from './useTowns'
+
+/**
+ * Hook to get the direct messages of the current user.
+ * @param config - Configuration options for the observable.
+ * @returns The list of all direct messages stream ids of the current user.
+ * @example
+ *
+ * You can combine this hook with the `useDm`, `useMemberList` and `useMember` hooks to get all direct messages of the current user and render them, showing the name of the other user in the dm:
+ *
+ * ```tsx
+ * import { useDm, useMyMember, useMemberList, useMember } from '@towns-labs/react-sdk'
+ *
+ * const AllDms = () => {
+ *     const { streamIds } = useUserDms()
+ *     return <>{streamIds.map((streamId) => <Dm key={streamId} streamId={streamId} />)}</>
+ * }
+ *
+ * const Dm = ({ streamId }: { streamId: string }) => {
+ *     const { data: dm } = useDm(streamId)
+ *     const { userId: myUserId } = useMyMember(streamId)
+ *     const { data: members } = useMemberList(streamId)
+ *     const { userId, username, displayName } = useMember({
+ *        streamId,
+ *        // We find the other user in the dm by checking the userIds in the member list
+ *        // and defaulting to the current user if we don't find one, since a user is able to send a dm to themselves
+ *        userId: members.userIds.find((userId) => userId !== sync.userId) || sync.userId,
+ *     })
+ *     return <span>{userId === myUserId ? 'You' : displayName || username || userId}</span>
+ * }
+ * ```
+ */
+export const useUserDms = (config?: ObservableConfig.FromObservable<Dms>) => {
+    const { data, ...rest } = useTowns((s) => s.dms, config)
+    return { streamIds: data.streamIds, ...rest }
+}

package/src/useUserGdms.ts

@@ -0,0 +1,29 @@
+import type { Gdms } from '@towns-labs/sdk'
+import type { ObservableConfig } from './useObservable'
+import { useTowns } from './useTowns'
+
+/**
+ * Hook to get the group dm streams of the current user.
+ * @param config - Configuration options for the observable.
+ * @returns The list of all group dm stream ids of the current user.
+ * @example
+ * You can combine this hook with the `useGdm` hook to get all group dm streams of the current user and render them:
+ *
+ * ```tsx
+ * import { useUserGdms, useGdm } from '@towns-labs/react-sdk'
+ *
+ * const AllGdms = () => {
+ *     const { streamIds } = useUserGdms()
+ *     return <>{streamIds.map((streamId) => <Gdm key={streamId} streamId={streamId} />)}</>
+ * }
+ *
+ * const Gdm = ({ streamId }: { streamId: string }) => {
+ *     const { data: gdm } = useGdm(streamId)
+ *     return <div>{gdm.metadata?.name || 'Unnamed Gdm'}</div>
+ * }
+ * ```
+ */
+export const useUserGdms = (config?: ObservableConfig.FromObservable<Gdms>) => {
+    const { data, ...rest } = useTowns((s) => s.gdms, config)
+    return { streamIds: data.streamIds, ...rest }
+}

package/src/useUserSpaces.ts

@@ -0,0 +1,29 @@
+import type { Spaces } from '@towns-labs/sdk'
+import type { ObservableConfig } from './useObservable'
+import { useTowns } from './useTowns'
+
+/**
+ * Hook to get the spaces of the current user.
+ * @param config - Configuration options for the observable.
+ * @returns The list of all space ids of the current user.
+ * @example
+ * You can combine this hook with the `useSpace` hook to get all spaces of the current user and render them:
+ *
+ * ```tsx
+ * import { useUserSpaces, useSpace } from '@towns-labs/react-sdk'
+ *
+ * const AllSpaces = () => {
+ *     const { spaceIds } = useUserSpaces()
+ *     return <>{spaceIds.map((spaceId) => <Space key={spaceId} spaceId={spaceId} />)}</>
+ * }
+ *
+ * const Space = ({ spaceId }: { spaceId: string }) => {
+ *     const { data: space } = useSpace(spaceId)
+ *     return <div>{space.metadata?.name || 'Unnamed Space'}</div>
+ * }
+ * ```
+ */
+export const useUserSpaces = (config?: ObservableConfig.FromObservable<Spaces>) => {
+    const { data, ...rest } = useTowns((s) => s.spaces, config)
+    return { spaceIds: data.spaceIds, ...rest }
+}

package/src/utils.ts

@@ -0,0 +1,28 @@
+import {
+    type Channel,
+    type Dm,
+    type Gdm,
+    Space,
+    type SyncAgent,
+    isChannelStreamId,
+    isDMChannelStreamId,
+    isGDMChannelStreamId,
+    isSpaceStreamId,
+    spaceIdFromChannelId,
+} from '@towns-labs/sdk'
+
+export const getRoom = (sync: SyncAgent, streamId: string): Gdm | Channel | Dm | Space => {
+    if (isChannelStreamId(streamId)) {
+        return sync.spaces.getSpace(spaceIdFromChannelId(streamId)).getChannel(streamId)
+    }
+    if (isGDMChannelStreamId(streamId)) {
+        return sync.gdms.getGdm(streamId)
+    }
+    if (isDMChannelStreamId(streamId)) {
+        return sync.dms.getDm(streamId)
+    }
+    if (isSpaceStreamId(streamId)) {
+        return sync.spaces.getSpace(streamId)
+    }
+    throw new Error('Invalid room type')
+}