fix: 🐛 Correção na aparição do toast na tela de abrir chamado

welllucky · Mar 15, 2024 · b2e61fa · b2e61fa
1 parent cc19ed8
commit b2e61fa
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 54 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -40,7 +40,8 @@
     "implicit-arrow-linebreak": "off",
     "operator-linebreak": "off",
     "function-paren-newline": "off",
-    "no-extra-boolean-cast": "off"
+    "no-extra-boolean-cast": "off",
+    "react/jsx-one-expression-per-line": "off"
     // "import/no-cycle": [2, { "ignoreExternal": true }]
   }
 }
diff --git a/src/components/Headers/Header/index.tsx b/src/components/Headers/Header/index.tsx
@@ -4,6 +4,9 @@ import { useMemo } from "react";
 import { Row, SubTitleComponent, TitleComponent } from "@/styles";
 import Image from "next/image";
 import { buildTestIds } from "@/utils/functions";
+import { SS_KEY_USER_PREVIOUS_PAGE } from "@/utils";
+import { usePathname, useRouter } from "next/navigation";
+
 import Logo from "../../../../public/android/android-launchericon-512-512.png";
 import {
   UserName,
@@ -35,18 +38,19 @@ export function Header({
           : "Boa madrugada";
   }, []);
 
+  const { push } = useRouter();
+  const actualPage = usePathname();
+
   return (
     <HeaderHome {...buildTestIds("header-home-container")}>
       <FirstSection
         {...buildTestIds("header-first-section")}
-        $gap="1.2rem"
-      >
+        $gap="1.2rem">
         <Row
           {...buildTestIds("header-corp-logo-container")}
           width="fit-content"
           height="fit-content"
-          $isSmallClientMobile={false}
-        >
+          $isSmallClientMobile={false}>
           <Image
             {...buildTestIds("header-corp-logo-image")}
             width={48}
@@ -58,10 +62,7 @@ export function Header({
         <Row $isSmallClientMobile={false}>
           <UserName $isSmallClientMobile={false}>
             <TitleComponent $isSmallClientMobile={false}>
-              {greetingMessage}
-              ,
-              {userName}
-              !
+              {greetingMessage},{userName}!
             </TitleComponent>
           </UserName>
         </Row>
@@ -74,7 +75,10 @@ export function Header({
             </SubTitleComponent>
             {issueQuantify && issueQuantify > 4 ? (
               <IconButton
-                path="/abrir-chamado"
+                onClick={() => {
+                  sessionStorage.setItem(SS_KEY_USER_PREVIOUS_PAGE, actualPage);
+                  push("/abrir-chamado");
+                }}
                 icon={addButtonAlt}
               />
             ) : null}

diff --git a/src/screens/abrir-chamado/confirmar-chamado/index.tsx b/src/screens/abrir-chamado/confirmar-chamado/index.tsx
@@ -2,10 +2,15 @@
 
 import { CustomFieldset } from "@/components/Fieldset";
 import { useTheme } from "styled-components";
-import { LS_KEY_1_TICKET_RECORD, useModalStore } from "@/utils";
+import {
+  LS_KEY_1_TICKET_RECORD,
+  SS_KEY_USER_PREVIOUS_PAGE,
+  useModalStore,
+} from "@/utils";
 import { IOpenTicketForm } from "@/app/(app)/(form)/template";
 import { buildTestIds, dataFormatter } from "@/utils/functions";
 import { ConfirmModal } from "@/components";
+import { useEffect } from "react";
 import { ConfirmDetailsContainer, SectionInfoForm } from "./styles";
 
 export function ConfirmDetailsPage() {
@@ -16,6 +21,13 @@ export function ConfirmDetailsPage() {
   const isModalOpen = useModalStore((state) => state.isOpen);
   const modalCallback = useModalStore((state) => state.modalCallback);
 
+  useEffect(
+    () => () => {
+      sessionStorage.setItem(SS_KEY_USER_PREVIOUS_PAGE, "form");
+    },
+    [],
+  );
+
   return (
     <>
       <ConfirmModal
@@ -29,15 +41,13 @@ export function ConfirmDetailsPage() {
       />
       <ConfirmDetailsContainer
         {...buildTestIds("confirm-details-container")}
-        $gap="16px"
-      >
+        $gap="16px">
         <SectionInfoForm {...buildTestIds("section-info-form")}>
           <CustomFieldset
             color={theme.colors.primary.default}
             labelText="Resumo"
             width="100%"
-            height="64px"
-          >
+            height="64px">
             {ticketData?.resumo}
           </CustomFieldset>
         </SectionInfoForm>
@@ -46,16 +56,14 @@ export function ConfirmDetailsPage() {
             color={theme.colors.primary.default}
             labelText="Tipo"
             width="48%"
-            height="64px"
-          >
+            height="64px">
             {ticketData?.tipo}
           </CustomFieldset>
           <CustomFieldset
             color={theme.colors.primary.default}
             labelText="Prioridade"
             width="48%"
-            height="64px"
-          >
+            height="64px">
             {ticketData?.prioridade}
           </CustomFieldset>
         </SectionInfoForm>
@@ -64,8 +72,7 @@ export function ConfirmDetailsPage() {
             color={theme.colors.primary.default}
             labelText="Data do ocorrido"
             width="100%"
-            height="64px"
-          >
+            height="64px">
             {dataFormatter(ticketData?.data)}
           </CustomFieldset>
         </SectionInfoForm>
@@ -75,8 +82,7 @@ export function ConfirmDetailsPage() {
             labelText="Descrição"
             width="100%"
             height="240px"
-            $hasOverflow
-          >
+            $hasOverflow>
             {ticketData?.descricao}
           </CustomFieldset>
         </SectionInfoForm>

diff --git a/src/screens/abrir-chamado/index.tsx b/src/screens/abrir-chamado/index.tsx
@@ -6,7 +6,7 @@ import { useEffect } from "react";
 import toast from "react-hot-toast";
 import {
   LS_KEY_1_TICKET_RECORD,
-  SS_KEY_DATA_WAS_RECOVERY,
+  SS_KEY_USER_PREVIOUS_PAGE,
 } from "@/utils/alias";
 import { IOpenTicketForm } from "@/app/(app)/(form)/template";
 import { IssuePageContent } from "./styles";
@@ -22,7 +22,9 @@ function CreateTicketPage() {
 
   useEffect(() => {
     const data = localStorage.getItem(LS_KEY_1_TICKET_RECORD);
-    const isDataRecovered = sessionStorage.getItem(SS_KEY_DATA_WAS_RECOVERY) === "true";
+    const isFromOutsideForm =
+      (sessionStorage.getItem(SS_KEY_USER_PREVIOUS_PAGE) as string) !== "form";
+
     if (data) {
       const parsedData: IOpenTicketForm = JSON.parse(data);
       setValue("resumo", parsedData.resumo, { shouldValidate: true });
@@ -31,8 +33,7 @@ function CreateTicketPage() {
       setValue("tipo", parsedData.tipo, { shouldValidate: true });
       setValue("prioridade", parsedData.prioridade, { shouldValidate: true });
       // eslint-disable-next-line no-unused-expressions
-      !isDataRecovered && toast.success("Dados recuperados com sucesso!");
-      sessionStorage.setItem(SS_KEY_DATA_WAS_RECOVERY, "true");
+      isFromOutsideForm && toast.success("Dados recuperados com sucesso!");
     }
   }, []);
 
@@ -43,7 +44,7 @@ function CreateTicketPage() {
         JSON.stringify({ ...getValues() }),
       );
     }
-  }, [isValid, isValidating]);
+  }, [getValues, isValid, isValidating]);
 
   const resumeWatch = watch("resumo", "");
   const dataWatch = watch("data", "");
@@ -52,7 +53,9 @@ function CreateTicketPage() {
   const priorityWatch = watch("prioridade", "baixa");
 
   return (
-    <IssuePageContent id="first-step-form" as="form">
+    <IssuePageContent
+      id="first-step-form"
+      as="form">
       <OutlinedInput
         id="resumo"
         type="text"
@@ -98,7 +101,8 @@ function CreateTicketPage() {
         register={register}
         registerOptions={{
           required: "É necessário escolher o tipo do chamado",
-          validate: (value) => value !== "" || "É necessário escolher o tipo do chamado",
+          validate: (value) =>
+            value !== "" || "É necessário escolher o tipo do chamado",
         }}
         $status={
           errors?.tipo
@@ -172,7 +176,8 @@ function CreateTicketPage() {
         register={register}
         registerOptions={{
           required: "É necessário escolher a prioridade do chamado",
-          validate: (value) => value !== "" || "É necessário escolher a prioridade do chamado",
+          validate: (value) =>
+            value !== "" || "É necessário escolher a prioridade do chamado",
         }}
         $status={
           errors?.prioridade

diff --git a/src/screens/home/index.tsx b/src/screens/home/index.tsx
@@ -1,12 +1,10 @@
 "use client";
 
 import { AddNewIssueButton } from "@/components/common/Buttons";
-import {
-  IssueDisplay, Loading, Header, NoContent,
-} from "@/components/";
+import { IssueDisplay, Loading, Header, NoContent } from "@/components/";
 import { PageContainer } from "@/styles";
 import { useTheme } from "styled-components";
-import { chamado, dataFormatter } from "@/utils";
+import { SS_KEY_USER_PREVIOUS_PAGE, chamado, dataFormatter } from "@/utils";
 import { useRouter } from "next/navigation";
 import { MainContainer } from "../pesquisa/styles";
 import { ButtonWrapper } from "./styles";
@@ -37,7 +35,7 @@ function Homepage() {
                     nome={issue?.description}
                     date={dataFormatter(issue?.date)}
                     $status="Registrado"
-                    isUpdated={false}
+                    isUpdated={false}
                   />
                 ))
               ) : (
@@ -52,7 +50,10 @@ function Homepage() {
               {issuesQuantity < 5 ? (
                 <AddNewIssueButton
                   styles={{ hasShadow: true }}
-                  onClick={() => push("/abrir-chamado")}
+                  onClick={() => {
+                    sessionStorage.setItem(SS_KEY_USER_PREVIOUS_PAGE, "home");
+                    push("/abrir-chamado");
+                  }}
                 />
               ) : null}
             </ButtonWrapper>

diff --git a/src/utils/alias/index.ts b/src/utils/alias/index.ts
@@ -1,8 +1,8 @@
 export const LS_KEY_1_TICKET_RECORD = "@services:ticket:beingRegistered:1";
 export const LS_KEY_2_TICKET_RECORD = "@services:ticket:beingRegistered:2";
 export const LS_KEY_3_TICKET_RECORD = "@services:ticket:beingRegistered:3";
-export const SS_KEY_DATA_WAS_RECOVERY = "@services:ticket:wasRecovery";
+export const SS_KEY_USER_PREVIOUS_PAGE = "@services:user:previous:page";
 export const CS_KEY_USER_DEVICE_TYPE = "@services:user:device:type";
 export const CS_KEY_USER_RELIABLE_AGENT = "@services:user:reliable:agent";
 export const HD_KEY_USER_RELIABLE_AGENT = "x-reliable-agent";
-export const HD_KEY_USER_DEVICE_TYPE = "x-user-device-type";
+export const HD_KEY_USER_DEVICE_TYPE = "x-user-device-type";
diff --git a/src/utils/functions/resetForm/index.tsx b/src/utils/functions/resetForm/index.tsx
@@ -1,15 +1,13 @@
-import {
-  LS_KEY_1_TICKET_RECORD,
-  LS_KEY_2_TICKET_RECORD,
-  LS_KEY_3_TICKET_RECORD,
-  SS_KEY_DATA_WAS_RECOVERY,
-} from "@/utils";
-
-const resetForm = () => {
-  localStorage.removeItem(LS_KEY_1_TICKET_RECORD);
-  localStorage.removeItem(LS_KEY_2_TICKET_RECORD);
-  localStorage.removeItem(LS_KEY_3_TICKET_RECORD);
-  sessionStorage.removeItem(SS_KEY_DATA_WAS_RECOVERY);
-};
-
-export { resetForm };
+import {
+  LS_KEY_1_TICKET_RECORD,
+  LS_KEY_2_TICKET_RECORD,
+  LS_KEY_3_TICKET_RECORD,
+} from "@/utils";
+
+const resetForm = () => {
+  localStorage.removeItem(LS_KEY_1_TICKET_RECORD);
+  localStorage.removeItem(LS_KEY_2_TICKET_RECORD);
+  localStorage.removeItem(LS_KEY_3_TICKET_RECORD);
+};
+
+export { resetForm };