@duypnguyen Actually I got the error " Cannot read property 'state' of andefined" at the app.js at this line "const profiles = this.state.profiles".
Here is my ActionForm.js
/*
* <license header>
*/
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import ErrorBoundary from 'react-error-boundary'
import {
Flex,
Heading,
Form,
Picker,
TextArea,
Button,
ActionButton,
StatusLight,
ProgressCircle,
Item,
Text,
View
} from '@adobe/react-spectrum'
import Function from '@spectrum-icons/workflow/Function'
import actions from '../config.json'
import actionWebInvoke from '../utils'
const ActionsForm = (props) => {
const [state, setState] = useState({
actionSelected: null,
actionResponse: null,
actionResponseError: null,
actionHeaders: null,
actionHeadersValid: null,
actionParams: null,
actionParamsValid: null,
actionInvokeInProgress: false,
actionResult: '',
profiles: null
})
return (
<View width="size-6000">
<Heading level={1}>Run your application backend actions</Heading>
{Object.keys(actions).length > 0 && (
<Form necessityIndicator="label">
<Picker
label="Actions"
isRequired={true}
placeholder="select an action"
aria-label="select an action"
items={Object.keys(actions).map((k) => ({ name: k }))}
itemKey="name"
onSelectionChange={(name) =>
setState({
...state,
actionSelected: name,
actionResponseError: null,
actionResponse: null
})
}
>
{(item) => <Item key={item.name}>{item.name}</Item>}
</Picker>
<TextArea
label="headers"
placeholder='{ "key": "value" }'
validationState={state.actionHeadersValid}
onChange={(input) =>
setJSONInput(input, 'actionHeaders', 'actionHeadersValid')
}
/>
<TextArea
label="params"
placeholder='{ "key": "value" }'
validationState={state.actionParamsValid}
onChange={(input) =>
setJSONInput(input, 'actionParams', 'actionParamsValid')
}
/>
<Flex>
<ProgressCircle
aria-label="loading"
isIndeterminate
isHidden={!state.actionInvokeInProgress}
marginStart="size-100"
/>
</Flex>
</Form>
)}
{state.actionResponseError && (
<View padding={`size-100`} marginTop={`size-100`} marginBottom={`size-100`} borderRadius={`small `}>
<StatusLight variant="negative">Failure! See the complete error in your browser console.</StatusLight>
</View>
)}
{!state.actionResponseError && state.actionResponse && (
<View padding={`size-100`} marginTop={`size-100`} marginBottom={`size-100`} borderRadius={`small `}>
<StatusLight variant="positive">Success! See the complete response in your browser console.</StatusLight>
</View>
)}
{Object.keys(actions).length === 0 && <Text>You have no actions !</Text>}
<TextArea
label="results"
isReadOnly={true}
width="size-6000"
height="size-6000"
maxWidth="100%"
value={state.actionResult}
validationState={( !state.actionResponseError ) ? 'valid' : 'invalid'}
/>
</View>
)
// Methods
async function componentWillMount () {
this.setState({ actionInvokeInProgress: true })
const headers = {}
const params = {}
// set the authorization header and org from the ims props object
if (this.props.ims.token && !headers.authorization) {
headers.authorization = 'Bearer ' + this.props.ims.token
}
if (this.props.ims.org && !headers['x-gw-ims-org-id']) {
headers['x-gw-ims-org-id'] = this.props.ims.org
}
try {
const actionResponse = await actionWebInvoke('get-profiles', headers, params)
this.setState({ profiles: actionResponse.body.content, actionResponseError: null, actionInvokeInProgress: false })
console.log(`action response:`, actionResponse)
} catch (e) {
console.error(e)
this.setState({ profiles: null, actionResponseError: e.message, actionInvokeInProgress: false })
}
}
}
ActionsForm.propTypes = {
runtime: PropTypes.any,
ims: PropTypes.any
}
export default ActionsForm
And here is my App.js
/*
* <license header>
*/
import React from 'react'
import { Provider, defaultTheme, Grid, View, Flex } from '@adobe/react-spectrum'
import ErrorBoundary from 'react-error-boundary'
import { HashRouter as Router, Switch, Route } from 'react-router-dom'
import SideBar from './SideBar'
import ActionsForm from './ActionsForm'
import { Home } from './Home'
import { About } from './About'
function App (props) {
console.log('runtime object:', props.runtime)
console.log('ims object:', props.ims)
// use exc runtime event handlers
// respond to configuration change events (e.g. user switches org)
props.runtime.on('configuration', ({ imsOrg, imsToken, locale }) => {
console.log('configuration change', { imsOrg, imsToken, locale })
})
// respond to history change events
props.runtime.on('history', ({ type, path }) => {
console.log('history change', { type, path })
})
const profiles = this.state.profiles
console.log(`profiles object:`, profiles)
return (
<ErrorBoundary onError={onError} FallbackComponent={fallbackComponent}>
<Router>
<Provider UNSAFE_className='provider' theme={ defaultTheme }>
<Flex UNSAFE_className='main'>
<Heading UNSAFE_className='main-title'>Welcome to customers-dashboard!</Heading>
<Flex UNSAFE_className='profiles'>
<h3 className='main-title'>Customer Profiles</h3>
<ProgressCircle
UNSAFE_className='actions-invoke-progress'
aria-label='loading'
isIndeterminate
isHidden={ !this.state.actionInvokeInProgress }/>
{ !!profiles &&
<Grid>
{profiles.map((profile, i) => {
return <Flex UNSAFE_className='profile'>Name: { profile['firstName'] } { profile['lastName'] } - Email: { profile['email'] } - Date of birth: { profile['birthDate'] }</Flex>
})}
</Grid>
}
{ !profiles &&
<Text>No profiles!</Text>
}
</Flex>
</Flex>
</Provider>
</Router>
</ErrorBoundary>
)
// Methods
// error handler on UI rendering failure
function onError (e, componentStack) { }
// component to show if UI fails rendering
function fallbackComponent ({ componentStack, error }) {
return (
<React.Fragment>
<h1 style={{ textAlign: 'center', marginTop: '20px' }}>
Something went wrong :(
</h1>
<pre>{componentStack + '\n' + error.message}</pre>
</React.Fragment>
)
}
}
export default App
