From 7ec1259ba0f963e313466753efe85a202e1bb788 Mon Sep 17 00:00:00 2001 From: keven Date: Tue, 26 Aug 2025 18:30:19 -0300 Subject: [PATCH] [fe-02] feat(componente): Cria o componente que manipula as respostas vindas do servidor --- .../usuarios/[id]/detalhes/page.tsx | 34 +++----- .../(g_usuario)/usuarios/formulario/page.tsx | 17 ++-- .../(g_usuario)/usuarios/page.tsx | 25 ++---- .../_data/g_usuario/GUsuarioDeleteData.ts | 2 + .../_data/g_usuario/GUsuarioIndexData.ts | 2 + .../_data/g_usuario/GUsuarioLoginData.ts | 2 + .../_data/g_usuario/GUsuarioReadData.ts | 2 + .../_data/g_usuario/GUsuarioSaveData.ts | 2 + .../_hooks/g_usuario/useGUsuarioIndexHook.ts | 27 +++++++ .../_hooks/g_usuario/useGUsuarioReadHooks.ts | 26 ++++++ .../_hooks/g_usuario/useGUsuarioSaveHook.ts | 26 ++++++ .../_services/g_usuario/GUsuarioIndex.ts | 4 +- src/app/(protected)/layout.tsx | 13 ++- src/app/(public)/login/layout.tsx | 5 +- src/app/_components/loading/loading.tsx | 18 +++++ src/app/_components/loading/skeletonCard.tsx | 35 ++++++++ src/app/_components/loading/skeletonTable.tsx | 81 +++++++++++++++++++ src/app/_response/ResponseContext.tsx | 36 +++++++++ src/app/_response/response.tsx | 20 +++++ src/app/loading.tsx | 6 ++ src/services/api/Api.ts | 7 +- 21 files changed, 326 insertions(+), 64 deletions(-) create mode 100644 src/app/(protected)/(administrativo)/_hooks/g_usuario/useGUsuarioIndexHook.ts create mode 100644 src/app/(protected)/(administrativo)/_hooks/g_usuario/useGUsuarioReadHooks.ts create mode 100644 src/app/(protected)/(administrativo)/_hooks/g_usuario/useGUsuarioSaveHook.ts create mode 100644 src/app/_components/loading/loading.tsx create mode 100644 src/app/_components/loading/skeletonCard.tsx create mode 100644 src/app/_components/loading/skeletonTable.tsx create mode 100644 src/app/_response/ResponseContext.tsx create mode 100644 src/app/_response/response.tsx create mode 100644 src/app/loading.tsx diff --git a/src/app/(protected)/(administrativo)/(g_usuario)/usuarios/[id]/detalhes/page.tsx b/src/app/(protected)/(administrativo)/(g_usuario)/usuarios/[id]/detalhes/page.tsx index ca403b2..f48c529 100644 --- a/src/app/(protected)/(administrativo)/(g_usuario)/usuarios/[id]/detalhes/page.tsx +++ b/src/app/(protected)/(administrativo)/(g_usuario)/usuarios/[id]/detalhes/page.tsx @@ -1,39 +1,31 @@ 'use client' -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { useParams } from "next/navigation"; -import { - toast -} from "sonner"; import { Card, CardContent } from "@/components/ui/card"; - -import GUsuarioRead from "@/app/(protected)/(administrativo)/_services/g_usuario/GUsuarioRead"; +import { useGUsuarioReadHooks } from "@/app/(protected)/(administrativo)/_hooks/g_usuario/useGUsuarioReadHooks"; +import Usuario from "@/app/(protected)/(administrativo)/_interfaces/IGUsuario"; +import Loading from "@/app/_components/loading/loading"; export default function UsuarioDetalhes() { const params = useParams(); - const [usuario, setUsuario] = useState(null); + const { usuario, fetchUsuario } = useGUsuarioReadHooks(); useEffect(() => { - async function fetchUsuarios() { - const data = await GUsuarioRead(Number(params.id)); - if (data.code == 400) { - - toast(data.message); - - } - - setUsuario(data); + if (params.id) { + fetchUsuario({ usuario_id: Number(params.id) } as Usuario); } - fetchUsuarios(); }, []); + if (!usuario) return ; + return (
@@ -44,7 +36,7 @@ export default function UsuarioDetalhes() { Nome
- {usuario?.data?.nome_completo} + {usuario?.nome_completo}
@@ -52,7 +44,7 @@ export default function UsuarioDetalhes() { CPF
- {usuario?.data?.cpf} + {usuario?.cpf}
@@ -60,7 +52,7 @@ export default function UsuarioDetalhes() { Função
- {usuario?.data?.funcao} + {usuario?.funcao}
@@ -68,7 +60,7 @@ export default function UsuarioDetalhes() { Email
- {usuario?.data?.email} + {usuario?.email}
diff --git a/src/app/(protected)/(administrativo)/(g_usuario)/usuarios/formulario/page.tsx b/src/app/(protected)/(administrativo)/(g_usuario)/usuarios/formulario/page.tsx index 2d78ec4..f4d153a 100644 --- a/src/app/(protected)/(administrativo)/(g_usuario)/usuarios/formulario/page.tsx +++ b/src/app/(protected)/(administrativo)/(g_usuario)/usuarios/formulario/page.tsx @@ -9,6 +9,7 @@ import { UsuarioFormSchema } from "../../../_schemas/GUsuarioSchema" import { Button } from "@/components/ui/button" + import { Card, CardContent @@ -23,13 +24,14 @@ import { FormMessage, } from "@/components/ui/form" -import GUsuarioSave from "../../../_services/g_usuario/GUsuarioSave" -import { toast } from "sonner" +import { useGUsuarioSaveHook } from "../../../_hooks/g_usuario/useGUsuarioSaveHook" type FormValues = z.infer export default function UsuarioFormularioPage() { + const { usuario, saveUsuario } = useGUsuarioSaveHook(); + const form = useForm({ resolver: zodResolver(UsuarioFormSchema), defaultValues: { @@ -42,16 +44,7 @@ export default function UsuarioFormularioPage() { }); async function onSubmit(values: FormValues) { - - const response = await GUsuarioSave(values); - - if(response.message) - { - toast("Event has been created."); - } - - console.log(response); - + saveUsuario(values); } return ( diff --git a/src/app/(protected)/(administrativo)/(g_usuario)/usuarios/page.tsx b/src/app/(protected)/(administrativo)/(g_usuario)/usuarios/page.tsx index cffb920..77e4dc5 100644 --- a/src/app/(protected)/(administrativo)/(g_usuario)/usuarios/page.tsx +++ b/src/app/(protected)/(administrativo)/(g_usuario)/usuarios/page.tsx @@ -1,7 +1,5 @@ 'use client' -import GUsuarioIndex from "@/app/(protected)/(administrativo)/_services/g_usuario/GUsuarioIndex"; - import { Card, CardContent, @@ -19,25 +17,19 @@ import { import Usuario from "../../_interfaces/IGUsuario"; import { Button } from "@/components/ui/button"; import Link from "next/link"; -import { useEffect, useState } from "react"; +import { useGUsuarioIndexHook } from "../../_hooks/g_usuario/useGUsuarioIndexHook"; +import { useEffect } from "react"; +import Loading from "@/app/_components/loading/loading"; export default function UsuarioPage() { - const [usuarios, setUsuarios] = useState(null); - - function RemoveUser(usuarioId: number) { - console.log('asdasd') - } + const { usuarios, fetchUsuarios } = useGUsuarioIndexHook(); useEffect(() => { - async function fetchUsuarios() { - const data = await GUsuarioIndex(); - setUsuarios(data); - } fetchUsuarios(); }, []); - if (!usuarios) return
Carregando...
; + if (!usuarios) return ; return (
@@ -78,7 +70,7 @@ export default function UsuarioPage() { - {usuarios.data.map((usuario: Usuario) => ( + {usuarios.map((usuario: Usuario) => ( {usuario.usuario_id} @@ -109,11 +101,6 @@ export default function UsuarioPage() { - - - ))} diff --git a/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioDeleteData.ts b/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioDeleteData.ts index ec8df24..3313c91 100644 --- a/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioDeleteData.ts +++ b/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioDeleteData.ts @@ -1,3 +1,5 @@ +'use server' + import API from "@/services/api/Api"; import { Methods } from "@/services/api/enums/ApiMethodEnum"; diff --git a/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioIndexData.ts b/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioIndexData.ts index a0c14a3..8b6f66f 100644 --- a/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioIndexData.ts +++ b/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioIndexData.ts @@ -1,3 +1,5 @@ +'use server' + import API from "@/services/api/Api"; import { Methods } from "@/services/api/enums/ApiMethodEnum"; diff --git a/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioLoginData.ts b/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioLoginData.ts index b74d7ce..5602616 100644 --- a/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioLoginData.ts +++ b/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioLoginData.ts @@ -1,3 +1,5 @@ +'use server' + import { Methods } from "@/services/api/enums/ApiMethodEnum"; import API from "@/services/api/Api"; diff --git a/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioReadData.ts b/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioReadData.ts index 7819c4a..872c948 100644 --- a/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioReadData.ts +++ b/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioReadData.ts @@ -1,3 +1,5 @@ +'use server' + import API from "@/services/api/Api"; import { Methods } from "@/services/api/enums/ApiMethodEnum"; diff --git a/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioSaveData.ts b/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioSaveData.ts index 2858626..2ee92e2 100644 --- a/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioSaveData.ts +++ b/src/app/(protected)/(administrativo)/_data/g_usuario/GUsuarioSaveData.ts @@ -1,3 +1,5 @@ +'use server' + import API from "@/services/api/Api"; import { Methods } from "@/services/api/enums/ApiMethodEnum"; diff --git a/src/app/(protected)/(administrativo)/_hooks/g_usuario/useGUsuarioIndexHook.ts b/src/app/(protected)/(administrativo)/_hooks/g_usuario/useGUsuarioIndexHook.ts new file mode 100644 index 0000000..ce65a48 --- /dev/null +++ b/src/app/(protected)/(administrativo)/_hooks/g_usuario/useGUsuarioIndexHook.ts @@ -0,0 +1,27 @@ +'use client' + +import { useState } from "react" +import Usuario from "../../_interfaces/IGUsuario" +import GUsuarioIndex from "../../_services/g_usuario/GUsuarioIndex"; +import { useResponse } from "@/app/_response/ResponseContext"; + +export const useGUsuarioIndexHook = () => { + + const { setResponse } = useResponse(); + + const [usuarios, setUsuarios] = useState(null); + + const fetchUsuarios = async () => { + + const response = await GUsuarioIndex(); + + setUsuarios(response.data); + + // Define os dados do componente de resposta (toast, modal, etc) + setResponse(response); + + } + + return { usuarios, fetchUsuarios } + +} \ No newline at end of file diff --git a/src/app/(protected)/(administrativo)/_hooks/g_usuario/useGUsuarioReadHooks.ts b/src/app/(protected)/(administrativo)/_hooks/g_usuario/useGUsuarioReadHooks.ts new file mode 100644 index 0000000..3283fa1 --- /dev/null +++ b/src/app/(protected)/(administrativo)/_hooks/g_usuario/useGUsuarioReadHooks.ts @@ -0,0 +1,26 @@ +'use client' + +import { useState } from "react" +import Usuario from "../../_interfaces/IGUsuario" +import GUsuarioRead from "../../_services/g_usuario/GUsuarioRead"; +import { useResponse } from "@/app/_response/ResponseContext"; + +export const useGUsuarioReadHooks = () => { + + const { setResponse } = useResponse(); + + const [usuario, setUsuario] = useState(); + + const fetchUsuario = async (Usuario: Usuario) => { + + const response = await GUsuarioRead(Usuario.usuario_id); + + setUsuario(response.data); + + setResponse(response); + + } + + return { usuario, fetchUsuario } + +} \ No newline at end of file diff --git a/src/app/(protected)/(administrativo)/_hooks/g_usuario/useGUsuarioSaveHook.ts b/src/app/(protected)/(administrativo)/_hooks/g_usuario/useGUsuarioSaveHook.ts new file mode 100644 index 0000000..c6d1144 --- /dev/null +++ b/src/app/(protected)/(administrativo)/_hooks/g_usuario/useGUsuarioSaveHook.ts @@ -0,0 +1,26 @@ +'use client' + +import { useState } from "react" +import Usuario from "../../_interfaces/IGUsuario" +import GUsuarioSave from "../../_services/g_usuario/GUsuarioSave"; +import { useResponse } from "@/app/_response/ResponseContext"; + +export const useGUsuarioSaveHook = () => { + + const { setResponse } = useResponse(); + + const [usuario, setUsuario] = useState(); + + const saveUsuario = async (Usuario: any) => { + + const response = await GUsuarioSave(Usuario); + + setUsuario(response.data); + + setResponse(response); + + } + + return { usuario, saveUsuario } + +} \ No newline at end of file diff --git a/src/app/(protected)/(administrativo)/_services/g_usuario/GUsuarioIndex.ts b/src/app/(protected)/(administrativo)/_services/g_usuario/GUsuarioIndex.ts index f83bafe..7447a94 100644 --- a/src/app/(protected)/(administrativo)/_services/g_usuario/GUsuarioIndex.ts +++ b/src/app/(protected)/(administrativo)/_services/g_usuario/GUsuarioIndex.ts @@ -4,6 +4,8 @@ import GUsuarioIndexData from "../../_data/g_usuario/GUsuarioIndexData" export default async function GUsuarioIndex() { - return await GUsuarioIndexData(); + const response = await GUsuarioIndexData(); + + return response; } \ No newline at end of file diff --git a/src/app/(protected)/layout.tsx b/src/app/(protected)/layout.tsx index d3c12b0..0ca9fb4 100644 --- a/src/app/(protected)/layout.tsx +++ b/src/app/(protected)/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "../globals.css"; +import { ResponseProvider } from '../_response/ResponseContext'; import { AppSidebar } from "@/components/app-sidebar" import { Breadcrumb, @@ -18,6 +19,7 @@ import { SidebarTrigger, } from "@/components/ui/sidebar" import { Toaster } from "@/components/ui/sonner"; +import Response from "../_response/response"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -69,10 +71,13 @@ export default function RootLayout({
-
- {children} - -
+ +
+ {children} + + +
+ diff --git a/src/app/(public)/login/layout.tsx b/src/app/(public)/login/layout.tsx index 7ab45de..8fcba52 100644 --- a/src/app/(public)/login/layout.tsx +++ b/src/app/(public)/login/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "../../globals.css"; +import { Suspense } from "react"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -24,9 +25,7 @@ export default function RootLayout({ }>) { return ( - + {children} diff --git a/src/app/_components/loading/loading.tsx b/src/app/_components/loading/loading.tsx new file mode 100644 index 0000000..5d20133 --- /dev/null +++ b/src/app/_components/loading/loading.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import SkeletonCard from "./skeletonCard"; +import SkeletonTable from "./skeletonTable"; + +export default function Loading({ type }: any) { + + switch (type) { + case 1: + + return ; + break; + case 2: + + return + break; + } + +} \ No newline at end of file diff --git a/src/app/_components/loading/skeletonCard.tsx b/src/app/_components/loading/skeletonCard.tsx new file mode 100644 index 0000000..1c3f6cf --- /dev/null +++ b/src/app/_components/loading/skeletonCard.tsx @@ -0,0 +1,35 @@ + +export default function SkeletonCard() { + + return ( + +
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ + ); + +} \ No newline at end of file diff --git a/src/app/_components/loading/skeletonTable.tsx b/src/app/_components/loading/skeletonTable.tsx new file mode 100644 index 0000000..a37e42a --- /dev/null +++ b/src/app/_components/loading/skeletonTable.tsx @@ -0,0 +1,81 @@ + +export default function SkeletonTable() { + + return ( + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ 		+
+ 		+
+ 		+
+
+
+ 		+
+ 		+
+ 		+
+
+
+ 		+
+ 		+
+ 		+
+
+
+ 		+
+ 		+
+ 		+
+
+
+
+ +
+ + ); + +} \ No newline at end of file diff --git a/src/app/_response/ResponseContext.tsx b/src/app/_response/ResponseContext.tsx new file mode 100644 index 0000000..f356b31 --- /dev/null +++ b/src/app/_response/ResponseContext.tsx @@ -0,0 +1,36 @@ +'use client'; + +import React, { createContext, useContext, useState, ReactNode } from 'react'; + +interface ResponseState { + message: string; + type: 'toast' | 'modal' | 'alert' | null; + status: number; +} + +interface ResponseContextProps { + response: ResponseState; + setResponse: (value: ResponseState) => void; + clearResponse: () => void; +} + +const ResponseContext = createContext(undefined); + +export const ResponseProvider: React.FC<{ children: ReactNode }> = ({ children }) => { + const [response, setResponseState] = useState({ message: '', type: null, status : 0}); + + const setResponse = (value: ResponseState) => setResponseState(value); + const clearResponse = () => setResponseState({ message: '', type: null, status : 0}); + + return ( + + {children} + + ); +}; + +export const useResponse = () => { + const context = useContext(ResponseContext); + if (!context) throw new Error('useResponse must be used within ResponseProvider'); + return context; +}; diff --git a/src/app/_response/response.tsx b/src/app/_response/response.tsx new file mode 100644 index 0000000..4a6e245 --- /dev/null +++ b/src/app/_response/response.tsx @@ -0,0 +1,20 @@ +// app/src/app/_response/response.tsx +"use client"; + +import { useResponse } from "./ResponseContext"; +import { useEffect } from "react"; +import { toast } from "sonner"; + +export default function Response() { + const { response, clearResponse } = useResponse(); + + useEffect(() => { + switch (Number(response?.status)) { + case 200: + toast(response.message); + break; + } + }, [response, clearResponse]); + + return
; +} diff --git a/src/app/loading.tsx b/src/app/loading.tsx new file mode 100644 index 0000000..bd1da48 --- /dev/null +++ b/src/app/loading.tsx @@ -0,0 +1,6 @@ +// components/Loading.tsx +export default function Loading() { + return ( + + ) +} diff --git a/src/services/api/Api.ts b/src/services/api/Api.ts index f409baf..75e6173 100644 --- a/src/services/api/Api.ts +++ b/src/services/api/Api.ts @@ -59,11 +59,10 @@ export default class API { // Converte a reposta para json const responseData = await response.json(); - // Classe para manipular a resposta - const ResponseHandler = new Response(); + // Obtem o status da requisição + responseData.status = response.status; - // Manipula as respostas - return ResponseHandler.handler(responseData); + return responseData; } catch (error) {