fix: resolve TypeScript issues and

Author: ladunjexa

app/Room.tsx

@@ -14,6 +14,7 @@ export function Room({ children }: { children: ReactNode }) {
         cursor: null,
         cursorColor: null,
         editingText: null,
+        message: null,
       }}
       initialStorage={{
         canvasObjects: new LiveMap(),

app/page.tsx

@@ -74,7 +74,9 @@ export default function Home() {
 
     if (!canvasObjects || canvasObjects.size === 0) return true;
 
-    for (const [key, value] of canvasObjects.entries()) {
+    const entries = Array.from(canvasObjects.entries());
+
+    for (const [key, value] of entries) {
       canvasObjects.delete(key);
     }
 

components/cursor/cursor-chat.tsx

@@ -24,8 +24,9 @@ const CursorChat = ({
     if (e.key === "Enter") {
       setCursorState({
         mode: CursorMode.Chat,
-        previousMessage: cursorState.message,
         message: "",
+        // @ts-ignore
+        previousMessage: cursorState.message,
       });
     } else if (e.key === "Escape") {
       setCursorState({ mode: CursorMode.Hidden });

components/cursor/live-cursors.tsx

@@ -13,7 +13,7 @@ const LiveCursors = ({ others }: LiveCursorProps) => {
         color={COLORS[Number(connectionId) % COLORS.length]}
         x={presence.cursor.x}
         y={presence.cursor.y}
-        message={presence.message}
+        message={presence.message || ""}
       />
     );
   });

components/live.tsx

@@ -33,7 +33,7 @@ type Props = {
 
 const Live = ({ canvasRef, undo, redo }: Props) => {
   const others = useOthers();
-  const [{ cursor }, updateMyPresence] = useMyPresence() as any;
+  const [{ cursor }, updateMyPresence] = useMyPresence();
 
   const [cursorState, setCursorState] = useState<CursorState>({
     mode: CursorMode.Hidden,

constants/index.ts

@@ -2,29 +2,26 @@ import { ActiveElement } from "@/types";
 
 export const COLORS = ["#DC2626", "#D97706", "#059669", "#7C3AED", "#DB2777"];
 
-type TElement =
-  | {
-      icon: string;
-      name: string;
-      value: string | TElement[];
-    }
-  | {
-      icon: string;
-      label: string;
-      value: string;
-    }
-  | {
-      label: string;
-      value: string;
-    };
+type TElement = {
+  name: string;
+  icon: string;
+  value: string;
+  label: string;
+};
+
+type TBaseElement = Pick<TElement, "value" | "label">;
+type TOptionElement = TBaseElement & { icon: string };
+type TNavElement = Omit<TElement, "label" | "value"> & {
+  value: string | ActiveElement[];
+};
 
 type TShortcut = {
   key: string;
   name: string;
   shortcut: string;
 };
 
-export const shapeElements: TElement[] = [
+export const shapeElements: ActiveElement[] = [
   {
     icon: "/assets/rectangle.svg",
     name: "Rectangle",
@@ -57,7 +54,7 @@ export const shapeElements: TElement[] = [
   },
 ];
 
-export const navElements: TElement[] = [
+export const navElements: TNavElement[] = [
   {
     icon: "/assets/select.svg",
     name: "Select",
@@ -96,19 +93,19 @@ export const defaultNavElement: ActiveElement = {
   value: "select",
 };
 
-export const directionOptions: TElement[] = [
+export const directionOptions: TOptionElement[] = [
   { label: "Bring to Front", value: "front", icon: "/assets/front.svg" },
   { label: "Send to Back", value: "back", icon: "/assets/back.svg" },
 ];
 
-export const fontFamilyOptions: TElement[] = [
+export const fontFamilyOptions: TBaseElement[] = [
   { value: "Helvetica", label: "Helvetica" },
   { value: "Times New Roman", label: "Times New Roman" },
   { value: "Comic Sans MS", label: "Comic Sans MS" },
   { value: "Brush Script MT", label: "Brush Script MT" },
 ];
 
-export const fontSizeOptions: TElement[] = [
+export const fontSizeOptions: TBaseElement[] = [
   {
     value: "10",
     label: "10",
@@ -167,7 +164,7 @@ export const fontSizeOptions: TElement[] = [
   },
 ];
 
-export const fontWeightOptions: TElement[] = [
+export const fontWeightOptions: TBaseElement[] = [
   {
     value: "400",
     label: "Normal",
@@ -182,7 +179,7 @@ export const fontWeightOptions: TElement[] = [
   },
 ];
 
-export const alignmentOptions: TElement[] = [
+export const alignmentOptions: TOptionElement[] = [
   { value: "left", label: "Align Left", icon: "/assets/align-left.svg" },
   {
     value: "horizontalCenter",

liveblocks.config.ts

@@ -1,5 +1,6 @@
 import { LiveMap, createClient } from "@liveblocks/client";
 import { createRoomContext, createLiveblocksContext } from "@liveblocks/react";
+import { ReactionEvent } from "./types";
 
 const client = createClient({
   publicApiKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY!,
@@ -50,9 +51,13 @@ const client = createClient({
 // 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 = {
+export type Presence = {
   // cursor: { x: number, y: number } | null,
   // ...
+  cursor: { x: number; y: number } | null;
+  cursorColor: string | null;
+  editingText: string | null;
+  message: string | null;
 };
 
 // Optionally, Storage represents the shared document that persists in the
@@ -75,10 +80,11 @@ 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 = {
+//   // type: "NOTIFICATION",
+//   // ...
+// };
+type RoomEvent = ReactionEvent;
 
 // Optionally, when using Comments, ThreadMetadata represents metadata on
 // each thread. Can only contain booleans, strings, and numbers.

types/index.ts

@@ -1,3 +1,4 @@
+import { Presence } from "@/liveblocks.config";
 import { BaseUserMeta, User } from "@liveblocks/client";
 import { Gradient, Pattern } from "fabric/fabric-impl";
 
@@ -118,12 +119,12 @@ export type ShapesMenuProps = {
   imageInputRef: any;
 };
 
-export type Presence = any;
+// export type Presence = any;
 
 export type CursorProps = {
   color: string;
   x: number;
-  y: string;
+  y: number;
   message: string;
 };