-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path.eslintcache
2 lines (2 loc) · 232 KB
/
.eslintcache
1
2
[{"C:\\ReactJS\\uet-project\\src\\pages\\presentation\\EditPresentation.js":"1","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\SlideDetail.js":"2","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\SingleSlide.js":"3","C:\\ReactJS\\uet-project\\src\\util\\APIUtils.js":"4","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\slideSlice.js":"5","C:\\ReactJS\\uet-project\\src\\index.js":"6","C:\\ReactJS\\uet-project\\src\\app\\App.js":"7","C:\\ReactJS\\uet-project\\src\\common\\LoadingIndicator.js":"8","C:\\ReactJS\\uet-project\\src\\common\\NotFound.js":"9","C:\\ReactJS\\uet-project\\src\\common\\PublicRoute.js":"10","C:\\ReactJS\\uet-project\\src\\common\\PrivateRoute.js":"11","C:\\ReactJS\\uet-project\\src\\common\\AppHeader.js":"12","C:\\ReactJS\\uet-project\\src\\pages\\landing\\Home.js":"13","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\Presentations.js":"14","C:\\ReactJS\\uet-project\\src\\store\\store.js":"15","C:\\ReactJS\\uet-project\\src\\constants\\index.js":"16","C:\\ReactJS\\uet-project\\src\\common\\AppSider.js":"17","C:\\ReactJS\\uet-project\\src\\pages\\question\\QuestionList.js":"18","C:\\ReactJS\\uet-project\\src\\util\\Helpers.js":"19","C:\\ReactJS\\uet-project\\src\\pages\\question\\Questions.js":"20","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\PresentationList.js":"21","C:\\ReactJS\\uet-project\\src\\util\\score.js":"22","C:\\ReactJS\\uet-project\\src\\pages\\question\\EditQuestion.js":"23","C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\Lobby\\index.jsx":"24","C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\Main\\index.jsx":"25","C:\\ReactJS\\uet-project\\src\\pages\\Host\\index.jsx":"26","C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\InGame\\index.jsx":"27","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\index.jsx":"28","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Pin\\index.jsx":"29","C:\\ReactJS\\uet-project\\src\\reportWebVitals.js":"30","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Name\\index.jsx":"31","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\components\\InputPIN.jsx":"32","C:\\ReactJS\\uet-project\\src\\pages\\Host\\hostSlice.js":"33","C:\\ReactJS\\uet-project\\src\\pages\\Host\\ProgressBar.js":"34","C:\\ReactJS\\uet-project\\src\\pages\\Host\\Delayed.js":"35","C:\\ReactJS\\uet-project\\src\\pages\\Host\\CountdownTimer.js":"36","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\QuestionBankDrawer.js":"37","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Instruction\\index.jsx":"38","C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\ScoreBoard\\index.js":"39","C:\\ReactJS\\uet-project\\src\\pages\\question\\PicturesWall.js":"40","C:\\ReactJS\\uet-project\\src\\pages\\user\\profile\\Profile.js":"41","C:\\ReactJS\\uet-project\\src\\util\\QuestionType.js":"42","C:\\ReactJS\\uet-project\\src\\pages\\user\\login\\Login.js":"43","C:\\ReactJS\\uet-project\\src\\util\\Colors.js":"44","C:\\ReactJS\\uet-project\\src\\pages\\user\\signup\\Signup.js":"45","C:\\ReactJS\\uet-project\\src\\util\\Role.js":"46","C:\\ReactJS\\uet-project\\src\\util\\ImageURI.js":"47","C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\AnswerdCount.js":"48","C:\\ReactJS\\uet-project\\src\\common\\ServerError.js":"49","C:\\ReactJS\\uet-project\\src\\pages\\report\\index.jsx":"50","C:\\ReactJS\\uet-project\\src\\pages\\report\\ReportList.js":"51","C:\\ReactJS\\uet-project\\src\\pages\\report\\ReportDetail.js":"52","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Pin\\PinWithURL.js":"53"},{"size":13592,"mtime":1622732542270,"results":"54","hashOfConfig":"55"},{"size":12740,"mtime":1619170794603,"results":"56","hashOfConfig":"55"},{"size":1922,"mtime":1622746882131,"results":"57","hashOfConfig":"55"},{"size":6764,"mtime":1622306475034,"results":"58","hashOfConfig":"55"},{"size":1673,"mtime":1616487245976,"results":"59","hashOfConfig":"55"},{"size":805,"mtime":1616083517546,"results":"60","hashOfConfig":"55"},{"size":5865,"mtime":1622302991693,"results":"61","hashOfConfig":"55"},{"size":265,"mtime":1618585522147,"results":"62","hashOfConfig":"55"},{"size":427,"mtime":1614135413647,"results":"63","hashOfConfig":"55"},{"size":416,"mtime":1613854056924,"results":"64","hashOfConfig":"55"},{"size":481,"mtime":1618587949298,"results":"65","hashOfConfig":"55"},{"size":3061,"mtime":1622743450665,"results":"66","hashOfConfig":"55"},{"size":771,"mtime":1621326125332,"results":"67","hashOfConfig":"55"},{"size":4224,"mtime":1622746882076,"results":"68","hashOfConfig":"55"},{"size":282,"mtime":1616070090624,"results":"69","hashOfConfig":"55"},{"size":737,"mtime":1622286658148,"results":"70","hashOfConfig":"55"},{"size":1612,"mtime":1618904634582,"results":"71","hashOfConfig":"55"},{"size":5384,"mtime":1622746882195,"results":"72","hashOfConfig":"55"},{"size":972,"mtime":1613638260326,"results":"73","hashOfConfig":"55"},{"size":5731,"mtime":1622746882261,"results":"74","hashOfConfig":"55"},{"size":5026,"mtime":1621328477578,"results":"75","hashOfConfig":"55"},{"size":91,"mtime":1613900959638,"results":"76","hashOfConfig":"55"},{"size":15466,"mtime":1618839750884,"results":"77","hashOfConfig":"55"},{"size":8017,"mtime":1622372735862,"results":"78","hashOfConfig":"55"},{"size":4097,"mtime":1619084551439,"results":"79","hashOfConfig":"55"},{"size":636,"mtime":1615828422397,"results":"80","hashOfConfig":"55"},{"size":15585,"mtime":1622743463099,"results":"81","hashOfConfig":"55"},{"size":786,"mtime":1622136008822,"results":"82","hashOfConfig":"55"},{"size":2721,"mtime":1622370055149,"results":"83","hashOfConfig":"55"},{"size":362,"mtime":1606210735677,"results":"84","hashOfConfig":"55"},{"size":2679,"mtime":1622748503440,"results":"85","hashOfConfig":"55"},{"size":572,"mtime":1614909221751,"results":"86","hashOfConfig":"55"},{"size":1081,"mtime":1617246113456,"results":"87","hashOfConfig":"55"},{"size":888,"mtime":1616856572516,"results":"88","hashOfConfig":"55"},{"size":592,"mtime":1617242627760,"results":"89","hashOfConfig":"55"},{"size":913,"mtime":1615982344537,"results":"90","hashOfConfig":"55"},{"size":4316,"mtime":1622746882087,"results":"91","hashOfConfig":"55"},{"size":10390,"mtime":1622748777719,"results":"92","hashOfConfig":"55"},{"size":925,"mtime":1617212230385,"results":"93","hashOfConfig":"55"},{"size":3982,"mtime":1619164607731,"results":"94","hashOfConfig":"55"},{"size":11320,"mtime":1622374503491,"results":"95","hashOfConfig":"55"},{"size":650,"mtime":1622265247826,"results":"96","hashOfConfig":"55"},{"size":2886,"mtime":1622286759459,"results":"97","hashOfConfig":"55"},{"size":613,"mtime":1617896231666,"results":"98","hashOfConfig":"55"},{"size":11577,"mtime":1617900310769,"results":"99","hashOfConfig":"55"},{"size":131,"mtime":1617898061377,"results":"100","hashOfConfig":"55"},{"size":144,"mtime":1619122537495,"results":"101","hashOfConfig":"55"},{"size":1873,"mtime":1618850809795,"results":"102","hashOfConfig":"55"},{"size":418,"mtime":1614135403113,"results":"103","hashOfConfig":"55"},{"size":1701,"mtime":1622746882280,"results":"104","hashOfConfig":"55"},{"size":5603,"mtime":1622219940403,"results":"105","hashOfConfig":"55"},{"size":6260,"mtime":1622746882275,"results":"106","hashOfConfig":"55"},{"size":861,"mtime":1622136420701,"results":"107","hashOfConfig":"55"},{"filePath":"108","messages":"109","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"nz9s2i",{"filePath":"110","messages":"111","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"112","usedDeprecatedRules":"113"},{"filePath":"114","messages":"115","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"116","messages":"117","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"118","usedDeprecatedRules":"119"},{"filePath":"120","messages":"121","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"122","messages":"123","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"124","messages":"125","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"126","usedDeprecatedRules":"119"},{"filePath":"127","messages":"128","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"129","usedDeprecatedRules":"119"},{"filePath":"130","messages":"131","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"132","messages":"133","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"134","messages":"135","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"136","messages":"137","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"138","messages":"139","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"140","usedDeprecatedRules":"119"},{"filePath":"141","messages":"142","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"143","messages":"144","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"113"},{"filePath":"145","messages":"146","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"147","messages":"148","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"149"},{"filePath":"150","messages":"151","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"152","messages":"153","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"154"},{"filePath":"155","messages":"156","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"157","usedDeprecatedRules":"119"},{"filePath":"158","messages":"159","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"160"},{"filePath":"161","messages":"162","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"160"},{"filePath":"163","messages":"164","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"165","messages":"166","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"167","messages":"168","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"169","usedDeprecatedRules":"170"},{"filePath":"171","messages":"172","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"173","messages":"174","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"175","usedDeprecatedRules":"119"},{"filePath":"176","messages":"177","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"178","messages":"179","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"160"},{"filePath":"180","messages":"181","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"170"},{"filePath":"182","messages":"183","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"184","messages":"185","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"186","usedDeprecatedRules":"187"},{"filePath":"188","messages":"189","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"190","messages":"191","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"192","usedDeprecatedRules":"193"},{"filePath":"194","messages":"195","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"196","usedDeprecatedRules":"197"},{"filePath":"198","messages":"199","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"200","messages":"201","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"202","messages":"203","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"204","messages":"205","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"206","messages":"207","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"208","usedDeprecatedRules":"119"},{"filePath":"209","messages":"210","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"211","usedDeprecatedRules":"119"},{"filePath":"212","messages":"213","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"214"},{"filePath":"215","messages":"216","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"217","messages":"218","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"219","messages":"220","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"221","messages":"222","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"160"},{"filePath":"223","messages":"224","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"170"},{"filePath":"225","messages":"226","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"227","usedDeprecatedRules":"160"},{"filePath":"228","messages":"229","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"230","messages":"231","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"232","messages":"233","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"234","usedDeprecatedRules":"160"},{"filePath":"235","messages":"236","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"237","usedDeprecatedRules":"119"},{"filePath":"238","messages":"239","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"240","usedDeprecatedRules":"119"},"C:\\ReactJS\\uet-project\\src\\pages\\presentation\\EditPresentation.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\presentation\\SlideDetail.js",["241"],"import {\r\n CheckOutlined,\r\n ClockCircleOutlined,\r\n CommentOutlined,\r\n SketchOutlined,\r\n PlusOutlined,\r\n SettingOutlined,\r\n PictureOutlined,\r\n} from \"@ant-design/icons\";\r\nimport {\r\n Button,\r\n Checkbox,\r\n Col,\r\n Form,\r\n Input,\r\n Row,\r\n Select,\r\n Slider,\r\n Typography,\r\n} from \"antd\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport styled from \"styled-components\";\r\nimport score from \"../../util/score\";\r\nimport { currentSlide } from \"./slideSlice\";\r\nimport * as QuestionType from \"util/QuestionType\";\r\nimport PicturesWall from \"pages/question/PicturesWall\";\r\n\r\nSlideDetail.propTypes = {};\r\n\r\nconst { Option } = Select;\r\nconst { Title } = Typography;\r\n\r\nconst StyledSlide = styled.div`\r\n background: white;\r\n color: dodgerblue;\r\n font-size: 1em;\r\n border: 1px solid gainsboro;\r\n padding: 50px;\r\n margin: 5px;\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n`;\r\n\r\nconst StyledSetting = styled.div`\r\n background: white;\r\n width: 20vw;\r\n color: dodgerblue;\r\n font-size: 1em;\r\n border: 1px solid gainsboro;\r\n padding: 50px;\r\n margin: 5px;\r\n display: flex;\r\n flex-direction: column;\r\n`;\r\n\r\nconst TitleInput = styled(Input)`\r\n font-size: 3em;\r\n font-weight: bold;\r\n border: 2px solid dodgerblue;\r\n border-radius: 3px;\r\n\r\n margin: ${(props) => props.size};\r\n padding: ${(props) => props.size};\r\n`;\r\n\r\n// const OptionInput = styled(Input)`\r\n// color: dodgerblue;\r\n// font-size: 2em;\r\n// border: 2px solid dodgerblue;\r\n// border-radius: 3px;\r\n\r\n// margin: 5px;\r\n// padding: ${(props) => props.size};\r\n// `;\r\n\r\nfunction SlideDetail(props) {\r\n const { content } = props;\r\n\r\n const dispatch = useDispatch();\r\n\r\n const slide = useSelector((state) => state.slides);\r\n\r\n const [form] = Form.useForm();\r\n\r\n let formValues;\r\n\r\n function onChange(changedValues, allValues) {\r\n formValues = { ...slide.current, ...allValues };\r\n dispatch(currentSlide(formValues));\r\n }\r\n\r\n useEffect(() => {\r\n const onFill = (content) => {\r\n form.setFieldsValue({\r\n title: content.title,\r\n answers: content.answers\r\n ? content.answers\r\n : [{ text: \"\" }, { text: \"\" }],\r\n score: content.score,\r\n seconds: content.seconds,\r\n questionType: content.questionType,\r\n multiSelect: content.multiSelect,\r\n image: content.image ? content.image : \"\",\r\n });\r\n };\r\n\r\n onFill(content);\r\n dispatch(currentSlide(content));\r\n }, [content, form, dispatch]);\r\n\r\n return (\r\n <Form form={form} onValuesChange={onChange}>\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n flexWrap: \"wrap\",\r\n alignContent: \"space-between\",\r\n }}\r\n >\r\n <StyledSlide>\r\n <Form.Item name=\"title\">\r\n <TitleInput placeholder=\"Title question\" autoComplete=\"off\" />\r\n </Form.Item>\r\n\r\n <Form.Item\r\n name=\"image\"\r\n label={\r\n <Title level={4}>\r\n <PictureOutlined /> Image\r\n </Title>\r\n }\r\n >\r\n <PicturesWall />\r\n </Form.Item>\r\n\r\n <Form.List name=\"answers\" initialValue={[\"\", \"\"]}>\r\n {(answers, { add, remove }) => {\r\n return (\r\n <div>\r\n {slide.current.questionType ===\r\n QuestionType.QUESTION_CHOICE_ANSWER\r\n ? answers.map((answer, index) => (\r\n <div key={answer.key}>\r\n <Form.Item label={`Option ${index + 1}`}>\r\n <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>\r\n <Col span={18}>\r\n <Form.Item\r\n name={[index, \"text\"]}\r\n rules={[{ require: true }]}\r\n >\r\n <Input\r\n placeholder={`Option ${index + 1}`}\r\n autoComplete=\"off\"\r\n />\r\n </Form.Item>\r\n </Col>\r\n <Col span={2}>\r\n <Form.Item\r\n name={[index, \"correct\"]}\r\n valuePropName=\"checked\"\r\n rules={[{ require: true, type: \"boolean\" }]}\r\n >\r\n <Checkbox checked={false} />\r\n </Form.Item>\r\n </Col>\r\n <Col span={4}>\r\n {index > 1 ? (\r\n <Button\r\n type=\"danger\"\r\n onClick={() => remove(answer.name)}\r\n >\r\n Remove\r\n </Button>\r\n ) : null}\r\n </Col>\r\n </Row>\r\n </Form.Item>\r\n </div>\r\n ))\r\n : slide.current.questionType ===\r\n QuestionType.QUESTION_TRUE_FALSE\r\n ? answers.map((answer, index) => (\r\n <div key={answer.key}>\r\n <Form.Item label={`Option ${index + 1}`}>\r\n <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>\r\n <Col span={6}>\r\n <Form.Item\r\n name={[index, \"text\"]}\r\n rules={[{ require: true }]}\r\n >\r\n <Input readOnly />\r\n </Form.Item>\r\n </Col>\r\n <Col span={2}>\r\n <Form.Item\r\n name={[index, \"correct\"]}\r\n valuePropName=\"checked\"\r\n rules={[{ require: true, type: \"boolean\" }]}\r\n >\r\n <input\r\n style={{ fontSize: 15 }}\r\n name=\"inpRadio\"\r\n type=\"radio\"\r\n checked={false}\r\n />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n </Form.Item>\r\n </div>\r\n ))\r\n : slide.current.questionType ===\r\n QuestionType.QUESTION_INPUT_ANSWER\r\n ? answers.map((answer, index) => (\r\n <div key={answer.key}>\r\n <Form.Item label={`Correct answer ${index + 1}`}>\r\n <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>\r\n <Col span={18}>\r\n <Form.Item\r\n name={[index, \"text\"]}\r\n rules={[{ require: true }]}\r\n >\r\n <Input\r\n placeholder={`Correct answer ${index + 1}`}\r\n />\r\n </Form.Item>\r\n </Col>\r\n <Col span={2}>\r\n <Form.Item\r\n name={[index, \"correct\"]}\r\n valuePropName=\"checked\"\r\n rules={[{ require: true, type: \"boolean\" }]}\r\n >\r\n <Checkbox defaultChecked disabled />\r\n </Form.Item>\r\n </Col>\r\n <Col span={4}>\r\n {index > 1 ? (\r\n <Button\r\n type=\"danger\"\r\n onClick={() => remove(answer.name)}\r\n >\r\n Remove\r\n </Button>\r\n ) : null}\r\n </Col>\r\n </Row>\r\n </Form.Item>\r\n </div>\r\n ))\r\n : \"The type of question has not been determined\"}\r\n {answers.length < 4 &&\r\n slide.current.questionType !==\r\n QuestionType.QUESTION_TRUE_FALSE ? (\r\n <Form.Item>\r\n <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>\r\n <Button\r\n type=\"dashed\"\r\n onClick={() =>\r\n slide.current.questionType ===\r\n QuestionType.QUESTION_INPUT_ANSWER\r\n ? add({ text: \"\", correct: true })\r\n : add()\r\n }\r\n style={{ width: \"60%\" }}\r\n >\r\n <PlusOutlined /> Add more\r\n </Button>\r\n </Row>\r\n </Form.Item>\r\n ) : null}\r\n </div>\r\n );\r\n }}\r\n </Form.List>\r\n </StyledSlide>\r\n\r\n <StyledSetting>\r\n <Title level={4}>\r\n <CommentOutlined /> Question Type\r\n </Title>\r\n <Form.Item name=\"questionType\" rules={[{ required: true }]}>\r\n <Select\r\n disabled\r\n // onChange={handleChange}\r\n >\r\n <Option value={QuestionType.QUESTION_CHOICE_ANSWER}>Quiz</Option>\r\n <Option value={QuestionType.QUESTION_TRUE_FALSE}>\r\n True or False\r\n </Option>\r\n <Option value={QuestionType.QUESTION_INPUT_ANSWER}>\r\n Input answer\r\n </Option>\r\n </Select>\r\n </Form.Item>\r\n <Title level={4}>\r\n <SketchOutlined /> Points\r\n </Title>\r\n <Form.Item\r\n name=\"score\"\r\n initialValue={1000}\r\n rules={[{ type: \"number\", required: false }]}\r\n >\r\n <Slider marks={score} min={0} max={2000} step={null} />\r\n </Form.Item>\r\n <Title level={4}>\r\n <ClockCircleOutlined /> Time to answer\r\n </Title>\r\n <Form.Item\r\n name=\"seconds\"\r\n rules={[{ type: \"number\", required: false }]}\r\n >\r\n <Select\r\n placeholder=\"Choose a time\"\r\n menuItemSelectedIcon={<CheckOutlined />}\r\n >\r\n <Option value={5}>5 seconds</Option>\r\n <Option value={10}>10 seconds</Option>\r\n <Option value={20}>20 seconds</Option>\r\n <Option value={30}>30 seconds</Option>\r\n <Option value={60}>1 minute</Option>\r\n <Option value={90}>1 minute 30 seconds</Option>\r\n <Option value={120}>2 minutes</Option>\r\n <Option value={240}>4 minutes</Option>\r\n </Select>\r\n </Form.Item>\r\n {slide.current.questionType ===\r\n QuestionType.QUESTION_CHOICE_ANSWER && (\r\n <>\r\n <Title level={4}>\r\n <SettingOutlined /> Question Option\r\n </Title>\r\n <Form.Item\r\n name=\"multiSelect\"\r\n rules={[{ type: \"boolean\", required: false }]}\r\n >\r\n <Select\r\n defaultActiveFirstOption\r\n menuItemSelectedIcon={<CheckOutlined />}\r\n >\r\n <Option value={false}>Single select</Option>\r\n <Option value={true}>Multi-select</Option>\r\n </Select>\r\n </Form.Item>\r\n </>\r\n )}\r\n <Button danger onClick={() => props.deleteSlide(slide.current.id)}>\r\n Delete\r\n </Button>\r\n </StyledSetting>\r\n </div>\r\n </Form>\r\n );\r\n}\r\n\r\nexport default SlideDetail;\r\n",["242","243"],"C:\\ReactJS\\uet-project\\src\\pages\\presentation\\SingleSlide.js",["244"],"C:\\ReactJS\\uet-project\\src\\util\\APIUtils.js",["245"],"import {\r\n API_BASE_URL,\r\n ACCESS_TOKEN,\r\n PRESENTATIONS_LIST_SIZE,\r\n REFRESH_TOKEN,\r\n} from \"../constants\";\r\n\r\nconst request = (options) => {\r\n const headers = new Headers({\r\n \"Content-Type\": \"application/json\",\r\n });\r\n\r\n if (localStorage.getItem(ACCESS_TOKEN)) {\r\n headers.append(\r\n \"Authorization\",\r\n \"Bearer \" + localStorage.getItem(ACCESS_TOKEN)\r\n );\r\n }\r\n\r\n const defaults = { headers: headers };\r\n options = Object.assign({}, defaults, options);\r\n\r\n return fetch(options.url, options).then((response) =>\r\n response.json().then((json) => {\r\n if (!response.ok) {\r\n return Promise.reject(json);\r\n }\r\n return json;\r\n })\r\n );\r\n};\r\n\r\nexport function getAllPresentations(page, size) {\r\n page = page || 0;\r\n size = size || PRESENTATIONS_LIST_SIZE;\r\n\r\n return request({\r\n url: API_BASE_URL + \"/presentations?page=\" + page + \"&size=\" + size,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function getPresentation(presentationId) {\r\n return request({\r\n url: API_BASE_URL + \"/presentation/\" + presentationId,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function countPresentations() {\r\n return request({\r\n url: API_BASE_URL + \"/presentations/count\",\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function createPresentation(presentationData) {\r\n return request({\r\n url: API_BASE_URL + \"/presentation\",\r\n method: \"POST\",\r\n body: JSON.stringify(presentationData),\r\n });\r\n}\r\n\r\nexport function updatePresentation(presentationData) {\r\n return request({\r\n url: API_BASE_URL + \"/presentation\",\r\n method: \"PUT\",\r\n body: JSON.stringify(presentationData),\r\n });\r\n}\r\n\r\nexport function addToPresentation(questions, presentationId) {\r\n return request({\r\n url: API_BASE_URL + \"/presentation/\" + presentationId + \"/addQuestions\",\r\n method: \"POST\",\r\n body: JSON.stringify(questions),\r\n });\r\n}\r\n\r\nexport function deleteFromPresentation(questionId, presentationId) {\r\n return request({\r\n url:\r\n API_BASE_URL +\r\n \"/presentation/\" +\r\n presentationId +\r\n \"/deleteQuestion/\" +\r\n questionId,\r\n method: \"DELETE\",\r\n });\r\n}\r\n\r\nexport function updateToPresentation(question, presentationId) {\r\n return request({\r\n url: API_BASE_URL + \"/presentation/\" + presentationId + \"/updateQuestion\",\r\n method: \"PUT\",\r\n body: JSON.stringify(question),\r\n });\r\n}\r\n\r\nexport function deletePresentation(presentationId) {\r\n return request({\r\n url: API_BASE_URL + \"/presentation/\" + presentationId,\r\n method: \"DELETE\",\r\n });\r\n}\r\n\r\nexport function deletePresentations(presentationIds) {\r\n return request({\r\n url: API_BASE_URL + \"/presentations/\" + presentationIds,\r\n method: \"DELETE\",\r\n });\r\n}\r\n\r\nexport function getAllQuestions(page, size) {\r\n page = page || 0;\r\n size = size || PRESENTATIONS_LIST_SIZE;\r\n\r\n return request({\r\n url: API_BASE_URL + \"/questions?page=\" + page + \"&size=\" + size,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function countQuestions() {\r\n return request({\r\n url: API_BASE_URL + \"/questions/count\",\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function createQuestion(questionData) {\r\n return request({\r\n url: API_BASE_URL + \"/question\",\r\n method: \"POST\",\r\n body: JSON.stringify(questionData),\r\n });\r\n}\r\n\r\nexport function updateQuestion(questionData) {\r\n return request({\r\n url: API_BASE_URL + \"/question\",\r\n method: \"PUT\",\r\n body: JSON.stringify(questionData),\r\n });\r\n}\r\n\r\nexport function getQuestion(questionId) {\r\n return request({\r\n url: API_BASE_URL + \"/question/\" + questionId,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function deleteQuestion(questionId) {\r\n return request({\r\n url: API_BASE_URL + \"/question/\" + questionId,\r\n method: \"DELETE\",\r\n });\r\n}\r\n\r\nexport function deleteQuestions(questionIds) {\r\n return request({\r\n url: API_BASE_URL + \"/questions/\" + questionIds,\r\n method: \"DELETE\",\r\n });\r\n}\r\n\r\nexport function createGame(gameData) {\r\n return request({\r\n url: API_BASE_URL + \"/game\",\r\n method: \"POST\",\r\n body: JSON.stringify(gameData),\r\n });\r\n}\r\n\r\nexport function getAllGames(page, size) {\r\n return request({\r\n url: API_BASE_URL + \"/games?page=\" + page + \"&size=\" + size,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function countGames() {\r\n return request({\r\n url: API_BASE_URL + \"/games/count\",\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function getGame(gameId) {\r\n return request({\r\n url: API_BASE_URL + \"/game/\" + gameId,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function updateGame(gameData) {\r\n return request({\r\n url: API_BASE_URL + \"/game\",\r\n method: \"PUT\",\r\n body: JSON.stringify(gameData),\r\n });\r\n}\r\n\r\nexport function deleteGame(gameId) {\r\n return request({\r\n url: API_BASE_URL + \"/game/\" + gameId,\r\n method: \"DELETE\",\r\n });\r\n}\r\n\r\nexport function deleteGames(gameIds) {\r\n return request({\r\n url: API_BASE_URL + \"/games/\" + gameIds,\r\n method: \"DELETE\",\r\n });\r\n}\r\n\r\nexport function checkExistByPIN(pin) {\r\n return request({\r\n url: API_BASE_URL + \"/games/checkExistByPIN?pin=\" + pin,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function login(loginRequest) {\r\n return request({\r\n url: API_BASE_URL + \"/auth/signin\",\r\n method: \"POST\",\r\n body: JSON.stringify(loginRequest),\r\n });\r\n}\r\n\r\nexport function refreshToken(refreshTokenRequest) {\r\n return request({\r\n url: API_BASE_URL + \"/auth/refreshtoken\",\r\n method: \"POST\",\r\n body: JSON.stringify(refreshTokenRequest),\r\n });\r\n}\r\n\r\nexport function signup(signupRequest) {\r\n return request({\r\n url: API_BASE_URL + \"/auth/signup\",\r\n method: \"POST\",\r\n body: JSON.stringify(signupRequest),\r\n });\r\n}\r\n\r\nexport function checkUsernameAvailability(username) {\r\n return request({\r\n url: API_BASE_URL + \"/user/checkUsernameAvailability?username=\" + username,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function checkEmailAvailability(email) {\r\n return request({\r\n url: API_BASE_URL + \"/user/checkEmailAvailability?email=\" + email,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function getCurrentUser() {\r\n if (!localStorage.getItem(ACCESS_TOKEN)) {\r\n return Promise.reject(\"No access token set.\");\r\n }\r\n\r\n return request({\r\n url: API_BASE_URL + \"/user/me\",\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function getUserProfile(username) {\r\n return request({\r\n url: API_BASE_URL + \"/users/\" + username,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function updateUserProfile(userProfile) {\r\n return request({\r\n url: API_BASE_URL + \"/users\",\r\n method: \"PUT\",\r\n body: JSON.stringify(userProfile),\r\n });\r\n}\r\n\r\nexport function updatePassword(password, oldpassword) {\r\n return request({\r\n url:\r\n API_BASE_URL +\r\n \"/user/updatePassword?password=\" +\r\n password +\r\n \"&oldpassword=\" +\r\n oldpassword,\r\n method: \"POST\",\r\n });\r\n}\r\n",["246","247"],"C:\\ReactJS\\uet-project\\src\\pages\\presentation\\slideSlice.js",[],"C:\\ReactJS\\uet-project\\src\\index.js",[],"C:\\ReactJS\\uet-project\\src\\app\\App.js",["248","249"],"import { Layout, notification } from \"antd\";\nimport React, { useEffect, useState } from \"react\";\nimport {\n Redirect,\n Route,\n Switch,\n useHistory,\n withRouter,\n} from \"react-router-dom\";\nimport AppHeader from \"../common/AppHeader\";\nimport { ACCESS_TOKEN, REFRESH_TOKEN } from \"../constants\";\nimport { getCurrentUser, refreshToken } from \"../util/APIUtils\";\nimport LoadingIndicator from \"./../common/LoadingIndicator\";\nimport NotFound from \"./../common/NotFound\";\nimport PrivateRoute from \"./../common/PrivateRoute\";\nimport \"./App.css\";\nimport PublicRoute from \"../common/PublicRoute\";\n\nconst { Content } = Layout;\n\nconst Home = React.lazy(() => import(\"pages/landing/Home\"));\nconst Audience = React.lazy(() => import(\"pages/Audience/index\"));\nconst Host = React.lazy(() => import(\"pages/Host/index\"));\n\nconst Presentations = React.lazy(() =>\n import(\"pages/presentation/Presentations\")\n);\nconst Questions = React.lazy(() => import(\"pages/question/Questions\"));\nconst Report = React.lazy(() => import(\"pages/report/index\"));\n\nconst Login = React.lazy(() => import(\"pages/user/login/Login\"));\nconst Signup = React.lazy(() => import(\"pages/user/signup/Signup\"));\nconst Profile = React.lazy(() => import(\"pages/user/profile/Profile\"));\n\nconst App = (props) => {\n const [currentUser, setCurrentUser] = useState(null);\n const [isAuthenticated, setIsAuthenticated] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const history = useHistory();\n\n notification.config({\n placement: \"topRight\",\n top: 70,\n duration: 3,\n });\n\n function loadCurrentUser() {\n setIsLoading(true);\n getCurrentUser()\n .then((response) => {\n setCurrentUser(response);\n // console.log(response);\n setIsAuthenticated(true);\n setIsLoading(false);\n })\n .catch((error) => {\n setIsLoading(false);\n });\n }\n\n function handleLogout(\n redirectTo = \"/\",\n notificationType = \"success\",\n description = \"You're successfully logged out.\"\n ) {\n history.push(\"/\");\n\n localStorage.removeItem(ACCESS_TOKEN);\n localStorage.removeItem(REFRESH_TOKEN);\n\n setCurrentUser(null);\n setIsAuthenticated(false);\n\n notification[notificationType]({\n message: \"Viedu App\",\n description: description,\n });\n }\n\n function handleLogin() {\n notification.success({\n message: \"Viedu App\",\n description: \"You're successfully logged in.\",\n });\n loadCurrentUser();\n\n history.push(\"/\");\n }\n\n useEffect(() => {\n loadCurrentUser();\n }, []);\n\n // useEffect(() => {\n // if (!isAuthenticated )\n // refreshToken({\n // refreshToken: localStorage.getItem(REFRESH_TOKEN),\n // }).then((response) => {\n // localStorage.setItem(REFRESH_TOKEN, response.refreshToken);\n // localStorage.setItem(ACCESS_TOKEN, response.accessToken);\n // setIsAuthenticated(true);\n // }).catc;\n // }, [isAuthenticated]);\n\n // if (isLoading) {\n // return <LoadingIndicator />;\n // }\n\n return (\n <Layout className=\"app-container\">\n {isLoading && <LoadingIndicator />}\n {!isLoading && (\n <>\n <AppHeader\n isAuthenticated={isAuthenticated}\n currentUser={currentUser}\n onLogout={handleLogout}\n />\n <Content className=\"app-content\">\n <div className=\"container\">\n <Switch>\n {isAuthenticated && (\n <Redirect exact from=\"/\" to=\"/presentations\" />\n )}\n <PublicRoute\n restricted={false}\n path=\"/\"\n component={Home}\n exact\n authenticated={isAuthenticated}\n />\n <PublicRoute\n exact\n restricted={true}\n path=\"/login\"\n authenticated={isAuthenticated}\n component={(props) =>\n !isAuthenticated ? (\n <Login onLogin={handleLogin} {...props} />\n ) : null\n }\n />\n <Route exac path=\"/signup\" component={Signup}></Route>\n <Route exact path=\"/user\">\n <Redirect to=\"/user/profile\" />\n </Route>\n <Route\n path=\"/user/profile\"\n render={(props) => (\n <Profile\n isAuthenticated={isAuthenticated}\n currentUser={currentUser}\n {...props}\n />\n )}\n />\n {/* <PrivateRoute\n authenticated={isAuthenticated}\n path=\"/presentations\"\n component={Presentations}\n handleLogout={handleLogout}\n />\n <PrivateRoute\n authenticated={isAuthenticated}\n path=\"/questions\"\n component={Questions}\n handleLogout={handleLogout}\n /> */}\n <Route\n path=\"/presentations\"\n component={Presentations}\n handleLogout={handleLogout}\n />\n <Route\n path=\"/questions\"\n component={Questions}\n handleLogout={handleLogout}\n />\n <Route\n path=\"/reports\"\n component={Report}\n handleLogout={handleLogout}\n />\n <Route path=\"/play\" component={Host} />\n <Route path={[\"/audience\", \"/go\"]} component={Audience} />\n <Route component={NotFound} />\n </Switch>\n </div>\n </Content>\n </>\n )}\n </Layout>\n );\n};\n\nexport default withRouter(App);\n","C:\\ReactJS\\uet-project\\src\\common\\LoadingIndicator.js",["250"],"import { LoadingOutlined } from \"@ant-design/icons\";\r\nimport React from \"react\";\r\nimport { Spin } from \"antd\";\r\n\r\nexport default function LoadingIndicator(props) {\r\n return (\r\n <Spin style={{ display: \"block\", textAlign: \"center\", marginTop: 30 }} />\r\n );\r\n}\r\n","C:\\ReactJS\\uet-project\\src\\common\\NotFound.js",[],"C:\\ReactJS\\uet-project\\src\\common\\PublicRoute.js",[],"C:\\ReactJS\\uet-project\\src\\common\\PrivateRoute.js",[],"C:\\ReactJS\\uet-project\\src\\common\\AppHeader.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\landing\\Home.js",["251"],"import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { Row, Col, Image } from \"antd\";\r\nimport Signup from \"pages/user/signup/Signup\";\r\nimport \"./Home.css\";\r\n\r\nimport imageSample from \"assets/images/background.jpg\";\r\n\r\nHome.propTypes = {};\r\n\r\nfunction Home(props) {\r\n return (\r\n <div>\r\n <Row>\r\n <Col\r\n xs={24}\r\n xl={12}\r\n style={{\r\n padding: 50,\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n }}\r\n >\r\n <Image preview={false} src={imageSample} />\r\n </Col>\r\n <Col xs={24} xl={12} style={{ padding: 20 }}>\r\n <Signup />\r\n </Col>\r\n </Row>\r\n </div>\r\n );\r\n}\r\n\r\nexport default Home;\r\n","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\Presentations.js",[],"C:\\ReactJS\\uet-project\\src\\store\\store.js",[],"C:\\ReactJS\\uet-project\\src\\constants\\index.js",[],"C:\\ReactJS\\uet-project\\src\\common\\AppSider.js",[],["252","253"],"C:\\ReactJS\\uet-project\\src\\pages\\question\\QuestionList.js",[],"C:\\ReactJS\\uet-project\\src\\util\\Helpers.js",[],["254","255"],"C:\\ReactJS\\uet-project\\src\\pages\\question\\Questions.js",["256"],"import {\r\n Button,\r\n Col,\r\n Form,\r\n Modal,\r\n notification,\r\n Row,\r\n Select,\r\n Space,\r\n PageHeader,\r\n Input,\r\n} from \"antd\";\r\nimport React from \"react\";\r\nimport { Route, Switch, useHistory, useRouteMatch } from \"react-router-dom\";\r\n\r\nimport AppSider from \"../../common/AppSider\";\r\nimport { createQuestion } from \"../../util/APIUtils\";\r\nimport QuestionList from \"./QuestionList\";\r\nimport PrivateRoute from \"./../../common/PrivateRoute\";\r\n\r\nconst EditQuestion = React.lazy(() => import(\"./EditQuestion\"));\r\nconst NotFound = React.lazy(() => import(\"common/NotFound\"));\r\n\r\nconst { Option } = Select;\r\nconst { Search } = Input;\r\n\r\nconst routes = [\r\n {\r\n path: \"/\",\r\n breadcrumbName: \"Home\",\r\n },\r\n {\r\n path: \"/questions\",\r\n breadcrumbName: \"Question List\",\r\n },\r\n];\r\n\r\nconst Questions = (props) => {\r\n let match = useRouteMatch();\r\n // console.log({ match });\r\n\r\n const [visible, setVisible] = React.useState(false);\r\n const [confirmLoading, setConfirmLoading] = React.useState(false);\r\n\r\n const [form] = Form.useForm();\r\n const [description, setDescription] = React.useState(\"\");\r\n const history = useHistory();\r\n\r\n const showModal = () => {\r\n setVisible(true);\r\n };\r\n\r\n const handleSubmit = (values) => {\r\n let answersField;\r\n if (values.questionType === \"QUESTION_TRUE_FALSE\") {\r\n answersField = { answers: [{ text: \"TRUE\" }, { text: \"FALSE\" }] };\r\n values = { ...values, ...answersField };\r\n }\r\n\r\n if (values.questionType === \"QUESTION_INPUT_ANSWER\") {\r\n answersField = {\r\n answers: [\r\n { text: \"\", correct: true },\r\n { text: \"\", correct: true },\r\n ],\r\n };\r\n values = { ...values, ...answersField };\r\n }\r\n\r\n const newQuestion = Object.assign({}, values);\r\n\r\n setConfirmLoading(true);\r\n createQuestion(newQuestion)\r\n .then((response) => {\r\n notification.success({\r\n message: \"Viedu App\",\r\n description: \"Created new question!\",\r\n });\r\n history.push(`${match.url}/${response.id}`);\r\n })\r\n .catch((error) => {\r\n notification.error({\r\n message: \"Viedu App\",\r\n description: error.message || \"Error\",\r\n });\r\n });\r\n setVisible(false);\r\n setConfirmLoading(false);\r\n };\r\n\r\n const handleCancel = () => {\r\n setVisible(false);\r\n form.resetFields();\r\n };\r\n\r\n function handleChange(value) {\r\n // console.log(`selected ${value}`);\r\n switch (value) {\r\n case \"QUESTION_CHOICE_ANSWER\":\r\n setDescription(\r\n \"Gives players several answer alternatives to choose from \"\r\n );\r\n break;\r\n case \"QUESTION_TRUE_FALSE\":\r\n setDescription(\"Let players decided if the statement is true or false\");\r\n break;\r\n case \"QUESTION_INPUT_ANSWER\":\r\n setDescription(\"Let players input a answer\");\r\n break;\r\n\r\n default:\r\n setDescription(\"\");\r\n break;\r\n }\r\n }\r\n\r\n const onSearch = () => {\r\n // alert(\"searching...\");\r\n };\r\n\r\n return (\r\n <Switch>\r\n <Route\r\n exact\r\n path={match.path}\r\n render={() => (\r\n <AppSider>\r\n <PageHeader\r\n title=\"My questions\"\r\n breadcrumb={{ routes }}\r\n subTitle=\"\"\r\n />\r\n <Row\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n }}\r\n >\r\n <Col span={6}>\r\n <Space>\r\n <Button type=\"primary\" onClick={showModal}>\r\n New Question\r\n </Button>\r\n <Modal\r\n title=\"New question\"\r\n visible={visible}\r\n onOk={form.submit}\r\n confirmLoading={confirmLoading}\r\n onCancel={handleCancel}\r\n okText=\"Create\"\r\n >\r\n <Form form={form} onFinish={handleSubmit}>\r\n <Form.Item\r\n name=\"questionType\"\r\n label=\"Question Type\"\r\n rules={[{ required: true }]}\r\n >\r\n <Select\r\n defaultActiveFirstOption\r\n style={{ width: 120 }}\r\n onChange={handleChange}\r\n >\r\n <Option value=\"QUESTION_CHOICE_ANSWER\">Quiz</Option>\r\n <Option value=\"QUESTION_TRUE_FALSE\">\r\n True or False\r\n </Option>\r\n <Option value=\"QUESTION_INPUT_ANSWER\">\r\n Input answer\r\n </Option>\r\n </Select>\r\n </Form.Item>\r\n </Form>\r\n <p>{description}</p>\r\n </Modal>\r\n </Space>\r\n </Col>\r\n <Col span={6}>\r\n <Search\r\n placeholder=\"Search\"\r\n allowClear\r\n enterButton\r\n size=\"middle\"\r\n onSearch={onSearch}\r\n />\r\n </Col>\r\n </Row>\r\n <br />\r\n <QuestionList />\r\n </AppSider>\r\n )}\r\n />\r\n <Route\r\n authenticated\r\n path={`${match.path}/:questionId/edit`}\r\n component={EditQuestion}\r\n />\r\n <Route\r\n authenticated\r\n path={`${match.path}/:questionId`}\r\n component={EditQuestion}\r\n />\r\n <Route component={NotFound} />\r\n </Switch>\r\n );\r\n};\r\n\r\nexport default Questions;\r\n","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\PresentationList.js",[],["257","258"],"C:\\ReactJS\\uet-project\\src\\util\\score.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\question\\EditQuestion.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\Lobby\\index.jsx",["259","260","261"],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\Main\\index.jsx",["262"],"import { Button, Divider, Form, Input, Switch, Row, Col, Collapse } from \"antd\";\r\nimport React, { useEffect } from \"react\";\r\nimport { createGame } from \"util/APIUtils\";\r\nimport { useHistory, useLocation, useRouteMatch } from \"react-router-dom\";\r\nimport { useDispatch } from \"react-redux\";\r\nimport { currentGame } from \"./../../hostSlice\";\r\n\r\nconst { Panel } = Collapse;\r\n\r\nfunction useQuery() {\r\n return new URLSearchParams(useLocation().search);\r\n}\r\n\r\nfunction Main(props) {\r\n const match = useRouteMatch();\r\n const [form] = Form.useForm();\r\n const history = useHistory();\r\n\r\n let query = useQuery();\r\n const quizId = query.get(\"quizId\");\r\n\r\n const dispatch = useDispatch();\r\n\r\n async function handleSubmit(values) {\r\n const gameData = Object.assign({}, values);\r\n // console.log(log);\r\n\r\n await createGame(gameData)\r\n .then((response) => {\r\n dispatch(currentGame(response));\r\n })\r\n .catch((error) => console.log(error));\r\n\r\n history.push(`${match.url}/lobby?quizId=${quizId}`, {\r\n rootPath: match.url,\r\n });\r\n }\r\n\r\n useEffect(() => {\r\n form.setFieldsValue({\r\n presentationId: quizId,\r\n gameType: \"LIVE\",\r\n });\r\n });\r\n\r\n return (\r\n <>\r\n <div\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n }}\r\n >\r\n <Form\r\n style={{ width: 350, fontSize: 15 }}\r\n form={form}\r\n onFinish={handleSubmit}\r\n >\r\n <Form.Item name=\"gameType\">\r\n <Input hidden />\r\n </Form.Item>\r\n <Form.Item name=\"presentationId\">\r\n <Input hidden />\r\n </Form.Item>\r\n <Form.Item name=\"title\">\r\n <Input autoFocus placeholder=\"Title\" />\r\n </Form.Item>\r\n <Form.Item>\r\n <div\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n }}\r\n >\r\n <Button type=\"primary\" htmlType=\"submit\">\r\n Create Room\r\n </Button>\r\n </div>\r\n </Form.Item>\r\n\r\n <Collapse>\r\n <Panel header=\"Game options\" key=\"1\">\r\n <div>\r\n <Row>\r\n <Col span={20}>\r\n Show question and answers on player's device\r\n </Col>\r\n <Col span={4}>\r\n <Form.Item\r\n name=\"playerDeviceDisplay\"\r\n valuePropName=\"checked\"\r\n >\r\n <Switch />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n\r\n <Row>\r\n <Col span={20}>Random order of questions</Col>\r\n <Col span={4}>\r\n <Form.Item name=\"randomQuestion\" valuePropName=\"checked\">\r\n <Switch />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n\r\n <Row>\r\n <Col span={20}>Random order of answers</Col>\r\n <Col span={4}>\r\n <Form.Item name=\"randomAnswer\" valuePropName=\"checked\">\r\n <Switch />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n\r\n <Row>\r\n <Col span={20}>Friendly nickname genarator</Col>\r\n <Col span={4}>\r\n <Form.Item name=\"nicknameGenerator\" valuePropName=\"checked\">\r\n <Switch defaultChecked />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n\r\n <Row>\r\n <Col span={20}>Show minimized intro instructions</Col>\r\n <Col span={4}>\r\n <Form.Item name=\"showInstructions\" valuePropName=\"checked\">\r\n <Switch />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n </div>\r\n </Panel>\r\n </Collapse>\r\n </Form>\r\n </div>\r\n </>\r\n );\r\n}\r\n\r\nexport default Main;\r\n",["263","264"],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\index.jsx",[],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\InGame\\index.jsx",["265","266","267"],"import {\r\n CheckOutlined,\r\n CloseOutlined,\r\n FullscreenExitOutlined,\r\n FullscreenOutlined,\r\n} from \"@ant-design/icons\";\r\nimport { Button, Col, message, Row, Tooltip, Typography } from \"antd\";\r\nimport { WS_BASE_URL } from \"constants/index\";\r\nimport Delayed from \"pages/Host/Delayed\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { FullScreen, useFullScreenHandle } from \"react-full-screen\";\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport SockJS from \"sockjs-client\";\r\nimport Stomp from \"stompjs\";\r\nimport styled from \"styled-components\";\r\nimport { getPresentation } from \"util/APIUtils\";\r\nimport * as QuestionType from \"util/QuestionType\";\r\nimport CountdownTimer from \"./../../CountdownTimer\";\r\nimport ProgressBar from \"./../../ProgressBar\";\r\nimport ScoreBoard from \"../ScoreBoard\";\r\nimport { currentGame, updateGameStatus } from \"pages/Host/hostSlice\";\r\n\r\nimport { resoleImageURI } from \"util/ImageURI\";\r\nimport AnswerdCount from \"../AnswerdCount\";\r\nimport useSound from \"use-sound\";\r\n\r\nimport coundownSound from \"assets/sounds/beeps.wav\";\r\nimport loopMusic from \"assets/sounds/loopMusic.wav\";\r\n\r\nconst { Title } = Typography;\r\n\r\nconst ToolBar = styled.div`\r\n display: flex;\r\n flex-direction: row-reverse;\r\n padding: 10px;\r\n`;\r\n\r\nconst CenterDiv = styled.div`\r\n height: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n`;\r\n\r\nconst OptionBox = styled.div`\r\n height: 50px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n color: white;\r\n font-size: 15;\r\n font-weight: bold;\r\n padding: 10px;\r\n border: 1px solid black;\r\n border-radius: 8px;\r\n margin: 5px;\r\n`;\r\n\r\nInGame.propTypes = {};\r\n\r\nvar stompClient = null;\r\n\r\nconst answerOptions = [\r\n { icon: \"A\", color: \"red\" },\r\n { icon: \"B\", color: \"blue\" },\r\n { icon: \"C\", color: \"orange\" },\r\n { icon: \"D\", color: \"green\" },\r\n];\r\n\r\nfunction InGame(props) {\r\n const history = useHistory();\r\n const games = useSelector((state) => state.games);\r\n const game = games.current;\r\n const [presentation, setPresentation] = useState({});\r\n const [question, setQuestion] = useState({ data: {}, index: -1 });\r\n const [displayResult, setDisplayResult] = useState(false);\r\n const [scoreBoard, setScoreBoard] = useState({ display: false, list: [] });\r\n\r\n const dispatch = useDispatch();\r\n const handle = useFullScreenHandle();\r\n\r\n const { presentationId } = game;\r\n\r\n const [playCountdown, exposedData] = useSound(coundownSound, {\r\n sprite: {\r\n fiveSeconds: [4000, 6000],\r\n },\r\n });\r\n const [playLoopMusic, { stop }] = useSound(loopMusic);\r\n\r\n // const rendered = useRef(1);\r\n // useEffect(() => {\r\n // rendered.current = rendered.current + 1;\r\n // });\r\n // ];\r\n\r\n function connect() {\r\n let serverUrl = WS_BASE_URL;\r\n let ws = new SockJS(serverUrl);\r\n stompClient = Stomp.over(ws);\r\n\r\n stompClient.connect({}, onConnected, onError);\r\n }\r\n\r\n function disconnect() {\r\n if (stompClient !== null) stompClient.disconnect();\r\n }\r\n\r\n function onConnected() {\r\n // Subscribe to the Game\r\n stompClient.subscribe(`/quiz/${game.pin}`, onMessageReceived);\r\n }\r\n\r\n function onError(error) {\r\n message.error(\r\n \"Could not connect to server. Please refresh this page to try again!\"\r\n );\r\n }\r\n\r\n function onMessageReceived(payload) {\r\n var receivedMessage = JSON.parse(payload.body);\r\n\r\n if (receivedMessage.type === \"END\") {\r\n dispatch(updateGameStatus({ gameStatus: \"FINISHED\" }));\r\n }\r\n\r\n if (receivedMessage.type === \"SCORE_BOARD\") {\r\n let listPlayer = JSON.parse(receivedMessage.content);\r\n setScoreBoard((scoreBoard) => ({ ...scoreBoard, list: listPlayer }));\r\n dispatch(currentGame({ ...game, players: listPlayer }));\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n let mounted = true;\r\n //re-connect\r\n connect();\r\n\r\n // get list of questions\r\n const fetch = async () => {\r\n await getPresentation(presentationId)\r\n .then((res) => {\r\n if (mounted) {\r\n setPresentation(res);\r\n }\r\n })\r\n .catch((error) => console.log(error));\r\n };\r\n\r\n fetch();\r\n\r\n return () => {\r\n mounted = false;\r\n stompClient.send(\r\n `/app/game.endGame/${game.pin}`,\r\n {},\r\n JSON.stringify({\r\n sender: game.hostedBy,\r\n type: \"END\",\r\n content: \"Host end game\",\r\n })\r\n );\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (presentation.questionList)\r\n setQuestion({\r\n data: presentation.questionList[0],\r\n index: 0,\r\n });\r\n else {\r\n console.log(\"Presentation has been loaded yet\");\r\n }\r\n }, [presentation]);\r\n\r\n const stopMusic = () => stop();\r\n\r\n useEffect(() => {\r\n question.index >= 0\r\n ? setTimeout(() => {\r\n // music\r\n playLoopMusic();\r\n\r\n // allow players to answer\r\n sendQuestion();\r\n // console.log(presentation);\r\n let count = question.data.seconds;\r\n const timeAnswer = setInterval(() => {\r\n // console.log(count);\r\n if (count === 6) {\r\n stopMusic();\r\n playCountdown({ id: \"fiveSeconds\" });\r\n }\r\n\r\n if (count === 0) {\r\n exposedData.stop();\r\n // console.log(\"Time up\");\r\n clearInterval(timeAnswer);\r\n //skip\r\n sendSkip();\r\n }\r\n count--;\r\n }, 1000);\r\n }, 5000)\r\n : console.log(\"No question is loaded\");\r\n\r\n return () => {\r\n setDisplayResult(false);\r\n };\r\n }, [question]);\r\n\r\n const handleNext = () => {\r\n if (!scoreBoard.display) {\r\n // setQuestion((question) => ({ ...question, data: {} }));\r\n\r\n stompClient.send(\r\n `/app/game.getScoreBoard/${game.pin}`,\r\n {},\r\n JSON.stringify({\r\n sender: game.hostedBy,\r\n type: \"SCORE_BOARD\",\r\n content: \"Get score board\",\r\n })\r\n );\r\n\r\n setScoreBoard((scoreBoard) => ({ ...scoreBoard, display: true }));\r\n } else {\r\n setScoreBoard((scoreBoard) => ({ ...scoreBoard, display: false }));\r\n\r\n if (question.index < presentation.questionList.length - 1) {\r\n setQuestion((question) => ({\r\n data: presentation.questionList[question.index + 1],\r\n index: question.index + 1,\r\n }));\r\n } else {\r\n // handle End\r\n history.replace(\"/\");\r\n }\r\n }\r\n\r\n console.log(scoreBoard);\r\n };\r\n\r\n function sendSkip() {\r\n stompClient.send(\r\n `/app/game.skipLive/${game.pin}`,\r\n {},\r\n JSON.stringify({\r\n sender: game.hostedBy,\r\n type: \"SKIP\",\r\n content: question.data.id,\r\n })\r\n );\r\n setDisplayResult(true);\r\n }\r\n\r\n async function sendQuestion() {\r\n let sendObject = JSON.parse(JSON.stringify(question.data));\r\n\r\n if (sendObject.questionType === QuestionType.QUESTION_INPUT_ANSWER)\r\n delete sendObject.answers;\r\n else sendObject.answers.map((answer) => delete answer.correct);\r\n\r\n let sendContent = JSON.stringify(sendObject);\r\n\r\n stompClient.send(\r\n `/app/game.sendQuestion/${game.pin}`,\r\n {},\r\n JSON.stringify({\r\n sender: game.hostedBy,\r\n type: \"SEND_QUESTION\",\r\n content: sendContent,\r\n })\r\n );\r\n }\r\n\r\n return (\r\n <div>\r\n <FullScreen handle={handle}>\r\n <div\r\n style={{\r\n backgroundColor: \"white\",\r\n display: \"flex\",\r\n flex: 1,\r\n height: \"100%\",\r\n flexDirection: \"column\",\r\n }}\r\n >\r\n <ToolBar>\r\n {handle.active ? (\r\n <Tooltip placement=\"bottomRight\" title=\"Exit\">\r\n <Button\r\n onClick={handle.exit}\r\n icon={<FullscreenExitOutlined />}\r\n />\r\n </Tooltip>\r\n ) : (\r\n <Tooltip placement=\"bottomRight\" title=\"Fullscreen\">\r\n <Button onClick={handle.enter} icon={<FullscreenOutlined />} />\r\n </Tooltip>\r\n )}\r\n </ToolBar>\r\n {presentation.questionList ? (\r\n <>\r\n <Row style={{ backgroundColor: \"Background\" }}>\r\n <Col xl={4}>\r\n <CenterDiv>\r\n <Typography.Text strong style={{ fontSize: 25 }}>\r\n Question {question.index + 1} of{\" \"}\r\n {presentation.questionList.length}\r\n </Typography.Text>\r\n </CenterDiv>\r\n </Col>\r\n <Col xl={16}>\r\n <CenterDiv>\r\n <Typography.Text strong style={{ fontSize: 25 }}>\r\n {scoreBoard.display === false && question.data.title\r\n ? question.data.title\r\n : \"\"}\r\n </Typography.Text>\r\n </CenterDiv>\r\n </Col>\r\n <Col xl={4}>\r\n <CenterDiv\r\n style={{ justifyContent: \"flex-end\", padding: 10 }}\r\n >\r\n <Button type=\"primary\" onClick={() => handleNext()}>\r\n {question.index < presentation.questionList.length - 1\r\n ? \"Next\"\r\n : \"End\"}\r\n </Button>\r\n </CenterDiv>\r\n </Col>\r\n </Row>\r\n {scoreBoard.display === true ? (\r\n <ScoreBoard list={scoreBoard.list}></ScoreBoard>\r\n ) : (\r\n <div>\r\n {question.data.id && (\r\n <div>\r\n <CenterDiv>\r\n <ProgressBar time={5000} id={question.data.id} />\r\n </CenterDiv>\r\n\r\n <Delayed waitBeforeShow={5000} id={question.data.id}>\r\n <Row style={{ height: \"50vh\" }}>\r\n <Col span={5}>\r\n <CenterDiv>\r\n <CountdownTimer\r\n duration={question.data.seconds}\r\n />\r\n </CenterDiv>\r\n </Col>\r\n <Col span={14}>\r\n <CenterDiv>\r\n <img\r\n alt=\"Media for question\"\r\n src={\r\n question.data.image\r\n ? resoleImageURI(question.data.image)\r\n : \"https://i.imgur.com/OhthUOl.png\"\r\n }\r\n />\r\n </CenterDiv>\r\n </Col>\r\n <Col span={5}>\r\n <CenterDiv>\r\n <AnswerdCount game={game} />\r\n </CenterDiv>\r\n </Col>\r\n </Row>\r\n <div\r\n style={{\r\n position: \"fixed\",\r\n bottom: 20,\r\n width: \"100%\",\r\n }}\r\n >\r\n <Row>\r\n {question.data.answers &&\r\n (question.data.questionType ===\r\n QuestionType.QUESTION_CHOICE_ANSWER ||\r\n question.data.questionType ===\r\n QuestionType.QUESTION_TRUE_FALSE)\r\n ? question.data.answers.map((a, index) => (\r\n <Col key={index} span={12}>\r\n <OptionBox\r\n style={{\r\n justifyContent: displayResult\r\n ? \"space-between\"\r\n : \"flex-start\",\r\n backgroundColor:\r\n answerOptions[index].color,\r\n opacity: displayResult\r\n ? !a.correct\r\n ? 0.3\r\n : 1\r\n : 1,\r\n }}\r\n >\r\n <span>\r\n {answerOptions[index].icon}. {a.text}\r\n </span>\r\n {displayResult ? (\r\n <span>\r\n {a.correct ? (\r\n <CheckOutlined />\r\n ) : (\r\n <CloseOutlined />\r\n )}\r\n </span>\r\n ) : null}\r\n </OptionBox>\r\n </Col>\r\n ))\r\n : null}\r\n {question.data.answers &&\r\n question.data.questionType ===\r\n QuestionType.QUESTION_INPUT_ANSWER ? (\r\n <>\r\n {!displayResult && (\r\n <Col span={24}>\r\n <CenterDiv>\r\n <Title level={4}>\r\n Please input your answer in your device!\r\n </Title>\r\n </CenterDiv>\r\n </Col>\r\n )}\r\n {displayResult &&\r\n question.data.answers.map((a, index) => (\r\n <Col key={index} span={12}>\r\n <OptionBox\r\n style={{\r\n justifyContent: \"space-between\",\r\n backgroundColor:\r\n answerOptions[index].color,\r\n }}\r\n >\r\n <span>\r\n {answerOptions[index].icon}. {a.text}\r\n </span>\r\n\r\n <span>\r\n <CheckOutlined />\r\n </span>\r\n </OptionBox>\r\n </Col>\r\n ))}\r\n </>\r\n ) : null}\r\n </Row>\r\n </div>\r\n </Delayed>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </>\r\n ) : null}\r\n </div>\r\n </FullScreen>\r\n </div>\r\n );\r\n}\r\n\r\nexport default InGame;\r\n","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\index.jsx",[],"C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Pin\\index.jsx",[],"C:\\ReactJS\\uet-project\\src\\reportWebVitals.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Name\\index.jsx",["268"],"C:\\ReactJS\\uet-project\\src\\pages\\Audience\\components\\InputPIN.jsx",["269","270"],"import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { Input, Tooltip } from \"antd\";\r\n\r\nInputPIN.propTypes = {};\r\n\r\nfunction InputPIN(props) {\r\n const onChange = (e) => {\r\n const { value } = e.target;\r\n const reg = /^\\d*(\\d*)?$/;\r\n if ((!isNaN(value) && reg.test(value)) || value === \"\") {\r\n props.onChange(value);\r\n }\r\n };\r\n\r\n const onBlur = () => {\r\n const { onBlur } = props;\r\n if (onBlur) {\r\n onBlur();\r\n }\r\n };\r\n\r\n return <Input {...props} onChange={onChange} onBlur={onBlur} />;\r\n}\r\n\r\nexport default InputPIN;\r\n",["271","272"],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\hostSlice.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\ProgressBar.js",["273"],"import React, { useEffect, useState } from \"react\";\r\nimport { Progress } from \"antd\";\r\nimport PropTypes from \"prop-types\";\r\nimport { clearInterval } from \"stompjs\";\r\n\r\nProgressBar.propTypes = {\r\n time: PropTypes.number.isRequired,\r\n id: PropTypes.string.isRequired,\r\n};\r\n\r\nfunction ProgressBar(props) {\r\n const totalSecond = props.time;\r\n const [percent, setPercent] = useState(99);\r\n\r\n useEffect(() => {\r\n const inter = setInterval(() => {\r\n setPercent((percent) => (percent > 0 ? percent - 1 : 0));\r\n }, totalSecond / 100);\r\n\r\n return () => {\r\n setPercent(99);\r\n clearInterval(inter);\r\n };\r\n }, [props.id]);\r\n\r\n return (\r\n <>\r\n {percent > 0 ? (\r\n <Progress\r\n showInfo={false}\r\n strokeLinecap=\"square\"\r\n percent={percent}\r\n ></Progress>\r\n ) : null}\r\n </>\r\n );\r\n}\r\n\r\nexport default ProgressBar;\r\n",["274","275"],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\Delayed.js",["276"],"import React, { useEffect, useState } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nDelayed.propTypes = {\r\n waitBeforeShow: PropTypes.number.isRequired,\r\n id: PropTypes.string.isRequired,\r\n};\r\n\r\nfunction Delayed(props) {\r\n const [hidden, setHidden] = useState(true);\r\n\r\n useEffect(() => {\r\n let mounted = true;\r\n setTimeout(() => {\r\n if (mounted) setHidden(false);\r\n }, props.waitBeforeShow);\r\n\r\n return () => {\r\n mounted = false;\r\n setHidden(true);\r\n };\r\n }, [props.id]);\r\n\r\n return hidden ? <></> : props.children;\r\n}\r\n\r\nexport default Delayed;\r\n",["277","278"],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\CountdownTimer.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\presentation\\QuestionBankDrawer.js",["279"],"C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Instruction\\index.jsx",["280","281","282"],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\ScoreBoard\\index.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\question\\PicturesWall.js",["283"],"import React from \"react\";\r\nimport { Upload, Modal, message, Input, Button, Image } from \"antd\";\r\nimport { PlusOutlined } from \"@ant-design/icons\";\r\nimport { BASE_URL } from \"constants/index\";\r\n\r\nimport { resoleImageURI } from \"util/ImageURI\";\r\n\r\nfunction getBase64(file) {\r\n return new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.readAsDataURL(file);\r\n reader.onload = () => resolve(reader.result);\r\n reader.onerror = (error) => reject(error);\r\n });\r\n}\r\n\r\nfunction beforeUpload(file) {\r\n const isJpgOrPng = file.type === \"image/jpeg\" || file.type === \"image/png\";\r\n if (!isJpgOrPng) {\r\n message.error(\"You can only upload JPG/PNG file!\");\r\n }\r\n const isLt4M = file.size / 1024 / 1024 < 4;\r\n if (!isLt4M) {\r\n message.error(\"Image must smaller than 4MB!\");\r\n }\r\n return isJpgOrPng && isLt4M;\r\n}\r\n\r\nclass PicturesWall extends React.Component {\r\n state = {\r\n previewVisible: false,\r\n previewImage: \"\",\r\n previewTitle: \"\",\r\n fileList: [],\r\n name: \"\",\r\n };\r\n\r\n handleCancel = () => this.setState({ previewVisible: false });\r\n\r\n handlePreview = async (file) => {\r\n if (!file.url && !file.preview) {\r\n file.preview = await getBase64(file.originFileObj);\r\n }\r\n\r\n this.setState({\r\n previewImage: file.url || file.preview,\r\n previewVisible: true,\r\n previewTitle:\r\n file.name || file.url.substring(file.url.lastIndexOf(\"/\") + 1),\r\n });\r\n };\r\n\r\n handleChange = (stateChange) => {\r\n console.log(stateChange);\r\n const { fileList, file } = stateChange;\r\n\r\n if (fileList.length >= 1) {\r\n if (fileList[0].xhr)\r\n this.setState({\r\n fileList,\r\n file,\r\n name: fileList[0].xhr.status === 200 ? fileList[0].xhr.response : \"\",\r\n });\r\n }\r\n this.props.onChange?.(this.state.name);\r\n };\r\n\r\n handleRemove = () => {\r\n this.props.onChange?.(\"\");\r\n };\r\n\r\n componentDidMount() {\r\n this.setState({ name: this.props.value });\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.value !== prevProps.value) {\r\n this.setState({ name: this.props.value });\r\n }\r\n }\r\n\r\n removeImage = () => {\r\n this.setState({ fileList: [], name: \"\" });\r\n this.handleRemove();\r\n };\r\n\r\n render() {\r\n const {\r\n previewVisible,\r\n previewImage,\r\n fileList,\r\n previewTitle,\r\n name,\r\n } = this.state;\r\n\r\n const uploadButton = (\r\n <div>\r\n <PlusOutlined />\r\n <div style={{ marginTop: 8 }}>Upload</div>\r\n </div>\r\n );\r\n\r\n return (\r\n <div key={this.props.value}>\r\n {fileList.length === 0 && name !== \"\" && name !== undefined ? (\r\n <div>\r\n <div>\r\n <Image\r\n alt=\"media\"\r\n preview={false}\r\n style={{ margin: 20 }}\r\n src={resoleImageURI(name)}\r\n />\r\n </div>\r\n <div>\r\n <Button type=\"primary\" danger onClick={() => this.removeImage()}>\r\n Remove Image\r\n </Button>\r\n </div>\r\n </div>\r\n ) : (\r\n <>\r\n <Upload\r\n action={BASE_URL + \"/upload\"}\r\n listType=\"picture-card\"\r\n fileList={fileList}\r\n beforeUpload={beforeUpload}\r\n onPreview={this.handlePreview}\r\n onChange={this.handleChange}\r\n onRemove={this.handleRemove}\r\n itemRender={(originNode, file, fileList) => originNode}\r\n >\r\n {fileList.length >= 1 ? null : uploadButton}\r\n </Upload>\r\n <Modal\r\n visible={previewVisible}\r\n title={previewTitle}\r\n footer={null}\r\n onCancel={this.handleCancel}\r\n >\r\n <img alt=\"preview\" style={{ width: \"100%\" }} src={previewImage} />\r\n </Modal>\r\n </>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default PicturesWall;\r\n","C:\\ReactJS\\uet-project\\src\\pages\\user\\profile\\Profile.js",["284","285"],"import React, { useState, useEffect } from \"react\";\r\nimport {\r\n getUserProfile,\r\n updateUserProfile,\r\n updatePassword,\r\n} from \"util/APIUtils\";\r\nimport {\r\n Avatar,\r\n Tabs,\r\n Card,\r\n Input,\r\n Button,\r\n Form,\r\n Row,\r\n Col,\r\n notification,\r\n} from \"antd\";\r\nimport { getAvatarColor } from \"util/Colors\";\r\nimport LoadingIndicator from \"common/LoadingIndicator\";\r\nimport \"./Profile.css\";\r\nimport NotFound from \"common/NotFound\";\r\nimport ServerError from \"common/ServerError\";\r\nimport { EyeInvisibleOutlined, EyeTwoTone } from \"@ant-design/icons\";\r\n\r\nimport { PASSWORD_MIN_LENGTH, PASSWORD_MAX_LENGTH } from \"constants/index\";\r\n\r\nconst TabPane = Tabs.TabPane;\r\n\r\nconst Profile = (props) => {\r\n const { currentUser } = props;\r\n\r\n const [form] = Form.useForm();\r\n const [formChangePass] = Form.useForm();\r\n\r\n const [userProfile, setUserProfile] = useState(null);\r\n const [loading, setLoading] = useState(false);\r\n const [status, setStatus] = useState({ notFound: false, serverError: false });\r\n\r\n function loadUserProfile(username) {\r\n setLoading(true);\r\n\r\n getUserProfile(username)\r\n .then((response) => {\r\n // console.log(response);\r\n setUserProfile(response);\r\n setLoading(false);\r\n })\r\n .catch((error) => {\r\n if (error.status === 404) {\r\n setStatus({ ...status, notFound: true });\r\n setLoading(false);\r\n } else {\r\n setStatus({ ...status, serverError: true });\r\n setLoading(false);\r\n }\r\n });\r\n }\r\n\r\n useEffect(() => {\r\n loadUserProfile(currentUser.username);\r\n }, [currentUser]);\r\n\r\n useEffect(() => {\r\n userProfile && form.setFieldsValue(userProfile);\r\n\r\n return () => {\r\n form.resetFields();\r\n };\r\n }, [userProfile]);\r\n\r\n if (loading) {\r\n return <LoadingIndicator />;\r\n }\r\n\r\n if (status.notFound) {\r\n return <NotFound />;\r\n }\r\n\r\n if (status.serverError) {\r\n return <ServerError />;\r\n }\r\n\r\n const tabBarStyle = {\r\n textAlign: \"center\",\r\n };\r\n\r\n const onFinish = (values) => {\r\n // console.log(values);\r\n updateUserProfile(values)\r\n .then((res) => {\r\n notification.success({ message: \"Saved!\" });\r\n })\r\n .catch((error) => notification.error({ message: \"Error!\" }));\r\n };\r\n\r\n const onChangePasswd = (values) => {\r\n // console.log(values);\r\n const { oldPassword, newPassword } = values;\r\n updatePassword(newPassword, oldPassword)\r\n .then((res) => {\r\n notification.success({ message: \"Successfully!\" });\r\n })\r\n .catch((error) => {\r\n notification.error({ message: \"Error\" });\r\n });\r\n formChangePass.resetFields();\r\n };\r\n\r\n return (\r\n <div className=\"profile\">\r\n {props.isAuthenticated && userProfile ? (\r\n <div className=\"user-profile\">\r\n <div className=\"user-details\">\r\n <div className=\"user-avatar\">\r\n <Avatar\r\n className=\"user-avatar-circle\"\r\n style={{\r\n backgroundColor: getAvatarColor(userProfile.name),\r\n }}\r\n >\r\n {userProfile.name[0].toUpperCase()}\r\n </Avatar>\r\n </div>\r\n <div className=\"user-summary\">\r\n <div className=\"full-name\">{userProfile.name}</div>\r\n <div className=\"username\">@{userProfile.username}</div>\r\n </div>\r\n </div>\r\n <div>\r\n <Tabs\r\n defaultActiveKey=\"1\"\r\n animated={false}\r\n tabBarStyle={tabBarStyle}\r\n size=\"large\"\r\n className=\"profile-tabs\"\r\n centered\r\n >\r\n <TabPane tab={`Information`} key=\"1\">\r\n <div\r\n className=\"site-card-border-less-wrapper\"\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n }}\r\n >\r\n <Card title=\"User Information\" style={{ width: \"50%\" }}>\r\n <Form\r\n form={form}\r\n name=\"basic\"\r\n onFinish={onFinish}\r\n className=\"signup-form\"\r\n layout=\"vertical\"\r\n >\r\n <Form.Item name=\"id\" label=\"Id\" hidden>\r\n <Input disabled />\r\n </Form.Item>\r\n <Row gutter={16}>\r\n <Col span={12}>\r\n <Form.Item name=\"username\" label=\"Username\">\r\n <Input size=\"large\" placeholder=\"\" disabled />\r\n </Form.Item>\r\n </Col>\r\n <Col span={12}>\r\n <Form.Item name=\"name\" label=\"Full name\">\r\n <Input size=\"large\" placeholder=\"\" />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n <Form.Item name=\"email\" label=\"Email\">\r\n <Input size=\"large\" placeholder=\"\" />\r\n </Form.Item>\r\n <Form.Item>\r\n <Button\r\n type=\"primary\"\r\n htmlType=\"submit\"\r\n size=\"large\"\r\n className=\"signup-form-button\"\r\n >\r\n Save\r\n </Button>\r\n </Form.Item>\r\n </Form>\r\n </Card>\r\n </div>\r\n </TabPane>\r\n <TabPane tab={`Change Password`} key=\"2\">\r\n <div\r\n className=\"site-card-border-less-wrapper\"\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n }}\r\n >\r\n <Card title=\"Password\" style={{ width: \"50%\" }}>\r\n <Form\r\n form={formChangePass}\r\n name=\"changePass\"\r\n onFinish={onChangePasswd}\r\n className=\"change-password-form\"\r\n layout=\"vertical\"\r\n >\r\n <Row gutter={16}>\r\n <Col span={12}>\r\n <Form.Item\r\n name=\"oldPassword\"\r\n label=\"Old password\"\r\n hasFeedback\r\n rules={[\r\n {\r\n required: true,\r\n message: \"Please input your password!\",\r\n },\r\n ]}\r\n >\r\n <Input.Password\r\n size=\"large\"\r\n placeholder=\"\"\r\n iconRender={(visible) =>\r\n visible ? (\r\n <EyeTwoTone />\r\n ) : (\r\n <EyeInvisibleOutlined />\r\n )\r\n }\r\n />\r\n </Form.Item>\r\n </Col>\r\n <Col span={12}></Col>\r\n </Row>\r\n <Row gutter={16}>\r\n <Col span={12}>\r\n <Form.Item\r\n name=\"newPassword\"\r\n label=\"New password\"\r\n hasFeedback\r\n rules={[\r\n {\r\n required: true,\r\n // message: \"Please input your new password!\",\r\n min: PASSWORD_MIN_LENGTH,\r\n max: PASSWORD_MAX_LENGTH,\r\n },\r\n ]}\r\n >\r\n <Input.Password\r\n size=\"large\"\r\n placeholder=\"\"\r\n iconRender={(visible) =>\r\n visible ? (\r\n <EyeTwoTone />\r\n ) : (\r\n <EyeInvisibleOutlined />\r\n )\r\n }\r\n />\r\n </Form.Item>\r\n </Col>\r\n <Col span={12}>\r\n <Form.Item\r\n name=\"confirmNewPassword\"\r\n label=\"Confirm new password\"\r\n dependencies={[\"newPassword\"]}\r\n hasFeedback\r\n rules={[\r\n {\r\n required: true,\r\n message: \"Please confirm your new password!\",\r\n },\r\n ({ getFieldValue }) => ({\r\n validator(_, value) {\r\n if (\r\n !value ||\r\n getFieldValue(\"newPassword\") === value\r\n ) {\r\n return Promise.resolve();\r\n }\r\n return Promise.reject(\r\n new Error(\r\n \"The two passwords that you entered do not match!\"\r\n )\r\n );\r\n },\r\n }),\r\n ]}\r\n >\r\n <Input.Password\r\n size=\"large\"\r\n placeholder=\"\"\r\n iconRender={(visible) =>\r\n visible ? (\r\n <EyeTwoTone />\r\n ) : (\r\n <EyeInvisibleOutlined />\r\n )\r\n }\r\n />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n <Form.Item>\r\n <Button\r\n type=\"primary\"\r\n htmlType=\"submit\"\r\n size=\"large\"\r\n className=\"signup-form-button\"\r\n >\r\n Save\r\n </Button>\r\n </Form.Item>\r\n </Form>\r\n </Card>\r\n </div>\r\n </TabPane>\r\n </Tabs>\r\n </div>\r\n </div>\r\n ) : null}\r\n </div>\r\n );\r\n};\r\n\r\nexport default Profile;\r\n","C:\\ReactJS\\uet-project\\src\\util\\QuestionType.js",[],["286","287"],"C:\\ReactJS\\uet-project\\src\\pages\\user\\login\\Login.js",[],"C:\\ReactJS\\uet-project\\src\\util\\Colors.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\user\\signup\\Signup.js",[],"C:\\ReactJS\\uet-project\\src\\util\\Role.js",[],"C:\\ReactJS\\uet-project\\src\\util\\ImageURI.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\AnswerdCount.js",["288","289"],"import React, { useState, useEffect } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { Row, Col, message, Typography } from \"antd\";\r\nimport { WS_BASE_URL } from \"constants/index\";\r\nimport SockJS from \"sockjs-client\";\r\nimport Stomp from \"stompjs\";\r\nimport styled from \"styled-components\";\r\n\r\nAnswerdCount.propTypes = {};\r\n\r\nvar stompClient = null;\r\n\r\nconst { Title } = Typography;\r\n\r\nconst CenterDiv = styled.div`\r\n height: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n`;\r\n\r\nfunction AnswerdCount(props) {\r\n const { game } = props;\r\n const [answerdCount, setAnswerdCount] = useState(0);\r\n\r\n function connect() {\r\n let serverUrl = WS_BASE_URL;\r\n let ws = new SockJS(serverUrl);\r\n stompClient = Stomp.over(ws);\r\n\r\n stompClient.connect({}, onConnected, onError);\r\n }\r\n\r\n function disconnect() {\r\n if (stompClient !== null) stompClient.disconnect();\r\n }\r\n\r\n function onConnected() {\r\n stompClient.subscribe(`/quiz/${game.pin}/hostListener`, onMessageReceived);\r\n }\r\n\r\n function onError(error) {\r\n message.error(\r\n \"Could not connect to server. Please refresh this page to try again!\"\r\n );\r\n }\r\n\r\n function onMessageReceived(payload) {\r\n var receivedMessage = JSON.parse(payload.body);\r\n\r\n if (receivedMessage.type === \"INTERACT\") {\r\n setAnswerdCount((answerdCount) => answerdCount + 1);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n connect();\r\n\r\n return () => {\r\n disconnect();\r\n };\r\n }, []);\r\n\r\n return (\r\n <div>\r\n <Row>\r\n <Col span={24}>\r\n <CenterDiv>\r\n <Title level={4}>Answered</Title>\r\n </CenterDiv>\r\n </Col>\r\n <Col span={24}>\r\n <CenterDiv>\r\n <Title level={2}>{answerdCount}</Title>\r\n </CenterDiv>\r\n </Col>\r\n </Row>\r\n </div>\r\n );\r\n}\r\n\r\nexport default AnswerdCount;\r\n","C:\\ReactJS\\uet-project\\src\\common\\ServerError.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\report\\index.jsx",[],"C:\\ReactJS\\uet-project\\src\\pages\\report\\ReportList.js",["290"],"import React, { useEffect, useState } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { ExclamationCircleOutlined } from \"@ant-design/icons\";\r\nimport { Button, Space, Table, Modal, notification, Tag, message } from \"antd\";\r\nimport {\r\n countGames,\r\n getAllGames,\r\n deleteGame,\r\n deleteGames,\r\n} from \"util/APIUtils\";\r\n\r\nvar moment = require(\"moment\");\r\n\r\nReportList.propTypes = {};\r\n\r\nfunction ReportList(props) {\r\n const [data, setData] = useState([]);\r\n const [pagination, setPagination] = useState({\r\n current: 1,\r\n pageSize: 5,\r\n total: 0,\r\n });\r\n const [loading, setLoading] = useState(false);\r\n\r\n const [operationloading, setOperationLoading] = useState(false);\r\n const [selectedRowKeys, setSelectedRowKeys] = useState([]);\r\n\r\n const columns = [\r\n {\r\n title: \"Title\",\r\n dataIndex: \"title\",\r\n sorter: {\r\n compare: (a, b) => a.title.localeCompare(b.title),\r\n multiple: 3,\r\n },\r\n },\r\n {\r\n title: \"Status\",\r\n dataIndex: \"gameStatus\",\r\n render: (status) => {\r\n switch (status) {\r\n case \"CREATED\":\r\n return <Tag color=\"blue\">CREATED</Tag>;\r\n\r\n case \"GOING_ON\":\r\n return <Tag color=\"gold\">GOING ON</Tag>;\r\n\r\n case \"FINISHED\":\r\n return <Tag color=\"green\">FINISHED</Tag>;\r\n\r\n default:\r\n break;\r\n }\r\n return \"\";\r\n },\r\n },\r\n {\r\n title: \"Created\",\r\n dataIndex: \"createdAt\",\r\n sorter: {\r\n compare: (a, b) => a.createdAt - b.createdAt,\r\n multiple: 2,\r\n },\r\n render: (date) => moment(date).fromNow(),\r\n },\r\n {\r\n title: \"Modified\",\r\n dataIndex: \"modifiedAt\",\r\n sorter: {\r\n compare: (a, b) => a.modifiedAt - b.modifiedAt,\r\n multiple: 1,\r\n },\r\n render: (date) => moment(date).fromNow(),\r\n },\r\n {\r\n title: \"Game mode\",\r\n dataIndex: \"gameType\",\r\n },\r\n {\r\n title: \"No. of players\",\r\n dataIndex: \"numberOfPlayers\",\r\n sorter: {\r\n compare: (a, b) => a.numberOfPlayers - b.numberOfPlayers,\r\n multiple: 4,\r\n },\r\n },\r\n {\r\n title: \"Action\",\r\n key: \"action\",\r\n render: (text, record) => (\r\n <Space size=\"middle\">\r\n <Button type=\"primary\" href={`/play?quizId=${record.presentationId}`}>\r\n Play again\r\n </Button>\r\n <Button href={`/reports/${record.id}`}>Open</Button>\r\n <Button danger onClick={() => confirm(record.id)}>\r\n Delete\r\n </Button>\r\n </Space>\r\n ),\r\n },\r\n ];\r\n\r\n function confirm(gameId) {\r\n Modal.confirm({\r\n title: \"Delete game\",\r\n icon: <ExclamationCircleOutlined />,\r\n content:\r\n \"Are you sure you want to delete this game? This action can’t be undone.\",\r\n okText: \"Delete\",\r\n cancelText: \"Cancel\",\r\n onOk() {\r\n deleteGame(gameId)\r\n .then((response) => {\r\n notification.success({\r\n message: \"Deleted\",\r\n description: \"Deleted game\",\r\n });\r\n setPagination({ ...pagination, total: pagination.total - 1 });\r\n })\r\n .catch((error) =>\r\n notification.error({\r\n message: \"Error\",\r\n description: \"An error occurred\",\r\n })\r\n );\r\n },\r\n onCancel() {\r\n // console.log(\"Cancel\");\r\n },\r\n });\r\n }\r\n\r\n useEffect(() => {\r\n let mounted = true;\r\n\r\n setLoading(true);\r\n countGames().then((response) => {\r\n if (mounted) setPagination((p) => ({ ...p, total: response }));\r\n });\r\n setLoading(false);\r\n\r\n return () => (mounted = false);\r\n }, []);\r\n\r\n useEffect(() => {\r\n let mounted = true;\r\n setLoading(true);\r\n\r\n getAllGames(pagination.current, pagination.pageSize).then((response) => {\r\n if (mounted) {\r\n setData(response);\r\n setLoading(false);\r\n }\r\n });\r\n\r\n return () => (mounted = false);\r\n }, [pagination]);\r\n\r\n const handleTableChange = (pagination, filters, sorter) => {\r\n setPagination(pagination);\r\n };\r\n\r\n const rowSelection = {\r\n selectedRowKeys,\r\n onChange: (selectedRowKeys, selectedRows) => {\r\n setSelectedRowKeys(selectedRowKeys);\r\n },\r\n getCheckboxProps: (record) => ({\r\n name: record.id,\r\n }),\r\n };\r\n\r\n const hasSelected = selectedRowKeys.length > 0;\r\n\r\n const deleteSelectedRows = () => {\r\n setOperationLoading(true);\r\n\r\n deleteGames(selectedRowKeys)\r\n .then((reponse) => {\r\n message.success(\"Deleted!\");\r\n setPagination({\r\n ...pagination,\r\n total: pagination.total - selectedRowKeys.length,\r\n });\r\n setSelectedRowKeys([]);\r\n })\r\n .catch((error) => message.error(\"Error\"));\r\n\r\n setOperationLoading(false);\r\n };\r\n\r\n return (\r\n <div>\r\n {hasSelected ? (\r\n <div style={{ marginBottom: 16 }}>\r\n <Button\r\n type=\"primary\"\r\n danger\r\n onClick={() => deleteSelectedRows()}\r\n loading={operationloading}\r\n >\r\n Delete\r\n </Button>\r\n <span style={{ marginLeft: 8 }}>\r\n {`Selected ${selectedRowKeys.length} items`}\r\n </span>\r\n </div>\r\n ) : null}\r\n <Table\r\n rowSelection={{ type: \"checkbox\", ...rowSelection }}\r\n rowKey=\"id\"\r\n columns={columns}\r\n dataSource={data}\r\n loading={loading}\r\n pagination={pagination}\r\n onChange={handleTableChange}\r\n />\r\n </div>\r\n );\r\n}\r\n\r\nexport default ReportList;\r\n","C:\\ReactJS\\uet-project\\src\\pages\\report\\ReportDetail.js",["291","292"],"import React, { useState, useEffect } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport {\r\n Col,\r\n message,\r\n Row,\r\n Layout,\r\n PageHeader,\r\n Menu,\r\n Dropdown,\r\n Button,\r\n Tag,\r\n Tabs,\r\n Typography,\r\n List,\r\n Table,\r\n Card,\r\n Statistic,\r\n Progress,\r\n} from \"antd\";\r\nimport { useParams } from \"react-router-dom\";\r\nimport { getGame } from \"util/APIUtils\";\r\nimport LoadingIndicator from \"common/LoadingIndicator\";\r\nimport {\r\n DeleteOutlined,\r\n DownloadOutlined,\r\n EllipsisOutlined,\r\n LikeOutlined,\r\n PrinterOutlined,\r\n} from \"@ant-design/icons\";\r\nimport \"./style.css\";\r\n\r\nvar moment = require(\"moment\");\r\n\r\nconst { TabPane } = Tabs;\r\n\r\nfunction callback(key) {\r\n console.log(key);\r\n}\r\n\r\nconst columns = [\r\n {\r\n title: \"Nickname\",\r\n dataIndex: \"nickname\",\r\n sorter: {\r\n compare: (a, b) => a.nickname.localeCompare(b.nickname),\r\n multiple: 1,\r\n },\r\n },\r\n {\r\n title: \"Rank\",\r\n dataIndex: \"rank\",\r\n sorter: {\r\n compare: (a, b) => a.rank - b.rank,\r\n multiple: 2,\r\n },\r\n },\r\n {\r\n title: \"Correct Answers\",\r\n dataIndex: \"correctAnswers\",\r\n sorter: {\r\n compare: (a, b) => a.correctAnswers - b.correctAnswers,\r\n multiple: 3,\r\n },\r\n },\r\n {\r\n title: \"Unanswered\",\r\n dataIndex: \"unanswered\",\r\n sorter: {\r\n compare: (a, b) => a.unanswered - b.unanswered,\r\n multiple: 4,\r\n },\r\n },\r\n {\r\n title: \"Points\",\r\n dataIndex: \"point\",\r\n sorter: {\r\n compare: (a, b) => a.point - b.point,\r\n multiple: 5,\r\n },\r\n },\r\n];\r\n\r\nconst menu = (\r\n <Menu>\r\n <Menu.Item>\r\n <Button type=\"text\">\r\n <DownloadOutlined />\r\n Download report\r\n </Button>\r\n </Menu.Item>\r\n <Menu.Item>\r\n <Button type=\"text\">\r\n <PrinterOutlined /> Print\r\n </Button>\r\n </Menu.Item>\r\n <Menu.Item>\r\n <Button type=\"text\" danger>\r\n <DeleteOutlined /> Delete\r\n </Button>\r\n </Menu.Item>\r\n </Menu>\r\n);\r\n\r\nconst DropdownMenu = () => (\r\n <Dropdown key=\"more\" overlay={menu}>\r\n <Button\r\n style={{\r\n border: \"none\",\r\n padding: 0,\r\n }}\r\n >\r\n <EllipsisOutlined\r\n style={{\r\n fontSize: 20,\r\n verticalAlign: \"top\",\r\n }}\r\n />\r\n </Button>\r\n </Dropdown>\r\n);\r\n\r\nconst routes = [\r\n {\r\n path: \"/\",\r\n breadcrumbName: \"Home\",\r\n },\r\n {\r\n path: \"/reports\",\r\n breadcrumbName: \"Reports\",\r\n },\r\n];\r\n\r\nconst Content = ({ children, extraContent }) => (\r\n <Row>\r\n <div style={{ flex: 1, marginRight: 15 }}>{children}</div>\r\n <div className=\"image\">{extraContent}</div>\r\n </Row>\r\n);\r\n\r\nReportDetail.propTypes = {};\r\n\r\nfunction ReportDetail(props) {\r\n const [loading, setLoading] = useState(false);\r\n const { gameId } = useParams();\r\n const [game, setGame] = useState({});\r\n\r\n useEffect(() => {\r\n let mounted = true;\r\n getGame(gameId)\r\n .then((response) => {\r\n if (mounted) {\r\n console.log(response);\r\n setGame(response);\r\n }\r\n })\r\n .catch((error) => message.error(\"Error loading report\"));\r\n\r\n return () => (mounted = false);\r\n }, [gameId]);\r\n\r\n let myTag;\r\n\r\n switch (game.gameStatus) {\r\n case \"CREATED\":\r\n myTag = <Tag color=\"blue\">CREATED</Tag>;\r\n break;\r\n case \"GOING_ON\":\r\n myTag = <Tag color=\"gold\">GOING ON</Tag>;\r\n break;\r\n case \"FINISHED\":\r\n myTag = <Tag color=\"green\">FINISHED</Tag>;\r\n break;\r\n default:\r\n myTag = <Tag color=\"blue\">CREATED</Tag>;\r\n }\r\n\r\n return loading ? (\r\n <LoadingIndicator />\r\n ) : (\r\n <Layout>\r\n <PageHeader\r\n onBack={() => window.history.back()}\r\n title={game.title ? game.title : \"No title\"}\r\n className=\"site-page-header\"\r\n tags={myTag}\r\n extra={[\r\n <Button key=\"1\" type=\"primary\" href={`/play?quizId=${gameId}`}>\r\n Play again\r\n </Button>,\r\n <DropdownMenu key=\"more\" />,\r\n ]}\r\n breadcrumb={{ routes }}\r\n >\r\n <Content\r\n extraContent={\r\n <List\r\n dataSource={[\r\n { label: \"Type\", content: game.gameType },\r\n {\r\n label: \"Started\",\r\n content: moment(game.createdAt).format(\r\n \"MMM D YYYY, h:mm:ss a\"\r\n ),\r\n },\r\n {\r\n label: \"Ended\",\r\n content: moment(game.modifiedAt).format(\r\n \"MMM D YYYY, h:mm:ss a\"\r\n ),\r\n },\r\n { label: \"Hosted by\", content: game.hostedBy },\r\n ]}\r\n renderItem={(item) => (\r\n <List.Item>\r\n <Typography.Text style={{ fontWeight: \"bold\" }}>\r\n {item.label + \": \"}\r\n </Typography.Text>\r\n {item.content}\r\n </List.Item>\r\n )}\r\n />\r\n }\r\n >\r\n <Card>\r\n <Tabs defaultActiveKey=\"1\" onChange={callback}>\r\n <TabPane tab=\"Summary\" key=\"1\">\r\n <Row gutter={[16, 16]}>\r\n <Col span={16}>\r\n <Card>\r\n <p>Number of players: {game.numberOfPlayers}</p>\r\n </Card>\r\n </Col>\r\n <Col span={8}>\r\n <Card>\r\n <Progress type=\"circle\" percent={75} />\r\n </Card>\r\n </Col>\r\n </Row>\r\n </TabPane>\r\n <TabPane tab=\"Players\" key=\"2\">\r\n <Table\r\n columns={columns}\r\n dataSource={game.players}\r\n loading={loading}\r\n />\r\n </TabPane>\r\n <TabPane tab=\"Questions\" key=\"3\">\r\n Diffrencult\r\n </TabPane>\r\n <TabPane tab=\"Feedback\" key=\"4\">\r\n <Statistic\r\n title=\"Feedback\"\r\n value={1128}\r\n prefix={<LikeOutlined />}\r\n />\r\n </TabPane>\r\n </Tabs>\r\n </Card>\r\n </Content>\r\n </PageHeader>\r\n </Layout>\r\n );\r\n}\r\n\r\nexport default ReportDetail;\r\n","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Pin\\PinWithURL.js",["293"],"import { useEffect } from \"react\";\r\nimport { useHistory, useRouteMatch, useParams } from \"react-router-dom\";\r\nimport { checkExistByPIN } from \"util/APIUtils\";\r\n\r\nPinWithURL.propTypes = {};\r\n\r\nfunction PinWithURL(props) {\r\n let { pinCode } = useParams();\r\n const history = useHistory();\r\n const match = useRouteMatch();\r\n useEffect(() => {\r\n console.log(match);\r\n if (pinCode) {\r\n checkExistByPIN(pinCode)\r\n .then((res) => {\r\n let myRootPath = match.url.substr(0, match.url.indexOf(\"/pin\"));\r\n\r\n console.log(myRootPath);\r\n history.push(`${myRootPath}/name`, {\r\n rootPath: myRootPath,\r\n pin: pinCode,\r\n });\r\n })\r\n .catch((error) => {\r\n alert(\"An error has occurred!\");\r\n });\r\n }\r\n }, [pinCode]);\r\n\r\n return <></>;\r\n}\r\n\r\nexport default PinWithURL;\r\n",{"ruleId":"294","severity":1,"message":"295","line":21,"column":28,"nodeType":"296","messageId":"297","endLine":21,"endColumn":36},{"ruleId":"298","replacedBy":"299"},{"ruleId":"300","replacedBy":"301"},{"ruleId":"294","severity":1,"message":"302","line":1,"column":10,"nodeType":"296","messageId":"297","endLine":1,"endColumn":24},{"ruleId":"294","severity":1,"message":"303","line":5,"column":3,"nodeType":"296","messageId":"297","endLine":5,"endColumn":16},{"ruleId":"298","replacedBy":"304"},{"ruleId":"300","replacedBy":"305"},{"ruleId":"294","severity":1,"message":"306","line":12,"column":26,"nodeType":"296","messageId":"297","endLine":12,"endColumn":38},{"ruleId":"294","severity":1,"message":"307","line":15,"column":8,"nodeType":"296","messageId":"297","endLine":15,"endColumn":20},{"ruleId":"294","severity":1,"message":"308","line":1,"column":10,"nodeType":"296","messageId":"297","endLine":1,"endColumn":25},{"ruleId":"294","severity":1,"message":"309","line":2,"column":8,"nodeType":"296","messageId":"297","endLine":2,"endColumn":17},{"ruleId":"298","replacedBy":"310"},{"ruleId":"300","replacedBy":"311"},{"ruleId":"298","replacedBy":"312"},{"ruleId":"300","replacedBy":"313"},{"ruleId":"294","severity":1,"message":"307","line":19,"column":8,"nodeType":"296","messageId":"297","endLine":19,"endColumn":20},{"ruleId":"298","replacedBy":"314"},{"ruleId":"300","replacedBy":"315"},{"ruleId":"294","severity":1,"message":"316","line":63,"column":18,"nodeType":"296","messageId":"297","endLine":63,"endColumn":23},{"ruleId":"317","severity":1,"message":"318","line":141,"column":6,"nodeType":"319","endLine":141,"endColumn":8,"suggestions":"320"},{"ruleId":"317","severity":1,"message":"321","line":151,"column":6,"nodeType":"319","endLine":151,"endColumn":12,"suggestions":"322"},{"ruleId":"294","severity":1,"message":"323","line":1,"column":18,"nodeType":"296","messageId":"297","endLine":1,"endColumn":25},{"ruleId":"298","replacedBy":"324"},{"ruleId":"300","replacedBy":"325"},{"ruleId":"294","severity":1,"message":"326","line":106,"column":12,"nodeType":"296","messageId":"297","endLine":106,"endColumn":22},{"ruleId":"317","severity":1,"message":"327","line":165,"column":6,"nodeType":"319","endLine":165,"endColumn":8,"suggestions":"328"},{"ruleId":"317","severity":1,"message":"329","line":212,"column":6,"nodeType":"319","endLine":212,"endColumn":16,"suggestions":"330"},{"ruleId":"317","severity":1,"message":"331","line":76,"column":6,"nodeType":"319","endLine":76,"endColumn":8,"suggestions":"332"},{"ruleId":"294","severity":1,"message":"309","line":2,"column":8,"nodeType":"296","messageId":"297","endLine":2,"endColumn":17},{"ruleId":"294","severity":1,"message":"333","line":3,"column":17,"nodeType":"296","messageId":"297","endLine":3,"endColumn":24},{"ruleId":"298","replacedBy":"334"},{"ruleId":"300","replacedBy":"335"},{"ruleId":"317","severity":1,"message":"336","line":24,"column":6,"nodeType":"319","endLine":24,"endColumn":16,"suggestions":"337"},{"ruleId":"298","replacedBy":"338"},{"ruleId":"300","replacedBy":"339"},{"ruleId":"317","severity":1,"message":"340","line":22,"column":6,"nodeType":"319","endLine":22,"endColumn":16,"suggestions":"341"},{"ruleId":"298","replacedBy":"342"},{"ruleId":"300","replacedBy":"343"},{"ruleId":"294","severity":1,"message":"344","line":4,"column":10,"nodeType":"296","messageId":"297","endLine":4,"endColumn":23},{"ruleId":"294","severity":1,"message":"309","line":2,"column":8,"nodeType":"296","messageId":"297","endLine":2,"endColumn":17},{"ruleId":"317","severity":1,"message":"345","line":124,"column":6,"nodeType":"319","endLine":124,"endColumn":8,"suggestions":"346"},{"ruleId":"317","severity":1,"message":"347","line":172,"column":6,"nodeType":"319","endLine":172,"endColumn":8,"suggestions":"348"},{"ruleId":"294","severity":1,"message":"349","line":2,"column":34,"nodeType":"296","messageId":"297","endLine":2,"endColumn":39},{"ruleId":"317","severity":1,"message":"350","line":61,"column":6,"nodeType":"319","endLine":61,"endColumn":19,"suggestions":"351"},{"ruleId":"317","severity":1,"message":"352","line":69,"column":6,"nodeType":"319","endLine":69,"endColumn":19,"suggestions":"353"},{"ruleId":"298","replacedBy":"354"},{"ruleId":"300","replacedBy":"355"},{"ruleId":"294","severity":1,"message":"309","line":2,"column":8,"nodeType":"296","messageId":"297","endLine":2,"endColumn":17},{"ruleId":"317","severity":1,"message":"347","line":62,"column":6,"nodeType":"319","endLine":62,"endColumn":8,"suggestions":"356"},{"ruleId":"294","severity":1,"message":"309","line":2,"column":8,"nodeType":"296","messageId":"297","endLine":2,"endColumn":17},{"ruleId":"294","severity":1,"message":"309","line":2,"column":8,"nodeType":"296","messageId":"297","endLine":2,"endColumn":17},{"ruleId":"294","severity":1,"message":"357","line":144,"column":19,"nodeType":"296","messageId":"297","endLine":144,"endColumn":29},{"ruleId":"317","severity":1,"message":"358","line":28,"column":6,"nodeType":"319","endLine":28,"endColumn":15,"suggestions":"359"},"no-unused-vars","'useState' is defined but never used.","Identifier","unusedVar","no-native-reassign",["360"],"no-negated-in-lhs",["361"],"'PictureTwoTone' is defined but never used.","'REFRESH_TOKEN' is defined but never used.",["360"],["361"],"'refreshToken' is defined but never used.","'PrivateRoute' is defined but never used.","'LoadingOutlined' is defined but never used.","'PropTypes' is defined but never used.",["360"],["361"],["360"],["361"],["360"],["361"],"'sound' is assigned a value but never used.","react-hooks/exhaustive-deps","React Hook useEffect has missing dependencies: 'connect' and 'stompClient'. Either include them or remove the dependency array.","ArrayExpression",["362"],"React Hook useEffect has a missing dependency: 'stop'. Either include it or remove the dependency array.",["363"],"'Divider' is defined but never used.",["360"],["361"],"'disconnect' is defined but never used.","React Hook useEffect has missing dependencies: 'connect', 'game.hostedBy', 'game.pin', and 'presentationId'. Either include them or remove the dependency array.",["364"],"React Hook useEffect has missing dependencies: 'exposedData', 'playCountdown', 'playLoopMusic', 'sendQuestion', 'sendSkip', and 'stopMusic'. Either include them or remove the dependency array.",["365"],"React Hook useEffect has a missing dependency: 'stompClient'. Either include it or remove the dependency array.",["366"],"'Tooltip' is defined but never used.",["360"],["361"],"React Hook useEffect has a missing dependency: 'totalSecond'. Either include it or remove the dependency array.",["367"],["360"],["361"],"React Hook useEffect has a missing dependency: 'props.waitBeforeShow'. Either include it or remove the dependency array.",["368"],["360"],["361"],"'ThemeProvider' is defined but never used.","React Hook useCallback has missing dependencies: 'history' and 'state.nickname'. Either include them or remove the dependency array.",["369"],"React Hook useEffect has a missing dependency: 'connect'. Either include it or remove the dependency array.",["370"],"'Input' is defined but never used.","React Hook useEffect has a missing dependency: 'loadUserProfile'. Either include it or remove the dependency array.",["371"],"React Hook useEffect has a missing dependency: 'form'. Either include it or remove the dependency array.",["372"],["360"],["361"],["373"],"'setLoading' is assigned a value but never used.","React Hook useEffect has missing dependencies: 'history' and 'match'. Either include them or remove the dependency array.",["374"],"no-global-assign","no-unsafe-negation",{"desc":"375","fix":"376"},{"desc":"377","fix":"378"},{"desc":"379","fix":"380"},{"desc":"381","fix":"382"},{"desc":"383","fix":"384"},{"desc":"385","fix":"386"},{"desc":"387","fix":"388"},{"desc":"389","fix":"390"},{"desc":"391","fix":"392"},{"desc":"393","fix":"394"},{"desc":"395","fix":"396"},{"desc":"391","fix":"397"},{"desc":"398","fix":"399"},"Update the dependencies array to be: [connect, stompClient]",{"range":"400","text":"401"},"Update the dependencies array to be: [play, stop]",{"range":"402","text":"403"},"Update the dependencies array to be: [connect, game.hostedBy, game.pin, presentationId]",{"range":"404","text":"405"},"Update the dependencies array to be: [exposedData, playCountdown, playLoopMusic, question, sendQuestion, sendSkip, stopMusic]",{"range":"406","text":"407"},"Update the dependencies array to be: [stompClient]",{"range":"408","text":"409"},"Update the dependencies array to be: [props.id, totalSecond]",{"range":"410","text":"411"},"Update the dependencies array to be: [props.id, props.waitBeforeShow]",{"range":"412","text":"413"},"Update the dependencies array to be: [history, state.nickname]",{"range":"414","text":"415"},"Update the dependencies array to be: [connect]",{"range":"416","text":"417"},"Update the dependencies array to be: [currentUser, loadUserProfile]",{"range":"418","text":"419"},"Update the dependencies array to be: [form, userProfile]",{"range":"420","text":"421"},{"range":"422","text":"417"},"Update the dependencies array to be: [history, match, pinCode]",{"range":"423","text":"424"},[3650,3652],"[connect, stompClient]",[3811,3817],"[play, stop]",[4461,4463],"[connect, game.hostedBy, game.pin, presentationId]",[5641,5651],"[exposedData, playCountdown, playLoopMusic, question, sendQuestion, sendSkip, stopMusic]",[1815,1817],"[stompClient]",[630,640],"[props.id, totalSecond]",[503,513],"[props.id, props.waitBeforeShow]",[3362,3364],"[history, state.nickname]",[4615,4617],"[connect]",[1587,1600],"[currentUser, loadUserProfile]",[1743,1756],"[form, userProfile]",[1486,1488],[796,805],"[history, match, pinCode]"]
[{"C:\\ReactJS\\uet-project\\src\\pages\\presentation\\EditPresentation.js":"1","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\SlideDetail.js":"2","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\SingleSlide.js":"3","C:\\ReactJS\\uet-project\\src\\util\\APIUtils.js":"4","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\slideSlice.js":"5","C:\\ReactJS\\uet-project\\src\\index.js":"6","C:\\ReactJS\\uet-project\\src\\app\\App.js":"7","C:\\ReactJS\\uet-project\\src\\common\\LoadingIndicator.js":"8","C:\\ReactJS\\uet-project\\src\\common\\NotFound.js":"9","C:\\ReactJS\\uet-project\\src\\common\\PublicRoute.js":"10","C:\\ReactJS\\uet-project\\src\\common\\PrivateRoute.js":"11","C:\\ReactJS\\uet-project\\src\\common\\AppHeader.js":"12","C:\\ReactJS\\uet-project\\src\\pages\\landing\\Home.js":"13","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\Presentations.js":"14","C:\\ReactJS\\uet-project\\src\\store\\store.js":"15","C:\\ReactJS\\uet-project\\src\\constants\\index.js":"16","C:\\ReactJS\\uet-project\\src\\common\\AppSider.js":"17","C:\\ReactJS\\uet-project\\src\\pages\\question\\QuestionList.js":"18","C:\\ReactJS\\uet-project\\src\\util\\Helpers.js":"19","C:\\ReactJS\\uet-project\\src\\pages\\question\\Questions.js":"20","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\PresentationList.js":"21","C:\\ReactJS\\uet-project\\src\\util\\score.js":"22","C:\\ReactJS\\uet-project\\src\\pages\\question\\EditQuestion.js":"23","C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\Lobby\\index.jsx":"24","C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\Main\\index.jsx":"25","C:\\ReactJS\\uet-project\\src\\pages\\Host\\index.jsx":"26","C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\InGame\\index.jsx":"27","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\index.jsx":"28","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Pin\\index.jsx":"29","C:\\ReactJS\\uet-project\\src\\reportWebVitals.js":"30","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Name\\index.jsx":"31","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\components\\InputPIN.jsx":"32","C:\\ReactJS\\uet-project\\src\\pages\\Host\\hostSlice.js":"33","C:\\ReactJS\\uet-project\\src\\pages\\Host\\ProgressBar.js":"34","C:\\ReactJS\\uet-project\\src\\pages\\Host\\Delayed.js":"35","C:\\ReactJS\\uet-project\\src\\pages\\Host\\CountdownTimer.js":"36","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\QuestionBankDrawer.js":"37","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Instruction\\index.jsx":"38","C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\ScoreBoard\\index.js":"39","C:\\ReactJS\\uet-project\\src\\pages\\question\\PicturesWall.js":"40","C:\\ReactJS\\uet-project\\src\\pages\\user\\profile\\Profile.js":"41","C:\\ReactJS\\uet-project\\src\\util\\QuestionType.js":"42","C:\\ReactJS\\uet-project\\src\\pages\\user\\login\\Login.js":"43","C:\\ReactJS\\uet-project\\src\\util\\Colors.js":"44","C:\\ReactJS\\uet-project\\src\\pages\\user\\signup\\Signup.js":"45","C:\\ReactJS\\uet-project\\src\\util\\Role.js":"46","C:\\ReactJS\\uet-project\\src\\util\\ImageURI.js":"47","C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\AnswerdCount.js":"48","C:\\ReactJS\\uet-project\\src\\common\\ServerError.js":"49","C:\\ReactJS\\uet-project\\src\\pages\\report\\index.jsx":"50","C:\\ReactJS\\uet-project\\src\\pages\\report\\ReportList.js":"51","C:\\ReactJS\\uet-project\\src\\pages\\report\\ReportDetail.js":"52","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Pin\\PinWithURL.js":"53"},{"size":13592,"mtime":1622732542270,"results":"54","hashOfConfig":"55"},{"size":12740,"mtime":1619170794603,"results":"56","hashOfConfig":"55"},{"size":1922,"mtime":1622746882131,"results":"57","hashOfConfig":"55"},{"size":6764,"mtime":1622306475034,"results":"58","hashOfConfig":"55"},{"size":1673,"mtime":1616487245976,"results":"59","hashOfConfig":"55"},{"size":805,"mtime":1616083517546,"results":"60","hashOfConfig":"55"},{"size":5865,"mtime":1622302991693,"results":"61","hashOfConfig":"55"},{"size":265,"mtime":1618585522147,"results":"62","hashOfConfig":"55"},{"size":427,"mtime":1614135413647,"results":"63","hashOfConfig":"55"},{"size":416,"mtime":1613854056924,"results":"64","hashOfConfig":"55"},{"size":481,"mtime":1618587949298,"results":"65","hashOfConfig":"55"},{"size":3061,"mtime":1622743450665,"results":"66","hashOfConfig":"55"},{"size":771,"mtime":1621326125332,"results":"67","hashOfConfig":"55"},{"size":4224,"mtime":1622746882076,"results":"68","hashOfConfig":"55"},{"size":282,"mtime":1616070090624,"results":"69","hashOfConfig":"55"},{"size":737,"mtime":1622286658148,"results":"70","hashOfConfig":"55"},{"size":1612,"mtime":1618904634582,"results":"71","hashOfConfig":"55"},{"size":5384,"mtime":1622746882195,"results":"72","hashOfConfig":"55"},{"size":972,"mtime":1613638260326,"results":"73","hashOfConfig":"55"},{"size":5731,"mtime":1622746882261,"results":"74","hashOfConfig":"55"},{"size":5026,"mtime":1621328477578,"results":"75","hashOfConfig":"55"},{"size":91,"mtime":1613900959638,"results":"76","hashOfConfig":"55"},{"size":15466,"mtime":1618839750884,"results":"77","hashOfConfig":"55"},{"size":8017,"mtime":1622372735862,"results":"78","hashOfConfig":"55"},{"size":4097,"mtime":1619084551439,"results":"79","hashOfConfig":"55"},{"size":636,"mtime":1615828422397,"results":"80","hashOfConfig":"55"},{"size":15585,"mtime":1622743463099,"results":"81","hashOfConfig":"55"},{"size":786,"mtime":1622136008822,"results":"82","hashOfConfig":"55"},{"size":2721,"mtime":1622370055149,"results":"83","hashOfConfig":"55"},{"size":362,"mtime":1606210735677,"results":"84","hashOfConfig":"55"},{"size":2679,"mtime":1622748503440,"results":"85","hashOfConfig":"55"},{"size":572,"mtime":1614909221751,"results":"86","hashOfConfig":"55"},{"size":1081,"mtime":1617246113456,"results":"87","hashOfConfig":"55"},{"size":888,"mtime":1616856572516,"results":"88","hashOfConfig":"55"},{"size":592,"mtime":1617242627760,"results":"89","hashOfConfig":"55"},{"size":913,"mtime":1615982344537,"results":"90","hashOfConfig":"55"},{"size":4316,"mtime":1622746882087,"results":"91","hashOfConfig":"55"},{"size":10390,"mtime":1622748777719,"results":"92","hashOfConfig":"55"},{"size":925,"mtime":1617212230385,"results":"93","hashOfConfig":"55"},{"size":3982,"mtime":1619164607731,"results":"94","hashOfConfig":"55"},{"size":11320,"mtime":1622374503491,"results":"95","hashOfConfig":"55"},{"size":650,"mtime":1622265247826,"results":"96","hashOfConfig":"55"},{"size":2886,"mtime":1622286759459,"results":"97","hashOfConfig":"55"},{"size":613,"mtime":1617896231666,"results":"98","hashOfConfig":"55"},{"size":11577,"mtime":1617900310769,"results":"99","hashOfConfig":"55"},{"size":131,"mtime":1617898061377,"results":"100","hashOfConfig":"55"},{"size":144,"mtime":1619122537495,"results":"101","hashOfConfig":"55"},{"size":1873,"mtime":1618850809795,"results":"102","hashOfConfig":"55"},{"size":418,"mtime":1614135403113,"results":"103","hashOfConfig":"55"},{"size":1701,"mtime":1622746882280,"results":"104","hashOfConfig":"55"},{"size":5603,"mtime":1622219940403,"results":"105","hashOfConfig":"55"},{"size":6260,"mtime":1622746882275,"results":"106","hashOfConfig":"55"},{"size":861,"mtime":1622136420701,"results":"107","hashOfConfig":"55"},{"filePath":"108","messages":"109","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"nz9s2i",{"filePath":"110","messages":"111","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"112","usedDeprecatedRules":"113"},{"filePath":"114","messages":"115","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"116","messages":"117","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"118","usedDeprecatedRules":"119"},{"filePath":"120","messages":"121","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"122","messages":"123","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"124","messages":"125","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"126","usedDeprecatedRules":"119"},{"filePath":"127","messages":"128","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"129","usedDeprecatedRules":"119"},{"filePath":"130","messages":"131","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"132","messages":"133","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"134","messages":"135","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"136","messages":"137","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"138","messages":"139","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"140","usedDeprecatedRules":"119"},{"filePath":"141","messages":"142","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"143","messages":"144","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"113"},{"filePath":"145","messages":"146","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"147","messages":"148","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"149"},{"filePath":"150","messages":"151","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"152","messages":"153","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"154"},{"filePath":"155","messages":"156","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"157","usedDeprecatedRules":"119"},{"filePath":"158","messages":"159","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"160"},{"filePath":"161","messages":"162","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"160"},{"filePath":"163","messages":"164","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"165","messages":"166","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"167","messages":"168","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"169","usedDeprecatedRules":"170"},{"filePath":"171","messages":"172","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"173","messages":"174","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"175","usedDeprecatedRules":"119"},{"filePath":"176","messages":"177","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"178","messages":"179","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"160"},{"filePath":"180","messages":"181","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"170"},{"filePath":"182","messages":"183","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"184","messages":"185","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"186","usedDeprecatedRules":"187"},{"filePath":"188","messages":"189","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"190","messages":"191","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"192","usedDeprecatedRules":"193"},{"filePath":"194","messages":"195","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"196","usedDeprecatedRules":"197"},{"filePath":"198","messages":"199","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"200","messages":"201","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"202","messages":"203","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"204","messages":"205","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"206","messages":"207","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"208","usedDeprecatedRules":"119"},{"filePath":"209","messages":"210","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"211","usedDeprecatedRules":"119"},{"filePath":"212","messages":"213","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"214"},{"filePath":"215","messages":"216","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"217","messages":"218","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"219","messages":"220","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"221","messages":"222","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"160"},{"filePath":"223","messages":"224","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"170"},{"filePath":"225","messages":"226","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"227","usedDeprecatedRules":"160"},{"filePath":"228","messages":"229","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"119"},{"filePath":"230","messages":"231","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"232","messages":"233","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"234","usedDeprecatedRules":"160"},{"filePath":"235","messages":"236","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"237","usedDeprecatedRules":"119"},{"filePath":"238","messages":"239","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"240","usedDeprecatedRules":"119"},"C:\\ReactJS\\uet-project\\src\\pages\\presentation\\EditPresentation.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\presentation\\SlideDetail.js",["241"],"import {\r\n CheckOutlined,\r\n ClockCircleOutlined,\r\n CommentOutlined,\r\n SketchOutlined,\r\n PlusOutlined,\r\n SettingOutlined,\r\n PictureOutlined,\r\n} from \"@ant-design/icons\";\r\nimport {\r\n Button,\r\n Checkbox,\r\n Col,\r\n Form,\r\n Input,\r\n Row,\r\n Select,\r\n Slider,\r\n Typography,\r\n} from \"antd\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport styled from \"styled-components\";\r\nimport score from \"../../util/score\";\r\nimport { currentSlide } from \"./slideSlice\";\r\nimport * as QuestionType from \"util/QuestionType\";\r\nimport PicturesWall from \"pages/question/PicturesWall\";\r\n\r\nSlideDetail.propTypes = {};\r\n\r\nconst { Option } = Select;\r\nconst { Title } = Typography;\r\n\r\nconst StyledSlide = styled.div`\r\n background: white;\r\n color: dodgerblue;\r\n font-size: 1em;\r\n border: 1px solid gainsboro;\r\n padding: 50px;\r\n margin: 5px;\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n`;\r\n\r\nconst StyledSetting = styled.div`\r\n background: white;\r\n width: 20vw;\r\n color: dodgerblue;\r\n font-size: 1em;\r\n border: 1px solid gainsboro;\r\n padding: 50px;\r\n margin: 5px;\r\n display: flex;\r\n flex-direction: column;\r\n`;\r\n\r\nconst TitleInput = styled(Input)`\r\n font-size: 3em;\r\n font-weight: bold;\r\n border: 2px solid dodgerblue;\r\n border-radius: 3px;\r\n\r\n margin: ${(props) => props.size};\r\n padding: ${(props) => props.size};\r\n`;\r\n\r\n// const OptionInput = styled(Input)`\r\n// color: dodgerblue;\r\n// font-size: 2em;\r\n// border: 2px solid dodgerblue;\r\n// border-radius: 3px;\r\n\r\n// margin: 5px;\r\n// padding: ${(props) => props.size};\r\n// `;\r\n\r\nfunction SlideDetail(props) {\r\n const { content } = props;\r\n\r\n const dispatch = useDispatch();\r\n\r\n const slide = useSelector((state) => state.slides);\r\n\r\n const [form] = Form.useForm();\r\n\r\n let formValues;\r\n\r\n function onChange(changedValues, allValues) {\r\n formValues = { ...slide.current, ...allValues };\r\n dispatch(currentSlide(formValues));\r\n }\r\n\r\n useEffect(() => {\r\n const onFill = (content) => {\r\n form.setFieldsValue({\r\n title: content.title,\r\n answers: content.answers\r\n ? content.answers\r\n : [{ text: \"\" }, { text: \"\" }],\r\n score: content.score,\r\n seconds: content.seconds,\r\n questionType: content.questionType,\r\n multiSelect: content.multiSelect,\r\n image: content.image ? content.image : \"\",\r\n });\r\n };\r\n\r\n onFill(content);\r\n dispatch(currentSlide(content));\r\n }, [content, form, dispatch]);\r\n\r\n return (\r\n <Form form={form} onValuesChange={onChange}>\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n flexWrap: \"wrap\",\r\n alignContent: \"space-between\",\r\n }}\r\n >\r\n <StyledSlide>\r\n <Form.Item name=\"title\">\r\n <TitleInput placeholder=\"Title question\" autoComplete=\"off\" />\r\n </Form.Item>\r\n\r\n <Form.Item\r\n name=\"image\"\r\n label={\r\n <Title level={4}>\r\n <PictureOutlined /> Image\r\n </Title>\r\n }\r\n >\r\n <PicturesWall />\r\n </Form.Item>\r\n\r\n <Form.List name=\"answers\" initialValue={[\"\", \"\"]}>\r\n {(answers, { add, remove }) => {\r\n return (\r\n <div>\r\n {slide.current.questionType ===\r\n QuestionType.QUESTION_CHOICE_ANSWER\r\n ? answers.map((answer, index) => (\r\n <div key={answer.key}>\r\n <Form.Item label={`Option ${index + 1}`}>\r\n <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>\r\n <Col span={18}>\r\n <Form.Item\r\n name={[index, \"text\"]}\r\n rules={[{ require: true }]}\r\n >\r\n <Input\r\n placeholder={`Option ${index + 1}`}\r\n autoComplete=\"off\"\r\n />\r\n </Form.Item>\r\n </Col>\r\n <Col span={2}>\r\n <Form.Item\r\n name={[index, \"correct\"]}\r\n valuePropName=\"checked\"\r\n rules={[{ require: true, type: \"boolean\" }]}\r\n >\r\n <Checkbox checked={false} />\r\n </Form.Item>\r\n </Col>\r\n <Col span={4}>\r\n {index > 1 ? (\r\n <Button\r\n type=\"danger\"\r\n onClick={() => remove(answer.name)}\r\n >\r\n Remove\r\n </Button>\r\n ) : null}\r\n </Col>\r\n </Row>\r\n </Form.Item>\r\n </div>\r\n ))\r\n : slide.current.questionType ===\r\n QuestionType.QUESTION_TRUE_FALSE\r\n ? answers.map((answer, index) => (\r\n <div key={answer.key}>\r\n <Form.Item label={`Option ${index + 1}`}>\r\n <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>\r\n <Col span={6}>\r\n <Form.Item\r\n name={[index, \"text\"]}\r\n rules={[{ require: true }]}\r\n >\r\n <Input readOnly />\r\n </Form.Item>\r\n </Col>\r\n <Col span={2}>\r\n <Form.Item\r\n name={[index, \"correct\"]}\r\n valuePropName=\"checked\"\r\n rules={[{ require: true, type: \"boolean\" }]}\r\n >\r\n <input\r\n style={{ fontSize: 15 }}\r\n name=\"inpRadio\"\r\n type=\"radio\"\r\n checked={false}\r\n />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n </Form.Item>\r\n </div>\r\n ))\r\n : slide.current.questionType ===\r\n QuestionType.QUESTION_INPUT_ANSWER\r\n ? answers.map((answer, index) => (\r\n <div key={answer.key}>\r\n <Form.Item label={`Correct answer ${index + 1}`}>\r\n <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>\r\n <Col span={18}>\r\n <Form.Item\r\n name={[index, \"text\"]}\r\n rules={[{ require: true }]}\r\n >\r\n <Input\r\n placeholder={`Correct answer ${index + 1}`}\r\n />\r\n </Form.Item>\r\n </Col>\r\n <Col span={2}>\r\n <Form.Item\r\n name={[index, \"correct\"]}\r\n valuePropName=\"checked\"\r\n rules={[{ require: true, type: \"boolean\" }]}\r\n >\r\n <Checkbox defaultChecked disabled />\r\n </Form.Item>\r\n </Col>\r\n <Col span={4}>\r\n {index > 1 ? (\r\n <Button\r\n type=\"danger\"\r\n onClick={() => remove(answer.name)}\r\n >\r\n Remove\r\n </Button>\r\n ) : null}\r\n </Col>\r\n </Row>\r\n </Form.Item>\r\n </div>\r\n ))\r\n : \"The type of question has not been determined\"}\r\n {answers.length < 4 &&\r\n slide.current.questionType !==\r\n QuestionType.QUESTION_TRUE_FALSE ? (\r\n <Form.Item>\r\n <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>\r\n <Button\r\n type=\"dashed\"\r\n onClick={() =>\r\n slide.current.questionType ===\r\n QuestionType.QUESTION_INPUT_ANSWER\r\n ? add({ text: \"\", correct: true })\r\n : add()\r\n }\r\n style={{ width: \"60%\" }}\r\n >\r\n <PlusOutlined /> Add more\r\n </Button>\r\n </Row>\r\n </Form.Item>\r\n ) : null}\r\n </div>\r\n );\r\n }}\r\n </Form.List>\r\n </StyledSlide>\r\n\r\n <StyledSetting>\r\n <Title level={4}>\r\n <CommentOutlined /> Question Type\r\n </Title>\r\n <Form.Item name=\"questionType\" rules={[{ required: true }]}>\r\n <Select\r\n disabled\r\n // onChange={handleChange}\r\n >\r\n <Option value={QuestionType.QUESTION_CHOICE_ANSWER}>Quiz</Option>\r\n <Option value={QuestionType.QUESTION_TRUE_FALSE}>\r\n True or False\r\n </Option>\r\n <Option value={QuestionType.QUESTION_INPUT_ANSWER}>\r\n Input answer\r\n </Option>\r\n </Select>\r\n </Form.Item>\r\n <Title level={4}>\r\n <SketchOutlined /> Points\r\n </Title>\r\n <Form.Item\r\n name=\"score\"\r\n initialValue={1000}\r\n rules={[{ type: \"number\", required: false }]}\r\n >\r\n <Slider marks={score} min={0} max={2000} step={null} />\r\n </Form.Item>\r\n <Title level={4}>\r\n <ClockCircleOutlined /> Time to answer\r\n </Title>\r\n <Form.Item\r\n name=\"seconds\"\r\n rules={[{ type: \"number\", required: false }]}\r\n >\r\n <Select\r\n placeholder=\"Choose a time\"\r\n menuItemSelectedIcon={<CheckOutlined />}\r\n >\r\n <Option value={5}>5 seconds</Option>\r\n <Option value={10}>10 seconds</Option>\r\n <Option value={20}>20 seconds</Option>\r\n <Option value={30}>30 seconds</Option>\r\n <Option value={60}>1 minute</Option>\r\n <Option value={90}>1 minute 30 seconds</Option>\r\n <Option value={120}>2 minutes</Option>\r\n <Option value={240}>4 minutes</Option>\r\n </Select>\r\n </Form.Item>\r\n {slide.current.questionType ===\r\n QuestionType.QUESTION_CHOICE_ANSWER && (\r\n <>\r\n <Title level={4}>\r\n <SettingOutlined /> Question Option\r\n </Title>\r\n <Form.Item\r\n name=\"multiSelect\"\r\n rules={[{ type: \"boolean\", required: false }]}\r\n >\r\n <Select\r\n defaultActiveFirstOption\r\n menuItemSelectedIcon={<CheckOutlined />}\r\n >\r\n <Option value={false}>Single select</Option>\r\n <Option value={true}>Multi-select</Option>\r\n </Select>\r\n </Form.Item>\r\n </>\r\n )}\r\n <Button danger onClick={() => props.deleteSlide(slide.current.id)}>\r\n Delete\r\n </Button>\r\n </StyledSetting>\r\n </div>\r\n </Form>\r\n );\r\n}\r\n\r\nexport default SlideDetail;\r\n",["242","243"],"C:\\ReactJS\\uet-project\\src\\pages\\presentation\\SingleSlide.js",["244"],"C:\\ReactJS\\uet-project\\src\\util\\APIUtils.js",["245"],"import {\r\n API_BASE_URL,\r\n ACCESS_TOKEN,\r\n PRESENTATIONS_LIST_SIZE,\r\n REFRESH_TOKEN,\r\n} from \"../constants\";\r\n\r\nconst request = (options) => {\r\n const headers = new Headers({\r\n \"Content-Type\": \"application/json\",\r\n });\r\n\r\n if (localStorage.getItem(ACCESS_TOKEN)) {\r\n headers.append(\r\n \"Authorization\",\r\n \"Bearer \" + localStorage.getItem(ACCESS_TOKEN)\r\n );\r\n }\r\n\r\n const defaults = { headers: headers };\r\n options = Object.assign({}, defaults, options);\r\n\r\n return fetch(options.url, options).then((response) =>\r\n response.json().then((json) => {\r\n if (!response.ok) {\r\n return Promise.reject(json);\r\n }\r\n return json;\r\n })\r\n );\r\n};\r\n\r\nexport function getAllPresentations(page, size) {\r\n page = page || 0;\r\n size = size || PRESENTATIONS_LIST_SIZE;\r\n\r\n return request({\r\n url: API_BASE_URL + \"/presentations?page=\" + page + \"&size=\" + size,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function getPresentation(presentationId) {\r\n return request({\r\n url: API_BASE_URL + \"/presentation/\" + presentationId,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function countPresentations() {\r\n return request({\r\n url: API_BASE_URL + \"/presentations/count\",\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function createPresentation(presentationData) {\r\n return request({\r\n url: API_BASE_URL + \"/presentation\",\r\n method: \"POST\",\r\n body: JSON.stringify(presentationData),\r\n });\r\n}\r\n\r\nexport function updatePresentation(presentationData) {\r\n return request({\r\n url: API_BASE_URL + \"/presentation\",\r\n method: \"PUT\",\r\n body: JSON.stringify(presentationData),\r\n });\r\n}\r\n\r\nexport function addToPresentation(questions, presentationId) {\r\n return request({\r\n url: API_BASE_URL + \"/presentation/\" + presentationId + \"/addQuestions\",\r\n method: \"POST\",\r\n body: JSON.stringify(questions),\r\n });\r\n}\r\n\r\nexport function deleteFromPresentation(questionId, presentationId) {\r\n return request({\r\n url:\r\n API_BASE_URL +\r\n \"/presentation/\" +\r\n presentationId +\r\n \"/deleteQuestion/\" +\r\n questionId,\r\n method: \"DELETE\",\r\n });\r\n}\r\n\r\nexport function updateToPresentation(question, presentationId) {\r\n return request({\r\n url: API_BASE_URL + \"/presentation/\" + presentationId + \"/updateQuestion\",\r\n method: \"PUT\",\r\n body: JSON.stringify(question),\r\n });\r\n}\r\n\r\nexport function deletePresentation(presentationId) {\r\n return request({\r\n url: API_BASE_URL + \"/presentation/\" + presentationId,\r\n method: \"DELETE\",\r\n });\r\n}\r\n\r\nexport function deletePresentations(presentationIds) {\r\n return request({\r\n url: API_BASE_URL + \"/presentations/\" + presentationIds,\r\n method: \"DELETE\",\r\n });\r\n}\r\n\r\nexport function getAllQuestions(page, size) {\r\n page = page || 0;\r\n size = size || PRESENTATIONS_LIST_SIZE;\r\n\r\n return request({\r\n url: API_BASE_URL + \"/questions?page=\" + page + \"&size=\" + size,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function countQuestions() {\r\n return request({\r\n url: API_BASE_URL + \"/questions/count\",\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function createQuestion(questionData) {\r\n return request({\r\n url: API_BASE_URL + \"/question\",\r\n method: \"POST\",\r\n body: JSON.stringify(questionData),\r\n });\r\n}\r\n\r\nexport function updateQuestion(questionData) {\r\n return request({\r\n url: API_BASE_URL + \"/question\",\r\n method: \"PUT\",\r\n body: JSON.stringify(questionData),\r\n });\r\n}\r\n\r\nexport function getQuestion(questionId) {\r\n return request({\r\n url: API_BASE_URL + \"/question/\" + questionId,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function deleteQuestion(questionId) {\r\n return request({\r\n url: API_BASE_URL + \"/question/\" + questionId,\r\n method: \"DELETE\",\r\n });\r\n}\r\n\r\nexport function deleteQuestions(questionIds) {\r\n return request({\r\n url: API_BASE_URL + \"/questions/\" + questionIds,\r\n method: \"DELETE\",\r\n });\r\n}\r\n\r\nexport function createGame(gameData) {\r\n return request({\r\n url: API_BASE_URL + \"/game\",\r\n method: \"POST\",\r\n body: JSON.stringify(gameData),\r\n });\r\n}\r\n\r\nexport function getAllGames(page, size) {\r\n return request({\r\n url: API_BASE_URL + \"/games?page=\" + page + \"&size=\" + size,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function countGames() {\r\n return request({\r\n url: API_BASE_URL + \"/games/count\",\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function getGame(gameId) {\r\n return request({\r\n url: API_BASE_URL + \"/game/\" + gameId,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function updateGame(gameData) {\r\n return request({\r\n url: API_BASE_URL + \"/game\",\r\n method: \"PUT\",\r\n body: JSON.stringify(gameData),\r\n });\r\n}\r\n\r\nexport function deleteGame(gameId) {\r\n return request({\r\n url: API_BASE_URL + \"/game/\" + gameId,\r\n method: \"DELETE\",\r\n });\r\n}\r\n\r\nexport function deleteGames(gameIds) {\r\n return request({\r\n url: API_BASE_URL + \"/games/\" + gameIds,\r\n method: \"DELETE\",\r\n });\r\n}\r\n\r\nexport function checkExistByPIN(pin) {\r\n return request({\r\n url: API_BASE_URL + \"/games/checkExistByPIN?pin=\" + pin,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function login(loginRequest) {\r\n return request({\r\n url: API_BASE_URL + \"/auth/signin\",\r\n method: \"POST\",\r\n body: JSON.stringify(loginRequest),\r\n });\r\n}\r\n\r\nexport function refreshToken(refreshTokenRequest) {\r\n return request({\r\n url: API_BASE_URL + \"/auth/refreshtoken\",\r\n method: \"POST\",\r\n body: JSON.stringify(refreshTokenRequest),\r\n });\r\n}\r\n\r\nexport function signup(signupRequest) {\r\n return request({\r\n url: API_BASE_URL + \"/auth/signup\",\r\n method: \"POST\",\r\n body: JSON.stringify(signupRequest),\r\n });\r\n}\r\n\r\nexport function checkUsernameAvailability(username) {\r\n return request({\r\n url: API_BASE_URL + \"/user/checkUsernameAvailability?username=\" + username,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function checkEmailAvailability(email) {\r\n return request({\r\n url: API_BASE_URL + \"/user/checkEmailAvailability?email=\" + email,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function getCurrentUser() {\r\n if (!localStorage.getItem(ACCESS_TOKEN)) {\r\n return Promise.reject(\"No access token set.\");\r\n }\r\n\r\n return request({\r\n url: API_BASE_URL + \"/user/me\",\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function getUserProfile(username) {\r\n return request({\r\n url: API_BASE_URL + \"/users/\" + username,\r\n method: \"GET\",\r\n });\r\n}\r\n\r\nexport function updateUserProfile(userProfile) {\r\n return request({\r\n url: API_BASE_URL + \"/users\",\r\n method: \"PUT\",\r\n body: JSON.stringify(userProfile),\r\n });\r\n}\r\n\r\nexport function updatePassword(password, oldpassword) {\r\n return request({\r\n url:\r\n API_BASE_URL +\r\n \"/user/updatePassword?password=\" +\r\n password +\r\n \"&oldpassword=\" +\r\n oldpassword,\r\n method: \"POST\",\r\n });\r\n}\r\n",["246","247"],"C:\\ReactJS\\uet-project\\src\\pages\\presentation\\slideSlice.js",[],"C:\\ReactJS\\uet-project\\src\\index.js",[],"C:\\ReactJS\\uet-project\\src\\app\\App.js",["248","249"],"import { Layout, notification } from \"antd\";\nimport React, { useEffect, useState } from \"react\";\nimport {\n Redirect,\n Route,\n Switch,\n useHistory,\n withRouter,\n} from \"react-router-dom\";\nimport AppHeader from \"../common/AppHeader\";\nimport { ACCESS_TOKEN, REFRESH_TOKEN } from \"../constants\";\nimport { getCurrentUser, refreshToken } from \"../util/APIUtils\";\nimport LoadingIndicator from \"./../common/LoadingIndicator\";\nimport NotFound from \"./../common/NotFound\";\nimport PrivateRoute from \"./../common/PrivateRoute\";\nimport \"./App.css\";\nimport PublicRoute from \"../common/PublicRoute\";\n\nconst { Content } = Layout;\n\nconst Home = React.lazy(() => import(\"pages/landing/Home\"));\nconst Audience = React.lazy(() => import(\"pages/Audience/index\"));\nconst Host = React.lazy(() => import(\"pages/Host/index\"));\n\nconst Presentations = React.lazy(() =>\n import(\"pages/presentation/Presentations\")\n);\nconst Questions = React.lazy(() => import(\"pages/question/Questions\"));\nconst Report = React.lazy(() => import(\"pages/report/index\"));\n\nconst Login = React.lazy(() => import(\"pages/user/login/Login\"));\nconst Signup = React.lazy(() => import(\"pages/user/signup/Signup\"));\nconst Profile = React.lazy(() => import(\"pages/user/profile/Profile\"));\n\nconst App = (props) => {\n const [currentUser, setCurrentUser] = useState(null);\n const [isAuthenticated, setIsAuthenticated] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const history = useHistory();\n\n notification.config({\n placement: \"topRight\",\n top: 70,\n duration: 3,\n });\n\n function loadCurrentUser() {\n setIsLoading(true);\n getCurrentUser()\n .then((response) => {\n setCurrentUser(response);\n // console.log(response);\n setIsAuthenticated(true);\n setIsLoading(false);\n })\n .catch((error) => {\n setIsLoading(false);\n });\n }\n\n function handleLogout(\n redirectTo = \"/\",\n notificationType = \"success\",\n description = \"You're successfully logged out.\"\n ) {\n history.push(\"/\");\n\n localStorage.removeItem(ACCESS_TOKEN);\n localStorage.removeItem(REFRESH_TOKEN);\n\n setCurrentUser(null);\n setIsAuthenticated(false);\n\n notification[notificationType]({\n message: \"Viedu App\",\n description: description,\n });\n }\n\n function handleLogin() {\n notification.success({\n message: \"Viedu App\",\n description: \"You're successfully logged in.\",\n });\n loadCurrentUser();\n\n history.push(\"/\");\n }\n\n useEffect(() => {\n loadCurrentUser();\n }, []);\n\n // useEffect(() => {\n // if (!isAuthenticated )\n // refreshToken({\n // refreshToken: localStorage.getItem(REFRESH_TOKEN),\n // }).then((response) => {\n // localStorage.setItem(REFRESH_TOKEN, response.refreshToken);\n // localStorage.setItem(ACCESS_TOKEN, response.accessToken);\n // setIsAuthenticated(true);\n // }).catc;\n // }, [isAuthenticated]);\n\n // if (isLoading) {\n // return <LoadingIndicator />;\n // }\n\n return (\n <Layout className=\"app-container\">\n {isLoading && <LoadingIndicator />}\n {!isLoading && (\n <>\n <AppHeader\n isAuthenticated={isAuthenticated}\n currentUser={currentUser}\n onLogout={handleLogout}\n />\n <Content className=\"app-content\">\n <div className=\"container\">\n <Switch>\n {isAuthenticated && (\n <Redirect exact from=\"/\" to=\"/presentations\" />\n )}\n <PublicRoute\n restricted={false}\n path=\"/\"\n component={Home}\n exact\n authenticated={isAuthenticated}\n />\n <PublicRoute\n exact\n restricted={true}\n path=\"/login\"\n authenticated={isAuthenticated}\n component={(props) =>\n !isAuthenticated ? (\n <Login onLogin={handleLogin} {...props} />\n ) : null\n }\n />\n <Route exac path=\"/signup\" component={Signup}></Route>\n <Route exact path=\"/user\">\n <Redirect to=\"/user/profile\" />\n </Route>\n <Route\n path=\"/user/profile\"\n render={(props) => (\n <Profile\n isAuthenticated={isAuthenticated}\n currentUser={currentUser}\n {...props}\n />\n )}\n />\n {/* <PrivateRoute\n authenticated={isAuthenticated}\n path=\"/presentations\"\n component={Presentations}\n handleLogout={handleLogout}\n />\n <PrivateRoute\n authenticated={isAuthenticated}\n path=\"/questions\"\n component={Questions}\n handleLogout={handleLogout}\n /> */}\n <Route\n path=\"/presentations\"\n component={Presentations}\n handleLogout={handleLogout}\n />\n <Route\n path=\"/questions\"\n component={Questions}\n handleLogout={handleLogout}\n />\n <Route\n path=\"/reports\"\n component={Report}\n handleLogout={handleLogout}\n />\n <Route path=\"/play\" component={Host} />\n <Route path={[\"/audience\", \"/go\"]} component={Audience} />\n <Route component={NotFound} />\n </Switch>\n </div>\n </Content>\n </>\n )}\n </Layout>\n );\n};\n\nexport default withRouter(App);\n","C:\\ReactJS\\uet-project\\src\\common\\LoadingIndicator.js",["250"],"import { LoadingOutlined } from \"@ant-design/icons\";\r\nimport React from \"react\";\r\nimport { Spin } from \"antd\";\r\n\r\nexport default function LoadingIndicator(props) {\r\n return (\r\n <Spin style={{ display: \"block\", textAlign: \"center\", marginTop: 30 }} />\r\n );\r\n}\r\n","C:\\ReactJS\\uet-project\\src\\common\\NotFound.js",[],"C:\\ReactJS\\uet-project\\src\\common\\PublicRoute.js",[],"C:\\ReactJS\\uet-project\\src\\common\\PrivateRoute.js",[],"C:\\ReactJS\\uet-project\\src\\common\\AppHeader.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\landing\\Home.js",["251"],"import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { Row, Col, Image } from \"antd\";\r\nimport Signup from \"pages/user/signup/Signup\";\r\nimport \"./Home.css\";\r\n\r\nimport imageSample from \"assets/images/background.jpg\";\r\n\r\nHome.propTypes = {};\r\n\r\nfunction Home(props) {\r\n return (\r\n <div>\r\n <Row>\r\n <Col\r\n xs={24}\r\n xl={12}\r\n style={{\r\n padding: 50,\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n }}\r\n >\r\n <Image preview={false} src={imageSample} />\r\n </Col>\r\n <Col xs={24} xl={12} style={{ padding: 20 }}>\r\n <Signup />\r\n </Col>\r\n </Row>\r\n </div>\r\n );\r\n}\r\n\r\nexport default Home;\r\n","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\Presentations.js",[],"C:\\ReactJS\\uet-project\\src\\store\\store.js",[],"C:\\ReactJS\\uet-project\\src\\constants\\index.js",[],"C:\\ReactJS\\uet-project\\src\\common\\AppSider.js",[],["252","253"],"C:\\ReactJS\\uet-project\\src\\pages\\question\\QuestionList.js",[],"C:\\ReactJS\\uet-project\\src\\util\\Helpers.js",[],["254","255"],"C:\\ReactJS\\uet-project\\src\\pages\\question\\Questions.js",["256"],"import {\r\n Button,\r\n Col,\r\n Form,\r\n Modal,\r\n notification,\r\n Row,\r\n Select,\r\n Space,\r\n PageHeader,\r\n Input,\r\n} from \"antd\";\r\nimport React from \"react\";\r\nimport { Route, Switch, useHistory, useRouteMatch } from \"react-router-dom\";\r\n\r\nimport AppSider from \"../../common/AppSider\";\r\nimport { createQuestion } from \"../../util/APIUtils\";\r\nimport QuestionList from \"./QuestionList\";\r\nimport PrivateRoute from \"./../../common/PrivateRoute\";\r\n\r\nconst EditQuestion = React.lazy(() => import(\"./EditQuestion\"));\r\nconst NotFound = React.lazy(() => import(\"common/NotFound\"));\r\n\r\nconst { Option } = Select;\r\nconst { Search } = Input;\r\n\r\nconst routes = [\r\n {\r\n path: \"/\",\r\n breadcrumbName: \"Home\",\r\n },\r\n {\r\n path: \"/questions\",\r\n breadcrumbName: \"Question List\",\r\n },\r\n];\r\n\r\nconst Questions = (props) => {\r\n let match = useRouteMatch();\r\n // console.log({ match });\r\n\r\n const [visible, setVisible] = React.useState(false);\r\n const [confirmLoading, setConfirmLoading] = React.useState(false);\r\n\r\n const [form] = Form.useForm();\r\n const [description, setDescription] = React.useState(\"\");\r\n const history = useHistory();\r\n\r\n const showModal = () => {\r\n setVisible(true);\r\n };\r\n\r\n const handleSubmit = (values) => {\r\n let answersField;\r\n if (values.questionType === \"QUESTION_TRUE_FALSE\") {\r\n answersField = { answers: [{ text: \"TRUE\" }, { text: \"FALSE\" }] };\r\n values = { ...values, ...answersField };\r\n }\r\n\r\n if (values.questionType === \"QUESTION_INPUT_ANSWER\") {\r\n answersField = {\r\n answers: [\r\n { text: \"\", correct: true },\r\n { text: \"\", correct: true },\r\n ],\r\n };\r\n values = { ...values, ...answersField };\r\n }\r\n\r\n const newQuestion = Object.assign({}, values);\r\n\r\n setConfirmLoading(true);\r\n createQuestion(newQuestion)\r\n .then((response) => {\r\n notification.success({\r\n message: \"Viedu App\",\r\n description: \"Created new question!\",\r\n });\r\n history.push(`${match.url}/${response.id}`);\r\n })\r\n .catch((error) => {\r\n notification.error({\r\n message: \"Viedu App\",\r\n description: error.message || \"Error\",\r\n });\r\n });\r\n setVisible(false);\r\n setConfirmLoading(false);\r\n };\r\n\r\n const handleCancel = () => {\r\n setVisible(false);\r\n form.resetFields();\r\n };\r\n\r\n function handleChange(value) {\r\n // console.log(`selected ${value}`);\r\n switch (value) {\r\n case \"QUESTION_CHOICE_ANSWER\":\r\n setDescription(\r\n \"Gives players several answer alternatives to choose from \"\r\n );\r\n break;\r\n case \"QUESTION_TRUE_FALSE\":\r\n setDescription(\"Let players decided if the statement is true or false\");\r\n break;\r\n case \"QUESTION_INPUT_ANSWER\":\r\n setDescription(\"Let players input a answer\");\r\n break;\r\n\r\n default:\r\n setDescription(\"\");\r\n break;\r\n }\r\n }\r\n\r\n const onSearch = () => {\r\n // alert(\"searching...\");\r\n };\r\n\r\n return (\r\n <Switch>\r\n <Route\r\n exact\r\n path={match.path}\r\n render={() => (\r\n <AppSider>\r\n <PageHeader\r\n title=\"My questions\"\r\n breadcrumb={{ routes }}\r\n subTitle=\"\"\r\n />\r\n <Row\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n }}\r\n >\r\n <Col span={6}>\r\n <Space>\r\n <Button type=\"primary\" onClick={showModal}>\r\n New Question\r\n </Button>\r\n <Modal\r\n title=\"New question\"\r\n visible={visible}\r\n onOk={form.submit}\r\n confirmLoading={confirmLoading}\r\n onCancel={handleCancel}\r\n okText=\"Create\"\r\n >\r\n <Form form={form} onFinish={handleSubmit}>\r\n <Form.Item\r\n name=\"questionType\"\r\n label=\"Question Type\"\r\n rules={[{ required: true }]}\r\n >\r\n <Select\r\n defaultActiveFirstOption\r\n style={{ width: 120 }}\r\n onChange={handleChange}\r\n >\r\n <Option value=\"QUESTION_CHOICE_ANSWER\">Quiz</Option>\r\n <Option value=\"QUESTION_TRUE_FALSE\">\r\n True or False\r\n </Option>\r\n <Option value=\"QUESTION_INPUT_ANSWER\">\r\n Input answer\r\n </Option>\r\n </Select>\r\n </Form.Item>\r\n </Form>\r\n <p>{description}</p>\r\n </Modal>\r\n </Space>\r\n </Col>\r\n <Col span={6}>\r\n <Search\r\n placeholder=\"Search\"\r\n allowClear\r\n enterButton\r\n size=\"middle\"\r\n onSearch={onSearch}\r\n />\r\n </Col>\r\n </Row>\r\n <br />\r\n <QuestionList />\r\n </AppSider>\r\n )}\r\n />\r\n <Route\r\n authenticated\r\n path={`${match.path}/:questionId/edit`}\r\n component={EditQuestion}\r\n />\r\n <Route\r\n authenticated\r\n path={`${match.path}/:questionId`}\r\n component={EditQuestion}\r\n />\r\n <Route component={NotFound} />\r\n </Switch>\r\n );\r\n};\r\n\r\nexport default Questions;\r\n","C:\\ReactJS\\uet-project\\src\\pages\\presentation\\PresentationList.js",[],["257","258"],"C:\\ReactJS\\uet-project\\src\\util\\score.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\question\\EditQuestion.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\Lobby\\index.jsx",["259","260","261"],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\Main\\index.jsx",["262"],"import { Button, Divider, Form, Input, Switch, Row, Col, Collapse } from \"antd\";\r\nimport React, { useEffect } from \"react\";\r\nimport { createGame } from \"util/APIUtils\";\r\nimport { useHistory, useLocation, useRouteMatch } from \"react-router-dom\";\r\nimport { useDispatch } from \"react-redux\";\r\nimport { currentGame } from \"./../../hostSlice\";\r\n\r\nconst { Panel } = Collapse;\r\n\r\nfunction useQuery() {\r\n return new URLSearchParams(useLocation().search);\r\n}\r\n\r\nfunction Main(props) {\r\n const match = useRouteMatch();\r\n const [form] = Form.useForm();\r\n const history = useHistory();\r\n\r\n let query = useQuery();\r\n const quizId = query.get(\"quizId\");\r\n\r\n const dispatch = useDispatch();\r\n\r\n async function handleSubmit(values) {\r\n const gameData = Object.assign({}, values);\r\n // console.log(log);\r\n\r\n await createGame(gameData)\r\n .then((response) => {\r\n dispatch(currentGame(response));\r\n })\r\n .catch((error) => console.log(error));\r\n\r\n history.push(`${match.url}/lobby?quizId=${quizId}`, {\r\n rootPath: match.url,\r\n });\r\n }\r\n\r\n useEffect(() => {\r\n form.setFieldsValue({\r\n presentationId: quizId,\r\n gameType: \"LIVE\",\r\n });\r\n });\r\n\r\n return (\r\n <>\r\n <div\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n }}\r\n >\r\n <Form\r\n style={{ width: 350, fontSize: 15 }}\r\n form={form}\r\n onFinish={handleSubmit}\r\n >\r\n <Form.Item name=\"gameType\">\r\n <Input hidden />\r\n </Form.Item>\r\n <Form.Item name=\"presentationId\">\r\n <Input hidden />\r\n </Form.Item>\r\n <Form.Item name=\"title\">\r\n <Input autoFocus placeholder=\"Title\" />\r\n </Form.Item>\r\n <Form.Item>\r\n <div\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n }}\r\n >\r\n <Button type=\"primary\" htmlType=\"submit\">\r\n Create Room\r\n </Button>\r\n </div>\r\n </Form.Item>\r\n\r\n <Collapse>\r\n <Panel header=\"Game options\" key=\"1\">\r\n <div>\r\n <Row>\r\n <Col span={20}>\r\n Show question and answers on player's device\r\n </Col>\r\n <Col span={4}>\r\n <Form.Item\r\n name=\"playerDeviceDisplay\"\r\n valuePropName=\"checked\"\r\n >\r\n <Switch />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n\r\n <Row>\r\n <Col span={20}>Random order of questions</Col>\r\n <Col span={4}>\r\n <Form.Item name=\"randomQuestion\" valuePropName=\"checked\">\r\n <Switch />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n\r\n <Row>\r\n <Col span={20}>Random order of answers</Col>\r\n <Col span={4}>\r\n <Form.Item name=\"randomAnswer\" valuePropName=\"checked\">\r\n <Switch />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n\r\n <Row>\r\n <Col span={20}>Friendly nickname genarator</Col>\r\n <Col span={4}>\r\n <Form.Item name=\"nicknameGenerator\" valuePropName=\"checked\">\r\n <Switch defaultChecked />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n\r\n <Row>\r\n <Col span={20}>Show minimized intro instructions</Col>\r\n <Col span={4}>\r\n <Form.Item name=\"showInstructions\" valuePropName=\"checked\">\r\n <Switch />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n </div>\r\n </Panel>\r\n </Collapse>\r\n </Form>\r\n </div>\r\n </>\r\n );\r\n}\r\n\r\nexport default Main;\r\n",["263","264"],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\index.jsx",[],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\InGame\\index.jsx",["265","266","267"],"import {\r\n CheckOutlined,\r\n CloseOutlined,\r\n FullscreenExitOutlined,\r\n FullscreenOutlined,\r\n} from \"@ant-design/icons\";\r\nimport { Button, Col, message, Row, Tooltip, Typography } from \"antd\";\r\nimport { WS_BASE_URL } from \"constants/index\";\r\nimport Delayed from \"pages/Host/Delayed\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { FullScreen, useFullScreenHandle } from \"react-full-screen\";\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport SockJS from \"sockjs-client\";\r\nimport Stomp from \"stompjs\";\r\nimport styled from \"styled-components\";\r\nimport { getPresentation } from \"util/APIUtils\";\r\nimport * as QuestionType from \"util/QuestionType\";\r\nimport CountdownTimer from \"./../../CountdownTimer\";\r\nimport ProgressBar from \"./../../ProgressBar\";\r\nimport ScoreBoard from \"../ScoreBoard\";\r\nimport { currentGame, updateGameStatus } from \"pages/Host/hostSlice\";\r\n\r\nimport { resoleImageURI } from \"util/ImageURI\";\r\nimport AnswerdCount from \"../AnswerdCount\";\r\nimport useSound from \"use-sound\";\r\n\r\nimport coundownSound from \"assets/sounds/beeps.wav\";\r\nimport loopMusic from \"assets/sounds/loopMusic.wav\";\r\n\r\nconst { Title } = Typography;\r\n\r\nconst ToolBar = styled.div`\r\n display: flex;\r\n flex-direction: row-reverse;\r\n padding: 10px;\r\n`;\r\n\r\nconst CenterDiv = styled.div`\r\n height: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n`;\r\n\r\nconst OptionBox = styled.div`\r\n height: 50px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n color: white;\r\n font-size: 15;\r\n font-weight: bold;\r\n padding: 10px;\r\n border: 1px solid black;\r\n border-radius: 8px;\r\n margin: 5px;\r\n`;\r\n\r\nInGame.propTypes = {};\r\n\r\nvar stompClient = null;\r\n\r\nconst answerOptions = [\r\n { icon: \"A\", color: \"red\" },\r\n { icon: \"B\", color: \"blue\" },\r\n { icon: \"C\", color: \"orange\" },\r\n { icon: \"D\", color: \"green\" },\r\n];\r\n\r\nfunction InGame(props) {\r\n const history = useHistory();\r\n const games = useSelector((state) => state.games);\r\n const game = games.current;\r\n const [presentation, setPresentation] = useState({});\r\n const [question, setQuestion] = useState({ data: {}, index: -1 });\r\n const [displayResult, setDisplayResult] = useState(false);\r\n const [scoreBoard, setScoreBoard] = useState({ display: false, list: [] });\r\n\r\n const dispatch = useDispatch();\r\n const handle = useFullScreenHandle();\r\n\r\n const { presentationId } = game;\r\n\r\n const [playCountdown, exposedData] = useSound(coundownSound, {\r\n sprite: {\r\n fiveSeconds: [4000, 6000],\r\n },\r\n });\r\n const [playLoopMusic, { stop }] = useSound(loopMusic);\r\n\r\n // const rendered = useRef(1);\r\n // useEffect(() => {\r\n // rendered.current = rendered.current + 1;\r\n // });\r\n // ];\r\n\r\n function connect() {\r\n let serverUrl = WS_BASE_URL;\r\n let ws = new SockJS(serverUrl);\r\n stompClient = Stomp.over(ws);\r\n\r\n stompClient.connect({}, onConnected, onError);\r\n }\r\n\r\n function disconnect() {\r\n if (stompClient !== null) stompClient.disconnect();\r\n }\r\n\r\n function onConnected() {\r\n // Subscribe to the Game\r\n stompClient.subscribe(`/quiz/${game.pin}`, onMessageReceived);\r\n }\r\n\r\n function onError(error) {\r\n message.error(\r\n \"Could not connect to server. Please refresh this page to try again!\"\r\n );\r\n }\r\n\r\n function onMessageReceived(payload) {\r\n var receivedMessage = JSON.parse(payload.body);\r\n\r\n if (receivedMessage.type === \"END\") {\r\n dispatch(updateGameStatus({ gameStatus: \"FINISHED\" }));\r\n }\r\n\r\n if (receivedMessage.type === \"SCORE_BOARD\") {\r\n let listPlayer = JSON.parse(receivedMessage.content);\r\n setScoreBoard((scoreBoard) => ({ ...scoreBoard, list: listPlayer }));\r\n dispatch(currentGame({ ...game, players: listPlayer }));\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n let mounted = true;\r\n //re-connect\r\n connect();\r\n\r\n // get list of questions\r\n const fetch = async () => {\r\n await getPresentation(presentationId)\r\n .then((res) => {\r\n if (mounted) {\r\n setPresentation(res);\r\n }\r\n })\r\n .catch((error) => console.log(error));\r\n };\r\n\r\n fetch();\r\n\r\n return () => {\r\n mounted = false;\r\n stompClient.send(\r\n `/app/game.endGame/${game.pin}`,\r\n {},\r\n JSON.stringify({\r\n sender: game.hostedBy,\r\n type: \"END\",\r\n content: \"Host end game\",\r\n })\r\n );\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (presentation.questionList)\r\n setQuestion({\r\n data: presentation.questionList[0],\r\n index: 0,\r\n });\r\n else {\r\n console.log(\"Presentation has been loaded yet\");\r\n }\r\n }, [presentation]);\r\n\r\n const stopMusic = () => stop();\r\n\r\n useEffect(() => {\r\n question.index >= 0\r\n ? setTimeout(() => {\r\n // music\r\n playLoopMusic();\r\n\r\n // allow players to answer\r\n sendQuestion();\r\n // console.log(presentation);\r\n let count = question.data.seconds;\r\n const timeAnswer = setInterval(() => {\r\n // console.log(count);\r\n if (count === 6) {\r\n stopMusic();\r\n playCountdown({ id: \"fiveSeconds\" });\r\n }\r\n\r\n if (count === 0) {\r\n exposedData.stop();\r\n // console.log(\"Time up\");\r\n clearInterval(timeAnswer);\r\n //skip\r\n sendSkip();\r\n }\r\n count--;\r\n }, 1000);\r\n }, 5000)\r\n : console.log(\"No question is loaded\");\r\n\r\n return () => {\r\n setDisplayResult(false);\r\n };\r\n }, [question]);\r\n\r\n const handleNext = () => {\r\n if (!scoreBoard.display) {\r\n // setQuestion((question) => ({ ...question, data: {} }));\r\n\r\n stompClient.send(\r\n `/app/game.getScoreBoard/${game.pin}`,\r\n {},\r\n JSON.stringify({\r\n sender: game.hostedBy,\r\n type: \"SCORE_BOARD\",\r\n content: \"Get score board\",\r\n })\r\n );\r\n\r\n setScoreBoard((scoreBoard) => ({ ...scoreBoard, display: true }));\r\n } else {\r\n setScoreBoard((scoreBoard) => ({ ...scoreBoard, display: false }));\r\n\r\n if (question.index < presentation.questionList.length - 1) {\r\n setQuestion((question) => ({\r\n data: presentation.questionList[question.index + 1],\r\n index: question.index + 1,\r\n }));\r\n } else {\r\n // handle End\r\n history.replace(\"/\");\r\n }\r\n }\r\n\r\n console.log(scoreBoard);\r\n };\r\n\r\n function sendSkip() {\r\n stompClient.send(\r\n `/app/game.skipLive/${game.pin}`,\r\n {},\r\n JSON.stringify({\r\n sender: game.hostedBy,\r\n type: \"SKIP\",\r\n content: question.data.id,\r\n })\r\n );\r\n setDisplayResult(true);\r\n }\r\n\r\n async function sendQuestion() {\r\n let sendObject = JSON.parse(JSON.stringify(question.data));\r\n\r\n if (sendObject.questionType === QuestionType.QUESTION_INPUT_ANSWER)\r\n delete sendObject.answers;\r\n else sendObject.answers.map((answer) => delete answer.correct);\r\n\r\n let sendContent = JSON.stringify(sendObject);\r\n\r\n stompClient.send(\r\n `/app/game.sendQuestion/${game.pin}`,\r\n {},\r\n JSON.stringify({\r\n sender: game.hostedBy,\r\n type: \"SEND_QUESTION\",\r\n content: sendContent,\r\n })\r\n );\r\n }\r\n\r\n return (\r\n <div>\r\n <FullScreen handle={handle}>\r\n <div\r\n style={{\r\n backgroundColor: \"white\",\r\n display: \"flex\",\r\n flex: 1,\r\n height: \"100%\",\r\n flexDirection: \"column\",\r\n }}\r\n >\r\n <ToolBar>\r\n {handle.active ? (\r\n <Tooltip placement=\"bottomRight\" title=\"Exit\">\r\n <Button\r\n onClick={handle.exit}\r\n icon={<FullscreenExitOutlined />}\r\n />\r\n </Tooltip>\r\n ) : (\r\n <Tooltip placement=\"bottomRight\" title=\"Fullscreen\">\r\n <Button onClick={handle.enter} icon={<FullscreenOutlined />} />\r\n </Tooltip>\r\n )}\r\n </ToolBar>\r\n {presentation.questionList ? (\r\n <>\r\n <Row style={{ backgroundColor: \"Background\" }}>\r\n <Col xl={4}>\r\n <CenterDiv>\r\n <Typography.Text strong style={{ fontSize: 25 }}>\r\n Question {question.index + 1} of{\" \"}\r\n {presentation.questionList.length}\r\n </Typography.Text>\r\n </CenterDiv>\r\n </Col>\r\n <Col xl={16}>\r\n <CenterDiv>\r\n <Typography.Text strong style={{ fontSize: 25 }}>\r\n {scoreBoard.display === false && question.data.title\r\n ? question.data.title\r\n : \"\"}\r\n </Typography.Text>\r\n </CenterDiv>\r\n </Col>\r\n <Col xl={4}>\r\n <CenterDiv\r\n style={{ justifyContent: \"flex-end\", padding: 10 }}\r\n >\r\n <Button type=\"primary\" onClick={() => handleNext()}>\r\n {question.index < presentation.questionList.length - 1\r\n ? \"Next\"\r\n : \"End\"}\r\n </Button>\r\n </CenterDiv>\r\n </Col>\r\n </Row>\r\n {scoreBoard.display === true ? (\r\n <ScoreBoard list={scoreBoard.list}></ScoreBoard>\r\n ) : (\r\n <div>\r\n {question.data.id && (\r\n <div>\r\n <CenterDiv>\r\n <ProgressBar time={5000} id={question.data.id} />\r\n </CenterDiv>\r\n\r\n <Delayed waitBeforeShow={5000} id={question.data.id}>\r\n <Row style={{ height: \"50vh\" }}>\r\n <Col span={5}>\r\n <CenterDiv>\r\n <CountdownTimer\r\n duration={question.data.seconds}\r\n />\r\n </CenterDiv>\r\n </Col>\r\n <Col span={14}>\r\n <CenterDiv>\r\n <img\r\n alt=\"Media for question\"\r\n src={\r\n question.data.image\r\n ? resoleImageURI(question.data.image)\r\n : \"https://i.imgur.com/OhthUOl.png\"\r\n }\r\n />\r\n </CenterDiv>\r\n </Col>\r\n <Col span={5}>\r\n <CenterDiv>\r\n <AnswerdCount game={game} />\r\n </CenterDiv>\r\n </Col>\r\n </Row>\r\n <div\r\n style={{\r\n position: \"fixed\",\r\n bottom: 20,\r\n width: \"100%\",\r\n }}\r\n >\r\n <Row>\r\n {question.data.answers &&\r\n (question.data.questionType ===\r\n QuestionType.QUESTION_CHOICE_ANSWER ||\r\n question.data.questionType ===\r\n QuestionType.QUESTION_TRUE_FALSE)\r\n ? question.data.answers.map((a, index) => (\r\n <Col key={index} span={12}>\r\n <OptionBox\r\n style={{\r\n justifyContent: displayResult\r\n ? \"space-between\"\r\n : \"flex-start\",\r\n backgroundColor:\r\n answerOptions[index].color,\r\n opacity: displayResult\r\n ? !a.correct\r\n ? 0.3\r\n : 1\r\n : 1,\r\n }}\r\n >\r\n <span>\r\n {answerOptions[index].icon}. {a.text}\r\n </span>\r\n {displayResult ? (\r\n <span>\r\n {a.correct ? (\r\n <CheckOutlined />\r\n ) : (\r\n <CloseOutlined />\r\n )}\r\n </span>\r\n ) : null}\r\n </OptionBox>\r\n </Col>\r\n ))\r\n : null}\r\n {question.data.answers &&\r\n question.data.questionType ===\r\n QuestionType.QUESTION_INPUT_ANSWER ? (\r\n <>\r\n {!displayResult && (\r\n <Col span={24}>\r\n <CenterDiv>\r\n <Title level={4}>\r\n Please input your answer in your device!\r\n </Title>\r\n </CenterDiv>\r\n </Col>\r\n )}\r\n {displayResult &&\r\n question.data.answers.map((a, index) => (\r\n <Col key={index} span={12}>\r\n <OptionBox\r\n style={{\r\n justifyContent: \"space-between\",\r\n backgroundColor:\r\n answerOptions[index].color,\r\n }}\r\n >\r\n <span>\r\n {answerOptions[index].icon}. {a.text}\r\n </span>\r\n\r\n <span>\r\n <CheckOutlined />\r\n </span>\r\n </OptionBox>\r\n </Col>\r\n ))}\r\n </>\r\n ) : null}\r\n </Row>\r\n </div>\r\n </Delayed>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </>\r\n ) : null}\r\n </div>\r\n </FullScreen>\r\n </div>\r\n );\r\n}\r\n\r\nexport default InGame;\r\n","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\index.jsx",[],"C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Pin\\index.jsx",[],"C:\\ReactJS\\uet-project\\src\\reportWebVitals.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Name\\index.jsx",["268"],"C:\\ReactJS\\uet-project\\src\\pages\\Audience\\components\\InputPIN.jsx",["269","270"],"import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { Input, Tooltip } from \"antd\";\r\n\r\nInputPIN.propTypes = {};\r\n\r\nfunction InputPIN(props) {\r\n const onChange = (e) => {\r\n const { value } = e.target;\r\n const reg = /^\\d*(\\d*)?$/;\r\n if ((!isNaN(value) && reg.test(value)) || value === \"\") {\r\n props.onChange(value);\r\n }\r\n };\r\n\r\n const onBlur = () => {\r\n const { onBlur } = props;\r\n if (onBlur) {\r\n onBlur();\r\n }\r\n };\r\n\r\n return <Input {...props} onChange={onChange} onBlur={onBlur} />;\r\n}\r\n\r\nexport default InputPIN;\r\n",["271","272"],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\hostSlice.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\ProgressBar.js",["273"],"import React, { useEffect, useState } from \"react\";\r\nimport { Progress } from \"antd\";\r\nimport PropTypes from \"prop-types\";\r\nimport { clearInterval } from \"stompjs\";\r\n\r\nProgressBar.propTypes = {\r\n time: PropTypes.number.isRequired,\r\n id: PropTypes.string.isRequired,\r\n};\r\n\r\nfunction ProgressBar(props) {\r\n const totalSecond = props.time;\r\n const [percent, setPercent] = useState(99);\r\n\r\n useEffect(() => {\r\n const inter = setInterval(() => {\r\n setPercent((percent) => (percent > 0 ? percent - 1 : 0));\r\n }, totalSecond / 100);\r\n\r\n return () => {\r\n setPercent(99);\r\n clearInterval(inter);\r\n };\r\n }, [props.id]);\r\n\r\n return (\r\n <>\r\n {percent > 0 ? (\r\n <Progress\r\n showInfo={false}\r\n strokeLinecap=\"square\"\r\n percent={percent}\r\n ></Progress>\r\n ) : null}\r\n </>\r\n );\r\n}\r\n\r\nexport default ProgressBar;\r\n",["274","275"],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\Delayed.js",["276"],"import React, { useEffect, useState } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nDelayed.propTypes = {\r\n waitBeforeShow: PropTypes.number.isRequired,\r\n id: PropTypes.string.isRequired,\r\n};\r\n\r\nfunction Delayed(props) {\r\n const [hidden, setHidden] = useState(true);\r\n\r\n useEffect(() => {\r\n let mounted = true;\r\n setTimeout(() => {\r\n if (mounted) setHidden(false);\r\n }, props.waitBeforeShow);\r\n\r\n return () => {\r\n mounted = false;\r\n setHidden(true);\r\n };\r\n }, [props.id]);\r\n\r\n return hidden ? <></> : props.children;\r\n}\r\n\r\nexport default Delayed;\r\n",["277","278"],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\CountdownTimer.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\presentation\\QuestionBankDrawer.js",["279"],"C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Instruction\\index.jsx",["280","281","282"],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\ScoreBoard\\index.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\question\\PicturesWall.js",["283"],"import React from \"react\";\r\nimport { Upload, Modal, message, Input, Button, Image } from \"antd\";\r\nimport { PlusOutlined } from \"@ant-design/icons\";\r\nimport { BASE_URL } from \"constants/index\";\r\n\r\nimport { resoleImageURI } from \"util/ImageURI\";\r\n\r\nfunction getBase64(file) {\r\n return new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.readAsDataURL(file);\r\n reader.onload = () => resolve(reader.result);\r\n reader.onerror = (error) => reject(error);\r\n });\r\n}\r\n\r\nfunction beforeUpload(file) {\r\n const isJpgOrPng = file.type === \"image/jpeg\" || file.type === \"image/png\";\r\n if (!isJpgOrPng) {\r\n message.error(\"You can only upload JPG/PNG file!\");\r\n }\r\n const isLt4M = file.size / 1024 / 1024 < 4;\r\n if (!isLt4M) {\r\n message.error(\"Image must smaller than 4MB!\");\r\n }\r\n return isJpgOrPng && isLt4M;\r\n}\r\n\r\nclass PicturesWall extends React.Component {\r\n state = {\r\n previewVisible: false,\r\n previewImage: \"\",\r\n previewTitle: \"\",\r\n fileList: [],\r\n name: \"\",\r\n };\r\n\r\n handleCancel = () => this.setState({ previewVisible: false });\r\n\r\n handlePreview = async (file) => {\r\n if (!file.url && !file.preview) {\r\n file.preview = await getBase64(file.originFileObj);\r\n }\r\n\r\n this.setState({\r\n previewImage: file.url || file.preview,\r\n previewVisible: true,\r\n previewTitle:\r\n file.name || file.url.substring(file.url.lastIndexOf(\"/\") + 1),\r\n });\r\n };\r\n\r\n handleChange = (stateChange) => {\r\n console.log(stateChange);\r\n const { fileList, file } = stateChange;\r\n\r\n if (fileList.length >= 1) {\r\n if (fileList[0].xhr)\r\n this.setState({\r\n fileList,\r\n file,\r\n name: fileList[0].xhr.status === 200 ? fileList[0].xhr.response : \"\",\r\n });\r\n }\r\n this.props.onChange?.(this.state.name);\r\n };\r\n\r\n handleRemove = () => {\r\n this.props.onChange?.(\"\");\r\n };\r\n\r\n componentDidMount() {\r\n this.setState({ name: this.props.value });\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.value !== prevProps.value) {\r\n this.setState({ name: this.props.value });\r\n }\r\n }\r\n\r\n removeImage = () => {\r\n this.setState({ fileList: [], name: \"\" });\r\n this.handleRemove();\r\n };\r\n\r\n render() {\r\n const {\r\n previewVisible,\r\n previewImage,\r\n fileList,\r\n previewTitle,\r\n name,\r\n } = this.state;\r\n\r\n const uploadButton = (\r\n <div>\r\n <PlusOutlined />\r\n <div style={{ marginTop: 8 }}>Upload</div>\r\n </div>\r\n );\r\n\r\n return (\r\n <div key={this.props.value}>\r\n {fileList.length === 0 && name !== \"\" && name !== undefined ? (\r\n <div>\r\n <div>\r\n <Image\r\n alt=\"media\"\r\n preview={false}\r\n style={{ margin: 20 }}\r\n src={resoleImageURI(name)}\r\n />\r\n </div>\r\n <div>\r\n <Button type=\"primary\" danger onClick={() => this.removeImage()}>\r\n Remove Image\r\n </Button>\r\n </div>\r\n </div>\r\n ) : (\r\n <>\r\n <Upload\r\n action={BASE_URL + \"/upload\"}\r\n listType=\"picture-card\"\r\n fileList={fileList}\r\n beforeUpload={beforeUpload}\r\n onPreview={this.handlePreview}\r\n onChange={this.handleChange}\r\n onRemove={this.handleRemove}\r\n itemRender={(originNode, file, fileList) => originNode}\r\n >\r\n {fileList.length >= 1 ? null : uploadButton}\r\n </Upload>\r\n <Modal\r\n visible={previewVisible}\r\n title={previewTitle}\r\n footer={null}\r\n onCancel={this.handleCancel}\r\n >\r\n <img alt=\"preview\" style={{ width: \"100%\" }} src={previewImage} />\r\n </Modal>\r\n </>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default PicturesWall;\r\n","C:\\ReactJS\\uet-project\\src\\pages\\user\\profile\\Profile.js",["284","285"],"import React, { useState, useEffect } from \"react\";\r\nimport {\r\n getUserProfile,\r\n updateUserProfile,\r\n updatePassword,\r\n} from \"util/APIUtils\";\r\nimport {\r\n Avatar,\r\n Tabs,\r\n Card,\r\n Input,\r\n Button,\r\n Form,\r\n Row,\r\n Col,\r\n notification,\r\n} from \"antd\";\r\nimport { getAvatarColor } from \"util/Colors\";\r\nimport LoadingIndicator from \"common/LoadingIndicator\";\r\nimport \"./Profile.css\";\r\nimport NotFound from \"common/NotFound\";\r\nimport ServerError from \"common/ServerError\";\r\nimport { EyeInvisibleOutlined, EyeTwoTone } from \"@ant-design/icons\";\r\n\r\nimport { PASSWORD_MIN_LENGTH, PASSWORD_MAX_LENGTH } from \"constants/index\";\r\n\r\nconst TabPane = Tabs.TabPane;\r\n\r\nconst Profile = (props) => {\r\n const { currentUser } = props;\r\n\r\n const [form] = Form.useForm();\r\n const [formChangePass] = Form.useForm();\r\n\r\n const [userProfile, setUserProfile] = useState(null);\r\n const [loading, setLoading] = useState(false);\r\n const [status, setStatus] = useState({ notFound: false, serverError: false });\r\n\r\n function loadUserProfile(username) {\r\n setLoading(true);\r\n\r\n getUserProfile(username)\r\n .then((response) => {\r\n // console.log(response);\r\n setUserProfile(response);\r\n setLoading(false);\r\n })\r\n .catch((error) => {\r\n if (error.status === 404) {\r\n setStatus({ ...status, notFound: true });\r\n setLoading(false);\r\n } else {\r\n setStatus({ ...status, serverError: true });\r\n setLoading(false);\r\n }\r\n });\r\n }\r\n\r\n useEffect(() => {\r\n loadUserProfile(currentUser.username);\r\n }, [currentUser]);\r\n\r\n useEffect(() => {\r\n userProfile && form.setFieldsValue(userProfile);\r\n\r\n return () => {\r\n form.resetFields();\r\n };\r\n }, [userProfile]);\r\n\r\n if (loading) {\r\n return <LoadingIndicator />;\r\n }\r\n\r\n if (status.notFound) {\r\n return <NotFound />;\r\n }\r\n\r\n if (status.serverError) {\r\n return <ServerError />;\r\n }\r\n\r\n const tabBarStyle = {\r\n textAlign: \"center\",\r\n };\r\n\r\n const onFinish = (values) => {\r\n // console.log(values);\r\n updateUserProfile(values)\r\n .then((res) => {\r\n notification.success({ message: \"Saved!\" });\r\n })\r\n .catch((error) => notification.error({ message: \"Error!\" }));\r\n };\r\n\r\n const onChangePasswd = (values) => {\r\n // console.log(values);\r\n const { oldPassword, newPassword } = values;\r\n updatePassword(newPassword, oldPassword)\r\n .then((res) => {\r\n notification.success({ message: \"Successfully!\" });\r\n })\r\n .catch((error) => {\r\n notification.error({ message: \"Error\" });\r\n });\r\n formChangePass.resetFields();\r\n };\r\n\r\n return (\r\n <div className=\"profile\">\r\n {props.isAuthenticated && userProfile ? (\r\n <div className=\"user-profile\">\r\n <div className=\"user-details\">\r\n <div className=\"user-avatar\">\r\n <Avatar\r\n className=\"user-avatar-circle\"\r\n style={{\r\n backgroundColor: getAvatarColor(userProfile.name),\r\n }}\r\n >\r\n {userProfile.name[0].toUpperCase()}\r\n </Avatar>\r\n </div>\r\n <div className=\"user-summary\">\r\n <div className=\"full-name\">{userProfile.name}</div>\r\n <div className=\"username\">@{userProfile.username}</div>\r\n </div>\r\n </div>\r\n <div>\r\n <Tabs\r\n defaultActiveKey=\"1\"\r\n animated={false}\r\n tabBarStyle={tabBarStyle}\r\n size=\"large\"\r\n className=\"profile-tabs\"\r\n centered\r\n >\r\n <TabPane tab={`Information`} key=\"1\">\r\n <div\r\n className=\"site-card-border-less-wrapper\"\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n }}\r\n >\r\n <Card title=\"User Information\" style={{ width: \"50%\" }}>\r\n <Form\r\n form={form}\r\n name=\"basic\"\r\n onFinish={onFinish}\r\n className=\"signup-form\"\r\n layout=\"vertical\"\r\n >\r\n <Form.Item name=\"id\" label=\"Id\" hidden>\r\n <Input disabled />\r\n </Form.Item>\r\n <Row gutter={16}>\r\n <Col span={12}>\r\n <Form.Item name=\"username\" label=\"Username\">\r\n <Input size=\"large\" placeholder=\"\" disabled />\r\n </Form.Item>\r\n </Col>\r\n <Col span={12}>\r\n <Form.Item name=\"name\" label=\"Full name\">\r\n <Input size=\"large\" placeholder=\"\" />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n <Form.Item name=\"email\" label=\"Email\">\r\n <Input size=\"large\" placeholder=\"\" />\r\n </Form.Item>\r\n <Form.Item>\r\n <Button\r\n type=\"primary\"\r\n htmlType=\"submit\"\r\n size=\"large\"\r\n className=\"signup-form-button\"\r\n >\r\n Save\r\n </Button>\r\n </Form.Item>\r\n </Form>\r\n </Card>\r\n </div>\r\n </TabPane>\r\n <TabPane tab={`Change Password`} key=\"2\">\r\n <div\r\n className=\"site-card-border-less-wrapper\"\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n }}\r\n >\r\n <Card title=\"Password\" style={{ width: \"50%\" }}>\r\n <Form\r\n form={formChangePass}\r\n name=\"changePass\"\r\n onFinish={onChangePasswd}\r\n className=\"change-password-form\"\r\n layout=\"vertical\"\r\n >\r\n <Row gutter={16}>\r\n <Col span={12}>\r\n <Form.Item\r\n name=\"oldPassword\"\r\n label=\"Old password\"\r\n hasFeedback\r\n rules={[\r\n {\r\n required: true,\r\n message: \"Please input your password!\",\r\n },\r\n ]}\r\n >\r\n <Input.Password\r\n size=\"large\"\r\n placeholder=\"\"\r\n iconRender={(visible) =>\r\n visible ? (\r\n <EyeTwoTone />\r\n ) : (\r\n <EyeInvisibleOutlined />\r\n )\r\n }\r\n />\r\n </Form.Item>\r\n </Col>\r\n <Col span={12}></Col>\r\n </Row>\r\n <Row gutter={16}>\r\n <Col span={12}>\r\n <Form.Item\r\n name=\"newPassword\"\r\n label=\"New password\"\r\n hasFeedback\r\n rules={[\r\n {\r\n required: true,\r\n // message: \"Please input your new password!\",\r\n min: PASSWORD_MIN_LENGTH,\r\n max: PASSWORD_MAX_LENGTH,\r\n },\r\n ]}\r\n >\r\n <Input.Password\r\n size=\"large\"\r\n placeholder=\"\"\r\n iconRender={(visible) =>\r\n visible ? (\r\n <EyeTwoTone />\r\n ) : (\r\n <EyeInvisibleOutlined />\r\n )\r\n }\r\n />\r\n </Form.Item>\r\n </Col>\r\n <Col span={12}>\r\n <Form.Item\r\n name=\"confirmNewPassword\"\r\n label=\"Confirm new password\"\r\n dependencies={[\"newPassword\"]}\r\n hasFeedback\r\n rules={[\r\n {\r\n required: true,\r\n message: \"Please confirm your new password!\",\r\n },\r\n ({ getFieldValue }) => ({\r\n validator(_, value) {\r\n if (\r\n !value ||\r\n getFieldValue(\"newPassword\") === value\r\n ) {\r\n return Promise.resolve();\r\n }\r\n return Promise.reject(\r\n new Error(\r\n \"The two passwords that you entered do not match!\"\r\n )\r\n );\r\n },\r\n }),\r\n ]}\r\n >\r\n <Input.Password\r\n size=\"large\"\r\n placeholder=\"\"\r\n iconRender={(visible) =>\r\n visible ? (\r\n <EyeTwoTone />\r\n ) : (\r\n <EyeInvisibleOutlined />\r\n )\r\n }\r\n />\r\n </Form.Item>\r\n </Col>\r\n </Row>\r\n <Form.Item>\r\n <Button\r\n type=\"primary\"\r\n htmlType=\"submit\"\r\n size=\"large\"\r\n className=\"signup-form-button\"\r\n >\r\n Save\r\n </Button>\r\n </Form.Item>\r\n </Form>\r\n </Card>\r\n </div>\r\n </TabPane>\r\n </Tabs>\r\n </div>\r\n </div>\r\n ) : null}\r\n </div>\r\n );\r\n};\r\n\r\nexport default Profile;\r\n","C:\\ReactJS\\uet-project\\src\\util\\QuestionType.js",[],["286","287"],"C:\\ReactJS\\uet-project\\src\\pages\\user\\login\\Login.js",[],"C:\\ReactJS\\uet-project\\src\\util\\Colors.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\user\\signup\\Signup.js",[],"C:\\ReactJS\\uet-project\\src\\util\\Role.js",[],"C:\\ReactJS\\uet-project\\src\\util\\ImageURI.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\Host\\screens\\AnswerdCount.js",["288","289"],"import React, { useState, useEffect } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { Row, Col, message, Typography } from \"antd\";\r\nimport { WS_BASE_URL } from \"constants/index\";\r\nimport SockJS from \"sockjs-client\";\r\nimport Stomp from \"stompjs\";\r\nimport styled from \"styled-components\";\r\n\r\nAnswerdCount.propTypes = {};\r\n\r\nvar stompClient = null;\r\n\r\nconst { Title } = Typography;\r\n\r\nconst CenterDiv = styled.div`\r\n height: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n`;\r\n\r\nfunction AnswerdCount(props) {\r\n const { game } = props;\r\n const [answerdCount, setAnswerdCount] = useState(0);\r\n\r\n function connect() {\r\n let serverUrl = WS_BASE_URL;\r\n let ws = new SockJS(serverUrl);\r\n stompClient = Stomp.over(ws);\r\n\r\n stompClient.connect({}, onConnected, onError);\r\n }\r\n\r\n function disconnect() {\r\n if (stompClient !== null) stompClient.disconnect();\r\n }\r\n\r\n function onConnected() {\r\n stompClient.subscribe(`/quiz/${game.pin}/hostListener`, onMessageReceived);\r\n }\r\n\r\n function onError(error) {\r\n message.error(\r\n \"Could not connect to server. Please refresh this page to try again!\"\r\n );\r\n }\r\n\r\n function onMessageReceived(payload) {\r\n var receivedMessage = JSON.parse(payload.body);\r\n\r\n if (receivedMessage.type === \"INTERACT\") {\r\n setAnswerdCount((answerdCount) => answerdCount + 1);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n connect();\r\n\r\n return () => {\r\n disconnect();\r\n };\r\n }, []);\r\n\r\n return (\r\n <div>\r\n <Row>\r\n <Col span={24}>\r\n <CenterDiv>\r\n <Title level={4}>Answered</Title>\r\n </CenterDiv>\r\n </Col>\r\n <Col span={24}>\r\n <CenterDiv>\r\n <Title level={2}>{answerdCount}</Title>\r\n </CenterDiv>\r\n </Col>\r\n </Row>\r\n </div>\r\n );\r\n}\r\n\r\nexport default AnswerdCount;\r\n","C:\\ReactJS\\uet-project\\src\\common\\ServerError.js",[],"C:\\ReactJS\\uet-project\\src\\pages\\report\\index.jsx",[],"C:\\ReactJS\\uet-project\\src\\pages\\report\\ReportList.js",["290"],"import React, { useEffect, useState } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { ExclamationCircleOutlined } from \"@ant-design/icons\";\r\nimport { Button, Space, Table, Modal, notification, Tag, message } from \"antd\";\r\nimport {\r\n countGames,\r\n getAllGames,\r\n deleteGame,\r\n deleteGames,\r\n} from \"util/APIUtils\";\r\n\r\nvar moment = require(\"moment\");\r\n\r\nReportList.propTypes = {};\r\n\r\nfunction ReportList(props) {\r\n const [data, setData] = useState([]);\r\n const [pagination, setPagination] = useState({\r\n current: 1,\r\n pageSize: 5,\r\n total: 0,\r\n });\r\n const [loading, setLoading] = useState(false);\r\n\r\n const [operationloading, setOperationLoading] = useState(false);\r\n const [selectedRowKeys, setSelectedRowKeys] = useState([]);\r\n\r\n const columns = [\r\n {\r\n title: \"Title\",\r\n dataIndex: \"title\",\r\n sorter: {\r\n compare: (a, b) => a.title.localeCompare(b.title),\r\n multiple: 3,\r\n },\r\n },\r\n {\r\n title: \"Status\",\r\n dataIndex: \"gameStatus\",\r\n render: (status) => {\r\n switch (status) {\r\n case \"CREATED\":\r\n return <Tag color=\"blue\">CREATED</Tag>;\r\n\r\n case \"GOING_ON\":\r\n return <Tag color=\"gold\">GOING ON</Tag>;\r\n\r\n case \"FINISHED\":\r\n return <Tag color=\"green\">FINISHED</Tag>;\r\n\r\n default:\r\n break;\r\n }\r\n return \"\";\r\n },\r\n },\r\n {\r\n title: \"Created\",\r\n dataIndex: \"createdAt\",\r\n sorter: {\r\n compare: (a, b) => a.createdAt - b.createdAt,\r\n multiple: 2,\r\n },\r\n render: (date) => moment(date).fromNow(),\r\n },\r\n {\r\n title: \"Modified\",\r\n dataIndex: \"modifiedAt\",\r\n sorter: {\r\n compare: (a, b) => a.modifiedAt - b.modifiedAt,\r\n multiple: 1,\r\n },\r\n render: (date) => moment(date).fromNow(),\r\n },\r\n {\r\n title: \"Game mode\",\r\n dataIndex: \"gameType\",\r\n },\r\n {\r\n title: \"No. of players\",\r\n dataIndex: \"numberOfPlayers\",\r\n sorter: {\r\n compare: (a, b) => a.numberOfPlayers - b.numberOfPlayers,\r\n multiple: 4,\r\n },\r\n },\r\n {\r\n title: \"Action\",\r\n key: \"action\",\r\n render: (text, record) => (\r\n <Space size=\"middle\">\r\n <Button type=\"primary\" href={`/play?quizId=${record.presentationId}`}>\r\n Play again\r\n </Button>\r\n <Button href={`/reports/${record.id}`}>Open</Button>\r\n <Button danger onClick={() => confirm(record.id)}>\r\n Delete\r\n </Button>\r\n </Space>\r\n ),\r\n },\r\n ];\r\n\r\n function confirm(gameId) {\r\n Modal.confirm({\r\n title: \"Delete game\",\r\n icon: <ExclamationCircleOutlined />,\r\n content:\r\n \"Are you sure you want to delete this game? This action can’t be undone.\",\r\n okText: \"Delete\",\r\n cancelText: \"Cancel\",\r\n onOk() {\r\n deleteGame(gameId)\r\n .then((response) => {\r\n notification.success({\r\n message: \"Deleted\",\r\n description: \"Deleted game\",\r\n });\r\n setPagination({ ...pagination, total: pagination.total - 1 });\r\n })\r\n .catch((error) =>\r\n notification.error({\r\n message: \"Error\",\r\n description: \"An error occurred\",\r\n })\r\n );\r\n },\r\n onCancel() {\r\n // console.log(\"Cancel\");\r\n },\r\n });\r\n }\r\n\r\n useEffect(() => {\r\n let mounted = true;\r\n\r\n setLoading(true);\r\n countGames().then((response) => {\r\n if (mounted) setPagination((p) => ({ ...p, total: response }));\r\n });\r\n setLoading(false);\r\n\r\n return () => (mounted = false);\r\n }, []);\r\n\r\n useEffect(() => {\r\n let mounted = true;\r\n setLoading(true);\r\n\r\n getAllGames(pagination.current, pagination.pageSize).then((response) => {\r\n if (mounted) {\r\n setData(response);\r\n setLoading(false);\r\n }\r\n });\r\n\r\n return () => (mounted = false);\r\n }, [pagination]);\r\n\r\n const handleTableChange = (pagination, filters, sorter) => {\r\n setPagination(pagination);\r\n };\r\n\r\n const rowSelection = {\r\n selectedRowKeys,\r\n onChange: (selectedRowKeys, selectedRows) => {\r\n setSelectedRowKeys(selectedRowKeys);\r\n },\r\n getCheckboxProps: (record) => ({\r\n name: record.id,\r\n }),\r\n };\r\n\r\n const hasSelected = selectedRowKeys.length > 0;\r\n\r\n const deleteSelectedRows = () => {\r\n setOperationLoading(true);\r\n\r\n deleteGames(selectedRowKeys)\r\n .then((reponse) => {\r\n message.success(\"Deleted!\");\r\n setPagination({\r\n ...pagination,\r\n total: pagination.total - selectedRowKeys.length,\r\n });\r\n setSelectedRowKeys([]);\r\n })\r\n .catch((error) => message.error(\"Error\"));\r\n\r\n setOperationLoading(false);\r\n };\r\n\r\n return (\r\n <div>\r\n {hasSelected ? (\r\n <div style={{ marginBottom: 16 }}>\r\n <Button\r\n type=\"primary\"\r\n danger\r\n onClick={() => deleteSelectedRows()}\r\n loading={operationloading}\r\n >\r\n Delete\r\n </Button>\r\n <span style={{ marginLeft: 8 }}>\r\n {`Selected ${selectedRowKeys.length} items`}\r\n </span>\r\n </div>\r\n ) : null}\r\n <Table\r\n rowSelection={{ type: \"checkbox\", ...rowSelection }}\r\n rowKey=\"id\"\r\n columns={columns}\r\n dataSource={data}\r\n loading={loading}\r\n pagination={pagination}\r\n onChange={handleTableChange}\r\n />\r\n </div>\r\n );\r\n}\r\n\r\nexport default ReportList;\r\n","C:\\ReactJS\\uet-project\\src\\pages\\report\\ReportDetail.js",["291","292"],"import React, { useState, useEffect } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport {\r\n Col,\r\n message,\r\n Row,\r\n Layout,\r\n PageHeader,\r\n Menu,\r\n Dropdown,\r\n Button,\r\n Tag,\r\n Tabs,\r\n Typography,\r\n List,\r\n Table,\r\n Card,\r\n Statistic,\r\n Progress,\r\n} from \"antd\";\r\nimport { useParams } from \"react-router-dom\";\r\nimport { getGame } from \"util/APIUtils\";\r\nimport LoadingIndicator from \"common/LoadingIndicator\";\r\nimport {\r\n DeleteOutlined,\r\n DownloadOutlined,\r\n EllipsisOutlined,\r\n LikeOutlined,\r\n PrinterOutlined,\r\n} from \"@ant-design/icons\";\r\nimport \"./style.css\";\r\n\r\nvar moment = require(\"moment\");\r\n\r\nconst { TabPane } = Tabs;\r\n\r\nfunction callback(key) {\r\n console.log(key);\r\n}\r\n\r\nconst columns = [\r\n {\r\n title: \"Nickname\",\r\n dataIndex: \"nickname\",\r\n sorter: {\r\n compare: (a, b) => a.nickname.localeCompare(b.nickname),\r\n multiple: 1,\r\n },\r\n },\r\n {\r\n title: \"Rank\",\r\n dataIndex: \"rank\",\r\n sorter: {\r\n compare: (a, b) => a.rank - b.rank,\r\n multiple: 2,\r\n },\r\n },\r\n {\r\n title: \"Correct Answers\",\r\n dataIndex: \"correctAnswers\",\r\n sorter: {\r\n compare: (a, b) => a.correctAnswers - b.correctAnswers,\r\n multiple: 3,\r\n },\r\n },\r\n {\r\n title: \"Unanswered\",\r\n dataIndex: \"unanswered\",\r\n sorter: {\r\n compare: (a, b) => a.unanswered - b.unanswered,\r\n multiple: 4,\r\n },\r\n },\r\n {\r\n title: \"Points\",\r\n dataIndex: \"point\",\r\n sorter: {\r\n compare: (a, b) => a.point - b.point,\r\n multiple: 5,\r\n },\r\n },\r\n];\r\n\r\nconst menu = (\r\n <Menu>\r\n <Menu.Item>\r\n <Button type=\"text\">\r\n <DownloadOutlined />\r\n Download report\r\n </Button>\r\n </Menu.Item>\r\n <Menu.Item>\r\n <Button type=\"text\">\r\n <PrinterOutlined /> Print\r\n </Button>\r\n </Menu.Item>\r\n <Menu.Item>\r\n <Button type=\"text\" danger>\r\n <DeleteOutlined /> Delete\r\n </Button>\r\n </Menu.Item>\r\n </Menu>\r\n);\r\n\r\nconst DropdownMenu = () => (\r\n <Dropdown key=\"more\" overlay={menu}>\r\n <Button\r\n style={{\r\n border: \"none\",\r\n padding: 0,\r\n }}\r\n >\r\n <EllipsisOutlined\r\n style={{\r\n fontSize: 20,\r\n verticalAlign: \"top\",\r\n }}\r\n />\r\n </Button>\r\n </Dropdown>\r\n);\r\n\r\nconst routes = [\r\n {\r\n path: \"/\",\r\n breadcrumbName: \"Home\",\r\n },\r\n {\r\n path: \"/reports\",\r\n breadcrumbName: \"Reports\",\r\n },\r\n];\r\n\r\nconst Content = ({ children, extraContent }) => (\r\n <Row>\r\n <div style={{ flex: 1, marginRight: 15 }}>{children}</div>\r\n <div className=\"image\">{extraContent}</div>\r\n </Row>\r\n);\r\n\r\nReportDetail.propTypes = {};\r\n\r\nfunction ReportDetail(props) {\r\n const [loading, setLoading] = useState(false);\r\n const { gameId } = useParams();\r\n const [game, setGame] = useState({});\r\n\r\n useEffect(() => {\r\n let mounted = true;\r\n getGame(gameId)\r\n .then((response) => {\r\n if (mounted) {\r\n console.log(response);\r\n setGame(response);\r\n }\r\n })\r\n .catch((error) => message.error(\"Error loading report\"));\r\n\r\n return () => (mounted = false);\r\n }, [gameId]);\r\n\r\n let myTag;\r\n\r\n switch (game.gameStatus) {\r\n case \"CREATED\":\r\n myTag = <Tag color=\"blue\">CREATED</Tag>;\r\n break;\r\n case \"GOING_ON\":\r\n myTag = <Tag color=\"gold\">GOING ON</Tag>;\r\n break;\r\n case \"FINISHED\":\r\n myTag = <Tag color=\"green\">FINISHED</Tag>;\r\n break;\r\n default:\r\n myTag = <Tag color=\"blue\">CREATED</Tag>;\r\n }\r\n\r\n return loading ? (\r\n <LoadingIndicator />\r\n ) : (\r\n <Layout>\r\n <PageHeader\r\n onBack={() => window.history.back()}\r\n title={game.title ? game.title : \"No title\"}\r\n className=\"site-page-header\"\r\n tags={myTag}\r\n extra={[\r\n <Button key=\"1\" type=\"primary\" href={`/play?quizId=${gameId}`}>\r\n Play again\r\n </Button>,\r\n <DropdownMenu key=\"more\" />,\r\n ]}\r\n breadcrumb={{ routes }}\r\n >\r\n <Content\r\n extraContent={\r\n <List\r\n dataSource={[\r\n { label: \"Type\", content: game.gameType },\r\n {\r\n label: \"Started\",\r\n content: moment(game.createdAt).format(\r\n \"MMM D YYYY, h:mm:ss a\"\r\n ),\r\n },\r\n {\r\n label: \"Ended\",\r\n content: moment(game.modifiedAt).format(\r\n \"MMM D YYYY, h:mm:ss a\"\r\n ),\r\n },\r\n { label: \"Hosted by\", content: game.hostedBy },\r\n ]}\r\n renderItem={(item) => (\r\n <List.Item>\r\n <Typography.Text style={{ fontWeight: \"bold\" }}>\r\n {item.label + \": \"}\r\n </Typography.Text>\r\n {item.content}\r\n </List.Item>\r\n )}\r\n />\r\n }\r\n >\r\n <Card>\r\n <Tabs defaultActiveKey=\"1\" onChange={callback}>\r\n <TabPane tab=\"Summary\" key=\"1\">\r\n <Row gutter={[16, 16]}>\r\n <Col span={16}>\r\n <Card>\r\n <p>Number of players: {game.numberOfPlayers}</p>\r\n </Card>\r\n </Col>\r\n <Col span={8}>\r\n <Card>\r\n <Progress type=\"circle\" percent={75} />\r\n </Card>\r\n </Col>\r\n </Row>\r\n </TabPane>\r\n <TabPane tab=\"Players\" key=\"2\">\r\n <Table\r\n columns={columns}\r\n dataSource={game.players}\r\n loading={loading}\r\n />\r\n </TabPane>\r\n <TabPane tab=\"Questions\" key=\"3\">\r\n Diffrencult\r\n </TabPane>\r\n <TabPane tab=\"Feedback\" key=\"4\">\r\n <Statistic\r\n title=\"Feedback\"\r\n value={1128}\r\n prefix={<LikeOutlined />}\r\n />\r\n </TabPane>\r\n </Tabs>\r\n </Card>\r\n </Content>\r\n </PageHeader>\r\n </Layout>\r\n );\r\n}\r\n\r\nexport default ReportDetail;\r\n","C:\\ReactJS\\uet-project\\src\\pages\\Audience\\screens\\Pin\\PinWithURL.js",["293"],"import { useEffect } from \"react\";\r\nimport { useHistory, useRouteMatch, useParams } from \"react-router-dom\";\r\nimport { checkExistByPIN } from \"util/APIUtils\";\r\n\r\nPinWithURL.propTypes = {};\r\n\r\nfunction PinWithURL(props) {\r\n let { pinCode } = useParams();\r\n const history = useHistory();\r\n const match = useRouteMatch();\r\n useEffect(() => {\r\n console.log(match);\r\n if (pinCode) {\r\n checkExistByPIN(pinCode)\r\n .then((res) => {\r\n let myRootPath = match.url.substr(0, match.url.indexOf(\"/pin\"));\r\n\r\n console.log(myRootPath);\r\n history.push(`${myRootPath}/name`, {\r\n rootPath: myRootPath,\r\n pin: pinCode,\r\n });\r\n })\r\n .catch((error) => {\r\n alert(\"An error has occurred!\");\r\n });\r\n }\r\n }, [pinCode]);\r\n\r\n return <></>;\r\n}\r\n\r\nexport default PinWithURL;\r\n",{"ruleId":"294","severity":1,"message":"295","line":21,"column":28,"nodeType":"296","messageId":"297","endLine":21,"endColumn":36},{"ruleId":"298","replacedBy":"299"},{"ruleId":"300","replacedBy":"301"},{"ruleId":"294","severity":1,"message":"302","line":1,"column":10,"nodeType":"296","messageId":"297","endLine":1,"endColumn":24},{"ruleId":"294","severity":1,"message":"303","line":5,"column":3,"nodeType":"296","messageId":"297","endLine":5,"endColumn":16},{"ruleId":"298","replacedBy":"304"},{"ruleId":"300","replacedBy":"305"},{"ruleId":"294","severity":1,"message":"306","line":12,"column":26,"nodeType":"296","messageId":"297","endLine":12,"endColumn":38},{"ruleId":"294","severity":1,"message":"307","line":15,"column":8,"nodeType":"296","messageId":"297","endLine":15,"endColumn":20},{"ruleId":"294","severity":1,"message":"308","line":1,"column":10,"nodeType":"296","messageId":"297","endLine":1,"endColumn":25},{"ruleId":"294","severity":1,"message":"309","line":2,"column":8,"nodeType":"296","messageId":"297","endLine":2,"endColumn":17},{"ruleId":"298","replacedBy":"310"},{"ruleId":"300","replacedBy":"311"},{"ruleId":"298","replacedBy":"312"},{"ruleId":"300","replacedBy":"313"},{"ruleId":"294","severity":1,"message":"307","line":19,"column":8,"nodeType":"296","messageId":"297","endLine":19,"endColumn":20},{"ruleId":"298","replacedBy":"314"},{"ruleId":"300","replacedBy":"315"},{"ruleId":"294","severity":1,"message":"316","line":63,"column":18,"nodeType":"296","messageId":"297","endLine":63,"endColumn":23},{"ruleId":"317","severity":1,"message":"318","line":141,"column":6,"nodeType":"319","endLine":141,"endColumn":8,"suggestions":"320"},{"ruleId":"317","severity":1,"message":"321","line":151,"column":6,"nodeType":"319","endLine":151,"endColumn":12,"suggestions":"322"},{"ruleId":"294","severity":1,"message":"323","line":1,"column":18,"nodeType":"296","messageId":"297","endLine":1,"endColumn":25},{"ruleId":"298","replacedBy":"324"},{"ruleId":"300","replacedBy":"325"},{"ruleId":"294","severity":1,"message":"326","line":106,"column":12,"nodeType":"296","messageId":"297","endLine":106,"endColumn":22},{"ruleId":"317","severity":1,"message":"327","line":165,"column":6,"nodeType":"319","endLine":165,"endColumn":8,"suggestions":"328"},{"ruleId":"317","severity":1,"message":"329","line":212,"column":6,"nodeType":"319","endLine":212,"endColumn":16,"suggestions":"330"},{"ruleId":"317","severity":1,"message":"331","line":76,"column":6,"nodeType":"319","endLine":76,"endColumn":8,"suggestions":"332"},{"ruleId":"294","severity":1,"message":"309","line":2,"column":8,"nodeType":"296","messageId":"297","endLine":2,"endColumn":17},{"ruleId":"294","severity":1,"message":"333","line":3,"column":17,"nodeType":"296","messageId":"297","endLine":3,"endColumn":24},{"ruleId":"298","replacedBy":"334"},{"ruleId":"300","replacedBy":"335"},{"ruleId":"317","severity":1,"message":"336","line":24,"column":6,"nodeType":"319","endLine":24,"endColumn":16,"suggestions":"337"},{"ruleId":"298","replacedBy":"338"},{"ruleId":"300","replacedBy":"339"},{"ruleId":"317","severity":1,"message":"340","line":22,"column":6,"nodeType":"319","endLine":22,"endColumn":16,"suggestions":"341"},{"ruleId":"298","replacedBy":"342"},{"ruleId":"300","replacedBy":"343"},{"ruleId":"294","severity":1,"message":"344","line":4,"column":10,"nodeType":"296","messageId":"297","endLine":4,"endColumn":23},{"ruleId":"294","severity":1,"message":"309","line":2,"column":8,"nodeType":"296","messageId":"297","endLine":2,"endColumn":17},{"ruleId":"317","severity":1,"message":"345","line":124,"column":6,"nodeType":"319","endLine":124,"endColumn":8,"suggestions":"346"},{"ruleId":"317","severity":1,"message":"347","line":172,"column":6,"nodeType":"319","endLine":172,"endColumn":8,"suggestions":"348"},{"ruleId":"294","severity":1,"message":"349","line":2,"column":34,"nodeType":"296","messageId":"297","endLine":2,"endColumn":39},{"ruleId":"317","severity":1,"message":"350","line":61,"column":6,"nodeType":"319","endLine":61,"endColumn":19,"suggestions":"351"},{"ruleId":"317","severity":1,"message":"352","line":69,"column":6,"nodeType":"319","endLine":69,"endColumn":19,"suggestions":"353"},{"ruleId":"298","replacedBy":"354"},{"ruleId":"300","replacedBy":"355"},{"ruleId":"294","severity":1,"message":"309","line":2,"column":8,"nodeType":"296","messageId":"297","endLine":2,"endColumn":17},{"ruleId":"317","severity":1,"message":"347","line":62,"column":6,"nodeType":"319","endLine":62,"endColumn":8,"suggestions":"356"},{"ruleId":"294","severity":1,"message":"309","line":2,"column":8,"nodeType":"296","messageId":"297","endLine":2,"endColumn":17},{"ruleId":"294","severity":1,"message":"309","line":2,"column":8,"nodeType":"296","messageId":"297","endLine":2,"endColumn":17},{"ruleId":"294","severity":1,"message":"357","line":144,"column":19,"nodeType":"296","messageId":"297","endLine":144,"endColumn":29},{"ruleId":"317","severity":1,"message":"358","line":28,"column":6,"nodeType":"319","endLine":28,"endColumn":15,"suggestions":"359"},"no-unused-vars","'useState' is defined but never used.","Identifier","unusedVar","no-native-reassign",["360"],"no-negated-in-lhs",["361"],"'PictureTwoTone' is defined but never used.","'REFRESH_TOKEN' is defined but never used.",["360"],["361"],"'refreshToken' is defined but never used.","'PrivateRoute' is defined but never used.","'LoadingOutlined' is defined but never used.","'PropTypes' is defined but never used.",["360"],["361"],["360"],["361"],["360"],["361"],"'sound' is assigned a value but never used.","react-hooks/exhaustive-deps","React Hook useEffect has missing dependencies: 'connect' and 'stompClient'. Either include them or remove the dependency array.","ArrayExpression",["362"],"React Hook useEffect has a missing dependency: 'stop'. Either include it or remove the dependency array.",["363"],"'Divider' is defined but never used.",["360"],["361"],"'disconnect' is defined but never used.","React Hook useEffect has missing dependencies: 'connect', 'game.hostedBy', 'game.pin', and 'presentationId'. Either include them or remove the dependency array.",["364"],"React Hook useEffect has missing dependencies: 'exposedData', 'playCountdown', 'playLoopMusic', 'sendQuestion', 'sendSkip', and 'stopMusic'. Either include them or remove the dependency array.",["365"],"React Hook useEffect has a missing dependency: 'stompClient'. Either include it or remove the dependency array.",["366"],"'Tooltip' is defined but never used.",["360"],["361"],"React Hook useEffect has a missing dependency: 'totalSecond'. Either include it or remove the dependency array.",["367"],["360"],["361"],"React Hook useEffect has a missing dependency: 'props.waitBeforeShow'. Either include it or remove the dependency array.",["368"],["360"],["361"],"'ThemeProvider' is defined but never used.","React Hook useCallback has missing dependencies: 'history' and 'state.nickname'. Either include them or remove the dependency array.",["369"],"React Hook useEffect has a missing dependency: 'connect'. Either include it or remove the dependency array.",["370"],"'Input' is defined but never used.","React Hook useEffect has a missing dependency: 'loadUserProfile'. Either include it or remove the dependency array.",["371"],"React Hook useEffect has a missing dependency: 'form'. Either include it or remove the dependency array.",["372"],["360"],["361"],["373"],"'setLoading' is assigned a value but never used.","React Hook useEffect has missing dependencies: 'history' and 'match'. Either include them or remove the dependency array.",["374"],"no-global-assign","no-unsafe-negation",{"desc":"375","fix":"376"},{"desc":"377","fix":"378"},{"desc":"379","fix":"380"},{"desc":"381","fix":"382"},{"desc":"383","fix":"384"},{"desc":"385","fix":"386"},{"desc":"387","fix":"388"},{"desc":"389","fix":"390"},{"desc":"391","fix":"392"},{"desc":"393","fix":"394"},{"desc":"395","fix":"396"},{"desc":"391","fix":"397"},{"desc":"398","fix":"399"},"Update the dependencies array to be: [connect, stompClient]",{"range":"400","text":"401"},"Update the dependencies array to be: [play, stop]",{"range":"402","text":"403"},"Update the dependencies array to be: [connect, game.hostedBy, game.pin, presentationId]",{"range":"404","text":"405"},"Update the dependencies array to be: [exposedData, playCountdown, playLoopMusic, question, sendQuestion, sendSkip, stopMusic]",{"range":"406","text":"407"},"Update the dependencies array to be: [stompClient]",{"range":"408","text":"409"},"Update the dependencies array to be: [props.id, totalSecond]",{"range":"410","text":"411"},"Update the dependencies array to be: [props.id, props.waitBeforeShow]",{"range":"412","text":"413"},"Update the dependencies array to be: [history, state.nickname]",{"range":"414","text":"415"},"Update the dependencies array to be: [connect]",{"range":"416","text":"417"},"Update the dependencies array to be: [currentUser, loadUserProfile]",{"range":"418","text":"419"},"Update the dependencies array to be: [form, userProfile]",{"range":"420","text":"421"},{"range":"422","text":"417"},"Update the dependencies array to be: [history, match, pinCode]",{"range":"423","text":"424"},[3650,3652],"[connect, stompClient]",[3811,3817],"[play, stop]",[4461,4463],"[connect, game.hostedBy, game.pin, presentationId]",[5641,5651],"[exposedData, playCountdown, playLoopMusic, question, sendQuestion, sendSkip, stopMusic]",[1815,1817],"[stompClient]",[630,640],"[props.id, totalSecond]",[503,513],"[props.id, props.waitBeforeShow]",[3362,3364],"[history, state.nickname]",[4615,4617],"[connect]",[1587,1600],"[currentUser, loadUserProfile]",[1743,1756],"[form, userProfile]",[1486,1488],[796,805],"[history, match, pinCode]"]