{"size": 2494, "ext": "js", "max_stars_repo_path": "src/shex/ShExVisualizeRaw.js", "max_stars_repo_name": "jorgealvarezfidalgo/rdfshape-client", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/shex/ShExVisualizeRaw.js", "max_issues_repo_name": "jorgealvarezfidalgo/rdfshape-client", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/shex/ShExVisualizeRaw.js", "max_forks_repo_name": "jorgealvarezfidalgo/rdfshape-client", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.1919191919, "max_line_length": 72, "alphanum_fraction": 0.5709703288}
import axios from "axios";
import qs from "query-string";
import React, { useEffect, useState } from "react";
import API from "../API";
import { params2Form } from "../Permalink";
import ResultShExVisualize from "../results/ResultShExVisualize";
import {
  InitialShEx,
  paramsFromStateShEx,
  shExParamsFromQueryParams,
  updateStateShEx
} from "./ShEx";

function ShExVisualizeRaw(props) {
  const [shex, setShex] = useState(InitialShEx);
  const [result, setResult] = useState("");
  const [params, setParams] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [message] = useState("Processing...");

  const url = API.schemaVisualize;

  useEffect(() => {
    if (props.location?.search) {
      const queryParams = qs.parse(props.location.search);
      let paramsShEx = {};

      if (
        queryParams.schema ||
        queryParams.schemaURL ||
        queryParams.schemaFile
      ) {
        const schemaParams = shExParamsFromQueryParams(queryParams);
        const finalSchema = updateStateShEx(schemaParams, shex) || shex;
        setShex(finalSchema);
        paramsShEx = finalSchema;
      }

      let params = {
        ...paramsFromStateShEx(paramsShEx),
        schemaEngine: "ShEx",
      };
      setParams(params);
    }
  }, [props.location?.search]);

  useEffect(() => {
    if (params && !loading) {
      if (
        params.schema ||
        params.schemaURL ||
        (params.schemaFile && params.schemaFile.name)
      ) {
        postVisualize();
      } else {
        setError("No ShEx schema provided");
      }
    }
  }, [params]);

  function postVisualize(cb) {
    setLoading(true);
    const formData = params2Form(params);

    axios
      .post(url, formData)
      .then((response) => response.data)
      .then(async (data) => {
        setResult(data);
        if (cb) cb();
      })
      .catch(function(error) {
        setError(`Error doing request to ${url}: ${error}`);
      })
      .finally(() => setLoading(false));
  }

  return (
    <>
      {loading || error || result ? (
        <>
          {loading ? (
            <p>{message}</p>
          ) : error || result?.error ? (
            <p>{error || result?.error}</p>
          ) : result && !result.error ? (
            <ResultShExVisualize result={result} showDetails={false} />
          ) : null}
        </>
      ) : (
        <p>{message}</p>
      )}
    </>
  );
}

export default ShExVisualizeRaw;
