-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
102 lines (90 loc) · 4.46 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { useAlert, DataQuery, Plugin } from '@dhis2/app-runtime'
import PropTypes from 'prop-types'
import React, { useState } from 'react'
import classes from './App.module.css'
const query = {
me: {
resource: 'me',
fields: ['authorities']
},
}
const CustomError = ({error}) => (
<>
<h2>App custom error component</h2>
<p>{error?.message}</p>
</>
)
CustomError.propTypes = {
error: PropTypes.object,
}
const App = () => {
const [includeId, setIncludeId] = useState(true)
const {show} = useAlert('normal app alert')
const [width, setWidth] = useState(50)
const [otherWidth, setOtherWidth] = useState(80)
const [error,setError] = useState(null)
return (
<div className={classes.container}>
<DataQuery query={query}>
{({ data }) => {
const onErrorOne = (error) => {
console.log('the app has received the plugin error')
console.error(error)
setError(error)
}
if (data) {
return (
<>
<h1>
Test plugins
</h1>
<button className={classes.appAlertButton} onClick={show}>show alert in app</button>
<div className={classes.pluginExampleContainer}>
<h2>Plugin 1</h2>
<h3>The app has custom handling for errors from this plugin and specifies that it should show alerts in the iframe</h3>
<p>{`Current width (plugin1): ${width}%`}</p>
<div style={{width: `${width}%`, border: '1px solid', height: '200px'}}>
{error ? (<CustomError error={error} />) :
(
<Plugin
pluginSource='http://localhost:3001/plugin.html'
onError={onErrorOne}
showAlertsInPlugin={true}
id={data.me.id}
name={`${data.me.firstName} ${data.me.surname}`}
username={data.me.username}
setWidth={setWidth}
width={width}
/>
)
}
</div>
</div>
<div className={classes.pluginExampleContainer}>
<h2>Plugin 2</h2>
<h3>The plugin uses the default error boundary, and has alerts show in main window (the default)</h3>
<div className={classes.passIdContainer}>
<label htmlFor="includeIdInput">Pass id to plugin 2</label>
<input checked={includeId} id="includeIdInput" type="checkbox" onChange={()=>{setIncludeId(prevInclude=>!prevInclude)}}></input>
</div>
<p>{`Current width (plugin2): ${otherWidth}%`}</p>
<div style={{width: `${otherWidth}%`, border: '5px dotted blue', height: '200px'}}>
<Plugin
pluginSource='http://localhost:3001/plugin.html'
id={includeId ? data.me.id : null}
name={`${data.me.firstName} ${data.me.surname}`}
username={data.me.username}
setWidth={setOtherWidth}
width={otherWidth}
/>
</div>
</div>
</>
)
}
return null
}}
</DataQuery>
</div>
)}
export default App