Move packages/apps back

apps/metamigo-frontend/components/whatsapp/bots/WhatsappBotCreate.tsx

@@ -0,0 +1,38 @@
+// import dynamic from "next/dynamic";
+import { SimpleForm, Create, TextInput, required } from "react-admin";
+import { useSession } from "next-auth/react";
+import { validateE164Number } from "../../../lib/phone-numbers";
+
+const WhatsappBotCreate = (props) => {
+  // const MuiPhoneNumber = dynamic(() => import("material-ui-phone-number"), {
+  //   ssr: false,
+  // });
+
+  const { data: session } = useSession();
+
+  return (
+    <Create {...props} title="Create Whatsapp Bot" redirect="show">
+      <SimpleForm>
+        <TextInput
+          source="userId"
+          defaultValue={
+            // @ts-expect-error: non-existent property
+            session.user.id
+          }
+        />
+        <TextInput
+          source="phoneNumber"
+          validate={[validateE164Number, required()]}
+        />
+        {/* <MuiPhoneNumber
+          defaultCountry={"us"}
+          fullWidth
+          onChange={(e: any) => setFieldValue("phoneNumber", e)}
+        /> */}
+        <TextInput source="description" />
+      </SimpleForm>
+    </Create>
+  );
+};
+
+export default WhatsappBotCreate;

apps/metamigo-frontend/components/whatsapp/bots/WhatsappBotEdit.tsx

@@ -0,0 +1,12 @@
+import { SimpleForm, Edit, TextInput, required, EditProps } from "react-admin";
+
+const WhatsappBotEdit = (props: EditProps) => (
+  <Edit {...props} title="Edit Bot">
+    <SimpleForm>
+      <TextInput source="phoneNumber" validate={[required()]} />
+      <TextInput source="description" />
+    </SimpleForm>
+  </Edit>
+);
+
+export default WhatsappBotEdit;

apps/metamigo-frontend/components/whatsapp/bots/WhatsappBotList.tsx

@@ -0,0 +1,22 @@
+import {
+  List,
+  Datagrid,
+  DateField,
+  TextField,
+  BooleanField,
+} from "react-admin";
+
+const WhatsappBotList = (props) => (
+  <List {...props} exporter={false}>
+    <Datagrid rowClick="show">
+      <TextField source="phoneNumber" />
+      <TextField source="description" />
+      <BooleanField source="isVerified" />
+      <DateField source="createdAt" />
+      <DateField source="updatedAt" />
+      <TextField source="createdBy" />
+    </Datagrid>
+  </List>
+);
+
+export default WhatsappBotList;

apps/metamigo-frontend/components/whatsapp/bots/WhatsappBotShow.tsx

@@ -0,0 +1,177 @@
+import React, { useEffect, useState } from "react";
+import {
+  Card,
+  Typography,
+  Grid,
+  Button,
+  TextField as MaterialTextField,
+  IconButton,
+} from "@material-ui/core";
+import {
+  Show,
+  SimpleShowLayout,
+  TextField,
+  ShowProps,
+  useQuery,
+  useMutation,
+  useRefresh,
+  BooleanField,
+} from "react-admin";
+import QRCode from "react-qr-code";
+import useSWR from "swr";
+import RefreshIcon from "@material-ui/icons/Refresh";
+
+const Sidebar = ({ record }) => {
+  const [receivedMessages, setReceivedMessages] = useState([]);
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const handlePhoneNumberChange = (event: any) => {
+    setPhoneNumber(event.target.value);
+  };
+
+  const [message, setMessage] = useState("");
+  const handleMessageChange = (event: any) => {
+    setMessage(event.target.value);
+  };
+
+  const sendMessage = async (phoneNumber: string, message: string) => {
+    await fetch(`/api/v1/whatsapp/bots/${record.token}/send`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ phoneNumber, message }),
+    });
+  };
+
+  const receiveMessages = async () => {
+    const result = await fetch(`/api/v1/whatsapp/bots/${record.token}/receive`);
+    const msgs = await result.json();
+    console.log(msgs);
+    setReceivedMessages(msgs);
+  };
+
+  return (
+    <Card style={{ width: "33%", marginLeft: 20, padding: 14 }}>
+      <Grid container direction="column" spacing={2}>
+        <Grid item>
+          <Typography variant="h6">Send message</Typography>
+        </Grid>
+        <Grid item>
+          <MaterialTextField
+            variant="outlined"
+            label="Phone number"
+            fullWidth
+            size="small"
+            value={phoneNumber}
+            onChange={handlePhoneNumberChange}
+          />
+        </Grid>
+        <Grid item>
+          <MaterialTextField
+            variant="outlined"
+            label="Message"
+            multiline
+            rows={3}
+            fullWidth
+            size="small"
+            value={message}
+            onChange={handleMessageChange}
+          />
+        </Grid>
+        <Grid item container direction="row-reverse">
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => sendMessage(phoneNumber, message)}
+          >
+            Send
+          </Button>
+        </Grid>
+        <Grid item container direction="row">
+          <Grid item>
+            <Typography variant="h6">Receive messages</Typography>
+          </Grid>
+          <Grid item>
+            <IconButton
+              onClick={receiveMessages}
+              color="primary"
+              style={{ marginTop: -12 }}
+            >
+              <RefreshIcon />
+            </IconButton>
+          </Grid>
+        </Grid>
+        {receivedMessages.map((receivedMessage) => (
+          <Grid item container direction="column" spacing={1}>
+            <Grid item style={{ fontWeight: "bold", color: "#999" }}>
+              {receivedMessage.key.remoteJid.replace("@s.whatsapp.net", "")}
+            </Grid>
+            <Grid item style={{ borderBottom: "1px solid #999" }}>
+              {receivedMessage.message.conversation}
+            </Grid>
+          </Grid>
+        ))}
+      </Grid>
+    </Card>
+  );
+};
+
+const WhatsappBotShow = (props: ShowProps) => {
+  const refresh = useRefresh();
+  const { data } = useQuery({
+    type: "getOne",
+    resource: "whatsappBots",
+    payload: { id: props.id },
+  });
+  const [unverify] = useMutation({
+    type: "update",
+    resource: "whatsappBots",
+    payload: {
+      id: props.id,
+      data: { isVerified: false, qrCode: null, authInfo: null },
+    },
+  });
+
+  const { data: registerData, error: registerError } = useSWR(
+    data && !data?.isVerified
+      ? `/api/v1/whatsapp/bots/${props.id}/register`
+      : undefined,
+    { refreshInterval: 59000 }
+  );
+
+  console.log({ registerData, registerError });
+
+  useEffect(() => {
+    if (data && !data?.isVerified) {
+      const interval = setInterval(() => {
+        refresh();
+      }, 10000);
+      return () => clearInterval(interval);
+    }
+  }, [refresh, data]);
+
+  return (
+    // @ts-expect-error: Missing props
+    <Show {...props} title="Bot" aside={<Sidebar />}>
+      <SimpleShowLayout>
+        <TextField source="phoneNumber" />
+        <BooleanField source="isVerified" />
+        <Button
+          color="primary"
+          size="small"
+          style={{ color: "black", backgroundColor: "#ddd" }}
+          onClick={unverify}
+        >
+          Unverify
+        </Button>
+        <TextField source="description" />
+        <TextField source="token" />
+        {!data?.isVerified && data?.qrCode && data?.qrCode !== "" && (
+          <QRCode value={data.qrCode} />
+        )}
+      </SimpleShowLayout>
+    </Show>
+  );
+};
+
+export default WhatsappBotShow;

apps/metamigo-frontend/components/whatsapp/bots/index.ts

@@ -0,0 +1,14 @@
+import WhatsappBotIcon from "@material-ui/icons/WhatsApp";
+import WhatsappBotList from "./WhatsappBotList";
+import WhatsappBotEdit from "./WhatsappBotEdit";
+import WhatsappBotCreate from "./WhatsappBotCreate";
+import WhatsappBotShow from "./WhatsappBotShow";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  list: WhatsappBotList,
+  create: WhatsappBotCreate,
+  edit: WhatsappBotEdit,
+  show: WhatsappBotShow,
+  icon: WhatsappBotIcon,
+};

apps/metamigo-frontend/components/whatsapp/bots/shared.tsx

@@ -0,0 +1,24 @@
+import {
+  SelectInput,
+  required,
+  ReferenceInput,
+  ReferenceField,
+  TextField,
+} from "react-admin";
+
+export const WhatsAppBotSelectInput = (source: string) => () => (
+  <ReferenceInput
+    label="WhatsApp Bot"
+    reference="whatsappBots"
+    source={source}
+    validate={[required()]}
+  >
+    <SelectInput optionText="phoneNumber" />
+  </ReferenceInput>
+);
+
+export const WhatsAppBotField = (source: string) => () => (
+  <ReferenceField label="WhatsApp Bot" reference="whatsappBots" source={source}>
+    <TextField source="phoneNumber" />
+  </ReferenceField>
+);