refactor: refactored code according to requested changes

openedx · Nov 13, 2024 · 3eaa383 · 3eaa383
1 parent 1b6612c
commit 3eaa383
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 87 deletions.
diff --git a/src/profile-v2/Certificates.jsx b/src/profile-v2/Certificates.jsx
@@ -32,7 +32,7 @@ const Certificates = ({ certificates }) => (
         </p>
       </div>
     </div>
-    {certificates && certificates.length > 0 ? (
+    {certificates?.length > 0 ? (
       <div className="col">
         <div className="row align-items-center pt-5 g-3rem">
           {certificates.map(certificate => (

diff --git a/src/profile-v2/NotFoundPage.jsx b/src/profile-v2/NotFoundPage.jsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 const NotFoundPage = () => (
   <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
-    <p className="my-0 py-5 text-muted" style={{ maxWidth: '32em' }}>
+    <p className="my-0 py-5 text-muted max-width-32em">
       <FormattedMessage
         id="profile.notfound.message"
         defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."

diff --git a/src/profile-v2/PageLoading.jsx b/src/profile-v2/PageLoading.jsx
@@ -3,12 +3,7 @@ import PropTypes from 'prop-types';
 
 const PageLoading = ({ srMessage }) => (
   <div>
-    <div
-      className="d-flex justify-content-center align-items-center flex-column"
-      style={{
-        height: '50vh',
-      }}
-    >
+    <div className="d-flex justify-content-center align-items-center flex-column height-50vh">
       <div className="spinner-border text-primary" role="status">
         {srMessage && <span className="sr-only">{srMessage}</span>}
       </div>

diff --git a/src/profile-v2/ProfilePage.jsx b/src/profile-v2/ProfilePage.jsx
@@ -80,7 +80,12 @@ const ProfilePage = ({ params }) => {
     }
 
     return (
-      <Hyperlink className="btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap" target="_blank" showLaunchIcon={false} destination={viewMyRecordsUrl}>
+      <Hyperlink
+        className="btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap"
+        target="_blank"
+        showLaunchIcon={false}
+        destination={viewMyRecordsUrl}
+      >
         {intl.formatMessage(messages['profile.viewMyRecords'])}
       </Hyperlink>
     );
@@ -98,64 +103,58 @@ const ProfilePage = ({ params }) => {
     )
   );
 
-  const renderContent = () => {
-    if (isLoadingProfile) {
-      return <PageLoading srMessage={intl.formatMessage(messages['profile.loading'])} />;
-    }
-
-    return (
-      <>
-        <div className="profile-page-bg-banner bg-primary d-md-block align-items-center px-75rem py-4rem h-100 w-100">
-          <div className="col container-fluid w-100 h-100 bg-white py-0 px-25rem rounded-75">
-            <div className="col h-100 w-100 py-4 px-0 justify-content-start g-15rem">
-              <div className="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem">
-                <ProfileAvatar
-                  className="col p-0"
-                  src={profileImage.src}
-                  isDefault={profileImage.isDefault}
-                  onSave={handleSaveProfilePhoto}
-                  onDelete={handleDeleteProfilePhoto}
-                  savePhotoState={savePhotoState}
-                  isEditable={isAuthenticatedUserProfile() && !requiresParentalConsent}
-                />
-                <div className="col justify-content-start align-items-start h-100 w-100 m-0 p-0">
-                  <h1 className="row h3 m-0 font-weight-bold text-truncate text-primary-500">{params.username}</h1>
-                  {isBlockVisible(name) && (
-                  <p className="row pt-2 text-gray-800 font-weight-normal m-0">{name}</p>
-                  )}
-                  <div className="row pt-2 m-0 g-1rem">
-                    <DateJoined date={dateJoined} />
-                    <UserCertificateSummary count={courseCertificates.length} />
+  return (
+    <div className="profile-page">
+      {isLoadingProfile ? (
+        <PageLoading srMessage={intl.formatMessage(messages['profile.loading'])} />
+      ) : (
+        <>
+          <div className="profile-page-bg-banner bg-primary d-md-block align-items-center px-75rem py-4rem h-100 w-100">
+            <div className="col container-fluid w-100 h-100 bg-white py-0 px-25rem rounded-75">
+              <div className="col h-100 w-100 py-4 px-0 justify-content-start g-15rem">
+                <div className="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem">
+                  <ProfileAvatar
+                    className="col p-0"
+                    src={profileImage.src}
+                    isDefault={profileImage.isDefault}
+                    onSave={handleSaveProfilePhoto}
+                    onDelete={handleDeleteProfilePhoto}
+                    savePhotoState={savePhotoState}
+                    isEditable={isAuthenticatedUserProfile() && !requiresParentalConsent}
+                  />
+                  <div className="col justify-content-start align-items-start h-100 w-100 m-0 p-0">
+                    <h1 className="row h3 m-0 font-weight-bold text-truncate text-primary-500">{params.username}</h1>
+                    {isBlockVisible(name) && (
+                      <p className="row pt-2 text-gray-800 font-weight-normal m-0">{name}</p>
+                    )}
+                    <div className="row pt-2 m-0 g-1rem">
+                      <DateJoined date={dateJoined} />
+                      <UserCertificateSummary count={courseCertificates.length} />
+                    </div>
+                  </div>
+                  <div className="col-auto p-0">
+                    {renderViewMyRecordsButton()}
                   </div>
                 </div>
-                <div className="col-auto p-0">
-                  {renderViewMyRecordsButton()}
+                <div className="row-auto d-flex align-items-center h-100 w-100 justify-content-start m-0 pt-4">
+                  {isYOBDisabled() && <UsernameDescription />}
                 </div>
               </div>
-              <div className="row-auto d-flex align-items-center h-100 w-100 justify-content-start m-0 pt-4">
-                {isYOBDisabled() && <UsernameDescription />}
+              <div className="ml-auto">
+                {renderPhotoUploadErrorMessage()}
               </div>
             </div>
-            <div className="ml-auto">
-              {renderPhotoUploadErrorMessage()}
-            </div>
           </div>
-        </div>
-        <div className="col container-fluid d-inline-flex px-75rem pt-4rem pb-6 h-100 w-100 align-items-start justify-content-center g-3rem">
-          {isBlockVisible(courseCertificates.length) && (
-          <Certificates
-            certificates={courseCertificates}
-            formId="certificates"
-          />
-          )}
-        </div>
-      </>
-    );
-  };
-
-  return (
-    <div className="profile-page">
-      {renderContent()}
+          <div className="col container-fluid d-inline-flex px-75rem pt-4rem pb-6 h-100 w-100 align-items-start justify-content-center g-3rem">
+            {isBlockVisible(courseCertificates.length) && (
+              <Certificates
+                certificates={courseCertificates}
+                formId="certificates"
+              />
+            )}
+          </div>
+        </>
+      )}
     </div>
   );
 };

diff --git a/src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap b/src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap
@@ -7,8 +7,7 @@ exports[`<ProfilePage /> Renders correctly in various states app loading 1`] = `
   >
     <div>
       <div
-        class="d-flex justify-content-center align-items-center flex-column"
-        style="height: 50vh;"
+        class="d-flex justify-content-center align-items-center flex-column height-50vh"
       >
         <div
           class="spinner-border text-primary"
@@ -218,10 +217,9 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                 </div>
                 <img
                   alt="profile avatar"
-                  class="w-100 h-100 d-block rounded-circle overflow-hidden"
+                  class="w-100 h-100 d-block rounded-circle overflow-hidden object-fit-cover"
                   data-hj-suppress="true"
                   src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
-                  style="object-fit: cover;"
                 />
               </div>
               <form
@@ -445,10 +443,9 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                 </div>
                 <img
                   alt="profile avatar"
-                  class="w-100 h-100 d-block rounded-circle overflow-hidden"
+                  class="w-100 h-100 d-block rounded-circle overflow-hidden object-fit-cover"
                   data-hj-suppress="true"
                   src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
-                  style="object-fit: cover;"
                 />
               </div>
               <form

diff --git a/src/profile-v2/forms/ProfileAvatar.jsx b/src/profile-v2/forms/ProfileAvatar.jsx
@@ -40,8 +40,8 @@ const ProfileAvatar = ({
 
   const renderPending = () => (
     <div
-      className="position-absolute w-100 h-100 d-flex justify-content-center align-items-center rounded-circle"
-      style={{ backgroundColor: 'rgba(0,0,0,.65)' }}
+      className="position-absolute w-100 h-100 d-flex justify-content-center
+      align-items-center rounded-circle background-black-65"
     >
       <div className="spinner-border text-primary" role="status" />
     </div>
@@ -107,8 +107,7 @@ const ProfileAvatar = ({
     ) : (
       <img
         data-hj-suppress
-        className="w-100 h-100 d-block rounded-circle overflow-hidden"
-        style={{ objectFit: 'cover' }}
+        className="w-100 h-100 d-block rounded-circle overflow-hidden object-fit-cover"
         alt={intl.formatMessage(messages['profile.image.alt.attribute'])}
         src={src}
       />

diff --git a/src/profile-v2/index.scss b/src/profile-v2/index.scss
@@ -144,7 +144,11 @@
 // Todo: Move the following to edx-paragon
 
 .btn-rounded {
-    border-radius: 100px;
+  border-radius: 100px;
+}
+
+.max-width-32em {
+  max-width: 32em;
 }
 
 .width-75rem {
@@ -162,12 +166,17 @@
 .height-2625rem {
   height: 2.625rem;
 }
-.rounded-75{
-    border-radius: 0.75rem;
+
+.height-50vh {
+  height: 50vh;
 }
 
-.pt-4rem{
-    padding-top: 4rem;
+.rounded-75 {
+  border-radius: 0.75rem;
+}
+
+.pt-4rem {
+  padding-top: 4rem;
 }
 
 .py-4rem {
@@ -186,26 +195,34 @@
 }
 
 .px-25rem {
-padding-left: 2.5rem;
-padding-right: 2.5rem;
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+.g-15rem {
+  gap: 1.5rem;
+}
+
+.g-5rem {
+  gap: 0.5rem;
 }
 
-.g-15rem{
-    gap: 1.5rem;
+.g-1rem {
+  gap: 1rem;
 }
 
-.g-5rem{
-    gap: 0.5rem;
+.g-3rem {
+  gap: 3rem;
 }
 
-.g-1rem{
-    gap: 1rem;
+.color-black {
+  color: #000;
 }
 
-.g-3rem{
-    gap: 3rem;
+.background-black-65 {
+  background-color: rgba(0,0,0,.65)
 }
 
-.color-black{
-    color: #000;
+.object-fit-cover {
+  object-fit: cover;
 }