Skip to content

Commit 38e72e1

Browse files
eugeneoshepkoveugeneoshepkov
authored
Add onEmbeddableError example (#3)
1 parent 0ffb5a3 commit 38e72e1

File tree

2 files changed

+78
-51
lines changed

2 files changed

+78
-51
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
node_modules
2+
.DS_Store

‎src/react-test.html‎

Lines changed: 77 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,112 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html>
33
<head>
44
<title>Embedabble</title>
55
<meta charset="utf-8" />
6+
<script type="module" src="https://api.embeddable.com/js/v1/"></script>
67
<script
7-
type="module"
8-
src="https://api.embeddable.com/js/v1/"></script>
9-
<script
10-
src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
11-
<script
12-
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
8+
src="https://unpkg.com/react@18/umd/react.development.js"
9+
crossorigin
10+
></script>
11+
<script
12+
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
13+
crossorigin
14+
></script>
1315
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
1416
</head>
1517
<body>
16-
<div id='test-container'></div>
18+
<div id="test-container"></div>
1719

1820
<script type="text/babel">
19-
'use strict';
21+
"use strict";
2022

21-
function Embeddable({token, onComponentsLoad, variables, onVariablesChange}) {
23+
function Embeddable({
24+
token,
25+
onComponentsLoad,
26+
variables,
27+
onVariablesChange,
28+
onEmbeddableError,
29+
}) {
2230
const ref = React.useRef(null);
2331
function handleVariableChange(e) {
24-
if(onVariablesChange) {
32+
if (onVariablesChange) {
2533
onVariablesChange(
2634
Object.fromEntries(
27-
e.detail.map(c => [c.variableName, c.newValue])
28-
)
29-
)
35+
e.detail.map((c) => [c.variableName, c.newValue]),
36+
),
37+
);
3038
}
3139
}
40+
41+
function handleEmbeddableError(e) {
42+
onEmbeddableError(e.detail);
43+
}
44+
3245
React.useEffect(() => {
33-
ref.current.addEventListener('variablesChange', handleVariableChange);
34-
ref.current.addEventListener('componentsLoad', onComponentsLoad);
46+
ref.current.addEventListener("variablesChange", handleVariableChange);
47+
ref.current.addEventListener("componentsLoad", onComponentsLoad);
48+
ref.current.addEventListener(
49+
"embeddableError",
50+
handleEmbeddableError,
51+
handleEmbeddableError,
52+
);
3553
return () => {
36-
ref.current.removeEventListener('componentsLoad', onComponentsLoad);
37-
ref.current.removeEventListener('variablesChange', handleVariableChange);
54+
ref.current.removeEventListener("componentsLoad", onComponentsLoad);
55+
ref.current.removeEventListener(
56+
"variablesChange",
57+
handleVariableChange,
58+
);
59+
ref.current.removeEventListener(
60+
"embeddableError",
61+
handleEmbeddableError,
62+
);
3863
};
3964
}, []);
40-
return React.createElement('em-beddable', {
41-
ref,
42-
token,
43-
variables: JSON.stringify(variables)
65+
return React.createElement("em-beddable", {
66+
ref,
67+
token,
68+
variables: JSON.stringify(variables),
4469
});
4570
}
4671

4772
const TestComponent = () => {
48-
const [load, setLoad] = React.useState(false);
49-
const [isLoading, setIsLoading] = React.useState(false);
50-
const DEFAULT = { 'Text Value': 'Germany' };
51-
const [variables, setVariables] = React.useState(DEFAULT)
73+
const [load, setLoad] = React.useState(true);
74+
const [isLoading, setIsLoading] = React.useState(true);
75+
const DEFAULT = { "Text Value": "Germany" };
76+
const [variables, setVariables] = React.useState(DEFAULT);
5277

53-
if (load) {
54-
return (
78+
if (load) {
79+
return (
80+
<div>
81+
{isLoading && <div>Loading dashboard...</div>}
5582
<div>
56-
{isLoading && <div>Loading dashboard...</div>}
57-
<div>
58-
<div>{JSON.stringify(variables)}</div>
59-
<button onClick={() => setVariables(DEFAULT)}>reset</button>
60-
</div>
61-
<div>
62-
<Embeddable
63-
variables={variables}
64-
onVariablesChange={v => setVariables(v)}
65-
onComponentsLoad={() => setIsLoading(false)}
66-
token="eyJhbGciOiJIUzI1NiJ9.eyJzZWN1cml0eVRva2VuSWQiOiIwODQ5MzA3ZC1kNzgxLTQ2ZTItYWVhYy0wMzhlYzBiMWQ2ZTEiLCJpYXQiOjE3MDk4MTU5NDgsImV4cCI6MTcxMDQyMDc0OH0.NojqfJ8sHGLyNAvfPvGtcxAMAPz2FsfA84jriQnJmXc"
67-
/>
68-
</div>
83+
<Embeddable
84+
variables={variables}
85+
onVariablesChange={(v) => setVariables(v)}
86+
onComponentsLoad={() => setIsLoading(false)}
87+
onEmbeddableError={(e) => {
88+
console.log(`${e.errorMessage} : ${e.errorDetail}`);
89+
}}
90+
token="eyJhbGciOiJIUzI1NiJ9.eyJzZWN1cml0eVRva2VuSWQiOiI1YjBmM2JjMS02ZjUyLTQzZmMtODJkZC1hYWNjZTg2NjRiZTgiLCJpYXQiOjE3MzAzODMyODAsImV4cCI6MTgyMDM4MzI4MH0.NMoOjBNpK2kKxooKNIjiDmWxu1cSN8tywOyuZPw0AkQ"
91+
/>
6992
</div>
70-
);
71-
}
93+
</div>
94+
);
95+
}
7296

73-
return (
74-
<button onClick={() => {
97+
return (
98+
<button
99+
onClick={() => {
75100
setIsLoading(true);
76101
setLoad(true);
77-
}}>
78-
Load my dashboard
79-
</button>
80-
);
81-
}
102+
}}
103+
>
104+
Load my dashboard
105+
</button>
106+
);
107+
};
82108

83-
const domContainer = document.querySelector('#test-container');
109+
const domContainer = document.querySelector("#test-container");
84110
const root = ReactDOM.createRoot(domContainer);
85111
root.render(React.createElement(TestComponent));
86112
</script>

0 commit comments

Comments
 (0)