shuffle-cracked/frontend/src/views/EditWebhook.jsx

import React, { useState, useEffect } from "react";

import Button from "@material-ui/core/Button";
import Paper from "@material-ui/core/Paper";
import Divider from "@material-ui/core/Divider";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

import WebhookImage from "../assets/img/webhook.png";
import KafkaImage from "../assets/img/kafka.png";

import EditWorkflow from "./EditWorkflow";

const EditWebhook = (props) => {
  const { globalUrl, isLoaded } = props;

  // FIXME
  //const [webhookData, setWebhookData] = useState(webhooktest)
  const [webhookData, setWebhookData] = useState({});
  const [workflows, setWorkflows] = useState([]);
  const [firstrequest, setFirstrequest] = React.useState(true);

  const [selectedWorkflows, setSelectedWorkflows] = useState([]);

  const getWorkflows = () => {
    fetch(globalUrl + "/api/v1/workflows", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      credentials: "include",
    })
      .then((response) => {
        if (response.status !== 200) {
          console.log("Status not 200 for workflows :O!");
        }
        return response.json();
      })
      .then((responseJson) => {
        setWorkflows(responseJson);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const setWebhook = (inputdata) => {
    console.log(inputdata);

    fetch(globalUrl + "/api/v1/hooks/" + props.match.params.key, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      credentials: "include",
      body: JSON.stringify(inputdata),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const getCurrentWebhook = () => {
    fetch(globalUrl + "/api/v1/hooks/" + props.match.params.key, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      credentials: "include",
    })
      .then((response) => {
        if (response.status !== 200) {
          console.log("Status not 200!");
          window.location.pathname = "webhooks";
        }
        return response.json();
      })
      .then((responseJson) => {
        if (responseJson.actions === null) {
          responseJson.actions = [];
        }

        if (responseJson.transforms === null) {
          responseJson.transforms = [];
        }

        setWebhookData(responseJson);
      })
      .catch((error) => {
        console.log(error);
        //window.location.pathname = "webhooks"
      });
  };

  useEffect(() => {
    if (firstrequest) {
      setFirstrequest(false);
      getCurrentWebhook();
      if (workflows.length <= 0) {
        getWorkflows();
      }
    }

    // After everything is loaded
    if (
      Object.getOwnPropertyNames(webhookData).length > 0 &&
      webhookData.actions.length > 0 &&
      workflows.length > 0 &&
      selectedWorkflows.length === 0
    ) {
      // Setting startup actions. making like this in case we want other actions
      var tmpActionWorkflows = [];
      for (var key in webhookData.actions) {
        if (webhookData.actions[key].type === "workflow") {
          tmpActionWorkflows.push(webhookData.actions[key]);
        }
      }

      // Fix duplicates... Meh
      var foundWorkflowIds = [];
      var tmpWorkflows = [];
      for (key in tmpActionWorkflows) {
        if (foundWorkflowIds.includes(tmpActionWorkflows[key].id)) {
          continue;
        }

        for (var subkey in workflows) {
          if (tmpActionWorkflows[key].id === workflows[subkey]["id_"]) {
            console.log(tmpActionWorkflows[key].id, workflows[subkey]["id_"]);
            foundWorkflowIds.push(tmpActionWorkflows[key].id);
            tmpWorkflows.push(workflows[subkey]);
            break;
          }
        }
      }

      if (tmpWorkflows.length > 0) {
        setSelectedWorkflows(tmpWorkflows);
      }
    }
  });

  const hookPicture =
    Object.getOwnPropertyNames(webhookData).length > 0 &&
    webhookData.type === "webhook" ? (
      <img src={WebhookImage} alt="webhook" width="100px" height="100px" />
    ) : (
      <img src={KafkaImage} alt="MQ" width="100px" height="100px" />
    );

  const executeHook = (action) => {
    fetch(
      globalUrl + "/api/v1/hooks/" + props.match.params.key + "/" + action,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        credentials: "include",
      }
    )
      .then((response) => response.json())
      .then((responseJson) => {
        setWebhookData({});
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const headerPaperStyle = {
    display: "flex",
    maxHeight: "800px",
    minHeight: "800px",
    margin: "10px 30px 10px 10px",
    padding: "10px 5px 5px 5px",
    flexDirection: "column",
  };

  // FIXME - add with counter to change the correct one (not just edit)
  const addNewWorkflow = (event) => {
    // Verify if it already exists in the array. Returns if it exists
    for (var key in selectedWorkflows) {
      var item = selectedWorkflows[key];
      if (item["id_"] === event.target.value["id_"]) {
        return;
      }
    }

    // FIXME - make this possible for all accounts
    if (selectedWorkflows.length === 0) {
      console.log("ADD FIRST ITEM FOR SELECTEDWORKFLOWS");
      console.log(event.target.value);

      // Cleanup previous actions
      var newActions = [];
      if (webhookData.actions.length > 0) {
        for (key in webhookData.actions) {
          if (
            webhookData.actions[key].type === "" ||
            webhookData.actions[key].type === undefined
          ) {
            continue;
          }

          newActions.push(webhookData.actions[key]);
        }
      }

      // FIXME - how to stringify this better hurr
      var formattedWorkflow = {
        type: "workflow",
        name: event.target.value.name,
        id: event.target.value.id_,
        field: "",
      };

      // FIXME: patch this n
      newActions.push(formattedWorkflow);
      console.log(newActions);

      webhookData.actions = newActions;
      setWebhook(webhookData);
    }

    var tmpSelectedWorkflows = [].concat(selectedWorkflows, [
      event.target.value,
    ]);
    setSelectedWorkflows(tmpSelectedWorkflows);
  };

  // FIXME
  // Create a list with + button
  // For each, choose the new workflow I wanna add
  // Current: JUST ONE
  const selectedWorkflowIds = selectedWorkflows.map((data) => {
    return data["id_"];
  });
  const availableWorkflows = workflows.filter(
    (data) => !selectedWorkflowIds.includes(data["id_"])
  );

  const WorkflowSelect = (counter) => {
    if (selectedWorkflows[counter.counter] === undefined) {
      return null;
    }

    console.log(selectedWorkflows[0]);
    console.log(selectedWorkflows[0]);
    console.log(selectedWorkflows[0]);
    console.log(selectedWorkflows[counter.counter]);
    console.log(selectedWorkflows[counter.counter].name);
    return (
      <div>
        Workflow select:
        <Select
          value={selectedWorkflows[counter.counter].name}
          onChange={(event) => {
            addNewWorkflow(event, counter.counter);
          }}
          displayEmpty
          name="workflow"
        >
          {availableWorkflows.map((data) => (
            <MenuItem key={data.name} value={data} name={data.name}>
              {data.name}
            </MenuItem>
          ))}
        </Select>
      </div>
    );
  };

  const extraWorkflow =
    workflows.length > 0 && availableWorkflows.length > 0 ? (
      <WorkflowSelect counter={selectedWorkflows.length} />
    ) : null;

  const multiWorkflowSelect =
    workflows.length > 0 && selectedWorkflows.length > 0 ? (
      <div>
        {selectedWorkflows.map((data, count) => (
          <WorkflowSelect key={count} counter={count} />
        ))}
        {extraWorkflow}
      </div>
    ) : (
      <WorkflowSelect counter={0} />
    );

  const headerInfo =
    Object.getOwnPropertyNames(webhookData).length > 0 ? (
      <div>
        <Paper style={headerPaperStyle}>
          <div style={{ display: "flex", flex: "1" }}>
            <div style={{ flex: "1" }}>{hookPicture}</div>
            <div
              style={{ display: "flex", flexDirection: "column", flex: "5" }}
            >
              <div style={{ flex: "1" }}>
                <h1>Name: {webhookData.info.name}</h1>
              </div>
            </div>
          </div>
          <div style={{ flex: "4" }}>
            Description: {webhookData.info.description}
            <div>Id: {webhookData.id}</div>
            <div>Url: {webhookData.info.url}</div>
            <div>Type: {webhookData.type}</div>
            <div>Status: {webhookData.status}</div>
            <div>
              CHOOSE ACTIONS:
              {multiWorkflowSelect}
            </div>
          </div>
          <Divider />
          <div style={{ flex: "1", display: "flex", flexDirection: "row" }}>
            <div style={{ flex: "1" }}>
              <Button
                disabled={
                  webhookData.running === true && webhookData.name !== ""
                }
                onClick={() => {
                  executeHook("start");
                }}
                style={{
                  left: "50%",
                  top: "50%",
                  transform: "translate(-50%, -50%)",
                }}
                variant="outlined"
                color="primary"
              >
                Start {webhookData.type}
              </Button>
            </div>
            <div style={{ flex: "1" }}>
              <Button
                disabled={webhookData.running === false}
                onClick={() => {
                  executeHook("stop");
                }}
                style={{
                  left: "50%",
                  top: "50%",
                  transform: "translate(-50%, -50%)",
                }}
                variant="outlined"
                color="primary"
              >
                Stop {webhookData.type}
              </Button>
            </div>
          </div>
        </Paper>
      </div>
    ) : null;

  // FIXME - needs refresh every time you add a new workflow
  const workflowdata =
    Object.getOwnPropertyNames(webhookData).length > 0 &&
    selectedWorkflows.length > 0 ? (
      <EditWorkflow
        globalUrl={globalUrl}
        inputworkflows={selectedWorkflows}
        inputname={webhookData.info.name}
        inputtype={webhookData.type}
      />
    ) : null;

  const loadedCheck = isLoaded ? (
    <div style={{ display: "flex", backgroundColor: "#f7f7f7" }}>
      <div style={{ flex: 1 }}>{workflowdata}</div>
      <div style={{ flex: 1 }}>{headerInfo}</div>
    </div>
  ) : (
    <div></div>
  );

  // FIXME: Use this for testing
  // <EditWorkflow globalUrl={globalUrl} inputname={"Helo?"} inputtype={"webhook"} /> : null
  return <div>{loadedCheck}</div>;
};

export default EditWebhook;