Web: Client: Data Import: translate AccountsPaging to ts

packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/index.tsx

@@ -165,6 +165,7 @@ const AddEmailsStep = (props: AddEmailsStepProps) => {
               t={t}
               numberOfItems={users.withoutEmail.length}
               setDataPortion={handleDataChange}
+              pagesPerPage={PAGE_SIZE}
             />
           )}
         </>

packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersStep/index.tsx

@@ -167,6 +167,7 @@ const SelectUsersStep = (props: SelectUsersStepProps) => {
               t={t}
               numberOfItems={withEmailUsers.length}
               setDataPortion={handleDataChange}
+              pagesPerPage={PAGE_SIZE}
             />
           )}
         </>

packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersTypeStep/index.tsx

@@ -105,13 +105,14 @@ const SelectUsersTypeStep = (props: TypeSelectProps) => {
             size={InputSize.base}
           />
 
-          <AccountsTable t={t} accountsData={filteredAccounts} />
+          <AccountsTable accountsData={filteredAccounts} />
 
           {filteredUsers.length > PAGE_SIZE && filteredAccounts.length > 0 && (
             <AccountsPaging
               t={t}
               numberOfItems={filteredUsers.length}
               setDataPortion={handleDataChange}
+              pagesPerPage={PAGE_SIZE}
             />
           )}
 

packages/client/src/pages/PortalSettings/categories/data-import/sub-components/AccountsPaging.tsx

@@ -27,6 +27,7 @@
 import { useState } from "react";
 import styled from "styled-components";
 import { Paging } from "@docspace/shared/components/paging";
+import { AccountsPagingProps } from "../types";
 
 const StyledPaging = styled(Paging)`
   display: flex;
@@ -35,14 +36,14 @@ const StyledPaging = styled(Paging)`
   justify-content: center;
 `;
 
-const AccountsPaging = (props) => {
+const AccountsPaging = (props: AccountsPagingProps) => {
-  const { t, numberOfItems, setDataPortion } = props;
+  const { t, numberOfItems, setDataPortion, pagesPerPage = 25 } = props;
 
-  const createPageItems = (count) => {
+  const createPageItems = (count: number) => {
-    let pageItems = [];
+    const pageItems: { key: string; label: string; pageNumber: number }[] = [];
-    for (let i = 0; i < count; i++) {
+    for (let i = 0; i < count; i += 1) {
       pageItems.push({
-        key: i + 1 + "-page-of-" + count,
+        key: `${i + 1}-page-of-${count}`,
         label: t("Common:PageOfTotalPage", { page: i + 1, totalPage: count }),
         pageNumber: i,
       });
@@ -53,18 +54,18 @@ const AccountsPaging = (props) => {
   const countItems = [
     {
       key: "25-items-per-page",
-      label: t("Common:CountPerPage", { count: 25 }),
+      label: t("Common:CountPerPage", { count: pagesPerPage }),
-      count: 25,
+      count: pagesPerPage,
     },
     {
       key: "50-items-per-page",
-      label: t("Common:CountPerPage", { count: 50 }),
+      label: t("Common:CountPerPage", { count: pagesPerPage * 2 }),
-      count: 50,
+      count: pagesPerPage * 2,
     },
     {
       key: "100-items-per-page",
-      label: t("Common:CountPerPage", { count: 100 }),
+      label: t("Common:CountPerPage", { count: pagesPerPage * 3 }),
-      count: 100,
+      count: pagesPerPage * 3,
     },
   ];
 
@@ -97,13 +98,17 @@ const AccountsPaging = (props) => {
     }
   };
 
-  const onSelectPage = (selectedPage) => {
+  const onSelectPage = (selectedPage: { pageNumber: number }) => {
     const count = selectedPage.pageNumber * selectedCountItem.count;
     setDataPortion(count, count + selectedCountItem.count);
     setSelectedPageItems(pageItems[selectedPage.pageNumber]);
   };
 
-  const onCountChange = (countItem) => {
+  const onCountChange = (countItem: {
+    key: string;
+    label: string;
+    count: number;
+  }) => {
     setSelectedCountItem(countItem);
     setDataPortion(0, countItem.count);
     const tempPageItems = createPageItems(
@@ -127,8 +132,8 @@ const AccountsPaging = (props) => {
       nextAction={onSelectPageNextHandler}
       selectedPageItem={selectedPageItem}
       selectedCountItem={selectedCountItem}
-      disablePrevious={!Boolean(pageItems[selectedPageItem.pageNumber - 1])}
+      disablePrevious={!pageItems[selectedPageItem.pageNumber - 1]}
-      disableNext={!Boolean(pageItems[selectedPageItem.pageNumber + 1])}
+      disableNext={!pageItems[selectedPageItem.pageNumber + 1]}
     />
   );
 };

packages/client/src/pages/PortalSettings/categories/data-import/types/index.ts

@@ -135,7 +135,7 @@ export interface InjectedSelectUsersStepProps extends SelectUsersStepProps {
 }
 
 export interface AccountsTableProps {
-  t: TFunciton;
+  t?: TFunciton;
   accountsData: TStore["importAccountsStore"]["withEmailUsers"];
 }
 
@@ -376,3 +376,10 @@ export interface InjectedTypeSelectRowContentProps
   extends TypeSelectRowContentProps {
   changeUserType: TStore["importAccountsStore"]["changeUserType"];
 }
+
+export interface AccountsPagingProps {
+  t: TFunciton;
+  numberOfItems: number;
+  setDataPortion: (leftBoundary: number, rightBoundary: number) => void;
+  pagesPerPage?: number;
+}