Topcoder Admin App - Misc Bug Fix

src/apps/admin/src/challenge-management/ManageUserPage/ManageUserPage.tsx

@@ -28,6 +28,7 @@ import {
     PageContent,
     PageHeader,
 } from '../../lib/components'
+import { TABLE_PAGINATION_ITEM_PER_PAGE } from '../../config/index.config'
 import {
     ChallengeFilterCriteria,
     ChallengeResource,
@@ -77,7 +78,7 @@ export const ManageUserPage: FC = () => {
         Dispatch<SetStateAction<ChallengeResourceFilterCriteria>>,
     ] = useState<ChallengeResourceFilterCriteria>({
         page: 1,
-        perPage: 5,
+        perPage: TABLE_PAGINATION_ITEM_PER_PAGE,
         roleId: '',
     })
     const [users, setUsers]: [

src/apps/admin/src/config/index.config.ts

@@ -4,7 +4,7 @@ import { InputSelectOption } from '~/libs/ui/lib/components/form/form-groups/for
 /**
  * Common config for ui.
  */
-const EMPTY_OPTION: InputSelectOption = { label: '', value: '' }
+const EMPTY_OPTION: InputSelectOption = { label: 'all', value: '' }
 export const USER_STATUS_SELECT_OPTIONS: InputSelectOption[] = [
     EMPTY_OPTION,
     { label: 'active', value: 'active' },

src/apps/admin/src/lib/components/ChallengeFilters/ChallengeFilters.tsx

@@ -54,7 +54,7 @@ const ChallengeFilters: FC<ChallengeFiltersProps> = props => {
             label: item,
             value: item,
         })
-        const emptyOption: InputSelectOption = { label: '', value: '' }
+        const emptyOption: InputSelectOption = { label: 'All', value: '' }
 
         return {
             challengeStatusOptions: [

src/apps/admin/src/lib/components/ChallengeUserFilters/ChallengeUserFilters.tsx

@@ -1,5 +1,4 @@
 import { ChangeEvent, FC, useContext, useEffect, useMemo, useRef } from 'react'
-import _ from 'lodash'
 
 import { Button, InputSelect, InputSelectOption } from '~/libs/ui'
 
@@ -25,7 +24,6 @@ interface ChallengeUserFiltersProps {
 }
 
 const ChallengeUserFilters: FC<ChallengeUserFiltersProps> = props => {
-    const DEFAULT_ROLE_FILTER_NAME = 'Submitter'
     const { resourceRoles, loadResourceRoles }: ChallengeManagementContextType
         = useContext(ChallengeManagementContext)
     const {
@@ -39,14 +37,10 @@ const ChallengeUserFilters: FC<ChallengeUserFiltersProps> = props => {
             label: item.name,
             value: item.id,
         })
-        const emptyOption: InputSelectOption = { label: '', value: '' }
-        const o: InputSelectOption | undefined = _.filter(resourceRoles, {
-            name: DEFAULT_ROLE_FILTER_NAME,
-        })
-            .map(role2Option)[0]
+        const emptyOption: InputSelectOption = { label: 'All', value: '' }
 
         return {
-            defaultResourceRoleOption: o,
+            defaultResourceRoleOption: emptyOption,
             resourceRoleOptions: [
                 emptyOption,
                 ...resourceRoles.map(role2Option),

src/apps/admin/src/lib/components/common/Pagination/Pagination.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useMemo, useState } from 'react'
+import { FC, useEffect, useMemo, useState } from 'react'
 
 import { useWindowSize, WindowSize } from '~/libs/shared'
 import { Button, IconOutline } from '~/libs/ui'
@@ -19,98 +19,39 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
     const MAX_PAGE_DISPLAY = 5
     const MAX_PAGE_MOBILE_DISPLAY = 3
     const { width: screenWidth }: WindowSize = useWindowSize()
+    const isMobile = useMemo(() => screenWidth < 767, [screenWidth])
 
     const [displayPages, setDisplayPages] = useState<number[]>([])
-    const mobiledisplayPages = useMemo(() => {
-        if (displayPages.length <= MAX_PAGE_MOBILE_DISPLAY) {
-            return displayPages
-        }
-
-        const LEFT = MAX_PAGE_MOBILE_DISPLAY % 2 === 0 ? MAX_PAGE_MOBILE_DISPLAY / 2 : (MAX_PAGE_MOBILE_DISPLAY + 1) / 2
-        const RIGHT = MAX_PAGE_MOBILE_DISPLAY - LEFT
-        const index = displayPages.indexOf(props.page)
-        let start = Math.max(0, index - LEFT)
-        let end = Math.min(index + RIGHT, displayPages.length)
-        if (end - start < MAX_PAGE_MOBILE_DISPLAY) {
-            start = Math.min(Math.max(0, end - MAX_PAGE_MOBILE_DISPLAY), start)
-        }
-
-        if (end - start < MAX_PAGE_MOBILE_DISPLAY) {
-            end = Math.min(Math.max(start + MAX_PAGE_MOBILE_DISPLAY, end), displayPages.length)
-        }
-
-        return displayPages.slice(start, end)
-    }, [displayPages, props.page, screenWidth]) // eslint-disable-line react-hooks/exhaustive-deps, max-len -- unneccessary dependency: screenWidth
-
-    const createDisplayPages = useCallback((reset: boolean) => {
-        // eslint-disable-next-line complexity
-        setDisplayPages(oldDisplayPages => {
-            let expectedDisplayPages = oldDisplayPages
-            if (expectedDisplayPages.includes(props.page) && !reset) {
-                return [...expectedDisplayPages]
-            }
-
-            if (reset) {
-                expectedDisplayPages = []
-            }
-
-            // Initial
-            if (expectedDisplayPages.length === 0) {
-                const pages = []
-                for (
-                    let i = props.page - MAX_PAGE_DISPLAY + 1;
-                    i <= props.page + MAX_PAGE_DISPLAY;
-                    i++
-                ) {
-                    if (i >= 1 && i <= totalPages && pages.length < MAX_PAGE_DISPLAY) {
-                        pages.push(i)
-                    }
-                }
-
-                return pages
-            }
 
-            // Go next
-            if (props.page > expectedDisplayPages[expectedDisplayPages.length - 1]) {
-                const pages = []
-                for (
-                    let i = props.page - MAX_PAGE_DISPLAY + 1;
-                    i <= props.page;
-                    i++
-                ) {
-                    if (i >= 1) {
-                        pages.push(i)
-                    }
+    useEffect(() => {
+        let pages: number[] = []
+        if (props.page) {
+            pages = [props.page]
+            const maxDisplayPage = isMobile
+                ? MAX_PAGE_MOBILE_DISPLAY
+                : MAX_PAGE_DISPLAY
+            let haveAvailablePage = true
+            let i = 1
+            while (haveAvailablePage && pages.length < maxDisplayPage) {
+                const prevPage = props.page - i
+                haveAvailablePage = false
+                if (prevPage > 0) {
+                    pages = [prevPage, ...pages]
+                    haveAvailablePage = true
                 }
 
-                return pages
-            }
-
-            // Go previous
-            if (props.page < expectedDisplayPages[0] && props.page >= 1) {
-                const pages = []
-                for (
-                    let i = props.page;
-                    i < props.page + MAX_PAGE_DISPLAY;
-                    i++
-                ) {
-                    pages.push(i)
+                const nextPage = props.page + i
+                if (nextPage <= totalPages) {
+                    pages = [...pages, nextPage]
+                    haveAvailablePage = true
                 }
 
-                return pages
+                i += 1
             }
+        }
 
-            return [...expectedDisplayPages]
-        })
-    }, [props.page, totalPages])
-
-    useEffect(() => {
-        createDisplayPages(true)
-    }, [totalPages]) // eslint-disable-line react-hooks/exhaustive-deps
-
-    useEffect(() => {
-        createDisplayPages(false)
-    }, [props.page]) // eslint-disable-line react-hooks/exhaustive-deps
+        setDisplayPages(pages)
+    }, [totalPages, props.page, isMobile]) // eslint-disable-line react-hooks/exhaustive-deps
 
     const createHandlePageClick = (p: number) => () => {
         if (p === 0 || p > totalPages || p === props.page) {
@@ -148,7 +89,7 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                 className={styles.previous}
             />
             <div className={styles.pageNumbers}>
-                {(screenWidth < 767 ? mobiledisplayPages : displayPages).map(i => (
+                {displayPages.map(i => (
                     <Button
                         key={`page-${i}`}
                         secondary

src/apps/admin/src/lib/services/challenge-management.service.ts

@@ -88,6 +88,10 @@ export const getChallengeResources = async (
 export const getResourceEmails = async (
     users: ChallengeResource[],
 ): Promise<ResourceEmail[]> => {
+    if (!users.length) {
+        return Promise.resolve([])
+    }
+
     let qs: string
     if (users.length > 1) {
         qs = users.map(usr => `userIds=${usr.memberId}`)

src/apps/admin/src/lib/services/user.service.ts

@@ -18,6 +18,10 @@ import {
 export const getMemberSuggestionsByHandle = async (
     handle: string,
 ): Promise<Array<{ handle: string; userId: number }>> => {
+    if (!handle) {
+        return []
+    }
+
     type v3Response<T> = { result: { content: T } }
     const data = await xhrGetAsync<
         v3Response<Array<{ handle: string; userId: number }>>

src/apps/admin/src/lib/utils/api.ts

@@ -49,6 +49,8 @@ export const createChallengeQueryString = (
 
     if (filterCriteria.status) filter += `&status=${filterCriteria.status}`
 
+    filter += '&sortBy=created&sortOrder=desc'
+
     return filter
 }