\n * I'm a fade Transition!\n *
\n * )}\n * \n * \n * {state => (\n * // ...\n * )}\n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n\n function Transition(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n\n var _proto = Transition.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n\n if (prevProps !== this.props) {\n var status = this.state.status;\n\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n\n this.updateStatus(false, nextStatus);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n\n if (nextStatus === ENTERING) {\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit() {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n\n _proto.render = function render() {\n var status = this.state.status;\n\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n\n return (\n /*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)\n }),\n\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n * \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n}\r\nexport default CancelBookingLessonModal;","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nconst PopUpCancelLesson = ({ LessionName, date, start, end, reason }) => {\r\n\r\n return \r\n
\r\n \r\n
\r\n \r\n
\r\n Bạn muốn hủy buổi học?
\r\n \r\n\r\n
\r\n Tên buổi học: {LessionName || ''}
\r\nNgày học: {date || ''}
\r\nGiờ học: {`${start || ''} - ${end || ''}`}
\r\n\r\n
\r\n \r\n setReason(e.target.value)}>\r\n
\r\n Vui lòng điền lý do để chúng tôi hỗ trợ bạn tốt hơn
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n}\r\nexport default PopUpCancelLesson;","'use strict';\nvar $ = require('../internals/export');\nvar $findIndex = require('../internals/array-iteration').findIndex;\nvar addToUnscopables = require('../internals/add-to-unscopables');\nvar arrayMethodUsesToLength = require('../internals/array-method-uses-to-length');\n\nvar FIND_INDEX = 'findIndex';\nvar SKIPS_HOLES = true;\n\nvar USES_TO_LENGTH = arrayMethodUsesToLength(FIND_INDEX);\n\n// Shouldn't skip holes\nif (FIND_INDEX in []) Array(1)[FIND_INDEX](function () { SKIPS_HOLES = false; });\n\n// `Array.prototype.findIndex` method\n// https://tc39.github.io/ecma262/#sec-array.prototype.findindex\n$({ target: 'Array', proto: true, forced: SKIPS_HOLES || !USES_TO_LENGTH }, {\n findIndex: function findIndex(callbackfn /* , that = undefined */) {\n return $findIndex(this, callbackfn, arguments.length > 1 ? arguments[1] : undefined);\n }\n});\n\n// https://tc39.github.io/ecma262/#sec-array.prototype-@@unscopables\naddToUnscopables(FIND_INDEX);\n","import React, { useState, useEffect, useReducer } from 'react'\r\nimport ReactDOM from 'react-dom'\r\n\r\nimport styles from \"~components/LessonUpcomingCard.module.scss\"\r\n\r\nconst LessonUpcomingCard = ({\r\n BookingID,\r\n avatar = \"default-avatar.png\",\r\n TeacherUID,\r\n TeacherName,\r\n LessionName,\r\n LessionMaterial,\r\n SpecialRequest = null,\r\n start,\r\n end,\r\n date,\r\n DocumentName = null,\r\n SkypeID,\r\n onHandleCancelBooking,\r\n onHandleRequireLesson,\r\n lock = {\r\n id: '',\r\n lock: false\r\n },\r\n cancelable = false,\r\n}) => {\r\n\r\n const handleRequireLesson = (BookingID, avatar, TeacherUID, TeacherName, LessionMaterial, LessionName, SpecialRequest, date, start, end, DocumentName, SkypeID) => {\r\n onHandleRequireLesson(BookingID, avatar, TeacherUID, TeacherName, LessionMaterial, LessionName, SpecialRequest, date, start, end, DocumentName, SkypeID)\r\n }\r\n\r\n const handleCancelBooking = (e, BookingID, LessionName, date, start, end) => {\r\n e.preventDefault()\r\n onHandleCancelBooking(BookingID, LessionName, date, start, end)\r\n }\r\n\r\n useEffect(() => {\r\n feather.replace();\r\n }, [])\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Buổi học của bạn đã được hủy
\r\n \r\n\r\n
\r\n Tên buổi học: {LessionName || ''}
\r\nNgày học: {date || ''}
\r\nGiờ học: {`${start || ''} - ${end || ''}`}
\r\nLý do hủy: {reason || ''}
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Incoming{' '}\r\n {LessionName}\r\n
\r\n\r\n \r\n \r\n {date}\r\n \r\n \r\n {`Bắt đầu: ${start}`}\r\n \r\n \r\n {`Kết thúc: ${end}`}\r\n
\r\n {\r\n SpecialRequest && \r\n
\r\n }\r\n {\r\n !!DocumentName && Ghi chú cho giáo viên:
\r\n{SpecialRequest}
\r\n\r\n
\r\n }\r\n Tài liệu:
\r\n \r\n\r\n
\r\n )\r\n}\r\nexport default RequireLessonModal;","import React from 'react';\r\n\r\nexport const FETCH_ERRORS = () => {\r\n return Đã có lỗi xảy ra, xin vui lòng thử lại\r\n}\r\n\r\nexport const NOT_DATA_FOUND = () => {\r\n return No data found\r\n}","import React, { useState, useEffect, useReducer } from 'react'\r\nimport ReactDOM from 'react-dom'\r\n\r\nimport RequireLessonModal from '~components/RequireLessonModal'\r\nimport LessonUpcomingCard from \"~components/LessonUpcomingCard\"\r\nimport CancelBookingLessonModal from \"~components/CancelBookingLessonModal\"\r\nimport PopUpCancelLesson from \"~components/PopUpCancelLesson\"\r\n\r\nimport SkeletonLessonCard from \"~components/common/Skeleton/SkeletonLessonCard\"\r\nimport { getUpcomingLessons } from \"~src/api/studentAPI\"\r\nimport { convertDateFromTo, checkCancelTime } from \"~src/utils.js\"\r\nimport Pagination from \"react-js-pagination\";\r\nimport { ToastContainer } from 'react-toastify'\r\nimport { FETCH_ERRORS } from \"~components/common/Constant/message\"\r\nimport { toast } from 'react-toastify'\r\nimport 'react-toastify/scss/main.scss'\r\nimport { toastInit } from \"~src/utils\"\r\nimport { FETCH_ERROR } from '~components/common/Constant/toast'\r\n\r\nimport styles from '~components/BookedLesson/bookedLesson.module.scss'\r\n\r\nconst initialCancelLesson = {\r\n BookingID: \"\",\r\n LessionName: \"\",\r\n date: \"\",\r\n start: \"\",\r\n end: \"\",\r\n reason: \"\",\r\n}\r\nconst initialRequireLesson = {\r\n BookingID: \"\",\r\n avatar: \"\",\r\n TeacherUID: \"\",\r\n TeacherName: \"\",\r\n LessionMaterial: \"\",\r\n LessionName: \"\",\r\n SpecialRequest: \"\",\r\n date: \"\",\r\n start: \"\",\r\n end: \"\",\r\n DocumentName: \"\",\r\n SkypeID: \"\",\r\n}\r\n\r\nconst BookedLesson = () => {\r\n const [state, setState] = useState(null);\r\n const [page, setPage] = useState(1)\r\n const [pageSize, setPageSize] = useState(0);\r\n const [totalResult, setTotalResult] = useState(0);\r\n const cancelToastFail = () => toast.error(FETCH_ERROR, toastInit);\r\n\r\n const [lock, setLock] = useState({\r\n id: \"\",\r\n lock: false,\r\n })\r\n const [stateCancelLesson, setStateCancelLesson] = useState(initialCancelLesson);\r\n const [stateRequireLesson, setStateRequireLesson] = useState(initialRequireLesson);\r\n\r\n const [loading, setLoading] = useState(true);\r\n\r\n const handlePageChange = (pageNumber) => {\r\n if (page !== pageNumber) {\r\n setPage(pageNumber);\r\n getAPI({\r\n Page: pageNumber,\r\n })\r\n }\r\n }\r\n const handleRequireLesson = (BookingID, avatar, TeacherUID, TeacherName, LessionMaterial, LessionName, SpecialRequest, date, start, end, DocumentName, SkypeID) => {\r\n setStateRequireLesson({\r\n ...stateRequireLesson,\r\n BookingID,\r\n avatar,\r\n TeacherUID,\r\n TeacherName,\r\n LessionMaterial,\r\n LessionName,\r\n SpecialRequest,\r\n date,\r\n start,\r\n end,\r\n DocumentName,\r\n SkypeID\r\n })\r\n }\r\n const handleCancelBooking = (BookingID, LessionName, date, start, end) => {\r\n setStateCancelLesson({\r\n ...stateCancelLesson,\r\n BookingID,\r\n LessionName,\r\n date,\r\n start,\r\n end\r\n })\r\n }\r\n const cbCancelBooking = (id, result, LessionName, date, start, end, reason) => {\r\n if (result === -1) //Start Call API, lock the card\r\n {\r\n setLock({\r\n id,\r\n lock: true\r\n })\r\n }\r\n else { //After call API, unlock the card\r\n setLock({\r\n id,\r\n lock: false\r\n })\r\n if (result === 1) { // cancel lesson success\r\n setStateCancelLesson({\r\n ...stateCancelLesson,\r\n reason,\r\n })\r\n if (pageSize < totalResult) {\r\n getAPI({\r\n Page: 1,\r\n })\r\n setPage(1);\r\n }\r\n else {\r\n let newUpcomingLessions = [...state];\r\n newUpcomingLessions = newUpcomingLessions.filter(item => item.BookingID !== id)\r\n setState(newUpcomingLessions)\r\n }\r\n $('#md-cancel-schedule-popup').modal(\"show\");\r\n }\r\n else cancelToastFail(); //Cancel Lesson Fail\r\n }\r\n }\r\n const cbRequireLesson = (SpecialRequest, BookingID, TeacherUID) => {\r\n let newState = [...state]\r\n const index = newState.findIndex\r\n (item => item.BookingID === BookingID && item.TeacherUID === TeacherUID);\r\n newState[index].SpecialRequest = SpecialRequest;\r\n setState(newState)\r\n }\r\n const getAPI = async (params) => {\r\n setLoading(true);\r\n const res = await getUpcomingLessons(params);\r\n if (res.Code === 1) {\r\n setState(res.Data)\r\n setPageSize(res.PageSize);\r\n setTotalResult(res.TotalResult)\r\n }\r\n else {\r\n setState(null);\r\n }\r\n setLoading(false);\r\n }\r\n\r\n useEffect(() => {\r\n getAPI({\r\n Page: 1,\r\n })\r\n }, []);\r\n\r\n return <>\r\n \r\n
\r\n \r\n \r\n
\r\n CÁC LỚP ĐÃ ĐĂNG KÝ
\r\n {\r\n !!state ? <>\r\n\r\n
\r\n {\r\n pageSize < totalResult && \r\n {\r\n !!state && !!state &&\r\n state.length + state.length === 0 ? (\r\n ) : \"\"\r\n }\r\n
\r\n ![\"image\"](\"../assets/img/no-booking.svg\")
\r\n - \r\n {\r\n !!state && state.length > 0 &&\r\n state.map(item => loading ?
\r\n
)\r\n }\r\n \r\n}\r\n\r\nReactDOM.render(\r\n Đã có lỗi xảy ra, xin vui lòng thử lại\r\n ![\"image\"](\"../assets/img/error.svg\")
\r\n
\r\n \r\n