{"size": 2813, "ext": "js", "max_stars_repo_path": "demo-java/ui/src/components/demo/server-client/Browser/Browser.js", "max_stars_repo_name": "kkdatkiran/KIRun", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "demo-java/ui/src/components/demo/server-client/Browser/Browser.js", "max_issues_repo_name": "kkdatkiran/KIRun", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "demo-java/ui/src/components/demo/server-client/Browser/Browser.js", "max_forks_repo_name": "kkdatkiran/KIRun", "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": 29.0, "max_line_length": 94, "alphanum_fraction": 0.5559900462}
import React, { useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Popup from "../../Popup";
import {
  useEditorContextDispatch,
  useEditorContextState,
  CHANGE_SERVICE_FUNCTIONS,
  CHANGE_SERVICE_SELECTION,
} from "../../../../contexts/EditorContext";

import { getServiceFunctions } from "../../../../services/editorService";

async function listServiceFunctions(dispatch, name) {
  const { data: { data: payload } = {} } = await getServiceFunctions(name);
  dispatch({ type: CHANGE_SERVICE_FUNCTIONS, payload });
}

export default function Browser() {
  const [filterText, setFilterText] = useState("");
  const [newFunctionName, setNewFunctionName] = useState("");
  const [newFunctionPopup, setNewFunctionPopup] = useState(false);

  const { serviceFunctions: { content: list = [] } = {}, selected } = useEditorContextState();

  const dispatch = useEditorContextDispatch();

  useEffect(() => {
    listServiceFunctions(dispatch);
  }, []);

  let popup = undefined;
  if (newFunctionPopup) {
    popup = (
      <Popup
        title="New function"
        buttons={["ok", "close"]}
        onButtonClick={(e) => {
          if (e.button === "close") setNewFunctionPopup(false);
        }}
      >
        <span className="prompt">Enter the function name:</span>
        <input
          value={newFunctionName}
          type="text"
          onChange={(e) => setNewFunctionName(e.target.value)}
          onKeyUp={(e) => {
            if (e.key !== "Enter") return;
            setNewFunctionPopup(false);
          }}
        />
      </Popup>
    );
  }

  return (
    <div className="browser">
      {popup}
      <div className="header">
        <span className="title">Function Browser</span>
        <div className="buttonGroup">
          <button onClick={() => setNewFunctionPopup(true)}>
            <FontAwesomeIcon icon="plus" />
          </button>
        </div>
      </div>
      <div className="filter">
        <input
          type="text"
          value={filterText}
          onChange={(e) => setFilterText(e.target.value)}
          onKeyUp={(e) => e.key === "Enter" && filter(e.target.value)}
          placeholder={"Filter"}
        />
        <button onClick={() => setFilterText("")}>
          <FontAwesomeIcon icon="times-circle" />
        </button>
      </div>
      <div className="list">
        {list.map((e, i) => (
          <div
            key={e.id}
            className={`listItem ${i === selected ? "selected" : ""}`}
            role="button"
            tabIndex="0"
            onClick={() => dispatch({ type: CHANGE_SERVICE_SELECTION, payload: i })}
            onKeyDown={() => {}}
          >
            {e.name}
          </div>
        ))}
      </div>
    </div>
  );
}

function filter() {}
