feat: community backends marketplace

src/pages/backends/community/add-community-modal.tsx

@@ -83,7 +83,7 @@ const AddCommunityModal: React.FC<{
         >
           <BackendDetail
             onEnable={handleOnEnable}
-            currentData={currentData}
+            data={currentData}
           ></BackendDetail>
         </ColumnWrapper>
       </Container>

src/pages/backends/community/backend-detail.tsx

@@ -3,7 +3,7 @@ import { BulbOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Tag, Typography } from 'antd';
 import _ from 'lodash';
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { generateIcon } from '../components/backend-card';
 
@@ -62,9 +62,22 @@ const UL = styled.ul`
 const BackendDetail: React.FC<{
   onEnable: (checked: boolean, data: any) => void;
   onDisable?: () => void;
-  currentData?: any;
-}> = ({ onEnable, onDisable, currentData }) => {
+  data?: any;
+}> = ({ onEnable, onDisable, data }) => {
   const intl = useIntl();
+  const [currentData, setCurrentData] = React.useState<any>(data);
+
+  useEffect(() => {
+    setCurrentData(data);
+  }, [data]);
+
+  const handleOnEnable = async (checked: boolean) => {
+    await onEnable(true, currentData);
+    setCurrentData({
+      ...currentData,
+      enabled: checked
+    });
+  };
 
   const renderSupportedFrameworks = () => {
     const frameworks = currentData?.framework_index_map || {};
@@ -109,7 +122,7 @@ const BackendDetail: React.FC<{
               <Button
                 type="primary"
                 size="middle"
-                onClick={() => onEnable(true, currentData)}
+                onClick={() => handleOnEnable(true)}
               >
                 {intl.formatMessage({ id: 'common.button.enable' })}
               </Button>

src/pages/backends/community/commnity-backends.tsx

@@ -3,7 +3,7 @@ import ThemeTag from '@/components/tags-wrapper/theme-tag';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { SearchOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Input, Switch, Tooltip } from 'antd';
+import { Input, Tooltip } from 'antd';
 import _ from 'lodash';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
@@ -68,17 +68,10 @@ const CommunityBackends: React.FC<{
         }
       >
         <>
-          {data.enabled ? (
+          {data.enabled && (
             <ThemeTag style={{ margin: 0 }} color="geekblue" variant="filled">
               {intl.formatMessage({ id: 'common.status.enabled' })}
             </ThemeTag>
-          ) : (
-            <span onClick={(e) => e.stopPropagation()}>
-              <Switch
-                onChange={(checked) => handleOnEnable(checked, data)}
-                size="small"
-              ></Switch>
-            </span>
           )}
         </>
       </Tooltip>