Merge remote-tracking branch 'origin' into TCA-505-reduce-js-bundle-size

Author: vas3a

README.md

@@ -34,7 +34,7 @@ All future user interfaces at Topcoder will be implemented here. Pre-existing us
 - Typescript
 - React Scripts
 
-This app uses React 17, Typescript 4, and Node 16.
+This app uses React 18, Typescript 4, and Node 16.
 
 ### IDE
 

package.json

@@ -21,122 +21,127 @@
         "report:coverage:text": "nyc report --reporter=text"
     },
     "dependencies": {
-        "@datadog/browser-logs": "^4.7.1",
+        "@datadog/browser-logs": "^4.21.2",
         "@heroicons/react": "^1.0.6",
-        "apexcharts": "^3.35.3",
-        "axios": "^0.26.1",
+        "apexcharts": "^3.36.0",
+        "axios": "^1.1.2",
         "browser-cookies": "^1.2.0",
-        "classnames": "^2.3.1",
-        "contentful": "^9.1.33",
+        "classnames": "^2.3.2",
+        "contentful": "^9.2.5",
         "crypto-js": "^4.1.1",
         "customize-cra": "^1.0.0",
-        "dompurify": "^2.3.10",
+        "dompurify": "^2.4.0",
         "highlight.js": "^11.6.0",
         "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
-        "marked": "4.0.3",
-        "moment": "^2.29.3",
-        "moment-timezone": "^0.5.34",
+        "markdown-it": "^13.0.1",
+        "marked": "4.1.1",
+        "moment": "^2.29.4",
+        "moment-timezone": "^0.5.37",
         "prop-types": "^15.8.1",
+        "qs": "^6.11.0",
         "rc-checkbox": "^2.3.2",
-        "react": "^17.0.2",
+        "react": "^18.2.0",
         "react-apexcharts": "^1.4.0",
         "react-app-rewired": "^2.2.1",
-        "react-dom": "^17.0.2",
+        "react-contenteditable": "^3.3.6",
+        "react-dom": "^18.2.0",
         "react-elastic-carousel": "^0.11.5",
         "react-gtm-module": "^2.0.11",
-        "react-redux": "^8.0.2",
-        "react-redux-toastr": "^7.6.8",
+        "react-redux": "^8.0.4",
+        "react-redux-toastr": "^7.6.10",
         "react-responsive-modal": "^6.2.0",
-        "react-router-dom": "^6.2.1",
-        "react-scripts": "5.0.0",
-        "react-select": "^5.3.2",
-        "react-spinners": "^0.13.1",
-        "react-toastify": "^8.2.0",
-        "react-tooltip": "^4.2.21",
+        "react-router-dom": "^6.4.2",
+        "react-scripts": "5.0.1",
+        "react-select": "^5.5.0",
+        "react-spinners": "^0.13.6",
+        "react-toastify": "^9.0.8",
+        "react-tooltip": "^4.4.0",
         "redux": "^4.2.0",
         "redux-logger": "^3.0.6",
-        "redux-promise-middleware": "^6.1.2",
+        "redux-promise-middleware": "^6.1.3",
         "redux-thunk": "^2.4.1",
-        "sass": "^1.49.8",
-        "styled-components": "^5.3.5",
+        "sanitize-html": "^2.7.2",
+        "sass": "^1.55.0",
+        "styled-components": "^5.3.6",
         "swr": "^1.3.0",
-        "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.4",
-        "typescript": "^4.6.3",
-        "uuid": "^8.3.2"
+        "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.26",
+        "typescript": "^4.8.4",
+        "uuid": "^9.0.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.7.5",
-        "@babel/plugin-syntax-jsx": "^7.17.12",
-        "@babel/plugin-transform-runtime": "^7.8.3",
-        "@babel/preset-env": "^7.7.6",
-        "@babel/preset-react": "^7.7.4",
-        "@babel/preset-typescript": "^7.16.7",
-        "@babel/runtime": "^7.8.7",
+        "@babel/core": "^7.19.3",
+        "@babel/plugin-syntax-jsx": "^7.18.6",
+        "@babel/plugin-transform-runtime": "^7.19.1",
+        "@babel/preset-env": "^7.19.4",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.18.6",
+        "@babel/runtime": "^7.19.4",
         "@cypress/code-coverage": "^3.10.0",
-        "@stripe/react-stripe-js": "1.7.2",
-        "@stripe/stripe-js": "1.29.0",
-        "@testing-library/jest-dom": "^5.14.1",
-        "@testing-library/react": "^12.0.0",
-        "@testing-library/user-event": "^13.2.1",
+        "@stripe/react-stripe-js": "1.13.0",
+        "@stripe/stripe-js": "1.41.0",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^14.4.3",
         "@types/axios": "^0.14.0",
         "@types/cypress": "^1.1.3",
-        "@types/dompurify": "^2.3.3",
+        "@types/dompurify": "^2.3.4",
         "@types/highlightjs": "^9.12.2",
-        "@types/jest": "^27.0.1",
-        "@types/lodash": "^4.14.182",
-        "@types/marked": "4.0.3",
-        "@types/node": "^18.7.13",
-        "@types/reach__router": "^1.3.10",
-        "@types/react": "^18.0.5",
-        "@types/react-dom": "^18.0.1",
+        "@types/jest": "^29.1.2",
+        "@types/lodash": "^4.14.186",
+        "@types/markdown-it": "^12.2.3",
+        "@types/marked": "4.0.7",
+        "@types/node": "^18.8.5",
+        "@types/reach__router": "^1.3.11",
+        "@types/react": "^18.0.21",
+        "@types/react-dom": "^18.0.6",
         "@types/react-gtm-module": "^2.0.1",
         "@types/react-redux-toastr": "^7.6.2",
         "@types/react-router-dom": "^5.3.3",
+        "@types/sanitize-html": "^2.6.2",
         "@types/segment-analytics": "^0.0.34",
-        "@types/systemjs": "^6.1.0",
+        "@types/systemjs": "^6.1.1",
         "@types/uuid": "^8.3.4",
-        "@wdio/junit-reporter": "^7.24.0",
-        "autoprefixer": "^9.8.6",
+        "@wdio/junit-reporter": "^7.25.1",
+        "autoprefixer": "^10.4.12",
         "babel-eslint": "^11.0.0-beta.2",
-        "babel-jest": "^24.9.0",
-        "babel-plugin-inline-react-svg": "^1.1.2",
-        "babel-plugin-module-resolver": "^4.0.0",
+        "babel-jest": "^29.2.0",
+        "babel-plugin-inline-react-svg": "^2.0.1",
+        "babel-plugin-module-resolver": "^4.1.0",
         "babel-plugin-react-css-modules": "^5.2.6",
-        "concurrently": "^5.0.1",
-        "config": "^3.3.6",
-        "cross-env": "^7.0.2",
-        "cypress": "^10.6.0",
-        "eslint": "^8.18.0",
-        "eslint-config-prettier": "^6.7.0",
+        "concurrently": "^7.4.0",
+        "config": "^3.3.8",
+        "cross-env": "^7.0.3",
+        "cypress": "^10.10.0",
+        "eslint": "^8.25.0",
+        "eslint-config-prettier": "^8.5.0",
         "eslint-config-react-app": "^7.0.1",
-        "eslint-config-react-important-stuff": "^2.0.0",
+        "eslint-config-react-important-stuff": "^3.0.0",
         "eslint-plugin-cypress": "^2.12.1",
-        "eslint-plugin-prettier": "^3.1.1",
+        "eslint-plugin-prettier": "^4.2.1",
         "file-loader": "^6.2.0",
-        "husky": "^8.0.0",
+        "husky": "^8.0.1",
         "identity-obj-proxy": "^3.0.0",
         "istanbul-lib-coverage": "^3.2.0",
-        "jest": "^25.2.7",
-        "jest-cli": "^25.2.7",
+        "jest": "^29.2.0",
+        "jest-cli": "^29.2.0",
         "lint-staged": "^13.0.3",
         "nyc": "^15.1.0",
-        "postcss-loader": "^4.0.4",
-        "postcss-scss": "^3.0.2",
-        "prettier": "^2.0.4",
-        "pretty-quick": "^2.0.1",
-        "resolve-url-loader": "^3.1.2",
-        "sass-loader": "^10.0.5",
+        "postcss-loader": "^7.0.1",
+        "postcss-scss": "^4.0.5",
+        "prettier": "^2.7.1",
+        "pretty-quick": "^3.1.3",
+        "resolve-url-loader": "^5.0.0",
+        "sass-loader": "^13.1.0",
         "serve": "^14.0.1",
         "start-server-and-test": "^1.14.0",
-        "style-loader": "^2.0.0",
-        "systemjs-webpack-interop": "^2.1.2",
+        "style-loader": "^3.3.1",
+        "systemjs-webpack-interop": "^2.3.7",
         "tslint": "^6.1.3",
-        "webpack": "^4.41.2",
-        "webpack-cli": "^3.3.10",
-        "webpack-config-single-spa-react": "^1.0.3",
-        "webpack-dev-server": "^3.9.0",
-        "webpack-merge": "^4.2.2"
+        "webpack-cli": "^4.10.0",
+        "webpack-config-single-spa-react": "^4.0.3",
+        "webpack-dev-server": "^4.11.1",
+        "webpack-merge": "^5.8.0"
     },
     "eslintConfig": {
         "extends": [

src-ts/lib/functions/xhr-functions/xhr.functions.ts

@@ -74,6 +74,8 @@ function interceptError(instance: AxiosInstance): void {
 
             // if there is server error message, then return it inside `message` property of error
             error.message = error?.response?.data?.message || error.message
+            // if there is server errors data, then return it inside `errors` property of error
+            error.errors = error?.response?.data?.errors
 
             return Promise.reject(error)
         }

src-ts/lib/loading-spinner/LoadingSpinner.module.scss

@@ -21,4 +21,8 @@
     &.show {
         opacity: 1;
     }
+    &.overlay {
+      position: fixed;
+      background: $white-100-opacity-10;
+    }
 }

src-ts/lib/loading-spinner/LoadingSpinner.tsx

@@ -9,19 +9,25 @@ import { PuffLoader } from 'react-spinners'
 
 import styles from './LoadingSpinner.module.scss'
 
+// This will determine whether we want to show the loading indicator on top of existing content or if its shown
+// without any content
+type LoadingSpinnerType = 'Overlay' | 'Normal'
+
 export interface LoadingSpinnerProps {
     className?: string
     hide?: boolean
+    type?: LoadingSpinnerType
 }
 
-const LoadingSpinner: FC<LoadingSpinnerProps> = ({ hide, className }: LoadingSpinnerProps) => {
+const LoadingSpinner: FC<LoadingSpinnerProps> = ({ hide, className, type = 'Normal' }: LoadingSpinnerProps) => {
 
     if (!!hide) {
         return <></>
     }
 
+    const isOverlay: boolean = type === 'Overlay'
     return (
-        <div className={classNames(styles['loading-spinner'], styles.show, className)}>
+        <div className={classNames(styles['loading-spinner'], styles.show, {[styles.overlay]: isOverlay}, className)}>
             <PuffLoader color={'#2196f3'} loading={true} size={100} />
         </div>
     )

src-ts/lib/member-autocomplete/InputHandleAutocomplete.module.scss

@@ -0,0 +1,5 @@
+@import "../styles/variables/palette";
+
+.memberSelect {
+    color: $black-60;
+}

src-ts/lib/member-autocomplete/InputHandleAutocomplete.tsx

@@ -0,0 +1,94 @@
+import { FC, FocusEvent } from 'react'
+import { MultiValue, StylesConfig } from 'react-select'
+// tslint:disable-next-line: no-submodule-imports
+import AsyncSelect from 'react-select/async'
+
+import { InputWrapper } from '../form/form-groups/form-input/input-wrapper'
+
+import { membersAutocompete, MembersAutocompeteResult } from './input-handle-functions'
+import styles from './InputHandleAutocomplete.module.scss'
+
+export interface InputHandleAutocompleteProps {
+    readonly className?: string
+    readonly dirty?: boolean
+    readonly disabled?: boolean
+    readonly error?: string
+    readonly hideInlineErrors?: boolean
+    readonly hint?: string
+    readonly label?: string | JSX.Element
+    readonly name: string
+    readonly onBlur?: (event: FocusEvent<HTMLInputElement>) => void
+    readonly onChange: (newValue: Array<MembersAutocompeteResult>) => void
+    readonly placeholder?: string
+    readonly tabIndex: number
+    readonly value?: Array<MembersAutocompeteResult>
+}
+
+const InputHandleAutocomplete: FC<InputHandleAutocompleteProps> = (props: InputHandleAutocompleteProps) => {
+    const customStyles: StylesConfig<any> = {
+        control: (provided) => ({
+            ...provided,
+            border: 'none',
+        }),
+        input: (provided) => ({
+            ...provided,
+            color: 'inherit',
+            fontSize: 16,
+        }),
+        multiValue: (provided) => ({
+            ...provided,
+            borderRadius: 50,
+        }),
+        multiValueLabel: (provided) => ({
+            ...provided,
+            fontSize: 12,
+        }),
+        option: (provided) => ({
+            ...provided,
+            borderBottom: '1px solid #E9E9E9',
+            color: 'inherit',
+            fontSize: 16,
+            fontWeight: 400,
+            padding: 16,
+        }),
+        placeholder: (provided) => ({
+            ...provided,
+            color: 'inherit',
+            fontSize: 16,
+            fontWeight: 400,
+        }),
+        valueContainer: (provided) => ({
+            ...provided,
+            padding: 0,
+        }),
+    }
+
+    return (
+        <InputWrapper
+            {...props}
+            dirty={!!props.dirty}
+            disabled={!!props.disabled}
+            label={props.label || props.name}
+            hideInlineErrors={props.hideInlineErrors}
+            type='text'
+        >
+            <AsyncSelect
+                className={styles.memberSelect}
+                cacheOptions
+                getOptionLabel={({ handle }) => handle}
+                getOptionValue={({ userId }) => userId}
+                isMulti
+                key={props.value?.length}
+                loadOptions={membersAutocompete}
+                styles={customStyles}
+                placeholder={props.placeholder}
+                onBlur={props.onBlur}
+                onChange={(newValue: MultiValue<MembersAutocompeteResult>) => props.onChange(newValue as Array<MembersAutocompeteResult>)}
+                value={props.value}
+                isDisabled={props.disabled}
+            />
+        </InputWrapper>
+    )
+}
+
+export default InputHandleAutocomplete

src-ts/lib/member-autocomplete/index.ts

@@ -0,0 +1 @@
+export { default as InputHandleAutocomplete } from './InputHandleAutocomplete'

src-ts/lib/member-autocomplete/input-handle-functions.ts

@@ -0,0 +1,23 @@
+import qs from 'qs'
+
+import { xhrGetAsync } from '..'
+import { EnvironmentConfig } from '../../config'
+
+export interface MembersAutocompeteQuery {
+    term: string
+}
+
+export interface MembersAutocompeteResult {
+    firstName: string
+    handle: string
+    lastName: string
+    userId: string
+}
+
+export async function membersAutocompete(term: string): Promise<Array<MembersAutocompeteResult>> {
+    const query: MembersAutocompeteQuery = {
+        term,
+    }
+
+    return xhrGetAsync(`${EnvironmentConfig.API.V5}/members/autocomplete?${qs.stringify(query)}`)
+}