webstudio/ui/src/features/create_trigger/presentation/create_trigger_screen.tsx

import * as React from "react";
import { Button, Col, Row, Switch, Typography, Input } from "antd";
import { CodeTriggerForm } from "./components/code_trigger_form";
import { observer } from "mobx-react-lite";
import { FileTriggerForm } from "./components/file_trigger_form";
import { ReactComponent as DeleteIcon } from "../../../core/assets/icons/delete.svg";
import { Loader } from "../../../core/ui/loader/loader";
import { TriggerRepository } from "../data/trigger_repository";
import { TriggerStore } from "./trigger_store";
import { TriggerViewModel } from "../model/trigger_form_view_model";
import { CallBackStringVoidFunction } from "../../../core/extensions/extensions";

const { Title } = Typography;

const Bottom = observer((props: { triggers: TriggerViewModel[]; callBack: CallBackStringVoidFunction }) => {
  return (
    <Col>
      {props.triggers.map((el) => {
        return (
          <Row
            style={{
              justifyContent: "center",
            }}
          >
            {el.value}
            <DeleteIcon onClick={() => props.callBack(el.id)} />
          </Row>
        );
      })}
    </Col>
  );
});
export const CreateTriggerScreenPath = "/create/trigger";

export const TriggerScreen: React.FunctionComponent = observer(() => {
  const [triggerStore] = React.useState(() => new TriggerStore(new TriggerRepository()));
  return (
    <>
      <main>
        {!triggerStore.isLoading ? (
          <>
            <Row style={{ justifyItems: "center", alignItems: "center" }}>
              <div style={{ height: "37px" }}>
                <Switch checked={triggerStore.getTriggerType()} onChange={() => triggerStore.setTriggerType()} />
              </div>
              <Title level={2}>Trigger editor: {triggerStore.getTriggerDescription()}</Title>
              <div style={{ width: "10px" }}></div>
              <Button onClick={() => triggerStore.saveResult()}>Save result</Button>
            </Row>
            <Input placeholder="trigger description" onChange={() => triggerStore.changeTriggerDescription} />
            {triggerStore.getTriggerType() ? (
              <>
                <FileTriggerForm pushTrigger={triggerStore.pushTrigger} />
              </>
            ) : (
              <>
                <CodeTriggerForm
                  codeTriggerValue={triggerStore.codeTriggerValue}
                  clearTriggerCode={triggerStore.clearTriggerCode}
                  saveCode={triggerStore.saveCode}
                  writeNewTrigger={triggerStore.writeNewTrigger}
                />
              </>
            )}
            <Bottom triggers={triggerStore.triggers} callBack={triggerStore.deleteItem} />
          </>
        ) : (
          <>
            <Loader />
          </>
        )}
      </main>
    </>
  );
});