diff --git a/packages/marketplace/src/components/pages/__tests__/developer-home.test.tsx b/packages/marketplace/src/components/pages/__tests__/developer-home.test.tsx index f22f80f505..4a16ed2885 100644 --- a/packages/marketplace/src/components/pages/__tests__/developer-home.test.tsx +++ b/packages/marketplace/src/components/pages/__tests__/developer-home.test.tsx @@ -5,19 +5,11 @@ import { mount } from 'enzyme' import configureStore from 'redux-mock-store' import appState from '@/reducers/__stubs__/app-state' import Routes from '@/constants/routes' -import DeveloperHome, { - handleOnCardClick, - handleAfterClose, - handleFetchDeveloperApps, - handleOnChange, -} from '../developer-home' +import DeveloperHome, { handleOnCardClick, handleFetchDeveloperApps, handleOnChange } from '../developer-home' import { AppSummaryModel } from '@/types/marketplace-api-schema' -import { appDetailRequestData, removeAuthenticationCode } from '@/actions/app-detail' -import { developerAppShowModal } from '@/actions/developer-app-modal' import { developerRequestData } from '@/actions/developer' import { getMockRouterProps } from '@/utils/mock-helper' import routes from '@/constants/routes' -import { AppDetailState } from '@/reducers/app-detail' describe('Login', () => { const { history } = getMockRouterProps({}) @@ -42,31 +34,12 @@ describe('Login', () => { }) describe('handleOnCardClick', () => { it('should run correctly', () => { - const mockAppDetailState = { - appDetailData: { - data: { - id: 'testId', - }, - }, - } as AppDetailState const mockAppSummary: AppSummaryModel = { - id: 'testId2', + id: 'testId', } - const fn = handleOnCardClick(mockAppDetailState, spyDispatch) + const fn = handleOnCardClick(history) fn(mockAppSummary) - expect(spyDispatch).toBeCalledWith( - appDetailRequestData({ - id: mockAppSummary.id || '', - }), - ) - }) - }) - describe('handleAfterClose', () => { - it('should run correctly', () => { - const fn = handleAfterClose(spyDispatch) - fn() - expect(spyDispatch).toBeCalledWith(removeAuthenticationCode()) - expect(spyDispatch).toBeCalledWith(developerAppShowModal(false)) + expect(history.push).toBeCalledWith(`${Routes.DEVELOPER_MY_APPS}/${mockAppSummary.id}`) }) }) describe('handleFetchDeveloperApps', () => { diff --git a/packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/client-app-detail.test.tsx.snap b/packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/client-app-detail.test.tsx.snap index 4e60aa6f95..519a85db3e 100644 --- a/packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/client-app-detail.test.tsx.snap +++ b/packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/client-app-detail.test.tsx.snap @@ -492,6 +492,28 @@ exports[`ClientAppDetail should not render loader when client.appDetail.data is + +
+ + + +
+ diff --git a/packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx b/packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx index 56b2f1400c..83ca5fc48b 100644 --- a/packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx +++ b/packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx @@ -1,4 +1,7 @@ import * as React from 'react' +import { History } from 'history' +import { useHistory } from 'react-router' +import classNames from 'classnames' import { handleUninstallAppButtonClick, handleCloseUninstallConfirmationModal, @@ -12,11 +15,12 @@ import { selectAppDetailData, selectAppDetailLoading } from '@/selector/client-a import { selectLoginType, selectIsAdmin } from '@/selector/auth' import AppHeader from '@/components/ui/standalone-app-detail/app-header' import AppContent from './app-content' -import { Loader, Button } from '@reapit/elements' +import { Loader, Button, FormSection } from '@reapit/elements' import clientAppDetailStyles from '@/styles/pages/client-app-detail.scss?mod' import ClientAppInstallConfirmation from '@/components/ui/client-app-detail/client-app-install-confirmation' import { Aside } from './aside' import { getDesktopIntegrationTypes } from '@/utils/get-desktop-integration-types' +import Routes from '@/constants/routes' export type ClientAppDetailProps = {} @@ -32,6 +36,12 @@ export const handleInstallAppButtonClick = (setIsVisibleInstallConfirmation: (is } } +export const onBackToAppsButtonClick = (history: History) => { + return () => { + history.push(Routes.CLIENT) + } +} + export const renderAppHeaderButtonGroup = ( id: string, installedOn: string, @@ -71,6 +81,7 @@ export const renderAppHeaderButtonGroup = ( } const ClientAppDetail: React.FC = () => { + const history = useHistory() const [isVisibleInstallConfirmation, setIsVisibleInstallConfirmation] = React.useState(false) const [isVisibleUninstallConfirmation, setIsVisibleUninstallConfirmation] = React.useState(false) const closeUninstallConfirmationModal = React.useCallback( @@ -121,6 +132,11 @@ const ClientAppDetail: React.FC = () => { )} /> + + + {isVisibleUninstallConfirmation && ( { return { @@ -39,6 +30,7 @@ const createStore = (loading, isAdmin) => { } describe('MyApps', () => { + const { history } = getMockRouterProps({}) let mockStore let store beforeEach(() => { @@ -83,51 +75,19 @@ describe('MyApps', () => { }) it('handleOnChange', () => { - const mockHistory = { - push: jest.fn(), - } - const fn = handleOnChange(mockHistory) + const fn = handleOnChange(history) fn(1) - expect(mockHistory.push).toBeCalledWith(`${routes.MY_APPS}/${1}`) + expect(history.push).toBeCalledWith(`${routes.MY_APPS}/${1}`) }) - it('handleUseEffect', () => { - const mockProps = { - isDone: true, - installationsSetFormState: jest.fn(), - fetchMyApp: jest.fn(), - pageNumber: 1, - } - const fn = handleUseEffect(mockProps) - fn() - expect(mockProps.installationsSetFormState).toBeCalled() - expect(mockProps.fetchMyApp).toBeCalledWith(mockProps.pageNumber) - }) - - it('handleFetchMyApp', () => { - const dispatch = jest.fn() - const fn = handleFetchMyApp(dispatch, 1) - fn() - expect(dispatch).toBeCalledWith(myAppsRequestData(1)) - }) - it('handleSetStateViewManage', () => { - const dispatch = jest.fn() - const fn = handleSetStateViewManage(dispatch) - fn() - expect(dispatch).toBeCalledWith(setAppDetailModalStateManage()) - }) - it('handleFetchAppDetail', () => { - const dispatch = jest.fn() - const id = '1' - const clientId = '2' - const fn = handleFetchAppDetail(dispatch) - fn(id, clientId) - expect(dispatch).toBeCalledWith(appDetailRequestData({ id, clientId })) - }) - it('handleInstallationsSetFormState', () => { - const dispatch = jest.fn() - const fn = handleInstallationsSetFormState(dispatch) - fn('DONE') - expect(dispatch).toBeCalledWith(appInstallationsSetFormState('DONE')) + describe('handleOnSettingClick', () => { + it('should run correctly', () => { + const mockAppSummary: AppSummaryModel = { + id: 'testId', + } + const fn = handleOnSettingClick(history) + fn(mockAppSummary) + expect(history.push).toBeCalledWith(`${Routes.CLIENT}/${mockAppSummary.id}`) + }) }) }) diff --git a/packages/marketplace/src/components/pages/client-app-management/client-apps-management.tsx b/packages/marketplace/src/components/pages/client-app-management/client-apps-management.tsx index bdc97d1e6f..d9cf68077f 100644 --- a/packages/marketplace/src/components/pages/client-app-management/client-apps-management.tsx +++ b/packages/marketplace/src/components/pages/client-app-management/client-apps-management.tsx @@ -1,73 +1,36 @@ import * as React from 'react' -import { useSelector, useDispatch } from 'react-redux' +import { useSelector } from 'react-redux' import { useParams, useHistory } from 'react-router' -import { FormState } from '@/types/core' +import { History } from 'history' import { Loader, Info } from '@reapit/elements' import ErrorBoundary from '@/components/hocs/error-boundary' import routes from '@/constants/routes' import AppList from '@/components/ui/app-list' -import { appDetailRequestData } from '@/actions/app-detail' import AppDetailModal from '@/components/ui/app-detail-modal' -import { myAppsRequestData } from '@/actions/my-apps' -import { selectClientId, selectMyApps, selectAppDetail } from '@/selector/client' +import { selectMyApps } from '@/selector/client' import { AppSummaryModel } from '@reapit/foundations-ts-definitions' import { handleLaunchApp } from '@/utils/launch-app' -import { appInstallationsSetFormState } from '@/actions/app-installations' -import { setAppDetailModalStateManage } from '@/actions/app-detail-modal' import { selectIsAdmin } from '@/selector/auth' -import { selectInstallationFormState } from '@/selector/installations' -import { Dispatch } from 'redux' +import Routes from '@/constants/routes' export const handleOnChange = history => (page: number) => history.push(`${routes.MY_APPS}/${page}`) -export const handleUseEffect = ({ isDone, installationsSetFormState, fetchMyApp, pageNumber }) => () => { - if (isDone) { - installationsSetFormState('PENDING') - fetchMyApp(pageNumber) - } -} - -export const handleFetchMyApp = (dispatch: Dispatch, page: number) => () => { - dispatch(myAppsRequestData(page)) -} - -export const handleSetStateViewManage = (dispatch: Dispatch) => () => { - dispatch(setAppDetailModalStateManage()) -} - -export const handleFetchAppDetail = (dispatch: Dispatch) => (id: string, clientId: string) => { - dispatch(appDetailRequestData({ id, clientId })) -} - -export const handleInstallationsSetFormState = (dispatch: Dispatch) => (formState: FormState) => { - dispatch(appInstallationsSetFormState(formState)) +export const handleOnSettingClick = (history: History) => (app: AppSummaryModel) => { + history.push(`${Routes.CLIENT}/${app.id}`) } export const ClientAppsManagement: React.FunctionComponent = () => { - const dispatch = useDispatch() - + const history = useHistory() const myAppsState = useSelector(selectMyApps) - const appDetail = useSelector(selectAppDetail) - const clientId = useSelector(selectClientId) - const installationsFormState = useSelector(selectInstallationFormState) const isAdmin = useSelector(selectIsAdmin) - const history = useHistory() const { page = 1 } = useParams() const pageNumber = Number(page) - const fetchMyApp = handleFetchMyApp(dispatch, pageNumber) - const setStateViewManage = handleSetStateViewManage(dispatch) - const fetchAppDetail = handleFetchAppDetail(dispatch) - const installationsSetFormState = handleInstallationsSetFormState(dispatch) - const unfetched = !myAppsState.myAppsData const loading = myAppsState.loading const list = myAppsState?.myAppsData?.data?.data || [] const { totalCount, pageSize } = myAppsState?.myAppsData?.data || {} const [visible, setVisible] = React.useState(false) - const isDone = installationsFormState === 'DONE' - - React.useEffect(handleUseEffect({ isDone, installationsSetFormState, fetchMyApp, pageNumber }), [isDone]) if (unfetched || loading) { return @@ -81,13 +44,7 @@ export const ClientAppsManagement: React.FunctionComponent = () => { title="Manage Apps" loading={loading} onCardClick={(app: AppSummaryModel) => handleLaunchApp(app)} - onSettingsClick={(app: AppSummaryModel) => { - setVisible(true) - setStateViewManage() - if (app.id && (!appDetail.appDetailData || appDetail.appDetailData.data.id !== app.id)) { - fetchAppDetail(app.id, clientId) - } - }} + onSettingsClick={handleOnSettingClick(history)} infoType="INSTALLED_APPS_EMPTY" pagination={{ totalCount, diff --git a/packages/marketplace/src/components/pages/client/__tests__/__snapshots__/client.test.tsx.snap b/packages/marketplace/src/components/pages/client/__tests__/__snapshots__/client.test.tsx.snap index a45e80fb98..0efd3e9d3c 100644 --- a/packages/marketplace/src/components/pages/client/__tests__/__snapshots__/client.test.tsx.snap +++ b/packages/marketplace/src/components/pages/client/__tests__/__snapshots__/client.test.tsx.snap @@ -493,22 +493,6 @@ exports[`Client should match a snapshot when LOADING false 1`] = ` - - - - - @@ -1010,22 +994,6 @@ exports[`Client should match a snapshot when LOADING false 2`] = ` - - - - - @@ -1615,22 +1583,6 @@ exports[`Client should match a snapshot when featured apps is empty [] 1`] = ` - - - - - @@ -2220,22 +2172,6 @@ exports[`Client should match a snapshot when featured apps is undefined 1`] = ` - - - - - diff --git a/packages/marketplace/src/components/pages/client/__tests__/client.test.tsx b/packages/marketplace/src/components/pages/client/__tests__/client.test.tsx index 5d5786cc6f..91b9bd6fc9 100644 --- a/packages/marketplace/src/components/pages/client/__tests__/client.test.tsx +++ b/packages/marketplace/src/components/pages/client/__tests__/client.test.tsx @@ -3,16 +3,7 @@ import { Provider } from 'react-redux' import { mount } from 'enzyme' import { appsDataStub } from '@/sagas/__stubs__/apps' import { ClientAppSummary } from '@/reducers/client/app-summary' -import { - Client, - handleSetStateViewBrowse, - handleFetchAppDetail, - handleInstallationsSetFormState, - handleAfterClose, - handleOnChange, - handleOnCardClick, - onCardClickParams, -} from '../client' +import { Client, handleAfterClose, handleOnChange, handleOnCardClick } from '../client' import { addQuery } from '@/utils/client-url-params' import { AppSummaryModel } from '@reapit/foundations-ts-definitions' import ClientWelcomeMessageModal from '@/components/ui/client-welcome-message' @@ -22,9 +13,7 @@ import * as ReactRedux from 'react-redux' import { MemoryRouter } from 'react-router' import Routes from '@/constants/routes' import appState from '@/reducers/__stubs__/app-state' -import { setAppDetailModalStateBrowse } from '@/actions/app-detail-modal' -import { appDetailRequestData } from '@/actions/app-detail' -import { appInstallationsSetFormState } from '@/actions/app-installations' +import { getMockRouterProps } from '@/utils/mock-helper' const createState = appSummaryState => { return { @@ -37,6 +26,7 @@ const createState = appSummaryState => { } describe('Client', () => { + const { history } = getMockRouterProps({}) let store beforeEach(() => { @@ -121,12 +111,9 @@ describe('Client', () => { describe('handleOnChange', () => { it('should call push correctly', () => { - const mockHistory = { - push: jest.fn(), - } - const fn = handleOnChange(mockHistory) + const fn = handleOnChange(history) fn(1) - expect(mockHistory.push).toBeCalledWith(addQuery({ page: 1 })) + expect(history.push).toBeCalledWith(addQuery({ page: 1 })) }) }) @@ -139,28 +126,12 @@ describe('Client', () => { describe('handleOnCardClick', () => { it('should run correctly', () => { - const mockProps: onCardClickParams = { - setVisible: jest.fn(), - appDetail: { - authentication: { - loading: false, - code: '200', - }, - error: false, - loading: false, - appDetailData: { - data: appsDataStub.data.data![0], - }, - isStale: true, - }, - setStateViewBrowse: jest.fn(), - fetchAppDetail: jest.fn(), - clientId: 'ABC', + const mockAppSummary: AppSummaryModel = { + id: 'testId', } - const fn = handleOnCardClick(mockProps) - fn({ id: '1' }) - expect(mockProps.setVisible).toBeCalled() - expect(mockProps.fetchAppDetail).toBeCalled() + const fn = handleOnCardClick(history) + fn(mockAppSummary) + expect(history.push).toBeCalledWith(`${Routes.CLIENT}/${mockAppSummary.id}`) }) }) @@ -187,28 +158,4 @@ describe('Client', () => { }, 200) }) }) - - it('handleSetStateViewBrowse should run correctly', () => { - const dispatch = jest.fn() - const fn = handleSetStateViewBrowse(dispatch) - fn() - expect(dispatch).toBeCalledWith(setAppDetailModalStateBrowse()) - }) - - it('handleFetchAppDetail should run correctly', () => { - const dispatch = jest.fn() - const id = 'id' - const clientId = 'clientId' - const fn = handleFetchAppDetail(dispatch) - fn(id, clientId) - expect(dispatch).toBeCalledWith(appDetailRequestData({ id, clientId })) - }) - - it('handleInstallationsSetFormState should run correctly', () => { - const dispatch = jest.fn() - const formState = 'DONE' - const fn = handleInstallationsSetFormState(dispatch) - fn(formState) - expect(dispatch).toBeCalledWith(appInstallationsSetFormState(formState)) - }) }) diff --git a/packages/marketplace/src/components/pages/client/client.tsx b/packages/marketplace/src/components/pages/client/client.tsx index c1dc1e1dd3..5419a67f57 100644 --- a/packages/marketplace/src/components/pages/client/client.tsx +++ b/packages/marketplace/src/components/pages/client/client.tsx @@ -1,23 +1,17 @@ import * as React from 'react' -import { useSelector, useDispatch } from 'react-redux' -import { FormState } from '@/types/core' +import { History } from 'history' +import { useSelector } from 'react-redux' import { Loader } from '@reapit/elements' import ErrorBoundary from '@/components/hocs/error-boundary' import { useHistory, useLocation } from 'react-router' import AppList from '@/components/ui/app-list' 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, selectAppSummary } from '@/selector/client' +import { 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' import { addQuery, hasFilterParams } from '@/utils/client-url-params' -import { setAppDetailModalStateBrowse } from '@/actions/app-detail-modal' -import { selectAppDetail } from '@/selector/client' -import { selectInstallationFormState } from '@/selector/installations' -import { Dispatch } from 'redux' +import Routes from '@/constants/routes' export const handleAfterClose = ({ setVisible }) => () => setVisible(false) export const handleOnChange = history => (page: number) => { @@ -32,63 +26,15 @@ export interface onCardClickParams { clientId: string } -export const handleOnCardClick = ({ - setVisible, - setStateViewBrowse, - appDetail, - fetchAppDetail, - clientId, -}: onCardClickParams) => (app: AppSummaryModel) => { - setVisible(true) - setStateViewBrowse() - const isCacheEmpty = !appDetail.appDetailData - const isCacheStale = appDetail.isStale - const currentAppIdNotMatchWithCachedAppId = appDetail.appDetailData?.data?.id !== app.id - - if (app.id && (isCacheEmpty || isCacheStale || currentAppIdNotMatchWithCachedAppId)) { - fetchAppDetail(app.id, clientId) - } -} - -export const handleInstallationDone = ({ - isDone, - installationsSetFormState, - fetchAppDetail, - appDetail, - clientId, -}) => () => { - if (isDone) { - installationsSetFormState('PENDING') - fetchAppDetail(appDetail.appDetailData.data.id, clientId) - } -} - -export const handleSetStateViewBrowse = (dispatch: Dispatch) => () => { - dispatch(setAppDetailModalStateBrowse()) -} - -export const handleFetchAppDetail = (dispatch: Dispatch) => (id, clientId) => { - dispatch(appDetailRequestData({ id, clientId })) -} - -export const handleInstallationsSetFormState = (dispatch: Dispatch) => (formState: FormState) => { - dispatch(appInstallationsSetFormState(formState)) +export const handleOnCardClick = (history: History) => (app: AppSummaryModel) => { + history.push(`${Routes.CLIENT}/${app.id}`) } export const Client: React.FunctionComponent = () => { - const dispatch = useDispatch() const history = useHistory() const location = useLocation() const appSummaryState = useSelector(selectAppSummary) - const appDetail = useSelector(selectAppDetail) - const clientId = useSelector(selectClientId) - const installationsFormState = useSelector(selectInstallationFormState) - - const setStateViewBrowse = handleSetStateViewBrowse(dispatch) - const fetchAppDetail = handleFetchAppDetail(dispatch) - const installationsSetFormState = handleInstallationsSetFormState(dispatch) - const urlParams = new URLSearchParams(location.search) const page = Number(urlParams.get('page')) || 1 @@ -98,13 +44,6 @@ export const Client: React.FunctionComponent = () => { 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' - - React.useEffect(handleInstallationDone({ isDone, installationsSetFormState, fetchAppDetail, appDetail, clientId }), [ - isDone, - ]) return ( @@ -120,13 +59,7 @@ export const Client: React.FunctionComponent = () => { list={featuredApps} title="Featured Apps" loading={loading} - onCardClick={handleOnCardClick({ - setVisible, - setStateViewBrowse, - appDetail, - fetchAppDetail, - clientId, - })} + onCardClick={handleOnCardClick(history)} infoType="CLIENT_APPS_EMPTY" numOfColumn={3} /> @@ -136,7 +69,7 @@ export const Client: React.FunctionComponent = () => { 1 || hasParams ? '' : 'CLIENT_APPS_EMPTY'} pagination={{ totalCount, @@ -149,7 +82,6 @@ export const Client: React.FunctionComponent = () => { )} - ) } diff --git a/packages/marketplace/src/components/pages/developer-app-detail/developer-app-detail.tsx b/packages/marketplace/src/components/pages/developer-app-detail/developer-app-detail.tsx index 620ec55717..976e5593b5 100644 --- a/packages/marketplace/src/components/pages/developer-app-detail/developer-app-detail.tsx +++ b/packages/marketplace/src/components/pages/developer-app-detail/developer-app-detail.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import classNames from 'classnames' import { selectIntegrationTypes } from '@/selector/integration-types' import { DesktopIntegrationTypeModel } from '@/actions/app-integration-types' import { selectInstallationAppData } from '@/selector/installations' @@ -8,7 +9,7 @@ import { useSelector } from 'react-redux' import { History } from 'history' import { selectAppDetailState, selectAppDetailData, selectAppDetailLoading } from '@/selector/developer-app-detail' import { selectInstallAppLoading } from '@/selector/installations' -import { Loader } from '@reapit/elements' +import { Loader, FormSection, Button } from '@reapit/elements' import AppHeader from '@/components/ui/standalone-app-detail/app-header' import AppContent from './app-detail/app-content/app-content' import DeveloperAppDetailButtonGroup from '@/components/ui/developer-app-detail/developer-app-detail-button-group' @@ -72,6 +73,12 @@ export const closeDeleteAppModal = (setIsDeleteModalOpen: (isVisible: boolean) = } } +export const onBackToAppsButtonClick = (history: History) => { + return () => { + history.push(routes.DEVELOPER_MY_APPS) + } +} + const DeveloperAppDetail: React.FC = () => { const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false) const [isInstallationsModalOpen, setIsInstallationsModalOpen] = React.useState(false) @@ -101,6 +108,11 @@ const DeveloperAppDetail: React.FC = () => {
+ + +
{isDeleteModalOpen && ( (app: AppSummaryModel) => { - dispatch(developerAppShowModal(true)) - dispatch(setDeveloperAppModalStateViewDetail()) - dispatch(appDeleteSetInitFormState()) - if (app.id && (!appDetail.appDetailData || appDetail.appDetailData.data?.id !== app.id)) { - dispatch( - appDetailRequestData({ - id: app.id, - }), - ) - } -} - -export const handleAfterClose = (dispatch: Dispatch) => () => { - dispatch(removeAuthenticationCode()) - dispatch(developerAppShowModal(false)) +export const handleOnCardClick = (history: History) => (app: AppSummaryModel) => { + history.push(`${Routes.DEVELOPER_MY_APPS}/${app.id}`) } export const handleFetchDeveloperApps = (pageNumber: number, unfetched: boolean, dispatch: Dispatch) => { @@ -51,7 +31,7 @@ export const handleFetchDeveloperApps = (pageNumber: number, unfetched: boolean, } export const handleOnChange = (history: History) => (page: number) => - history.push(`${routes.DEVELOPER_MY_APPS}?page=${page}`) + history.push(`${Routes.DEVELOPER_MY_APPS}?page=${page}`) export type DeveloperProps = {} @@ -59,8 +39,6 @@ export const DeveloperHome: React.FunctionComponent = () => { const history = useHistory() const dispatch = useDispatch() const developerState = useSelector(selectDeveloper) - const isVisible = useSelector(selectDeveloperAppModalVisible) - const appDetail = useSelector(selectAppDetailState) let pageNumber = 1 @@ -90,7 +68,7 @@ export const DeveloperHome: React.FunctionComponent = () => { hasSubmitButton title="My Apps" loading={loading} - onCardClick={handleOnCardClick(appDetail, dispatch)} + onCardClick={handleOnCardClick(history)} infoType="DEVELOPER_APPS_EMPTY" pagination={{ totalCount, @@ -100,7 +78,6 @@ export const DeveloperHome: React.FunctionComponent = () => { }} /> - ) diff --git a/packages/marketplace/src/styles/pages/client-app-detail.scss b/packages/marketplace/src/styles/pages/client-app-detail.scss index 1d7010b706..abd9a787c2 100644 --- a/packages/marketplace/src/styles/pages/client-app-detail.scss +++ b/packages/marketplace/src/styles/pages/client-app-detail.scss @@ -44,10 +44,13 @@ @include for-desktop-only { display: flex; + } - .mainContainer { + .mainContainer { + position: relative; + @include for-desktop-only { background-color: $white; - padding: 0 3rem; + padding: 0 3rem 6rem; flex: 1; } } @@ -77,5 +80,13 @@ list-style-position: inside; } +.footerContainer { + position: absolute; + width: 100%; + left: 0; + bottom: 0; + padding-bottom: 0; +} + diff --git a/packages/marketplace/src/styles/pages/developer-app-detail.scss b/packages/marketplace/src/styles/pages/developer-app-detail.scss index 66edc14619..d56599e037 100644 --- a/packages/marketplace/src/styles/pages/developer-app-detail.scss +++ b/packages/marketplace/src/styles/pages/developer-app-detail.scss @@ -30,7 +30,8 @@ .mainContainer { background-color: $white; - padding: 0 3rem; + padding: 0 3rem 6rem; + position: relative; } .renderAsideStatusContainer { @@ -50,3 +51,11 @@ display: block; } } + +.footerContainer { + position: absolute; + width: 100%; + left: 0; + bottom: 0; + padding-bottom: 0; +}