refactor: refactored code as requested

src/profile-v2/CertificateCard.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedDate, FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { breakpoints, Hyperlink, useWindowSize } from '@openedx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 import get from 'lodash.get';
 
 import classNames from 'classnames';
 import professionalCertificateSVG from './assets/professional-certificate.svg';
 import verifiedCertificateSVG from './assets/verified-certificate.svg';
 import messages from './Certificates.messages';
+import { useIsOnMobileScreen } from './data/hooks';
 
 const CertificateCard = ({
   certificateType,
@@ -28,7 +29,7 @@ const CertificateCard = ({
     audit: null,
   }[certificateType] || null;
 
-  const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
+  const isMobileView = useIsOnMobileScreen();
 
   return (
     <div
@@ -125,8 +126,7 @@ const CertificateCard = ({
 
 CertificateCard.propTypes = {
   certificateType: PropTypes.string,
-  courseDisplayName:
-  PropTypes.string,
+  courseDisplayName: PropTypes.string,
   courseOrganization: PropTypes.string,
   modifiedDate: PropTypes.string,
   downloadUrl: PropTypes.string,

src/profile-v2/Certificates.jsx

@@ -5,13 +5,13 @@ import { connect } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
 
 import classNames from 'classnames';
-import { breakpoints, useWindowSize } from '@openedx/paragon';
 import CertificateCard from './CertificateCard';
 import { certificatesSelector } from './data/selectors';
+import { useIsOnMobileScreen, useIsOnTabletScreen } from './data/hooks';
 
 const Certificates = ({ certificates }) => {
-  const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
-  const isTabletView = useWindowSize().width <= breakpoints.medium.minWidth;
+  const isMobileView = useIsOnMobileScreen();
+  const isTabletView = useIsOnTabletScreen();
   return (
     <div>
       <div className="col justify-content-start align-items-start g-5rem p-0">
@@ -53,7 +53,16 @@ const Certificates = ({ certificates }) => {
           )}
           >
             {certificates.map(certificate => (
-              <CertificateCard key={certificate.courseId} {...certificate} />
+              <CertificateCard
+                key={certificate.courseId}
+                certificateType={certificate.certificateType}
+                courseDisplayName={certificate.courseDisplayName}
+                courseOrganization={certificate.courseOrganization}
+                modifiedDate={certificate.modifiedDate}
+                downloadUrl={certificate.downloadUrl}
+                courseId={certificate.courseId}
+                uuid={certificate.uuid}
+              />
             ))}
           </div>
         </div>

src/profile-v2/ProfilePage.jsx

@@ -7,12 +7,7 @@ import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import {
-  Alert,
-  Hyperlink,
-  breakpoints,
-  useWindowSize,
-} from '@openedx/paragon';
+import { Alert, Hyperlink } from '@openedx/paragon';
 import classNames from 'classnames';
 import {
   fetchProfile,
@@ -28,6 +23,7 @@ import PageLoading from './PageLoading';
 import { profilePageSelector } from './data/selectors';
 import messages from './ProfilePage.messages';
 import withParams from '../utils/hoc';
+import { useIsOnMobileScreen, useIsOnTabletScreen } from './data/hooks';
 
 ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
 
@@ -48,8 +44,8 @@ const ProfilePage = ({ params }) => {
   } = useSelector(profilePageSelector);
 
   const [viewMyRecordsUrl, setViewMyRecordsUrl] = useState(null);
-  const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
-  const isTabletView = useWindowSize().width <= breakpoints.medium.minWidth;
+  const isMobileView = useIsOnMobileScreen();
+  const isTabletView = useIsOnTabletScreen();
 
   useEffect(() => {
     const { CREDENTIALS_BASE_URL } = context.config;

src/profile-v2/UsernameDescription.jsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 import classNames from 'classnames';
-import { breakpoints, useWindowSize } from '@openedx/paragon';
+import { useIsOnMobileScreen } from './data/hooks';
 
 const UsernameDescription = () => {
-  const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
+  const isMobileView = useIsOnMobileScreen();
   return (
     <p className={classNames([
       'text-gray-800 font-weight-normal m-0',

src/profile-v2/data/hooks.js

@@ -0,0 +1,11 @@
+import { breakpoints, useWindowSize } from '@openedx/paragon';
+
+export function useIsOnTabletScreen() {
+  const windowSize = useWindowSize();
+  return windowSize.width <= breakpoints.medium.minWidth;
+}
+
+export function useIsOnMobileScreen() {
+  const windowSize = useWindowSize();
+  return windowSize.width <= breakpoints.small.minWidth;
+}