feat: edit deloyment (#646)

src/components/Expand/Expand.tsx

@@ -1,7 +1,7 @@
 // Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { Typography } from '@subql/components';
 import { useUpdate } from 'ahooks';
 
@@ -16,15 +16,21 @@ const Expand: FC<IProps> = (props) => {
 
   const [expanded, setExpanded] = useState(false);
   const childrenRef = useRef<HTMLDivElement | null>(null);
+  const [showExpandIcon, setShowExpandIcon] = useState(false);
 
   const setCallback = useCallback((ref: HTMLDivElement) => {
     childrenRef.current = ref;
     update();
   }, []);
 
-  const showExpandIcon = useMemo(() => {
-    const rect = childrenRef.current?.getBoundingClientRect();
-    return !!(rect?.height && rect.height > 400);
+  useEffect(() => {
+    // note this render,
+    // when children changed, the render in the micro tasks queue last,
+    //  we need use a macro task to get the rendered height.
+    setTimeout(() => {
+      const rect = childrenRef.current?.getBoundingClientRect();
+      setShowExpandIcon(!!(rect?.height && rect.height > 400));
+    });
   }, [childrenRef.current, props.children]);
 
   return (

src/components/ProjectDeployments/ProjectDeployments.tsx

@@ -30,7 +30,6 @@ const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, currentDe
   const [deploymentModal, setDeploymentModal] = React.useState<boolean>(false);
   const [form] = useForm();
   const [currentDeployment, setCurrentDeployment] = React.useState<Deployment>();
-
   const handleSubmitUpdate = async () => {
     try {
       await form.validateFields();
@@ -65,7 +64,13 @@ const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, currentDe
         onSubmit={handleSubmitUpdate}
       >
         <div>
-          <Form form={form} layout="vertical">
+          <Form
+            form={form}
+            layout="vertical"
+            initialValues={{
+              description: currentDeployment?.description || '',
+            }}
+          >
             <Form.Item label="Deployment Description" name="description" rules={[{ required: true }]}>
               <div className={styles.markdownWrapper}>
                 <Markdown
@@ -134,7 +139,6 @@ const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, currentDe
               <Typography.Link
                 active
                 onClick={() => {
-                  form.setFieldValue('description', record.description || '');
                   setCurrentDeployment(record);
                   setDeploymentModal(true);
                 }}

src/hooks/useCreateDeployment.tsx

@@ -18,8 +18,6 @@ export function useCreateDeployment(
       description: deploymentDetails.description,
     });
 
-    console.log('Uploaded version details', versionCid);
-    debugger;
     const tx = await projectRegistry.updateDeployment(
       projectId,
       deploymentDetails.deploymentId,