\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 600 ? '100px': '60px' }}>\r\n\r\n
600 ? 100: 60}\r\n width={widthScreen > 600 ? 100: 60}/>\r\n 600 ?100:60}px)` }}>\r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\n * \n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the `in` prop is set to `true`, the child component will first receive\n * the class `example-enter`, then the `example-enter-active` will be added in\n * the next tick. `CSSTransition` [forces a\n * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)\n * between before adding the `example-enter-active`. This is an important trick\n * because it allows us to transition between `example-enter` and\n * `example-enter-active` even though they were added immediately one after\n * another. Most notably, this is what makes it possible for us to animate\n * _appearance_.\n *\n * ```css\n * .my-node-enter {\n * opacity: 0;\n * }\n * .my-node-enter-active {\n * opacity: 1;\n * transition: opacity 200ms;\n * }\n * .my-node-exit {\n * opacity: 1;\n * }\n * .my-node-exit-active {\n * opacity: 0;\n * transition: opacity 200ms;\n * }\n * ```\n *\n * `*-active` classes represent which styles you want to animate **to**, so it's\n * important to add `transition` declaration only to them, otherwise transitions\n * might not behave as intended! This might not be obvious when the transitions\n * are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in\n * the example above (minus `transition`), but it becomes apparent in more\n * complex transitions.\n *\n * **Note**: If you're using the\n * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)\n * prop, make sure to define styles for `.appear-*` classes as well.\n */\n\n\nvar CSSTransition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(CSSTransition, _React$Component);\n\n function CSSTransition() {\n var _this;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n _this.appliedClasses = {\n appear: {},\n enter: {},\n exit: {}\n };\n\n _this.onEnter = function (maybeNode, maybeAppearing) {\n var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),\n node = _this$resolveArgument[0],\n appearing = _this$resolveArgument[1];\n\n _this.removeClasses(node, 'exit');\n\n _this.addClass(node, appearing ? 'appear' : 'enter', 'base');\n\n if (_this.props.onEnter) {\n _this.props.onEnter(maybeNode, maybeAppearing);\n }\n };\n\n _this.onEntering = function (maybeNode, maybeAppearing) {\n var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),\n node = _this$resolveArgument2[0],\n appearing = _this$resolveArgument2[1];\n\n var type = appearing ? 'appear' : 'enter';\n\n _this.addClass(node, type, 'active');\n\n if (_this.props.onEntering) {\n _this.props.onEntering(maybeNode, maybeAppearing);\n }\n };\n\n _this.onEntered = function (maybeNode, maybeAppearing) {\n var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),\n node = _this$resolveArgument3[0],\n appearing = _this$resolveArgument3[1];\n\n var type = appearing ? 'appear' : 'enter';\n\n _this.removeClasses(node, type);\n\n _this.addClass(node, type, 'done');\n\n if (_this.props.onEntered) {\n _this.props.onEntered(maybeNode, maybeAppearing);\n }\n };\n\n _this.onExit = function (maybeNode) {\n var _this$resolveArgument4 = _this.resolveArguments(maybeNode),\n node = _this$resolveArgument4[0];\n\n _this.removeClasses(node, 'appear');\n\n _this.removeClasses(node, 'enter');\n\n _this.addClass(node, 'exit', 'base');\n\n if (_this.props.onExit) {\n _this.props.onExit(maybeNode);\n }\n };\n\n _this.onExiting = function (maybeNode) {\n var _this$resolveArgument5 = _this.resolveArguments(maybeNode),\n node = _this$resolveArgument5[0];\n\n _this.addClass(node, 'exit', 'active');\n\n if (_this.props.onExiting) {\n _this.props.onExiting(maybeNode);\n }\n };\n\n _this.onExited = function (maybeNode) {\n var _this$resolveArgument6 = _this.resolveArguments(maybeNode),\n node = _this$resolveArgument6[0];\n\n _this.removeClasses(node, 'exit');\n\n _this.addClass(node, 'exit', 'done');\n\n if (_this.props.onExited) {\n _this.props.onExited(maybeNode);\n }\n };\n\n _this.resolveArguments = function (maybeNode, maybeAppearing) {\n return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`\n : [maybeNode, maybeAppearing];\n };\n\n _this.getClassNames = function (type) {\n var classNames = _this.props.classNames;\n var isStringClassNames = typeof classNames === 'string';\n var prefix = isStringClassNames && classNames ? classNames + \"-\" : '';\n var baseClassName = isStringClassNames ? \"\" + prefix + type : classNames[type];\n var activeClassName = isStringClassNames ? baseClassName + \"-active\" : classNames[type + \"Active\"];\n var doneClassName = isStringClassNames ? baseClassName + \"-done\" : classNames[type + \"Done\"];\n return {\n baseClassName: baseClassName,\n activeClassName: activeClassName,\n doneClassName: doneClassName\n };\n };\n\n return _this;\n }\n\n var _proto = CSSTransition.prototype;\n\n _proto.addClass = function addClass(node, type, phase) {\n var className = this.getClassNames(type)[phase + \"ClassName\"];\n\n var _this$getClassNames = this.getClassNames('enter'),\n doneClassName = _this$getClassNames.doneClassName;\n\n if (type === 'appear' && phase === 'done' && doneClassName) {\n className += \" \" + doneClassName;\n } // This is for to force a repaint,\n // which is necessary in order to transition styles when adding a class name.\n\n\n if (phase === 'active') {\n /* eslint-disable no-unused-expressions */\n node && node.scrollTop;\n }\n\n if (className) {\n this.appliedClasses[type][phase] = className;\n\n _addClass(node, className);\n }\n };\n\n _proto.removeClasses = function removeClasses(node, type) {\n var _this$appliedClasses$ = this.appliedClasses[type],\n baseClassName = _this$appliedClasses$.base,\n activeClassName = _this$appliedClasses$.active,\n doneClassName = _this$appliedClasses$.done;\n this.appliedClasses[type] = {};\n\n if (baseClassName) {\n removeClass(node, baseClassName);\n }\n\n if (activeClassName) {\n removeClass(node, activeClassName);\n }\n\n if (doneClassName) {\n removeClass(node, doneClassName);\n }\n };\n\n _proto.render = function render() {\n var _this$props = this.props,\n _ = _this$props.classNames,\n props = _objectWithoutPropertiesLoose(_this$props, [\"classNames\"]);\n\n return /*#__PURE__*/React.createElement(Transition, _extends({}, props, {\n onEnter: this.onEnter,\n onEntered: this.onEntered,\n onEntering: this.onEntering,\n onExit: this.onExit,\n onExiting: this.onExiting,\n onExited: this.onExited\n }));\n };\n\n return CSSTransition;\n}(React.Component);\n\nCSSTransition.defaultProps = {\n classNames: ''\n};\nCSSTransition.propTypes = process.env.NODE_ENV !== \"production\" ? _extends({}, Transition.propTypes, {\n /**\n * The animation classNames applied to the component as it appears, enters,\n * exits or has finished the transition. A single name can be provided, which\n * will be suffixed for each stage, e.g. `classNames=\"fade\"` applies:\n *\n * - `fade-appear`, `fade-appear-active`, `fade-appear-done`\n * - `fade-enter`, `fade-enter-active`, `fade-enter-done`\n * - `fade-exit`, `fade-exit-active`, `fade-exit-done`\n *\n * A few details to note about how these classes are applied:\n *\n * 1. They are _joined_ with the ones that are already defined on the child\n * component, so if you want to add some base styles, you can use\n * `className` without worrying that it will be overridden.\n *\n * 2. If the transition component mounts with `in={false}`, no classes are\n * applied yet. You might be expecting `*-exit-done`, but if you think\n * about it, a component cannot finish exiting if it hasn't entered yet.\n *\n * 2. `fade-appear-done` and `fade-enter-done` will _both_ be applied. This\n * allows you to define different behavior for when appearing is done and\n * when regular entering is done, using selectors like\n * `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply\n * an epic entrance animation when element first appears in the DOM using\n * [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can\n * simply use `fade-enter-done` for defining both cases.\n *\n * Each individual classNames can also be specified independently like:\n *\n * ```js\n * classNames={{\n * appear: 'my-appear',\n * appearActive: 'my-active-appear',\n * appearDone: 'my-done-appear',\n * enter: 'my-enter',\n * enterActive: 'my-active-enter',\n * enterDone: 'my-done-enter',\n * exit: 'my-exit',\n * exitActive: 'my-active-exit',\n * exitDone: 'my-done-exit',\n * }}\n * ```\n *\n * If you want to set these classes using CSS Modules:\n *\n * ```js\n * import styles from './styles.css';\n * ```\n *\n * you might want to use camelCase in your CSS file, that way could simply\n * spread them instead of listing them one by one:\n *\n * ```js\n * classNames={{ ...styles }}\n * ```\n *\n * @type {string | {\n * appear?: string,\n * appearActive?: string,\n * appearDone?: string,\n * enter?: string,\n * enterActive?: string,\n * enterDone?: string,\n * exit?: string,\n * exitActive?: string,\n * exitDone?: string,\n * }}\n */\n classNames: classNamesShape,\n\n /**\n * A `\n * {\"I'll receive my-node-* classes\"}\n *
\n * \r\n 
\r\n {!editComment && (\r\n setEditComment(true)}\r\n onExited={() => setEditComment(false)}\r\n > \r\n <>\r\n {editComment && (
\r\n \r\n )\r\n}\r\n\r\nexport default TeacherComment;","import React, { useEffect } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { randomId } from '../../utils';\r\nimport TeacherComment from '../common/TeacherComment';\r\nimport SkeletonFeedback from '~components/common/Skeleton/SkeletonFeedback';\r\nimport { getFeedback, getOverviewFeedback } from '~src/api/teacherAPI';\r\nimport {\r\n CSSTransition,\r\n} from 'react-transition-group';\r\nimport styles from './teacherFeedback.module.scss';\r\nimport Skeleton from 'react-loading-skeleton';\r\nimport Pagination from 'react-js-pagination';\r\n\r\nconst feedbackDemo = [\r\n {\r\n id: randomId(),\r\n stName: 'Truong Van Lam',\r\n stAvatar: null,\r\n stFeedback: '',\r\n lessonTime: '12/06/2020 10:30AM (Vietnam Time)',\r\n lessonName: 'Lesson 6: ReactJS application',\r\n rating: '5',\r\n },\r\n {\r\n id: randomId(),\r\n stName: 'Truong Van Lam',\r\n stAvatar: 'https://i.pinimg.com/236x/aa/84/88/aa8488c0bdc927ac836586c004c7cb12.jpg',\r\n stFeedback: 'Buổi học rất tốt, giảng viên nhiệt tình. Giảng viên phát âm rất chuẩn chỉnh',\r\n lessonTime: '12/06/2020 10:30AM (Vietnam Time)',\r\n lessonName: 'Lesson 6: ReactJS application',\r\n rating: '3',\r\n }\r\n];\r\n\r\nconst commentDemo = [\r\n {\r\n id: randomId(),\r\n dateTime: new Date(),\r\n teacherName: 'Kelly Clarkson',\r\n teacherAvatar: 'https://i.pinimg.com/236x/aa/84/88/aa8488c0bdc927ac836586c004c7cb12.jpg',\r\n content: `Lorem ipsum dolor sit, amet consectetur adipisicing elit. Error earum\r\n molestias consequatur, iusto accusantium minima est saepe porro id odit nam, numquam\r\n voluptates quis repudiandae veniam. Provident illum et voluptate. Lorem ipsum dolor sit,\r\n amet consectetur adipisicing elit. Quaerat aliquam magni impedit vitae sit expedita totam\r\n labore neque, dolores eos veritatis? Qui nisi, ipsa nostrum nulla labore esse dicta.\r\n Aspernatur`,\r\n editted: false,\r\n },\r\n {\r\n id: randomId(),\r\n dateTime: new Date(),\r\n teacherName: 'Holy Breaker',\r\n teacherAvatar: 'https://i.pinimg.com/236x/aa/84/88/aa8488c0bdc927ac836586c004c7cb12.jpg',\r\n content: `Lorem ipsum dolor sit, amet consectetur adipisicing elit. Error earum\r\n molestias consequatur, iusto accusantium minima est saepe porro id odit nam, numquam\r\n voluptates.`,\r\n editted: false,\r\n }\r\n];\r\n\r\n\r\nconst FeedbackRow = ({ data: { id, stName, stAvatar, stFeedback, lessonTime, lessonName, rating, FeedbackLink } }) => {\r\n const [content, setContent] = React.useState('');\r\n const [isEditing, setIsEditing] = React.useState(false);\r\n const _showReply = (event) => {\r\n event.preventDefault();\r\n setContent('');\r\n setIsEditing(true);\r\n }\r\n\r\n const _hideReply = (event) => {\r\n event.preventDefault();\r\n setContent('');\r\n setIsEditing(false);\r\n }\r\n\r\n const _onChange = (event) => {\r\n event.preventDefault();\r\n setContent(event.target.value);\r\n }\r\n\r\n const _onSubmit = (event) => {\r\n event.preventDefault();\r\n addComment(id, content);\r\n setContent('');\r\n setIsEditing(false)\r\n }\r\n\r\n const addComment = () => {\r\n\r\n }\r\n\r\n const updateComment = (comments) => {\r\n //API update comment\r\n console.log('Comments updated call API:', comments);\r\n }\r\n\r\n useEffect(() => console.log(isEditing), [isEditing]);\r\n return (\r\n \r\n
\r\n\r\n )}\r\n \r\n
\r\n {teacherName}
\r\n{content}
\r\n\r\n
\r\n \r\n {!!editted ? `Edited at ${moment(dateTime).format('hh:mm A')} | ${moment(dateTime).format('DD/MM/YYYY')}` : `Comment at ${moment(dateTime).format('hh:mm A')} | ${moment(dateTime).format('DD/MM/YYYY')}`}
\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\nconst RenderCommentFeedback = ({ id, updateComment }) => {\r\n const [comments, setComments] = React.useState(null);\r\n const _onUpdateComment = (cmtId, cmtContent) => {\r\n setComments(\r\n [...comments].map(cmt => cmt.id === cmtId ? {\r\n ...cmt,\r\n content: cmtContent,\r\n editted: true,\r\n dateTime: new Date()\r\n } : cmt)\r\n );\r\n updateComment(comments);\r\n }\r\n\r\n React.useEffect(() => {\r\n setTimeout(() => setComments(commentDemo), 1000)\r\n }, [])\r\n\r\n return (\r\n <>\r\n {!comments && \r\n 
\r\n
\r\n \r\n setIsEditing(true)}\r\n onExited={() => setIsEditing(false)}\r\n >\r\n <>\r\n {isEditing && (\r\n \r\n\r\n )}\r\n \r\n \r\n\r\n {!isEditing && (\r\n
\r\n \r\n
\r\n\r\n {stName}
\r\n\r\n
\r\n \r\n {\r\n [...Array(5)].map((el, index) => (5 - index) <= rating\r\n ? \r\n : )\r\n }\r\n
\r\n \r\n
\r\n \r\n Class Time: {lessonTime}\r\n
\r\n \r\n Lesson: {lessonName}\r\n
\r\n \r\n {!!stFeedback && stFeedback !== '' ?
\r\n {stFeedback}
:The student didn't leave any feedback for this class
}\r\n\r\n\r\n Detail lesson\r\n {/* Reply */}\r\n
\r\n )\r\n\r\n }\r\n\r\n {/* \r\n {}\r\n
*/}\r\n\r\n The teacher had commented on this feedback:
}\r\n {!!comments && comments.length > 0 && comments.map(comment =>\r\n
\r\n )\r\n}\r\n\r\nconst TeacherFeedback = () => {\r\n\r\n const [filterValue, setFilterValue] = React.useState('');\r\n const [feedbacks, setFeedbacks] = React.useState(null);\r\n const [isLoading, setIsLoading] = React.useState(true);\r\n const [pageNumber, setPageNumber] = React.useState(1);\r\n const [pageSize, setPageSize] = React.useState(null);\r\n const [totalResult, setTotalResult] = React.useState(null);\r\n const handleUpdateComment = (feedbackId, commentId, commentContent) => {\r\n dispatch({ type: 'UPDATE_COMMENT', payload: { feedbackId, commentId, commentContent } })\r\n }\r\n\r\n const fetchFeedback = async ( page = 1 ) => {\r\n setIsLoading(true);\r\n try {\r\n const res = await getFeedback({\r\n Rate:filterValue !== '' ? parseInt(filterValue) : 0,\r\n Page:page\r\n });\r\n if(res.Code === 1){\r\n res.Data.length > 0 ? setFeedbacks(res.Data.map(fb => {\r\n return {\r\n ...fb,\r\n id: fb.StudentUID,\r\n stName: fb.StudentName,\r\n stAvatar: fb.StudentIMG,\r\n stFeedback: fb.Evaluation,\r\n lessonTime: fb?.ScheduleDate ?? '',\r\n lessonName: fb.Lession,\r\n rating: fb.Rate,\r\n FeedbackLink:fb.FeedbackLink\r\n }\r\n })) : setFeedbacks([]);\r\n setPageSize(res.PageSize);\r\n setTotalResult(res.TotalResult);\r\n }\r\n \r\n } catch (error) {\r\n setFeedbacks([]);\r\n console.log(error.message);\r\n }\r\n setIsLoading(false);\r\n }\r\n\r\n React.useEffect(() => {\r\n console.log(feedbacks);\r\n }, [feedbacks])\r\n\r\n React.useEffect(() => {\r\n fetchFeedback();\r\n }, [filterValue])\r\n\r\n React.useEffect(() => {\r\n fetchFeedback(pageNumber);\r\n }, [pageNumber])\r\n\r\n return (\r\n <>\r\n {/* \r\n
\r\nLast 100 Student Feedback Average: {isLoading ? (
\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\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\n Student Feedback
\r\n\r\n
\r\n \r\n\r\n\r\n )\r\n}\r\n\r\nconst domContainer = document.getElementById('react-teacher-feedback');\r\nReactDOM.render(\r\n {\r\n isLoading ? setPageNumber(page)}\r\n itemClass=\"page-item\"\r\n linkClass=\"page-link\"\r\n activeClass=\"active\"\r\n />\r\n )}\r\n \r\n )\r\n }\r\n
\r\n \r\n
)\r\n }\r\n {totalResult > pageSize && (\r\n \r\n \r\n ![\"empty\"](\"../assets/img/empty.svg\")
\r\n
\r\n \r\n No rating {filterValue} from students
\r\n