Refactor to extrapolate layout

src/components/Organizations/OrganizationsList.tsx

@@ -1,5 +1,3 @@
-import { Box, Flex, Heading, Text } from '@chakra-ui/react'
-import { useTranslation } from 'react-i18next'
 import { InputSearch } from '~src/layout/Inputs'
 import { useOrganizationCount, useOrganizationList } from '~queries/organizations'
 import { debounce } from '~utils/debounce'
@@ -9,15 +7,13 @@ import { Loading } from '~src/router/SuspenseLoader'
 import OrganizationCard from '~components/Organizations/Card'
 import { RoutedPagination } from '~components/Pagination/Pagination'
 import LoadingError from '~src/layout/LoadingError'
+import { useTranslation } from 'react-i18next'
 
-export const OrganizationsListHeader = () => {
+export const OrganizationsFilter = () => {
   const { t } = useTranslation()
-  const { data: orgsCount, isLoading, error: countError } = useOrganizationCount()
   const { page, orgId }: { page?: number; orgId?: string } = useParams()
   const navigate = useNavigate()
 
-  const count = orgsCount?.count || 0
-
   const debouncedSearch = debounce((value) => {
     const getPath = () => {
       // If previous state has not org id, ensure to look at the first page
@@ -33,19 +29,7 @@ export const OrganizationsListHeader = () => {
     debouncedSearch(event.target.value)
   }
 
-  return (
-    <Flex direction={{ base: 'column', md: 'row' }} justify={'space-between'}>
-      <Flex direction={'column'}>
-        <Heading isTruncated wordBreak='break-word'>
-          {t('organizations.organizations_list')}
-        </Heading>
-        {!isLoading && <Text color={'lighterText'}>{t('organizations.organizations_count', { count: count })}</Text>}
-      </Flex>
-      <Box>
-        <InputSearch maxW={'300px'} placeholder={t('organizations.search_by_org_id')} onChange={searchOnChange} />
-      </Box>
-    </Flex>
-  )
+  return <InputSearch maxW={'300px'} placeholder={t('organizations.search_by_org_id')} onChange={searchOnChange} />
 }
 
 export const OrganizationsList = () => {

src/layout/ListPageLayout.tsx

@@ -0,0 +1,30 @@
+import { Box, Flex, Heading, Text } from '@chakra-ui/react'
+import { PropsWithChildren, ReactNode } from 'react'
+
+const ListPageLayout = ({
+  title,
+  subtitle,
+  rightComponent,
+  children,
+}: {
+  title: string
+  subtitle?: string
+  rightComponent?: ReactNode
+} & PropsWithChildren) => {
+  return (
+    <Flex direction={'column'} mt={'40px'} gap={6}>
+      <Flex direction={{ base: 'column', md: 'row' }} justify={'space-between'}>
+        <Flex direction={'column'}>
+          <Heading isTruncated wordBreak='break-word'>
+            {title}
+          </Heading>
+          {subtitle && <Text color={'lighterText'}>{subtitle}</Text>}
+        </Flex>
+        {rightComponent && <Box>{rightComponent}</Box>}
+      </Flex>
+      {children}
+    </Flex>
+  )
+}
+
+export default ListPageLayout

src/pages/Organization/List.tsx

@@ -1,12 +1,22 @@
-import { Flex } from '@chakra-ui/react'
-import { OrganizationsList, OrganizationsListHeader } from '~components/Organizations/OrganizationsList'
+import { OrganizationsFilter, OrganizationsList } from '~components/Organizations/OrganizationsList'
+import ListPageLayout from '~src/layout/ListPageLayout'
+import { useOrganizationCount } from '~queries/organizations'
+import { useTranslation } from 'react-i18next'
 
 const OrganizationList = () => {
+  const { t } = useTranslation()
+  const { data: orgsCount, isLoading, error: countError } = useOrganizationCount()
+
+  const subtitle = !isLoading ? t('organizations.organizations_count', { count: orgsCount?.count || 0 }) : ''
+
   return (
-    <Flex direction={'column'} mt={'40px'} gap={6}>
-      <OrganizationsListHeader />
+    <ListPageLayout
+      title={t('organizations.organizations_list')}
+      subtitle={subtitle}
+      rightComponent={<OrganizationsFilter />}
+    >
       <OrganizationsList />
-    </Flex>
+    </ListPageLayout>
   )
 }