Skip to content

Commit 40c8653

Browse files
pestlerAlreadyBored
pestler
and
AlreadyBored
authored
fix: adjust pre-screening interview layout for better text wrapping (#2890)
* feat: adjust pre-screening interview layout for better text wrapping * feat: add gutter and col * feat: change style * feat: change styles * feat: refactoring * feat: format file * feat: optimization code * feat: isRejectedItem renamed isRejectedInterviewItem * feat: refactoring import useMemo --------- Co-authored-by: Maksim Shylau <[email protected]>
1 parent 2454eff commit 40c8653

File tree

1 file changed

+88
-54
lines changed

1 file changed

+88
-54
lines changed

‎client/src/components/Profile/ui/PrescreeningFeedback.tsx‎

Lines changed: 88 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -3,65 +3,103 @@ import { StageInterviewDetailedFeedback } from '@common/models/profile';
33
import { CODING_LEVELS, FeedbackStepId, SKILLS_LEVELS } from 'data/interviews/technical-screening';
44
import { InterviewFeedbackStepData, InterviewFeedbackValues, InterviewQuestion } from '@common/models';
55
import { Rating } from '@client/components/Rating';
6+
import { useMemo } from 'react';
67

78
const { Text, Title } = Typography;
89

9-
export function PrescreeningFeedback({ feedback }: { feedback: StageInterviewDetailedFeedback['feedback'] }) {
10-
const { steps } = feedback as { steps: Record<FeedbackStepId, InterviewFeedbackStepData> };
10+
const STYLES = {
11+
feedbackItemWidth: '80%',
12+
skillCommentWidth: '60%',
13+
};
1114

12-
const { theory, practice, english, decision, intro } = steps;
13-
const isRejected = intro.values?.interviewResult === 'missed';
15+
const FEEDBACK_CONFIG = [
16+
{
17+
id: 'decision_redFlags',
18+
label: 'Red flags',
19+
getValue: (steps: Record<FeedbackStepId, InterviewFeedbackStepData>) => steps.decision.values?.redFlags,
20+
isRejectedInterviewItem: false,
21+
},
22+
{
23+
id: 'decision_comment',
24+
label: 'Comment',
25+
getValue: (steps: Record<FeedbackStepId, InterviewFeedbackStepData>) => steps.decision.values?.comment,
26+
isRejectedInterviewItem: false,
27+
},
28+
{
29+
id: 'english_certificate',
30+
label: 'Certified level of English',
31+
getValue: (steps: Record<FeedbackStepId, InterviewFeedbackStepData>) => steps.english.values?.englishCertificate,
32+
isRejectedInterviewItem: false,
33+
},
34+
{
35+
id: 'english_selfAssessment',
36+
label: 'English level by interviewers opinion',
37+
getValue: (steps: Record<FeedbackStepId, InterviewFeedbackStepData>) => steps.english.values?.selfAssessment,
38+
isRejectedInterviewItem: false,
39+
},
40+
{
41+
id: 'english_comment',
42+
label: 'Where did the student learn English',
43+
getValue: (steps: Record<FeedbackStepId, InterviewFeedbackStepData>) => steps.english.values?.comment,
44+
isRejectedInterviewItem: false,
45+
},
46+
{
47+
id: 'intro_comment',
48+
label: 'Comment',
49+
getValue: (steps: Record<FeedbackStepId, InterviewFeedbackStepData>) => steps.intro.values?.comment,
50+
isRejectedInterviewItem: true,
51+
},
52+
];
1453

15-
if (isRejected) {
54+
const FeedbackItem = ({
55+
label,
56+
value,
57+
width = STYLES.feedbackItemWidth,
58+
}: {
59+
label: string;
60+
value: unknown;
61+
width?: string;
62+
}) => {
63+
if (typeof value === 'string' && value) {
1664
return (
17-
<Space direction="vertical">
18-
{intro.values?.comment && (
19-
<Space>
20-
<Text strong>Comment: </Text>
21-
<Text>{intro.values?.comment as string} </Text>
22-
</Space>
23-
)}
65+
<Space direction="vertical" style={{ width }}>
66+
<Text strong>{label}: </Text>
67+
<Text>{value}</Text>
2468
</Space>
2569
);
2670
}
71+
return null;
72+
};
73+
74+
export function PrescreeningFeedback({ feedback }: { feedback: StageInterviewDetailedFeedback['feedback'] }) {
75+
const { steps } = feedback as { steps: Record<FeedbackStepId, InterviewFeedbackStepData> };
76+
const { theory, practice } = steps;
77+
78+
const isRejected = steps.intro.values?.interviewResult === 'missed';
79+
80+
const displayItems = useMemo(
81+
() =>
82+
FEEDBACK_CONFIG.filter(item => item.isRejectedInterviewItem === isRejected).map(({ id, label, getValue }) => ({
83+
id,
84+
label,
85+
value: getValue(steps),
86+
})),
87+
88+
[steps, isRejected],
89+
);
2790

2891
return (
29-
<>
30-
<Space direction="vertical">
31-
{decision.values?.redFlags && (
32-
<Space>
33-
<Text strong>Red flags: </Text>
34-
<Text>{decision.values?.redFlags as string} </Text>
35-
</Space>
36-
)}
37-
{decision.values?.comment && (
38-
<Space>
39-
<Text strong>Comment: </Text>
40-
<Text>{decision.values?.comment as string} </Text>
41-
</Space>
42-
)}
43-
{english.values && (
44-
<>
45-
<Space>
46-
<Text strong>Certified level of English: </Text>
47-
<Text>{english.values?.englishCertificate as string} </Text>
48-
</Space>
49-
<Space>
50-
<Text strong>English level by interviewers opinion:</Text>
51-
<Text>{english.values?.selfAssessment as string} </Text>
52-
</Space>
53-
</>
54-
)}
55-
{english.values?.comment && (
56-
<Space>
57-
<Text strong>Where did the student learn English: </Text>
58-
<Text>{english.values?.comment as string} </Text>
59-
</Space>
60-
)}
61-
<SkillSection skills={theory.values} title="Theory" tooltips={SKILLS_LEVELS} />
62-
<SkillSection skills={practice.values} title="Practice" tooltips={CODING_LEVELS} />
63-
</Space>
64-
</>
92+
<Space direction="vertical" size={20}>
93+
{displayItems.map(item => (
94+
<FeedbackItem key={item.id} label={item.label} value={item.value} />
95+
))}
96+
{!isRejected && (
97+
<>
98+
<SkillSection skills={theory.values} title="Theory" tooltips={SKILLS_LEVELS} />
99+
<SkillSection skills={practice.values} title="Practice" tooltips={CODING_LEVELS} />
100+
</>
101+
)}
102+
</Space>
65103
);
66104
}
67105

@@ -77,14 +115,10 @@ function SkillSection({
77115
if (!skills) return null;
78116

79117
return (
80-
<Space direction="vertical" style={{ marginBottom: 20, width: '100%' }}>
118+
<Space direction="vertical">
81119
<Title level={4}>{title}</Title>
82120
<SkillTable skills={skills.questions as InterviewQuestion[]} tooltips={tooltips} />
83-
{skills.comment && (
84-
<Row>
85-
<Text strong>Comment: </Text>&nbsp;{skills.comment as string}
86-
</Row>
87-
)}
121+
<FeedbackItem label="Comment" value={skills?.comment} width={STYLES.skillCommentWidth} />
88122
</Space>
89123
);
90124
}

0 commit comments

Comments
 (0)