Refactor Chamado list

next.config.js

@@ -17,6 +17,14 @@ const nextConfig = (phase, { defaultConfig }) => ({
         permanent: false
       }
     ]
+  },
+  async rewrites() {
+    return [
+      {
+        source: "/eventos",
+        destination: "/chamados?is_event=true"
+      }
+    ]
   }
   //   typescript: {
   //     // !! WARN !!

src/components/ChamadoItem/index.tsx

@@ -0,0 +1,142 @@
+import { useMemo } from "react"
+import {
+  Badge,
+  Box,
+  HStack,
+  Skeleton,
+  Spacer,
+  Tag,
+  Text
+} from "@chakra-ui/react"
+
+import { EditButton } from "@components/ActionButtons/EditButton"
+import { Item } from "@components/ListItem"
+import { ChamadoPriority, priorityColorMap } from "@constants/Chamados"
+import { useRequest } from "@hooks/useRequest"
+import { getCityById } from "@services/Cidades"
+import { getWorkstationById } from "@services/Workstation"
+import { formatDate } from "@utils/formatDate"
+
+interface ChamadoItemProps {
+  chamado: Chamado
+  handleEdit: (chamado: Chamado) => void
+}
+
+export const ChamadoItem = ({ chamado, handleEdit }: ChamadoItemProps) => {
+  const isEvent = useMemo(
+    () => chamado?.problems?.some((item) => item?.is_event),
+    [chamado?.problems]
+  )
+
+  const { data: city, isLoading: isLoadingCity } = useRequest<City>(
+    getCityById(chamado?.city_id),
+    {
+      revalidateIfStale: false
+    }
+  )
+
+  const { data: workstation, isLoading: isLoadingWorkstation } =
+    useRequest<Workstation>(getWorkstationById(chamado?.workstation_id), {
+      revalidateIfStale: false
+    })
+
+  return (
+    <Box>
+      <HStack spacing={2}>
+        {chamado.problems.map((problem, index) => (
+          <Badge
+            colorScheme={priorityColorMap(problem.priority)}
+            variant={
+              {
+                low: "outline",
+                normal: "outline",
+                high: "subtle",
+                urgent: "solid"
+              }[problem.priority]
+            }
+            key={index}
+          >
+            {ChamadoPriority[problem.priority]}
+          </Badge>
+        ))}
+        <Spacer />
+        {isEvent && (
+          <Text>
+            Agendado para {formatDate(new Date())} as{" "}
+            {formatDate(new Date(), "time")}
+          </Text>
+        )}
+      </HStack>
+      <Item
+        title={
+          <>
+            <HStack spacing={6}>
+              <Box>
+                <Text fontSize="sm" fontWeight="light" color="GrayText">
+                  Solicitante
+                </Text>
+                <Text noOfLines={1}>{chamado?.applicant_name}</Text>
+              </Box>
+              <Box>
+                <Text fontSize="sm" fontWeight="light" color="GrayText">
+                  Posto de Trabalho
+                </Text>
+                <Skeleton isLoaded={!isLoadingWorkstation}>
+                  <Text noOfLines={1}>{workstation?.data?.name}</Text>
+                </Skeleton>
+              </Box>
+              <Box>
+                <Text fontSize="sm" fontWeight="light" color="GrayText">
+                  Local
+                </Text>
+                <Skeleton isLoaded={!isLoadingCity}>
+                  <Text noOfLines={1}>{city?.data?.name}</Text>
+                </Skeleton>
+              </Box>
+              <Box>
+                <Text fontSize="sm" fontWeight="light" color="GrayText">
+                  Atendente
+                </Text>
+                <Text noOfLines={1}>{chamado?.attendant_name}</Text>
+              </Box>
+              <Box>
+                <Text fontSize="sm" fontWeight="light" color="GrayText">
+                  Data / Hora
+                </Text>
+                <Box textAlign="center" fontWeight="medium">
+                  <Text>
+                    {formatDate(chamado?.created_at, "date")}{" "}
+                    {formatDate(chamado?.created_at, "time")}
+                  </Text>
+                </Box>
+              </Box>
+            </HStack>
+          </>
+        }
+        description={
+          <Box>
+            <HStack gap={4} mt={2} flexWrap="wrap">
+              {chamado?.problems.map((problem) => (
+                <HStack align="start" spacing={1} key={problem?.problem_id}>
+                  <Tag variant="subtle" colorScheme="gray">
+                    {problem?.category?.name}
+                  </Tag>
+                  <Tag variant="subtle" colorScheme="purple">
+                    {problem?.problem?.name}
+                  </Tag>
+                </HStack>
+              ))}
+            </HStack>
+          </Box>
+        }
+      >
+        <Item.Actions item={chamado}>
+          <EditButton
+            onClick={handleEdit}
+            label={isEvent ? "Evento" : "Chamado"}
+          />
+        </Item.Actions>
+      </Item>
+    </Box>
+  )
+}

src/components/Forms/ChamadoForm/ChamadoFormWrapper.tsx

@@ -34,7 +34,7 @@ import { request } from "@services/request"
 import { getWorkstations, updateWorkstation } from "@services/Workstation"
 import { getSelectOptions } from "@utils/getSelectOptions"
 
-interface ChamadoFormProps {
+export interface ChamadoFormProps {
   onSubmit: SubmitHandler<ChamadoFormValues>
   defaultValues?: ChamadoFormValues
 }

src/components/Modals/ChamadoModal.tsx

@@ -0,0 +1,65 @@
+import { useCallback, useMemo } from "react"
+
+import { ChamadoFormWrapper } from "@components/Forms/ChamadoForm/ChamadoFormWrapper"
+import {
+  chamadoToFormValues,
+  formValuesToPayload
+} from "@components/Forms/ChamadoForm/helpers"
+import { Modal } from "@components/Modal/Modal"
+import { updateChamado } from "@services/Chamados"
+import { request } from "@services/request"
+
+interface ChamadoModalProps {
+  chamado?: Chamado | undefined
+  onEdit: (result: Result<ApiResponse<Chamado>>) => void
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const ChamadoModal = ({
+  chamado,
+  onEdit,
+  isOpen,
+  onClose
+}: ChamadoModalProps) => {
+  const isEvent = useMemo(
+    () => chamado?.problems?.some((item) => item?.is_event),
+    [chamado?.problems]
+  )
+
+  const onSubmit = useCallback(
+    async (data: ChamadoFormValues) => {
+      if (!chamado?.id) return
+
+      const payload = formValuesToPayload(data)
+      console.log("payload", payload)
+
+      const response = await request<Chamado>(
+        updateChamado(chamado?.id)(payload)
+      )
+
+      onEdit?.(response)
+      onClose()
+
+      if (response.type === "error") {
+        // Let hook form know that submit was not successful
+        return Promise.reject(response.error.message)
+      }
+    },
+    [chamado?.id, onClose, onEdit]
+  )
+
+  return (
+    <Modal
+      title={`Editar ${isEvent ? "Evento" : "Chamado"}`}
+      isOpen={isOpen}
+      onClose={onClose}
+      size="6xl"
+    >
+      <ChamadoFormWrapper
+        defaultValues={chamado && chamadoToFormValues(chamado)}
+        onSubmit={onSubmit}
+      />
+    </Modal>
+  )
+}

src/constants/Chamados/index.tsx

@@ -1,3 +1,5 @@
+import type { ThemingProps } from "@chakra-ui/react"
+
 export enum ChamadoStatus {
   "pending" = "Pendente",
   "in_progress" = "Em andamento",
@@ -34,3 +36,24 @@ export const statusColor = (status: keyof typeof ChamadoStatus | undefined) => {
       return "red"
   }
 }
+
+export const priorityColorMap = (
+  priority: keyof typeof ChamadoPriority | undefined
+): ThemingProps["colorScheme"] => {
+  switch (priority) {
+    case "low":
+      return "blackAlpha"
+
+    case "normal":
+      return "gray"
+
+    case "high":
+      return "yellow"
+
+    case "urgent":
+      return "red"
+
+    default:
+      return "white"
+  }
+}