Merge pull request #341 from topcoder-platform/gamification

Gamification Sprint 4 - deploy for QA

Author: kkartunov

package.json

@@ -34,14 +34,17 @@
         "highlight.js": "^11.6.0",
         "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
+        "markdown-it": "^13.0.1",
         "marked": "4.0.3",
         "moment": "^2.29.3",
         "moment-timezone": "^0.5.34",
         "prop-types": "^15.8.1",
+        "qs": "^6.11.0",
         "rc-checkbox": "^2.3.2",
         "react": "^17.0.2",
         "react-apexcharts": "^1.4.0",
         "react-app-rewired": "^2.2.1",
+        "react-contenteditable": "^3.3.6",
         "react-dom": "^17.0.2",
         "react-elastic-carousel": "^0.11.5",
         "react-gtm-module": "^2.0.11",
@@ -85,6 +88,7 @@
         "@types/highlightjs": "^9.12.2",
         "@types/jest": "^27.0.1",
         "@types/lodash": "^4.14.182",
+        "@types/markdown-it": "^12.2.3",
         "@types/marked": "4.0.3",
         "@types/node": "^18.7.13",
         "@types/reach__router": "^1.3.10",

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/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)}`)
+}

src-ts/tools/gamification-admin/game-config/gamification-config.model.ts

@@ -1,5 +1,6 @@
 export interface GamificationConfigModel {
   ACCEPTED_BADGE_MIME_TYPES: string
+  CSV_HEADER: Array<string>,
   MAX_BADGE_IMAGE_FILE_SIZE: number
   ORG_ID: string
   PAGE_SIZE: number

src-ts/tools/gamification-admin/game-config/gamification.default.config.ts

@@ -2,6 +2,7 @@ import { GamificationConfigModel } from './gamification-config.model'
 
 export const GamificationConfigDefault: GamificationConfigModel = {
   ACCEPTED_BADGE_MIME_TYPES: 'image/svg+xml,image/svg',
+  CSV_HEADER: ['tc_handle', 'badge_id'],
   MAX_BADGE_IMAGE_FILE_SIZE: 5000000, // 5mb in bytes
   ORG_ID: '6052dd9b-ea80-494b-b258-edd1331e27a3',
   PAGE_SIZE: 12,

src-ts/tools/gamification-admin/game-lib/game-badge.model.ts

@@ -6,5 +6,11 @@ export interface GameBadge {
   badge_name: string
   badge_status: string
   id: string
+  member_badges?: Array<{
+    awarded_at: string,
+    awarded_by: string,
+    user_handle: string,
+    user_id: string,
+  }>
   organization_id: string
 }

src-ts/tools/gamification-admin/game-lib/index.ts

@@ -1,3 +1,4 @@
 export * from './game-badge.model'
 export * from './use-get-game-badges-page.hook'
 export * from './use-gamification-breadcrumb.hook'
+export * from './use-get-game-badge-details.hook'