Organize directories

apps/metamigo-frontend/components/webhooks/WebhookCreate.tsx

@@ -0,0 +1,56 @@
+import {
+  SimpleForm,
+  FormDataConsumer,
+  TextInput,
+  Create,
+  ArrayInput,
+  SimpleFormIterator,
+  regex,
+  required,
+  CreateProps,
+} from "react-admin";
+import { BackendTypeInput, BackendIdInput, HttpMethodInput } from "./shared";
+/*
+
+
+        <ReferenceInput
+          label="Voice Line"
+          source="voiceLineId"
+          reference="voiceLines"
+          validate={[required()]}
+        >
+          <SelectInput optionText="number" />
+        </ReferenceInput>
+*/
+const WebhookCreate = (props: CreateProps) => {
+  return (
+    <Create {...props} title="Create Webhooks">
+      <SimpleForm>
+        <TextInput source="name" validate={[required()]} />
+        <BackendTypeInput />
+        <FormDataConsumer subscription={{ values: true }}>
+          {BackendIdInput}
+        </FormDataConsumer>
+        <TextInput
+          source="endpointUrl"
+          validate={[required(), regex(/^https?:\/\/[^/]+/, "validation.url")]}
+        />
+        <HttpMethodInput />
+        <ArrayInput source="headers">
+          <SimpleFormIterator>
+            <TextInput
+              source="header"
+              validate={[
+                required(),
+                regex(/^[\w-]+$/, "validation.headerName"),
+              ]}
+            />
+            <TextInput source="value" validate={[required()]} />
+          </SimpleFormIterator>
+        </ArrayInput>
+      </SimpleForm>
+    </Create>
+  );
+};
+
+export default WebhookCreate;

apps/metamigo-frontend/components/webhooks/WebhookEdit.tsx

@@ -0,0 +1,52 @@
+import {
+  SimpleForm,
+  TextInput,
+  Edit,
+  ArrayInput,
+  SimpleFormIterator,
+  regex,
+  required,
+  EditProps,
+  FormDataConsumer,
+} from "react-admin";
+import { BackendTypeInput, BackendIdInput, HttpMethodInput } from "./shared";
+
+const WebhookTitle = ({ record }) => {
+  let title = "";
+  if (record) title = record.name ? record.name : record.email;
+  return <span>Webhook {title}</span>;
+};
+
+const WebhookEdit = (props: EditProps) => {
+  return (
+    // @ts-expect-error: Missing props
+    <Edit title={<WebhookTitle />} {...props}>
+      <SimpleForm>
+        <TextInput source="name" validate={[required()]} />
+        <BackendTypeInput />
+        <FormDataConsumer subscription={{ values: true }}>
+          {BackendIdInput}
+        </FormDataConsumer>
+        <TextInput
+          source="endpointUrl"
+          validate={[required(), regex(/^https?:\/\/[^/]+/, "validation.url")]}
+        />
+        <HttpMethodInput />
+        <ArrayInput source="headers">
+          <SimpleFormIterator>
+            <TextInput
+              source="header"
+              validate={[
+                required(),
+                regex(/^[\w-]+$/, "validation.headerName"),
+              ]}
+            />
+            <TextInput source="value" validate={[required()]} />
+          </SimpleFormIterator>
+        </ArrayInput>
+      </SimpleForm>
+    </Edit>
+  );
+};
+
+export default WebhookEdit;

apps/metamigo-frontend/components/webhooks/WebhookList.tsx

@@ -0,0 +1,23 @@
+import {
+  List,
+  Datagrid,
+  DateField,
+  TextField,
+  ReferenceField,
+  ListProps,
+} from "react-admin";
+import { BackendIdField } from "./shared";
+
+const WebhookList = (props: ListProps) => (
+  <List {...props} exporter={false}>
+    <Datagrid rowClick="edit">
+      <TextField source="name" />
+      <TextField source="backendType" />
+      <BackendIdField source="backendId" />
+      <DateField source="createdAt" />
+      <DateField source="updatedAt" />
+    </Datagrid>
+  </List>
+);
+
+export default WebhookList;

apps/metamigo-frontend/components/webhooks/index.ts

@@ -0,0 +1,12 @@
+import WebhookIcon from "@material-ui/icons/Send";
+import WebhookList from "./WebhookList";
+import WebhookEdit from "./WebhookEdit";
+import WebhookCreate from "./WebhookCreate";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  list: WebhookList,
+  create: WebhookCreate,
+  edit: WebhookEdit,
+  icon: WebhookIcon,
+};

apps/metamigo-frontend/components/webhooks/shared.tsx

@@ -0,0 +1,68 @@
+import { SelectInput, required } from "react-admin";
+
+import {
+  VoiceLineField,
+  VoiceLineSelectInput,
+} from "../voice/voicelines/shared";
+import {
+  WhatsAppBotField,
+  WhatsAppBotSelectInput,
+} from "../whatsapp/bots/shared";
+import { SignalBotField, SignalBotSelectInput } from "../signal/bots/shared";
+
+const httpChoices = [
+  { id: "post", name: "POST" },
+  { id: "put", name: "PUT" },
+];
+export const HttpMethodInput = (props) => (
+  <SelectInput
+    source="httpMethod"
+    choices={httpChoices}
+    validate={[required()]}
+    initialValue="post"
+    {...props}
+  />
+);
+
+const backendChoices = [
+  { id: "signal", name: "Signal" },
+  { id: "whatsapp", name: "WhatsApp" },
+  { id: "voice", name: "Voice" },
+];
+
+const backendInputComponents = {
+  whatsapp: WhatsAppBotSelectInput("backendId"),
+  signal: SignalBotSelectInput("backendId"),
+  voice: VoiceLineSelectInput("backendId"),
+};
+
+const backendFieldComponents = {
+  whatsapp: WhatsAppBotField("backendId"),
+  signal: SignalBotField("backendId"),
+  voice: VoiceLineField("backendId"),
+};
+
+export const BackendTypeInput = (props) => (
+  <SelectInput
+    source="backendType"
+    choices={backendChoices}
+    validate={[required()]}
+    {...props}
+  />
+);
+
+export const BackendIdInput = (form, ...rest) => {
+  const Component = form.formData.backendType
+    ? backendInputComponents[form.formData.backendType]
+    : false;
+  return <>{Component && <Component form={form} {...rest} />}</>;
+};
+
+export const BackendIdField = (form, ...rest) => {
+  console.log(form);
+
+  const Component = form.record.backendType
+    ? backendFieldComponents[form.record.backendType]
+    : false;
+  return <>{Component && <Component form={form} {...rest} />}</>;
+};