From 8a6cf960accbe0317c358389e329d4beeb559a63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A9di-R=C3=A9mi=20Hashim?= <mediremi@gmail.com>
Date: Wed, 24 Mar 2021 18:28:56 +0000
Subject: [PATCH] refactor: extract AppCard and AppCards components

---
 i18n/en.pot                                   |  4 +-
 src/components/AppCard/AppCard.js             | 31 +++++++++++++
 .../AppCard/AppCard.module.css}               |  7 ---
 .../{ => AppCard}/AppIcon/AppIcon.js          |  0
 .../{ => AppCard}/AppIcon/AppIcon.module.css  |  0
 src/components/AppCards/AppCards.js           | 11 +++++
 src/components/AppCards/AppCards.module.css   |  6 +++
 src/components/AppList/AppList.js             | 27 +++++-------
 src/components/AppList/AppList.module.css     | 44 -------------------
 src/pages/AppHub/AppHub.js                    | 38 +++++++---------
 10 files changed, 75 insertions(+), 93 deletions(-)
 create mode 100644 src/components/AppCard/AppCard.js
 rename src/{pages/AppHub/AppHub.module.css => components/AppCard/AppCard.module.css} (85%)
 rename src/components/{ => AppCard}/AppIcon/AppIcon.js (100%)
 rename src/components/{ => AppCard}/AppIcon/AppIcon.module.css (100%)
 create mode 100644 src/components/AppCards/AppCards.js
 create mode 100644 src/components/AppCards/AppCards.module.css

diff --git a/i18n/en.pot b/i18n/en.pot
index d71b694..6418b85 100644
--- a/i18n/en.pot
+++ b/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 ""
diff --git a/src/components/AppCard/AppCard.js b/src/components/AppCard/AppCard.js
new file mode 100644
index 0000000..c3ec4c0
--- /dev/null
+++ b/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,
+}
diff --git a/src/pages/AppHub/AppHub.module.css b/src/components/AppCard/AppCard.module.css
similarity index 85%
rename from src/pages/AppHub/AppHub.module.css
rename to src/components/AppCard/AppCard.module.css
index 79645a6..b001067 100644
--- a/src/pages/AppHub/AppHub.module.css
+++ b/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;
diff --git a/src/components/AppIcon/AppIcon.js b/src/components/AppCard/AppIcon/AppIcon.js
similarity index 100%
rename from src/components/AppIcon/AppIcon.js
rename to src/components/AppCard/AppIcon/AppIcon.js
diff --git a/src/components/AppIcon/AppIcon.module.css b/src/components/AppCard/AppIcon/AppIcon.module.css
similarity index 100%
rename from src/components/AppIcon/AppIcon.module.css
rename to src/components/AppCard/AppIcon/AppIcon.module.css
diff --git a/src/components/AppCards/AppCards.js b/src/components/AppCards/AppCards.js
new file mode 100644
index 0000000..b3fbf02
--- /dev/null
+++ b/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,
+}
diff --git a/src/components/AppCards/AppCards.module.css b/src/components/AppCards/AppCards.module.css
new file mode 100644
index 0000000..46ffd8e
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/AppList/AppList.js b/src/components/AppList/AppList.js
index 899f818..50b8b33 100644
--- a/src/components/AppList/AppList.js
+++ b/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_>
     )
 }
 
diff --git a/src/components/AppList/AppList.module.css b/src/components/AppList/AppList.module.css
index a9caabf..ea6c916 100644
--- a/src/components/AppList/AppList.module.css
+++ b/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)
-}
diff --git a/src/pages/AppHub/AppHub.js b/src/pages/AppHub/AppHub.js
index 0fb3940..75ec485 100644
--- a/src/pages/AppHub/AppHub.js
+++ b/src/pages/AppHub/AppHub.js
@@ -4,9 +4,9 @@ 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: {
@@ -14,37 +14,29 @@ const query = {
     },
 }
 
-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} />
 }