fix: students interviews page #2575
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
valerydluski
reviewed
Jan 6, 2025
| return data ? id : null; | ||
| }); | ||
| const requests = interviews.map(async ({ id }) => { | ||
| const data = await courseService.getInterviewStudent(session.githubId, id.toString()).catch(() => null); |
There was a problem hiding this comment.
Use try-catch to handle errors and add a notification to inform the user.
try {
const data = await courseService.getInterviewStudent(session.githubId, id.toString());
} catch (error) {
message.error('Something went wrong, please try reloading the page later');
}
There was a problem hiding this comment.
Added that. Thanks ❤️
There was a problem hiding this comment.
I would suggest catching once and showing only 1 error instead of multiple bubble for each error
There was a problem hiding this comment.
Thanks for pointing this out once again. I might have misunderstood something. Replaced this with one outer try...catch block ✅
| return data ? id : null; | ||
| }); | ||
| const requests = interviews.map(async ({ id }) => { | ||
| const data = await courseService.getInterviewStudent(session.githubId, id.toString()).catch(() => null); |
There was a problem hiding this comment.
I would suggest catching once and showing only 1 error instead of multiple bubble for each error
valerydluski
reviewed
Jan 9, 2025
Comment on lines
253
to
255
| const renderInterviewsList = () => { | ||
| return interviews.map(interview => renderInterviewCard(interview)); | ||
| }; |
There was a problem hiding this comment.
The renderInterviewsList function seems unnecessary since it just maps over interviews and calls renderInterviewCard. Unless additional logic is planned, it might be cleaner to inline this mapping directly where it’s used.
There was a problem hiding this comment.
Absolutely! Thank you 👍🏻 Done ✅
Comment on lines
123
to
251
| const metaDescription = hasInterviewer || interviewPassed ? renderInterviewDetails(item) : renderExtra(interview); | ||
| const alertDescription = renderCardDescription({ interviewPassed, isRegistered, registrationNotStarted }); | ||
| const { cardMessage } = getInterviewCardDetails({ | ||
| interviewPassed, | ||
| isRegistered, | ||
| registrationNotStarted, | ||
| registrationStart, | ||
| }); | ||
|
|
||
| return ( | ||
| <Col key={id} xs={24} lg={12}> | ||
| <Card | ||
| bodyStyle={{ paddingTop: 0 }} | ||
| hoverable | ||
| title={ | ||
| <Button type="link" href={descriptionUrl} target="_blank" style={{ padding: 0, fontWeight: 500 }}> | ||
| {name} | ||
| </Button> | ||
| } | ||
| extra={<InterviewPeriod startDate={startDate} endDate={endDate} shortDate />} | ||
| > | ||
| <Meta style={{ minHeight: 80, alignItems: 'center', textAlign: 'center' }} description={metaDescription} /> | ||
|
|
||
| <Alert | ||
| message={<div style={{ minHeight: 50 }}>{cardMessage}</div>} | ||
| icon={<InfoCircleTwoTone />} | ||
| showIcon | ||
| type="info" | ||
| description={alertDescription} | ||
| style={{ minHeight: 275 }} | ||
| /> | ||
| </Card> | ||
| </Col> | ||
| ); | ||
| }; | ||
|
|
||
| const getInterviewCardDetails = (params: StudentInterviewDetails) => { | ||
| const { interviewPassed, isRegistered, registrationNotStarted, registrationStart } = params; | ||
|
|
||
| if (interviewPassed) { | ||
| return { | ||
| cardMessage: 'You have your interview result. Congratulations!', | ||
| backgroundImage: 'url(https://cdn.rs.school/sloths/cleaned/congratulations.svg)', | ||
| }; | ||
| } | ||
|
|
||
| if (isRegistered) { | ||
| return { | ||
| cardMessage: 'You’re all set! Prepare for your upcoming interview.', | ||
| backgroundImage: 'url(https://cdn.rs.school/sloths/cleaned/its-a-good-job.svg)', | ||
| }; | ||
| } | ||
|
|
||
| if (registrationNotStarted) { | ||
| return { | ||
| cardMessage: ( | ||
| <div> | ||
| Remember to come back and register after{' '} | ||
| <span style={{ whiteSpace: 'nowrap' }}>{formatShortDate(registrationStart ?? '')}</span>! | ||
| </div> | ||
| ), | ||
| backgroundImage: 'url(https://cdn.rs.school/sloths/cleaned/listening.svg)', | ||
| }; | ||
| } | ||
|
|
||
| return { | ||
| cardMessage: 'Register and get ready for your exciting interview!', | ||
| backgroundImage: 'url(https://cdn.rs.school/sloths/cleaned/take-notes.svg)', | ||
| }; | ||
| }; | ||
|
|
||
| const renderCardDescription = (params: StudentInterviewDetails) => { | ||
| const { backgroundImage } = getInterviewCardDetails(params); | ||
| return ( | ||
| <> | ||
| <div className={iconGroup.className} style={{ backgroundImage }} /> | ||
| {iconGroup.styles} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const renderInterviewDetails = (item: InterviewDetails) => { | ||
| const { interviewer, status, result } = item; | ||
|
|
||
| return ( | ||
| <div style={{ padding: '8px 0' }}> | ||
| <Descriptions layout="vertical" size="small"> | ||
| <Descriptions.Item label="Interviewer"> | ||
| <GithubUserLink value={interviewer.githubId} /> | ||
| </Descriptions.Item> | ||
| <Descriptions.Item label="Status"> | ||
| <StatusLabel status={status} /> | ||
| </Descriptions.Item> | ||
| <Descriptions.Item label="Result"> | ||
| <b>{getInterviewResult(result as Decision) ?? '-'}</b> | ||
| </Descriptions.Item> | ||
| </Descriptions> | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
To improve readability and maintainability, I recommend breaking down this code into separate files under a modular folder structure. For example:
modules/
└── interview/
└── student/
├── renderNoInterviews.tsx
├── renderInterviewCard.tsx
├── getInterviewCardDetails.ts
├── renderCardDescription.tsx
├── renderInterviewDetails.tsx
This is, of course, just a suggestion
There was a problem hiding this comment.
Thanks! Added some single components ✅
aaliakseyenka
approved these changes
Jan 20, 2025
apalchys
approved these changes
Jan 20, 2025
valerydluski
approved these changes
Jan 20, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🟢 Add
deploylabel if you want to deploy this Pull Request to staging environment🧑⚖️ Pull Request Naming Convention
area:*label(s)🤔 This is a ...
🔗 Related issue link
Describe the source of requirement, like related issue link.
💡 Background and solution
Background:
The student interviews page has been changed to improve user experience and maintainability. Previously, it was lacking some visual feedback on interviews details.
Additionally, there was an issue with technical screening registration that needed to be addressed to ensure the students could register and have a technical screening with a mentor.
Demonstration
Solution:
Add visual feedback for different student interview status:
Example Status
No planned interviews
Registration not started
Student not registered
Mentor not assigned
Mentor assigned
Passed the interview and got the results
☑️ Self Check before Merge