feat: #1125: Update new redux flow for client apps

packages/marketplace/src/actions/__tests__/client.ts

@@ -1,28 +1,32 @@
-import { clientLoading, clientReceiveData, clientRequestData, clientClearData } from '../client'
+import {
+  clientAppSummaryRequestData,
+  clientAppSummaryReceiveData,
+  clientAppSummaryRequestDataFailure,
+  clientAppSummaryClearData,
+} from '../client'
 import ActionTypes from '../../constants/action-types'
 import { appsDataStub, featuredAppsDataStub } from '../../sagas/__stubs__/apps'
 
 describe('client actions', () => {
-  it('should create a clientLoading action', () => {
-    expect(clientLoading.type).toEqual(ActionTypes.CLIENT_LOADING)
-    expect(clientLoading(true).data).toEqual(true)
+  it('should create a clientAppSummaryRequestData action', () => {
+    expect(clientAppSummaryRequestData.type).toEqual(ActionTypes.CLIENT_APP_SUMMARY_REQUEST_DATA)
+    expect(clientAppSummaryRequestData({ page: 1 }).data).toEqual({ page: 1 })
   })
-
-  it('should create a clientReceiveData action', () => {
-    expect(clientReceiveData.type).toEqual(ActionTypes.CLIENT_RECEIVE_DATA)
-    expect(clientReceiveData({ featuredApps: featuredAppsDataStub.data.data, apps: appsDataStub.data }).data).toEqual({
+  it('should create a clientAppSummaryReceiveData action', () => {
+    expect(clientAppSummaryReceiveData.type).toEqual(ActionTypes.CLIENT_APP_SUMMARY_RECEIVE_DATA)
+    expect(
+      clientAppSummaryReceiveData({ featuredApps: featuredAppsDataStub.data.data, apps: appsDataStub.data }).data,
+    ).toEqual({
       featuredApps: featuredAppsDataStub.data.data,
       apps: appsDataStub.data,
     })
   })
-
-  it('should create a clientRequestData action', () => {
-    expect(clientRequestData.type).toEqual(ActionTypes.CLIENT_REQUEST_DATA)
-    expect(clientRequestData({ page: 1 }).data).toEqual({ page: 1 })
+  it('should create a clientAppSummaryRequestDataFailure action', () => {
+    expect(clientAppSummaryRequestDataFailure.type).toEqual(ActionTypes.CLIENT_APP_SUMMARY_REQUEST_FAILURE)
+    expect(clientAppSummaryRequestDataFailure('error').data).toEqual('error')
   })
-
   it('should create a clientClearData action', () => {
-    expect(clientClearData.type).toEqual(ActionTypes.CLIENT_CLEAR_DATA)
-    expect(clientClearData(null).data).toEqual(null)
+    expect(clientAppSummaryClearData.type).toEqual(ActionTypes.CLIENT_APP_SUMMARY_CLEAR_DATA)
+    expect(clientAppSummaryClearData(null).data).toEqual(null)
   })
 })

packages/marketplace/src/actions/client.ts

@@ -1,9 +1,25 @@
 import { actionCreator } from '../utils/actions'
 import ActionTypes from '../constants/action-types'
-import { ClientItem, ClientParams } from '../reducers/client'
+import { ClientAppSummary, ClientAppSummaryParams } from '../reducers/client/app-summary'
+import { AppDetailData } from '@/reducers/client/app-detail'
 
-export const clientRequestData = actionCreator<ClientParams>(ActionTypes.CLIENT_REQUEST_DATA)
-export const clientRequestDataFailure = actionCreator<void>(ActionTypes.CLIENT_REQUEST_FAILURE)
-export const clientLoading = actionCreator<boolean>(ActionTypes.CLIENT_LOADING)
-export const clientReceiveData = actionCreator<ClientItem | undefined>(ActionTypes.CLIENT_RECEIVE_DATA)
-export const clientClearData = actionCreator<null>(ActionTypes.CLIENT_CLEAR_DATA)
+export interface ClientAppDetailParams {
+  id: string
+  clientId?: string
+}
+
+export const clientAppSummaryRequestData = actionCreator<ClientAppSummaryParams>(
+  ActionTypes.CLIENT_APP_SUMMARY_REQUEST_DATA,
+)
+export const clientAppSummaryReceiveData = actionCreator<ClientAppSummary | undefined>(
+  ActionTypes.CLIENT_APP_SUMMARY_RECEIVE_DATA,
+)
+export const clientAppSummaryRequestDataFailure = actionCreator<string>(ActionTypes.CLIENT_APP_SUMMARY_REQUEST_FAILURE)
+export const clientAppSummaryClearData = actionCreator<null>(ActionTypes.CLIENT_APP_SUMMARY_CLEAR_DATA)
+
+// Client App Detail
+export const clientAppDetailRequestData = actionCreator<ClientAppDetailParams>(
+  ActionTypes.CLIENT_APP_DETAIL_REQUEST_DATA,
+)
+export const clientAppDetailReceiveData = actionCreator<AppDetailData>(ActionTypes.CLIENT_APP_DETAIL_RECEIVE_DATA)
+export const clientAppDetailRequestFailure = actionCreator<string>(ActionTypes.CLIENT_APP_DETAIL_REQUEST_FAILURE)

packages/marketplace/src/components/pages/__tests__/client.tsx

@@ -3,7 +3,7 @@ import { Provider } from 'react-redux'
 import { shallow, mount } from 'enzyme'
 import { appsDataStub, featuredAppsDataStub } from '@/sagas/__stubs__/apps'
 import { ReduxState } from '@/types/core'
-import { ClientItem } from '@/reducers/client'
+import { ClientAppSummary } from '@/reducers/client/app-summary'
 import {
   Client,
   ClientProps,
@@ -34,12 +34,12 @@ const routerProps = {
 } as RouteComponentProps<any, StaticContext, any>
 
 const props = (loading: boolean): ClientProps => ({
-  clientState: {
-    loading: loading,
-    clientData: {
+  appSummaryState: {
+    isAppSummaryLoading: loading,
+    data: {
       featuredApps: featuredAppsDataStub.data,
       apps: appsDataStub,
-    } as ClientItem,
+    } as ClientAppSummary,
   },
   appDetail: {
     appDetailData: appDetailDataStub,
@@ -81,12 +81,12 @@ describe('Client', () => {
     } as RouteComponentProps<any, StaticContext, any>
 
     const props: ClientProps = {
-      clientState: {
-        loading: false,
-        clientData: {
+      appSummaryState: {
+        isAppSummaryLoading: false,
+        data: {
           featuredApps: [] as AppSummaryModel[],
           apps: appsDataStub,
-        } as ClientItem,
+        } as ClientAppSummary,
       },
       appDetail: {
         appDetailData: appDetailDataStub,
@@ -111,12 +111,12 @@ describe('Client', () => {
 
   it('should match a snapshot when featured apps is undefined', () => {
     const props: ClientProps = {
-      clientState: {
-        loading: false,
-        clientData: {
+      appSummaryState: {
+        isAppSummaryLoading: false,
+        data: {
           featuredApps: undefined,
           apps: appsDataStub,
-        } as ClientItem,
+        } as ClientAppSummary,
       },
       appDetail: {
         appDetailData: appDetailDataStub,
@@ -143,9 +143,20 @@ describe('Client', () => {
     it('should return correctly', () => {
       const mockState = {
         client: {
-          clientData: {
-            featuredApps: featuredAppsDataStub.data,
-            apps: appsDataStub,
+          appSummary: {
+            data: {
+              apps: appsDataStub.data,
+              featuredApps: featuredAppsDataStub.data,
+            },
+            isAppSummaryLoading: false,
+            error: 'error',
+          },
+          appDetail: {
+            data: appDetailDataStub.data,
+            appDetailAuthCode: '',
+            isAppDetailAuthCodeLoading: false,
+            isAppDetailLoading: false,
+            error: '',
           },
         },
         appDetail: {

packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useSelector } from 'react-redux'
-import { selectAppDetailData, selectAppDetailLoading } from '@/selector/developer-app-detail'
+import { selectAppDetailData, selectAppDetailLoading } from '@/selector/client-app-detail'
 import { selectLoginType } from '@/selector/auth'
 import AppHeader from '@/components/ui/app-detail/app-header'
 import AppContent from '@/components/ui/app-detail/app-content'

packages/marketplace/src/components/pages/client.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { connect } from 'react-redux'
 import { ReduxState, FormState } from '@/types/core'
-import { ClientState } from '@/reducers/client'
+import { ClientAppSummaryState } from '@/reducers/client/app-summary'
 import { Loader } from '@reapit/elements'
 import ErrorBoundary from '@/components/hocs/error-boundary'
 import { withRouter, RouteComponentProps } from 'react-router'
@@ -10,7 +10,7 @@ import AppSidebar from '@/components/ui/app-sidebar'
 import { appDetailRequestData } from '@/actions/app-detail'
 import { AppDetailState } from '@/reducers/app-detail'
 import AppDetailModal from '@/components/ui/app-detail-modal'
-import { selectClientId } from '@/selector/client'
+import { selectClientId, selectAppSummary } from '@/selector/client'
 import { AppSummaryModel } from '@reapit/foundations-ts-definitions'
 import styles from '@/styles/pages/client.scss?mod'
 import { appInstallationsSetFormState } from '@/actions/app-installations'
@@ -24,7 +24,7 @@ export interface ClientMappedActions {
 }
 
 export interface ClientMappedProps {
-  clientState: ClientState
+  appSummaryState: ClientAppSummaryState
   appDetail: AppDetailState
   clientId: string
   installationsFormState: FormState
@@ -77,7 +77,7 @@ export const handleInstallationDone = ({
 export type ClientProps = ClientMappedActions & ClientMappedProps & RouteComponentProps<{ page?: any }>
 
 export const Client: React.FunctionComponent<ClientProps> = ({
-  clientState,
+  appSummaryState,
   history,
   location,
   fetchAppDetail,
@@ -93,11 +93,11 @@ export const Client: React.FunctionComponent<ClientProps> = ({
       ? Number(getParamValueFromPath(location.search, 'page'))
       : 1
   const hasParams = hasFilterParams(location.search)
-  const unfetched = !clientState.clientData
-  const loading = clientState.loading
-  const apps = clientState?.clientData?.apps?.data || []
-  const featuredApps = clientState?.clientData?.featuredApps || []
-  const { totalCount, pageSize } = clientState?.clientData?.apps || {}
+  const unfetched = !appSummaryState.data
+  const loading = appSummaryState.isAppSummaryLoading
+  const apps = appSummaryState?.data?.apps?.data || []
+  const featuredApps = appSummaryState?.data?.featuredApps || []
+  const { totalCount, pageSize } = appSummaryState?.data?.apps || {}
   const [visible, setVisible] = React.useState(false)
 
   const isDone = installationsFormState === 'DONE'
@@ -155,7 +155,7 @@ export const Client: React.FunctionComponent<ClientProps> = ({
 }
 
 export const mapStateToProps = (state: ReduxState): ClientMappedProps => ({
-  clientState: state.client,
+  appSummaryState: selectAppSummary(state),
   appDetail: state.appDetail,
   clientId: selectClientId(state),
   installationsFormState: state.installations.formState,

packages/marketplace/src/constants/action-types.ts

@@ -44,11 +44,15 @@ const ActionTypes = {
   HIDE_NOTIFICATION_MESSAGE: 'HIDE_NOTIFICATION_MESSAGE',
 
   // Client actions
-  CLIENT_REQUEST_DATA: 'CLIENT_REQUEST_DATA',
-  CLIENT_REQUEST_FAILURE: 'CLIENT_REQUEST_FAILURE',
-  CLIENT_LOADING: 'CLIENT_LOADING',
-  CLIENT_RECEIVE_DATA: 'CLIENT_RECEIVE_DATA',
-  CLIENT_CLEAR_DATA: 'CLIENT_CLEAR_DATA',
+  CLIENT_APP_SUMMARY_REQUEST_DATA: 'CLIENT_APP_SUMMARY_REQUEST_DATA',
+  CLIENT_APP_SUMMARY_RECEIVE_DATA: 'CLIENT_APP_SUMMARY_RECEIVE_DATA',
+  CLIENT_APP_SUMMARY_REQUEST_FAILURE: 'CLIENT_APP_SUMMARY_REQUEST_FAILURE',
+  CLIENT_APP_SUMMARY_CLEAR_DATA: 'CLIENT_APP_SUMMARY_CLEAR_DATA',
+
+  // Client App Detail
+  CLIENT_APP_DETAIL_REQUEST_DATA: 'CLIENT_APP_DETAIL_REQUEST_DATA',
+  CLIENT_APP_DETAIL_REQUEST_FAILURE: 'CLIENT_APP_DETAIL_REQUEST_FAILURE',
+  CLIENT_APP_DETAIL_RECEIVE_DATA: 'CLIENT_APP_DETAIL_RECEIVE_DATA',
 
   // Installed apps actions
   INSTALLED_APPS_REQUEST_DATA: 'INSTALLED_APPS_REQUEST_DATA',

packages/marketplace/src/core/store.ts

@@ -31,6 +31,7 @@ import webhookEditReducer from '../reducers/webhook-edit-modal'
 import webhookSubscriptions from '../reducers/webhook-subscriptions'
 
 import authSagas from '../sagas/auth'
+import appsSaga from '../sagas/apps/apps'
 import clientSagas from '../sagas/client'
 import appDetailSagas from '../sagas/app-detail'
 import installedAppsSagas from '../sagas/installed-apps'
@@ -103,6 +104,7 @@ export class Store {
   static sagas = function*() {
     yield all([
       fork(authSagas),
+      fork(appsSaga),
       fork(clientSagas),
       fork(installedAppsSagas),
       fork(appUsageStatsSagas),