Skip to content

Commit

Permalink
Migrate Query Source page to React: refine code (#4499)
Browse files Browse the repository at this point in the history
  • Loading branch information
kravets-levko authored Dec 27, 2019
1 parent bea9007 commit 81b712e
Show file tree
Hide file tree
Showing 36 changed files with 717 additions and 515 deletions.
4 changes: 2 additions & 2 deletions client/app/components/queries/ApiKeyDialog/index.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { clone, extend } from "lodash";
import { extend } from "lodash";
import React, { useMemo, useState, useCallback } from "react";
import PropTypes from "prop-types";
import Modal from "antd/lib/modal";
Expand All @@ -22,7 +22,7 @@ function ApiKeyDialog({ dialog, ...props }) {
.post(`api/queries/${query.id}/regenerate_api_key`)
.success(data => {
setUpdatingApiKey(false);
setQuery(extend(clone(query), { api_key: data.api_key }));
setQuery(extend(query.clone(), { api_key: data.api_key }));
})
.error(() => {
setUpdatingApiKey(false);
Expand Down
40 changes: 20 additions & 20 deletions client/app/components/queries/QueryEditor/index.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useMemo, useRef, useState, useCallback, useImperativeHandle } from "react";
import React, { useEffect, useMemo, useState, useCallback, useImperativeHandle } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import { AceEditor, snippetsModule, updateSchemaCompleter } from "./ace";
Expand All @@ -15,7 +15,7 @@ const QueryEditor = React.forwardRef(function(
ref
) {
const [container, setContainer] = useState(null);
const editorRef = useRef(null);
const [editorRef, setEditorRef] = useState(null);

// For some reason, value for AceEditor should be managed in this way - otherwise it goes berserk when selecting text
const [currentValue, setCurrentValue] = useState(value);
Expand Down Expand Up @@ -44,17 +44,19 @@ const QueryEditor = React.forwardRef(function(
);

useEffect(() => {
if (editorRef.current) {
const { editor } = editorRef.current;
updateSchemaCompleter(editor.id, schema); // TODO: cleanup?
if (editorRef) {
const editorId = editorRef.editor.id;
updateSchemaCompleter(editorId, schema);
return () => {
updateSchemaCompleter(editorId, null);
};
}
}, [schema]);
}, [schema, editorRef]);

useEffect(() => {
function resize() {
if (editorRef.current) {
const { editor } = editorRef.current;
editor.resize();
if (editorRef) {
editorRef.editor.resize();
}
}

Expand All @@ -63,16 +65,15 @@ const QueryEditor = React.forwardRef(function(
const unwatch = resizeObserver(container, resize);
return unwatch;
}
}, [container]);
}, [container, editorRef]);

const handleSelectionChange = useCallback(
selection => {
const { editor } = editorRef.current;
const rawSelectedQueryText = editor.session.doc.getTextRange(selection.getRange());
const rawSelectedQueryText = editorRef.editor.session.doc.getTextRange(selection.getRange());
const selectedQueryText = rawSelectedQueryText.length > 1 ? rawSelectedQueryText : null;
onSelectionChange(selectedQueryText);
},
[onSelectionChange]
[editorRef, onSelectionChange]
);

const initEditor = useCallback(editor => {
Expand Down Expand Up @@ -113,28 +114,27 @@ const QueryEditor = React.forwardRef(function(
ref,
() => ({
paste: text => {
if (editorRef.current) {
const { editor } = editorRef.current;
if (editorRef) {
const { editor } = editorRef;
editor.session.doc.replace(editor.selection.getRange(), text);
const range = editor.selection.getRange();
onChange(editor.session.getValue());
editor.selection.setRange(range);
}
},
focus: () => {
if (editorRef.current) {
const { editor } = editorRef.current;
editor.focus();
if (editorRef) {
editorRef.editor.focus();
}
},
}),
[onChange]
[editorRef, onChange]
);

return (
<div className={cx("query-editor-container", className)} {...props} ref={setContainer}>
<AceEditor
ref={editorRef}
ref={setEditorRef}
theme="textmate"
mode={syntax || "sql"}
value={currentValue}
Expand Down
Loading

0 comments on commit 81b712e

Please sign in to comment.