Skip to content

Commit e18a4ce

Browse files
kkartunovkkartunov
committed
MP-295 develop modal init
1 parent 0001bd6 commit e18a4ce

File tree

7 files changed

+147
-55
lines changed

7 files changed

+147
-55
lines changed

‎src/apps/profiles/src/components/DevelopmentDetailsModal/DevelopmentDetailsModal.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/DevelopmentDetailsModal/DevelopmentDetailsModal.tsx

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
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 './DevelopmentDetailsModal.module.scss'
12+
13+
type WebDesignViewTypes = 'CHALLENGES DETAILS'
14+
15+
interface DevelopmentDetailsModalProps {
16+
onClose: () => void
17+
developmentStats: MemberStats | undefined
18+
}
19+
20+
const DevelopmentDetailsModal: FC<DevelopmentDetailsModalProps> = (props: DevelopmentDetailsModalProps) => {
21+
// TODO: Enable this when we have challenges details data
22+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
23+
const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
24+
= useState<WebDesignViewTypes>('CHALLENGES DETAILS')
25+
26+
return (
27+
<BaseModal
28+
onClose={props.onClose}
29+
open
30+
size='body'
31+
title='Development'
32+
>
33+
34+
<div className={styles.container}>
35+
<div className='member-stat-header'>
36+
<div>
37+
<span className='member-stat-value'>{props.developmentStats?.wins}</span>
38+
Wins
39+
</div>
40+
<div>
41+
<span className='member-stat-value'>{props.developmentStats?.challenges}</span>
42+
Challenges
43+
</div>
44+
<div>
45+
<span className='member-stat-value'>
46+
{numberToFixed(props.developmentStats?.rank?.overallPercentile || 0)}
47+
%
48+
</span>
49+
Percentile
50+
</div>
51+
<div>
52+
<span className='member-stat-value'>
53+
{numberToFixed(props.developmentStats?.screeningSuccessRate || 0)}
54+
%
55+
</span>
56+
Screening Success Rate
57+
</div>
58+
<div>
59+
<span className='member-stat-value'>
60+
{numberToFixed(props.developmentStats?.avgPlacement || 0)}
61+
</span>
62+
Average Placement
63+
</div>
64+
</div>
65+
66+
{/* TODO: Enable this when we have challenges details data */}
67+
{/* <div className={styles.content}>
68+
<div className={styles.contentHeader}>
69+
<h4>{viewType}</h4>
70+
</div>
71+
72+
<div className={styles.contentBody}>
73+
{
74+
viewType === 'CHALLENGES DETAILS' && (
75+
<div />
76+
)
77+
78+
}
79+
</div>
80+
</div> */}
81+
</div>
82+
</BaseModal>
83+
)
84+
}
85+
86+
export default DevelopmentDetailsModal

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

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

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,4 @@ export * from './BannersIconsDetailsModal'
2626
export * from './WidgetMobileScreenDetailsModal'
2727
export * from './TestSuitesDetailsModal'
2828
export * from './SpecificationDetailsModal'
29+
export * from './DevelopmentDetailsModal'

‎src/apps/profiles/src/lib/helpers.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,11 @@ export function subTrackLabelToHumanName(label: string): string {
6767
return 'Logo Design'
6868
case 'DESIGN_FIRST_2_FINISH':
6969
return 'Design First2Finish'
70+
case 'DEVELOPMENT':
71+
return 'Development'
72+
case 'ARCHITECTURE':
73+
return 'Architecture'
74+
7075
default: return label
7176
}
7277

‎src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
ContentCreationDetailsModal,
1414
CopilotDetailsModal,
1515
DesignF2FDetailsModal,
16+
DevelopmentDetailsModal,
1617
F2FDetailsModal,
1718
FEDesignDetailsModal,
1819
FrontEndFlashDetailsModal,
@@ -77,6 +78,8 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
7778
= props.memberStats?.DEVELOP?.subTracks.find(subTrack => subTrack.name === 'TEST_SUITES')
7879
const specStats: MemberStats | undefined
7980
= props.memberStats?.DEVELOP?.subTracks.find(subTrack => subTrack.name === 'SPECIFICATION')
81+
const developmentStats: MemberStats | undefined
82+
= props.memberStats?.DEVELOP?.subTracks.find(subTrack => subTrack.name === 'DEVELOPMENT')
8083

8184
const [isDesignF2FsDetailsOpen, setIsDesignF2FsDetailsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
8285
= useState<boolean>(false)
@@ -122,6 +125,8 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
122125
= useState<boolean>(false)
123126
const [isSpecificationDetailsOpen, setIsSpecificationDetailsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
124127
= useState<boolean>(false)
128+
const [isDevelopmentDetailsOpen, setIsDevelopmentDetailsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
129+
= useState<boolean>(false)
125130

126131
function handleShowDSModal(): void {
127132
setIsDSDetailsOpen(!isDSDetailsOpen)
@@ -193,6 +198,9 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
193198
case 'SPECIFICATION':
194199
setIsSpecificationDetailsOpen(!isSpecificationDetailsOpen)
195200
break
201+
case 'DEVELOPMENT':
202+
setIsDevelopmentDetailsOpen(!isDevelopmentDetailsOpen)
203+
break
196204
// TODO: modal views for the following subtracks
197205
// are those all the subtracks?
198206
// case 'CONCEPTUALIZATION':
@@ -441,6 +449,13 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
441449
/>
442450
)}
443451

452+
{isDevelopmentDetailsOpen && (
453+
<DevelopmentDetailsModal
454+
onClose={bind(handleChallengeWinModalToggle, this, 'DEVELOPMENT')}
455+
developmentStats={developmentStats}
456+
/>
457+
)}
458+
444459
</div>
445460
)
446461
}

‎yarn.lock

Lines changed: 3 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1504,13 +1504,6 @@
15041504
dependencies:
15051505
regenerator-runtime "^0.13.11"
15061506

1507-
"@babel/runtime@^7.13.8", "@babel/runtime@^7.6.3":
1508-
version "7.22.6"
1509-
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
1510-
integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
1511-
dependencies:
1512-
regenerator-runtime "^0.13.11"
1513-
15141507
"@babel/runtime@^7.17.8", "@babel/runtime@^7.7.6":
15151508
version "7.21.0"
15161509
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
@@ -2728,7 +2721,7 @@
27282721
resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
27292722
integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
27302723

2731-
"@popperjs/core@^2.11.6", "@popperjs/core@^2.9.2":
2724+
"@popperjs/core@^2.9.2":
27322725
version "2.11.8"
27332726
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
27342727
integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
@@ -2738,13 +2731,6 @@
27382731
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.5.tgz#d5c65626add4c3c185a89aa5bd38b1e42daec075"
27392732
integrity sha512-my0Mycd+jruq/1lQuO5LBB6WTlL/e8DTCYWp44DfMTDcXz8DcTlgF0ISaLsGewt+ctHN+yA8xMq3q/N7uWJPug==
27402733

2741-
"@restart/hooks@^0.4.7":
2742-
version "0.4.9"
2743-
resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.9.tgz#ad858fb39d99e252cccce19416adc18fc3f18fcb"
2744-
integrity sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==
2745-
dependencies:
2746-
dequal "^2.0.2"
2747-
27482734
"@rollup/plugin-babel@^5.2.0":
27492735
version "5.3.1"
27502736
resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -4533,15 +4519,6 @@
45334519
"@types/scheduler" "*"
45344520
csstype "^3.0.2"
45354521

4536-
"@types/react@>=16.9.11":
4537-
version "18.2.14"
4538-
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.14.tgz#fa7a6fecf1ce35ca94e74874f70c56ce88f7a127"
4539-
integrity sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==
4540-
dependencies:
4541-
"@types/prop-types" "*"
4542-
"@types/scheduler" "*"
4543-
csstype "^3.0.2"
4544-
45454522
"@types/[email protected]":
45464523
version "2.6.2"
45474524
resolved "https://registry.yarnpkg.com/@types/redux-actions/-/redux-actions-2.6.2.tgz#5956d9e7b9a644358e2c0610f47b1fa3060edc21"
@@ -4686,11 +4663,6 @@
46864663
resolved "https://registry.yarnpkg.com/@types/validator/-/validator-13.7.10.tgz#f9763dc0933f8324920afa9c0790308eedf55ca7"
46874664
integrity sha512-t1yxFAR2n0+VO6hd/FJ9F2uezAZVWHLmpmlJzm1eX03+H7+HsuTAp7L8QJs+2pQCfWkP1+EXsGK9Z9v7o/qPVQ==
46884665

4689-
"@types/warning@^3.0.0":
4690-
version "3.0.0"
4691-
resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
4692-
integrity sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==
4693-
46944666
"@types/ws@^8.5.1":
46954667
version "8.5.3"
46964668
resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
@@ -7768,7 +7740,7 @@ dom-converter@^0.2.0:
77687740
dependencies:
77697741
utila "~0.4"
77707742

7771-
dom-helpers@^5.0.1, dom-helpers@^5.2.0:
7743+
dom-helpers@^5.0.1:
77727744
version "5.2.1"
77737745
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
77747746
integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
@@ -15381,20 +15353,6 @@ react-only-when@^1.0.2:
1538115353
resolved "https://registry.yarnpkg.com/react-only-when/-/react-only-when-1.0.2.tgz#a8a79b48dd6cfbd91ddc710674a94153e88039d3"
1538215354
integrity sha512-agE6l3L6bqaVuwNtjihTQ36M+VBfPS63KOzcNL4ZTmlwSxQPvhzIqmBWfiol0/wLYmKxCcBqgXkEJpvj5Kob8Q==
1538315355

15384-
react-overlays@^5.2.1:
15385-
version "5.2.1"
15386-
resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-5.2.1.tgz#49dc007321adb6784e1f212403f0fb37a74ab86b"
15387-
integrity sha512-GLLSOLWr21CqtJn8geSwQfoJufdt3mfdsnIiQswouuQ2MMPns+ihZklxvsTDKD3cR2tF8ELbi5xUsvqVhR6WvA==
15388-
dependencies:
15389-
"@babel/runtime" "^7.13.8"
15390-
"@popperjs/core" "^2.11.6"
15391-
"@restart/hooks" "^0.4.7"
15392-
"@types/warning" "^3.0.0"
15393-
dom-helpers "^5.2.0"
15394-
prop-types "^15.7.2"
15395-
uncontrollable "^7.2.1"
15396-
warning "^4.0.3"
15397-
1539815356
react-popper@^2.2.5, react-popper@^2.3.0:
1539915357
version "2.3.0"
1540015358
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
@@ -18046,16 +18004,6 @@ unbox-primitive@^1.0.2:
1804618004
has-symbols "^1.0.3"
1804718005
which-boxed-primitive "^1.0.2"
1804818006

18049-
uncontrollable@^7.2.1:
18050-
version "7.2.1"
18051-
resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-7.2.1.tgz#1fa70ba0c57a14d5f78905d533cf63916dc75738"
18052-
integrity sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==
18053-
dependencies:
18054-
"@babel/runtime" "^7.6.3"
18055-
"@types/react" ">=16.9.11"
18056-
invariant "^2.2.4"
18057-
react-lifecycles-compat "^3.0.4"
18058-
1805918007
unfetch@^4.2.0:
1806018008
version "4.2.0"
1806118009
resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be"
@@ -18491,7 +18439,7 @@ walker@^1.0.7, walker@^1.0.8:
1849118439
dependencies:
1849218440
makeerror "1.0.12"
1849318441

18494-
warning@^4.0.2, warning@^4.0.3:
18442+
warning@^4.0.2:
1849518443
version "4.0.3"
1849618444
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
1849718445
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==

0 commit comments

Comments
 (0)