chore: rename props for clarity

Parkreiner · Parkreiner · commit 92daa520367e · 2023-11-07T22:42:27.000Z
diff --git a/site/src/components/PaginationWidget/PaginationNavButtons.tsx b/site/src/components/PaginationWidget/PaginationNavButtons.tsx
@@ -13,10 +13,10 @@ import { useTheme } from "@emotion/react";
 
 type NavProps = {
   currentPage: number;
-  onChange: (newPage: number) => void;
+  onPageChange: (newPage: number) => void;
 };
 
-export function LeftNavButton({ currentPage, onChange }: NavProps) {
+export function LeftNavButton({ currentPage, onPageChange }: NavProps) {
   const isFirstPage = currentPage <= 1;
 
   return (
@@ -26,7 +26,7 @@ export function LeftNavButton({ currentPage, onChange }: NavProps) {
       aria-label="Previous page"
       onClick={() => {
         if (!isFirstPage) {
-          onChange(currentPage - 1);
+          onPageChange(currentPage - 1);
         }
       }}
     >
@@ -35,7 +35,7 @@ export function LeftNavButton({ currentPage, onChange }: NavProps) {
   );
 }
 
-export function RightNavButton({ currentPage, onChange }: NavProps) {
+export function RightNavButton({ currentPage, onPageChange }: NavProps) {
   const isLastPage = currentPage <= 1;
 
   return (
@@ -45,7 +45,7 @@ export function RightNavButton({ currentPage, onChange }: NavProps) {
       aria-label="Previous page"
       onClick={() => {
         if (!isLastPage) {
-          onChange(currentPage + 1);
+          onPageChange(currentPage + 1);
         }
       }}
     >
diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.stories.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.stories.tsx
@@ -5,9 +5,9 @@ const meta: Meta<typeof PaginationWidgetBase> = {
   title: "components/PaginationWidgetBase",
   component: PaginationWidgetBase,
   args: {
-    page: 1,
-    limit: 12,
-    count: 200,
+    currentPage: 1,
+    pageSize: 12,
+    totalRecords: 200,
   },
 };
 
@@ -17,19 +17,17 @@ type Story = StoryObj<typeof PaginationWidgetBase>;
 export const MoreThan8Pages: Story = {};
 
 export const LessThan8Pages: Story = {
-  args: {
-    count: 84,
-  },
+  args: { totalRecords: 84 },
 };
 
 export const MoreThan7PagesWithActivePageCloseToStart: Story = {
-  args: { page: 2, limit: 12 },
+  args: { currentPage: 2, pageSize: 12 },
 };
 
 export const MoreThan7PagesWithActivePageFarFromBoundaries: Story = {
-  args: { page: 4, limit: 12 },
+  args: { currentPage: 4, pageSize: 12 },
 };
 
 export const MoreThan7PagesWithActivePageCloseToEnd: Story = {
-  args: { page: 17, limit: 12 },
+  args: { currentPage: 17, pageSize: 12 },
 };
diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
@@ -6,21 +6,21 @@ import { buildPagedList } from "./utils";
 import { LeftNavButton, RightNavButton } from "./PaginationNavButtons";
 
 export type PaginationWidgetBaseProps = {
-  count: number;
-  page: number;
-  limit: number;
-  onChange: (newPage: number) => void;
+  currentPage: number;
+  pageSize: number;
+  totalRecords: number;
+  onPageChange: (newPage: number) => void;
 };
 
 export const PaginationWidgetBase = ({
-  count,
-  limit,
-  onChange,
-  page: currentPage,
+  currentPage,
+  pageSize,
+  totalRecords,
+  onPageChange,
 }: PaginationWidgetBaseProps) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
-  const totalPages = Math.ceil(count / limit);
+  const totalPages = Math.ceil(totalRecords / pageSize);
 
   if (totalPages < 2) {
     return null;
@@ -37,7 +37,7 @@ export const PaginationWidgetBase = ({
         columnGap: "6px",
       }}
     >
-      <LeftNavButton currentPage={currentPage} onChange={onChange} />
+      <LeftNavButton currentPage={currentPage} onPageChange={onPageChange} />
 
       {isMobile ? (
         <NumberedPageButton
@@ -49,11 +49,11 @@ export const PaginationWidgetBase = ({
         <PaginationRow
           currentPage={currentPage}
           totalPages={totalPages}
-          onChange={onChange}
+          onChange={onPageChange}
         />
       )}
 
-      <RightNavButton currentPage={currentPage} onChange={onChange} />
+      <RightNavButton currentPage={currentPage} onPageChange={onPageChange} />
     </div>
   );
 };
diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx
@@ -133,10 +133,10 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
 
           {count !== undefined && (
             <PaginationWidgetBase
-              count={count}
-              limit={limit}
-              onChange={onPageChange}
-              page={page}
+              totalRecords={count}
+              pageSize={limit}
+              onPageChange={onPageChange}
+              currentPage={page}
             />
           )}
         </Cond>
diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -102,10 +102,10 @@ export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
 
       {count && (
         <PaginationWidgetBase
-          count={count}
-          limit={limit}
-          onChange={onPageChange}
-          page={page}
+          totalRecords={count}
+          pageSize={limit}
+          onPageChange={onPageChange}
+          currentPage={page}
         />
       )}
     </>
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -161,10 +161,10 @@ export const WorkspacesPageView = ({
 
       {count !== undefined && (
         <PaginationWidgetBase
-          count={count}
-          limit={limit}
-          onChange={onPageChange}
-          page={page}
+          totalRecords={count}
+          pageSize={limit}
+          onPageChange={onPageChange}
+          currentPage={page}
         />
       )}
     </Margins>
