feat: adjustments

gisce · Feb 6, 2025 · 5c17b3c · 5c17b3c
1 parent ff787ba
commit 5c17b3c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 49 deletions.
diff --git a/src/components/ui/PaginationHeader/PaginationHeader.tsx b/src/components/ui/PaginationHeader/PaginationHeader.tsx
@@ -50,11 +50,6 @@ const PaginationHeaderComponent = (props: PaginationHeaderProps) => {
     [onPageSizeChange, onRequestPageChange],
   );
 
-  const mustShowSelectAllGlobalRecordsButton = useMemo(
-    () => onSelectAllGlobalRecords !== undefined,
-    [onSelectAllGlobalRecords],
-  );
-
   const summary = useMemo(() => {
     if (total === undefined) return null;
     if (total === 0) return t("no_results");
@@ -84,7 +79,7 @@ const PaginationHeaderComponent = (props: PaginationHeaderProps) => {
   const selectAllRecordsProps: SelectAllRecordsRowProps = useMemo(
     () => ({
       currentPageSelectedCount,
-      currentPageTotalCount: pageSize,
+      currentPageSize: pageSize,
       totalRecordsCount: total,
       totalSelectedCount,
       onSelectAllRecords: onSelectAllGlobalRecords!,
@@ -98,20 +93,20 @@ const PaginationHeaderComponent = (props: PaginationHeaderProps) => {
     ],
   );
 
+  const hasSelectionFeature = onSelectAllGlobalRecords !== undefined;
+  const columnSpan = hasSelectionFeature ? 8 : 12;
+
   return (
     <Row align="bottom" className="pb-4" wrap={false}>
-      <Col span={mustShowSelectAllGlobalRecordsButton ? 8 : 12}>
+      <Col span={columnSpan}>
         <Pagination {...paginationProps} />
       </Col>
-      {mustShowSelectAllGlobalRecordsButton && (
+      {hasSelectionFeature && (
         <Col span={8} className="text-center">
           <SelectAllRecordsRow {...selectAllRecordsProps} />
         </Col>
       )}
-      <Col
-        span={mustShowSelectAllGlobalRecordsButton ? 8 : 12}
-        className="text-right"
-      >
+      <Col span={columnSpan} className="text-right">
         {summary}
       </Col>
     </Row>

diff --git a/src/components/ui/SelectAllRecordsRow/SelectAllRecordsRow.tsx b/src/components/ui/SelectAllRecordsRow/SelectAllRecordsRow.tsx
@@ -11,38 +11,16 @@ export const Container = styled.div`
   justify-content: center;
 `;
 
-const SelectAllRecordsRowComponent = (props: SelectAllRecordsRowProps) => {
-  const {
-    currentPageSelectedCount,
-    currentPageTotalCount,
-    totalRecordsCount,
-    totalSelectedCount,
-    onSelectAllRecords,
-  } = props;
-
+const SelectAllRecordsRowComponent = ({
+  currentPageSelectedCount,
+  currentPageSize,
+  totalRecordsCount,
+  totalSelectedCount,
+  onSelectAllRecords,
+}: SelectAllRecordsRowProps) => {
   const [loading, setLoading] = useState(false);
   const { t } = useLocale();
 
-  // Memoize translations to avoid recalculating on every render
-  const translations = useMemo(
-    () => ({
-      recordsSelected: t("recordsSelected"),
-      selectAllRecords: t("selectAllRecords"),
-      allRecordsSelected: t("allRecordsSelected"),
-    }),
-    [t],
-  );
-
-  // Don't show anything if the current page is not fully selected
-  if (currentPageSelectedCount < currentPageTotalCount) {
-    return null;
-  }
-
-  // Don't show anything if we don't have more records than the current page
-  if (totalRecordsCount <= currentPageTotalCount) {
-    return null;
-  }
-
   const handleClick = useCallback(
     async (event: React.MouseEvent) => {
       event.preventDefault();
@@ -57,12 +35,27 @@ const SelectAllRecordsRowComponent = (props: SelectAllRecordsRowProps) => {
     [onSelectAllRecords],
   );
 
-  // If all records across all pages are selected, show the total count
+  // Don't render anything if there are no records
+  if (totalRecordsCount === 0) {
+    return null;
+  }
+
+  // Don't render if current page is not fully selected
+  if (currentPageSelectedCount < currentPageSize) {
+    return null;
+  }
+
+  // Don't render if we don't have more records than current page
+  if (totalRecordsCount <= currentPageSize) {
+    return null;
+  }
+
+  // If all records are selected, show the total count message
   if (totalSelectedCount === totalRecordsCount) {
     return (
       <Container>
         <span style={{ fontWeight: 600 }}>
-          {translations.allRecordsSelected.replace(
+          {t("allRecordsSelected").replace(
             "{totalRecords}",
             totalSelectedCount.toString(),
           )}
@@ -71,11 +64,11 @@ const SelectAllRecordsRowComponent = (props: SelectAllRecordsRowProps) => {
     );
   }
 
-  // Show option to select all records when current page is selected but not all pages
+  // Show the select all option
   return (
     <Container>
       <span>
-        {translations.recordsSelected.replace(
+        {t("recordsSelected").replace(
           "{numberOfSelectedRows}",
           currentPageSelectedCount.toString(),
         ) + " "}
@@ -84,7 +77,7 @@ const SelectAllRecordsRowComponent = (props: SelectAllRecordsRowProps) => {
           <Spin />
         ) : (
           <Link onClick={handleClick} style={{ fontWeight: 600 }}>
-            {translations.selectAllRecords.replace(
+            {t("selectAllRecords").replace(
               "{totalRecords}",
               totalRecordsCount.toString(),
             )}

diff --git a/src/components/ui/SelectAllRecordsRow/SelectAllRecordsRow.types.ts b/src/components/ui/SelectAllRecordsRow/SelectAllRecordsRow.types.ts
@@ -1,11 +1,11 @@
 export type SelectAllRecordsRowProps = {
   /** Number of records selected in the current page */
   currentPageSelectedCount: number;
-  /** Total number of records in the current page */
-  currentPageTotalCount: number;
+  /** Size of the current page */
+  currentPageSize: number;
   /** Total number of records across all pages */
   totalRecordsCount: number;
-  /** Total number of records selected across all pages */
+  /** Total number of selected records across all pages */
   totalSelectedCount: number;
   /** Callback to select all records across all pages */
   onSelectAllRecords: () => Promise<void>;