feat: #1125: Create app details standalone page

reapit · May 4, 2020 · 4ec9e74 · 4ec9e74
1 parent d918246
commit 4ec9e74
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 19 deletions.
diff --git a/packages/marketplace/src/components/pages/developer-app-detail.tsx b/packages/marketplace/src/components/pages/developer-app-detail.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Grid, GridItem } from '@reapit/elements'
+
+type DeveloperAppDetailProps = {}
+
+const DeveloperAppDetail: React.FC<DeveloperAppDetailProps> = () => {
+  return (
+    <Grid>
+      <GridItem>
+        <Grid>
+          <GridItem>Avatar</GridItem>
+          <GridItem>Title</GridItem>
+        </Grid>
+      </GridItem>
+      <GridItem>
+        <Grid>
+          <GridItem>SideBar</GridItem>
+          <GridItem>Description</GridItem>
+        </Grid>
+      </GridItem>
+    </Grid>
+  )
+}
+
+export default DeveloperAppDetail
diff --git a/packages/marketplace/src/components/pages/developer-home.tsx b/packages/marketplace/src/components/pages/developer-home.tsx
@@ -12,11 +12,14 @@ import { appDetailRequestData, removeAuthenticationCode } from '@/actions/app-de
 import DeveloperAppModal from '../ui/developer-app-modal'
 import { setDeveloperAppModalStateViewDetail, developerAppShowModal } from '@/actions/developer-app-modal'
 import { appDeleteSetInitFormState } from '@/actions/app-delete'
+import { developerRequestData } from '@/actions/developer'
 import { AppSummaryModel } from '@reapit/foundations-ts-definitions'
 import { SandboxPopUp } from '../ui/sandbox-pop-up'
+import { getParamValueFromPath } from '@/utils/client-url-params'
 
 export interface DeveloperMappedActions {
   fetchAppDetail: (id: string) => void
+  fetchDeveloperApps: (page: number) => void
   setDeveloperAppModalStateViewDetail: () => void
   appDeleteSetInitFormState: () => void
   setVisible: (isVisible: boolean) => void
@@ -49,28 +52,41 @@ export const handleAfterClose = ({ setVisible, removeAuthenticationCode }) => ()
   setVisible(false)
 }
 
-export const handleOnChange = history => (page: number) => history.push(`${routes.DEVELOPER_MY_APPS}/${page}`)
+export const handleOnChange = history => (page: number) => history.push(`${routes.DEVELOPER_MY_APPS}?page=${page}`)
 
 export type DeveloperProps = DeveloperMappedActions & DeveloperMappedProps & RouteComponentProps<{ page?: any }>
 
 export const DeveloperHome: React.FunctionComponent<DeveloperProps> = ({
   developerState,
-  match,
   fetchAppDetail,
+  fetchDeveloperApps,
   setDeveloperAppModalStateViewDetail,
   appDeleteSetInitFormState,
   appDetail,
   history,
   isVisible,
   setVisible,
   removeAuthenticationCode,
+  location,
 }) => {
-  const pageNumber = match.params && !isNaN(match.params.page) ? Number(match.params.page) : 1
+  const pageNumber =
+    !isNaN(Number(getParamValueFromPath(location.search, 'page'))) &&
+    Number(getParamValueFromPath(location.search, 'page')) > 0
+      ? Number(getParamValueFromPath(location.search, 'page'))
+      : 1
   const unfetched = !developerState.developerData
   const loading = developerState.loading
   const list = developerState?.developerData?.data?.data || []
   const { totalCount, pageSize } = developerState?.developerData?.data || {}
 
+  console.log('pageNumber', pageNumber)
+  React.useEffect(() => {
+    if (unfetched) {
+      return
+    }
+    fetchDeveloperApps(pageNumber)
+  }, [pageNumber, unfetched])
+
   if (unfetched || loading) {
     return <Loader />
   }
@@ -115,6 +131,7 @@ export const mapStateToProps = (state: ReduxState): DeveloperMappedProps => ({
 
 export const mapDispatchToProps = (dispatch: any): DeveloperMappedActions => ({
   fetchAppDetail: (id: string) => dispatch(appDetailRequestData({ id })),
+  fetchDeveloperApps: (page: number) => dispatch(developerRequestData({ page })),
   setDeveloperAppModalStateViewDetail: () => dispatch(setDeveloperAppModalStateViewDetail()),
   appDeleteSetInitFormState: () => dispatch(appDeleteSetInitFormState()),
   setVisible: (isVisible: boolean) => dispatch(developerAppShowModal(isVisible)),

diff --git a/packages/marketplace/src/constants/routes.ts b/packages/marketplace/src/constants/routes.ts
@@ -9,9 +9,9 @@ const Routes = {
   DEVELOPER: '/developer',
   DEVELOPER_WELCOME: '/developer/welcome',
   DEVELOPER_MY_APPS: '/developer/apps',
+  DEVELOPER_APP_DETAIL: '/developer/apps/:id',
   DEVELOPER_SWAGGER: '/developer/swagger',
   DEVELOPER_ELEMENTS: '/developer/elements',
-  DEVELOPER_MY_APPS_PAGINATE: '/developer/apps/:page',
   DEVELOPER_MY_APPS_EDIT: '/developer/apps/:appid/edit',
   DEVELOPER_API_DOCS: '/developer/api-docs',
   DEVELOPER_ANALYTICS: '/developer/analytics',

diff --git a/packages/marketplace/src/core/router.tsx b/packages/marketplace/src/core/router.tsx
@@ -16,6 +16,7 @@ const ClientSetting = React.lazy(() => import('../components/pages/settings/clie
 const MyApps = React.lazy(() => import('../components/pages/my-apps'))
 const Register = React.lazy(() => import('../components/pages/register'))
 const DeveloperHome = React.lazy(() => import('../components/pages/developer-home'))
+const DeveloperAppDetail = React.lazy(() => import('../components/pages/developer-app-detail'))
 const DeveloperSubmitApp = React.lazy(() => import('../components/pages/developer-submit-app'))
 const AdminApprovalsPage = React.lazy(() => import('../components/pages/admin-approvals'))
 const AdminDevManagementPage = React.lazy(() => import('../components/pages/admin-dev-management'))
@@ -58,13 +59,7 @@ const Router = () => {
               <PrivateRoute allow="CLIENT" path={Routes.CLIENT_SETTINGS} exact fetcher component={ClientSetting} />
 
               <PrivateRoute allow="DEVELOPER" path={Routes.DEVELOPER_MY_APPS} component={DeveloperHome} exact fetcher />
-              <PrivateRoute
-                allow="DEVELOPER"
-                path={Routes.DEVELOPER_MY_APPS_PAGINATE}
-                component={DeveloperHome}
-                exact
-                fetcher
-              />
+              <PrivateRoute allow="DEVELOPER" path={Routes.DEVELOPER_APP_DETAIL} component={DeveloperAppDetail} exact />
               <PrivateRoute
                 allow="DEVELOPER"
                 path={Routes.DEVELOPER_MY_APPS_EDIT}

diff --git a/packages/marketplace/src/utils/__tests__/route-dispatcher.ts b/packages/marketplace/src/utils/__tests__/route-dispatcher.ts
@@ -54,11 +54,6 @@ describe('routeDispatcher', () => {
     expect(store.dispatch).toHaveBeenCalledWith(developerRequestData({ page: 1 }))
   })
 
-  it('should dispatch to developerRequestData for the developer paginate route', async () => {
-    await routeDispatcher(Routes.DEVELOPER_MY_APPS_PAGINATE as RouteValue, { page: '2' })
-    expect(store.dispatch).toHaveBeenCalledWith(developerRequestData({ page: 2 }))
-  })
-
   it('should dispatch to adminApprovalsRequestData for the admin approvals data route', async () => {
     await routeDispatcher(Routes.ADMIN_APPROVALS as RouteValue)
     expect(store.dispatch).toHaveBeenCalledWith(adminApprovalsRequestData(1))

diff --git a/packages/marketplace/src/utils/route-dispatcher.ts b/packages/marketplace/src/utils/route-dispatcher.ts
@@ -56,9 +56,6 @@ const routeDispatcher = async (route: RouteValue, params?: StringMap, search?: s
       store.dispatch(submitAppRequestData())
       store.dispatch(appDetailRequestData({ id }))
       break
-    case Routes.DEVELOPER_MY_APPS_PAGINATE:
-      store.dispatch(developerRequestData({ page: params && params.page ? Number(params.page) : 1 }))
-      break
     case Routes.ADMIN_APPROVALS:
       store.dispatch(adminApprovalsRequestData(1))
       break