refactor: extract AppCard and AppCards components

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-23T20:07:00.622Z\n"
-"PO-Revision-Date: 2021-03-23T20:07:00.622Z\n"
+"POT-Creation-Date: 2021-03-24T18:26:07.045Z\n"
+"PO-Revision-Date: 2021-03-24T18:26:07.045Z\n"
 
 msgid "App uninstalled successfully"
 msgstr ""

src/components/AppCard/AppCard.js

@@ -0,0 +1,31 @@
+import { PropTypes } from '@dhis2/prop-types'
+import React from 'react'
+import styles from './AppCard.module.css'
+import { AppIcon } from './AppIcon/AppIcon'
+
+export const AppCard = ({
+    iconSrc,
+    appName,
+    appDeveloper,
+    appVersion,
+    onClick,
+}) => (
+    <button className={styles.appCard} onClick={onClick}>
+        <AppIcon src={iconSrc} />
+        <div>
+            <h2 className={styles.appCardName}>{appName}</h2>
+            <span className={styles.appCardMetadata}>{appDeveloper}</span>
+            <span className={styles.appCardMetadata}>
+                {appVersion && `Version ${appVersion}`}
+            </span>
+        </div>
+    </button>
+)
+
+AppCard.propTypes = {
+    appName: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    appDeveloper: PropTypes.string,
+    appVersion: PropTypes.string,
+    iconSrc: PropTypes.string,
+}

src/pages/AppHub/AppHub.module.css → src/components/AppCard/AppCard.module.css

@@ -1,10 +1,3 @@
-.appCards {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: var(--spacers-dp16);
-    max-width: 992px;
-}
-
 .appCard {
     display: grid;
     grid-template-columns: 72px auto;

src/components/AppCards/AppCards.js

@@ -0,0 +1,11 @@
+import { PropTypes } from '@dhis2/prop-types'
+import React from 'react'
+import styles from './AppCards.module.css'
+
+export const AppCards = ({ children }) => (
+    <div className={styles.appCards}>{children}</div>
+)
+
+AppCards.propTypes = {
+    children: PropTypes.array.isRequired,
+}

src/components/AppCards/AppCards.module.css

@@ -0,0 +1,6 @@
+.appCards {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: var(--spacers-dp16);
+    max-width: 992px;
+}

src/components/AppList/AppList.js

@@ -4,7 +4,8 @@ import { InputField } from '@dhis2/ui'
 import React from 'react'
 import { useHistory } from 'react-router-dom'
 import { useQueryParam, StringParam, withDefault } from 'use-query-params'
-import { AppIcon } from '../AppIcon/AppIcon'
+import { AppCard } from '../AppCard/AppCard'
+import { AppCards as AppCards_ } from '../AppCards/AppCards'
 import styles from './AppList.module.css'
 
 const AppCards = ({ apps }) => {
@@ -20,26 +21,18 @@ const AppCards = ({ apps }) => {
     }
 
     return (
-        <div className={styles.appCards}>
+        <AppCards_>
             {apps.map(app => (
-                <button
+                <AppCard
                     key={app.short_name}
-                    className={styles.appCard}
+                    iconSrc={getIconSrc(app)}
+                    appName={app.name}
+                    appDeveloper={app.developer?.company || app.developer?.name}
+                    appVersion={app.version}
                     onClick={() => history.push(`/installed-app/${app.key}`)}
-                >
-                    <AppIcon src={getIconSrc(app)} />
-                    <div>
-                        <h2 className={styles.appCardName}>{app.name}</h2>
-                        <span className={styles.appCardMetadata}>
-                            {app.developer?.company || app.developer?.name}
-                        </span>
-                        <span className={styles.appCardMetadata}>
-                            {app.version && `Version ${app.version}`}
-                        </span>
-                    </div>
-                </button>
+                />
             ))}
-        </div>
+        </AppCards_>
     )
 }
 

src/components/AppList/AppList.module.css

@@ -12,47 +12,3 @@
 .appsWithUpdates {
     margin-bottom: var(--spacers-dp64);
 }
-
-.appCards {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: var(--spacers-dp16);
-    max-width: 992px;
-}
-
-.appCard {
-    display: grid;
-    grid-template-columns: 72px auto;
-    grid-gap: var(--spacers-dp12);
-    background: white;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-    padding: 18px var(--spacers-dp16);
-    line-height: 20px;
-    cursor: pointer;
-
-    /* Reset button styles */
-    border: none;
-    text-align: unset;
-    color: unset;
-}
-
-.appCard:hover, .appCard:focus {
-    background: var(--colors-grey300);
-
-    /* Reset button styles */
-    outline: none;
-}
-
-.appCardName {
-    font-size: 18px;
-    font-weight: 700;
-    margin-top: 0;
-    margin-bottom: var(--spacers-dp4);
-}
-
-.appCardMetadata {
-    display: block;
-    margin: var(--spacers-dp4) 0;
-    font-size: 14px;
-    color: var(--colors-grey700)
-}

src/pages/AppHub/AppHub.js

@@ -4,47 +4,39 @@ import { PropTypes } from '@dhis2/prop-types'
 import { NoticeBox, CenteredContent, CircularLoader } from '@dhis2/ui'
 import React from 'react'
 import { useHistory } from 'react-router-dom'
-import { AppIcon } from '../../components/AppIcon/AppIcon'
+import { AppCard } from '../../components/AppCard/AppCard'
+import { AppCards } from '../../components/AppCards/AppCards'
 import { getLatestVersion } from '../../get-latest-version'
-import styles from './AppHub.module.css'
 
 const query = {
     appHub: {
         resource: 'appHub/v2/apps',
     },
 }
 
-const AppCards = ({ apps }) => {
+const AppsList = ({ apps }) => {
     const history = useHistory()
     const getIconSrc = app => app.images.find(i => i.logo)?.imageUrl
 
     return (
-        <div className={styles.appCards}>
+        <AppCards>
             {apps.map(app => (
-                <button
+                <AppCard
                     key={app.id}
-                    className={styles.appCard}
+                    iconSrc={getIconSrc(app)}
+                    appName={app.name}
+                    appDeveloper={
+                        app.developer.organisation || app.developer.name
+                    }
+                    appVersion={getLatestVersion(app.versions).version}
                     onClick={() => history.push(`/app/${app.id}`)}
-                >
-                    <AppIcon src={getIconSrc(app)} />
-                    <div>
-                        <h2 className={styles.appCardName}>{app.name}</h2>
-                        <span className={styles.appCardMetadata}>
-                            {app.developer.organisation || app.developer.name}
-                        </span>
-                        <span className={styles.appCardMetadata}>
-                            {`Version ${
-                                getLatestVersion(app.versions).version
-                            }`}
-                        </span>
-                    </div>
-                </button>
+                />
             ))}
-        </div>
+        </AppCards>
     )
 }
 
-AppCards.propTypes = {
+AppsList.propTypes = {
     apps: PropTypes.array.isRequired,
 }
 
@@ -72,5 +64,5 @@ export const AppHub = () => {
         )
     }
 
-    return <AppCards apps={data.appHub.result} />
+    return <AppsList apps={data.appHub.result} />
 }