@elice/material-exercise 1.240718.0-trasncript.2 → 1.240718.2

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

@@ -1,8 +1,6 @@
-import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { getOrgMaterialExerciseExerciseRoomList, postOrgMaterialExerciseExerciseRoomEdit } from '@elice/api-client';
-import { Modal, Flex, Text, Icon, ProfileImageGroup, ProfileImage, Notification } from '@elice/blocks';
+import { Modal, Notification, Flex, Text, Icon, ProfileImageGroup, ProfileImage } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eisArrowDownwardsCircle } from '@elice/icons';
 import { useRawEliceIntl } from '@elice/intl';
@@ -17,37 +15,32 @@ import '../context/ExerciseProvider.js';
 import { exerciseRoomPermissionStringConvertor } from './helpers/exerciseRoomPermissionStringConvertor.js';
 import { StyledExerciseRoomTableWrapper, StyledExerciseRoomTable, StyledExerciseRoomThead, StyledExerciseRoomTr, StyledExerciseRoomTh, StyledExerciseRoomTbody, StyledExerciseRoomTd } from './ExerciseRoom.styled.js';
 
-var StyledModal = styled(Modal).withConfig({
+const StyledModal = styled(Modal).withConfig({
   componentId: "sc-1ydn3lf-0"
 })(["& > div:first-child{.eb-button{color:", ";&:hover{color:", ";}}}"], base.color.navy0, base.color.navy0);
-var MaterialExerciseExerciseRoomList = function MaterialExerciseExerciseRoomList(_ref) {
-  var onExerciseRoomClick = _ref.onExerciseRoomClick,
-    onHide = _ref.onHide;
-  var intl = useRawEliceIntl();
-  var _React$useContext = React.useContext(ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId,
-    exerciseRoomId = _React$useContext.exerciseRoomId;
-  var materialExercise = useRecoilValue(exerciseState(materialExerciseId));
-  var user = useRecoilValue(exerciseUserState);
-  var _React$useState = React.useState([]),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    exerciseRooms = _React$useState2[0],
-    setExerciseRooms = _React$useState2[1];
-  var _React$useState3 = React.useState('idle'),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    createStatus = _React$useState4[0],
-    setCreateStatus = _React$useState4[1];
-  var doGetOrgMaterialExerciseExerciseRoomList = React.useCallback(function (_ref2) {
-    var materialExerciseId = _ref2.materialExerciseId,
-      userId = _ref2.userId;
+const MaterialExerciseExerciseRoomList = ({
+  onExerciseRoomClick,
+  onHide
+}) => {
+  const intl = useRawEliceIntl();
+  const {
+    materialExerciseId,
+    exerciseRoomId
+  } = React.useContext(ExerciseContext);
+  const materialExercise = useRecoilValue(exerciseState(materialExerciseId));
+  const user = useRecoilValue(exerciseUserState);
+  const [exerciseRooms, setExerciseRooms] = React.useState([]);
+  const [createStatus, setCreateStatus] = React.useState('idle');
+  const doGetOrgMaterialExerciseExerciseRoomList = React.useCallback(({
+    materialExerciseId,
+    userId
+  }) => {
     getOrgMaterialExerciseExerciseRoomList({
-      materialExerciseId: materialExerciseId,
-      userId: userId
-    }).then(function (res) {
-      return setExerciseRooms(res.exerciseRooms);
-    }).catch(console.error);
+      materialExerciseId,
+      userId
+    }).then(res => setExerciseRooms(res.exerciseRooms)).catch(console.error);
   }, []);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (materialExercise && user) {
       // 📝 api does not support last_dateime pivot, so you could not use infinite scroll at the moment.
       doGetOrgMaterialExerciseExerciseRoomList({
@@ -56,76 +49,57 @@ var MaterialExerciseExerciseRoomList = function MaterialExerciseExerciseRoomList
       });
     }
   }, [doGetOrgMaterialExerciseExerciseRoomList, materialExercise, user]);
-  var doPostOrgMaterialExerciseExerciseRoomEdit = React.useCallback( /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref3) {
-      var materialExerciseId, userId;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            materialExerciseId = _ref3.materialExerciseId, userId = _ref3.userId;
-            _context.prev = 1;
-            setCreateStatus('pending');
-            _context.next = 5;
-            return postOrgMaterialExerciseExerciseRoomEdit({
-              title: intl.formatMessage({
-                id: 'materialExerciseExerciseRoom.exerciseRoom.defaultName'
-              }, {
-                date: new Date().toLocaleString()
-              }),
-              materialExerciseId: materialExerciseId,
-              publicPermission: enums.ExerciseRoomPermission.Nothing
-            });
-          case 5:
-            doGetOrgMaterialExerciseExerciseRoomList({
-              materialExerciseId: materialExerciseId,
-              userId: userId
-            });
-            setCreateStatus('resolved');
-            Notification.success(intl.formatMessage({
-              id: 'materialExerciseExerciseRoom.create.success'
-            }));
-            _context.next = 15;
-            break;
-          case 10:
-            _context.prev = 10;
-            _context.t0 = _context["catch"](1);
-            console.error(_context.t0);
-            Notification.error(intl.formatMessage({
-              id: 'materialExerciseExerciseRoom.create.failure'
-            }));
-            setCreateStatus('rejected');
-          case 15:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[1, 10]]);
-    }));
-    return function (_x) {
-      return _ref4.apply(this, arguments);
-    };
-  }(), [doGetOrgMaterialExerciseExerciseRoomList, intl]);
-  return jsx(StyledModal, {
+  const doPostOrgMaterialExerciseExerciseRoomEdit = React.useCallback(async ({
+    materialExerciseId,
+    userId
+  }) => {
+    try {
+      setCreateStatus('pending');
+      await postOrgMaterialExerciseExerciseRoomEdit({
+        title: intl.formatMessage({
+          id: 'materialExerciseExerciseRoom.exerciseRoom.defaultName'
+        }, {
+          date: new Date().toLocaleString()
+        }),
+        materialExerciseId,
+        publicPermission: enums.ExerciseRoomPermission.Nothing
+      });
+      doGetOrgMaterialExerciseExerciseRoomList({
+        materialExerciseId,
+        userId
+      });
+      setCreateStatus('resolved');
+      Notification.success(intl.formatMessage({
+        id: 'materialExerciseExerciseRoom.create.success'
+      }));
+    } catch (error) {
+      console.error(error);
+      Notification.error(intl.formatMessage({
+        id: 'materialExerciseExerciseRoom.create.failure'
+      }));
+      setCreateStatus('rejected');
+    }
+  }, [doGetOrgMaterialExerciseExerciseRoomList, intl]);
+  return React.createElement(StyledModal, {
     theme: "dark",
     onHide: onHide,
     title: intl.formatMessage({
       id: 'materialExerciseExerciseRoom.title'
     }),
-    footerChild: jsx(Flex, {
-      justify: "flex-end",
-      children: jsx(Text, {
-        role: "gray3",
-        size: "tiny",
-        children: intl.formatMessage({
-          id: 'materialExerciseExerciseRoom.description'
-        })
-      })
-    }),
+    footerChild: React.createElement(Flex, {
+      justify: "flex-end"
+    }, React.createElement(Text, {
+      role: "gray3",
+      size: "tiny"
+    }, intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.description'
+    }))),
     footerButtons: [{
       label: intl.formatMessage({
         id: 'materialExerciseExerciseRoom.create'
       }),
       loading: createStatus === 'pending',
-      onClick: function onClick() {
+      onClick: () => {
         if (materialExercise && user) {
           void doPostOrgMaterialExerciseExerciseRoomEdit({
             materialExerciseId: materialExercise.id,
@@ -133,8 +107,8 @@ var MaterialExerciseExerciseRoomList = function MaterialExerciseExerciseRoomList
           });
         } else {
           console.error(JSON.stringify({
-            materialExercise: materialExercise,
-            user: user
+            materialExercise,
+            user
           }));
         }
       }
@@ -144,107 +118,73 @@ var MaterialExerciseExerciseRoomList = function MaterialExerciseExerciseRoomList
       }),
       role: 'gray6',
       onClick: onHide
-    }],
-    children: jsx(StyledExerciseRoomTableWrapper, {
-      children: jsxs(StyledExerciseRoomTable, {
-        children: [jsxs("colgroup", {
-          children: [jsx("col", {
-            span: 1,
-            width: "60%"
-          }), jsx("col", {
-            span: 1,
-            width: "20%"
-          }), jsx("col", {
-            span: 1,
-            width: "20%"
-          })]
-        }), jsx(StyledExerciseRoomThead, {
-          children: jsxs(StyledExerciseRoomTr, {
-            children: [jsx(StyledExerciseRoomTh, {
-              children: intl.formatMessage({
-                id: 'materialExerciseExerciseRoom.exerciseRoom.name'
-              })
-            }), jsx(StyledExerciseRoomTh, {
-              children: intl.formatMessage({
-                id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission'
-              })
-            }), jsx(StyledExerciseRoomTh, {
-              children: intl.formatMessage({
-                id: 'materialExerciseExerciseRoom.exerciseRoom.participants'
-              })
-            })]
-          })
-        }), jsx(StyledExerciseRoomTbody, {
-          hoverable: true,
-          children: exerciseRooms.map(function (exerciseRoom) {
-            var _a, _b;
-            return jsxs(StyledExerciseRoomTr, {
-              onClick: function onClick() {
-                return onExerciseRoomClick(exerciseRoom.id);
-              },
-              children: [jsx(StyledExerciseRoomTd, {
-                children: jsxs(Flex, {
-                  align: "center",
-                  children: [exerciseRoom.isDefaultRoom ? jsx(Icon, {
-                    icon: eisArrowDownwardsCircle,
-                    color: base.color.primary3,
-                    style: {
-                      marginRight: '0.5rem'
-                    }
-                  }) : null, jsx(Text, {
-                    bold: true,
-                    size: "small",
-                    role: exerciseRoom.isDefaultRoom ? 'lightpurple' : 'gray0',
-                    preWrap: true,
-                    ellipsis: true,
-                    customStyles: {
-                      maxWidth: '300px'
-                    },
-                    children: exerciseRoom.title
-                  }), exerciseRoomId === exerciseRoom.id ? jsx(Text, {
-                    size: "tiny",
-                    role: "gray0",
-                    customStyles: {
-                      marginLeft: '0.5rem'
-                    },
-                    children: intl.formatMessage({
-                      id: 'materialExerciseExerciseRoom.selected'
-                    })
-                  }) : null]
-                })
-              }), jsx(StyledExerciseRoomTd, {
-                children: jsx(Text, {
-                  bold: true,
-                  role: "gray0",
-                  size: "tiny",
-                  preWrap: true,
-                  ellipsis: true,
-                  customStyles: {
-                    maxWidth: '100px'
-                  },
-                  children: intl.formatMessage({
-                    id: "materialExerciseExerciseRoom.exerciseRoom.publicPermission.".concat(exerciseRoomPermissionStringConvertor((_b = (_a = exerciseRoom.roomUsers.find(function (roomUser) {
-                      return 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 : enums.ExerciseRoomPermission.Nothing))
-                  })
-                })
-              }), jsx(StyledExerciseRoomTd, {
-                children: jsx(ProfileImageGroup, {
-                  max: 8,
-                  children: exerciseRoom.roomUsers.map(function (roomUser) {
-                    return jsx(ProfileImage, {
-                      src: roomUser.user.profileUrl || '',
-                      hasBorder: false
-                    }, roomUser.user.id);
-                  })
-                })
-              })]
-            }, exerciseRoom.id);
-          })
-        })]
-      })
-    })
-  });
+    }]
+  }, React.createElement(StyledExerciseRoomTableWrapper, null, React.createElement(StyledExerciseRoomTable, null, React.createElement("colgroup", null, React.createElement("col", {
+    span: 1,
+    width: "60%"
+  }), React.createElement("col", {
+    span: 1,
+    width: "20%"
+  }), React.createElement("col", {
+    span: 1,
+    width: "20%"
+  })), React.createElement(StyledExerciseRoomThead, null, React.createElement(StyledExerciseRoomTr, null, React.createElement(StyledExerciseRoomTh, null, intl.formatMessage({
+    id: 'materialExerciseExerciseRoom.exerciseRoom.name'
+  })), React.createElement(StyledExerciseRoomTh, null, intl.formatMessage({
+    id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission'
+  })), React.createElement(StyledExerciseRoomTh, null, intl.formatMessage({
+    id: 'materialExerciseExerciseRoom.exerciseRoom.participants'
+  })))), React.createElement(StyledExerciseRoomTbody, {
+    hoverable: true
+  }, exerciseRooms.map(exerciseRoom => {
+    var _a, _b;
+    return React.createElement(StyledExerciseRoomTr, {
+      key: exerciseRoom.id,
+      onClick: () => onExerciseRoomClick(exerciseRoom.id)
+    }, React.createElement(StyledExerciseRoomTd, null, React.createElement(Flex, {
+      align: "center"
+    }, exerciseRoom.isDefaultRoom ? React.createElement(Icon, {
+      icon: eisArrowDownwardsCircle,
+      color: base.color.primary3,
+      style: {
+        marginRight: '0.5rem'
+      }
+    }) : null, React.createElement(Text, {
+      bold: true,
+      size: "small",
+      role: exerciseRoom.isDefaultRoom ? 'lightpurple' : 'gray0',
+      preWrap: true,
+      ellipsis: true,
+      customStyles: {
+        maxWidth: '300px'
+      }
+    }, exerciseRoom.title), exerciseRoomId === exerciseRoom.id ? React.createElement(Text, {
+      size: "tiny",
+      role: "gray0",
+      customStyles: {
+        marginLeft: '0.5rem'
+      }
+    }, intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.selected'
+    })) : null)), React.createElement(StyledExerciseRoomTd, null, React.createElement(Text, {
+      bold: true,
+      role: "gray0",
+      size: "tiny",
+      preWrap: true,
+      ellipsis: true,
+      customStyles: {
+        maxWidth: '100px'
+      }
+    }, intl.formatMessage({
+      id: `materialExerciseExerciseRoom.exerciseRoom.publicPermission.${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 : enums.ExerciseRoomPermission.Nothing)}`
+    }))), React.createElement(StyledExerciseRoomTd, null, React.createElement(ProfileImageGroup, {
+      max: 8
+    }, exerciseRoom.roomUsers.map(roomUser => React.createElement(ProfileImage, {
+      key: roomUser.user.id,
+      src: roomUser.user.profileUrl || '',
+      hasBorder: false
+    })))));
+  })))));
 };
 
 export { MaterialExerciseExerciseRoomList as default };

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

@@ -1,8 +1,8 @@
 import { enums } from '@elice/types';
 import { camelize } from 'humps';
 
-var exerciseRoomPermissionStringConvertor = function exerciseRoomPermissionStringConvertor(publicPermission) {
-  var result = '';
+const exerciseRoomPermissionStringConvertor = publicPermission => {
+  let result = '';
   switch (publicPermission) {
     case enums.ExerciseRoomPermission.Nothing:
       result = enums.ExerciseRoomPermission[publicPermission];