@elice/material-exercise 1.220803.0

package/es/hooks/useArduino.js

@@ -0,0 +1,521 @@
+import { useRef, useState, useEffect } from 'react';
+import { usePrevious } from 'react-use';
+import { useRecoilState, useSetRecoilState } from 'recoil';
+import io from 'socket.io-client';
+import { exerciseArduinoPortsState, exerciseArduinoOpenedPortNameState, exerciseArduinoAgentConnectionState, exerciseArduinoUploadProgressState, exerciseArduinoPreferenceState, exerciseArduinoOnSelectPortState } from '../components/material-exercise/context/recoil.js';
+import '../components/material-exercise/context/context.js';
+import '../components/material-exercise/context/recoilTypes.js';
+import '../components/material-exercise/context/subjects.js';
+import '../components/material-exercise/context/ExerciseProvider.js';
+import { AVR_COMMANDLINE, AVR_SIGNATURE, DISABLE_TIME_AFTER_UPLOAD, ARDUINO_AGENT_PORTS } from '../constants/arduino.js';
+import { getArduinoBoardType, getFileContent, createArduinoUrl, getFQBN } from '../utils/arduino.js';
+
+//
+//
+
+const AGENT_INIT_DELAY = 500;
+const AGENT_REDISCOVER_DELAY = 10000;
+const AGENT_CHECK_PING_INTERVAL = 2000; //
+//
+//
+
+const useArduino = ({
+  writeTerminal
+}) => {
+  const _return = useRef({}); // ports
+
+
+  const [ports, setPorts] = useRecoilState(exerciseArduinoPortsState);
+  const [openedPortName, setOpenedPortName] = useRecoilState(exerciseArduinoOpenedPortNameState); // connection state
+
+  const setAgentConnectionStatus = useSetRecoilState(exerciseArduinoAgentConnectionState); // upload progress
+
+  const [uploadProgress, setUploadProgress] = useRecoilState(exerciseArduinoUploadProgressState);
+  const previousUploadProgress = usePrevious(uploadProgress); // preferences
+
+  const [preference, setPreference] = useRecoilState(exerciseArduinoPreferenceState);
+  const setOnSelectPort = useSetRecoilState(exerciseArduinoOnSelectPortState); // internal state
+
+  const state = useRef({
+    openedPortName: null,
+    uploadingPortName: null,
+    ports: []
+  });
+  const socket = useRef(null);
+  const pingInterval = useRef(null);
+  const [enabled, setEnabled] = useState(false);
+  const [agentHttpPort, setAgentHttpPort] = useState(null);
+  /**
+   * Discovers arduino agent and connects.
+   */
+
+  const init = () => {
+    setEnabled(true);
+  };
+  /**
+   * Closes all connection and destroys arduino agent.
+   */
+
+
+  const destroy = () => {
+    setEnabled(false);
+  };
+  /**
+   * Re-initializes arduino agent.
+   */
+
+
+  const reload = () => {
+    setEnabled(false);
+    setTimeout(init, 1000);
+  };
+  /**
+   * Close port, websocket and clear the state.
+   */
+
+
+  const reset = () => {
+    // close port
+    closePort(state.current.openedPortName); // close websocket
+
+    if (socket.current) {
+      socket.current.close();
+      socket.current = null;
+    } // clear ping interval
+
+
+    if (pingInterval.current) {
+      window.clearInterval(pingInterval.current);
+    } // reset states
+
+
+    setPorts([]);
+    setOpenedPortName(null);
+    setAgentConnectionStatus('disconnected');
+    setUploadProgress('ready');
+  };
+  /**
+   * Send command to arduino agent.
+   */
+
+
+  const send = (command, ...args) => {
+    var _a, _b;
+
+    if ((_a = socket.current) === null || _a === void 0 ? void 0 : _a.connected) {
+      (_b = socket.current) === null || _b === void 0 ? void 0 : _b.emit('command', [command, ...args].join(' '));
+    }
+  };
+  /**
+   * Send text to arduino agent.
+   */
+
+
+  const sendText = text => {
+    if (state.current.openedPortName) {
+      send('send', state.current.openedPortName, text);
+    }
+  };
+  /**
+   * Open port.
+   */
+
+
+  const openPort = portName => {
+    if (portName) {
+      setOpenedPortName(portName);
+      send('open', portName, preference.baudRate);
+    }
+  };
+  /**
+   * Close port.
+   */
+
+
+  const closePort = portName => {
+    if (portName) {
+      send('close', portName);
+    }
+  };
+  /**
+   * Send list command to the agent.
+   */
+
+
+  const ping = async () => {
+    if (!agentHttpPort) {
+      return;
+    }
+
+    if (state.current.uploadingPortName) {
+      return;
+    }
+
+    try {
+      await fetch(createArduinoUrl({
+        protocol: 'http',
+        pathname: '/info',
+        port: agentHttpPort
+      }));
+      send('list');
+    } catch (_) {
+      // if ping fails, reconnect the agent.
+      reload();
+      setAgentConnectionStatus('reconnecting');
+    }
+  };
+  /**
+   * Upload hex file to the agent.
+   */
+
+
+  const uploadHexFile = hexFile => {
+    if (!agentHttpPort || !state.current.openedPortName) {
+      return;
+    }
+
+    const port = state.current.ports.find(port => port.Name === state.current.openedPortName);
+
+    if (!port) {
+      return;
+    }
+
+    if (!hexFile.filename.includes(getArduinoBoardType(port) || 'not found')) {
+      return;
+    }
+
+    setUploadProgress('receivedHex'); // if port opened, close it.
+
+    state.current.uploadingPortName = state.current.openedPortName;
+
+    if (port.IsOpen) {
+      closePort(state.current.openedPortName);
+    } // get board type and content.
+
+
+    const content = getFileContent(hexFile.data);
+    const boradType = getArduinoBoardType(port);
+
+    if (!boradType) {
+      return;
+    }
+
+    fetch(createArduinoUrl({
+      protocol: 'http',
+      pathname: '/upload',
+      port: agentHttpPort
+    }), {
+      method: 'post',
+      body: JSON.stringify({
+        board: getFQBN(port),
+        commandline: AVR_COMMANDLINE[boradType],
+        filename: 'firmware.hex',
+        data: content,
+        hex: content,
+        port: state.current.openedPortName,
+        network: port.NetworkPort,
+        extra: {
+          use_1200bps_touch: false,
+          wait_for_upload_port: false
+        },
+        extrafiles: [],
+        signature: AVR_SIGNATURE[boradType]
+      })
+    }).then(res => res.json()).then(() => {// no response (202 accepted)
+    }).catch(() => {//
+    });
+  };
+  /**
+   * Handler called when user (re-)selects arduino device.
+   */
+
+
+  const onSelectPort = name => {
+    if (name === state.current.openedPortName) {
+      return;
+    }
+
+    if (state.current.openedPortName) {
+      closePort(state.current.openedPortName);
+    }
+
+    if (name !== null) {
+      openPort(name);
+    }
+  };
+  /**
+   * Handle arduino agent websocket message.
+   */
+
+
+  const handleAgentMsg = msg => {
+    // Ports
+    if ('Ports' in msg && msg.Network === false) {
+      handleAgentMsgPorts(msg);
+    } // Cmd
+    else if ('Cmd' in msg && 'Desc' in msg) {
+      handleAgentMsgCmd(msg);
+    } // Programmer Status
+    else if ('ProgrammerStatus' in msg) {
+      handleAgentMsgProgram(msg);
+    } // D
+    else if ('D' in msg) {
+      handleAgentMsgD(msg);
+    }
+  };
+  /**
+   * Handle arduino agent websocket message. (Ports)
+   */
+
+
+  const handleAgentMsgPorts = msg => {
+    setPorts(msg.Ports); // if port not opened, open new port.
+
+    if (!state.current.openedPortName && !state.current.uploadingPortName) {
+      const prefPort = msg.Ports.find(port => port.Name === preference.port);
+      const targetPort = prefPort ? prefPort : // if preference port not found, open first port.
+      msg.Ports.length > 0 ? msg.Ports[0] : null;
+
+      if (targetPort) {
+        openPort(targetPort.Name);
+      }
+    }
+  };
+  /**
+   * Handle arduino agent websocket message. (Cmd)
+   */
+
+
+  const handleAgentMsgCmd = msg => {
+    switch (msg.Cmd) {
+      case 'Open':
+        setOpenedPortName(msg.Port);
+        setPreference(prev => Object.assign(Object.assign({}, prev), {
+          port: msg.Port
+        }));
+        break;
+
+      case 'OpenFail':
+        closePort(msg.Port);
+        break;
+
+      case 'Close':
+        setOpenedPortName(null);
+        break;
+    }
+  };
+  /**
+   * Handle arduino agent websocket message. (ProgrammerStatus)
+   */
+
+
+  const handleAgentMsgProgram = msg => {
+    switch (msg.ProgrammerStatus) {
+      case 'Starting':
+        setUploadProgress('starting');
+        return;
+
+      case 'Busy':
+        setUploadProgress('busy');
+        return;
+
+      case 'Done':
+        setUploadProgress('done');
+        openPort(state.current.uploadingPortName);
+        state.current.uploadingPortName = null;
+        window.setTimeout(() => setUploadProgress('ready'), DISABLE_TIME_AFTER_UPLOAD);
+        return;
+
+      case 'Error':
+        setUploadProgress('error');
+        openPort(state.current.uploadingPortName);
+        state.current.uploadingPortName = null;
+        window.setTimeout(() => setUploadProgress('ready'), DISABLE_TIME_AFTER_UPLOAD);
+        return;
+    }
+  };
+  /**
+   * Handle arduino agent websocket message. (D)
+   */
+
+
+  const handleAgentMsgD = msg => {
+    writeTerminal(msg.D);
+  }; //
+  // Sync `openedPortName` recoil state with internal ref.
+  //
+
+
+  useEffect(() => {
+    state.current.openedPortName = openedPortName;
+  }, [openedPortName]); //
+  // Sync `ports` recoil state with internal ref.
+  //
+
+  useEffect(() => {
+    state.current.ports = ports;
+  }, [ports]); //
+  // Discover arduino agent port.
+  //
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const abortCtrl = new AbortController();
+    let reconnectTimeout = null;
+    /** Scan port. */
+
+    const _scan = async () => {
+      for (const port of ARDUINO_AGENT_PORTS) {
+        try {
+          await fetch(createArduinoUrl({
+            protocol: 'http',
+            pathname: '/info',
+            port
+          }), {
+            signal: abortCtrl.signal
+          });
+          return port;
+        } catch (err) {
+          // throw error on `AbortError`, to stop scan.
+          if (err.name === 'AbortError') {
+            throw err;
+          }
+        }
+      }
+
+      return null;
+    };
+    /** Scan port to discover until found. */
+
+
+    const _discover = async () => {
+      void _scan().then(port => {
+        // if port found, stop scanning and set port
+        if (port) {
+          setAgentHttpPort(port);
+        } // or start scanning again
+        else {
+          reconnectTimeout = window.setTimeout(() => void _discover(), AGENT_REDISCOVER_DELAY);
+        }
+      }).catch(() => void 0);
+    }; // start scanning...
+
+
+    setAgentConnectionStatus('connecting');
+    void _discover();
+    return () => {
+      abortCtrl.abort();
+
+      if (reconnectTimeout) {
+        window.clearTimeout(reconnectTimeout);
+      }
+
+      setAgentHttpPort(null);
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [enabled]); //
+  // Initialize arduino agent websocket.
+  //
+
+  useEffect(() => {
+    if (!enabled || !agentHttpPort) {
+      return;
+    }
+
+    const _init = async () => {
+      await new Promise(r => window.setTimeout(r, AGENT_INIT_DELAY));
+      setAgentConnectionStatus('connecting'); // connect socket.io-client to the agent.
+
+      socket.current = io(createArduinoUrl({
+        protocol: 'ws',
+        port: agentHttpPort
+      })); // agent - on message
+
+      socket.current.on('message', message => {
+        try {
+          const msg = JSON.parse(message);
+          handleAgentMsg(msg);
+        } catch (e) {// console.warn(e);
+        }
+      }); // agent - on connect
+
+      await new Promise(resolve => {
+        var _a;
+
+        return (_a = socket.current) === null || _a === void 0 ? void 0 : _a.on('connect', resolve);
+      }).then(ping).then(() => {
+        var _a, _b, _c, _d, _e;
+
+        (_a = socket.current) === null || _a === void 0 ? void 0 : _a.emit('command', 'downloadtool windows-drivers latest arduino keep');
+        (_b = socket.current) === null || _b === void 0 ? void 0 : _b.emit('command', 'downloadtool bossac 1.7.0 arduino keep');
+        (_c = socket.current) === null || _c === void 0 ? void 0 : _c.emit('command', 'downloadtool fwupdater latest arduino keep');
+        (_d = socket.current) === null || _d === void 0 ? void 0 : _d.emit('command', 'downloadtool rp2040tools latest arduino keep');
+        (_e = socket.current) === null || _e === void 0 ? void 0 : _e.emit('command', 'downloadtool avrdude 6.3.0-arduino15 arduino keep');
+      });
+      setAgentConnectionStatus('connected');
+      pingInterval.current = window.setInterval(() => void ping(), AGENT_CHECK_PING_INTERVAL);
+    };
+
+    void _init();
+    return () => {
+      reset();
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [enabled, agentHttpPort, // reload agent on port or baud rate change
+  preference.port, preference.baudRate]); //
+  // Print message to terminal according to the message type.
+  //
+
+  useEffect(() => {
+    if (previousUploadProgress === uploadProgress) {
+      return;
+    }
+
+    const _write = text => {
+      writeTerminal(`\x1b[1m\x1b[38;5;221m${text}\x1b[0m`);
+    };
+
+    switch (uploadProgress) {
+      case 'receivedHex':
+        _write('/* 컴파일이 완료되었습니다. */\n');
+
+        return;
+
+      case 'starting':
+        _write('/* 업로드를 시작합니다. */\n');
+
+        return;
+
+      case 'busy':
+        _write('/* 업로드 중입니다... */\n');
+
+        return;
+
+      case 'done':
+        _write('/* 업로드가 완료되었습니다. */\n');
+
+        return;
+
+      case 'error':
+        _write('/* 에러가 발생했습니다. */\n');
+
+        return;
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [previousUploadProgress, uploadProgress]);
+  setOnSelectPort(() => onSelectPort); //
+  //
+  //
+
+  _return.current.init = init;
+  _return.current.destroy = destroy;
+  _return.current.reload = reload;
+  _return.current.sendText = sendText;
+  _return.current.uploadHexFile = uploadHexFile;
+  return _return.current;
+};
+
+export { useArduino };

package/es/hooks/useExerciseFile.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Check whether the exercise file is editable.
+ */
+export declare const useExerciseFileEditable: (filename: string | null) => boolean;
+/**
+ * Check whether the exercise file is resettable.
+ */
+export declare const useExerciseFileResettable: (filename: string | null) => boolean;

package/es/hooks/useExerciseFile.js

@@ -0,0 +1,43 @@
+import { useMemo, useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+import { exerciseState, exerciseRoomState } from '../components/material-exercise/context/recoil.js';
+import { ExerciseContext } from '../components/material-exercise/context/context.js';
+import '../components/material-exercise/context/recoilTypes.js';
+import '../components/material-exercise/context/subjects.js';
+import '../components/material-exercise/context/ExerciseProvider.js';
+import { checkExerciseFileEditable, checkExerciseFileResettable } from '../utils/exerciseFile.js';
+
+/**
+ * Check whether the exercise file is editable.
+ */
+
+const useExerciseFileEditable = filename => {
+  const {
+    materialExerciseId,
+    exerciseRoomId
+  } = useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const exerciseRoom = useRecoilValue(exerciseRoomState(exerciseRoomId));
+  return useMemo(() => checkExerciseFileEditable(filename, {
+    exercise,
+    exerciseRoom
+  }), [filename, exercise, exerciseRoom]);
+};
+/**
+ * Check whether the exercise file is resettable.
+ */
+
+const useExerciseFileResettable = filename => {
+  const {
+    materialExerciseId,
+    exerciseRoomId
+  } = useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const exerciseRoom = useRecoilValue(exerciseRoomState(exerciseRoomId));
+  return useMemo(() => checkExerciseFileResettable(filename, {
+    exercise,
+    exerciseRoom
+  }), [filename, exercise, exerciseRoom]);
+};
+
+export { useExerciseFileEditable, useExerciseFileResettable };

package/es/hooks/useExericseShortcut.d.ts

@@ -0,0 +1,5 @@
+import { EXERCISE_SHORTCUT_KEY_MAP } from "../constants";
+declare type Name = keyof typeof EXERCISE_SHORTCUT_KEY_MAP;
+declare type Callback = (e: KeyboardEvent) => any;
+export declare const useExericseShortcut: (name: Name, fn: Callback) => void;
+export {};

package/es/hooks/useExericseShortcut.js

@@ -0,0 +1,20 @@
+import { useKey } from 'react-use';
+import EXERCISE_SHORTCUT_KEY_MAP from '../constants/shortcutKeyMap.js';
+
+const useExericseShortcut = (name, fn) => {
+  const keys = EXERCISE_SHORTCUT_KEY_MAP[name];
+  useKey(e => {
+    if (keys && keys.some(key => key.key === e.key && key.metaKey === e.metaKey && key.ctrlKey === e.ctrlKey && key.shiftKey === e.shiftKey && key.altKey === e.altKey)) {
+      // console.log(e);
+      e.preventDefault();
+      e.stopPropagation();
+      return true;
+    }
+
+    return false;
+  }, fn, {
+    event: 'keydown'
+  });
+};
+
+export { useExericseShortcut };

package/es/hooks/useMaterialExerciseFileUrl.d.ts

@@ -0,0 +1,10 @@
+import type { GetOrgMaterialExerciseGetResponses } from '@elice/types';
+declare type UseMaterialExerciseFileUrl = (props: UseMaterialExerciseFileUrlProps) => string | null;
+interface UseMaterialExerciseFileUrlProps {
+    filename: string | null;
+    exercise: GetOrgMaterialExerciseGetResponses['materialExercise'] | null;
+    exerciseRoomId: number;
+    onError?: (err: any) => void;
+}
+export declare const useMaterialExerciseFileUrl: UseMaterialExerciseFileUrl;
+export {};

package/es/hooks/useMaterialExerciseFileUrl.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { getOrgMaterialExerciseExerciseImageExerciseFileGet, getOrgMaterialExerciseExerciseRoomUserFileGet } from '@elice/api-client';
+
+const useMaterialExerciseFileUrl = ({
+  filename,
+  exercise,
+  exerciseRoomId,
+  onError
+}) => {
+  const [fileUrl, setFileUrl] = React.useState(null); //
+  // Fetch file url.
+  //
+
+  React.useEffect(() => {
+    const abortCtrl = new AbortController();
+    const exerciseImage = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage;
+
+    if (!exerciseImage || !filename) {
+      return;
+    }
+
+    (async () => {
+      var _a;
+
+      const exerciseImageFileList = (_a = exerciseImage.filelist) !== null && _a !== void 0 ? _a : []; // origin from exercise image
+
+      if (exerciseImageFileList.includes(filename)) {
+        return getOrgMaterialExerciseExerciseImageExerciseFileGet({
+          exerciseImageId: exerciseImage.id,
+          filename
+        }, {
+          signal: abortCtrl.signal
+        }).then(res => res.exerciseFile.url).catch(() => null);
+      } // origin from exercise room
+      else {
+        return getOrgMaterialExerciseExerciseRoomUserFileGet({
+          exerciseRoomId,
+          filename
+        }, {
+          signal: abortCtrl.signal
+        }).then(res => res.userFile.url).catch(() => null);
+      }
+    })().then(setFileUrl).catch(onError);
+    return () => {
+      abortCtrl.abort();
+      setFileUrl(null);
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [exercise, exerciseRoomId, filename]);
+  return fileUrl;
+};
+
+export { useMaterialExerciseFileUrl };

package/es/hooks/useRunnerRoomWebSocket.d.ts

@@ -0,0 +1,19 @@
+export interface RunnerRoomConnectionInfo {
+    httpUri: string;
+    wsUri: string;
+    roomToken: string;
+}
+export interface UseRunnerRoomWebSocketProps {
+    exerciseRoomId: number;
+}
+export interface UseRunnerRoomWebSocketReturns {
+    readyState: WebSocket['readyState'];
+    roomConnectionInfo: RunnerRoomConnectionInfo | null;
+    isRunning: boolean;
+    reconnect: () => void;
+}
+export declare type UseRunnerRoomWebSocket = (props: UseRunnerRoomWebSocketProps) => UseRunnerRoomWebSocketReturns;
+/**
+ *
+ */
+export declare const useRunnerRoomWebSocket: UseRunnerRoomWebSocket;