diff --git a/package.json b/package.json index c9963fb52e..8f3164d7df 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,6 @@ "error-polyfill": "^0.1.2", "graphql": "^14.5.8", "hardtack": "^4.1.2", - "offline-plugin": "^5.0.7", "pell": "^1.0.6", "react": "^16.12.0", "react-datepicker": "^2.9.6", diff --git a/packages/aml-checklist/src/core/__tests__/__snapshots__/app.tsx.snap b/packages/aml-checklist/src/core/__tests__/__snapshots__/app.tsx.snap index 951cd42ff9..f1d00d13e8 100644 --- a/packages/aml-checklist/src/core/__tests__/__snapshots__/app.tsx.snap +++ b/packages/aml-checklist/src/core/__tests__/__snapshots__/app.tsx.snap @@ -15,11 +15,5 @@ exports[`App should match a snapshot 1`] = ` - `; diff --git a/packages/aml-checklist/src/core/app.tsx b/packages/aml-checklist/src/core/app.tsx index 641cbc8626..ebbeced20e 100644 --- a/packages/aml-checklist/src/core/app.tsx +++ b/packages/aml-checklist/src/core/app.tsx @@ -3,25 +3,13 @@ import Router from './router' import { Provider } from 'react-redux' import store from './store' import * as React from 'react' -import { ToastMessage, useOfflinePLugin } from '@reapit/elements' const App = () => { - const { isNewVersionAvailable } = useOfflinePLugin() - const bindedWindowLocation = React.useMemo(() => window.location.reload.bind(window.location), []) - return ( - ) } diff --git a/packages/cognito-auth/package.json b/packages/cognito-auth/package.json index 770b2a8e62..d0a57933b0 100644 --- a/packages/cognito-auth/package.json +++ b/packages/cognito-auth/package.json @@ -1,6 +1,6 @@ { "name": "@reapit/cognito-auth", - "version": "2.1.5", + "version": "2.1.6", "description": "Simple wrapper around AWS Cognito for basic authentication flow", "keywords": [], "homepage": "https://github.com/reapit/foundations#readme", diff --git a/packages/cognito-auth/src/tests/badges/badge-lines.svg b/packages/cognito-auth/src/tests/badges/badge-lines.svg index e9f8d67338..561a5df7e2 100644 --- a/packages/cognito-auth/src/tests/badges/badge-lines.svg +++ b/packages/cognito-auth/src/tests/badges/badge-lines.svg @@ -1 +1 @@ -Coverage:linesCoverage:lines95.63%95.63% \ No newline at end of file +Coverage:linesCoverage:lines95.6%95.6% \ No newline at end of file diff --git a/packages/cognito-auth/src/tests/badges/badge-statements.svg b/packages/cognito-auth/src/tests/badges/badge-statements.svg index ee9caa3ac5..29fbaf0d33 100644 --- a/packages/cognito-auth/src/tests/badges/badge-statements.svg +++ b/packages/cognito-auth/src/tests/badges/badge-statements.svg @@ -1 +1 @@ -Coverage:statementsCoverage:statements95.65%95.65% \ No newline at end of file +Coverage:statementsCoverage:statements95.63%95.63% \ No newline at end of file diff --git a/packages/elements/.storybook/preview-head.html b/packages/elements/.storybook/preview-head.html index 53406b323f..b1ead87d72 100644 --- a/packages/elements/.storybook/preview-head.html +++ b/packages/elements/.storybook/preview-head.html @@ -1,2 +1 @@ - - + diff --git a/packages/elements/src/components/DatePicker/index.tsx b/packages/elements/src/components/DatePicker/index.tsx index bc4b526103..4d4b2abb84 100644 --- a/packages/elements/src/components/DatePicker/index.tsx +++ b/packages/elements/src/components/DatePicker/index.tsx @@ -9,15 +9,7 @@ import { fieldValidateRequire } from '../../utils/validators' const { useState, useEffect } = React -export const CustomInput = ({ - onChange, - onBlur, - value, - id, - onClick, - className, - ...rest -}: { +export type CustomInputType = { onChange?: any onBlur?: any onFocus?: any @@ -26,125 +18,132 @@ export const CustomInput = ({ id?: string onClick?: any className: string -}) => { - const [inputValue, setInputValue] = useState(value) +} - // sync with the real value - useEffect(() => { - setInputValue(value) - }, [value]) +export const CustomInput = React.forwardRef( + ({ onChange, onBlur, value, id, onClick, className, ...rest }: CustomInputType, ref) => { + const [inputValue, setInputValue] = useState(value) - const [isBackspaceKeyPressed, setIsBackspaceKeyPressed] = useState(false) + // sync with the real value + useEffect(() => { + setInputValue(value) + }, [value]) - // COOKED https://stackoverflow.com/questions/12578507/implement-an-input-with-a-mask - const _onChange = e => { - const inputElement = e.target - const mask = '__/__/____' + const [isBackspaceKeyPressed, setIsBackspaceKeyPressed] = useState(false) - if (!inputElement) { - return - } + // COOKED https://stackoverflow.com/questions/12578507/implement-an-input-with-a-mask + const _onChange = e => { + const inputElement = e.target + const mask = '__/__/____' - const castedInputElement = inputElement as HTMLInputElement + if (!inputElement) { + return + } - let oldStart = castedInputElement.selectionStart - const textFieldValue = e.target.value + const castedInputElement = inputElement as HTMLInputElement - const splitTextFieldValue = textFieldValue.split('').filter(char => char !== '/') + let oldStart = castedInputElement.selectionStart + const textFieldValue = e.target.value - const transformedTextFieldValue = mask - .split('') - .map(maskChar => { - if (maskChar !== '_') { - return maskChar - } - if (textFieldValue.length === 0) return maskChar + const splitTextFieldValue = textFieldValue.split('').filter(char => char !== '/') - const extractedSplitTextFieldValue = splitTextFieldValue.shift() - if (!extractedSplitTextFieldValue) { - return maskChar - } - return extractedSplitTextFieldValue - }) - .join('') + const transformedTextFieldValue = mask + .split('') + .map(maskChar => { + if (maskChar !== '_') { + return maskChar + } + if (textFieldValue.length === 0) return maskChar - setInputValue(transformedTextFieldValue) + const extractedSplitTextFieldValue = splitTextFieldValue.shift() + if (!extractedSplitTextFieldValue) { + return maskChar + } + return extractedSplitTextFieldValue + }) + .join('') - const parsedTransformedTextFieldValue = dayjs(transformedTextFieldValue, 'DD/MM/YYYY') + setInputValue(transformedTextFieldValue) - if (parsedTransformedTextFieldValue.isValid()) { - onChange({ - target: { - value: parsedTransformedTextFieldValue, - }, - }) - } + const parsedTransformedTextFieldValue = dayjs(transformedTextFieldValue, 'DD/MM/YYYY') - // set state ^ affect asynchronous. event loop thing... - setTimeout(() => { - if (oldStart) { - /** - * handle - * "11/" -> press 1 -> "11/1" - */ - if (!isBackspaceKeyPressed && transformedTextFieldValue[oldStart - 1] === '/') { - castedInputElement.selectionStart = oldStart + 1 - castedInputElement.selectionEnd = oldStart + 1 - return - } + if (parsedTransformedTextFieldValue.isValid()) { + onChange({ + target: { + value: parsedTransformedTextFieldValue, + }, + }) + } - /** - * Reset the flag if it happened - */ - if (isBackspaceKeyPressed) { - setIsBackspaceKeyPressed(false) + // set state ^ affect asynchronous. event loop thing... + setTimeout(() => { + if (oldStart) { + /** + * handle + * "11/" -> press 1 -> "11/1" + */ + if (!isBackspaceKeyPressed && transformedTextFieldValue[oldStart - 1] === '/') { + castedInputElement.selectionStart = oldStart + 1 + castedInputElement.selectionEnd = oldStart + 1 + return + } + + /** + * Reset the flag if it happened + */ + if (isBackspaceKeyPressed) { + setIsBackspaceKeyPressed(false) + } } - } - castedInputElement.selectionStart = oldStart - castedInputElement.selectionEnd = oldStart - }, 1) - } + castedInputElement.selectionStart = oldStart + castedInputElement.selectionEnd = oldStart + }, 1) + } - const onKeyUp = e => { - const inputChar = String.fromCharCode(e.keyCode) + const onKeyUp = e => { + const inputChar = String.fromCharCode(e.keyCode) - // Allow: cmd + anything, ctrl + anything (copy, paste, select all... etc) - if (e.metaKey || e.ctrlKey) { - return - } + // Allow: cmd + anything, ctrl + anything (copy, paste, select all... etc) + if (e.metaKey || e.ctrlKey) { + return + } - // prevent user from input number - if (![8, 37, 38, 39, 40].includes(e.keyCode) && !inputChar.match(/[0-9]/)) { - e.preventDefault() - } + // prevent user from input number + if (![8, 37, 38, 39, 40].includes(e.keyCode) && !inputChar.match(/[0-9]/)) { + e.preventDefault() + } - // flag to checked if backspace key was pressed - if (e.keyCode === 8) { - setIsBackspaceKeyPressed(true) + // flag to checked if backspace key was pressed + if (e.keyCode === 8) { + setIsBackspaceKeyPressed(true) + } } - } - const _onBlur = e => { - setInputValue(value) - onBlur(e) - } + const _onBlur = e => { + setInputValue(value) + onBlur(e) + } - return ( - - ) -} + return ( + + ) + }, +) + +CustomInput.displayName = 'CustomInput' export interface DatePickerProps { name: string diff --git a/packages/elements/src/components/SearchComponent/__tests__/__snapshots__/index.tsx.snap b/packages/elements/src/components/SearchComponent/__tests__/__snapshots__/index.tsx.snap deleted file mode 100644 index 3a2ebeb2f6..0000000000 --- a/packages/elements/src/components/SearchComponent/__tests__/__snapshots__/index.tsx.snap +++ /dev/null @@ -1,7 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SearchComponent should match snapshot 1`] = ` -
-`; diff --git a/packages/elements/src/components/SearchComponent/__tests__/index.tsx b/packages/elements/src/components/SearchComponent/__tests__/index.tsx deleted file mode 100644 index 41e8623681..0000000000 --- a/packages/elements/src/components/SearchComponent/__tests__/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' -import { shallow } from 'enzyme' -import { SearchComponent, handleUseEffect } from '../index' - -describe('SearchComponent', () => { - it('should match snapshot', () => { - const wrapper = shallow() - expect(wrapper).toMatchSnapshot() - }) - - it('handleUseEffect', () => { - const mockTheme = {} - // @ts-ignore - window.initReaptSearchWidget = jest.fn() - const fn = handleUseEffect({ theme: mockTheme }) - fn() - // @ts-ignore - expect(window.initReaptSearchWidget).toBeCalledWith({ API_KEY: 'abc', theme: mockTheme }) - }) -}) diff --git a/packages/elements/src/components/SearchComponent/index.stories.tsx b/packages/elements/src/components/SearchComponent/index.stories.tsx deleted file mode 100644 index b405d588ee..0000000000 --- a/packages/elements/src/components/SearchComponent/index.stories.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import SearchComponent from '.' - -storiesOf('SearchComponent', module) - .add('Default Theme', () => { - return - }) - .add('Custom Theme', () => { - const theme = { - base: { - font: { - family: 'arial', - sizes: { - headings: { - h1: '7rem', - h2: '6rem', - h3: '5rem', - h4: '4rem', - h5: '3rem', - h6: '2rem', - }, - }, - }, - }, - button: { - background: 'green', - }, - colors: { - base: 'white', - primary: 'yellow', - inputBackgroundColor: 'red', - widgetHeading: 'orange', - }, - } - return - }) diff --git a/packages/elements/src/components/SearchComponent/index.tsx b/packages/elements/src/components/SearchComponent/index.tsx deleted file mode 100644 index 3d5d00731d..0000000000 --- a/packages/elements/src/components/SearchComponent/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' - -export type SearchComponentProps = { - theme?: any -} - -export const handleUseEffect = ({ theme }) => () => { - // @ts-ignore - window.initReaptSearchWidget && window.initReaptSearchWidget({ API_KEY: 'abc', theme }) -} - -export const SearchComponent: React.FC = ({ theme = { colors: {} } }) => { - React.useEffect(handleUseEffect({ theme }), []) - return
-} - -export default SearchComponent diff --git a/packages/elements/src/components/Table/__tests__/__snapshots__/index.tsx.snap b/packages/elements/src/components/Table/__tests__/__snapshots__/index.tsx.snap index 6a650a67ce..bbccc48851 100644 --- a/packages/elements/src/components/Table/__tests__/__snapshots__/index.tsx.snap +++ b/packages/elements/src/components/Table/__tests__/__snapshots__/index.tsx.snap @@ -6825,11 +6825,15 @@ exports[`Table should match a snapshot when LOADING true 1`] = ` -
- -
+ + +
+ +
+ + `; diff --git a/packages/elements/src/components/Table/index.tsx b/packages/elements/src/components/Table/index.tsx index d8b245f767..0b90d7b542 100644 --- a/packages/elements/src/components/Table/index.tsx +++ b/packages/elements/src/components/Table/index.tsx @@ -100,9 +100,13 @@ export const Table: React.FC = ({ {loading ? ( -
- -
+ + +
+ +
+ + ) : ( rows.map( row => diff --git a/packages/elements/src/components/ToastMessage/__tests__/index.tsx b/packages/elements/src/components/ToastMessage/__tests__/index.tsx index cb13366a63..62393bb78e 100644 --- a/packages/elements/src/components/ToastMessage/__tests__/index.tsx +++ b/packages/elements/src/components/ToastMessage/__tests__/index.tsx @@ -32,13 +32,6 @@ describe('ToastMessage', () => { expect(defaultProps.onCloseToast).toHaveBeenCalledTimes(1) }) - it('should dismiss toast after 3 seconds', () => { - jest.useFakeTimers() - shallow() - jest.runAllTimers() - expect(defaultProps.onCloseToast).toHaveBeenCalledTimes(1) - }) - afterEach(() => { jest.resetAllMocks() }) diff --git a/packages/elements/src/components/ToastMessage/index.tsx b/packages/elements/src/components/ToastMessage/index.tsx index 30077b96d1..45d968f5ca 100644 --- a/packages/elements/src/components/ToastMessage/index.tsx +++ b/packages/elements/src/components/ToastMessage/index.tsx @@ -20,9 +20,14 @@ export const ToastMessage: React.FC = ({ onCloseToast, variant, }) => { - if (visible && !preventClose) { - setTimeout(onCloseToast, displayDuration) - } + React.useEffect(() => { + if (visible && !preventClose) { + const timeout = setTimeout(onCloseToast, displayDuration) + return () => { + clearTimeout(timeout) + } + } + }, [visible, preventClose]) return (
diff --git a/packages/elements/src/hooks/use-offline-plugin/__tests__/use-offline-plugin.tsx b/packages/elements/src/hooks/use-offline-plugin/__tests__/use-offline-plugin.tsx deleted file mode 100644 index 05e86e3baf..0000000000 --- a/packages/elements/src/hooks/use-offline-plugin/__tests__/use-offline-plugin.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { renderHook, act } from '@testing-library/react-hooks' -import { useOfflinePLugin } from '../use-offline-plugin' -import * as runtime from 'offline-plugin/runtime' - -jest.mock('offline-plugin/runtime') - -describe('useOfflinePLugin', () => { - it('should call applyUpdate on event onUpdateReady of the service worker', () => { - renderHook(() => useOfflinePLugin()) - const mockedInstallFn = runtime.install as jest.Mock - - act(() => { - mockedInstallFn.mock.calls[0][0].onUpdateReady() - }) - - expect(runtime.applyUpdate).toHaveBeenCalled() - }) - - /* eslint-disable-next-line max-len */ - it('should set isNewVersionAvailable to true when offline-plugin/runtime finish updating service worker with new contents', () => { - const { result } = renderHook(() => useOfflinePLugin()) - const mockedInstallFn = runtime.install as jest.Mock - - act(() => { - mockedInstallFn.mock.calls[0][0].onUpdated() - }) - - expect(result.current.isNewVersionAvailable).toBe(true) - }) -}) diff --git a/packages/elements/src/hooks/use-offline-plugin/index.ts b/packages/elements/src/hooks/use-offline-plugin/index.ts deleted file mode 100644 index 914f4fe08f..0000000000 --- a/packages/elements/src/hooks/use-offline-plugin/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './use-offline-plugin' diff --git a/packages/elements/src/hooks/use-offline-plugin/use-offline-plugin.tsx b/packages/elements/src/hooks/use-offline-plugin/use-offline-plugin.tsx deleted file mode 100644 index 725f93842f..0000000000 --- a/packages/elements/src/hooks/use-offline-plugin/use-offline-plugin.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import * as runtime from 'offline-plugin/runtime' - -// this part will be translated by building -runtime.install({ - onUpdateReady: () => { - // Tells to new SW to take control immediately - runtime.applyUpdate() - }, - onUpdated: () => { - // Have to use window to reference since hook can't be referenced in build time - ;(window as any).setIsNewVersionAvailable(true) - }, -}) - -import { useState, useEffect } from 'react' - -type UseOfflinePLugin = () => { - isNewVersionAvailable: boolean -} - -export const useOfflinePLugin: UseOfflinePLugin = () => { - const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false) - useEffect(() => { - ;(window as any).setIsNewVersionAvailable = setIsNewVersionAvailable - }) - - useEffect(() => {}) - - return { - isNewVersionAvailable, - } -} diff --git a/packages/elements/src/index.tsx b/packages/elements/src/index.tsx index 918e5d8bfa..365918325e 100644 --- a/packages/elements/src/index.tsx +++ b/packages/elements/src/index.tsx @@ -1,7 +1,6 @@ import * as v2 from './v2' // Hooks export * from './hooks/UsePortal' -export * from './hooks/use-offline-plugin' // Dependencies export * from 'formik' diff --git a/packages/geo-diary-v2/src/core/app.tsx b/packages/geo-diary-v2/src/core/app.tsx index 69626211ff..9bd4e46b20 100644 --- a/packages/geo-diary-v2/src/core/app.tsx +++ b/packages/geo-diary-v2/src/core/app.tsx @@ -1,6 +1,3 @@ -import * as OfflinePluginRuntime from 'offline-plugin/runtime' -OfflinePluginRuntime.install() - import * as React from 'react' import { ApolloProvider } from '@apollo/react-hooks' import { useAuth } from '@/hooks/use-auth' diff --git a/packages/geo-diary/src/core/__tests__/__snapshots__/app.tsx.snap b/packages/geo-diary/src/core/__tests__/__snapshots__/app.tsx.snap index 951cd42ff9..f1d00d13e8 100644 --- a/packages/geo-diary/src/core/__tests__/__snapshots__/app.tsx.snap +++ b/packages/geo-diary/src/core/__tests__/__snapshots__/app.tsx.snap @@ -15,11 +15,5 @@ exports[`App should match a snapshot 1`] = ` - `; diff --git a/packages/geo-diary/src/core/app.tsx b/packages/geo-diary/src/core/app.tsx index 9482c68947..3e4804c5c6 100644 --- a/packages/geo-diary/src/core/app.tsx +++ b/packages/geo-diary/src/core/app.tsx @@ -2,27 +2,15 @@ import '../styles/index.scss' import React from 'react' import { Provider } from 'react-redux' import Router from './router' -import { PortalProvider, useOfflinePLugin } from '@reapit/elements' +import { PortalProvider } from '@reapit/elements' import store from './store' -import { ToastMessage as ReapitElementsToastMessage } from '@reapit/elements' const App = () => { - const bindedWindowLocation = React.useMemo(() => window.location.reload.bind(window.location), []) - const { isNewVersionAvailable } = useOfflinePLugin() - return ( - ) } diff --git a/packages/lifetime-legal/src/core/__tests__/__snapshots__/app.tsx.snap b/packages/lifetime-legal/src/core/__tests__/__snapshots__/app.tsx.snap index a7a7fd202f..f1d00d13e8 100644 --- a/packages/lifetime-legal/src/core/__tests__/__snapshots__/app.tsx.snap +++ b/packages/lifetime-legal/src/core/__tests__/__snapshots__/app.tsx.snap @@ -14,12 +14,6 @@ exports[`App should match a snapshot 1`] = ` > - `; diff --git a/packages/lifetime-legal/src/core/app.tsx b/packages/lifetime-legal/src/core/app.tsx index 5f16291ad2..ebbeced20e 100644 --- a/packages/lifetime-legal/src/core/app.tsx +++ b/packages/lifetime-legal/src/core/app.tsx @@ -1,25 +1,14 @@ -import { PortalProvider, useOfflinePLugin, ToastMessage } from '@reapit/elements' +import { PortalProvider } from '@reapit/elements' import Router from './router' import { Provider } from 'react-redux' import store from './store' import * as React from 'react' const App = () => { - const bindedWindowLocation = React.useMemo(() => window.location.reload.bind(window.location), []) - const { isNewVersionAvailable } = useOfflinePLugin() - return ( - ) diff --git a/packages/marketplace/src/components/pages/admin-apps/__tests__/__snapshots__/admin-apps.test.tsx.snap b/packages/marketplace/src/components/pages/admin-apps/__tests__/__snapshots__/admin-apps.test.tsx.snap index bcb4c68db6..50ab1a808d 100644 --- a/packages/marketplace/src/components/pages/admin-apps/__tests__/__snapshots__/admin-apps.test.tsx.snap +++ b/packages/marketplace/src/components/pages/admin-apps/__tests__/__snapshots__/admin-apps.test.tsx.snap @@ -396,7 +396,7 @@ exports[`admin-apps AdminApprovals should match a snapshot 1`] = ` allowSameDay={false} className="input is-primary" customInput={ - } @@ -468,7 +468,7 @@ exports[`admin-apps AdminApprovals should match a snapshot 1`] = `
- - - +
@@ -575,7 +575,7 @@ exports[`admin-apps AdminApprovals should match a snapshot 1`] = ` allowSameDay={false} className="input is-primary" customInput={ - } @@ -648,7 +648,7 @@ exports[`admin-apps AdminApprovals should match a snapshot 1`] = `
- - - +
diff --git a/packages/marketplace/src/components/pages/settings/__tests__/__snapshots__/client-setting.tsx.snap b/packages/marketplace/src/components/pages/settings/__tests__/__snapshots__/client-setting.tsx.snap index 9e426e6ed9..35f262c294 100644 --- a/packages/marketplace/src/components/pages/settings/__tests__/__snapshots__/client-setting.tsx.snap +++ b/packages/marketplace/src/components/pages/settings/__tests__/__snapshots__/client-setting.tsx.snap @@ -1,58 +1,143 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ClientSettingsPage should match snapshot 1`] = ` - - - + - Settings - - - - -
- - Customer ID - - - This is your Customer ID which you will need for use with Private Apps and Web Components. - - - - - - - -
- - - - - - +
- Logout - + +
+ +
+ +

+ Settings +

+ +
+ +
+ Customer ID: + + testClientId + +
+ + +
+ This is your Customer ID which you will need for use with Private Apps and Web Components. +
+ +
+ +
+ +
+ + + +
+ +
+ +
+ +
+ +
- - - + + + `; diff --git a/packages/marketplace/src/components/pages/settings/__tests__/client-setting.tsx b/packages/marketplace/src/components/pages/settings/__tests__/client-setting.tsx index 0db43dc832..9788b1bf4f 100644 --- a/packages/marketplace/src/components/pages/settings/__tests__/client-setting.tsx +++ b/packages/marketplace/src/components/pages/settings/__tests__/client-setting.tsx @@ -1,66 +1,33 @@ import React from 'react' -import { shallow } from 'enzyme' -import { ClientSettingsPageProps, ClientSettingsPage, mapStateToProps, mapDispatchToProps } from '../client-setting' -import { ReduxState } from '@/types/core' +import { mount } from 'enzyme' +import { ClientSettingsPage, handleLogout } from '../client-setting' +import { authLogout } from '@/actions/auth' +import { Provider } from 'react-redux' +import { MemoryRouter } from 'react-router' +import Routes from '@/constants/routes' +import configureStore from 'redux-mock-store' +import appState from '@/reducers/__stubs__/app-state' describe('ClientSettingsPage', () => { it('should match snapshot', () => { - const mockProps: ClientSettingsPageProps = { - customerId: 'DXX', - logout: jest.fn(), - } - const wrapper = shallow() - expect(wrapper).toMatchSnapshot() - }) - - it('should respond to logout request', () => { - const mockProps: ClientSettingsPageProps = { - customerId: 'DXX', - logout: jest.fn(), - } - const wrapper = shallow() - - wrapper.find('[dataTest="logout-btn"]').simulate('click') + const mockStore = configureStore() + const store = mockStore(appState) - expect(mockProps.logout).toHaveBeenCalledTimes(1) + expect( + mount( + + + + + , + ), + ).toMatchSnapshot() }) - describe('mapStateToProps', () => { - it('should run correctly', () => { - const mockState = { - auth: { - loginSession: { - loginIdentity: { - clientId: 'DXX', - }, - }, - }, - } as ReduxState - const output = { - customerId: 'DXX', - } - const result = mapStateToProps(mockState) - expect(result).toEqual(output) - }) - - it('should return empty', () => { - const mockState = { - settings: {}, - auth: {}, - } as ReduxState - const output = { - customerId: '', - } - const result = mapStateToProps(mockState) - expect(result).toEqual(output) - }) - }) - describe('mapDispatchToProps', () => { - it('should call dispatch when logout', () => { - const mockDispatch = jest.fn() - const { logout } = mapDispatchToProps(mockDispatch) - logout() - expect(mockDispatch).toBeCalled() - }) + it('should handleLogout run correctly', () => { + const dispatch = jest.fn() + const fn = handleLogout(dispatch) + fn() + expect(dispatch).toBeCalledWith(authLogout()) }) }) diff --git a/packages/marketplace/src/components/pages/settings/client-setting.tsx b/packages/marketplace/src/components/pages/settings/client-setting.tsx index 536bba04b2..879313d7d3 100644 --- a/packages/marketplace/src/components/pages/settings/client-setting.tsx +++ b/packages/marketplace/src/components/pages/settings/client-setting.tsx @@ -4,54 +4,39 @@ import { Content, H3, FlexContainerBasic, - GridItem, - Grid, - Form, - FormHeading, - FormSubHeading, - Input, FormSection, Button, LevelRight, - withFormik, + FormHeading, + FormSubHeading, } from '@reapit/elements' -import { compose, Dispatch } from 'redux' -import { connect } from 'react-redux' -import { ReduxState } from '@/types/core' +import { Dispatch } from 'redux' +import { useSelector, useDispatch } from 'react-redux' import { authLogout } from '@/actions/auth' +import { selectClientId } from '@/selector/auth' -export type ClientSettingsPageProps = StateProps & DispatchProps +export const handleLogout = (dispatch: Dispatch) => () => { + dispatch(authLogout()) +} -export const ClientSettingsPage: React.FC = ({ logout }) => { +export const ClientSettingsPage: React.FC = () => { + const dispatch = useDispatch() + const customerId = useSelector(selectClientId) + + const logout = handleLogout(dispatch) return (

Settings

- - - -
- Customer ID - - This is your Customer ID which you will need for use with Private Apps and Web Components. - - - - - - -
- - - - +
+ + Customer ID: {customerId} + + + This is your Customer ID which you will need for use with Private Apps and Web Components. + +