From c9bf7c9e2131c54affca96f386996d744b120f6b Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Tue, 22 Mar 2022 18:16:36 +0100
Subject: [PATCH] feat: make flows enablable

---
 .../components/EditableTypography/index.tsx   | 10 +++----
 .../web/src/components/EditorLayout/index.tsx | 28 +++++++++++++++++--
 .../graphql/mutations/update-flow-status.ts   | 10 +++++++
 3 files changed, 40 insertions(+), 8 deletions(-)
 create mode 100644 packages/web/src/graphql/mutations/update-flow-status.ts

diff --git a/packages/web/src/components/EditableTypography/index.tsx b/packages/web/src/components/EditableTypography/index.tsx
index 7e247bbf..53fad7ff 100644
--- a/packages/web/src/components/EditableTypography/index.tsx
+++ b/packages/web/src/components/EditableTypography/index.tsx
@@ -7,13 +7,13 @@ import { Box, TextField } from './style';
 
 type EditableTypographyProps = TypographyProps & {
   children: string;
-  onNameSubmit?: (value: string) => void;
+  onConfirm?: (value: string) => void;
 };
 
 const noop = () => null;
 
 function EditableTypography(props: EditableTypographyProps) {
-  const { children, onNameSubmit = noop, sx, ...typographyProps } = props;
+  const { children, onConfirm = noop, sx, ...typographyProps } = props;
   const [editing, setEditing] = React.useState(false);
 
   const handleClick = React.useCallback(() => {
@@ -28,7 +28,7 @@ function EditableTypography(props: EditableTypographyProps) {
     const target = event.target as HTMLInputElement;
     if (event.key === 'Enter') {
       if (target.value !== children) {
-        await onNameSubmit(target.value);
+        await onConfirm(target.value);
       }
 
       setEditing(false);
@@ -39,11 +39,11 @@ function EditableTypography(props: EditableTypographyProps) {
     const value = event.target.value;
 
     if (value !== children) {
-      await onNameSubmit(value);
+      await onConfirm(value);
     }
 
     setEditing(false);
-  }, [onNameSubmit, children]);
+  }, [onConfirm, children]);
 
   let component = (
     <Typography {...typographyProps}>
diff --git a/packages/web/src/components/EditorLayout/index.tsx b/packages/web/src/components/EditorLayout/index.tsx
index 60a5ce1b..524a1d0c 100644
--- a/packages/web/src/components/EditorLayout/index.tsx
+++ b/packages/web/src/components/EditorLayout/index.tsx
@@ -12,6 +12,7 @@ import EditableTypography from 'components/EditableTypography';
 import Container from 'components/Container';
 import Editor from 'components/Editor';
 import useFormatMessage from 'hooks/useFormatMessage';
+import { UPDATE_FLOW_STATUS } from 'graphql/mutations/update-flow-status';
 import { UPDATE_FLOW } from 'graphql/mutations/update-flow';
 import { GET_FLOW } from 'graphql/queries/get-flow';
 import type { IFlow } from '@automatisch/types';
@@ -21,6 +22,7 @@ export default function EditorLayout(): React.ReactElement {
   const { flowId } = useParams();
   const formatMessage = useFormatMessage();
   const [updateFlow] = useMutation(UPDATE_FLOW);
+  const [updateFlowStatus] = useMutation(UPDATE_FLOW_STATUS);
   const { data, loading } = useQuery(GET_FLOW, { variables: { id: flowId }});
   const flow: IFlow = data?.getFlow;
 
@@ -33,8 +35,8 @@ export default function EditorLayout(): React.ReactElement {
         },
       },
       optimisticResponse: {
-        __typename: 'Mutation',
         updateFlow: {
+          __typename:  'Flow',
           id: flow?.id,
           name,
         }
@@ -42,6 +44,26 @@ export default function EditorLayout(): React.ReactElement {
     });
   }, [flow?.id]);
 
+  const onFlowStatusUpdate = React.useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const active = event.target.checked;
+
+    await updateFlowStatus({
+      variables: {
+        input: {
+          id: flowId,
+          active,
+        },
+      },
+      optimisticResponse: {
+        updateFlowStatus: {
+          __typename:  'Flow',
+          id: flow?.id,
+          active,
+        }
+      }
+    });
+  }, [flow?.id]);
+
   return (
     <>
       <Stack direction="column" height="100%">
@@ -58,7 +80,7 @@ export default function EditorLayout(): React.ReactElement {
             {!loading && (
               <EditableTypography
                 variant="body1"
-                onNameSubmit={onFlowNameUpdate}
+                onConfirm={onFlowNameUpdate}
                 noWrap
                 sx={{ display: 'flex', flex: 1, maxWidth: '50vw', ml: 2 }}
               >
@@ -70,7 +92,7 @@ export default function EditorLayout(): React.ReactElement {
           <Box pr={1}>
             <FormControlLabel
               control={
-                <Switch checked={flow?.active ?? false} />
+                <Switch checked={flow?.active ?? false} onChange={onFlowStatusUpdate} />
               }
               label={flow?.active ? formatMessage('flow.active') : formatMessage('flow.inactive')}
               labelPlacement="start"
diff --git a/packages/web/src/graphql/mutations/update-flow-status.ts b/packages/web/src/graphql/mutations/update-flow-status.ts
new file mode 100644
index 00000000..3b0b4313
--- /dev/null
+++ b/packages/web/src/graphql/mutations/update-flow-status.ts
@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const UPDATE_FLOW_STATUS = gql`
+  mutation UpdateFlowStatus($input: UpdateFlowStatusInput) {
+    updateFlowStatus(input: $input) {
+      id
+      active
+    }
+  }
+`;