From b1ab232900eeccf9f2088ee2f657e0f87b1cc631 Mon Sep 17 00:00:00 2001 From: Ahmad <103906421+ahmadk953@users.noreply.github.com> Date: Fri, 8 Mar 2024 23:03:19 -0500 Subject: [PATCH] Updated Liveblocks Config and Added Liveblocks test Pages (Non-Functional) --- .../board/[boardId]/test/cursor.tsx | 27 +++++ .../board/[boardId]/test/layout.tsx | 22 ++++ .../(dashboard)/board/[boardId]/test/page.tsx | 38 ++++++ liveblocks.config.ts | 112 +++++------------- package-lock.json | 2 +- package.json | 2 +- 6 files changed, 117 insertions(+), 86 deletions(-) create mode 100644 app/(platform)/(dashboard)/board/[boardId]/test/cursor.tsx create mode 100644 app/(platform)/(dashboard)/board/[boardId]/test/layout.tsx create mode 100644 app/(platform)/(dashboard)/board/[boardId]/test/page.tsx diff --git a/app/(platform)/(dashboard)/board/[boardId]/test/cursor.tsx b/app/(platform)/(dashboard)/board/[boardId]/test/cursor.tsx new file mode 100644 index 0000000..1c44450 --- /dev/null +++ b/app/(platform)/(dashboard)/board/[boardId]/test/cursor.tsx @@ -0,0 +1,27 @@ +type Props = { + x: number; + y: number; +}; + +export function Cursor({ x, y }: Props) { + return ( + + + + ); +} diff --git a/app/(platform)/(dashboard)/board/[boardId]/test/layout.tsx b/app/(platform)/(dashboard)/board/[boardId]/test/layout.tsx new file mode 100644 index 0000000..b9428b4 --- /dev/null +++ b/app/(platform)/(dashboard)/board/[boardId]/test/layout.tsx @@ -0,0 +1,22 @@ +'use client'; + +import { ReactNode } from 'react'; +import { RoomProvider } from '@/liveblocks.config'; +import { ClientSideSuspense } from '@liveblocks/react'; +import { useAuth } from '@clerk/nextjs'; + +const Room = ({ children }: { children: ReactNode }) => { + const { orgId } = useAuth(); + + if (!orgId) return null; + + return ( + + Loading…}> + {() => children} + + + ); +} + +export default Room; diff --git a/app/(platform)/(dashboard)/board/[boardId]/test/page.tsx b/app/(platform)/(dashboard)/board/[boardId]/test/page.tsx new file mode 100644 index 0000000..b5e16c7 --- /dev/null +++ b/app/(platform)/(dashboard)/board/[boardId]/test/page.tsx @@ -0,0 +1,38 @@ +import { useMyPresence, useOthers } from '@/liveblocks.config'; +import { Cursor } from './cursor'; + +const TestPage = () => { + const [myPresence, updateMyPresence] = useMyPresence(); + + const others = useOthers(); + + function handlePointerMove(e: any) { + const cursor = { x: Math.floor(e.clientX), y: Math.floor(e.clientY) }; + updateMyPresence({ cursor }); + } + + function handlePointerLeave() { + updateMyPresence({ cursor: null }); + } + + return ( +
+ Cursor: {JSON.stringify(myPresence.cursor)} + {others + .filter((other) => other.presence.cursor !== null) + .map(({ connectionId, presence }) => ( + + ))} +
+ ); +}; + +export default TestPage; diff --git a/liveblocks.config.ts b/liveblocks.config.ts index 42d25ec..8ff7237 100644 --- a/liveblocks.config.ts +++ b/liveblocks.config.ts @@ -1,51 +1,22 @@ -import { createClient } from '@liveblocks/client'; -import { createRoomContext } from '@liveblocks/react'; - +import { createClient } from "@liveblocks/client"; +import { createRoomContext, createLiveblocksContext } from "@liveblocks/react"; + const client = createClient({ - // publicApiKey: process.env.LIVEBLOCKS_PUBLIC_DEV_API_KEY!, - authEndpoint: '/api/liveblocks-auth', - // throttle: 100, + publicApiKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY!, + throttle: 16, }); -// Presence represents the properties that exist on every user in the Room -// and that will automatically be kept in sync. Accessible through the -// `user.presence` property. Must be JSON-serializable. type Presence = { - // cursor: { x: number, y: number } | null, - // ... + cursor: { x: number; y: number } | null; }; -// Optionally, Storage represents the shared document that persists in the -// Room, even after all users leave. Fields under Storage typically are -// LiveList, LiveMap, LiveObject instances, for which updates are -// automatically persisted and synced to all connected clients. -type Storage = { - // author: LiveObject<{ firstName: string, lastName: string }>, - // ... -}; +type Storage = {}; -// Optionally, UserMeta represents static/readonly metadata on each user, as -// provided by your own custom auth back end (if used). Useful for data that -// will not change during a session, like a user's name or avatar. -type UserMeta = { - id?: string; // Accessible through `user.id` - // info?: Json, // Accessible through `user.info` -}; +type UserMeta = {}; -// Optionally, the type of custom events broadcast and listened to in this -// room. Use a union for multiple events. Must be JSON-serializable. -type RoomEvent = { - // type: "NOTIFICATION", - // ... -}; +type RoomEvent = {}; -// Optionally, when using Comments, ThreadMetadata represents metadata on -// each thread. Can only contain booleans, strings, and numbers. -export type ThreadMetadata = { - // resolved: boolean; - // quote: string; - // time: number; -}; +export type ThreadMetadata = {}; export const { suspense: { @@ -56,15 +27,13 @@ export const { useSelf, useOthers, useOthersMapped, + useOthersListener, useOthersConnectionIds, useOther, useBroadcastEvent, useEventListener, useErrorListener, useStorage, - useObject, - useMap, - useList, useBatch, useHistory, useUndo, @@ -75,7 +44,6 @@ export const { useStatus, useLostConnectionListener, useThreads, - useUser, useCreateThread, useEditThreadMetadata, useCreateComment, @@ -83,45 +51,21 @@ export const { useDeleteComment, useAddReaction, useRemoveReaction, - }, -} = createRoomContext( - client, - { - async resolveUsers({ userIds }) { - // Used only for Comments. Return a list of user information retrieved - // from `userIds`. This info is used in comments, mentions etc. - - // const usersData = await __fetchUsersFromDB__(userIds); - // - // return usersData.map((userData) => ({ - // name: userData.name, - // avatar: userData.avatar.src, - // })); - - return []; - }, - async resolveMentionSuggestions({ text, roomId }) { - // Used only for Comments. Return a list of userIds that match `text`. - // These userIds are used to create a mention list when typing in the - // composer. - // - // For example when you type "@jo", `text` will be `"jo"`, and - // you should to return an array with John and Joanna's userIds: - // ["john@example.com", "joanna@example.com"] - - // const userIds = await __fetchAllUserIdsFromDB__(roomId); - // - // Return all userIds if no `text` - // if (!text) { - // return userIds; - // } - // - // Otherwise, filter userIds for the search `text` and return - // return userIds.filter((userId) => - // userId.toLowerCase().includes(text.toLowerCase()) - // ); - - return []; - }, + useThreadSubscription, + useMarkThreadAsRead, + useRoomNotificationSettings, + useUpdateRoomNotificationSettings, } -); +} = createRoomContext(client); + +export const { + suspense: { + LiveblocksProvider, + useMarkInboxNotificationAsRead, + useMarkAllInboxNotificationsAsRead, + useInboxNotifications, + useUnreadInboxNotificationsCount, + useUser, + useRoomInfo, + } +} = createLiveblocksContext(client); diff --git a/package-lock.json b/package-lock.json index 7d6b90d..0f889a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@clerk/nextjs": "^4.29.9", "@hello-pangea/dnd": "^16.5.0", - "@liveblocks/client": "^1.9.8", + "@liveblocks/client": "^1.10.2", "@liveblocks/node": "^1.10.2", "@liveblocks/react": "^1.10.2", "@microsoft/eslint-formatter-sarif": "^3.0.0", diff --git a/package.json b/package.json index 7fd069e..c2fcc4b 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "dependencies": { "@clerk/nextjs": "^4.29.9", "@hello-pangea/dnd": "^16.5.0", - "@liveblocks/client": "^1.9.8", + "@liveblocks/client": "^1.10.2", "@liveblocks/node": "^1.10.2", "@liveblocks/react": "^1.10.2", "@microsoft/eslint-formatter-sarif": "^3.0.0",