feat: show modal if script is not alive

andrewinci · Mar 16, 2023 · 250165c · 250165c
1 parent 7686289
commit 250165c
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 24 deletions.
diff --git a/src/components/modal.tsx b/src/components/modal.tsx
@@ -7,11 +7,12 @@ export type ModalProps = {
     title?: string,
     description?: string,
     opened: boolean,
+    icons?: "OK" | "Ignore" | "OkIgnore" | "None",
     onSubmit: (response: "Ok" | "Ignore") => void
 }
 
 export const Modal = (props: ModalProps) => {
-    const { title, description, opened, onSubmit } = props;
+    const { title, description, opened, onSubmit, icons } = props;
     const ModalBackground = styled.div`
       position: absolute;
       top: 0px;
@@ -29,6 +30,7 @@ export const Modal = (props: ModalProps) => {
       
       left: ${(POP_UP_WIDTH - 380) / 2}px;
       min-width: 380px;
+      max-width: 380px;
   
       padding: 10px;
       z-index: 999;
@@ -43,12 +45,12 @@ export const Modal = (props: ModalProps) => {
             <Group>
                 <Text size='l'>{title}</Text>
             </Group>
-            <Group margin='5px 0 0 0' style={{ minHeight: "60px" }}>
-                <Text size='s'>{description}</Text>
+            <Group margin='5px 0 0 5px' style={{ minHeight: "60px" }}>
+                <Text size='xs'>{description}</Text>
             </Group>
-            <Group margin='0px 30px' justifyContent='space-between'>
-                <Button onClick={() => props.onSubmit("Ignore")} color='green'>Ignore</Button>
-                <Button onClick={() => props.onSubmit("Ok")} color='red'>Ok</Button>
+            <Group margin='0px 28px' justifyContent={(icons ?? "OkIgnore") === "OkIgnore" ? 'space-between' : "center"}>
+                <Button hidden={icons === "None" || icons === "OK"} onClick={() => onSubmit("Ignore")} color='green'>Ignore</Button>
+                <Button hidden={icons === "None" || icons === "Ignore"} onClick={() => onSubmit("Ok")} color='red'>Ok</Button>
             </Group>
         </ModalContainer>
     </>

diff --git a/src/hooks/use-content-script.ts b/src/hooks/use-content-script.ts
@@ -7,18 +7,20 @@ export const useContentScript = () => {
     null
   );
 
+  const checkIsAlive = async () => {
+    try {
+      // check if the content-script is responding
+      const response = await sendReceiveMessage({ action: "ping" });
+      setIsAlive(response?.action === "pong");
+      // retrieve the name of the current drawing
+      await updateActiveDrawingName();
+    } catch (err) {
+      setIsAlive(false);
+    }
+  };
+
   useEffect(() => {
-    (async () => {
-      try {
-        // check if the content-script is responding
-        const response = await sendReceiveMessage({ action: "ping" });
-        setIsAlive(response?.action === "pong");
-        // retrieve the name of the current drawing
-        await updateActiveDrawingName();
-      } catch (err) {
-        setIsAlive(false);
-      }
-    })();
+    checkIsAlive();
   }, []);
 
   const getDrawing = async () => {
@@ -30,7 +32,7 @@ export const useContentScript = () => {
     }
   };
 
-  const setDrawing = async (drawing: {data: any, name: string | null}) => {
+  const setDrawing = async (drawing: { data: any; name: string | null }) => {
     const response = await sendReceiveMessage({
       action: "set-drawing",
       data: drawing.data,
@@ -58,6 +60,7 @@ export const useContentScript = () => {
     activeDrawingName,
     getDrawing,
     setDrawing,
+    checkIsAlive,
   };
 };
 

diff --git a/src/hooks/use-modal.ts b/src/hooks/use-modal.ts
@@ -1,16 +1,29 @@
 import { useState } from "react";
 import { ModalProps } from "../components";
 
+type OpenModalProps = {
+  title: string;
+  description?: string;
+  icons?: "OK" | "Ignore" | "OkIgnore" | "None";
+  onSubmit?: (response: "Ok" | "Ignore") => void;
+};
+
 export const useModal = () => {
   const CLOSED_MODAL_PROPS = {
     title: "",
     description: "",
     opened: false,
     onSubmit: () => {},
   };
+
   const [modalState, setModalState] = useState<ModalProps>(CLOSED_MODAL_PROPS);
   const closeModal = () => setModalState(CLOSED_MODAL_PROPS);
-  const openModal = (props: ModalProps) => setModalState(props);
+  const openModal = (props: OpenModalProps) =>
+    setModalState({
+      ...props,
+      onSubmit: props.onSubmit ?? closeModal,
+      opened: true,
+    });
   return {
     /**Props to use in the modal */
     modalProps: modalState,

diff --git a/src/main.tsx b/src/main.tsx
@@ -10,7 +10,7 @@ import { GlobalStyles, POP_UP_HEIGHT, POP_UP_WIDTH } from './style'
 
 const App = () => {
   const { drawings, createDrawing, deleteDrawing, updateDrawing } = useStorage();
-  const { isAlive, activeDrawingName, getDrawing, setDrawing } = useContentScript();
+  const { isAlive, activeDrawingName, getDrawing, setDrawing, checkIsAlive } = useContentScript();
   const { modalProps, closeModal, openModal } = useModal();
 
   const onSaveButtonClick = async (drawingName: string) => {
@@ -19,8 +19,7 @@ const App = () => {
       openModal({
         title: "Invalid drawing name",
         description: "The name of a drawing should not be empty.",
-        opened: true,
-        onSubmit: closeModal
+        icons: "OK"
       })
       return;
     }
@@ -37,8 +36,13 @@ const App = () => {
   }
 
   if (!isAlive) {
-    //todo: use a modal instead
-    return <p>Make sure to be in the excalidraw website to use this extension.</p>
+    return <Modal
+      title="Are you on the Excalidraw website?"
+      description={`This extensions only works on the Excalidraw website.\nMake sure to navigate to https://excalidraw.com/ before trying to use this extension.`}
+      opened={true}
+      icons={"OK"}
+      onSubmit={checkIsAlive}
+    />
   }
 
   return <>