Skip to content

Commit f62d276

Browse files
brooketopcoderbrooketopcoder
committed
PROD-1558 add account settings page #time 15m
1 parent 0eae43f commit f62d276

File tree

129 files changed

+3521
-741
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

129 files changed

+3521
-741
lines changed

‎jest.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
2-
rootDir: "src",
2+
rootDir: "src-ts",
33
transform: {
44
"^.+\\.(j|t)sx?$": "babel-jest",
55
},

‎package.json

+17-3
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,27 @@
1010
"format": "prettier --write \"./**\"",
1111
"test": "cross-env BABEL_ENV=test jest",
1212
"watch-tests": "cross-env BABEL_ENV=test jest --watch",
13-
"coverage": "cross-env BABEL_ENV=test jest --coverage"
13+
"coverage": "cross-env BABEL_ENV=test jest --coverage",
14+
"bsouza": "sh start-bsouza.sh",
15+
"tslint": "tslint 'src-ts/**/*.{ts,tsx}'",
16+
"tslint:fix": "tslint 'src-ts/**/*.{ts,tsx}' --fix"
1417
},
1518
"devDependencies": {
1619
"@babel/core": "^7.7.5",
1720
"@babel/plugin-transform-runtime": "^7.8.3",
1821
"@babel/preset-env": "^7.7.6",
1922
"@babel/preset-react": "^7.7.4",
23+
"@babel/preset-typescript": "^7.16.7",
2024
"@babel/runtime": "^7.8.7",
2125
"@stripe/react-stripe-js": "1.3.0",
2226
"@stripe/stripe-js": "1.3.0",
2327
"@testing-library/jest-dom": "^5.5.0",
2428
"@testing-library/react": "^9.4.0",
25-
"@types/jest": "^25.2.1",
29+
"@types/jest": "^25.2.3",
30+
"@types/node": "^17.0.24",
31+
"@types/react": "^18.0.5",
32+
"@types/react-dom": "^18.0.1",
33+
"@types/react-redux-toastr": "^7.6.2",
2634
"@types/systemjs": "^6.1.0",
2735
"autoprefixer": "^9.8.6",
2836
"babel-eslint": "^11.0.0-beta.2",
@@ -57,10 +65,13 @@
5765
"webpack-merge": "^4.2.2"
5866
},
5967
"dependencies": {
68+
"@datadog/browser-logs": "^4.7.1",
69+
"@heroicons/react": "^1.0.6",
6070
"@reach/router": "^1.3.4",
6171
"apexcharts": "^3.32.1",
6272
"axios": "^0.21.0",
6373
"body-parser": "^1.19.0",
74+
"browser-cookies": "^1.2.0",
6475
"classnames": "^2.2.6",
6576
"config": "^3.3.6",
6677
"cors": "^2.8.5",
@@ -79,17 +90,20 @@
7990
"react-dropzone": "^11.4.2",
8091
"react-gtm-module": "^2.0.11",
8192
"react-redux": "^7.2.2",
82-
"react-redux-toastr": "^7.6.5",
93+
"react-redux-toastr": "^7.6.8",
8394
"react-responsive-modal": "^6.2.0",
95+
"react-router-dom": "^6.3.0",
8496
"react-select": "^4.0.2",
8597
"react-spinners": "^0.11.0",
98+
"react-toastify": "^8.2.0",
8699
"react-tooltip": "^4.2.21",
87100
"reactjs-heap": "^1.0.3",
88101
"redux": "^4.0.5",
89102
"redux-logger": "^3.0.6",
90103
"redux-promise-middleware": "^6.1.2",
91104
"redux-thunk": "^2.3.0",
92105
"tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.4",
106+
"typescript": "^4.6.3",
93107
"uuid": "^8.3.2"
94108
},
95109
"browserslist": [

‎src-ts/config/constants.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export enum ToolTitle {
2+
designLib = 'Design Library',
3+
settings = 'Profile Settings',
4+
work = 'Work',
5+
}

‎src-ts/config/environments/app-host-environment.enum.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export enum AppHostEnvironment {
2+
bsouza = 'bsouza',
3+
default = 'default',
4+
dev = 'dev',
5+
prod = 'prod',
6+
}

‎src-ts/config/environments/environment.bsouza.config.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { GlobalConfig } from '../../lib'
2+
3+
import { AppHostEnvironment } from './app-host-environment.enum'
4+
import { EnvironmentConfigDefault } from './environment.default.config'
5+
6+
export const EnvironmentConfigBsouza: GlobalConfig = {
7+
...EnvironmentConfigDefault,
8+
ENV: AppHostEnvironment.bsouza,
9+
}

‎src-ts/config/environments/environment.config.ts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { GlobalConfig } from '../../lib'
2+
3+
import { AppHostEnvironment } from './app-host-environment.enum'
4+
import { EnvironmentConfigBsouza } from './environment.bsouza.config'
5+
import { EnvironmentConfigDefault } from './environment.default.config'
6+
import { EnvironmentConfigDev } from './environment.dev.config'
7+
import { EnvironmentConfigProd } from './environment.prod.config'
8+
9+
function getEnvironmentConfig(): GlobalConfig {
10+
11+
switch (process.env.REACT_APP_HOST_ENV) {
12+
13+
case AppHostEnvironment.bsouza:
14+
return EnvironmentConfigBsouza
15+
16+
case AppHostEnvironment.default:
17+
return EnvironmentConfigDefault
18+
19+
case AppHostEnvironment.dev:
20+
return EnvironmentConfigDev
21+
22+
case AppHostEnvironment.prod:
23+
return EnvironmentConfigProd
24+
25+
default:
26+
return EnvironmentConfigDefault
27+
}
28+
}
29+
30+
const enviromentConfig: GlobalConfig = {
31+
...getEnvironmentConfig(),
32+
}
33+
34+
export default enviromentConfig

‎src-ts/config/environments/environment.default.config.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { GlobalConfig } from '../../lib'
2+
3+
import { AppHostEnvironment } from './app-host-environment.enum'
4+
5+
export const EnvironmentConfigDefault: GlobalConfig = {
6+
API: {
7+
V3: 'https://api.topcoder-dev.com/v3',
8+
V5: 'https://api.topcoder-dev.com/v5',
9+
},
10+
ENV: AppHostEnvironment.default,
11+
LOGGING: {
12+
PUBLIC_TOKEN: 'puba0825671e469d16f940c5a30dc738f11',
13+
SERVICE: 'platform-ui',
14+
},
15+
REAUTH_OFFSET: 55,
16+
TAG_MANAGER_ID: undefined,
17+
URL: {
18+
ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder-dev.com',
19+
},
20+
}

‎src-ts/config/environments/environment.dev.config.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { GlobalConfig } from '../../lib'
2+
import { ToolTitle } from '../constants'
3+
4+
import { AppHostEnvironment } from './app-host-environment.enum'
5+
import { EnvironmentConfigDefault } from './environment.default.config'
6+
7+
export const EnvironmentConfigDev: GlobalConfig = {
8+
...EnvironmentConfigDefault,
9+
DISABLED_TOOLS: [
10+
ToolTitle.designLib,
11+
],
12+
ENV: AppHostEnvironment.dev,
13+
TAG_MANAGER_ID: 'GTM-W7B537Z',
14+
}

‎src-ts/config/environments/environment.prod.config.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { GlobalConfig } from '../../lib'
2+
import { ToolTitle } from '../constants'
3+
4+
import { AppHostEnvironment } from './app-host-environment.enum'
5+
import { EnvironmentConfigDefault } from './environment.default.config'
6+
7+
export const EnvironmentConfigProd: GlobalConfig = {
8+
...EnvironmentConfigDefault,
9+
API: {
10+
V3: 'https://api.topcoder.com/v3',
11+
V5: 'https://api.topcoder.com/v5',
12+
},
13+
DISABLED_TOOLS: [
14+
ToolTitle.designLib,
15+
],
16+
ENV: AppHostEnvironment.prod,
17+
TAG_MANAGER_ID: 'GTM-MXXQHG8',
18+
URL: {
19+
ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder.com',
20+
},
21+
}

‎src-ts/config/environments/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as EnvironmentConfig } from './environment.config'

‎src-ts/config/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './constants'
2+
export * from './environments'

‎src-ts/declarations.d.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
declare module '*.html' {
2+
const htmlFile: string
3+
export = htmlFile
4+
}
5+
6+
declare module '*.scss' {
7+
const scssFile: { [style: string]: any }
8+
export = scssFile
9+
}
10+
11+
declare module 'tc-auth-lib'
12+
13+
declare module '@topcoder/micro-frontends-navbar-app'
14+
15+
declare module 'react-redux-toastr'

‎src-ts/lib/button/Button.test.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import '@testing-library/jest-dom'
2+
3+
describe('<Button />', () => {
4+
5+
test('it should render the content', () => { })
6+
})

‎src-ts/lib/button/Button.tsx

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import classNames from 'classnames'
2+
import { FC } from 'react'
3+
import { Link } from 'react-router-dom'
4+
5+
import '../styles/index.scss'
6+
import { IconOutline } from '../svgs'
7+
8+
export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl'
9+
export type ButtonStyle = 'link' | 'primary' | 'secondary' | 'tertiary' | 'text'
10+
export type ButtonType = 'button' | 'submit'
11+
12+
export interface ButtonProps {
13+
readonly buttonStyle?: ButtonStyle
14+
readonly className?: string
15+
readonly disable?: boolean
16+
readonly label: string
17+
readonly onClick?: (event?: any) => void
18+
readonly route?: string
19+
readonly size?: ButtonSize
20+
readonly tabIndex: number
21+
readonly type?: ButtonType
22+
readonly url?: string
23+
}
24+
25+
const Button: FC<ButtonProps> = (props: ButtonProps) => {
26+
27+
const classes: string = getButtonClasses(props)
28+
const clickHandler: (event?: any) => void = getClickHandler(props)
29+
30+
// if there is a url, this is a link button
31+
if (!!props.url) {
32+
return (
33+
<a
34+
className={classes}
35+
href={props.url}
36+
onClick={clickHandler}
37+
tabIndex={props.tabIndex}
38+
>
39+
{props.label}
40+
</a>
41+
)
42+
}
43+
44+
if (!!props.route) {
45+
return (
46+
<Link
47+
className={classes}
48+
onClick={clickHandler}
49+
tabIndex={props.tabIndex}
50+
to={props.route}
51+
>
52+
{props.label}
53+
</Link>
54+
)
55+
}
56+
57+
return (
58+
<button
59+
className={classes}
60+
onClick={clickHandler}
61+
tabIndex={props.tabIndex}
62+
type={props.type || 'button'}
63+
>
64+
{props.label}
65+
{props.buttonStyle === 'link' && <IconOutline.ArrowRightIcon />}
66+
</button>
67+
)
68+
}
69+
70+
function getButtonClasses(props: ButtonProps): string {
71+
const classes: string = classNames(
72+
'button',
73+
props.className,
74+
props.buttonStyle || 'primary',
75+
`button-${props.size || 'md'}`,
76+
!!props.disable ? 'disabled' : undefined
77+
)
78+
return classes
79+
}
80+
81+
function getClickHandler(props: ButtonProps): (event?: any) => void {
82+
return props.onClick || (() => undefined)
83+
}
84+
85+
export default Button

‎src-ts/lib/button/index.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export { default as Button } from './Button'
2+
export
3+
// tslint:disable-next-line: no-unused-expression
4+
type { ButtonSize } from './Button'
5+
export
6+
// tslint:disable-next-line: no-unused-expression
7+
type { ButtonStyle } from './Button'
8+
export
9+
// tslint:disable-next-line: no-unused-expression
10+
type { ButtonType } from './Button'

‎src-ts/lib/card/Card.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import classNames from 'classnames'
2+
import { FC, ReactNode, SVGProps } from 'react'
3+
4+
import { ButtonStyle } from '../button'
5+
import '../styles/index.scss'
6+
7+
export interface CardProps {
8+
buttonStyle?: ButtonStyle
9+
children: ReactNode
10+
icon?: FC<SVGProps<SVGSVGElement>>
11+
onClick?: () => void
12+
title: string
13+
}
14+
15+
const Card: FC<CardProps> = (props: CardProps) => {
16+
17+
const Icon: FC<SVGProps<SVGSVGElement>> | undefined = props.icon
18+
19+
return (
20+
<div
21+
className={classNames('card', !!props.onClick ? 'clickable' : undefined, props.buttonStyle)}
22+
onClick={props.onClick}
23+
>
24+
25+
<div className='card-title'>
26+
<h3 className='body-medium-bold'>
27+
{props.title}
28+
</h3>
29+
{!!Icon && <Icon />}
30+
</div>
31+
32+
{props.children}
33+
34+
</div>
35+
)
36+
}
37+
38+
export default Card

‎src-ts/lib/card/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Card } from './Card'

‎src-ts/lib/content-layout/ContentLayout.module.scss

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@import '../styles/';
2+
3+
.content {
4+
@include content-height;
5+
padding: 0 $pad-xxxxl;
6+
display: grid;
7+
grid-template-columns: 1fr;
8+
justify-content: center;
9+
10+
@include md {
11+
padding: 0 $pad-xxl;
12+
}
13+
14+
@include ltesm {
15+
padding: 0;
16+
}
17+
18+
.content-outer {
19+
display: flex;
20+
justify-content: center;
21+
22+
.content-inner {
23+
flex: 1;
24+
max-width: $xxl-min;
25+
padding: 0;
26+
display: flex;
27+
flex-direction: column;
28+
29+
.page-header {
30+
31+
h1 {
32+
border-bottom: $border solid $black-5;
33+
color: $black-100;
34+
}
35+
}
36+
}
37+
}
38+
}

0 commit comments

Comments
 (0)