@dao42/d42paas-front 0.4.5 → 0.4.6

package/src/helpers/collections/mock.tsx

@@ -0,0 +1,30 @@
+export const roleColors = (index: number) =>
+  [
+    '#d904c7',
+    '#49cf5b',
+    '#D9C589',
+    '#F27B13',
+    '#A0D9D9',
+    '#45858C',
+    '#8C311C',
+    '#4A5B8C',
+    '#8C4F2B',
+    '#34401A',
+    '#CAD959',
+    '#0476D9',
+  ][index];
+
+export const avatarGenerator = (value: number, name: string) => {
+  const avatarSeries = [
+    'initials',
+    'avataaars',
+    'big-ears',
+    'bottts',
+    'croodles',
+    'personas',
+    'micah',
+  ];
+  // return `https://avatars.dicebear.com/api/avataaars/${name}.svg`;
+  return `https://avatars.dicebear.com/api/human/${name}.svg`;
+  // return `https://avatars.dicebear.com/api/${avatarSeries[value]}/${name}.svg`;
+};

package/src/helpers/collections/playgroundInit.tsx

@@ -0,0 +1,311 @@
+import { omit } from 'lodash';
+import {
+  oTStore,
+  T_UserInfo,
+  userListStore,
+  userStore,
+} from '~/stores/oTStore';
+import { avatarGenerator, roleColors } from './mock';
+import { random as _random } from 'lodash';
+import { IsMe, IsSameFile } from './userTool';
+import { unstable_batchedUpdates } from 'react-dom';
+import {
+  daopaasDB,
+  getLocalReplayFile,
+  setLocalMedia,
+  setLocalReplayFile,
+  setReplaySource,
+} from './idb';
+import { replay } from './replay';
+import { Toast } from './toast';
+
+const heartbeatTime = 1000 * 60 * 10;
+
+const PlaygroundInit = ({ ticket, playgroundId, userId, io }) => {
+  unstable_batchedUpdates(() => {
+    // const io = useOT.getState().socket;
+    const setUserInfo = userStore.getState().setUserInfo;
+    const setUserList = userListStore.getState().setUserList;
+
+    // oTStore
+    const {
+      switchDoc,
+      setSenders,
+      setCRDTInfo,
+      setServerAck,
+      setCustomAck,
+      switchDocTree,
+      setPlaygroundInfo,
+      setDockerInfo,
+      setQueryObject,
+      setPlaygroundStatus,
+      setFromServer,
+      setDockerStatus,
+      appStatus,
+      setAppStatus,
+      setGlobalData,
+    } = oTStore.getState();
+
+    // setAppStatus('code');
+    // io.emit('appStatus', 'code');
+    window.clearCache = () => {
+      localStorage.clear();
+      indexedDB.deleteDatabase('daopaas').onsuccess = () => {
+        console.log('daopaas Deleted !');
+      };
+      io.emit('clearCache');
+    };
+    window.Toast = Toast;
+
+    setDockerInfo({
+      ...oTStore.getState().dockerInfo,
+      ticket,
+    });
+
+    // window.onerror = function (message, source, lineno, colno, error) {
+    //   debugger;
+    // };
+
+    io.on('connect', () => {
+      console.log('已连接');
+      io.emit('checkSign', ticket);
+      setInterval(() => {
+        io.emit('heartbeat', '💗');
+      }, heartbeatTime);
+    });
+
+    io.on('clearCache', () => {
+      window.location.reload();
+      // io.disconnect();
+    });
+
+    io.on('appStatus', (data) => {
+      setAppStatus(data);
+    });
+
+    io.on('globalData', (data) => {
+      setGlobalData(data);
+    });
+
+    io.on('welcome', (data) => {
+      let originUser = userStore.getState().userInfo;
+      const userData = JSON.parse(data);
+      // const { coUsers } = userData;
+      const color = roleColors(userData.onlineCount - 1);
+      if (originUser.uuid === userData.uuid) {
+        originUser = omit(
+          {
+            ...userData,
+            color,
+            avatar: avatarGenerator(_random(0, 6), userData.uuid),
+          },
+          'coUsers',
+        );
+        setUserInfo(originUser);
+      }
+
+      const userInfoList = [
+        originUser,
+        ...userData.coUsers
+          .filter((f) => f.uuid !== originUser.uuid)
+          .map((user) => {
+            return {
+              ...user,
+              avatar: avatarGenerator(_random(0, 6), user.uuid),
+              color: roleColors(user.onlineCount - 1),
+            };
+          }),
+      ];
+      setUserList(userInfoList);
+    });
+
+    io.on('playgroundInfo', (data) => {
+      const { playgroundInfo, crdt, dockerInfo } = JSON.parse(data);
+      setPlaygroundInfo(playgroundInfo);
+      setDockerInfo(dockerInfo);
+
+      dockerInfo.fileTree &&
+        switchDocTree({
+          data: dockerInfo.fileTree,
+        });
+      setCRDTInfo(crdt);
+      // setReplaySource(crdt);
+    });
+
+    io.on('playgroundStatus', (data) => {
+      setPlaygroundStatus(data);
+    });
+    io.on('dockerStatus', (data) => {
+      setDockerStatus(data || 'STOP');
+    });
+
+    io.on('fileContent', async (d) => {
+      const _d = JSON.parse(d) as D42_FrontType.CRDT;
+      // const editor = _d;
+
+      setCRDTInfo(_d);
+      setReplaySource(_d);
+      if (IsMe(_d?.userInfo)) {
+        switchDoc(_d.file);
+        (await daopaasDB).put('files', _d.file.value, _d.file.path);
+        if (!(await getLocalReplayFile(_d.file.path))) {
+          setLocalReplayFile(_d.file.path, _d.file.value);
+        }
+        // (await daopaasDB).put(
+        //   'replayFiles',
+        //   _d.editor.doc.value,
+        //   _d.editor.doc.path,
+        // );
+        console.log('serverRevision', _d.editor.revision);
+      }
+    });
+    io.on('terminal', (d) => {
+      const _d = JSON.parse(d) as D42_FrontType.CRDT;
+      setCRDTInfo(_d);
+      setReplaySource(_d);
+    });
+    io.on('editFile', (d) => {
+      const _d = JSON.parse(d);
+      setFromServer(true);
+      // setServerAck();
+
+      setCRDTInfo(_d);
+      setReplaySource(_d);
+      // console.log(_d.editor.revision);
+    });
+
+    io.on('saveFile', (d) => {
+      const _d = JSON.parse(d);
+
+      // setFileSaved(d);
+      // console.log(_d.editor.revision);
+    });
+    io.on('customAck', (d) => {
+      const _d = JSON.parse(d);
+      // console.log(_d);
+      setCRDTInfo(_d);
+      setReplaySource(_d);
+      setCustomAck();
+    });
+    io.on('serverAck', (d) => {
+      // 待确认逻辑
+      const _d = JSON.parse(d);
+      setReplaySource(_d);
+      setServerAck();
+    });
+
+    io.on('sender', (d) => {
+      setSenders([...oTStore.getState().senders, JSON.parse(d).sender]);
+    });
+
+    io.on('fileNode', (data) => {
+      const res = JSON.parse(data);
+
+      switchDocTree({
+        // data: res.data,
+        data: res,
+      });
+    });
+
+    io.on('console', (d) => {
+      const _d = JSON.parse(d) as D42_FrontType.CRDT;
+      setCRDTInfo(_d);
+      setReplaySource(_d);
+    });
+
+    io.on('mediaRecord', (d) => {
+      const _d = JSON.parse(d) as D42_FrontType.CRDT;
+      setLocalMedia(_d.timestamp, _d);
+      setCRDTInfo(_d);
+      setReplaySource(_d);
+    });
+
+    // 断联处理
+    io.on('disconnect', (reason) => {
+      console.log(reason, '连接断开');
+
+      if (reason === 'io server disconnect') {
+        // the disconnection was initiated by the server, you need to reconnect manually
+        return;
+      }
+      io.connect();
+    });
+
+    io.on('authorized_error', (error) => {
+      setTimeout(() => {
+        Toast.message({
+          type: 'error',
+          content: error,
+          placement: 'bottomEnd',
+        });
+      }, 2000);
+    });
+
+    io.on('connect_error', (error) => {
+      setTimeout(() => {
+        Toast.message({
+          type: 'error',
+          content: '连接错误, 重新连接中~~~请稍后',
+          placement: 'bottomEnd',
+        });
+      }, 2000);
+      io.connect();
+      // throw error;
+    });
+
+    io.on('connect_timeout', (timeout) => {
+      console.log(timeout, '连接超时');
+      io.connect();
+      // throw timeout + 'error';
+    });
+
+    io.on('error', (error) => {
+      setTimeout(() => {
+        Toast.message({
+          type: 'error',
+          content: '连接错误，重连中',
+          placement: 'bottomEnd',
+        });
+      }, 2000);
+      // console.log(error, '连接错误，重连中');
+      io.connect();
+      // throw error;
+    });
+
+    // io.on('reconnecting', (attemptNumber) => {
+    //   console.log('重连中', attemptNumber);
+    //   io.connect();
+    // });
+
+    io.on('reconnect_attempt', (attemptNumber) => {
+      console.log('重连中', '...', attemptNumber);
+    });
+
+    io.on('reconnect', (data) => {
+      // console.log('已重连~~');
+      Toast.message({
+        type: 'info',
+        content: '已成功重新连接！',
+        placement: 'topCenter',
+      });
+      //   const userData = JSON.parse(data);
+      //   const _u = {
+      //     ...userData,
+      //     color: roleColors(userData.onlineCount - 1),
+      //   };
+
+      //   // 进入房间user
+      //   setUserStack(userData.coUsers);
+      //   setUserInfo(_u);
+      //   const co_user = {};
+      //   Object.keys(userData.coUsers).forEach((user) => {
+      //     // co_user[userData.coUsers[user['uuid']]] = userData.coUsers[user];
+      //     co_user[userData.coUsers[user]['uuid']] = userData.coUsers[user];
+      //   });
+      //   localStorage.setItem('userStack', JSON.stringify(co_user));
+      //   localStorage.setItem('userInfo', JSON.stringify(omit(_u, 'coUsers')));
+    });
+  });
+};
+
+export { PlaygroundInit };

package/src/helpers/collections/replay.tsx

@@ -0,0 +1,168 @@
+import { oTStore } from '~/stores';
+
+import { getLocalCRDTs, getLocalReplayFile } from './idb';
+import { IsMe } from './userTool';
+import { random } from 'lodash';
+import { userStore } from '~/stores/oTStore';
+import { useOT } from '~/hooks';
+import { Toast } from './toast';
+
+let index = 0;
+const REPLAY_INTERVAL = 250;
+let timer;
+let timeOutT: NodeJS.Timeout;
+const replayHandler = async () => {
+  const {
+    setAppStatus,
+    switchDoc,
+    switchDocTree,
+    setCRDTInfo,
+    dockerInfo,
+    doc,
+  } = oTStore.getState();
+  // const { userInfo } = userStore.getState();
+  // const { socket } = useOT.getState();
+  // const WHICH_ROLE = userInfo;
+  // switchDoc({
+  //   value: '',
+  //   path: '',
+  // });
+
+  switchDocTree({ data: dockerInfo.fileTree });
+
+  // setCRDTInfo({
+  //   userInfo: {
+  //     uuid: undefined,
+  //   },
+  //   timestamp: undefined,
+  //   evtType: 'Terminal',
+  //   doc: {
+  //     action: 'Get',
+  //     path: '',
+  //     value: '',
+  //   },
+  // });
+
+  // setAppStatus('replay');
+  // socket.emit('appStatus', 'replay');
+
+  // debugger;
+  const crdts: D42_FrontType.ReplaySource[] = await getLocalCRDTs();
+  // const filterData = crdts.filter((f) => IsMe(f.userInfo));
+  const filterData = crdts[index];
+  const cdata = ({ ...filterData } as unknown) as D42_FrontType.CRDT;
+
+  // for (const i in cdata) {
+  //   if (i !== 'timestamp') {
+  //     cdata[i] = cdata[i].get(WHICH_ROLE.uuid);
+  //   }
+  // }
+
+  timeOutT = setTimeout(async () => {
+    if (!cdata.timestamp) {
+      clearTimeout(timeOutT);
+      // console.log(crdts);
+      // console.log(filterData);
+      replay('stop');
+      return;
+    }
+
+    if (cdata.file) {
+      const file = await getLocalReplayFile(cdata.file.path);
+
+      cdata.file.value = file;
+
+      if (doc.path !== cdata.file.path) {
+        switchDoc({
+          value: file,
+          path: cdata.file.path as string,
+        });
+      }
+      // setTimeout(() => {
+      setCRDTInfo({
+        ...cdata,
+        // userInfo: WHICH_ROLE,
+      });
+      // }, 0);
+      return;
+    }
+    // setTimeout(() => {
+    setCRDTInfo({
+      ...cdata,
+      // userInfo: WHICH_ROLE,
+    });
+    // }, 0);
+  }, 0);
+
+  index++;
+
+  return {};
+};
+
+export const replay = async (status?: 'stop' | 'disabled' | 'pause') => {
+  const { setAppStatus, switchDoc, doc, globalData } = oTStore.getState();
+  const { socket } = useOT.getState();
+
+  switch (status) {
+    case 'stop':
+      clearInterval(timer);
+      // switchDoc(doc);
+      // switchDoc({
+      //   value: '',
+      //   path: '',
+      // });
+      setAppStatus('code');
+
+      Toast.message({
+        type: 'info',
+        content: '播放完毕',
+        placement: 'topCenter',
+      });
+      index = 0;
+
+      break;
+
+    case 'disabled':
+      clearInterval(timer);
+      switchDoc({
+        value: '',
+        path: '',
+      });
+      setAppStatus('code');
+      // socket.emit('appStatus', 'code');
+      index = 0;
+
+      break;
+
+    case 'pause':
+      clearInterval(timer);
+      setAppStatus('pause');
+
+      break;
+
+    default:
+      // switchDoc({
+      //   value: '',
+      //   path: '',
+      // });
+      switchDoc({
+        value: '',
+        path: '',
+      });
+      clearInterval(timer);
+      // setAppStatus('code');
+      replayHandler();
+      // setAppStatus('replay');
+      setAppStatus('replay');
+      // socket.emit('appStatus', 'replay');
+
+      timer = setInterval(() => {
+        if (globalData.isRecording) {
+          throw 'dError: 录制过程中无法回放！';
+        }
+        replayHandler();
+      }, REPLAY_INTERVAL);
+
+      break;
+  }
+};

package/src/helpers/collections/socket.tsx

@@ -0,0 +1,6 @@
+// import { io, Socket } from 'socket.io-client';
+// import { DefaultEventsMap } from 'socket.io-client/build/typed-events';
+
+const socketHelper = (string) => string;
+
+export { socketHelper };

package/src/helpers/collections/toast.tsx

@@ -0,0 +1,19 @@
+// import { Message, MsgType } from '~/components/Message';
+import { toaster, Notification, Message } from 'rsuite';
+import React from 'react';
+
+export class Toast {
+  static message(props) {
+    // debugger;
+    toaster.push(
+      <Message showIcon {...props}>
+        {props.content}
+      </Message>,
+      {
+        placement: props.placement || 'topCenter',
+        // ...props,
+        // container:（）=> document.body,
+      },
+    );
+  }
+}

package/src/helpers/collections/userTool.tsx

@@ -0,0 +1,12 @@
+import { oTStore } from '~/stores';
+import { userStore } from '~/stores/oTStore';
+
+export const IsMe = (userInfo) => {
+  const _u = userStore.getState().userInfo;
+  return _u.uuid === userInfo.uuid;
+};
+
+export const IsSameFile = (file) => {
+  const _f = oTStore.getState().doc;
+  return _f.path === file.path;
+};

package/src/helpers/collections/util.tsx

@@ -0,0 +1,4 @@
+export const globalVal = (global) => {
+  global.d42 = window;
+  global.log = console.log;
+};

package/src/helpers/index.tsx

@@ -0,0 +1,6 @@
+export { socketHelper } from './collections/socket';
+export { localStorageSpace } from './collections/localStorage';
+export { avatarGenerator, roleColors } from './collections/mock';
+export { globalVal } from './collections/util';
+export { IsMe, IsSameFile } from './collections/userTool';
+export { IoClient } from './collections/IoClient';