|
12 | 12 | // See the License for the specific language governing permissions and |
13 | 13 | // limitations under the License. |
14 | 14 |
|
15 | | -import React from "react"; |
| 15 | +import React, { useState } from "react"; |
16 | 16 | import Modal from "react-bootstrap/Modal"; |
17 | 17 | import Button from "react-bootstrap/Button"; |
18 | 18 |
|
19 | 19 | import Editor from "../../containers/Editor"; |
20 | 20 | import { getRawSchema } from "../../lib/dgraph-syntax"; |
21 | 21 |
|
22 | | -export default class SchemaRawModeModal extends React.Component { |
23 | | - constructor(props) { |
24 | | - super(props); |
| 22 | +export default function SchemaRawModeModal({ |
| 23 | + executeQuery, |
| 24 | + onAfterUpdate, |
| 25 | + onCancel, |
| 26 | + onDropData, |
| 27 | + schema, |
| 28 | + types, |
| 29 | +}) { |
| 30 | + const [value, setValue] = useState(getRawSchema(schema, types)); |
| 31 | + const [editorKey, setEditorKey] = useState(1); |
| 32 | + const [errorMsg, setErrorMsg] = useState(null); |
| 33 | + const [updating, setUpdating] = useState(false); |
25 | 34 |
|
26 | | - this.state = { |
27 | | - value: getRawSchema(this.props.schema), |
28 | | - editorKey: 1, |
29 | | - }; |
30 | | - |
31 | | - this.handleUpdate = this.handleUpdate.bind(this); |
32 | | - } |
33 | | - |
34 | | - async handleUpdate() { |
35 | | - const { executeQuery, onAfterUpdate } = this.props; |
36 | | - |
37 | | - this.setState({ |
38 | | - errorMsg: "", |
39 | | - updating: true, |
40 | | - }); |
| 35 | + const handleUpdate = async () => { |
| 36 | + setUpdating(true); |
| 37 | + setErrorMsg(null); |
41 | 38 |
|
42 | 39 | try { |
43 | | - await executeQuery(this.state.value + "\n", "alter", true); |
| 40 | + await executeQuery(value + "\n", "alter", true); |
44 | 41 | onAfterUpdate(); |
45 | 42 | } catch (error) { |
46 | | - this.setState({ |
47 | | - errorMsg: `Could not alter schema: ${error?.message}`, |
48 | | - }); |
| 43 | + setErrorMsg(`Could not alter schema: ${error?.message}`); |
49 | 44 | } finally { |
50 | | - this.setState({ updating: false }); |
| 45 | + setUpdating(false); |
51 | 46 | } |
52 | | - } |
53 | | - |
54 | | - handleResetClick = () => { |
55 | | - this.setState({ |
56 | | - value: getRawSchema(this.props.schema), |
57 | | - editorKey: this.state.editorKey + 1, |
58 | | - errorMsg: null, |
59 | | - }); |
60 | 47 | }; |
61 | 48 |
|
62 | | - render() { |
63 | | - const { onCancel, onDropData } = this.props; |
64 | | - const { editorKey, updating, errorMsg } = this.state; |
| 49 | + const handleResetClick = () => { |
| 50 | + setValue(getRawSchema(schema, types)); |
| 51 | + setEditorKey(editorKey + 1); |
| 52 | + setErrorMsg(null); |
| 53 | + }; |
65 | 54 |
|
66 | | - return ( |
67 | | - <Modal show={true} size="lg" onHide={onCancel}> |
68 | | - <Modal.Header closeButton> |
69 | | - <Modal.Title>Edit Schema File</Modal.Title> |
70 | | - </Modal.Header> |
71 | | - <Modal.Body style={{ padding: 0 }}> |
72 | | - <div style={{ border: "1px solid #e5e5e5" }}> |
73 | | - <Editor |
74 | | - key={editorKey} |
75 | | - query={this.state.value} |
76 | | - maxHeight={314} |
77 | | - onUpdateQuery={value => this.setState({ value })} |
78 | | - /> |
79 | | - </div> |
80 | | - {!errorMsg ? null : ( |
81 | | - <div className="alert alert-danger">{errorMsg}</div> |
82 | | - )} |
83 | | - </Modal.Body> |
84 | | - <Modal.Footer style={{ justifyContent: "space-between" }}> |
85 | | - <Button |
86 | | - className="pull-left" |
87 | | - variant="secondary" |
88 | | - onClick={onCancel} |
89 | | - > |
90 | | - Cancel |
91 | | - </Button> |
92 | | - <Button |
93 | | - variant="light" |
94 | | - onClick={this.handleResetClick} |
95 | | - disabled={updating} |
96 | | - > |
97 | | - {updating ? "Updating..." : "Refresh Schema"} |
98 | | - </Button> |
| 55 | + return ( |
| 56 | + <Modal show={true} size="lg" onHide={onCancel}> |
| 57 | + <Modal.Header closeButton> |
| 58 | + <Modal.Title>Edit Schema File</Modal.Title> |
| 59 | + </Modal.Header> |
| 60 | + <Modal.Body style={{ padding: 0 }}> |
| 61 | + <div style={{ border: "1px solid #e5e5e5" }}> |
| 62 | + <Editor |
| 63 | + key={editorKey} |
| 64 | + query={value} |
| 65 | + maxHeight={314} |
| 66 | + onUpdateQuery={value => setValue(value)} |
| 67 | + /> |
| 68 | + </div> |
| 69 | + {!errorMsg ? null : ( |
| 70 | + <div className="alert alert-danger">{errorMsg}</div> |
| 71 | + )} |
| 72 | + </Modal.Body> |
| 73 | + <Modal.Footer style={{ justifyContent: "space-between" }}> |
| 74 | + <Button |
| 75 | + className="pull-left" |
| 76 | + variant="secondary" |
| 77 | + onClick={onCancel} |
| 78 | + > |
| 79 | + Cancel |
| 80 | + </Button> |
| 81 | + <Button |
| 82 | + variant="light" |
| 83 | + onClick={handleResetClick} |
| 84 | + disabled={updating} |
| 85 | + > |
| 86 | + {updating ? "Updating..." : "Refresh Schema"} |
| 87 | + </Button> |
99 | 88 |
|
100 | | - <Button variant="danger" size="sm" onClick={onDropData}> |
101 | | - Drop Data |
102 | | - </Button> |
| 89 | + <Button variant="danger" size="sm" onClick={onDropData}> |
| 90 | + Drop Data |
| 91 | + </Button> |
103 | 92 |
|
104 | | - <Button |
105 | | - variant="primary" |
106 | | - onClick={this.handleUpdate} |
107 | | - disabled={updating} |
108 | | - > |
109 | | - {updating ? "Updating..." : "Apply Schema"} |
110 | | - </Button> |
111 | | - </Modal.Footer> |
112 | | - </Modal> |
113 | | - ); |
114 | | - } |
| 93 | + <Button |
| 94 | + variant="primary" |
| 95 | + onClick={handleUpdate} |
| 96 | + disabled={updating} |
| 97 | + > |
| 98 | + {updating ? "Updating..." : "Apply Schema"} |
| 99 | + </Button> |
| 100 | + </Modal.Footer> |
| 101 | + </Modal> |
| 102 | + ); |
115 | 103 | } |
0 commit comments