Skip to content

Commit 3eaa383

Browse files
eemaanamireemaanamir
committed
refactor: refactored code according to requested changes
1 parent 1b6612c commit 3eaa383

File tree

7 files changed

+94
-87
lines changed

7 files changed

+94
-87
lines changed

‎src/profile-v2/Certificates.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const Certificates = ({ certificates }) => (
3232
</p>
3333
</div>
3434
</div>
35-
{certificates && certificates.length > 0 ? (
35+
{certificates?.length > 0 ? (
3636
<div className="col">
3737
<div className="row align-items-center pt-5 g-3rem">
3838
{certificates.map(certificate => (

‎src/profile-v2/NotFoundPage.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n';
33

44
const NotFoundPage = () => (
55
<div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
6-
<p className="my-0 py-5 text-muted" style={{ maxWidth: '32em' }}>
6+
<p className="my-0 py-5 text-muted max-width-32em">
77
<FormattedMessage
88
id="profile.notfound.message"
99
defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."

‎src/profile-v2/PageLoading.jsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@ import PropTypes from 'prop-types';
33

44
const PageLoading = ({ srMessage }) => (
55
<div>
6-
<div
7-
className="d-flex justify-content-center align-items-center flex-column"
8-
style={{
9-
height: '50vh',
10-
}}
11-
>
6+
<div className="d-flex justify-content-center align-items-center flex-column height-50vh">
127
<div className="spinner-border text-primary" role="status">
138
{srMessage && <span className="sr-only">{srMessage}</span>}
149
</div>

‎src/profile-v2/ProfilePage.jsx‎

Lines changed: 51 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,12 @@ const ProfilePage = ({ params }) => {
8080
}
8181

8282
return (
83-
<Hyperlink className="btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap" target="_blank" showLaunchIcon={false} destination={viewMyRecordsUrl}>
83+
<Hyperlink
84+
className="btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap"
85+
target="_blank"
86+
showLaunchIcon={false}
87+
destination={viewMyRecordsUrl}
88+
>
8489
{intl.formatMessage(messages['profile.viewMyRecords'])}
8590
</Hyperlink>
8691
);
@@ -98,64 +103,58 @@ const ProfilePage = ({ params }) => {
98103
)
99104
);
100105

101-
const renderContent = () => {
102-
if (isLoadingProfile) {
103-
return <PageLoading srMessage={intl.formatMessage(messages['profile.loading'])} />;
104-
}
105-
106-
return (
107-
<>
108-
<div className="profile-page-bg-banner bg-primary d-md-block align-items-center px-75rem py-4rem h-100 w-100">
109-
<div className="col container-fluid w-100 h-100 bg-white py-0 px-25rem rounded-75">
110-
<div className="col h-100 w-100 py-4 px-0 justify-content-start g-15rem">
111-
<div className="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem">
112-
<ProfileAvatar
113-
className="col p-0"
114-
src={profileImage.src}
115-
isDefault={profileImage.isDefault}
116-
onSave={handleSaveProfilePhoto}
117-
onDelete={handleDeleteProfilePhoto}
118-
savePhotoState={savePhotoState}
119-
isEditable={isAuthenticatedUserProfile() && !requiresParentalConsent}
120-
/>
121-
<div className="col justify-content-start align-items-start h-100 w-100 m-0 p-0">
122-
<h1 className="row h3 m-0 font-weight-bold text-truncate text-primary-500">{params.username}</h1>
123-
{isBlockVisible(name) && (
124-
<p className="row pt-2 text-gray-800 font-weight-normal m-0">{name}</p>
125-
)}
126-
<div className="row pt-2 m-0 g-1rem">
127-
<DateJoined date={dateJoined} />
128-
<UserCertificateSummary count={courseCertificates.length} />
106+
return (
107+
<div className="profile-page">
108+
{isLoadingProfile ? (
109+
<PageLoading srMessage={intl.formatMessage(messages['profile.loading'])} />
110+
) : (
111+
<>
112+
<div className="profile-page-bg-banner bg-primary d-md-block align-items-center px-75rem py-4rem h-100 w-100">
113+
<div className="col container-fluid w-100 h-100 bg-white py-0 px-25rem rounded-75">
114+
<div className="col h-100 w-100 py-4 px-0 justify-content-start g-15rem">
115+
<div className="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem">
116+
<ProfileAvatar
117+
className="col p-0"
118+
src={profileImage.src}
119+
isDefault={profileImage.isDefault}
120+
onSave={handleSaveProfilePhoto}
121+
onDelete={handleDeleteProfilePhoto}
122+
savePhotoState={savePhotoState}
123+
isEditable={isAuthenticatedUserProfile() && !requiresParentalConsent}
124+
/>
125+
<div className="col justify-content-start align-items-start h-100 w-100 m-0 p-0">
126+
<h1 className="row h3 m-0 font-weight-bold text-truncate text-primary-500">{params.username}</h1>
127+
{isBlockVisible(name) && (
128+
<p className="row pt-2 text-gray-800 font-weight-normal m-0">{name}</p>
129+
)}
130+
<div className="row pt-2 m-0 g-1rem">
131+
<DateJoined date={dateJoined} />
132+
<UserCertificateSummary count={courseCertificates.length} />
133+
</div>
134+
</div>
135+
<div className="col-auto p-0">
136+
{renderViewMyRecordsButton()}
129137
</div>
130138
</div>
131-
<div className="col-auto p-0">
132-
{renderViewMyRecordsButton()}
139+
<div className="row-auto d-flex align-items-center h-100 w-100 justify-content-start m-0 pt-4">
140+
{isYOBDisabled() && <UsernameDescription />}
133141
</div>
134142
</div>
135-
<div className="row-auto d-flex align-items-center h-100 w-100 justify-content-start m-0 pt-4">
136-
{isYOBDisabled() && <UsernameDescription />}
143+
<div className="ml-auto">
144+
{renderPhotoUploadErrorMessage()}
137145
</div>
138146
</div>
139-
<div className="ml-auto">
140-
{renderPhotoUploadErrorMessage()}
141-
</div>
142147
</div>
143-
</div>
144-
<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">
145-
{isBlockVisible(courseCertificates.length) && (
146-
<Certificates
147-
certificates={courseCertificates}
148-
formId="certificates"
149-
/>
150-
)}
151-
</div>
152-
</>
153-
);
154-
};
155-
156-
return (
157-
<div className="profile-page">
158-
{renderContent()}
148+
<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">
149+
{isBlockVisible(courseCertificates.length) && (
150+
<Certificates
151+
certificates={courseCertificates}
152+
formId="certificates"
153+
/>
154+
)}
155+
</div>
156+
</>
157+
)}
159158
</div>
160159
);
161160
};

‎src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ exports[`<ProfilePage /> Renders correctly in various states app loading 1`] = `
77
>
88
<div>
99
<div
10-
class="d-flex justify-content-center align-items-center flex-column"
11-
style="height: 50vh;"
10+
class="d-flex justify-content-center align-items-center flex-column height-50vh"
1211
>
1312
<div
1413
class="spinner-border text-primary"
@@ -218,10 +217,9 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
218217
</div>
219218
<img
220219
alt="profile avatar"
221-
class="w-100 h-100 d-block rounded-circle overflow-hidden"
220+
class="w-100 h-100 d-block rounded-circle overflow-hidden object-fit-cover"
222221
data-hj-suppress="true"
223222
src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
224-
style="object-fit: cover;"
225223
/>
226224
</div>
227225
<form
@@ -445,10 +443,9 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
445443
</div>
446444
<img
447445
alt="profile avatar"
448-
class="w-100 h-100 d-block rounded-circle overflow-hidden"
446+
class="w-100 h-100 d-block rounded-circle overflow-hidden object-fit-cover"
449447
data-hj-suppress="true"
450448
src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
451-
style="object-fit: cover;"
452449
/>
453450
</div>
454451
<form

‎src/profile-v2/forms/ProfileAvatar.jsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ const ProfileAvatar = ({
4040

4141
const renderPending = () => (
4242
<div
43-
className="position-absolute w-100 h-100 d-flex justify-content-center align-items-center rounded-circle"
44-
style={{ backgroundColor: 'rgba(0,0,0,.65)' }}
43+
className="position-absolute w-100 h-100 d-flex justify-content-center
44+
align-items-center rounded-circle background-black-65"
4545
>
4646
<div className="spinner-border text-primary" role="status" />
4747
</div>
@@ -107,8 +107,7 @@ const ProfileAvatar = ({
107107
) : (
108108
<img
109109
data-hj-suppress
110-
className="w-100 h-100 d-block rounded-circle overflow-hidden"
111-
style={{ objectFit: 'cover' }}
110+
className="w-100 h-100 d-block rounded-circle overflow-hidden object-fit-cover"
112111
alt={intl.formatMessage(messages['profile.image.alt.attribute'])}
113112
src={src}
114113
/>

‎src/profile-v2/index.scss‎

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,11 @@
144144
// Todo: Move the following to edx-paragon
145145

146146
.btn-rounded {
147-
border-radius: 100px;
147+
border-radius: 100px;
148+
}
149+
150+
.max-width-32em {
151+
max-width: 32em;
148152
}
149153

150154
.width-75rem {
@@ -162,12 +166,17 @@
162166
.height-2625rem {
163167
height: 2.625rem;
164168
}
165-
.rounded-75{
166-
border-radius: 0.75rem;
169+
170+
.height-50vh {
171+
height: 50vh;
167172
}
168173

169-
.pt-4rem{
170-
padding-top: 4rem;
174+
.rounded-75 {
175+
border-radius: 0.75rem;
176+
}
177+
178+
.pt-4rem {
179+
padding-top: 4rem;
171180
}
172181

173182
.py-4rem {
@@ -186,26 +195,34 @@
186195
}
187196

188197
.px-25rem {
189-
padding-left: 2.5rem;
190-
padding-right: 2.5rem;
198+
padding-left: 2.5rem;
199+
padding-right: 2.5rem;
200+
}
201+
202+
.g-15rem {
203+
gap: 1.5rem;
204+
}
205+
206+
.g-5rem {
207+
gap: 0.5rem;
191208
}
192209

193-
.g-15rem{
194-
gap: 1.5rem;
210+
.g-1rem {
211+
gap: 1rem;
195212
}
196213

197-
.g-5rem{
198-
gap: 0.5rem;
214+
.g-3rem {
215+
gap: 3rem;
199216
}
200217

201-
.g-1rem{
202-
gap: 1rem;
218+
.color-black {
219+
color: #000;
203220
}
204221

205-
.g-3rem{
206-
gap: 3rem;
222+
.background-black-65 {
223+
background-color: rgba(0,0,0,.65)
207224
}
208225

209-
.color-black{
210-
color: #000;
226+
.object-fit-cover {
227+
object-fit: cover;
211228
}

0 commit comments

Comments
 (0)