@elice/material-exercise 1.220803.0

package/cjs/components/material-exercise/exercise-room/ExerciseRoomList.js

@@ -0,0 +1,195 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var apiClient = require('@elice/api-client');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var icons = require('@elice/icons');
+var types = require('@elice/types');
+var recoil = require('recoil');
+var styled = require('styled-components');
+var recoil$1 = require('../context/recoil.js');
+var context = require('../context/context.js');
+require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+var exerciseRoomPermissionStringConvertor = require('./helpers/exerciseRoomPermissionStringConvertor.js');
+var ExerciseRoom_styled = require('./ExerciseRoom.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledModal = styled__default["default"](blocks.Modal).withConfig({
+  componentId: "sc-1ydn3lf-0"
+})(["& > div:first-child{.eb-button{color:", ";&:hover{color:", ";}}}"], designTokens.base.color.navy0, designTokens.base.color.navy0);
+
+const MaterialExerciseExerciseRoomList = ({
+  onExerciseRoomClick,
+  onHide
+}) => {
+  const intl = reactIntl.useIntl();
+  const {
+    materialExerciseId,
+    exerciseRoomId
+  } = React__default["default"].useContext(context.ExerciseContext);
+  const materialExercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  const user = recoil.useRecoilValue(recoil$1.exerciseUserState);
+  const [exerciseRooms, setExerciseRooms] = React__default["default"].useState([]);
+  const [createStatus, setCreateStatus] = React__default["default"].useState('idle');
+  const doGetOrgMaterialExerciseExerciseRoomList = React__default["default"].useCallback(({
+    materialExerciseId,
+    userId
+  }) => {
+    apiClient.getOrgMaterialExerciseExerciseRoomList({
+      materialExerciseId,
+      userId
+    }).then(res => setExerciseRooms(res.exerciseRooms)).catch(console.error);
+  }, []);
+  React__default["default"].useEffect(() => {
+    if (materialExercise && user) {
+      // 📝 api does not support last_dateime pivot, so you could not use infinite scroll at the moment.
+      doGetOrgMaterialExerciseExerciseRoomList({
+        materialExerciseId: materialExercise.id,
+        userId: user.id
+      });
+    }
+  }, [doGetOrgMaterialExerciseExerciseRoomList, materialExercise, user]);
+  const doPostOrgMaterialExerciseExerciseRoomEdit = React__default["default"].useCallback(async ({
+    materialExerciseId,
+    userId
+  }) => {
+    try {
+      setCreateStatus('pending');
+      await apiClient.postOrgMaterialExerciseExerciseRoomEdit({
+        title: `제목없음 (${new Date().toLocaleString()})`,
+        materialExerciseId,
+        publicPermission: types.enums.ExerciseRoomPermission.Nothing
+      });
+      doGetOrgMaterialExerciseExerciseRoomList({
+        materialExerciseId,
+        userId
+      });
+      setCreateStatus('resolved');
+      blocks.Notification.success(intl.formatMessage({
+        id: 'materialExerciseExerciseRoom.create.success'
+      }));
+    } catch (error) {
+      console.error(error);
+      blocks.Notification.error(intl.formatMessage({
+        id: 'materialExerciseExerciseRoom.create.failure'
+      }));
+      setCreateStatus('rejected');
+    }
+  }, [doGetOrgMaterialExerciseExerciseRoomList, intl]);
+  return React__default["default"].createElement(StyledModal, {
+    theme: "dark",
+    onHide: onHide,
+    title: intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.title'
+    }),
+    footerChild: React__default["default"].createElement(blocks.Flex, {
+      justify: "flex-end"
+    }, React__default["default"].createElement(blocks.Text, {
+      role: "gray3",
+      size: "tiny"
+    }, intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.description'
+    }))),
+    footerButtons: [{
+      label: intl.formatMessage({
+        id: 'materialExerciseExerciseRoom.create'
+      }),
+      loading: createStatus === 'pending',
+      onClick: () => {
+        if (materialExercise && user) {
+          void doPostOrgMaterialExerciseExerciseRoomEdit({
+            materialExerciseId: materialExercise.id,
+            userId: user.id
+          });
+        } else {
+          console.error(JSON.stringify({
+            materialExercise,
+            user
+          }));
+        }
+      }
+    }, {
+      label: intl.formatMessage({
+        id: 'materialExerciseExerciseRoom.exit'
+      }),
+      role: 'gray6',
+      onClick: onHide
+    }]
+  }, React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTableWrapper, null, React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTable, null, React__default["default"].createElement("colgroup", null, React__default["default"].createElement("col", {
+    span: 1,
+    width: "60%"
+  }), React__default["default"].createElement("col", {
+    span: 1,
+    width: "20%"
+  }), React__default["default"].createElement("col", {
+    span: 1,
+    width: "20%"
+  })), React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomThead, null, React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTr, null, React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTh, null, intl.formatMessage({
+    id: 'materialExerciseExerciseRoom.exerciseRoom.name'
+  })), React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTh, null, intl.formatMessage({
+    id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission'
+  })), React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTh, null, intl.formatMessage({
+    id: 'materialExerciseExerciseRoom.exerciseRoom.participants'
+  })))), React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTbody, {
+    hoverable: true
+  }, exerciseRooms.map(exerciseRoom => {
+    var _a, _b;
+
+    return React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTr, {
+      key: exerciseRoom.id,
+      onClick: () => onExerciseRoomClick(exerciseRoom.id)
+    }, React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTd, null, React__default["default"].createElement(blocks.Flex, {
+      align: "center"
+    }, exerciseRoom.isDefaultRoom ? React__default["default"].createElement(blocks.Icon, {
+      icon: icons.eisArrowDownwardsCircle,
+      color: designTokens.base.color.primary3,
+      style: {
+        marginRight: '0.5rem'
+      }
+    }) : null, React__default["default"].createElement(blocks.Text, {
+      bold: true,
+      size: "small",
+      role: exerciseRoom.isDefaultRoom ? 'lightpurple' : 'gray0',
+      preWrap: true,
+      ellipsis: true,
+      customStyles: {
+        maxWidth: '300px'
+      }
+    }, exerciseRoom.title), exerciseRoomId === exerciseRoom.id ? React__default["default"].createElement(blocks.Text, {
+      size: "tiny",
+      role: "gray0",
+      customStyles: {
+        marginLeft: '0.5rem'
+      }
+    }, intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.selected'
+    })) : null)), React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTd, null, React__default["default"].createElement(blocks.Text, {
+      bold: true,
+      role: "gray0",
+      size: "tiny",
+      preWrap: true,
+      ellipsis: true,
+      customStyles: {
+        maxWidth: '100px'
+      }
+    }, intl.formatMessage({
+      id: `materialExerciseExerciseRoom.exerciseRoom.publicPermission.${exerciseRoomPermissionStringConvertor.exerciseRoomPermissionStringConvertor((_b = (_a = exerciseRoom.roomUsers.find(roomUser => roomUser.user.id === (user === null || user === void 0 ? void 0 : user.id))) === null || _a === void 0 ? void 0 : _a.permission) !== null && _b !== void 0 ? _b : types.enums.ExerciseRoomPermission.Nothing)}`
+    }))), React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTd, null, React__default["default"].createElement(blocks.ProfileImageGroup, {
+      max: 8
+    }, exerciseRoom.roomUsers.map(roomUser => React__default["default"].createElement(blocks.ProfileImage, {
+      key: roomUser.user.id,
+      src: roomUser.user.profileUrl || '',
+      hasBorder: false
+    })))));
+  })))));
+};
+
+module.exports = MaterialExerciseExerciseRoomList;

package/cjs/components/material-exercise/exercise-room/helpers/exerciseRoomPermissionStringConvertor.d.ts

@@ -0,0 +1,2 @@
+import { enums } from '@elice/types';
+export declare const exerciseRoomPermissionStringConvertor: (publicPermission: enums.ExerciseRoomPermission) => string;

package/cjs/components/material-exercise/exercise-room/helpers/exerciseRoomPermissionStringConvertor.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var types = require('@elice/types');
+var humps = require('humps');
+
+const exerciseRoomPermissionStringConvertor = publicPermission => {
+  let result = '';
+
+  switch (publicPermission) {
+    case types.enums.ExerciseRoomPermission.Nothing:
+      result = types.enums.ExerciseRoomPermission[publicPermission];
+      break;
+
+    case types.enums.ExerciseRoomPermission.Read:
+      result = types.enums.ExerciseRoomPermission[publicPermission];
+      break;
+
+    case types.enums.ExerciseRoomPermission.ReadWrite:
+      result = types.enums.ExerciseRoomPermission[publicPermission];
+      break;
+
+    case types.enums.ExerciseRoomPermission.Owner:
+      result = types.enums.ExerciseRoomPermission[publicPermission];
+      break;
+
+    default:
+      result = '';
+      break;
+  }
+
+  return humps.camelize(result);
+};
+
+exports.exerciseRoomPermissionStringConvertor = exerciseRoomPermissionStringConvertor;

package/cjs/components/material-exercise/exercise-room/helpers/index.d.ts

@@ -0,0 +1 @@
+export { exerciseRoomPermissionStringConvertor } from './exerciseRoomPermissionStringConvertor';

package/cjs/components/material-exercise/exercise-room/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ExerciseRoom } from './ExerciseRoom';
+export type { ExerciseRoomProps } from './ExerciseRoom';

package/cjs/components/material-exercise/exercise-room/locales/en.json.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var phrasesEn = {"materialExerciseExerciseRoom.create":"New Exercise Room","materialExerciseExerciseRoom.create.failure":"There was a problem creating a new lab.","materialExerciseExerciseRoom.create.success":"A new room has been created.","materialExerciseExerciseRoom.defaultExerciseRoomDescription":"The room is set to open by default.","materialExerciseExerciseRoom.description":"Create your own practice environment by creating a practice room with your tutor and friends.","materialExerciseExerciseRoom.detail.addUsers.label":"Add users","materialExerciseExerciseRoom.detail.addUsers.placeholder":"Search for the username you want to invite.","materialExerciseExerciseRoom.detail.copy":"Copy","materialExerciseExerciseRoom.detail.copy.success":"The link has been copied.","materialExerciseExerciseRoom.detail.footer.button.open.description":"The room is set to open by default.","materialExerciseExerciseRoom.detail.footer.description":"The room is set to open by default.","materialExerciseExerciseRoom.detail.sharelink.label":"Share Link","materialExerciseExerciseRoom.detail.table.body.add":"Invite","materialExerciseExerciseRoom.detail.table.head.permission":"Permission","materialExerciseExerciseRoom.detail.table.head.users":"Participants","materialExerciseExerciseRoom.detail.title.label":"Title","materialExerciseExerciseRoom.detail.title.placeholder":"Enter title","materialExerciseExerciseRoom.exerciseRoom.name":"Room Name","materialExerciseExerciseRoom.exerciseRoom.participants":"Participants","materialExerciseExerciseRoom.exerciseRoom.publicPermission":"Permission","materialExerciseExerciseRoom.exerciseRoom.publicPermission.nothing":"No Permission","materialExerciseExerciseRoom.exerciseRoom.publicPermission.owner":"Owner","materialExerciseExerciseRoom.exerciseRoom.publicPermission.read":"Read Only","materialExerciseExerciseRoom.exerciseRoom.publicPermission.readWrite":"Read and Write","materialExerciseExerciseRoom.exit":"Close","materialExerciseExerciseRoom.leave":"Leave Exercise Room","materialExerciseExerciseRoom.leave.dialog.body":"Every code you wrote will disappear. Are you sure you want to leave this room?","materialExerciseExerciseRoom.leave.dialog.title":"Exit Exercise Room","materialExerciseExerciseRoom.open":"Open Exercise Room","materialExerciseExerciseRoom.selected":"(Current ExerciseRoom)","materialExerciseExerciseRoom.title":"Exercise Room"};
+
+module.exports = phrasesEn;

package/cjs/components/material-exercise/exercise-room/locales/ko.json.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var phrasesKo = {"materialExerciseExerciseRoom.create":"새 실습방","materialExerciseExerciseRoom.create.failure":"새로운 실습방을 만드는데 문제가 발생하였습니다.","materialExerciseExerciseRoom.create.success":"새로운 실습방이 생성 되었습니다.","materialExerciseExerciseRoom.defaultExerciseRoomDescription":"해당 실습방이 기본으로 열리도록 설정되어 있습니다.","materialExerciseExerciseRoom.description":"튜터, 친구들과 함께 실습방을 만들어 나만의 실습 환경을 만들어보세요.","materialExerciseExerciseRoom.detail.addUsers.label":"구성원 초대","materialExerciseExerciseRoom.detail.addUsers.placeholder":"초대할 사용자 이름을 검색하세요.","materialExerciseExerciseRoom.detail.copy":"복사","materialExerciseExerciseRoom.detail.copy.success":"공유 링크가 복사되었습니다.","materialExerciseExerciseRoom.detail.footer.button.open.description":"해당 실습방이 기본으로 열리도록 설정되어 있습니다.","materialExerciseExerciseRoom.detail.footer.description":"해당 실습방이 기본으로 열리도록 설정되어 있습니다.","materialExerciseExerciseRoom.detail.sharelink.label":"공유 링크","materialExerciseExerciseRoom.detail.table.body.add":"초대","materialExerciseExerciseRoom.detail.table.head.permission":"권한","materialExerciseExerciseRoom.detail.table.head.users":"구성원","materialExerciseExerciseRoom.detail.title.label":"타이틀","materialExerciseExerciseRoom.detail.title.placeholder":"타이틀을 입력하세요.","materialExerciseExerciseRoom.exerciseRoom.name":"실습방 이름","materialExerciseExerciseRoom.exerciseRoom.participants":"구성원","materialExerciseExerciseRoom.exerciseRoom.publicPermission":"내 권한","materialExerciseExerciseRoom.exerciseRoom.publicPermission.nothing":"권한없음","materialExerciseExerciseRoom.exerciseRoom.publicPermission.owner":"개설자","materialExerciseExerciseRoom.exerciseRoom.publicPermission.read":"읽기 전용","materialExerciseExerciseRoom.exerciseRoom.publicPermission.readWrite":"수정","materialExerciseExerciseRoom.exit":"닫기","materialExerciseExerciseRoom.leave":"실습방 나가기","materialExerciseExerciseRoom.leave.dialog.body":"작성한 코드가 모두 사라집니다. 정말 이 실습방에서 나가시겠습니까?","materialExerciseExerciseRoom.leave.dialog.title":"실습방 나가기","materialExerciseExerciseRoom.open":"실습방 열기","materialExerciseExerciseRoom.selected":"(현재 열린 실습방)","materialExerciseExerciseRoom.title":"실습방"};
+
+module.exports = phrasesKo;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunner.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ExerciseRunnerProps {
+    exercisePreview?: React.ReactNode;
+}
+declare const _default: React.VFC<ExerciseRunnerProps>;
+export default _default;