fixed typescript warning / removed hardcoded url

PROCEED-Labs · Dec 15, 2023 · eeea14f · eeea14f
1 parent 747a7fe
commit eeea14f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 46 deletions.
diff --git a/src/management-system-v2/components/modeler-share-modal-option-embed-in-web.tsx b/src/management-system-v2/components/modeler-share-modal-option-embed-in-web.tsx
@@ -1,14 +1,16 @@
 import useModelerStateStore from '@/lib/use-modeler-state-store';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
 import { CopyOutlined } from '@ant-design/icons';
-import { Button, message } from 'antd';
-import TextArea from 'antd/es/input/TextArea';
+import { Button, message, Input } from 'antd';
+import { useParams } from 'next/navigation';
+import { TextAreaRef } from 'antd/es/input/TextArea';
+
+const { TextArea } = Input;
 
 const ModelerShareModalOptionEmdedInWeb = () => {
-  const [bmpnXML, setBpmnXml] = useState('');
-  const modeler = useModelerStateStore((state) => state.modeler);
-  const codeSection = useRef(null);
+  const { processId } = useParams();
+  const codeSection = useRef<TextAreaRef>(null);
 
   const handleCopyCodeSection = async () => {
     const codeToEmbed = codeSection.current?.resizableTextArea?.textArea?.value;
@@ -18,33 +20,21 @@ const ModelerShareModalOptionEmdedInWeb = () => {
     }
   };
 
-  const getXML = async () => {
-    if (modeler) {
-      const { xml } = await modeler.saveXML({ format: true });
-      if (xml) setBpmnXml(xml);
-    }
-  };
-
-  useEffect(() => {
-    getXML();
-  });
-
   return (
     <>
       <div>
         <Button
           icon={<CopyOutlined />}
           style={{ border: '1px solid black', float: 'right' }}
           onClick={handleCopyCodeSection}
-        >
-          Copy Code
-        </Button>
+          title="copy code"
+        />
       </div>
       <div className="code">
         <TextArea
-          rows={10}
+          rows={2}
           style={{ backgroundColor: 'rgb(245,245,245)' }}
-          value={`here comes the iframe code`} /* TODO: implement iframe logic */
+          value={`<iframe src='http://localhost:3000/embedded-viewer/${processId}' height="100%" width="100%" />`} /* TODO: implement iframe logic */
           ref={codeSection}
         />
       </div>

diff --git a/src/management-system-v2/components/modeler-share-modal-option-public-link.tsx b/src/management-system-v2/components/modeler-share-modal-option-public-link.tsx
@@ -1,28 +1,13 @@
 import { Button, Checkbox, Flex, Input, message, QRCode, Space, Typography } from 'antd';
-import {
-  EyeOutlined,
-  EyeInvisibleOutlined,
-  DownloadOutlined,
-  CopyOutlined,
-} from '@ant-design/icons';
+import { DownloadOutlined, CopyOutlined } from '@ant-design/icons';
 import { SetStateAction, useRef, useState } from 'react';
 import { usePathname } from 'next/navigation';
+const { Password } = Input;
 
 const ModelerShareModalOptionPublicLink = () => {
   const pathname = usePathname();
-
-  const [showPass, setShowPass] = useState(true);
   const [isPasswordProtected, setIsPasswordProtected] = useState(false);
-  const [publicLinkValue, setPublicLinkValue] = useState(`http://localhost:3000${pathname}`);
-
-  const password = useRef(null);
-
-  const handleEyeClick = () => {
-    if (password.current) {
-      password.current.input.type = showPass ? 'text' : 'password';
-    }
-    setShowPass(!showPass);
-  };
+  const [publicLinkValue, setPublicLinkValue] = useState(`${window.location.origin}${pathname}`);
 
   const handleCopyLink = async () => {
     try {
@@ -73,6 +58,10 @@ const ModelerShareModalOptionPublicLink = () => {
 
   return (
     <>
+      <div style={{ marginBottom: '5px' }}>
+        <Checkbox>Share Link</Checkbox>
+      </div>
+
       <Flex
         vertical={false}
         style={{
@@ -108,12 +97,7 @@ const ModelerShareModalOptionPublicLink = () => {
           </Checkbox>
           {isPasswordProtected && (
             <Space>
-              <Input type={showPass ? 'password' : 'text'} ref={password} width={10} />
-              {showPass ? (
-                <EyeInvisibleOutlined onClick={handleEyeClick} />
-              ) : (
-                <EyeOutlined onClick={handleEyeClick} />
-              )}
+              <Password visibilityToggle={true} width={10} />
             </Space>
           )}
         </Flex>