From 13a5894be328d137e2d80c5dcbdee3c2ab296abf Mon Sep 17 00:00:00 2001
From: Bowen Tan <bowen.tan@smartx.com>
Date: Wed, 13 Apr 2022 17:37:09 +0800
Subject: [PATCH] remove hasFetched in fetch trait and add disabled property

---
 .../components/DataSource/ApiForm/Basic.tsx   | 30 ++++++++++++++++++-
 .../src/components/_internal/ImplWrapper.tsx  | 10 +++++--
 packages/runtime/src/traits/core/Fetch.tsx    | 17 ++++-------
 .../runtime/src/types/traitPropertiesSpec.ts  |  1 +
 4 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/packages/editor/src/components/DataSource/ApiForm/Basic.tsx b/packages/editor/src/components/DataSource/ApiForm/Basic.tsx
index 0fb03ff6..44ebbf3d 100644
--- a/packages/editor/src/components/DataSource/ApiForm/Basic.tsx
+++ b/packages/editor/src/components/DataSource/ApiForm/Basic.tsx
@@ -6,6 +6,7 @@ import {
   FormLabel,
   Switch,
   IconButton,
+  Text,
 } from '@chakra-ui/react';
 import { AddIcon } from '@chakra-ui/icons';
 import { FormikHelpers, FormikHandlers, FormikState } from 'formik';
@@ -18,6 +19,7 @@ import {
 import { Static, Type } from '@sinclair/typebox';
 import { EditorServices } from '../../../types';
 import { ComponentSchema } from '@sunmao-ui/core';
+import { SpecWidget } from '@sunmao-ui/editor-sdk';
 
 type Values = Static<typeof FetchTraitPropertiesSpec>;
 type EventHandler = Static<typeof EventCallBackHandlerSpec>;
@@ -94,7 +96,7 @@ const Handler = (props: HandlerProps) => {
 };
 
 export const Basic: React.FC<Props> = props => {
-  const { formik } = props;
+  const { formik, api, services } = props;
 
   const onAddHandler = (type: HandlerType) => {
     const newHandler: EventHandler = {
@@ -145,6 +147,32 @@ export const Basic: React.FC<Props> = props => {
           onBlur={() => formik.handleSubmit()}
         />
       </FormControl>
+
+      <FormControl display="flex" alignItems="center">
+        <FormLabel margin="0" marginRight="2">
+          Disabled
+        </FormLabel>
+        <SpecWidget
+          component={api}
+          spec={Type.Boolean({ widgetOptions: { isShowAsideExpressionButton: true } })}
+          value={formik.values.disabled}
+          path={[]}
+          level={1}
+          services={services}
+          onChange={val => {
+            formik.setFieldValue('disabled', val);
+            formik.handleSubmit();
+          }}
+        >
+          {{
+            title: (
+              <Text fontSize="lg" fontWeight="bold" display="inline">
+                Body
+              </Text>
+            ),
+          }}
+        </SpecWidget>
+      </FormControl>
       {generateHandlers('onComplete')}
       {generateHandlers('onError')}
     </VStack>
diff --git a/packages/runtime/src/components/_internal/ImplWrapper.tsx b/packages/runtime/src/components/_internal/ImplWrapper.tsx
index d519015c..1ab9d4af 100644
--- a/packages/runtime/src/components/_internal/ImplWrapper.tsx
+++ b/packages/runtime/src/components/_internal/ImplWrapper.tsx
@@ -150,13 +150,19 @@ const _ImplWrapper = React.forwardRef<HTMLDivElement, ImplWrapperProps>((props,
     return stop;
   }, [c.properties, stateManager]);
   useEffect(() => {
+    if (unmount) {
+      delete stateManager.store[c.id];
+    }
     return () => {
       delete stateManager.store[c.id];
     };
-  }, [c.id, stateManager.store]);
+  }, [c.id, stateManager.store, unmount]);
 
   const mergedProps = useMemo(() => {
-    const allProps: Record<string, any> = { ...evaledComponentProperties, ...propsFromTraits };
+    const allProps: Record<string, any> = {
+      ...evaledComponentProperties,
+      ...propsFromTraits,
+    };
 
     for (const key in allProps) {
       if (allProps[key] instanceof ExpressionError) {
diff --git a/packages/runtime/src/traits/core/Fetch.tsx b/packages/runtime/src/traits/core/Fetch.tsx
index 813badff..5215e7c9 100644
--- a/packages/runtime/src/traits/core/Fetch.tsx
+++ b/packages/runtime/src/traits/core/Fetch.tsx
@@ -9,7 +9,6 @@ import { generateCallback } from './Event';
 
 const FetchTraitFactory: TraitImplFactory<Static<typeof FetchTraitPropertiesSpec>> =
   () => {
-    const hasFetchedMap = new Map<string, boolean>();
     return ({
       trait,
       url,
@@ -24,14 +23,14 @@ const FetchTraitFactory: TraitImplFactory<Static<typeof FetchTraitPropertiesSpec
       services,
       subscribeMethods,
       componentId,
+      disabled,
     }) => {
-      const hashId = `#${componentId}@${'fetch'}`;
-      const hasFetched = hasFetchedMap.get(hashId);
       const lazy = _lazy === undefined ? true : _lazy;
 
       const fetchData = () => {
+        console.log('disabled', disabled);
+        if (disabled) return;
         // TODO: clear when component destroy
-        hasFetchedMap.set(hashId, true);
         // FIXME: listen to the header change
         const headers = new Headers();
         if (_headers) {
@@ -155,7 +154,7 @@ const FetchTraitFactory: TraitImplFactory<Static<typeof FetchTraitPropertiesSpec
       };
 
       // non lazy query, listen to the change and query;
-      if (!lazy && url && !hasFetched) {
+      if (!lazy && url) {
         fetchData();
       }
 
@@ -166,13 +165,7 @@ const FetchTraitFactory: TraitImplFactory<Static<typeof FetchTraitPropertiesSpec
       });
 
       return {
-        props: {
-          effects: [
-            () => {
-              hasFetchedMap.set(hashId, false);
-            },
-          ],
-        },
+        props: null,
       };
     };
   };
diff --git a/packages/runtime/src/types/traitPropertiesSpec.ts b/packages/runtime/src/types/traitPropertiesSpec.ts
index e7a68346..593dc4a2 100644
--- a/packages/runtime/src/types/traitPropertiesSpec.ts
+++ b/packages/runtime/src/types/traitPropertiesSpec.ts
@@ -50,6 +50,7 @@ export const FetchTraitPropertiesSpec = Type.Object({
     { title: 'Method' },
   ), // {pattern: /^(get|post|put|delete)$/i}
   lazy: Type.Boolean({ title: 'Lazy' }),
+  disabled: Type.Boolean({ title: 'Disabled' }),
   headers: Type.Record(Type.String(), Type.String(), {
     title: 'Headers',
   }),