migrating use profile task list calls to use server side pagination

Author: alexanmtz

frontend/src/components/areas/public/features/profile/pages/profile-page.tsx

@@ -1,15 +1,106 @@
 import UserProfilePublicPage from 'design-library/pages/public-pages/user-profile-public-page/user-profile-public-page'
-import React from 'react'
+import React, { useEffect, useCallback } from 'react'
 import { useParams } from 'react-router-dom'
 
-const ProfilePage = ({ user, searchUser, tasks, listTasks, filterTasks }) => {
+const TAB_TO_PARAM: Record<string, string> = {
+  created: 'userId',
+  supported: 'supportedByUserId'
+}
+
+const DEFAULT_ROWS_PER_PAGE = 10
+
+const ProfilePage = ({ user, searchUser, tasks, listTasks }) => {
+  const { userId } = useParams<{ userId: string }>()
+  const [page, setPage] = React.useState(0)
+  const [rowsPerPage, setRowsPerPage] = React.useState(DEFAULT_ROWS_PER_PAGE)
+  const [currentSort, setCurrentSort] = React.useState<{ sortBy?: string; sortDirection?: string }>(
+    {}
+  )
+  const [currentTab, setCurrentTab] = React.useState('created')
+
+  const fetchIssues = useCallback(
+    (
+      tabOverride?: string,
+      pageOverride?: number,
+      rowsOverride?: number,
+      sortOverride?: typeof currentSort
+    ) => {
+      const activeTab = tabOverride ?? currentTab
+      const activePage = pageOverride ?? page
+      const activeRows = rowsOverride ?? rowsPerPage
+      const activeSort = sortOverride ?? currentSort
+      const paramKey = TAB_TO_PARAM[activeTab] ?? 'userId'
+      listTasks({
+        [paramKey]: userId,
+        page: activePage,
+        limit: activeRows,
+        ...(activeSort.sortBy ? activeSort : {})
+      })
+    },
+    [userId, currentTab, page, rowsPerPage, currentSort, listTasks]
+  )
+
+  useEffect(() => {
+    if (userId) {
+      searchUser({ id: userId })
+      fetchIssues()
+    }
+  }, [userId])
+
+  const handleTabChange = useCallback(
+    (newTab: string) => {
+      setCurrentTab(newTab)
+      setPage(0)
+      setCurrentSort({})
+      fetchIssues(newTab, 0, rowsPerPage, {})
+    },
+    [fetchIssues, rowsPerPage]
+  )
+
+  const handlePageChange = useCallback(
+    (newPage: number) => {
+      setPage(newPage)
+      fetchIssues(currentTab, newPage, rowsPerPage, currentSort)
+    },
+    [fetchIssues, currentTab, rowsPerPage, currentSort]
+  )
+
+  const handleRowsPerPageChange = useCallback(
+    (newRowsPerPage: number) => {
+      setRowsPerPage(newRowsPerPage)
+      setPage(0)
+      fetchIssues(currentTab, 0, newRowsPerPage, currentSort)
+    },
+    [fetchIssues, currentTab, currentSort]
+  )
+
+  const handleSortChange = useCallback(
+    (sortBy: string, sortDirection: 'asc' | 'desc' | 'none') => {
+      const newSort = sortDirection === 'none' ? {} : { sortBy, sortDirection }
+      setCurrentSort(newSort)
+      setPage(0)
+      fetchIssues(currentTab, 0, rowsPerPage, newSort)
+    },
+    [fetchIssues, currentTab, rowsPerPage]
+  )
+
+  const serverSidePagination = {
+    enabled: true,
+    totalCount: tasks.totalCount ?? 0,
+    page,
+    rowsPerPage,
+    onPageChange: handlePageChange,
+    onRowsPerPageChange: handleRowsPerPageChange,
+    onSortChange: handleSortChange
+  }
+
   return (
     <UserProfilePublicPage
       user={user}
       tasks={tasks}
-      listTasks={listTasks}
-      filterTasks={filterTasks}
       searchUser={searchUser}
+      serverSidePagination={serverSidePagination}
+      onTabChange={handleTabChange}
     />
   )
 }

frontend/src/components/design-library/pages/public-pages/user-profile-public-page/user-profile-public-page.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { Container } from '@mui/material'
 import { Grid } from '@mui/material'
 import ProfileUserHeader from 'design-library/molecules/headers/profile-user-header/profile-user-header'
@@ -10,46 +10,11 @@ import {
   customColumnRenderer
 } from 'design-library/molecules/tables/issue-table/issue-table'
 import { FormattedMessage } from 'react-intl'
-import { useParams } from 'react-router-dom'
 
-const UserProfilePublicPage = ({ user, searchUser, tasks, listTasks, filterTasks }) => {
-  const { userId } = useParams<{ userId: string }>()
+const UserProfilePublicPage = ({ user, tasks, searchUser, serverSidePagination, onTabChange }) => {
   const { data: profile } = user || {}
   const issueMetadata = useIssueMetadata({ includeProject: true })
 
-  const listTasksByUserId = async () => {
-    await listTasks({ userId: userId })
-    await filterTasks('all')
-  }
-
-  const filterTasksWithOrders = async () => {
-    await listTasks({})
-    await filterTasks('supported')
-  }
-
-  const filterTasksByState = async (value) => {
-    switch (value) {
-      case 'created':
-        await listTasksByUserId()
-        break
-      case 'supported':
-        await filterTasksWithOrders()
-        break
-      default:
-        await listTasksByUserId()
-        break
-    }
-  }
-
-  const handleTabbedTableChange = (newValue: string) => {
-    filterTasksByState(newValue)
-  }
-
-  useEffect(() => {
-    searchUser({ id: userId })
-    listTasksByUserId()
-  }, [userId])
-
   return (
     <React.Fragment>
       <Page>
@@ -60,8 +25,9 @@ const UserProfilePublicPage = ({ user, searchUser, tasks, listTasks, filterTasks
           <Root container>
             <Grid size={{ xs: 12, md: 12 }}>
               <TabbedTable
-                onChange={handleTabbedTableChange}
+                onChange={onTabChange}
                 activeTab={'created'}
+                serverSidePagination={serverSidePagination}
                 tabs={[
                   {
                     value: 'created',

frontend/src/containers/tasks/task-list-user.ts

@@ -1,23 +1,19 @@
 import { connect } from 'react-redux'
-import { listTasks, filterTasks } from '../../actions/taskActions'
+import { listTasks } from '../../actions/taskActions'
 import { searchUser } from '../../actions/userActions'
-import { getFilteredTasks } from '../../selectors/tasks'
 import ProfilePage from '../../components/areas/public/features/profile/pages/profile-page'
 
 const mapStateToProps = (state: any) => {
   return {
     user: state.user,
-    tasks: getFilteredTasks(state)
+    tasks: state.tasks
   }
 }
 
 const mapDispatchToProps = (dispatch: any) => {
   return {
     searchUser: (params: any) => dispatch(searchUser(params)),
-    listTasks: ({ organizationId, projectId, userId, status, labelIds, languageIds }: any) =>
-      dispatch(listTasks({ organizationId, projectId, userId, status, labelIds, languageIds })),
-    filterTasks: (key: any, value: any, additional: any) =>
-      dispatch(filterTasks(key, value, additional))
+    listTasks: (params: any) => dispatch(listTasks(params))
   }
 }