Function MetadataQuery

client/src/pages/metadata-query/metadata-query.tsx:8–155

()

import { queries } from './queries';

export const MetadataQuery = () => {
  const [selections, setSelections] = useState(queries);
  const [queryString, setQueryString] = useState('');
  const [geoPositionUpdate, setGeoPositionUpdate] = useState('manual');
  const [selectedTrack, setSelectedTrack] = useState({
    account: '',
    container: '',
    filepath: '',
  });
  const { status, data, error } = useQueryTrack(
    CLIENT_TYPE_API,
    selectedTrack.account,
    selectedTrack.container,
    selectedTrack.filepath
  );

  const toggleSelected = (e) => {
    const name = e.target.name;
    const newSelections = { ...selections };
    newSelections[name].selected = !newSelections[name].selected;
    newSelections[name].value = '';
    setSelections(newSelections);
  };

  const renderQuerySelection = () => {
    return Object.keys(selections).map((item) => {
      return (
        <label key={item} className="cursor-pointer label">
          <span className="label-text">{item}</span>
          <input
            onChange={toggleSelected}
            type="checkbox"
            name={item}
            checked={selections[item].selected}
            className="checkbox checkbox-success"
          />
        </label>
      );
    });
  };

  const renderQueryComponents = () => {
    return Object.keys(selections).map((item) => {
      if (selections[item].selected) {
        const Component = selections[item].component;
        if (item === 'geo') {
          return (
            <Component
              key={item}
              queryName={item}
              validator={selections[item].validator}
              description={selections[item].description}
              handleQueryValid={handleQueryValid}
              handleQueryInvalid={handleQueryInvalid}
              trackData={data ?? []}
              geoPositionUpdate={geoPositionUpdate}
              setGeoPositionUpdate={setGeoPositionUpdate}
            />