Use server actions instead of client-side API calls

apps/link/app/(main)/tickets/[id]/@edit/_components/TicketEdit.tsx

@@ -5,57 +5,87 @@ import { Grid, Box, MenuItem } from "@mui/material";
 import { useFormState } from "react-dom";
 import { Select, Button } from "@link-stack/ui";
 import { MuiChipsInput } from "mui-chips-input";
-import useSWR, { useSWRConfig } from "swr";
 import { getTicketQuery } from "app/_graphql/getTicketQuery";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import { updateTicketAction } from "app/_actions/tickets";
+import {
+  updateTicketAction,
+  getTicketAction,
+  getTicketStatesAction,
+  getTicketPrioritiesAction,
+  getTicketTagsAction,
+} from "app/_actions/tickets";
+import { getAgentsAction } from "app/_actions/users";
+import { getGroupsAction } from "app/_actions/groups";
 
 interface TicketEditProps {
   id: string;
 }
 
 export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
+  const [ticket, setTicket] = useState<any>();
+  const [ticketStates, setTicketStates] = useState<any>();
+  const [ticketPriorities, setTicketPriorities] = useState<any>();
+  const [groups, setGroups] = useState<any>();
+  const [tags, setTags] = useState<any>();
+  const [agents, setAgents] = useState<any>();
   const selectedTags = [];
   const pendingVisible = false;
   const pendingDate = new Date();
   const handleDelete = () => {
     console.info("You clicked the delete icon.");
   };
-  const restFetcher = (url: string) => fetch(url).then((r) => r.json());
 
-  const { data: groups } = useSWR("/api/v1/groups", restFetcher);
-  const { data: users } = useSWR("/api/v1/users", restFetcher);
-  const { data: states } = useSWR("/api/v1/ticket_states", restFetcher);
-  const { data: priorities } = useSWR("/api/v1/ticket_priorities", restFetcher);
-  const { data: recent } = useSWR("/api/v1/recent_view", restFetcher);
-
-  // const { data: tags } = useSWR("/api/v1/tags", restFetcher);
-  const filteredStates = states?.filter(
+  const filteredStates = ticketStates?.filter(
     (state: any) => !["new", "merged", "removed"].includes(state.name),
   );
-  const agents = users?.filter((user: any) => user.role_ids.includes(2)) ?? [];
-  const { fetcher } = useSWRConfig();
-  const { data: ticketData, error: ticketError }: any = useSWR(
-    {
-      document: getTicketQuery,
-      variables: { ticketId: `gid://zammad/Ticket/${id}` },
-    },
-    { refreshInterval: 10000 },
-  );
+
   useEffect(() => {
-    const ticket = ticketData?.ticket;
-    if (ticket) {
-      const groupID = ticket.group.id?.split("/").pop();
-      //      setSelectedGroup(groupID);
-      const ownerID = ticket.owner.id?.split("/").pop();
-      //      setSelectedOwner(ownerID);
-      const priorityID = ticket.priority.id?.split("/").pop();
-      //      setSelectedPriority(priorityID);
-      const stateID = ticket.state.id?.split("/").pop();
-      //      setSelectedState(stateID);
-      //      setSelectedTags(ticket.tags);
-    }
-  }, [ticketData, ticketError]);
+    const fetchAgents = async () => {
+      const result = await getAgentsAction();
+      console.log({ result });
+      setAgents(result);
+    };
+
+    const fetchGroups = async () => {
+      const result = await getGroupsAction();
+      console.log({ result });
+      setGroups(result);
+    };
+
+    const fetchTicketStates = async () => {
+      const result = await getTicketStatesAction();
+      console.log({ result });
+      setTicketStates(result);
+    };
+
+    const fetchTicketPriorities = async () => {
+      const result = await getTicketPrioritiesAction();
+      console.log({ result });
+      setTicketPriorities(result);
+    };
+
+    const fetchTicketTags = async () => {
+      const result = await getTicketTagsAction();
+      console.log({ result });
+      setTags(result);
+    };
+
+    fetchTicketStates();
+    fetchTicketPriorities();
+    fetchTicketTags();
+    fetchAgents();
+    fetchGroups();
+  }, []);
+
+  useEffect(() => {
+    const fetchTicket = async () => {
+      const result = await getTicketAction(id);
+      console.log({ result });
+      setTicket(result);
+    };
+
+    fetchTicket();
+  }, []);
 
   /*
   useEffect(() => {
@@ -97,10 +127,10 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
     errors: [],
     values: {
       customer: "",
-      group: "",
-      owner: "",
-      priority: "",
-      state: "",
+      group: ticket.group.id?.split("/").pop(),
+      owner: ticket.owner.id?.split("/").pop(),
+      priority: ticket.priority.id?.split("/").pop(),
+      state: ticket.state.id?.split("/").pop(),
       tags: [],
       title: "",
       article: {
@@ -114,7 +144,7 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
     updateTicketAction,
     initialState,
   );
-  const shouldRender = ticketData && !ticketError;
+  const shouldRender = !!ticket;
 
   return (
     shouldRender && (
@@ -220,7 +250,7 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
                 label="Priority"
                 formState={formState}
                 getOptions={() =>
-                  priorities?.map((priority: any) => ({
+                  ticketPriorities?.map((priority: any) => ({
                     value: priority.id,
                     label: priority.name,
                   })) ?? []