Refactor: Component Modal

package.json

@@ -21,6 +21,7 @@
     "@apollo/client": "^3.7.12",
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-accordion": "^1.1.1",
+    "@radix-ui/react-alert-dialog": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",

src/components/Dropzone/Dropzone.tsx

@@ -1,6 +1,8 @@
 import { useMutation } from "@apollo/client";
 import Spinner from "@components/Spinner";
 import { useUser } from "@hooks/useUser";
+import { useModal } from "contexts/ModalContext";
+import { ModalActionTypes } from "contexts/types";
 import { useTheme } from "next-themes";
 import { Dispatch, SetStateAction } from "react";
 import { useDropzone } from "react-dropzone";
@@ -13,15 +15,17 @@ interface IDropzone {
   setIsModalOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-const Dropzone = ({ setIsModalOpen }: IDropzone) => {
+const Dropzone = () => {
   const [uploadImage, { loading }] = useMutation(UPDATE_USER_PHOTO, {
     refetchQueries: [GET_ME],
   });
   const { user, setUser } = useUser();
   const { theme } = useTheme();
 
+  const { openModal, closeModal } = useModal();
+
   const onDrop = async (acceptedFiles: File[]) => {
-    setIsModalOpen(false);
+    closeModal(ModalActionTypes.SETTINGS_MODAL);
     const [selectedFile] = acceptedFiles;
     Swal.fire({
       customClass: {
@@ -37,7 +41,7 @@ const Dropzone = ({ setIsModalOpen }: IDropzone) => {
       confirmButtonText: "Sim, mudar",
       cancelButtonText: "Cancelar",
     }).then(async (result) => {
-      setIsModalOpen(true);
+      openModal(ModalActionTypes.SETTINGS_MODAL);
       if (result.isConfirmed) {
         try {
           await uploadImage({

src/components/EditProfile/EditProfile.tsx

@@ -1,30 +1,31 @@
 import { useMutation } from "@apollo/client";
 import Button from "@components/Button/Button";
 import Input from "@components/Input";
-import Modal from "@components/Modal";
+
+import {
+  IEditProfileSubmitData,
+  editProfileFormSchema,
+} from "@components/EditProfile/EditProfile.form";
+import SelectLocation from "@components/LocationSelector/SelectLocation";
+import { Modal } from "@components/Modal/Modal";
+import SelectSkillsInput from "@components/MultiSelect/SelectSkillsInput";
 import Textarea from "@components/Textarea/Textarea";
+import { useFetch } from "@hooks/useFetch";
+import { Country, State } from "@hooks/useFetch.types";
+import { useTypedQuery } from "@hooks/useTypedQuery";
 import { useUser } from "@hooks/useUser";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "react-toastify";
 import { USER_UPDATE_DATA } from "services/apollo/mutations";
+import { GET_ME, GET_MENTORS } from "services/apollo/queries";
+import { queriesIndex as api } from "services/apollo/queries/queries.index";
+import { z } from "zod";
 import {
   EditProfileProps,
   IEditProfileFormData,
   ILocationInterface,
 } from "./EditProfile.types";
-import SelectLocation from "@components/LocationSelector/SelectLocation";
-import { Country, State } from "@hooks/useFetch.types";
-import { useFetch } from "@hooks/useFetch";
-import { GET_ME, GET_MENTORS } from "services/apollo/queries";
-import { SubmitHandler, useForm } from "react-hook-form";
-import SelectSkillsInput from "@components/MultiSelect/SelectSkillsInput";
-import { queriesIndex as api } from "services/apollo/queries/queries.index";
-import {
-  IEditProfileSubmitData,
-  editProfileFormSchema,
-} from "@components/EditProfile/EditProfile.form";
-import { z } from "zod";
-import { useTypedQuery } from "@hooks/useTypedQuery";
 
 const EditProfile = ({
   openEditProfile,
@@ -128,117 +129,119 @@ const EditProfile = ({
     };
 
   return (
-    <Modal open={openEditProfile} onOpenChange={setOpenEditProfile}>
-      <div className="max-xl:px-5 py-16 w-[300px] xs:w-[380px] sm:w-[600px] md:w-auto p-2 lg:px-20">
-        <form
-          className="max-md:w-auto md:w-[672px] text-start"
-          onSubmit={handleSubmit(submitHandler)}
-        >
-          <div className="flex flex-col md:flex-row gap-2 w-full">
-            <Input
-              type="text"
-              {...register("firstName")}
-              label="Nome"
-              pattern="^[A-Za-zÀ-ÿ ,.'-]+$"
-              defaultValue={userCurrent.firstName}
-            />
-            <Input
-              type="text"
-              {...register("lastName")}
-              label="Sobrenome"
-              pattern="^[A-Za-zÀ-ÿ ,.'-]+$"
-              defaultValue={userCurrent.lastName ?? ""}
-            />
-          </div>
-          <div className="flex flex-col gap-2">
-            <Input
-              type="text"
-              {...register("jobTitle")}
-              label="Profissão"
-              pattern="^[A-Za-zÀ-ÿ ,.'-]+$"
-              defaultValue={userCurrent.jobTitle ?? ""}
-            />
-            <Textarea
-              {...register("biography")}
-              label="Bio"
-              defaultValue={userCurrent.biography ?? ""}
-            />
-            <Textarea
-              {...register("description")}
-              label="Experiência"
-              defaultValue={userCurrent.description ?? ""}
-            />
-            <SelectLocation
-              onSelect={handleLocationChange(setSelectedCountry)}
-              name="country"
-              label="Pais"
-              requiredField={true}
-              options={countries}
-              placeholder="Selecione um Pais"
-              value={
-                selectedCountry || {
-                  label: userCurrent.country,
-                  value: userCurrent.country,
+    <Modal.Root open={openEditProfile} onOpenChange={setOpenEditProfile}>
+      <Modal.Content>
+        <div className="max-xl:px-5 py-16 w-[300px] xs:w-[380px] sm:w-[600px] md:w-auto p-2 lg:px-20">
+          <form
+            className="max-md:w-auto md:w-[672px] text-start"
+            onSubmit={handleSubmit(submitHandler)}
+          >
+            <div className="flex flex-col md:flex-row gap-2 w-full">
+              <Input
+                type="text"
+                {...register("firstName")}
+                label="Nome"
+                pattern="^[A-Za-zÀ-ÿ ,.'-]+$"
+                defaultValue={userCurrent.firstName}
+              />
+              <Input
+                type="text"
+                {...register("lastName")}
+                label="Sobrenome"
+                pattern="^[A-Za-zÀ-ÿ ,.'-]+$"
+                defaultValue={userCurrent.lastName ?? ""}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Input
+                type="text"
+                {...register("jobTitle")}
+                label="Profissão"
+                pattern="^[A-Za-zÀ-ÿ ,.'-]+$"
+                defaultValue={userCurrent.jobTitle ?? ""}
+              />
+              <Textarea
+                {...register("biography")}
+                label="Bio"
+                defaultValue={userCurrent.biography ?? ""}
+              />
+              <Textarea
+                {...register("description")}
+                label="Experiência"
+                defaultValue={userCurrent.description ?? ""}
+              />
+              <SelectLocation
+                onSelect={handleLocationChange(setSelectedCountry)}
+                name="country"
+                label="Pais"
+                requiredField={true}
+                options={countries}
+                placeholder="Selecione um Pais"
+                value={
+                  selectedCountry || {
+                    label: userCurrent.country,
+                    value: userCurrent.country,
+                  }
                 }
-              }
-            />
-            <SelectLocation
-              onSelect={handleLocationChange(setSelectedStates)}
-              label="Estado"
-              name="state"
-              requiredField={true}
-              options={states}
-              placeholder="Selecione um Estado"
-              value={
-                selectedStates || {
-                  label: userCurrent.state,
-                  value: userCurrent.state,
+              />
+              <SelectLocation
+                onSelect={handleLocationChange(setSelectedStates)}
+                label="Estado"
+                name="state"
+                requiredField={true}
+                options={states}
+                placeholder="Selecione um Estado"
+                value={
+                  selectedStates || {
+                    label: userCurrent.state,
+                    value: userCurrent.state,
+                  }
                 }
-              }
-              isDisabled={selectedCountry?.value !== "Brasil"}
-            />
-            <Input
-              label="Linkedin"
-              {...register("linkedin")}
-              placeholder="linkedin.com/in/usuario1"
-              defaultValue={userCurrent.linkedin ?? ""}
-            />
-            <Input
-              {...register("github")}
-              label="Portifólio/Github"
-              placeholder="portfóliousuário.com.br"
-              defaultValue={userCurrent.github ?? ""}
-            />
-            <Input
-              type="number"
-              max={45}
-              min={0}
-              {...register("yearsOfExperience")}
-              label="Anos experiência"
-              required
-              defaultValue={
-                userCurrent.yearsOfExperience
-                  ? userCurrent.yearsOfExperience.toString()
-                  : "0"
-              }
-            />
-            <SelectSkillsInput
-              label="Especialização"
-              state={[selectedSkills, setSelectedSkills]}
-              options={options}
-            />
-          </div>
-          <Button
-            type="submit"
-            className="mt-7"
-            disabled={loading}
-            isLoading={loading}
-          >
-            Salvar
-          </Button>
-        </form>
-      </div>
-    </Modal>
+                isDisabled={selectedCountry?.value !== "Brasil"}
+              />
+              <Input
+                label="Linkedin"
+                {...register("linkedin")}
+                placeholder="linkedin.com/in/usuario1"
+                defaultValue={userCurrent.linkedin ?? ""}
+              />
+              <Input
+                {...register("github")}
+                label="Portifólio/Github"
+                placeholder="portfóliousuário.com.br"
+                defaultValue={userCurrent.github ?? ""}
+              />
+              <Input
+                type="number"
+                max={45}
+                min={0}
+                {...register("yearsOfExperience")}
+                label="Anos experiência"
+                required
+                defaultValue={
+                  userCurrent.yearsOfExperience
+                    ? userCurrent.yearsOfExperience.toString()
+                    : "0"
+                }
+              />
+              <SelectSkillsInput
+                label="Especialização"
+                state={[selectedSkills, setSelectedSkills]}
+                options={options}
+              />
+            </div>
+            <Button
+              type="submit"
+              className="mt-7"
+              disabled={loading}
+              isLoading={loading}
+            >
+              Salvar
+            </Button>
+          </form>
+        </div>
+      </Modal.Content>
+    </Modal.Root>
   );
 };