Merge pull request #1194 from topcoder-platform/PM-1502

Fix pagination text and no records message

Author: himaniraghav3

src/apps/review/src/lib/components/TableScorecards/TableScorecards.tsx

@@ -33,6 +33,9 @@ export const TableScorecards: FC<Props> = (props: Props) => {
     const { width: screenWidth }: WindowSize = useWindowSize()
     const isTablet = useMemo(() => screenWidth <= 1000, [screenWidth])
 
+    const start = (props.page - 1) * (props.perPage ?? 0) + 1
+    const end = Math.min(props.page * (props.perPage ?? 0), props.metadata?.total ?? 0)
+
     const columns = useMemo<TableColumn<Scorecard>[]>(
         () => [
             {
@@ -153,12 +156,15 @@ export const TableScorecards: FC<Props> = (props: Props) => {
             )}
             <div className={styles.pagination}>
                 <div className={styles.paginationText}>
-                    Showing 1-
-                    {props.perPage}
+                    Showing
+                    {' '}
+                    {start}
+                    -
+                    {end}
                     {' '}
                     of
                     {' '}
-                    {props.metadata.total}
+                    {props.metadata?.total ?? 0}
                     {' '}
                     results
                 </div>

src/apps/review/src/pages/scorecards/ScorecardsListPage/ScorecardsListPage.tsx

@@ -94,7 +94,7 @@ export const ScorecardsListPage: FC<{}> = () => {
             ) : (
                 <>
                     {scorecards.length === 0 ? (
-                        <TableNoRecord />
+                        <TableNoRecord message='No scorecards were found that meet your criteria.' />
                     ) : (
                         <TableScorecards
                             onClone={handleScorecardClone}