refactor(headerbar use instance info): simplify hook

dhis2 · Oct 7, 2021 · 020309f · 020309f
1 parent 64810d8
commit 020309f
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 52 deletions.
diff --git a/components/header-bar/src/header-bar.stories.js b/components/header-bar/src/header-bar.stories.js
@@ -26,7 +26,8 @@ const mockConfig = {
 const customData = {
     'system/info': {
         contextPath: 'https://debug.dhis2.org/dev',
-        userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36',
+        userAgent:
+            'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36',
         calendar: 'iso8601',
         dateFormat: 'yyyy-mm-dd',
         serverDate: '2021-10-06T08:06:15.256',
@@ -42,7 +43,7 @@ const customData = {
         jasperReportsVersion: '6.3.1',
         environmentVariable: 'DHIS2_HOME',
         databaseInfo: {
-          spatialSupport: true
+            spatialSupport: true,
         },
         encryption: false,
         emailConfigured: false,
@@ -52,7 +53,7 @@ const customData = {
         instanceBaseUrl: 'https://debug.dhis2.org/dev',
         clusterHostname: '',
         isMetadataVersionEnabled: true,
-        metadataSyncEnabled: false
+        metadataSyncEnabled: false,
     },
     'systemSettings/applicationTitle': {
         applicationTitle: 'Foobar',
@@ -260,10 +261,12 @@ export const WithOnlineStatus = () => (
     </CustomDataProvider>
 )
 
-WithOnlineStatus.decorators = [fn => {
-    const config = { ...mockConfig, pwaEnabled: true }
-    return <Provider config={config}>{fn()}</Provider>
-}]
+WithOnlineStatus.decorators = [
+    fn => {
+        const config = { ...mockConfig, pwaEnabled: true }
+        return <Provider config={config}>{fn()}</Provider>
+    },
+]
 
 WithOnlineStatus.parameters = {
     docs: {
@@ -282,14 +285,16 @@ export const WithLastOnlineInfo = () => (
     </CustomDataProvider>
 )
 
-WithLastOnlineInfo.decorators = [fn => {
-    const config = {
-        ...mockConfig,
-        pwaEnabled: true,
-        headerbar: { onlineStatusInfo: 'LAST_ONLINE' },
-    }
-    return <Provider config={config}>{fn()}</Provider>
-}]
+WithLastOnlineInfo.decorators = [
+    fn => {
+        const config = {
+            ...mockConfig,
+            pwaEnabled: true,
+            headerbar: { onlineStatusInfo: 'LAST_ONLINE' },
+        }
+        return <Provider config={config}>{fn()}</Provider>
+    },
+]
 
 WithLastOnlineInfo.parameters = {
     docs: {

diff --git a/components/header-bar/src/profile-menu/instance-and-app-info.js b/components/header-bar/src/profile-menu/instance-and-app-info.js
@@ -17,12 +17,11 @@ const InstanceInfo = ({ instanceData }) => {
 
             {', '}
 
-            <span className="build">
-                {`${i18n.t('Build')} ${revision}`}
-            </span>
+            <span className="build">{`${i18n.t('Build')} ${revision}`}</span>
 
             <style jsx>{`
-                .version, .build {
+                .version,
+                .build {
                     white-space: nowrap;
                 }
             `}</style>
@@ -67,16 +66,14 @@ export const InstanceAndAppInfo = ({ appName, appVersion }) => {
     // other instance info when an error occurs
     return (
         <MenuItemWithBorderTop>
-            {loading && (
-                <div>{i18n.t('Loading instance information..')}</div>
-            )}
+            {loading && <div>{i18n.t('Loading instance information..')}</div>}
 
-            {!loading && !error && <InstanceInfo instanceData={data} />}
+            {!loading && !error && (
+                <InstanceInfo instanceData={data.systemInfo} />
+            )}
 
             {appName && appVersion && (
-                <div className="app-info">
-                    {`${appName}, ${appVersion}`}
-                </div>
+                <div className="app-info">{`${appName}, ${appVersion}`}</div>
             )}
         </MenuItemWithBorderTop>
     )

diff --git a/components/header-bar/src/profile-menu/profile-menu.js b/components/header-bar/src/profile-menu/profile-menu.js
@@ -32,7 +32,14 @@ const LoadingMask = () => (
     </Layer>
 )
 
-const ProfileContents = ({ appName, appVersion, name, email, avatarUrl, helpUrl }) => {
+const ProfileContents = ({
+    appName,
+    appVersion,
+    name,
+    email,
+    avatarUrl,
+    helpUrl,
+}) => {
     const { baseUrl } = useConfig()
     const [loading, setLoading] = useState(false)
 
@@ -104,7 +111,10 @@ const ProfileContents = ({ appName, appVersion, name, email, avatarUrl, helpUrl
                         value="logout"
                         icon={<IconLogOut24 color={colors.grey700} />}
                     />
-                    <InstanceAndAppInfo appName={appName} appVersion={appVersion} />
+                    <InstanceAndAppInfo
+                        appName={appName}
+                        appVersion={appVersion}
+                    />
                 </ul>
             </div>
 
@@ -143,7 +153,14 @@ ProfileContents.propTypes = {
     name: PropTypes.string,
 }
 
-export const ProfileMenu = ({ appName, appVersion, avatarUrl, name, email, helpUrl }) => (
+export const ProfileMenu = ({
+    appName,
+    appVersion,
+    avatarUrl,
+    name,
+    email,
+    helpUrl,
+}) => (
     <div data-test="headerbar-profile-menu">
         <ProfileContents
             appName={appName}

diff --git a/components/header-bar/src/profile-menu/use-instance-info.js b/components/header-bar/src/profile-menu/use-instance-info.js
@@ -1,26 +1,12 @@
-import { useConfig, useDataQuery } from '@dhis2/app-runtime'
-import { useMemo } from 'react'
+import { useDataQuery } from '@dhis2/app-runtime'
 
 const QUERY_INSTANCE_INFO = {
     systemInfo: {
         resource: 'system/info',
         params: {
-            fields: ['version', 'revision']
-        }
-    }
+            fields: ['version', 'revision'],
+        },
+    },
 }
 
-export const useInstanceInfo = () => {
-    const config = useConfig()
-    const result = useDataQuery(QUERY_INSTANCE_INFO)
-    const data = useMemo(() => {
-        if (!result.data) {
-            return result.data
-        }
-
-        const { systemInfo } = result.data
-        return { ...systemInfo, ...config }
-    }, [result.data])
-
-    return { ...result, data }
-}
+export const useInstanceInfo = () => useDataQuery(QUERY_INSTANCE_INFO)
diff --git a/components/header-bar/src/profile.js b/components/header-bar/src/profile.js
@@ -17,10 +17,7 @@ const Profile = ({ name, email, avatarUrl, helpUrl, appName, appVersion }) => {
             data-test="headerbar-profile"
             className="headerbar-profile"
         >
-            <button
-                className="headerbar-profile-btn"
-                onClick={toggle}
-            >
+            <button className="headerbar-profile-btn" onClick={toggle}>
                 <UserIcon
                     avatarUrl={avatarUrl}
                     name={name}