refactor: refactored code

Author: eemaanamir

src/discussions/discussions-home/DiscussionsConfirmEmailBanner.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import {
   Button,
@@ -22,22 +22,22 @@ const DiscussionsConfirmEmailBanner = () => {
   const isEmailVerified = useSelector(selectIsEmailVerified);
   const [showPageBanner, setShowPageBanner] = useState(!isEmailVerified);
   const [showConfirmModal, setShowConfirmModal] = useState(false);
-  const closePageBanner = () => setShowPageBanner(false);
-  const closeConfirmModal = () => setShowConfirmModal(false);
-  const openConfirmModal = () => setShowConfirmModal(true);
+  const closePageBanner = useCallback(() => setShowPageBanner(false), [setShowPageBanner]);
+  const closeConfirmModal = useCallback(() => setShowConfirmModal(false), [setShowConfirmModal]);
+  const openConfirmModal = useCallback(() => setShowConfirmModal(true), [setShowConfirmModal]);
 
-  if (isEmailVerified) { return null; }
-
-  const openConfirmModalButtonClick = () => {
+  const handleConfirmNowClick = useCallback(() => {
     dispatch(sendAccountActivationEmail());
     openConfirmModal();
     closePageBanner();
-  };
+  }, [dispatch, openConfirmModal, closePageBanner]);
 
-  const userConfirmEmailButtonClick = () => {
+  const handleVerifiedClick = useCallback(() => {
     closeConfirmModal();
     closePageBanner();
-  };
+  }, [closeConfirmModal, closePageBanner]);
+
+  if (isEmailVerified) { return null; }
 
   return (
     <>
@@ -48,7 +48,7 @@ const DiscussionsConfirmEmailBanner = () => {
               className="confirm-email-now-button"
               variant="link"
               size="inline"
-              onClick={openConfirmModalButtonClick}
+              onClick={handleConfirmNowClick}
             >
               {intl.formatMessage(messages.confirmNowButton)}
             </Button>
@@ -70,7 +70,7 @@ const DiscussionsConfirmEmailBanner = () => {
           </ModalDialog.Hero>
         )}
         footerNode={(
-          <Button className="mx-auto my-3" variant="danger" onClick={userConfirmEmailButtonClick}>
+          <Button className="mx-auto my-3" variant="danger" onClick={handleVerifiedClick}>
             {intl.formatMessage(messages.verifiedConfirmEmailButton)}
           </Button>
         )}
@@ -82,6 +82,4 @@ const DiscussionsConfirmEmailBanner = () => {
   );
 };
 
-DiscussionsConfirmEmailBanner.propTypes = {};
-
 export default DiscussionsConfirmEmailBanner;

src/discussions/discussions-home/DiscussionsConfirmEmailBanner.test.jsx

@@ -52,8 +52,7 @@ describe('DiscussionsConfirmEmailBanner', () => {
       axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, { isEmailVerified: true });
       await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
       renderComponent();
-      const banner = screen.queryByRole('alert');
-      expect(banner).toBeNull();
+      expect(screen.queryByRole('alert')).toBeNull();
     });
 
     describe('when email is unverified', () => {
@@ -79,11 +78,9 @@ describe('DiscussionsConfirmEmailBanner', () => {
           fireEvent.click(confirmButton);
         });
         await waitFor(() => {
-          const modal = screen.getByRole('dialog');
-          expect(modal).toBeInTheDocument();
-          const banner = screen.queryByRole('alert');
-          expect(banner).not.toBeInTheDocument();
-          expect(axiosMock.history.post.length).toBe(1);
+          expect(screen.getByRole('dialog')).toBeInTheDocument();
+          expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+          expect(axiosMock.history.post).toHaveLength(1);
           expect(axiosMock.history.post[0].url).toBe(resendEmailUrl);
         });
       });
@@ -94,23 +91,19 @@ describe('DiscussionsConfirmEmailBanner', () => {
           fireEvent.click(confirmButton);
         });
         await waitFor(() => {
-          const modalHeader = screen.getByText(messages.confirmEmailModalHeader.defaultMessage);
-          expect(modalHeader).toBeInTheDocument();
-          const modalBody = screen.getByText(messages.confirmEmailModalBody.defaultMessage);
-          expect(modalBody).toBeInTheDocument();
-          const confirmImage = screen.getByRole('img', { name: messages.confirmEmailImageAlt.defaultMessage });
-          expect(confirmImage).toBeInTheDocument();
+          expect(screen.getByText(messages.confirmEmailModalHeader.defaultMessage)).toBeInTheDocument();
+          expect(screen.getByText(messages.confirmEmailModalBody.defaultMessage)).toBeInTheDocument();
+          expect(screen.getByRole('img', { name: messages.confirmEmailImageAlt.defaultMessage })).toBeInTheDocument();
+
           const verifyButton = screen.getByRole('button', { name: messages.verifiedConfirmEmailButton.defaultMessage });
           expect(verifyButton).toBeInTheDocument();
           act(() => {
             fireEvent.click(verifyButton);
           });
         });
         await waitFor(() => {
-          const modal = screen.queryByRole('dialog');
-          expect(modal).not.toBeInTheDocument();
-          const banner = screen.queryByRole('alert');
-          expect(banner).not.toBeInTheDocument();
+          expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+          expect(screen.queryByRole('alert')).not.toBeInTheDocument();
         });
       });
     });