fix: move hypothesis title to modal title

flanksource · Mar 21, 2022 · 6859065 · 6859065
1 parent f306170
commit 6859065
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 23 deletions.
diff --git a/src/components/HypothesisBuilder/components/HypothesisDetailsTitle/index.js b/src/components/HypothesisBuilder/components/HypothesisDetailsTitle/index.js
@@ -0,0 +1,63 @@
+import React, { useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import { debounce } from "lodash";
+import { useForm } from "react-hook-form";
+import { Avatar } from "../../../Avatar";
+import { EditableText } from "../../../EditableText";
+
+export const HypothesisDetailsTitle = ({ node, api }) => {
+  const handleApiUpdate = useRef(
+    debounce((params) => {
+      if (api?.updateMutation && node?.id) {
+        api.updateMutation.mutate({ id: node.id, params });
+      }
+    }, 1000)
+  ).current;
+
+  const { watch, setValue, getValues } = useForm({
+    defaultValues: {
+      title: node.title?.trim() ?? ""
+    }
+  });
+
+  watch();
+
+  useEffect(() => {
+    const subscription = watch((value) => {
+      handleApiUpdate(value);
+    });
+    return () => subscription.unsubscribe();
+  }, [watch, getValues, handleApiUpdate]);
+
+  return (
+    <>
+      <div className="flex">
+        <Avatar size="sm" user={node?.created_by} />
+        <p className="font-inter text-dark-gray font-normal text-sm ml-1.5 mt-0.5">
+          {node?.created_by?.name}
+        </p>
+      </div>
+      <div className="mt-2 mr-2 mb-2 pr-8 flex flex-nowrap">
+        <EditableText
+          value={getValues("title")}
+          sharedClassName="text-2xl font-semibold text-gray-900 grow"
+          onChange={(e) => {
+            setValue("title", e.target.value);
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+HypothesisDetailsTitle.propTypes = {
+  node: PropTypes.shape({
+    id: PropTypes.string,
+    title: PropTypes.string,
+    created_by: PropTypes.shape({
+      name: PropTypes.string,
+      avatar: PropTypes.string
+    })
+  }).isRequired,
+  api: PropTypes.shape({}).isRequired
+};
diff --git a/src/components/HypothesisBuilder/hypothesis-details.js b/src/components/HypothesisBuilder/hypothesis-details.js
@@ -75,10 +75,9 @@ export function HypothesisDetails({ node, api, ...rest }) {
     }, 1000)
   ).current;
 
-  const { control, watch, setValue, getValues } = useForm({
+  const { control, watch, getValues } = useForm({
     defaultValues: {
-      status: node.status || Object.values(statusItems)[2].value,
-      title: node.title?.trim() ?? ""
+      status: node.status || Object.values(statusItems)[2].value
     }
   });
 
@@ -93,23 +92,7 @@ export function HypothesisDetails({ node, api, ...rest }) {
 
   return (
     <>
-      <div className={clsx("py-7", rest.className || "")} {...rest}>
-        <div className="flex pt-3">
-          <Avatar size="sm" user={node.created_by} />
-          <p className="font-inter text-dark-gray font-normal text-sm ml-1.5 mt-0.5">
-            {node.created_by.name}
-          </p>
-        </div>
-        <div className="mt-4 mr-2 mb-2 pr-8 flex flex-nowrap">
-          {/* <Badge size="sm" text={badgeMap[nodePath.length - 1]} className="mr-2" /> */}
-          <EditableText
-            value={getValues("title")}
-            sharedClassName="text-2xl font-semibold text-gray-900 grow"
-            onChange={(e) => {
-              setValue("title", e.target.value);
-            }}
-          />
-        </div>
+      <div className={clsx("pb-7", rest.className || "")} {...rest}>
         <div className="mt-6 mb-7">
           <Dropdown
             control={control}

diff --git a/src/components/HypothesisBuilder/index.js b/src/components/HypothesisBuilder/index.js
@@ -3,6 +3,7 @@ import { Modal } from "../Modal";
 import { HypothesisDetails } from "./hypothesis-details";
 import { HypothesisNode } from "./hypothesis-node";
 import { CreateHypothesis } from "./create-hypothesis";
+import { HypothesisDetailsTitle } from "./components/HypothesisDetailsTitle";
 
 export function HypothesisBuilder({
   initialTree,
@@ -37,7 +38,7 @@ export function HypothesisBuilder({
         open={modalIsOpen}
         onClose={() => setModalIsOpen(false)}
         size="medium"
-        title={selectedNode ? selectedNode.title : ""}
+        title={<HypothesisDetailsTitle node={selectedNode} api={api} />}
       >
         <HypothesisDetails node={selectedNode} api={api} />
       </Modal>

diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
@@ -60,7 +60,7 @@ export function Modal({
                 `modal-card-${size}`
               )}
             >
-              <div className="mt-8 px-8 flex justify-between items-center ">
+              <div className="mt-8 px-8 flex justify-between">
                 <h1 className={clsx("font-semibold text-lg", titleClass)}>
                   {title}
                 </h1>
@@ -97,7 +97,7 @@ export function Modal({
 }
 
 Modal.propTypes = {
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   titleClass: PropTypes.string,
   footerClassName: PropTypes.string,
   open: PropTypes.bool.isRequired,