feat embed modifications (#244)

apps/demo/components/Actions/Actions.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { saveAs } from 'file-saver';
-import { Button } from '@impler/react';
+import { useImpler } from '@impler/react';
 import { IUpload } from '@impler/shared';
 import { constants, variables } from '@config';
 import { useAppState } from '@context/app.context';
@@ -25,16 +25,25 @@ const Actions = ({ PROJECT_ID, ACCESS_TOKEN, PRIMARY_COLOR, TEMPLATE }: ActionPr
     setShowInvalidRecords,
     setTotalRecords,
   } = useAppState();
+  const onUploadComplete = useCallback(
+    (uploadData: IUpload) => {
+      setUpload(uploadData);
+      setPage(variables.ONE);
+      setShowInvalidRecords(false);
+      setTotalRecords(uploadData.validRecords);
+      setHasInvalidRecords(uploadData.invalidRecords > variables.ZERO);
+    },
+    [setHasInvalidRecords, setPage, setShowInvalidRecords, setTotalRecords, setUpload]
+  );
+  const { isImplerInitiated, showWidget } = useImpler({
+    projectId: PROJECT_ID,
+    accessToken: ACCESS_TOKEN,
+    templateId: TEMPLATE,
+    primaryColor: PRIMARY_COLOR,
+    onUploadComplete: onUploadComplete,
+  });
   const { classes } = useStyles(showInvalidRecords);
 
-  const onUploadComplete = (uploadData: IUpload) => {
-    setUpload(uploadData);
-    setPage(variables.ONE);
-    setShowInvalidRecords(false);
-    setTotalRecords(uploadData.validRecords);
-    setHasInvalidRecords(uploadData.invalidRecords > variables.ZERO);
-  };
-
   const onShowInvalidChanges = (status: boolean) => {
     setShowInvalidRecords(status);
     setPage(variables.ONE);
@@ -48,14 +57,9 @@ const Actions = ({ PROJECT_ID, ACCESS_TOKEN, PRIMARY_COLOR, TEMPLATE }: ActionPr
   return (
     <div className={classes.wrapper}>
       <Flex direction="row" align="center" gap="sm">
-        <Button
-          projectId={PROJECT_ID}
-          accessToken={ACCESS_TOKEN}
-          templateId={TEMPLATE}
-          primaryColor={PRIMARY_COLOR}
-          className={classes.button}
-          onUploadComplete={onUploadComplete}
-        />
+        <MantineButton onClick={showWidget} className={classes.button} disabled={!isImplerInitiated}>
+          Import temperature data
+        </MantineButton>
         {hasInvalidRecords && (
           <Switch
             label="Show Invalid Data"
@@ -74,7 +78,7 @@ const Actions = ({ PROJECT_ID, ACCESS_TOKEN, PRIMARY_COLOR, TEMPLATE }: ActionPr
         onClick={() => saveAs(constants.DATA_FILE_URL, constants.DATA_FILE_NAME)}
         className={classes.button}
       >
-        Download Temperature Data
+        Download sample data
       </MantineButton>
     </div>
   );

apps/web/package.json

@@ -19,6 +19,7 @@
     "@amplitude/analytics-browser": "^1.10.3",
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.10.0",
+    "@impler/react": "workspace:^0.2.0",
     "@impler/shared": "workspace:^0.2.0",
     "@mantine/carousel": "6.0.6",
     "@mantine/core": "6.0.6",

apps/web/pages/imports/[id].tsx

@@ -1,12 +1,11 @@
 import Link from 'next/link';
-import { useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { GetServerSideProps } from 'next';
 import { Flex, Group, Title } from '@mantine/core';
 
 import { commonApi } from '@libs/api';
 import { ITemplate } from '@impler/shared';
-import { useImpler } from '@hooks/useImpler';
+import { useImpler } from '@impler/react';
 import { useImportDetails } from '@hooks/useImportDetails';
 import { API_KEYS, CONSTANTS, ROUTES, colors } from '@config';
 
@@ -30,20 +29,14 @@ interface ImportDetailProps {
 
 export default function ImportDetails({ template }: ImportDetailProps) {
   const { onUpdateClick, onDeleteClick, templateData, profile, onSpreadsheetImported } = useImportDetails({ template });
-  const { init, onImportClick, isImplerInitiated } = useImpler({
+  const { showWidget, isImplerInitiated } = useImpler({
     templateId: template._id,
     projectId: template._projectId,
     accessToken: profile?.accessToken,
     primaryColor: colors.blue,
     onUploadComplete: onSpreadsheetImported,
   });
 
-  useEffect(() => {
-    if (profile?.accessToken && template._projectId) {
-      init();
-    }
-  }, [init, profile?.accessToken, template._projectId]);
-
   return (
     <Flex gap="lg" direction="column" h="100%">
       <Flex justify="space-between">
@@ -54,7 +47,7 @@ export default function ImportDetails({ template }: ImportDetailProps) {
           <Title order={2}>{templateData.name}</Title>
         </Group>
         <Group spacing="xs">
-          <Button disabled={!isImplerInitiated} onClick={onImportClick}>
+          <Button disabled={!isImplerInitiated} onClick={showWidget}>
             Import
           </Button>
           <Button onClick={onUpdateClick}>

libs/embed/src/embed.ts

@@ -26,6 +26,8 @@ class Impler {
 
   private initPayload: any;
 
+  private isWidgetReady: boolean = false;
+
   private isAuthenticated: boolean = false;
 
   private authenticationError?: string;
@@ -95,6 +97,17 @@ class Impler {
     if (!!event && !!event.data && !!event.data.type) {
       // eslint-disable-next-line default-case
       switch (event.data.type) {
+        case EventTypesEnum.WIDGET_READY:
+          this.isWidgetReady = true;
+          this.iframe?.contentWindow?.postMessage(
+            {
+              type: EventTypesEnum.INIT_IFRAME,
+              value: this.initPayload,
+            },
+            '*'
+          );
+          this.postMessageToContentWindow(EventTypesEnum.WIDGET_READY);
+          break;
         case EventTypesEnum.CLOSE_WIDGET:
           this.hideWidget();
           this.postMessageToContentWindow(event.data.type);
@@ -120,19 +133,9 @@ class Impler {
   }
 
   initializeIframe = (projectId: string) => {
+    let iframe: HTMLIFrameElement;
     if (!document.getElementById(IFRAME_ID)) {
       const iframe = document.createElement('iframe');
-      window.addEventListener(
-        'message',
-        (event) => {
-          if (!event.target || event?.data?.type !== EventTypesEnum.WIDGET_READY) {
-            return;
-          }
-
-          iframe?.contentWindow?.postMessage({ type: EventTypesEnum.INIT_IFRAME, value: this.initPayload }, '*');
-        },
-        true
-      );
 
       iframe.style.backgroundColor = 'transparent';
       iframe.src = `${IFRAME_URL}/${projectId}?`;
@@ -149,6 +152,19 @@ class Impler {
       iframe.style.zIndex = Number.MAX_SAFE_INTEGER.toString();
       (iframe as any).crossorigin = 'anonymous';
       this.iframe = iframe;
+    } else {
+      iframe = document.getElementById(IFRAME_ID) as HTMLIFrameElement;
+      this.iframe = iframe;
+    }
+    if (this.isWidgetReady) {
+      this.iframe?.contentWindow?.postMessage(
+        {
+          type: EventTypesEnum.INIT_IFRAME,
+          value: this.initPayload,
+        },
+        '*'
+      );
+      this.postMessageToContentWindow(EventTypesEnum.WIDGET_READY);
     }
   };
 

packages/react/package.json

@@ -52,7 +52,6 @@
     "typescript": "^4.4.4"
   },
   "dependencies": {
-    "@impler/shared": "^0.2.0",
-    "styled-components": "^5.3.6"
+    "@impler/shared": "^0.2.0"
   }
 }

packages/react/src/components/button/Button.types.ts

@@ -48,4 +48,7 @@ export type EventCalls =
     }
   | {
       type: EventTypesEnum.CLOSE_WIDGET;
+    }
+  | {
+      type: EventTypesEnum.WIDGET_READY;
     };

packages/react/src/config/texts.config.ts

@@ -1,4 +1,5 @@
 export const TEXTS = {
   PROJECTID_NOT_SPECIFIED: 'It looks like you have not specified projectId to the import button which is required!',
   IMPLER_UNDEFINED_ERROR: 'It looks like you have not added embed script or your embed script path is incorrect!',
+  IMPLER_NOT_INITIATED: 'It looks like Impler is not initiated!',
 };

packages/react/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useImpler';