Skip to content

Commit b24db75

Browse files
kkartunovkkartunov
committed
MP-19 ux details
1 parent f80d283 commit b24db75

File tree

25 files changed

+740
-200
lines changed

25 files changed

+740
-200
lines changed

‎src/apps/profiles/src/components/AssemblyDetailsModal/AssemblyDetailsModal.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import {
1515
useStatsHistory,
1616
} from '~/libs/core'
1717

18+
import { numberToFixed } from '../../lib'
19+
1820
import { RATING_CHART_CONFIG, RATING_DISTRO_CHART_CONFIG } from './chart-configs'
1921
import styles from './AssemblyDetailsModal.module.scss'
2022

@@ -106,8 +108,7 @@ const AssemblyDetailsModal: FC<AssemblyDetailsModalProps> = (props: AssemblyDeta
106108
</div>
107109
<div>
108110
<span className='member-stat-value'>
109-
{Number(props.assemblyStats?.rank.overallPercentile || 0)
110-
.toFixed(2)}
111+
{numberToFixed(props.assemblyStats?.rank.overallPercentile || 0)}
111112
%
112113
</span>
113114
Percentile

‎src/apps/profiles/src/components/BugHuntDetailsModal/BugHuntDetailsModal.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import {
66
MemberStats,
77
} from '~/libs/core'
88

9+
import { numberToFixed } from '../../lib'
10+
911
import styles from './BugHuntDetailsModal.module.scss'
1012

1113
type BugHuntViewTypes = 'CHALLENGES DETAILS'
@@ -32,8 +34,7 @@ const BugHuntDetailsModal: FC<BugHuntDetailsModalProps> = (props: BugHuntDetails
3234
<div className='member-stat-header'>
3335
<div>
3436
<span className='member-stat-value'>
35-
{Number(props.bugHuntStats?.rank.overallPercentile || 0)
36-
.toFixed(2)}
37+
{numberToFixed(props.bugHuntStats?.rank.overallPercentile || 0)}
3738
%
3839
</span>
3940
Percentile

‎src/apps/profiles/src/components/CodeDetailsModal/CodeDetailsModal.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import {
1515
useStatsHistory,
1616
} from '~/libs/core'
1717

18+
import { numberToFixed } from '../../lib'
19+
1820
import { RATING_CHART_CONFIG, RATING_DISTRO_CHART_CONFIG } from './chart-configs'
1921
import styles from './CodeDetailsModal.module.scss'
2022

@@ -90,8 +92,7 @@ const CodeDetailsModal: FC<CodeDetailsModalProps> = (props: CodeDetailsModalProp
9092
<div className='member-stat-header'>
9193
<div>
9294
<span className='member-stat-value'>
93-
{Number(props.codeStats?.rank.overallPercentile || 0)
94-
.toFixed(2)}
95+
{numberToFixed(props.codeStats?.rank.overallPercentile || 0)}
9596
%
9697
</span>
9798
Percentile

‎src/apps/profiles/src/components/ContentCreationDetailsModal/ContentCreationDetailsModal.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import {
1616
useStatsHistory,
1717
} from '~/libs/core'
1818

19+
import { numberToFixed } from '../../lib'
20+
1921
import { RATING_CHART_CONFIG, RATING_DISTRO_CHART_CONFIG } from './chart-configs'
2022
import styles from './ContentCreationDetailsModal.module.scss'
2123

@@ -104,8 +106,7 @@ const ContentCreationDetailsModal: FC<ContentCreationDetailsModalProps> = (props
104106
</div>
105107
<div>
106108
<span className='member-stat-value'>
107-
{Number(props.contentCreationStats?.rank.overallPercentile || 0)
108-
.toFixed(2)}
109+
{numberToFixed(props.contentCreationStats?.rank.overallPercentile || 0)}
109110
%
110111
</span>
111112
Percentile

‎src/apps/profiles/src/components/DesignF2FDetailsModal/DesignF2FDetailsModal.module.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@import "@libs/ui/styles/includes";
2+
3+
.container {
4+
display: flex;
5+
flex-direction: column;
6+
7+
.content {
8+
.contentHeader {
9+
display: flex;
10+
justify-content: space-between;
11+
align-items: center;
12+
border-bottom: 1px solid $black-10;
13+
margin: $sp-4 0;
14+
padding-bottom: $sp-2;
15+
16+
.contentHeaderActions {
17+
button {
18+
margin-right: $sp-2;
19+
20+
&:last-child {
21+
margin-right: 0;
22+
}
23+
}
24+
}
25+
}
26+
27+
.contentBody {
28+
height: 385px;
29+
overflow: auto;
30+
31+
@include ltelg {
32+
height: auto;
33+
}
34+
}
35+
}
36+
}

‎src/apps/profiles/src/components/DesignF2FDetailsModal/DesignF2FDetailsModal.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/* eslint-disable complexity */
2+
import { Dispatch, FC, SetStateAction, useState } from 'react'
3+
4+
import { BaseModal } from '~/libs/ui'
5+
import {
6+
MemberStats,
7+
} from '~/libs/core'
8+
9+
import { numberToFixed } from '../../lib'
10+
11+
import styles from './DesignF2FDetailsModal.module.scss'
12+
13+
type WebDesignViewTypes = 'CHALLENGES DETAILS'
14+
15+
interface DesignF2FDetailsModalProps {
16+
isDesignF2FDetailsOpen: boolean
17+
onClose: () => void
18+
designF2FStats: MemberStats | undefined
19+
}
20+
21+
const DesignF2FDetailsModal: FC<DesignF2FDetailsModalProps> = (props: DesignF2FDetailsModalProps) => {
22+
const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
23+
= useState<WebDesignViewTypes>('CHALLENGES DETAILS')
24+
25+
return (
26+
<BaseModal
27+
onClose={props.onClose}
28+
open={props.isDesignF2FDetailsOpen}
29+
size='body'
30+
title='DESIGN FIRST2FINISH'
31+
>
32+
33+
<div className={styles.container}>
34+
<div className='member-stat-header'>
35+
<div>
36+
<span className='member-stat-value'>{props.designF2FStats?.wins}</span>
37+
Wins
38+
</div>
39+
<div>
40+
<span className='member-stat-value'>{props.designF2FStats?.challenges}</span>
41+
Challenges
42+
</div>
43+
<div>
44+
<span className='member-stat-value'>
45+
{numberToFixed(props.designF2FStats?.rank?.overallPercentile || 0)}
46+
%
47+
</span>
48+
Percentile
49+
</div>
50+
<div>
51+
<span className='member-stat-value'>
52+
{numberToFixed(props.designF2FStats?.screeningSuccessRate || 0)}
53+
%
54+
</span>
55+
Screening Success Rate
56+
</div>
57+
<div>
58+
<span className='member-stat-value'>{props.designF2FStats?.avgPlacement}</span>
59+
Average Placement
60+
</div>
61+
</div>
62+
63+
<div className={styles.content}>
64+
<div className={styles.contentHeader}>
65+
<h4>{viewType}</h4>
66+
</div>
67+
68+
<div className={styles.contentBody}>
69+
{
70+
viewType === 'CHALLENGES DETAILS' && (
71+
<div />
72+
)
73+
74+
}
75+
</div>
76+
</div>
77+
</div>
78+
</BaseModal>
79+
)
80+
}
81+
82+
export default DesignF2FDetailsModal

‎src/apps/profiles/src/components/DesignF2FDetailsModal/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as DesignF2FDetailsModal } from './DesignF2FDetailsModal'

‎src/apps/profiles/src/components/F2FDetailsModal/F2FDetailsModal.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import {
66
MemberStats,
77
} from '~/libs/core'
88

9+
import { numberToFixed } from '../../lib'
10+
911
import styles from './F2FDetailsModal.module.scss'
1012

1113
type BugHuntViewTypes = 'CHALLENGES DETAILS'
@@ -32,8 +34,7 @@ const F2FDetailsModal: FC<F2FDetailsModalProps> = (props: F2FDetailsModalProps)
3234
<div className='member-stat-header'>
3335
<div>
3436
<span className='member-stat-value'>
35-
{Number(props.f2fStats?.rank.overallPercentile || 0)
36-
.toFixed(2)}
37+
{numberToFixed(props.f2fStats?.rank.overallPercentile || 0)}
3738
%
3839
</span>
3940
Percentile

‎src/apps/profiles/src/components/LogoDesignDetailsModal/LogoDesignDetailsModal.module.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@import "@libs/ui/styles/includes";
2+
3+
.container {
4+
display: flex;
5+
flex-direction: column;
6+
7+
.content {
8+
.contentHeader {
9+
display: flex;
10+
justify-content: space-between;
11+
align-items: center;
12+
border-bottom: 1px solid $black-10;
13+
margin: $sp-4 0;
14+
padding-bottom: $sp-2;
15+
16+
.contentHeaderActions {
17+
button {
18+
margin-right: $sp-2;
19+
20+
&:last-child {
21+
margin-right: 0;
22+
}
23+
}
24+
}
25+
}
26+
27+
.contentBody {
28+
height: 385px;
29+
overflow: auto;
30+
31+
@include ltelg {
32+
height: auto;
33+
}
34+
}
35+
}
36+
}

‎src/apps/profiles/src/components/LogoDesignDetailsModal/LogoDesignDetailsModal.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/* eslint-disable complexity */
2+
import { Dispatch, FC, SetStateAction, useState } from 'react'
3+
4+
import { BaseModal } from '~/libs/ui'
5+
import {
6+
MemberStats,
7+
} from '~/libs/core'
8+
9+
import { numberToFixed } from '../../lib'
10+
11+
import styles from './LogoDesignDetailsModal.module.scss'
12+
13+
type WebDesignViewTypes = 'CHALLENGES DETAILS'
14+
15+
interface LogoDesignDetailsModalProps {
16+
isLogoDesignDetailsOpen: boolean
17+
onClose: () => void
18+
logoDesignStats: MemberStats | undefined
19+
}
20+
21+
const LogoDesignDetailsModal: FC<LogoDesignDetailsModalProps> = (props: LogoDesignDetailsModalProps) => {
22+
const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
23+
= useState<WebDesignViewTypes>('CHALLENGES DETAILS')
24+
25+
return (
26+
<BaseModal
27+
onClose={props.onClose}
28+
open={props.isLogoDesignDetailsOpen}
29+
size='body'
30+
title='LOGO DESIGN'
31+
>
32+
33+
<div className={styles.container}>
34+
<div className='member-stat-header'>
35+
<div>
36+
<span className='member-stat-value'>{props.logoDesignStats?.wins}</span>
37+
Wins
38+
</div>
39+
<div>
40+
<span className='member-stat-value'>{props.logoDesignStats?.challenges}</span>
41+
Challenges
42+
</div>
43+
<div>
44+
<span className='member-stat-value'>
45+
{numberToFixed(props.logoDesignStats?.rank?.overallPercentile || 0)}
46+
%
47+
</span>
48+
Percentile
49+
</div>
50+
<div>
51+
<span className='member-stat-value'>
52+
{numberToFixed(props.logoDesignStats?.screeningSuccessRate || 0)}
53+
%
54+
</span>
55+
Screening Success Rate
56+
</div>
57+
<div>
58+
<span className='member-stat-value'>{props.logoDesignStats?.avgPlacement}</span>
59+
Average Placement
60+
</div>
61+
</div>
62+
63+
<div className={styles.content}>
64+
<div className={styles.contentHeader}>
65+
<h4>{viewType}</h4>
66+
</div>
67+
68+
<div className={styles.contentBody}>
69+
{
70+
viewType === 'CHALLENGES DETAILS' && (
71+
<div />
72+
)
73+
74+
}
75+
</div>
76+
</div>
77+
</div>
78+
</BaseModal>
79+
)
80+
}
81+
82+
export default LogoDesignDetailsModal

0 commit comments

Comments
 (0)