Bridge integration

apps/link/app/(main)/overview/[overview]/_components/TicketCreateDialog.tsx

@@ -1,17 +1,11 @@
 "use client";
 
-import { FC, useState } from "react";
-import {
-  Grid,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  TextField,
-  Autocomplete,
-} from "@mui/material";
-import useSWR, { useSWRConfig } from "swr";
-import { createTicketMutation } from "app/_graphql/createTicketMutation";
+import { FC } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { Dialog, Button, TextField, Autocomplete } from "ui";
+import { createTicketAction } from "app/_actions/tickets";
+import useSWR from "swr";
 
 interface TicketCreateDialogProps {
   open: boolean;
@@ -22,133 +16,83 @@ export const TicketCreateDialog: FC<TicketCreateDialogProps> = ({
   open,
   closeDialog,
 }) => {
-  const [kind, setKind] = useState("note");
-  const [customerID, setCustomerID] = useState("");
-  const [groupID, setGroupID] = useState("");
-  const [ownerID, setOwnerID] = useState("");
-  const [priorityID, setPriorityID] = useState("");
-  const [stateID, setStateID] = useState("");
-  const [tags, setTags] = useState([]);
-  const [title, setTitle] = useState("");
-  const [body, setBody] = useState("");
-  const backgroundColor = "#1982FC";
-  const color = "white";
-  const { fetcher } = useSWRConfig();
-  const ticket = {
-    customerId: customerID,
-    groupId: groupID,
-    ownerId: ownerID,
-    priorityId: priorityID,
-    stateId: stateID,
-    tags,
-    title,
-    article: {
-      body,
-      type: kind,
-      internal: kind === "note",
+  const initialState = {
+    messages: [],
+    errors: [],
+    values: {
+      customerId: "",
+      groupId: "",
+      ownerId: "",
+      priorityId: "",
+      stateId: "",
+      tags: [],
+      title: "",
+      article: {
+        body: "",
+        type: "note",
+        internal: true,
+      },
     },
   };
-
+  const [formState, formAction] = useFormState(
+    createTicketAction,
+    initialState,
+  );
   const { data: users, error: usersError }: any = useSWR({
     url: "/api/v1/users",
     method: "GET",
   });
-
-  console.log({ users, usersError });
-
   const customers =
     users?.filter((user: any) => user.role_ids.includes(3)) ?? [];
   const formattedCustomers = customers.map((customer: any) => ({
     label: customer.login,
     id: `${customer.id}`,
   }));
-  const createTicket = async () => {
-    await fetcher({
-      document: createTicketMutation,
-      variables: {
-        input: {
-          ticket,
-        },
-      },
-    });
-    closeDialog();
-    setBody("");
-  };
 
   return (
-    <Dialog open={open} maxWidth="md" fullWidth>
-      <DialogContent>
-        <Grid container direction="column" spacing={2}>
-          <Grid item>
-            <TextField
-              label={"Title"}
-              fullWidth
-              value={title}
-              onChange={(e: any) => setTitle(e.target.value)}
-            />
-          </Grid>
-          <Grid item>
-            <Autocomplete
-              disablePortal
-              options={formattedCustomers}
-              value={customerID}
-              sx={{ width: 300 }}
-              onChange={(e: any) => setCustomerID(e.target.value.id)}
-              renderInput={(params) => (
-                <TextField {...params} label="Customer" />
-              )}
-            />
-          </Grid>
-          <Grid item>
-            <TextField
-              label={"Details"}
-              multiline
-              rows={10}
-              fullWidth
-              value={body}
-              onChange={(e: any) => setBody(e.target.value)}
-            />
-          </Grid>
-        </Grid>
-      </DialogContent>
-      <DialogActions sx={{ px: 3, pt: 0, pb: 3 }}>
+    <Dialog
+      title="Create Ticket"
+      open={open}
+      onClose={closeDialog}
+      formAction={formAction}
+      buttons={
         <Grid container justifyContent="space-between">
           <Grid item>
             <Button
-              sx={{
-                backgroundColor: "white",
-                color: "#666",
-                fontFamily: "Poppins, sans-serif",
-                fontWeight: 700,
-                borderRadius: 2,
-                textTransform: "none",
-              }}
+              text="Cancel"
+              kind="secondary"
               onClick={() => {
-                setBody("");
                 closeDialog();
               }}
-            >
-              Cancel
-            </Button>
+            />
           </Grid>
           <Grid item>
-            <Button
-              sx={{
-                backgroundColor,
-                color,
-                fontFamily: "Poppins, sans-serif",
-                fontWeight: 700,
-                borderRadius: 2,
-                textTransform: "none",
-                px: 3,
-              }}
-              onClick={createTicket}
-            >
-              Create Ticket
-            </Button>
+            <Button text="Save" type="submit" kind="primary" />
           </Grid>
         </Grid>
-      </DialogActions>
+      }
+    >
+      <Grid container direction="column" spacing={3}>
+        <Grid item>
+          <Autocomplete
+            name="customerId"
+            label="Customer"
+            options={formattedCustomers}
+            formState={formState}
+          />
+        </Grid>
+        <Grid item>
+          <TextField name="title" label="Title" formState={formState} />
+        </Grid>
+        <Grid item>
+          <TextField
+            name="details"
+            label="Details"
+            lines={10}
+            formState={formState}
+          />
+        </Grid>
+      </Grid>
     </Dialog>
   );
 };