Lk/exam timer (#188)

* chore: add exam timer to modal view

* chore: update some left over styling

* chore: remove unused utils

* chore: remove unused style

Author: leangseu-edx

package-lock.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/[email protected]",
+    "@edx/frontend-lib-special-exams": "^2.29.0",
     "@edx/frontend-platform": "5.6.1",
     "@edx/paragon": "^21.5.3",
     "@edx/react-unit-test-utils": "1.7.1",
@@ -88,6 +89,10 @@
   "overrides": {
     "@edx/react-unit-test-utils": {
       "@edx/frontend-build": "12.9.0-alpha.6"
+    },
+    "@edx/frontend-lib-special-exams": {
+      "@edx/frontend-build": "12.9.0-alpha.6",
+      "@edx/paragon": "^21.5.3"
     }
   }
 }

package.json

@@ -3,10 +3,9 @@
 @import "~@edx/brand/paragon/overrides";
 
 .assessment-card {
-  width: 320px !important;
+  max-width: 320px !important;
   height: fit-content;
   max-height: 100%;
-  margin-left: map-get($spacers, 3);
   position: sticky !important;
   top: map-get($spacers, 1) * -1;
 

src/components/Assessment/Assessment.scss

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { Button, Icon } from '@edx/paragon';
 import { Close } from '@edx/paragon/icons';
+import { OuterExamTimer } from '@edx/frontend-lib-special-exams';
 
 import { useORAConfigData } from 'hooks/app';
 import { useCloseModalAction } from 'hooks/actions';
@@ -11,6 +12,7 @@ import ConfirmDialog from 'components/ConfirmDialog';
 import ProgressBar from 'components/ProgressBar';
 
 import './ModalContainer.scss';
+import { useParams } from 'react-router';
 
 /* The purpose of this component is to wrap views with a header/footer for situations
  * where we need to run non-embedded. It is a replicated style of FullScreenModal from
@@ -23,6 +25,7 @@ import './ModalContainer.scss';
 const ModalContainer = ({ children }) => {
   const { title } = useORAConfigData();
   const onClose = useCloseModalAction();
+  const { courseId } = useParams();
   return (
     <div>
       {onClose.confirmProps && <ConfirmDialog {...onClose.confirmProps} />}
@@ -48,6 +51,9 @@ const ModalContainer = ({ children }) => {
         <ProgressBar className="px-2 shadow-sm" />
       </div>
       <div className="ora-modal-body content-body bg-light-300 p-4">
+        <div className="exam-timer">
+          <OuterExamTimer courseId={courseId} />
+        </div>
         {children}
       </div>
     </div>

src/components/ModalContainer.jsx

@@ -1,8 +1,16 @@
-@import "@edx/brand/paragon/variables.scss";
-@import "@edx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
+@import '@edx/brand/paragon/variables.scss';
+@import '@edx/paragon/scss/core/core.scss';
+@import '@edx/brand/paragon/overrides.scss';
 
 .ora-modal-body {
   min-height: calc(100vh - 20px - 64px - (map-get($spacers, 2) * 8));
   height: 100%;
 }
+
+.exam-timer {
+  max-width: $max-width-lg;
+  margin: auto;
+  button {
+    display: none;
+  }
+}

src/components/ModalContainer.scss

@@ -12,6 +12,12 @@ jest.mock('hooks/actions', () => ({
 }));
 jest.mock('components/ConfirmDialog', () => 'ConfirmDialog');
 jest.mock('components/ProgressBar', () => 'ProgressBar');
+jest.mock('react-router', () => ({
+  useParams: jest.fn().mockReturnValue({ courseId: 'courseId' }),
+}));
+jest.mock('@edx/frontend-lib-special-exams', () => ({
+  OuterExamTimer: () => 'OuterExamTimer',
+}));
 
 describe('<ModalContainer />', () => {
   useORAConfigData.mockReturnValue({ title: 'title' });

src/components/ModalContainer.test.jsx

@@ -39,6 +39,13 @@ exports[`<ModalContainer /> render default 1`] = `
   <div
     className="ora-modal-body content-body bg-light-300 p-4"
   >
+    <div
+      className="exam-timer"
+    >
+      <OuterExamTimer
+        courseId="courseId"
+      />
+    </div>
     <div>
       children
     </div>
@@ -82,6 +89,13 @@ exports[`<ModalContainer /> render without confirmProps 1`] = `
   <div
     className="ora-modal-body content-body bg-light-300 p-4"
   >
+    <div
+      className="exam-timer"
+    >
+      <OuterExamTimer
+        courseId="courseId"
+      />
+    </div>
     <div>
       children
     </div>

src/components/__snapshots__/ModalContainer.test.jsx.snap

@@ -1,4 +1,5 @@
 import { combineReducers } from 'redux';
+import { reducer as specialExams } from '@edx/frontend-lib-special-exams';
 
 import { StrictDict } from 'utils';
 
@@ -16,7 +17,7 @@ const moduleProps = (propName) => Object.keys(modules).reduce(
   {},
 );
 
-const rootReducer = combineReducers(moduleProps('reducer'));
+const rootReducer = combineReducers({ ...moduleProps('reducer'), specialExams });
 
 const actions = StrictDict(moduleProps('actions'));
 

src/data/redux/index.js

@@ -1,19 +1,19 @@
-import * as redux from 'redux';
-import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';
+import { configureStore } from '@reduxjs/toolkit';
 import { createLogger } from 'redux-logger';
 
 import reducer, { actions, selectors } from './redux';
 
 export const createStore = (withLogger = true) => {
-  const loggerMiddleware = createLogger();
-
-  const middleware = [loggerMiddleware];
-
-  const store = withLogger
-    ? redux.createStore(
-      reducer,
-      composeWithDevTools(redux.applyMiddleware(...middleware)),
-    ) : redux.createStore(reducer);
+  const store = configureStore({
+    reducer,
+    middleware: (getDefaultMiddleware) => {
+      const middleware = getDefaultMiddleware();
+      if (withLogger) {
+        middleware.push(createLogger());
+      }
+      return middleware;
+    },
+  });
 
   /**
    * Dev tools for redux work

src/data/services/lms/hooks/actions/utils.test.ts

@@ -35,7 +35,7 @@ exports[`<BaseAssessmentView /> render default 1`] = `
         <ModalActions />
       </Col>
       <Col
-        className="p-0 col-3 assessment-col"
+        className="py-0 pr-0 pl-3 col-3 assessment-col"
       >
         <Assessment />
       </Col>

src/data/services/lms/hooks/actions/utils.ts

@@ -37,7 +37,7 @@ const BaseAssessmentView = ({
             {children}
             <ModalActions />
           </Col>
-          <Col className="p-0 col-3 assessment-col">
+          <Col className="py-0 pr-0 pl-3 col-3 assessment-col">
             <Assessment />
           </Col>
         </Row>