Skip to content

Commit d5c4fd3

Browse files
kentwalterskentwalters
committed
Merge branch 'bb/fix-dep'
2 parents ffba1c8 + d673e6b commit d5c4fd3

File tree

7 files changed

+1905
-2013
lines changed

7 files changed

+1905
-2013
lines changed

‎package.json‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,8 @@
2525
]
2626
},
2727
"dependencies": {
28-
"@testing-library/jest-dom": "^5.11.4",
29-
"@testing-library/react": "^11.1.0",
30-
"@testing-library/user-event": "^12.1.10",
3128
"react": "^17.0.2",
32-
"react-dom": "^17.0.2",
33-
"react-scripts": "4.0.3",
34-
"web-vitals": "^1.0.1"
29+
"react-dom": "^17.0.2"
3530
},
3631
"scripts": {
3732
"start": "react-scripts start",
@@ -61,6 +56,7 @@
6156
"devDependencies": {
6257
"@babel/cli": "^7.13.16",
6358
"@babel/plugin-proposal-class-properties": "^7.13.0",
64-
"@babel/preset-react": "^7.13.13"
59+
"@babel/preset-react": "^7.13.13",
60+
"react-scripts": "^4.0.3"
6561
}
6662
}

‎src/App.test.js‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/components/Retool.js‎

Lines changed: 105 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,120 @@
1-
import React from 'react';
2-
import './retool.css';
1+
import React from "react";
2+
import "./retool.css";
33

44
class Retool extends React.Component {
5-
constructor(props) {
6-
super(props);
7-
8-
if (!this.props.url) throw new Error('Please pass a url into the Retool component.')
9-
10-
this.state = {
11-
url: props.url,
12-
elementWatchers: {}
13-
}
14-
}
5+
constructor(props) {
6+
super(props);
157

16-
componentDidMount(){
17-
this.startListening()
18-
this.startWatchers()
19-
}
8+
if (!this.props.url)
9+
throw new Error("Please pass a url into the Retool component.");
10+
11+
this.state = {
12+
url: props.url,
13+
elementWatchers: {},
14+
};
15+
}
2016

21-
startListening = () => {
22-
if (this.iframe) {
23-
window.addEventListener('message', (e) => this.handle(e) );
24-
}
17+
componentDidMount() {
18+
this.startListening();
19+
this.startWatchers();
20+
}
21+
22+
startListening = () => {
23+
if (this.iframe) {
24+
window.addEventListener("message", (e) => this.handle(e));
2525
}
26+
};
27+
28+
startWatchers = () => {
29+
var watcherKeys = Object.keys(this.state.elementWatchers);
2630

27-
startWatchers = () => {
28-
var watcherKeys = Object.keys(this.state.elementWatchers)
29-
30-
for (var i = 0; i < watcherKeys.length; i++) {
31-
var key = watcherKeys[i]
32-
var watcher = this.state.elementWatchers[key]
33-
var selector = watcher.selector
34-
var node = document.querySelector(selector)
35-
var value = node?.textContent
36-
if (value !== watcher.prevValue) {
37-
watcher.prevValue = value
38-
watcher.iframe.contentWindow.postMessage(
39-
{
40-
type: 'PARENT_WINDOW_RESULT',
41-
result: value,
42-
id: watcher.queryId,
43-
pageName: watcher.pageName,
44-
},
45-
'*',
46-
)
47-
}
48-
}
49-
50-
setTimeout(this.startWatchers, 100)
31+
for (var i = 0; i < watcherKeys.length; i++) {
32+
var key = watcherKeys[i];
33+
var watcher = this.state.elementWatchers[key];
34+
var selector = watcher.selector;
35+
var node = document.querySelector(selector);
36+
var value = node?.textContent;
37+
if (value !== watcher.prevValue) {
38+
watcher.prevValue = value;
39+
watcher.iframe.contentWindow.postMessage(
40+
{
41+
type: "PARENT_WINDOW_RESULT",
42+
result: value,
43+
id: watcher.queryId,
44+
pageName: watcher.pageName,
45+
},
46+
"*"
47+
);
48+
}
5149
}
5250

53-
createOrReplaceWatcher = (selector, pageName, queryId) => {
54-
var watcherId = pageName + '-' + queryId
55-
var watchers = {...this.state.elementWatchers}
51+
setTimeout(this.startWatchers, 100);
52+
};
5653

57-
watchers[watcherId] = {
58-
iframe: this.iframe,
59-
selector: selector,
60-
pageName: pageName,
61-
queryId: queryId,
62-
prevValue: null,
63-
}
54+
createOrReplaceWatcher = (selector, pageName, queryId) => {
55+
var watcherId = pageName + "-" + queryId;
56+
var watchers = { ...this.state.elementWatchers };
6457

65-
this.setState({elementWatchers: watchers})
66-
}
58+
watchers[watcherId] = {
59+
iframe: this.iframe,
60+
selector: selector,
61+
pageName: pageName,
62+
queryId: queryId,
63+
prevValue: null,
64+
};
6765

68-
handle = (event) => {
69-
if (!this.iframe.contentWindow) return
70-
71-
var node;
72-
73-
if (event.data.type === 'PARENT_WINDOW_QUERY') {
74-
node = document.querySelector(event.data.selector)
75-
this.createOrReplaceWatcher(event.data.selector, event.data.pageName, event.data.id)
76-
77-
this.iframe.contentWindow.postMessage(
78-
{
79-
type: 'PARENT_WINDOW_RESULT',
80-
result: node?.textContent,
81-
id: event.data.id,
82-
pageName: event.data.pageName,
83-
},
84-
'*',
85-
)
86-
}
87-
88-
if (event.data.type === 'PARENT_WINDOW_PREVIEW_QUERY') {
89-
node = document.querySelector(event.data.selector)
90-
this.iframe.contentWindow.postMessage(
91-
{
92-
type: 'PARENT_WINDOW_PREVIEW_RESULT',
93-
result: node?.textContent,
94-
id: event.data.id,
95-
},
96-
'*',
97-
)
98-
}
99-
66+
this.setState({ elementWatchers: watchers });
67+
};
68+
69+
handle = (event) => {
70+
if (!this.iframe.contentWindow) return;
71+
72+
var node;
73+
74+
if (event.data.type === "PARENT_WINDOW_QUERY") {
75+
node = document.querySelector(event.data.selector);
76+
this.createOrReplaceWatcher(
77+
event.data.selector,
78+
event.data.pageName,
79+
event.data.id
80+
);
81+
82+
this.iframe.contentWindow.postMessage(
83+
{
84+
type: "PARENT_WINDOW_RESULT",
85+
result: node?.textContent,
86+
id: event.data.id,
87+
pageName: event.data.pageName,
88+
},
89+
"*"
90+
);
10091
}
10192

102-
render() {
103-
return (
104-
<iframe
105-
frameBorder="none"
106-
src={this.state.url}
107-
ref = {e => {
108-
this.iframe = e
109-
}}
110-
>
111-
</iframe>
112-
);
93+
if (event.data.type === "PARENT_WINDOW_PREVIEW_QUERY") {
94+
node = document.querySelector(event.data.selector);
95+
this.iframe.contentWindow.postMessage(
96+
{
97+
type: "PARENT_WINDOW_PREVIEW_RESULT",
98+
result: node?.textContent,
99+
id: event.data.id,
100+
},
101+
"*"
102+
);
113103
}
104+
};
105+
106+
render() {
107+
return (
108+
<iframe
109+
frameBorder="none"
110+
src={this.state.url}
111+
ref={(e) => {
112+
this.iframe = e;
113+
}}
114+
title="retool"
115+
></iframe>
116+
);
117+
}
114118
}
115-
116-
export default Retool;
117-
119+
120+
export default Retool;

‎src/index.js‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
5-
import reportWebVitals from './reportWebVitals';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import "./index.css";
4+
import App from "./App";
65

76
ReactDOM.render(
87
<React.StrictMode>
98
<App />
109
</React.StrictMode>,
11-
document.getElementById('root')
10+
document.getElementById("root")
1211
);
13-
14-
// If you want to start measuring performance in your app, pass a function
15-
// to log results (for example: reportWebVitals(console.log))
16-
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17-
reportWebVitals();

‎src/reportWebVitals.js‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/setupTests.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)