feat: add pagination to App Hub apps list

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2021-03-24T18:26:07.045Z\n"
-"PO-Revision-Date: 2021-03-24T18:26:07.045Z\n"
+"POT-Creation-Date: 2021-03-24T20:15:27.415Z\n"
+"PO-Revision-Date: 2021-03-24T20:15:27.415Z\n"
 
 msgid "App uninstalled successfully"
 msgstr ""

src/components/AppList/AppList.js → src/components/AppsList/AppsList.js

@@ -6,7 +6,7 @@ import { useHistory } from 'react-router-dom'
 import { useQueryParam, StringParam, withDefault } from 'use-query-params'
 import { AppCard } from '../AppCard/AppCard'
 import { AppCards as AppCards_ } from '../AppCards/AppCards'
-import styles from './AppList.module.css'
+import styles from './AppsList.module.css'
 
 const AppCards = ({ apps }) => {
     const history = useHistory()
@@ -80,7 +80,7 @@ AllApps.propTypes = {
     label: PropTypes.string.isRequired,
 }
 
-export const AppList = ({
+export const AppsList = ({
     apps,
     appsWithUpdates,
     updatesAvailableLabel,
@@ -119,7 +119,7 @@ export const AppList = ({
     )
 }
 
-AppList.propTypes = {
+AppsList.propTypes = {
     allAppsLabel: PropTypes.string.isRequired,
     searchLabel: PropTypes.string.isRequired,
     updatesAvailableLabel: PropTypes.string.isRequired,

src/pages/AppHub/AppHub.js

@@ -1,25 +1,31 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { PropTypes } from '@dhis2/prop-types'
+import { InputField, Pagination } from '@dhis2/ui'
 import { NoticeBox, CenteredContent, CircularLoader } from '@dhis2/ui'
 import React from 'react'
 import { useHistory } from 'react-router-dom'
 import { AppCard } from '../../components/AppCard/AppCard'
-import { AppCards } from '../../components/AppCards/AppCards'
+import { AppCards as AppCards_ } from '../../components/AppCards/AppCards'
 import { getLatestVersion } from '../../get-latest-version'
+import styles from './AppHub.module.css'
 
 const query = {
     appHub: {
         resource: 'appHub/v2/apps',
+        params: params => ({
+            pageSize: 24,
+            ...params,
+        }),
     },
 }
 
-const AppsList = ({ apps }) => {
+const AppCards = ({ apps }) => {
     const history = useHistory()
     const getIconSrc = app => app.images.find(i => i.logo)?.imageUrl
 
     return (
-        <AppCards>
+        <AppCards_>
             {apps.map(app => (
                 <AppCard
                     key={app.id}
@@ -32,16 +38,53 @@ const AppsList = ({ apps }) => {
                     onClick={() => history.push(`/app/${app.id}`)}
                 />
             ))}
-        </AppCards>
+        </AppCards_>
+    )
+}
+
+AppCards.propTypes = {
+    apps: PropTypes.array.isRequired,
+}
+
+const SearchFilter = ({ onQueryChange }) => {
+    return (
+        <InputField
+            className={styles.searchField}
+            placeholder={i18n.t('Search AppHub apps')}
+            onChange={onQueryChange}
+            type="search"
+        />
+    )
+}
+
+const AppsList = ({ apps, onQueryChange, pager, onPageChange }) => {
+    // TODO: Add search filter and `onQueryChange`
+
+    return (
+        <>
+            <SearchFilter onQueryChange={onQueryChange} />
+            <AppCards apps={apps} />
+            <div className={styles.paginationWrapper}>
+                <Pagination
+                    hidePageSizeSelect
+                    onPageChange={onPageChange}
+                    {...pager}
+                />
+            </div>
+        </>
     )
 }
 
 AppsList.propTypes = {
     apps: PropTypes.array.isRequired,
+    pager: PropTypes.object.isRequired,
+    onPageChange: PropTypes.func.isRequired,
 }
 
 export const AppHub = () => {
-    const { loading, error, data } = useDataQuery(query)
+    const { loading, error, data, refetch } = useDataQuery(query)
+    const handleQueryChange = query => refetch({ query })
+    const handlePageChange = page => refetch({ page })
 
     if (error) {
         return (
@@ -64,5 +107,12 @@ export const AppHub = () => {
         )
     }
 
-    return <AppsList apps={data.appHub.result} />
+    return (
+        <AppsList
+            apps={data.appHub.result}
+            pager={data.appHub.pager}
+            onQueryChange={handleQueryChange}
+            onPageChange={handlePageChange}
+        />
+    )
 }

src/pages/AppHub/AppHub.module.css

@@ -0,0 +1,9 @@
+.searchField {
+    max-width: 420px;
+    margin-bottom: var(--spacers-dp24);
+}
+
+.paginationWrapper {
+    max-width: 992px;
+    margin: var(--spacers-dp24) 0;
+}

src/pages/CoreApps/CoreApps.js

@@ -2,7 +2,7 @@ import { useDataQuery, useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { NoticeBox, CenteredContent, CircularLoader } from '@dhis2/ui'
 import React from 'react'
-import { AppList } from '../../components/AppList/AppList'
+import { AppsList } from '../../components/AppsList/AppsList'
 import { coreApps } from '../../core-apps'
 import { getLatestVersion } from '../../get-latest-version'
 import { semverGt } from '../../semver-gt'
@@ -87,7 +87,7 @@ export const CoreApps = () => {
     )
 
     return (
-        <AppList
+        <AppsList
             apps={apps}
             appsWithUpdates={appsWithUpdates}
             updatesAvailableLabel={i18n.t('Core apps with updates available')}

src/pages/CustomApps/CustomApps.js

@@ -2,7 +2,7 @@ import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { NoticeBox, CenteredContent, CircularLoader } from '@dhis2/ui'
 import React from 'react'
-import { AppList } from '../../components/AppList/AppList'
+import { AppsList } from '../../components/AppsList/AppsList'
 import { getLatestVersion } from '../../get-latest-version'
 import { semverGt } from '../../semver-gt'
 
@@ -62,7 +62,7 @@ export const CustomApps = () => {
     )
 
     return (
-        <AppList
+        <AppsList
             apps={apps}
             appsWithUpdates={appsWithUpdates}
             updatesAvailableLabel={i18n.t('Custom apps with updates available')}