Add liveblocks back to site (#1537)

brianlovin · Jul 23, 2021 · 24963fa · 24963fa · vercel · Jul 23, 2021
1 parent 430d540
commit 24963fa
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 48 deletions.
diff --git a/package.json b/package.json
@@ -22,8 +22,9 @@
     "@apollo/client": "^3.3.20",
     "@apollo/link-error": "^2.0.0-beta.3",
     "@apollo/link-schema": "^2.0.0-beta.3",
+    "@liveblocks/client": "^0.10.0",
     "@liveblocks/node": "^0.3.0",
-    "@liveblocks/react": "^0.6.0-beta.5",
+    "@liveblocks/react": "^0.10.0",
     "@tailwindcss/forms": "^0.3.2",
     "@tailwindcss/typography": "^0.4.1",
     "@tippy.js/react": "^3.1.1",

diff --git a/src/components/LiveCursor/Cursor.tsx b/src/components/LiveCursor/Cursor.tsx
@@ -30,15 +30,14 @@ type Event = {
 
 type RippleProps = {
   connectionId: number
-  room: string
   containerRef: MutableRefObject<HTMLDivElement>
 }
 
-export function Ripple({ connectionId, room, containerRef }: RippleProps) {
+export function Ripple({ connectionId, containerRef }: RippleProps) {
   const timeoutId = useRef<number>(0)
   const rippleRef = useRef<HTMLDivElement>(null)
 
-  useEventListener<Event>(room, ({ connectionId: id, event }) => {
+  useEventListener<Event>(({ connectionId: id, event }) => {
     if (
       event.type !== 'POINTER_DOWN' ||
       rippleRef.current == null ||

diff --git a/src/components/LiveCursor/index.tsx b/src/components/LiveCursor/index.tsx
@@ -1,7 +1,8 @@
 import {
+  RoomProvider,
   useBroadcastEvent,
-  useOthersPresence,
-  useUpdateMyPresence,
+  useOthers,
+  useMyPresence,
 } from '@liveblocks/react'
 import React, { useRef } from 'react'
 import { Cursor, Ripple } from './Cursor'
@@ -10,7 +11,7 @@ type Presence = {
   cursor: {
     x: number
     y: number
-  } | null
+  }
 }
 
 type Props = {
@@ -19,21 +20,27 @@ type Props = {
 }
 
 export function LiveCursor({ room, children }: Props) {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const updatePresence = useUpdateMyPresence<Presence>(room, () => ({
-    cursor: null,
-  }))
-  const others = useOthersPresence<Presence>(room)
-  const broadcast = useBroadcastEvent(room)
+  return (
+    <RoomProvider id={room} defaultPresence={() => ({ cursor: null })}>
+      <Canvas room={room}>{children}</Canvas>
+    </RoomProvider>
+  )
+}
+
+export function Canvas({ children }: Props) {
+  const [_, updateMyPresence] = useMyPresence()
+  const containerRef = useRef(null)
+  const others = useOthers<Presence>()
+  const broadcast = useBroadcastEvent()
 
   function onFocus(e) {
-    updatePresence({
+    updateMyPresence({
       cursor: mouseEventToScenePoint(e, containerRef),
     })
   }
 
   function onBlur() {
-    updatePresence({
+    updateMyPresence({
       cursor: null,
     })
   }
@@ -56,19 +63,19 @@ export function LiveCursor({ room, children }: Props) {
   }
 
   function onPointerMove(e) {
-    updatePresence({
+    updateMyPresence({
       cursor: mouseEventToScenePoint(e, containerRef),
     })
   }
 
   function onPointerLeave() {
-    updatePresence({
+    updateMyPresence({
       cursor: null,
     })
   }
 
   function onWheel(e) {
-    updatePresence({
+    updateMyPresence({
       cursor: mouseEventToScenePoint(e, containerRef),
     })
   }
@@ -85,35 +92,33 @@ export function LiveCursor({ room, children }: Props) {
 
       <div className="absolute inset-0 justify-center hidden pointer-events-none md:flex">
         {others.map(({ connectionId, presence }) => {
-          if (presence == null || presence.cursor == null) {
+          if (presence && presence.cursor) {
+            return (
+              <React.Fragment key={`ripple-${connectionId}`}>
+                <Ripple
+                  containerRef={containerRef}
+                  connectionId={connectionId}
+                />
+                <Cursor presence={presence} connectionId={connectionId} />
+              </React.Fragment>
+            )
+          } else {
             return null
           }
-
-          return (
-            <React.Fragment key={`ripple-${connectionId}`}>
-              <Ripple
-                containerRef={containerRef}
-                connectionId={connectionId}
-                room={room}
-              />
-              <Cursor presence={presence} connectionId={connectionId} />
-            </React.Fragment>
-          )
         })}
       </div>
     </div>
   )
 }
 
 function mouseEventToScenePoint(event, containerRef) {
-  if (!containerRef.current || !window) {
+  if (!containerRef.current) {
     return null
   }
 
-  const bounds = containerRef.current.getBoundingClientRect()
-
+  const boundingRectangle = containerRef.current.getBoundingClientRect()
   return {
-    x: event.clientX - bounds.left - bounds.width / 2,
-    y: event.clientY - bounds.y,
+    x: event.clientX - boundingRectangle.left - boundingRectangle.width / 2,
+    y: event.clientY - boundingRectangle.y,
   }
 }
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
@@ -12,10 +12,10 @@ export default function Page(props: Props) {
   const { pathname } = router
   const { children } = props
   return (
-    <>
+    <LiveCursor room={`${pathname}-v4`}>
       <Header />
       <div className="px-4 py-24 md:py-32 lg:px-0">{children}</div>
-    </>
+    </LiveCursor>
   )
 }
 

diff --git a/src/components/Providers/index.tsx b/src/components/Providers/index.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react'
 import Fathom from './Fathom'
 import SEO from './SEO'
-import { createClient, LiveblocksProvider } from '@liveblocks/react'
+import { createClient } from '@liveblocks/client'
+import { LiveblocksProvider } from '@liveblocks/react'
 
 interface Props {
   children?: any

diff --git a/yarn.lock b/yarn.lock
@@ -1823,10 +1823,10 @@
   resolved "https://registry.yarnpkg.com/@josephg/resolvable/-/resolvable-1.0.0.tgz#cd75b09cfad18cd945de9221d403203aa07e3d0a"
   integrity sha512-OfTtjoqB2doov5aTJxkyAMK8dXoo7CjCUQSYUEtiY34jbWduOGV7+168tmCT8COMsUEd5DMSFg/0iAOPCBTNAQ==
 
-"@liveblocks/client@0.6.0-beta.4":
-  version "0.6.0-beta.4"
-  resolved "https://registry.yarnpkg.com/@liveblocks/client/-/client-0.6.0-beta.4.tgz#6533c680e2329ea11bc0064ecaac4dffca87a91e"
-  integrity sha512-06q07Ha1F/0Nhg2KduFg6PtAo3nsSCnzjedJVSzuqKziGvlehWGrAZa9y5YPJePEJfc+2o+izCdECCPFu5hdmQ==
+"@liveblocks/client@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@liveblocks/client/-/client-0.10.0.tgz#8c1aa7ee89c826acd79d966456a462f6c8bcad18"
+  integrity sha512-4uYoHGncqW6FXLbZcumW45l7aogIZfKTrWsxm9stJikUmFrUmNlDfqmTKFnlVHE0SUgp8WEG7vNMnhT2I/ijVA==
 
 "@liveblocks/node@^0.3.0":
   version "0.3.0"
@@ -1835,12 +1835,10 @@
   dependencies:
     node-fetch "^2.6.1"
 
-"@liveblocks/react@^0.6.0-beta.5":
-  version "0.6.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@liveblocks/react/-/react-0.6.0-beta.5.tgz#a2e29813f0715076f778862f4aed299ec6816e14"
-  integrity sha512-u/wJuheLCKBLOfA3O4ge1iZFqCMHRydFFjsrA6+qGZKgDmLD189wOyuia+qzGl3X8Ce7w5Y2gvqk5QfBGcC8dg==
-  dependencies:
-    "@liveblocks/client" "0.6.0-beta.4"
+"@liveblocks/react@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@liveblocks/react/-/react-0.10.0.tgz#6d3cb4d72813dc7d9abe17903b346691973ad4ce"
+  integrity sha512-Got9YXPEBpp0B6847tsJdxaXaL644hRQxkzCDcLj9YXmrZCVCTBJfX2HbuAGDaThTqhDcZ8FrFMlfUYE2kQsAw==
 
 "@mdx-js/util@1.6.22":
   version "1.6.22"