Merge pull request #388 from topcoder-platform/feat/GAME-125

GAME-204 & GAME-206 #comment QA fixes -> gamification

Author: kkartunov

src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/AwardedMembersTab.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useState } from 'react'
 
 import { InfinitePageHandler, Sort, Table, TableColumn, tableGetDefaultSort } from '../../../../../lib'
 import { GameBadge, MemberBadgeAward } from '../../../game-lib'
@@ -9,7 +9,6 @@ import styles from './AwardedMembersTab.module.scss'
 
 export interface AwardedMembersTabProps {
     badge: GameBadge
-    forceRefresh?: boolean
 }
 
 const AwardedMembersTab: FC<AwardedMembersTabProps> = (props: AwardedMembersTabProps) => {
@@ -23,15 +22,6 @@ const AwardedMembersTab: FC<AwardedMembersTabProps> = (props: AwardedMembersTabP
 
     const pageHandler: InfinitePageHandler<MemberBadgeAward> = useGetGameBadgeAssigneesPage(props.badge, sort)
 
-    useEffect(() => {
-        if (props.forceRefresh && pageHandler && !pageHandler.isValidating) {
-            pageHandler.mutate()
-        }
-    }, [
-        props.forceRefresh,
-        pageHandler,
-    ])
-
     function onSortClick(newSort: Sort): void {
         setSort({ ...newSort })
     }

src-ts/tools/gamification-admin/pages/badge-detail/BadgeDetailPage.tsx

@@ -5,7 +5,9 @@ import ContentEditable from 'react-contenteditable'
 import { Params, useLocation, useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import sanitizeHtml from 'sanitize-html'
-import { KeyedMutator } from 'swr'
+import { KeyedMutator, useSWRConfig } from 'swr'
+// tslint:disable-next-line: no-submodule-imports
+import { FullConfiguration } from 'swr/dist/types'
 
 import { Breadcrumb, BreadcrumbItemModel, Button, ButtonProps, ContentLayout, IconOutline, IconSolid, LoadingSpinner, PageDivider, Sort, tableGetDefaultSort, TabsNavbar, TabsNavItem } from '../../../../lib'
 import { GamificationConfig } from '../../game-config'
@@ -79,8 +81,7 @@ const BadgeDetailPage: FC = () => {
 
     const [showActivatedModal, setShowActivatedModal]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
-    const [forceAwardedMembersTabRefresh, setForceAwardedMembersTabRefresh]: [boolean | undefined, Dispatch<SetStateAction<boolean | undefined>>]
-        = useState<boolean | undefined>()
+    const { cache, mutate }: FullConfiguration = useSWRConfig()
 
     useEffect(() => {
         if (newImageFile && newImageFile.length) {
@@ -266,15 +267,19 @@ const BadgeDetailPage: FC = () => {
 
     function onAssign(): void {
         // refresh awardedMembers data
-        setForceAwardedMembersTabRefresh(true)
+        // for all keys in the cache, containing `assignees`
+        (cache as Map<string, any>).forEach((v, key) => {
+            if (key.startsWith('https') && key.includes('assignees')) {
+                mutate(key, undefined)
+            }
+        })
         setActiveTab(BadgeDetailsTabViews.awardedMembers)
     }
 
     // default tab
     let activeTabElement: JSX.Element
         = <AwardedMembersTab
             badge={badgeDetailsHandler.data as GameBadge}
-            forceRefresh={forceAwardedMembersTabRefresh}
         />
     if (activeTab === BadgeDetailsTabViews.manualAward) {
         activeTabElement = <ManualAwardTab

src-ts/tools/gamification-admin/pages/badge-detail/BatchAwardTab/BatchAwardTab.tsx

@@ -50,7 +50,7 @@ const BatchAwardTab: FC<BatchAwardTabProps> = (props: BatchAwardTabProps) => {
             <div className={styles.batchFormWrap}>
                 <div>
                     <p>If you would like to assign multiple people to multiple badges, this area is for you. Download the template below, populate the file with your data, and upload that file to the right once completed.</p>
-                    <a target={'_blank'} href='/gamification-admin/bulk.sample.csv' download='bulk.smaple.csv' className={styles.templateLink}>Download template CSV</a>
+                    <a target={'_blank'} href='/gamification-admin/bulk.sample.csv' download='bulk.sample.csv' className={styles.templateLink}>Download template CSV</a>
                 </div>
                 <div className={styles.batchForm}>
                     <InputFilePicker