Repository: imgcook/imove
File: packages/core/src/mods/header/index.tsx (TypeScript)

Code before:
import styles from './index.module.less';

import { Graph } from '@antv/x6';
import { Modal, message } from 'antd';
import Guide from './guide';
import Export from './export';
import ImportDSL from './importDSL';
import ConnectStatus, { Status } from './connectStatus';
import Configuration from './configuration';
import { localConnect } from '../../api';

interface IProps {
  flowChart: Graph;
}

const Header: React.FC<IProps> = (props: IProps) => {
  const { flowChart } = props;
  const [projectName, setProjectName] = useState<string>('');
  const [status, setStatus] = useState<Status>(Status.disconnected);

  // network
  const syncLocal = useCallback(() => {
    return localConnect()
      .then((res) => res.json())
      .then((data = {}) => {
        console.log(data);
        setStatus(Status.connected);
        setProjectName(data.projectName);
        return data;
      })
      .catch((error) => {
        console.log(error);
        setStatus(Status.disconnected);
        console.log('connect local failed, the error is:', error.message);
      });
  }, [setStatus, setProjectName]);

  const confirmToSync = useCallback(() => {
    return syncLocal().then((data) => {
      const { dsl } = data || {};
      if (dsl) {
        Modal.confirm({
          title: '本地连接成功，是否将数据同步至当前项目？',
          onOk() {
            try {
              flowChart.fromJSON(dsl);
            } catch (error) {
              message.error('同步失败！');
            }
          },
        });

Review comment (suggestion):
Here, we recommend you to remove your code of console.log. Because our custom console component intercepts the global console method, all the code here will cause trouble, resulting in the output of this data when execute the single node.

Code after:
import styles from './index.module.less';

import { Graph } from '@antv/x6';
import { Modal, message } from 'antd';
import Guide from './guide';
import Export from './export';
import ImportDSL from './importDSL';
import ConnectStatus, { Status } from './connectStatus';
import Configuration from './configuration';
import { localConnect } from '../../api';

interface IProps {
  flowChart: Graph;
}

const Header: React.FC<IProps> = (props: IProps) => {
  const { flowChart } = props;
  const [projectName, setProjectName] = useState<string>('');
  const [status, setStatus] = useState<Status>(Status.disconnected);

  // network
  const syncLocal = useCallback(() => {
    return localConnect()
      .then((res) => res.json())
      .then((data = {}) => {
        setStatus(Status.connected);
        setProjectName(data.projectName);
        return data;
      })
      .catch((error) => {
        console.log(error);
        setStatus(Status.disconnected);
        console.log('connect local failed, the error is:', error.message);
      });
  }, [setStatus, setProjectName]);

  const confirmToSync = useCallback(() => {
    return syncLocal().then((data) => {
      const { dsl } = data || {};
      if (dsl) {
        Modal.confirm({
          title: '本地连接成功，是否将数据同步至当前项目？',
          onOk() {
            try {
              flowChart.fromJSON(dsl);
            } catch (error) {
              message.error('同步失败！');
            }
          },
        });
      }