@elice/material-assignment 1.240306.0-runboxtutoring.0 → 1.240306.0

package/cjs/components/material-assignment/MaterialAssignmentContent.js

@@ -2,97 +2,50 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var jsxRuntime = require('react/jsx-runtime');
 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 intl = require('@elice/intl');
 var materialSharedUtils = require('@elice/material-shared-utils');
-var muiSystem = require('@elice/mui-system');
 var types = require('@elice/types');
-var styled = require('styled-components');
 var MaterialAssignmentContainer = require('../shared/MaterialAssignmentContainer.js');
-var color = require('./constants/color.js');
 var MaterialAssignmentUploadModal = require('./MaterialAssignmentUploadModal.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var GRADE_LIST_COUNT = 20;
-var StyledSubmittedText = styled__default.default(blocks.Text).withConfig({
-  componentId: "sc-1panlbq-0"
-})(["color:", ";"], muiSystem.colors.green[400]);
-var StyledNoSubmittedText = styled__default.default(blocks.Text).withConfig({
-  componentId: "sc-1panlbq-1"
-})(["color:", ";"], muiSystem.colors.orange[400]);
-var StyledTableHeaderCell = styled__default.default.td.withConfig({
-  componentId: "sc-1panlbq-2"
-})(["color:", " !important;"], color.DARK_TEXT_TERTIARY_COLOR);
-var StyledTotalPointText = styled__default.default(blocks.Text).withConfig({
-  componentId: "sc-1panlbq-3"
-})(["color:", ";"], color.DARK_TEXT_TERTIARY_COLOR);
-var StyledUploadButton = styled__default.default(blocks.Button).withConfig({
-  componentId: "sc-1panlbq-4"
-})(["background-color:", ";border-color:", ";"], designTokens.base.color.primary6, designTokens.base.color.primary6);
-var MaterialAssignmentContent = function MaterialAssignmentContent(_ref) {
-  var materialAssignmentId = _ref.materialAssignmentId,
-    userId = _ref.userId;
-  var isReady = materialSharedUtils.useMaterialConfigApiClientUpdate(apiClient.config.init);
-  var intl$1 = intl.useRawEliceIntl();
-  var _useMaterialFetchRaw = materialSharedUtils.useMaterialFetchRaw(types.enums.LectureMaterialType.Assignment, React__default.default.useCallback(function (signal) {
-      return apiClient.getOrgMaterialAssignmentGet({
-        materialAssignmentId: materialAssignmentId
-      }, {
-        signal: signal
-      });
-    }, [materialAssignmentId]), isReady),
-    materialAssignment = _useMaterialFetchRaw.materialAssignment,
-    materialLecturePage = _useMaterialFetchRaw.materialLecturePage,
-    assignmentGetStatus = _useMaterialFetchRaw.status,
-    doGetOrgMaterialAssignmentGet = _useMaterialFetchRaw.refetch;
-  var _React$useState = React__default.default.useState('idle'),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    assignmentGradeListGetStatus = _React$useState2[0],
-    setAssignmentGradeListGetStatus = _React$useState2[1];
-  var _React$useState3 = React__default.default.useState('idle'),
-    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
-    assignmentGradeResultGetStatus = _React$useState4[0],
-    setAssignmentGradeResultGetStatus = _React$useState4[1];
-  var _React$useState5 = React__default.default.useState('idle'),
-    _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
-    assignmentSubmissionGetStatus = _React$useState6[0],
-    setAssignmentSubmissionGetStatus = _React$useState6[1];
-  var _React$useState7 = React__default.default.useState(),
-    _React$useState8 = _rollupPluginBabelHelpers.slicedToArray(_React$useState7, 2),
-    materialAssignmentSubmission = _React$useState8[0],
-    setMaterialAssignmentSubmission = _React$useState8[1];
-  var _React$useState9 = React__default.default.useState(),
-    _React$useState10 = _rollupPluginBabelHelpers.slicedToArray(_React$useState9, 2),
-    materialAssignmentGradeResult = _React$useState10[0],
-    setMaterialAssignmentGradeResult = _React$useState10[1];
-  var _React$useState11 = React__default.default.useState(),
-    _React$useState12 = _rollupPluginBabelHelpers.slicedToArray(_React$useState11, 2),
-    materialAssignmentGradeList = _React$useState12[0],
-    setMaterialAssignmentGradeList = _React$useState12[1];
+const GRADE_LIST_COUNT = 20;
+const MaterialAssignmentContent = ({
+  materialAssignmentId,
+  userId
+}) => {
+  const intl = reactIntl.useIntl();
+  const isReady = materialSharedUtils.useMaterialConfigApiClientUpdate(apiClient.config.init);
+  const {
+    materialAssignment,
+    materialLecturePage,
+    status: assignmentGetStatus,
+    refetch: doGetOrgMaterialAssignmentGet
+  } = materialSharedUtils.useMaterialFetchRaw(types.enums.LectureMaterialType.Assignment, React.useCallback(signal => apiClient.getOrgMaterialAssignmentGet({
+    materialAssignmentId
+  }, {
+    signal
+  }), [materialAssignmentId]), isReady);
+  const [assignmentGradeListGetStatus, setAssignmentGradeListGetStatus] = React.useState('idle');
+  const [assignmentGradeResultGetStatus, setAssignmentGradeResultGetStatus] = React.useState('idle');
+  const [assignmentSubmissionGetStatus, setAssignmentSubmissionGetStatus] = React.useState('idle');
+  const [materialAssignmentSubmission, setMaterialAssignmentSubmission] = React.useState();
+  const [materialAssignmentGradeResult, setMaterialAssignmentGradeResult] = React.useState();
+  const [materialAssignmentGradeList, setMaterialAssignmentGradeList] = React.useState();
   /** Is confirm modal visible? */
-  var _React$useState13 = React__default.default.useState(false),
-    _React$useState14 = _rollupPluginBabelHelpers.slicedToArray(_React$useState13, 2),
-    showAssignmentSubmitModal = _React$useState14[0],
-    setShowAssignmentSubmitModal = _React$useState14[1];
-  var isAssignmentSubmitted = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.lastAssignmentSubmissionId);
-  var isAssignmentClosed = materialAssignment && Boolean(materialAssignment.closeDatetime < Date.now());
-  var isAssignmentResultVisible = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.scoreFinalizedDatetime);
+  const [showAssignmentSubmitModal, setShowAssignmentSubmitModal] = React.useState(false);
+  const isAssignmentSubmitted = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.lastAssignmentSubmissionId);
+  const isAssignmentClosed = materialAssignment && Boolean(materialAssignment.closeDatetime < Date.now());
+  const isAssignmentResultVisible = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.scoreFinalizedDatetime);
   //
   //
   //
   /**
    * When Grade_result exist, a comment list is called.
    */
-  React__default.default.useEffect(function () {
+  React.useEffect(() => {
     if (!isReady) {
       return;
     }
@@ -103,16 +56,17 @@ var MaterialAssignmentContent = function MaterialAssignmentContent(_ref) {
     apiClient.getOrgMaterialAssignmentGradeList({
       offset: 0,
       count: GRADE_LIST_COUNT,
-      materialAssignmentId: materialAssignmentId,
+      materialAssignmentId,
       filterConditions: {
-        userId: userId
+        userId
       }
-    }).then(function (_ref2) {
-      var materialAssignmentGrades = _ref2.materialAssignmentGrades;
-        _ref2.materialAssignmentGradeCount;
+    }).then(({
+      materialAssignmentGrades,
+      materialAssignmentGradeCount
+    }) => {
       setAssignmentGradeListGetStatus('resolved');
       setMaterialAssignmentGradeList(materialAssignmentGrades);
-    }).catch(function (error) {
+    }).catch(error => {
       console.error(error);
       setAssignmentGradeListGetStatus('rejected');
     });
@@ -120,7 +74,7 @@ var MaterialAssignmentContent = function MaterialAssignmentContent(_ref) {
   /**
    * When Grade_result exist, a score is called.
    */
-  React__default.default.useEffect(function () {
+  React.useEffect(() => {
     if (!isReady) {
       return;
     }
@@ -129,13 +83,14 @@ var MaterialAssignmentContent = function MaterialAssignmentContent(_ref) {
     }
     setAssignmentGradeResultGetStatus('pending');
     apiClient.getOrgMaterialAssignmentGradeResultGet({
-      materialAssignmentId: materialAssignmentId,
-      userId: userId
-    }).then(function (_ref3) {
-      var materialAssignmentGradeResult = _ref3.materialAssignmentGradeResult;
+      materialAssignmentId,
+      userId
+    }).then(({
+      materialAssignmentGradeResult
+    }) => {
       setAssignmentGradeResultGetStatus('resolved');
       setMaterialAssignmentGradeResult(materialAssignmentGradeResult);
-    }).catch(function (error) {
+    }).catch(error => {
       console.error(error);
       setAssignmentGradeResultGetStatus('rejected');
     });
@@ -143,7 +98,7 @@ var MaterialAssignmentContent = function MaterialAssignmentContent(_ref) {
   /**
    * Get information on the assignment submitted
    */
-  React__default.default.useEffect(function () {
+  React.useEffect(() => {
     var _a;
     if (!isReady) {
       return;
@@ -156,235 +111,183 @@ var MaterialAssignmentContent = function MaterialAssignmentContent(_ref) {
     setAssignmentSubmissionGetStatus('pending');
     apiClient.getOrgMaterialAssignmentSubmissionGet({
       materialAssignmentSubmissionId: (_a = materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.lastAssignmentSubmissionId) !== null && _a !== void 0 ? _a : 0
-    }).then(function (_ref4) {
-      var materialAssignmentSubmission = _ref4.materialAssignmentSubmission;
+    }).then(({
+      materialAssignmentSubmission
+    }) => {
       setAssignmentSubmissionGetStatus('resolved');
       setMaterialAssignmentSubmission(materialAssignmentSubmission);
-    }).catch(function (error) {
+    }).catch(error => {
       console.error(error);
       setAssignmentSubmissionGetStatus('rejected');
       setMaterialAssignmentSubmission(undefined);
     });
   }, [isAssignmentSubmitted, isReady, materialAssignment]);
   if (assignmentGetStatus === 'pending' || assignmentGradeListGetStatus === 'pending' || assignmentGradeResultGetStatus === 'pending' || assignmentSubmissionGetStatus === 'pending') {
-    return jsxRuntime.jsx(blocks.Spinner, {});
+    return React.createElement(blocks.Spinner, null);
   }
   if (!materialAssignment || assignmentGetStatus === 'rejected') {
-    return jsxRuntime.jsx(blocks.Text, {
-      role: "white",
-      children: intl$1.formatMessage({
-        id: 'materialAssignment.error'
-      })
-    });
+    return React.createElement(blocks.Text, {
+      role: "white"
+    }, intl.formatMessage({
+      id: 'materialAssignment.error'
+    }));
   }
   /**
    *
    */
-  var renderAssignmentInfo = function renderAssignmentInfo() {
+  const renderAssignmentInfo = () => {
     var _a;
-    var assignmentFilename = decodeURIComponent((materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.assignmentFileUrl) && new URL(materialAssignmentSubmission.assignmentFileUrl).pathname.split('/').pop() || '');
-    var renderAssignmentStatus = function renderAssignmentStatus() {
+    const assignmentFilename = decodeURIComponent((materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.assignmentFileUrl) && new URL(materialAssignmentSubmission.assignmentFileUrl).pathname.split('/').pop() || '');
+    const renderAssignmentStatus = () => {
       if (!isAssignmentSubmitted && isAssignmentClosed) {
-        return jsxRuntime.jsx(blocks.Text, {
+        return React.createElement(blocks.Text, {
           bold: true,
           role: "danger",
-          size: "small",
-          children: intl$1.formatMessage({
-            id: 'materialAssignment.status.deadlineExpired'
-          })
-        });
+          size: "small"
+        }, intl.formatMessage({
+          id: 'materialAssignment.status.deadlineExpired'
+        }));
       }
       if (isAssignmentResultVisible) {
-        return jsxRuntime.jsx(blocks.Text, {
+        return React.createElement(blocks.Text, {
           bold: true,
           role: "lightpurple",
-          size: "small",
-          children: intl$1.formatMessage({
-            id: 'materialAssignment.status.graded'
-          })
-        });
+          size: "small"
+        }, intl.formatMessage({
+          id: 'materialAssignment.status.graded'
+        }));
       }
       if (isAssignmentSubmitted) {
-        return jsxRuntime.jsx(StyledSubmittedText, {
+        return React.createElement(blocks.Text, {
           bold: true,
           role: "success",
-          size: "small",
-          children: intl$1.formatMessage({
-            id: 'materialAssignment.status.submitted'
-          })
-        });
+          size: "small"
+        }, intl.formatMessage({
+          id: 'materialAssignment.status.submitted'
+        }));
       }
-      return jsxRuntime.jsx(StyledNoSubmittedText, {
+      return React.createElement(blocks.Text, {
         bold: true,
         role: "warning",
-        size: "small",
-        children: intl$1.formatMessage({
-          id: 'materialAssignment.status.noSubmitted'
-        })
-      });
+        size: "small"
+      }, intl.formatMessage({
+        id: 'materialAssignment.status.noSubmitted'
+      }));
     };
-    var renderAssignmentScore = function renderAssignmentScore() {
+    const renderAssignmentScore = () => {
       var _a;
-      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(blocks.Text, {
-          bold: true,
-          role: "white",
-          size: "small",
-          children: intl$1.formatMessage({
-            id: 'materialAssignment.table.column.score'
-          }, {
-            score: (_a = materialAssignmentGradeResult === null || materialAssignmentGradeResult === void 0 ? void 0 : materialAssignmentGradeResult.score) !== null && _a !== void 0 ? _a : '--'
-          })
-        }), jsxRuntime.jsx(blocks.Hspace, {
-          width: 0.25
-        })]
-      });
+      return React.createElement(React.Fragment, null, React.createElement(blocks.Text, {
+        bold: true,
+        role: "white",
+        size: "small"
+      }, intl.formatMessage({
+        id: 'materialAssignment.table.column.score'
+      }, {
+        score: (_a = materialAssignmentGradeResult === null || materialAssignmentGradeResult === void 0 ? void 0 : materialAssignmentGradeResult.score) !== null && _a !== void 0 ? _a : '--'
+      })), React.createElement(blocks.Hspace, {
+        width: 0.25
+      }));
     };
-    var renderAssignmentAttachment = function renderAssignmentAttachment() {
+    const renderAssignmentAttachment = () => {
       if (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.assignmentFileUrl) {
-        return jsxRuntime.jsx("a", {
+        return React.createElement("a", {
           href: materialAssignmentSubmission.assignmentFileUrl,
           download: assignmentFilename,
           target: "_blank",
-          rel: "noopener noreferrer",
-          children: jsxRuntime.jsx(blocks.Text, {
-            hoverable: true,
-            underline: true,
-            role: "white",
-            size: "small",
-            children: assignmentFilename
-          })
-        });
+          rel: "noopener noreferrer"
+        }, React.createElement(blocks.Text, {
+          hoverable: true,
+          underline: true,
+          role: "white",
+          size: "small"
+        }, assignmentFilename));
       }
       if (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.assignmentUrl) {
-        return jsxRuntime.jsx("a", {
+        return React.createElement("a", {
           href: materialAssignmentSubmission.assignmentUrl,
           target: "_blank",
-          rel: "noopener noreferrer",
-          children: jsxRuntime.jsx(blocks.Text, {
-            hoverable: true,
-            underline: true,
-            role: "white",
-            size: "small",
-            children: materialAssignmentSubmission.assignmentUrl
-          })
-        });
+          rel: "noopener noreferrer"
+        }, React.createElement(blocks.Text, {
+          hoverable: true,
+          underline: true,
+          role: "white",
+          size: "small"
+        }, materialAssignmentSubmission.assignmentUrl));
       }
       return '--';
     };
-    return jsxRuntime.jsx(blocks.InfoTable, {
-      dark: true,
-      children: jsxRuntime.jsxs("tbody", {
-        children: [jsxRuntime.jsxs("tr", {
-          children: [jsxRuntime.jsx(StyledTableHeaderCell, {
-            style: {
-              width: '19%'
-            },
-            children: intl$1.formatMessage({
-              id: 'materialAssignment.table.column.status'
-            })
-          }), jsxRuntime.jsx("td", {
-            children: renderAssignmentStatus()
-          })]
-        }), jsxRuntime.jsxs("tr", {
-          children: [jsxRuntime.jsx(StyledTableHeaderCell, {
-            children: intl$1.formatMessage({
-              id: 'materialAssignment.table.column.deadlineDatetime'
-            })
-          }), jsxRuntime.jsx("td", {
-            children: intl$1.formatDate(materialAssignment.closeDatetime, {
-              dateStyle: 'medium',
-              timeStyle: 'short'
-            })
-          })]
-        }), jsxRuntime.jsxs("tr", {
-          children: [jsxRuntime.jsx(StyledTableHeaderCell, {
-            children: intl$1.formatMessage({
-              id: 'materialAssignment.table.column.lastSubmitDatetime'
-            })
-          }), jsxRuntime.jsx("td", {
-            children: (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.createdDatetime) ? intl$1.formatDate(materialAssignmentSubmission.createdDatetime, {
-              dateStyle: 'medium',
-              timeStyle: 'short'
-            }) : '--'
-          })]
-        }), jsxRuntime.jsxs("tr", {
-          children: [jsxRuntime.jsx(StyledTableHeaderCell, {
-            children: intl$1.formatMessage({
-              id: 'materialAssignment.table.column.uploadedFile'
-            })
-          }), jsxRuntime.jsx("td", {
-            children: jsxRuntime.jsxs("div", {
-              children: [renderAssignmentAttachment(), jsxRuntime.jsx(blocks.Vspace, {
-                height: 0.75
-              }), jsxRuntime.jsx(StyledUploadButton, {
-                size: "tiny",
-                role: "lightpurple",
-                disabled: [isAssignmentResultVisible, !materialAssignment.isResubmitEnabled && isAssignmentSubmitted, isAssignmentClosed].some(Boolean),
-                onClick: function onClick() {
-                  return setShowAssignmentSubmitModal(true);
-                },
-                children: intl$1.formatMessage({
-                  id: 'materialAssignment.button.upload'
-                })
-              })]
-            })
-          })]
-        }), jsxRuntime.jsxs("tr", {
-          children: [jsxRuntime.jsx(StyledTableHeaderCell, {
-            children: intl$1.formatMessage({
-              id: 'materialAssignment.table.column.assignmentScore'
-            })
-          }), jsxRuntime.jsxs("td", {
-            children: [renderAssignmentScore(), jsxRuntime.jsx(StyledTotalPointText, {
-              role: "navy4",
-              size: "small",
-              children: intl$1.formatMessage({
-                id: 'materialAssignment.table.column.totalPoint'
-              }, {
-                point: (_a = materialLecturePage === null || materialLecturePage === void 0 ? void 0 : materialLecturePage.point) !== null && _a !== void 0 ? _a : '--'
-              })
-            })]
-          })]
-        })]
-      })
-    });
+    return React.createElement(blocks.InfoTable, {
+      dark: true
+    }, React.createElement("tbody", null, React.createElement("tr", null, React.createElement("td", {
+      style: {
+        width: '19%'
+      }
+    }, intl.formatMessage({
+      id: 'materialAssignment.table.column.status'
+    })), React.createElement("td", null, renderAssignmentStatus())), React.createElement("tr", null, React.createElement("td", null, intl.formatMessage({
+      id: 'materialAssignment.table.column.deadlineDatetime'
+    })), React.createElement("td", null, React.createElement(reactIntl.FormattedDate, {
+      value: materialAssignment.closeDatetime,
+      dateStyle: "medium",
+      timeStyle: "short"
+    }))), React.createElement("tr", null, React.createElement("td", null, intl.formatMessage({
+      id: 'materialAssignment.table.column.lastSubmitDatetime'
+    })), React.createElement("td", null, (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.createdDatetime) ? React.createElement(reactIntl.FormattedDate, {
+      value: materialAssignmentSubmission.createdDatetime,
+      dateStyle: "medium",
+      timeStyle: "short"
+    }) : '--')), React.createElement("tr", null, React.createElement("td", null, intl.formatMessage({
+      id: 'materialAssignment.table.column.uploadedFile'
+    })), React.createElement("td", null, React.createElement("div", null, renderAssignmentAttachment(), React.createElement(blocks.Vspace, {
+      height: 0.75
+    }), React.createElement(blocks.Button, {
+      size: "tiny",
+      role: "lightpurple",
+      disabled: [isAssignmentResultVisible, !materialAssignment.isResubmitEnabled && isAssignmentSubmitted, isAssignmentClosed].some(Boolean),
+      onClick: () => setShowAssignmentSubmitModal(true)
+    }, intl.formatMessage({
+      id: 'materialAssignment.button.upload'
+    }))))), React.createElement("tr", null, React.createElement("td", null, intl.formatMessage({
+      id: 'materialAssignment.table.column.assignmentScore'
+    })), React.createElement("td", null, renderAssignmentScore(), React.createElement(blocks.Text, {
+      role: "navy4",
+      size: "small"
+    }, intl.formatMessage({
+      id: 'materialAssignment.table.column.totalPoint'
+    }, {
+      point: (_a = materialLecturePage === null || materialLecturePage === void 0 ? void 0 : materialLecturePage.point) !== null && _a !== void 0 ? _a : '--'
+    }))))));
   };
   /**
    *
    */
-  var renderAssignmentFeedback = function renderAssignmentFeedback() {
+  const renderAssignmentFeedback = () => {
     var _a;
-    var tableColumns = [{
-      Header: intl$1.formatMessage({
+    const tableColumns = [{
+      Header: intl.formatMessage({
         id: 'materialAssignment.table.header.index'
       }),
       accessor: 'index',
       width: 50
     }, {
-      Header: intl$1.formatMessage({
+      Header: intl.formatMessage({
         id: 'materialAssignment.table.header.feedback'
       }),
       accessor: 'feedback'
     }];
-    var tableData = (_a = materialAssignmentGradeList === null || materialAssignmentGradeList === void 0 ? void 0 : materialAssignmentGradeList.filter(function (grade) {
-      return grade.comment.length;
-    }).map(function (grade, index) {
-      return {
-        index: index + 1,
-        feedback: jsxRuntime.jsx(blocks.Text, {
-          preWrap: true,
-          size: "small",
-          role: "navy1",
-          children: grade.comment
-        })
-      };
-    })) !== null && _a !== void 0 ? _a : [];
-    return jsxRuntime.jsx(blocks.TableNext, {
+    const tableData = (_a = materialAssignmentGradeList === null || materialAssignmentGradeList === void 0 ? void 0 : materialAssignmentGradeList.filter(grade => grade.comment.length).map((grade, index) => ({
+      index: index + 1,
+      feedback: React.createElement(blocks.Text, {
+        preWrap: true,
+        size: "small",
+        role: "navy1"
+      }, grade.comment)
+    }))) !== null && _a !== void 0 ? _a : [];
+    return React.createElement(blocks.TableNext, {
       dark: true,
       columns: tableColumns,
       data: tableData,
-      emptyMessage: intl$1.formatMessage({
+      emptyMessage: intl.formatMessage({
         id: isAssignmentResultVisible ? 'materialAssignment.table.empty.noFeedback' : 'materialAssignment.table.empty.noAssignment'
       })
     });
@@ -392,54 +295,47 @@ var MaterialAssignmentContent = function MaterialAssignmentContent(_ref) {
   /**
    *
    */
-  var renderAssignmentUploadModal = function renderAssignmentUploadModal() {
+  const renderAssignmentUploadModal = () => {
     if (!showAssignmentSubmitModal) {
       return null;
     }
-    return jsxRuntime.jsx(MaterialAssignmentUploadModal.default, {
+    return React.createElement(MaterialAssignmentUploadModal.default, {
       materialAssignment: materialAssignment,
-      onClose: function onClose() {
-        return setShowAssignmentSubmitModal(false);
-      },
+      onClose: () => setShowAssignmentSubmitModal(false),
       onSubmitCallback: doGetOrgMaterialAssignmentGet
     });
   };
-  return jsxRuntime.jsxs(MaterialAssignmentContainer.default, {
-    title: materialAssignment.title,
-    children: [jsxRuntime.jsx(blocks.Text, {
-      bold: true,
-      block: true,
-      role: "white",
-      children: intl$1.formatMessage({
-        id: 'materialAssignment.label.general'
-      })
-    }), jsxRuntime.jsx(blocks.Text, {
-      role: "navy3",
-      size: "tiny",
-      children: intl$1.formatMessage({
-        id: 'materialAssignment.description.general'
-      })
-    }), jsxRuntime.jsx(blocks.Vspace, {
-      height: 0.75
-    }), renderAssignmentInfo(), jsxRuntime.jsx(blocks.Vspace, {
-      height: 1.5
-    }), jsxRuntime.jsx(blocks.Text, {
-      bold: true,
-      block: true,
-      role: "white",
-      children: intl$1.formatMessage({
-        id: 'materialAssignment.label.feedback'
-      })
-    }), jsxRuntime.jsx(blocks.Text, {
-      role: "navy3",
-      size: "tiny",
-      children: intl$1.formatMessage({
-        id: 'materialAssignment.description.feedback'
-      })
-    }), jsxRuntime.jsx(blocks.Vspace, {
-      height: 0.75
-    }), renderAssignmentFeedback(), renderAssignmentUploadModal()]
-  });
+  return React.createElement(MaterialAssignmentContainer.default, {
+    title: materialAssignment.title
+  }, React.createElement(blocks.Text, {
+    bold: true,
+    block: true,
+    role: "white"
+  }, intl.formatMessage({
+    id: 'materialAssignment.label.general'
+  })), React.createElement(blocks.Text, {
+    role: "navy3",
+    size: "tiny"
+  }, intl.formatMessage({
+    id: 'materialAssignment.description.general'
+  })), React.createElement(blocks.Vspace, {
+    height: 0.75
+  }), renderAssignmentInfo(), React.createElement(blocks.Vspace, {
+    height: 1.5
+  }), React.createElement(blocks.Text, {
+    bold: true,
+    block: true,
+    role: "white"
+  }, intl.formatMessage({
+    id: 'materialAssignment.label.feedback'
+  })), React.createElement(blocks.Text, {
+    role: "navy3",
+    size: "tiny"
+  }, intl.formatMessage({
+    id: 'materialAssignment.description.feedback'
+  })), React.createElement(blocks.Vspace, {
+    height: 0.75
+  }), renderAssignmentFeedback(), renderAssignmentUploadModal());
 };
 
 exports.default = MaterialAssignmentContent;