Accept context info and log it in console

newscred · Feb 5, 2024 · 9169a28 · 9169a28
1 parent 15e0df5
commit 9169a28
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/helpers/types.ts b/helpers/types.ts
@@ -5,6 +5,11 @@ export type Config = {
   shade?: string;
 };
 
+export type Context = {
+  taskId: string;
+  contentGuid: string;
+};
+
 export type HostMessage =
   | { type: "connected" }
   | {
@@ -18,16 +23,21 @@ export type HostMessage =
   | {
       type: "mode";
       data: Mode;
+    }
+  | {
+      type: "field-context";
+      data: Context;
     };
 
 export type ComponentMessage =
   | { type: "connect" }
   | { type: "get:field-value" }
   | { type: "get:field-config" }
+  | { type: "get:field-context" }
   | {
       type: "set:field-value";
       data: { color: Color } | undefined;
     }
   | { type: "get:mode" }
-  | { type: "set:mode"; data: Mode}
+  | { type: "set:mode"; data: Mode }
   | { type: "set:style"; data: { height: string } };
diff --git a/pages/component/edit.tsx b/pages/component/edit.tsx
@@ -24,6 +24,7 @@ export default function Component() {
         case "connected": {
           hostChannel.sendMessage({ type: "get:field-value" });
           hostChannel.sendMessage({ type: "get:field-config" });
+          hostChannel.sendMessage({ type: "get:field-context" });
           hostChannel.sendMessage({
             type: "set:style",
             data: {
@@ -47,6 +48,11 @@ export default function Component() {
           console.log("From edit component: The current mode is", message.data);
           return;
         }
+        case "field-context": {
+          const { taskId, contentGuid } = message.data;
+          console.log(`Task ID ${taskId} & Content GUID ${contentGuid}`);
+          return;
+        }
       }
     },
   });

diff --git a/pages/component/view.tsx b/pages/component/view.tsx
@@ -7,7 +7,6 @@ const ColorSummary = dynamic(() => import("@/components/ColorSummary"), {
   loading: () => <p>Loading...</p>,
 });
 
-
 export default function Component() {
   const colorRef = useRef<HTMLDivElement>(null);
   const [color, setColor] = useState<Color | undefined>();
@@ -19,6 +18,7 @@ export default function Component() {
         case "connected": {
           hostChannel.sendMessage({ type: "get:field-value" });
           hostChannel.sendMessage({ type: "get:field-config" });
+          hostChannel.sendMessage({ type: "get:field-context" });
           hostChannel.sendMessage({
             type: "set:style",
             data: {
@@ -42,6 +42,11 @@ export default function Component() {
           console.log("From view component: The current mode is", message.data);
           return;
         }
+        case "field-context": {
+          const { taskId, contentGuid } = message.data;
+          console.log(`Task ID ${taskId} & Content GUID ${contentGuid}`);
+          return;
+        }
       }
     },
   });