feat: added method to download rows as csv

packages/rc-service/package.json

@@ -31,6 +31,7 @@
     "@reapit/utils-react": "workspace:packages/utils-react",
     "@sentry/browser": "^7.84.0",
     "dayjs": "^1.11.10",
+    "file-saver": "^2.0.5",
     "just-debounce-it": "^1.5.0",
     "qrcode": "^1.5.3",
     "query-string": "5.1.1",
@@ -47,6 +48,7 @@
     "@reapit/ts-scripts": "workspace:packages/ts-scripts",
     "@reapit/ts-types": "workspace:packages/ts-types",
     "@testing-library/react": "^14.1.2",
+    "@types/file-saver": "^2",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "cross-env": "^6.0.3",

packages/rc-service/src/components/users/index.tsx

@@ -14,6 +14,8 @@ import {
   ToggleRadio,
   Select,
   BodyText,
+  ButtonGroup,
+  Button,
 } from '@reapit/elements'
 import { reapitConnectBrowserSession } from '../../core/connect-session'
 import { GroupModelPagedResult, UserModelPagedResult } from '@reapit/foundations-ts-definitions'
@@ -24,6 +26,9 @@ import { GetActionNames, getActions, objectToQuery, useReapitGet } from '@reapit
 import debounce from 'just-debounce-it'
 import dayjs from 'dayjs'
 import { UserContent } from './user-content'
+import { getPlatformHeaders, logger } from '@reapit/utils-react'
+import fileSaver from 'file-saver'
+import qs from 'qs'
 
 export interface UserFilters {
   email?: string
@@ -45,6 +50,7 @@ export const UsersPage: FC = () => {
   const [userSearch, setUserSearch] = useState<UserFilters>({})
   const [pageNumber, setPageNumber] = useState<number>(1)
   const { register, watch } = useForm<UserFilters>({ mode: 'all' })
+  const [csvLoading, setCsvLoading] = useState<boolean>(false)
   const emailQuery = {
     email: userSearch.email ? encodeURIComponent(userSearch.email) : undefined,
   }
@@ -67,6 +73,61 @@ export const UsersPage: FC = () => {
     fetchWhenTrue: [],
   })
 
+  const downloadAsCSV = async () => {
+    if (csvLoading) return
+    setCsvLoading(true)
+    try {
+      const headers = await getPlatformHeaders(reapitConnectBrowserSession, 'latest')
+      if (headers) {
+        const response = await fetch(
+          `${getActions[GetActionNames.getUsers].api}${getActions[GetActionNames.getUsers].path}?${qs.stringify({
+            ...queryParams,
+            pageSize: 2000,
+          })}`,
+          {
+            method: 'get',
+            headers,
+          },
+        )
+        const data = await response.json()
+        const rows = data._embedded.map(
+          ({
+            email,
+            name,
+            organisationName,
+            organisationId,
+            agencyCloudNegotiatorId,
+            created,
+            firstLoginDate,
+            userGroups,
+          }) =>
+            [
+              name,
+              email,
+              organisationId,
+              organisationName,
+              agencyCloudNegotiatorId,
+              created,
+              firstLoginDate,
+              userGroups.map(({ groupId }) => groupId).join(' '),
+            ].join(','),
+        )
+
+        const file = new File(
+          ['email,name,company,companyId,negotiatorId,created,firstLoginDate,userGroups\r\n', rows.join('\r\n')],
+          'rc-service-users.csv',
+          {
+            type: 'text/plain;charset=utf-8',
+          },
+        )
+        fileSaver.saveAs(file)
+      }
+    } catch (error) {
+      logger(error as Error)
+    }
+    setCsvLoading(false)
+  }
+
   useEffect(handleSetAdminFilters(setUserSearch, watch), [])
 
   return (
@@ -185,6 +246,11 @@ export const UsersPage: FC = () => {
       ) : users?._embedded?.length ? (
         <>
           <BodyText>Total Users: {users?.totalCount}</BodyText>
+          <ButtonGroup>
+            <Button intent="primary" loading={csvLoading} disabled={csvLoading} onClick={() => downloadAsCSV()}>
+              Download CSV
+            </Button>
+          </ButtonGroup>
           <Table
             className={cx(elFadeIn, elMb11)}
             rows={users?._embedded?.map((user) => {

yarn.lock

@@ -12571,6 +12571,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/file-saver@npm:^2":
+  version: 2.0.7
+  resolution: "@types/file-saver@npm:2.0.7"
+  checksum: c3d1cd80eab1214767922cabac97681f3fb688e82b74890450d70deaca49537949bbc96d80d363d91e8f0a4752c7164909cc8902d9721c5c4809baafc42a3801
+  languageName: node
+  linkType: hard
+
 "@types/fs-extra@npm:^9.0.13":
   version: 9.0.13
   resolution: "@types/fs-extra@npm:9.0.13"
@@ -31747,12 +31754,14 @@ __metadata:
     "@reapit/utils-react": "workspace:packages/utils-react"
     "@sentry/browser": "npm:^7.84.0"
     "@testing-library/react": "npm:^14.1.2"
+    "@types/file-saver": "npm:^2"
     "@typescript-eslint/eslint-plugin": "npm:^6.20.0"
     "@typescript-eslint/parser": "npm:^6.20.0"
     cross-env: "npm:^6.0.3"
     dayjs: "npm:^1.11.10"
     eslint: "npm:8.56.0"
     eslint-plugin-prettier: "npm:^5.1.3"
+    file-saver: "npm:^2.0.5"
     jest: "npm:^29.7.0"
     jest-coverage-badges: "npm:^1.1.2"
     just-debounce-it: "npm:^1.5.0"