Merge remote-tracking branch 'origin/dev' into TCA-455_npm-modules-update

Author: vas3a

package.json

@@ -7,6 +7,7 @@
         "start": "sh start-ssl.sh",
         "start:brooke": "sudo sh start-ssl-brooke.sh",
         "build": "yarn react-app-rewired build",
+        "postbuild": "gzip build/static/js/*.js && gzip build/static/css/*.css",
         "lint": "tslint 'src-ts/**/*.{ts,tsx}' && eslint 'src*/**/*.{js,jsx,ts,tsx}'",
         "lint:fix": "tslint 'src-ts/**/*.{ts,tsx}' --fix && eslint 'src*/**/*.{js,jsx,ts,tsx}' --fix",
         "tslint": "tslint 'src-ts/**/*.{ts,tsx}'",
@@ -34,14 +35,17 @@
         "highlight.js": "^11.6.0",
         "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
+        "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": "^18.2.0",
         "react-apexcharts": "^1.4.0",
         "react-app-rewired": "^2.2.1",
+        "react-contenteditable": "^3.3.6",
         "react-dom": "^18.2.0",
         "react-elastic-carousel": "^0.11.5",
         "react-gtm-module": "^2.0.11",
@@ -58,6 +62,7 @@
         "redux-logger": "^3.0.6",
         "redux-promise-middleware": "^6.1.3",
         "redux-thunk": "^2.4.1",
+        "sanitize-html": "^2.7.2",
         "sass": "^1.55.0",
         "styled-components": "^5.3.6",
         "swr": "^1.3.0",
@@ -85,6 +90,7 @@
         "@types/highlightjs": "^9.12.2",
         "@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",
@@ -93,6 +99,7 @@
         "@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.1",
         "@types/uuid": "^8.3.4",

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/lib/pagination/infinite-page-handler.model.ts

@@ -1,5 +1,10 @@
+import { KeyedMutator } from 'swr'
+
+import { InfinitePageDao } from './infinite-page-dao.model'
+
 export interface InfinitePageHandler<T> {
     data?: ReadonlyArray<T>
     getAndSetNext: () => void
     hasMore: boolean
+    mutate: KeyedMutator<Array<InfinitePageDao<T>>>
 }

src-ts/lib/pagination/use-infinite-page.hook.ts

@@ -8,7 +8,7 @@ import { InfinitePageHandler } from './infinite-page-handler.model'
 export function useGetInfinitePage<T>(getKey: (index: number, previousPageData: InfinitePageDao<T>) => string | undefined):
     InfinitePageHandler<T> {
 
-    const { data, setSize, size }: SWRInfiniteResponse<InfinitePageDao<T>> = useSWRInfinite(getKey, { revalidateFirstPage: false })
+    const { data, mutate, setSize, size }: SWRInfiniteResponse<InfinitePageDao<T>> = useSWRInfinite(getKey, { revalidateFirstPage: false })
 
     // flatten version of badges paginated data
     const outputData: ReadonlyArray<T> = flatten(map(data, dao => dao.rows))
@@ -21,5 +21,6 @@ export function useGetInfinitePage<T>(getKey: (index: number, previousPageData:
         data: outputData,
         getAndSetNext,
         hasMore: outputData.length < (data?.[0]?.count || 0),
+        mutate,
     }
 }

src-ts/lib/styles/mixins/_layout.mixins.scss

@@ -8,7 +8,7 @@
         padding-left: $space-xxl;
         padding-right: $space-xxl;
     }
-    
+
     @include xxs {
         padding-left: $space-lg;
         padding-right: $space-lg;
@@ -23,20 +23,27 @@
 }
 
 @mixin scrollbar {
+    // firefox's solution for "customizing" scrollbars
+    & {
+        scrollbar-width: thin;
+        scrollbar-color: rgba($tc-black, 0.4) transparent;
+    }
+
     &::-webkit-scrollbar-track {
         background: transparent;
     }
+
     &::-webkit-scrollbar {
         width: 5px;
         height: 5px;
     }
-    
+
     &::-webkit-scrollbar-thumb {
         background-color: rgba($tc-black, 0.4);
         border-radius: 4px;
-        
+
         &:hover {
             background-color: rgba($tc-black, 0.6);
         }
     }
-}
+}

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