Skip to content

Commit 65ffa58

Browse files
raduwenraduwen
authored
Merge pull request #94 from raduwen/feat/trash-react-firebase-database
feat/trash react firebase database
2 parents b1824ed + 2145ef5 commit 65ffa58

File tree

10 files changed

+603
-658
lines changed

10 files changed

+603
-658
lines changed

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
},
1414
"dependencies": {
1515
"@material-ui/core": "^4.12.3",
16-
"@react-firebase/database": "^0.3.11",
1716
"firebase": "^8.9.1",
1817
"next": "^11.1.2",
1918
"react": "^17.0.2",

‎src/components/AdminApp.tsx

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

‎src/components/IFrameWidget/editor.tsx

Lines changed: 154 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { Component } from 'react';
1+
import React, { Component, MouseEvent } from 'react';
22
import styled from 'styled-components';
3-
import { FirebaseDatabaseMutation } from '@react-firebase/database'
3+
import { db } from '@/lib/firebase';
44
import {
55
TextField,
66
Button,
@@ -23,178 +23,174 @@ const FormGroup = styled.div`
2323
}
2424
`
2525
class IFrameWidgetEditor extends Component<Props, IFrameWidgetProps> {
26-
constructor(props) {
26+
constructor(props: Props) {
2727
super(props);
2828
this.state = this.props.props;
29+
this.save = this.save.bind(this);
30+
}
31+
32+
save(e: MouseEvent<HTMLButtonElement>) {
33+
e.preventDefault();
34+
db.ref(`/widgets/${this.props.id}/props`).set(this.state);
2935
}
3036

3137
render() {
3238
return (
3339
<div>
34-
<Typography variant="h6">
35-
IFrameWidget : {this.props.id}
36-
</Typography>
37-
<FormGroup>
38-
<TextField
39-
type="text"
40-
label="url"
41-
fullWidth
42-
variant="outlined"
43-
onChange={(e) => {
44-
this.setState({ ...this.state, url: e.target.value });
45-
}}
46-
value={this.state.url}
47-
/>
48-
<TextField
49-
type="number"
50-
label="retry time(sec)"
51-
fullWidth
52-
variant="outlined"
53-
onChange={(e) => {
54-
this.setState({ ...this.state, retry_time: parseFloat(e.target.value) });
55-
}}
56-
/>
57-
<TextField
58-
type="number"
59-
label="retry time(sec)"
60-
fullWidth
61-
variant="outlined"
62-
onChange={(e) => {
63-
this.setState({ ...this.state, retry_count: parseInt(e.target.value) });
64-
}}
65-
/>
66-
</FormGroup>
67-
<FormGroup>
68-
<TextField
69-
type="number"
70-
label="width"
71-
fullWidth
72-
variant="outlined"
73-
onChange={(e) => {
74-
this.setState({ ...this.state, width: parseFloat(e.target.value) });
75-
}}
76-
value={this.state.width}
77-
/>
78-
<TextField
79-
type="number"
80-
label="height"
81-
fullWidth
82-
variant="outlined"
83-
onChange={(e) => {
84-
this.setState({ ...this.state, height: parseFloat(e.target.value) });
85-
}}
86-
value={this.state.height}
87-
/>
88-
</FormGroup>
89-
<FormGroup>
90-
<TextField
91-
type="number"
92-
label="position top"
93-
fullWidth
94-
variant="outlined"
95-
onChange={(e) => {
96-
const pos = this.state.position || {};
97-
if (e.target.value !== "") {
98-
const v = parseInt(e.target.value);
99-
if (isNaN(v)) {
100-
delete pos.top;
40+
<>
41+
<Typography variant="h6">
42+
IFrameWidget : {this.props.id}
43+
</Typography>
44+
<FormGroup>
45+
<TextField
46+
type="text"
47+
label="url"
48+
fullWidth
49+
variant="outlined"
50+
onChange={(e) => {
51+
this.setState({ ...this.state, url: e.target.value });
52+
}}
53+
value={this.state.url}
54+
/>
55+
<TextField
56+
type="number"
57+
label="retry time(sec)"
58+
fullWidth
59+
variant="outlined"
60+
onChange={(e) => {
61+
this.setState({ ...this.state, retry_time: parseFloat(e.target.value) });
62+
}}
63+
/>
64+
<TextField
65+
type="number"
66+
label="retry time(sec)"
67+
fullWidth
68+
variant="outlined"
69+
onChange={(e) => {
70+
this.setState({ ...this.state, retry_count: parseInt(e.target.value) });
71+
}}
72+
/>
73+
</FormGroup>
74+
<FormGroup>
75+
<TextField
76+
type="number"
77+
label="width"
78+
fullWidth
79+
variant="outlined"
80+
onChange={(e) => {
81+
this.setState({ ...this.state, width: parseFloat(e.target.value) });
82+
}}
83+
value={this.state.width}
84+
/>
85+
<TextField
86+
type="number"
87+
label="height"
88+
fullWidth
89+
variant="outlined"
90+
onChange={(e) => {
91+
this.setState({ ...this.state, height: parseFloat(e.target.value) });
92+
}}
93+
value={this.state.height}
94+
/>
95+
</FormGroup>
96+
<FormGroup>
97+
<TextField
98+
type="number"
99+
label="position top"
100+
fullWidth
101+
variant="outlined"
102+
onChange={(e) => {
103+
const pos = this.state.position || {};
104+
if (e.target.value !== "") {
105+
const v = parseInt(e.target.value);
106+
if (isNaN(v)) {
107+
delete pos.top;
108+
} else {
109+
pos.top = v;
110+
}
101111
} else {
102-
pos.top = v;
112+
delete pos.top;
103113
}
104-
} else {
105-
delete pos.top;
106-
}
107-
this.setState({ ...this.state, position: pos });
108-
}}
109-
value={this.state?.position?.top}
110-
/>
111-
<TextField
112-
type="number"
113-
label="position right"
114-
fullWidth
115-
variant="outlined"
116-
onChange={(e) => {
117-
const pos = this.state.position || {};
118-
if (e.target.value !== "") {
119-
const v = parseInt(e.target.value);
120-
if (isNaN(v)) {
121-
delete pos.right;
114+
this.setState({ ...this.state, position: pos });
115+
}}
116+
value={this.state?.position?.top}
117+
/>
118+
<TextField
119+
type="number"
120+
label="position right"
121+
fullWidth
122+
variant="outlined"
123+
onChange={(e) => {
124+
const pos = this.state.position || {};
125+
if (e.target.value !== "") {
126+
const v = parseInt(e.target.value);
127+
if (isNaN(v)) {
128+
delete pos.right;
129+
} else {
130+
pos.right = v;
131+
}
122132
} else {
123-
pos.right = v;
133+
delete pos.right;
124134
}
125-
} else {
126-
delete pos.right;
127-
}
128-
this.setState({ ...this.state, position: pos });
129-
}}
130-
value={this.state.position?.right}
131-
/>
132-
<TextField
133-
type="number"
134-
label="position bottom"
135-
fullWidth
136-
variant="outlined"
137-
onChange={(e) => {
138-
const pos = this.state.position || {};
139-
if (e.target.value !== "") {
140-
const v = parseInt(e.target.value);
141-
if (isNaN(v)) {
142-
delete pos.bottom;
135+
this.setState({ ...this.state, position: pos });
136+
}}
137+
value={this.state.position?.right}
138+
/>
139+
<TextField
140+
type="number"
141+
label="position bottom"
142+
fullWidth
143+
variant="outlined"
144+
onChange={(e) => {
145+
const pos = this.state.position || {};
146+
if (e.target.value !== "") {
147+
const v = parseInt(e.target.value);
148+
if (isNaN(v)) {
149+
delete pos.bottom;
150+
} else {
151+
pos.bottom = v;
152+
}
143153
} else {
144-
pos.bottom = v;
154+
delete pos.bottom;
145155
}
146-
} else {
147-
delete pos.bottom;
148-
}
149-
this.setState({ ...this.state, position: pos });
150-
}}
151-
value={this.state.position?.bottom}
152-
/>
153-
<TextField
154-
type="number"
155-
label="position left"
156-
fullWidth
157-
variant="outlined"
158-
onChange={(e) => {
159-
const pos = this.state.position || {};
160-
if (e.target.value !== "") {
161-
const v = parseInt(e.target.value);
162-
if (isNaN(v)) {
163-
delete pos.left;
156+
this.setState({ ...this.state, position: pos });
157+
}}
158+
value={this.state.position?.bottom}
159+
/>
160+
<TextField
161+
type="number"
162+
label="position left"
163+
fullWidth
164+
variant="outlined"
165+
onChange={(e) => {
166+
const pos = this.state.position || {};
167+
if (e.target.value !== "") {
168+
const v = parseInt(e.target.value);
169+
if (isNaN(v)) {
170+
delete pos.left;
171+
} else {
172+
pos.left = v;
173+
}
164174
} else {
165-
pos.left = v;
175+
delete pos.left;
166176
}
167-
} else {
168-
delete pos.left;
169-
}
170-
this.setState({ ...this.state, position: pos });
171-
}}
172-
value={this.state.position?.left}
173-
/>
174-
</FormGroup>
177+
this.setState({ ...this.state, position: pos });
178+
}}
179+
value={this.state.position?.left}
180+
/>
181+
</FormGroup>
182+
</>
175183

176-
<FirebaseDatabaseMutation
177-
type="set"
178-
path={`/widgets/${this.props.id}/props`}
179-
>
180-
{({ runMutation }) => {
181-
return (
182-
<FormGroup>
183-
<Button
184-
type="button"
185-
color="primary"
186-
variant="contained"
187-
onClick={async (e: any) => {
188-
e.preventDefault();
189-
await runMutation(this.state);
190-
}}
191-
>
192-
Save
193-
</Button>
194-
</FormGroup>
195-
);
196-
}}
197-
</FirebaseDatabaseMutation>
184+
<FormGroup>
185+
<Button
186+
type="button"
187+
color="primary"
188+
variant="contained"
189+
onClick={this.save}
190+
>
191+
Save
192+
</Button>
193+
</FormGroup>
198194
</div>
199195
);
200196
}

0 commit comments

Comments
 (0)