fix: loading circle + tests (#22)

* fix: loading circle + tests

* chore: nit

* fix: abiding react hook rules + tests

src/pages/ExamsPage/components/ResetExamAttemptModal.jsx

@@ -11,8 +11,8 @@ import messages from '../messages';
 const ResetExamAttemptModal = ({ username, examName, attemptId }) => {
   const [isOpen, open, close] = useToggle(false);
   const resetExamAttempt = useDeleteExamAttempt();
-  const getRequestStatus = useButtonStateFromRequestStatus();
   const { formatMessage } = useIntl();
+  const deleteExamAttemptRequestStatus = useButtonStateFromRequestStatus(constants.RequestKeys.deleteExamAttempt);
 
   const ResetButtonProps = {
     labels: {
@@ -63,7 +63,7 @@ const ResetExamAttemptModal = ({ username, examName, attemptId }) => {
               data-testid="reset-stateful-button"
               // The state of this button is updated based on the request status of the deleteExamAttempt
               // api function. The change of the button's label is based on VerifyButtonProps
-              state={getRequestStatus(constants.RequestKeys.deleteExamAttempt)}
+              state={deleteExamAttemptRequestStatus()}
               {...ResetButtonProps}
               variant="primary"
               onClick={e => { // eslint-disable-line no-unused-vars

src/pages/ExamsPage/components/ReviewExamAttemptModal.jsx

@@ -27,9 +27,9 @@ const ReviewExamAttemptModal = ({
 }) => {
   const [isOpen, open, close] = useToggle(false);
   const modifyExamAttempt = useModifyExamAttempt();
-  const getRequestStatus = useButtonStateFromRequestStatus();
   const { currentExam } = useExamsData();
   const { formatMessage } = useIntl();
+  const modifyExamAttemptRequestStatus = useButtonStateFromRequestStatus(constants.RequestKeys.modifyExamAttempt);
 
   const getButton = (status) => {
     if (ReviewRequiredStatuses.includes(status)) {
@@ -134,7 +134,7 @@ const ReviewExamAttemptModal = ({
                 <StatefulButton
                   // The state of this button is updated based on the request status of the modifyExamAttempt
                   // api function. The change of the button's label is based on VerifyButtonProps.
-                  state={getRequestStatus(constants.RequestKeys.modifyExamAttempt)}
+                  state={modifyExamAttemptRequestStatus()}
                   {...VerifyButtonProps}
                   variant="success"
                   onClick={async e => { // eslint-disable-line no-unused-vars
@@ -146,7 +146,7 @@ const ReviewExamAttemptModal = ({
               && (
                 <StatefulButton
                   // See above comment in the other StatefulButton to understand how this works
-                  state={getRequestStatus(constants.RequestKeys.modifyExamAttempt)}
+                  state={modifyExamAttemptRequestStatus()}
                   {...RejectButtonProps}
                   variant="danger"
                   onClick={async e => { // eslint-disable-line no-unused-vars

src/pages/ExamsPage/components/ReviewExamAttemptModal.test.jsx

@@ -50,7 +50,7 @@ describe('ReviewExamAttemptModal', () => {
     // Using queryByText here allows the function to throw
     expect(screen.queryByText('Update review status')).not.toBeInTheDocument();
   });
-  it('Clicking the Verify button displays the correct label based on the request state', () => {
+  it('Clicking the Verify button displays the correct label based on the request state', async () => {
     hooks.useButtonStateFromRequestStatus.mockReturnValue(() => 'pending'); // for testing button label state
     render(reviewModal());
     screen.getByText('Review Required').click();

src/pages/ExamsPage/hooks.js

@@ -3,7 +3,7 @@ import { useSelector, useDispatch } from 'react-redux';
 
 import { RequestKeys } from 'data/constants';
 
-import * as reduxHooks from 'data/redux/hooks';
+import * as reduxHooks from 'data/redux/hooks/requests';
 
 import * as api from './data/api';
 import * as selectors from './data/selectors';

src/pages/ExamsPage/hooks.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import * as reduxHooks from 'data/redux/hooks';
+import * as reduxHooks from 'data/redux/hooks/requests';
 
 import * as constants from 'data/constants';
 import * as api from './data/api';
@@ -13,7 +13,7 @@ jest.mock('react-redux', () => ({
   useSelector: () => mockUseSelector,
 }));
 
-jest.mock('data/redux/hooks', () => ({
+jest.mock('data/redux/hooks/requests', () => ({
   useMakeNetworkRequest: jest.fn(),
   useRequestIsPending: jest.fn(),
   useRequestError: jest.fn(),
@@ -175,20 +175,17 @@ describe('ExamsPage hooks', () => {
     it('returns empty string if no request made', () => {
       reduxHooks.useRequestIsPending.mockReturnValue(false);
       reduxHooks.useRequestError.mockReturnValue(false);
-      const getRequestStatus = hooks.useButtonStateFromRequestStatus(constants.modifyExamAttempt);
-      expect(getRequestStatus()).toBe('');
+      expect(hooks.useButtonStateFromRequestStatus(constants.RequestKeys.modifyExamAttempt)()).toBe('');
     });
     it('returns pending if request is pending', () => {
       reduxHooks.useRequestIsPending.mockReturnValue(true);
       reduxHooks.useRequestError.mockReturnValue(false);
-      const getRequestStatus = hooks.useButtonStateFromRequestStatus(constants.modifyExamAttempt);
-      expect(getRequestStatus()).toBe('pending');
+      expect(hooks.useButtonStateFromRequestStatus(constants.RequestKeys.modifyExamAttempt)()).toBe('pending');
     });
     it('returns error if request errors', () => {
       reduxHooks.useRequestIsPending.mockReturnValue(false);
       reduxHooks.useRequestError.mockReturnValue(true);
-      const getRequestStatus = hooks.useButtonStateFromRequestStatus(constants.modifyExamAttempt);
-      expect(getRequestStatus()).toBe('error');
+      expect(hooks.useButtonStateFromRequestStatus(constants.RequestKeys.modifyExamAttempt)()).toBe('error');
     });
   });
 });