From 9f9c2b902f49db53bdf6043f2c9e3fd9fa9a083e Mon Sep 17 00:00:00 2001
From: Thanh Pham <zlatan.pham@gmail.com>
Date: Mon, 2 Dec 2019 18:10:43 +0700
Subject: [PATCH] [CLD-501] update app-list to have 4 rows option (#177)

---
 .../__tests__/__snapshots__/client.tsx.snap      |  2 ++
 src/components/pages/client.tsx                  |  2 ++
 .../ui/__tests__/__snapshots__/app-list.tsx.snap | 16 ++++++++--------
 src/components/ui/__tests__/app-list.tsx         | 12 +++++++++++-
 src/components/ui/app-list.tsx                   | 13 +++++++++----
 5 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/components/pages/__tests__/__snapshots__/client.tsx.snap b/src/components/pages/__tests__/__snapshots__/client.tsx.snap
index 7b58c1f6ea..e0a876699e 100644
--- a/src/components/pages/__tests__/__snapshots__/client.tsx.snap
+++ b/src/components/pages/__tests__/__snapshots__/client.tsx.snap
@@ -45,6 +45,7 @@ exports[`Client should match a snapshot 1`] = `
           }
         }
         loading={false}
+        numOfColumn={3}
         onCardClick={[Function]}
         title="Featured Apps"
       />
@@ -104,6 +105,7 @@ exports[`Client should match a snapshot 1`] = `
           }
         }
         loading={false}
+        numOfColumn={3}
         onCardClick={[Function]}
         pagination={
           Object {
diff --git a/src/components/pages/client.tsx b/src/components/pages/client.tsx
index afd63dc3c9..e9e830bb8e 100644
--- a/src/components/pages/client.tsx
+++ b/src/components/pages/client.tsx
@@ -75,6 +75,7 @@ export const Client: React.FunctionComponent<ClientProps> = ({
                   loading={loading}
                   onCardClick={handleOnCardClick({ setVisible, appDetail, fetchAppDetail, clientId })}
                   infoType="CLIENT_APPS_EMPTY"
+                  numOfColumn={3}
                 />
                 <div className={styles.divider} />
               </>
@@ -90,6 +91,7 @@ export const Client: React.FunctionComponent<ClientProps> = ({
                 pageNumber,
                 onChange: handleOnChange(history)
               }}
+              numOfColumn={3}
             />
           </div>
         )}
diff --git a/src/components/ui/__tests__/__snapshots__/app-list.tsx.snap b/src/components/ui/__tests__/__snapshots__/app-list.tsx.snap
index 9fc2a927c7..923f4d73e6 100644
--- a/src/components/ui/__tests__/__snapshots__/app-list.tsx.snap
+++ b/src/components/ui/__tests__/__snapshots__/app-list.tsx.snap
@@ -13,7 +13,7 @@ exports[`AppList should match a snapshot 1`] = `
       className=" "
       data-test="app-list-container"
     >
-      <GridThreeColItem
+      <GridFourColItem
         key="09043eb8-9e5e-4650-b7f1-f0cb62699027"
       >
         <AppCard
@@ -43,8 +43,8 @@ exports[`AppList should match a snapshot 1`] = `
           onClick={[Function]}
           onSettingsClick={[Function]}
         />
-      </GridThreeColItem>
-      <GridThreeColItem
+      </GridFourColItem>
+      <GridFourColItem
         key="261da083-cee2-4f5c-a18f-8f9375f1f5af"
       >
         <AppCard
@@ -74,7 +74,7 @@ exports[`AppList should match a snapshot 1`] = `
           onClick={[Function]}
           onSettingsClick={[Function]}
         />
-      </GridThreeColItem>
+      </GridFourColItem>
     </GridFiveCol>
   </div>
   <Section>
@@ -101,7 +101,7 @@ exports[`AppList should match a snapshot when use empty infoType 1`] = `
       className=" "
       data-test="app-list-container"
     >
-      <GridThreeColItem
+      <GridFourColItem
         key="09043eb8-9e5e-4650-b7f1-f0cb62699027"
       >
         <AppCard
@@ -131,8 +131,8 @@ exports[`AppList should match a snapshot when use empty infoType 1`] = `
           onClick={[Function]}
           onSettingsClick={[Function]}
         />
-      </GridThreeColItem>
-      <GridThreeColItem
+      </GridFourColItem>
+      <GridFourColItem
         key="261da083-cee2-4f5c-a18f-8f9375f1f5af"
       >
         <AppCard
@@ -162,7 +162,7 @@ exports[`AppList should match a snapshot when use empty infoType 1`] = `
           onClick={[Function]}
           onSettingsClick={[Function]}
         />
-      </GridThreeColItem>
+      </GridFourColItem>
     </GridFiveCol>
   </div>
   <Section>
diff --git a/src/components/ui/__tests__/app-list.tsx b/src/components/ui/__tests__/app-list.tsx
index 5b130bbe0a..6caa295f11 100644
--- a/src/components/ui/__tests__/app-list.tsx
+++ b/src/components/ui/__tests__/app-list.tsx
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
 import { AppList, AppListProps } from '../app-list'
 import { appsDataStub } from '@/sagas/__stubs__/apps'
-import { Loader } from '@reapit/elements'
+import { Loader, GridFourColItem, GridThreeColItem } from '@reapit/elements'
 import { AppSummaryModel } from '../../../types/marketplace-api-schema'
 import AppCard from '../app-card'
 
@@ -45,4 +45,14 @@ describe('AppList', () => {
     expect(props.onCardClick).toHaveBeenCalledTimes(1)
     expect(props.onCardClick).toHaveBeenCalledWith(appsDataStub?.data?.data?.[0])
   })
+
+  it('should default contain GridFourColItem', () => {
+    const wrapper = shallow(<AppList {...props} />)
+    expect(wrapper.find(GridFourColItem).length).toBeGreaterThan(0)
+  })
+
+  it('should contain GridThreeColItem', () => {
+    const wrapper = shallow(<AppList numOfColumn={3} {...props} />)
+    expect(wrapper.find(GridThreeColItem).length).toBeGreaterThan(0)
+  })
 })
diff --git a/src/components/ui/app-list.tsx b/src/components/ui/app-list.tsx
index 338bc5a13e..8c53cc024d 100644
--- a/src/components/ui/app-list.tsx
+++ b/src/components/ui/app-list.tsx
@@ -12,7 +12,8 @@ import {
   Section,
   Pagination,
   GridThreeColItem,
-  FlexContainerBasic
+  FlexContainerBasic,
+  GridFourColItem
 } from '@reapit/elements'
 
 export type AppListProps = {
@@ -23,6 +24,7 @@ export type AppListProps = {
   title?: string
   infoType: InfoType
   pagination?: PaginationProps
+  numOfColumn?: number
 }
 
 export const AppList: React.FunctionComponent<AppListProps> = ({
@@ -32,8 +34,11 @@ export const AppList: React.FunctionComponent<AppListProps> = ({
   onSettingsClick,
   title,
   infoType,
-  pagination
+  pagination,
+  numOfColumn = 4
 }) => {
+  const WrapperContainer = numOfColumn === 4 ? GridFourColItem : GridThreeColItem
+
   return (
     <FlexContainerBasic hasPadding flexColumn>
       {title && <H3>{title}</H3>}
@@ -43,7 +48,7 @@ export const AppList: React.FunctionComponent<AppListProps> = ({
             <Info infoType={infoType}>{!infoType && 'UNFORTUNATELY, YOUR SEARCH RETURNED NO RESULTS'}</Info>
           ) : (
             list.map(app => (
-              <GridThreeColItem key={app.id}>
+              <WrapperContainer key={app.id}>
                 <AppCard
                   app={app}
                   onClick={
@@ -63,7 +68,7 @@ export const AppList: React.FunctionComponent<AppListProps> = ({
                       : undefined
                   }
                 />
-              </GridThreeColItem>
+              </WrapperContainer>
             ))
           )}
         </GridFiveCol>