client/js/app/src/app/pages/querybuilder/Components/Buttons/ShowQueryButton.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import React, { useContext, useState } from 'react';
import { QueryContext } from '../Contexts/QueryContext';
import SimpleButton from './SimpleButton';

export default function ShowQueryButton() {
  const { query, showQuery, setShowQuery } = useContext(QueryContext);

  const handleClick = () => {
    setShowQuery(!showQuery);
  };

  return (
    <>
      <SimpleButton className="showJSON" onClick={handleClick}>
        Show query JSON
      </SimpleButton>
      {showQuery && (
        <textarea
          id="jsonquery"
          className="responsebox"
          readOnly
          cols="70"
          rows="15"
          value={query}
        ></textarea>
      )}
    </>
  );
}