feat: admin setup and users page

Co-authored-by: Mateus Maia <mateusmaiamaia@hotmail.com> Co-authored-by: Matheus Monteiro <matheusyanmonteiro@gmail.com>
fga-eps-mds · Dec 9, 2024 · 2bb331d · 2bb331d
1 parent 61279c1
commit 2bb331d
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Livro Livre Admin</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

diff --git a/public/logo.png b/public/logo.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -16,6 +16,7 @@ function App() {
         <BrowserRouter>
           <Routes>
             <Route path="*" element={<NotFound />} />
+            <Route path="/" element={<PrivateRoute><Home /></PrivateRoute>} />
             <Route path="/login" element={<SignIn />} />
             <Route path="/inicio" element={<PrivateRoute><Home /></PrivateRoute>} />
             <Route path="/usuarios" element={<PrivateRoute><Users /></PrivateRoute>} />

diff --git a/src/PrivateRoute.tsx b/src/PrivateRoute.tsx
@@ -4,12 +4,12 @@ import { useEffect } from "react";
 
 const PrivateRoute = ({ children }: { children: any }) => {
   const navigate = useNavigate();
-  const { token } = useAuth();
+  const { isAuthenticated } = useAuth();
 
   useEffect(() => {
-    if (token) return;
+    if (isAuthenticated) return;
     navigate('/login');
-  })
+  }, [isAuthenticated])
 
   return children;
 }

diff --git a/src/hooks/useApi/index.tsx b/src/hooks/useApi/index.tsx
@@ -45,7 +45,7 @@ const useApi = () => {
     getUsers: (data: {
       perPage: number;
       page: number
-    }): Promise<{ data: {
+    }, token: string | null): Promise<{ data: {
       items: User[],
       total: number,
     } }> => {
@@ -55,6 +55,9 @@ const useApi = () => {
             params: {
               perPage: data.perPage,
               page: data.page,
+            },
+            headers: {
+              Authorization: `Bearer ${token}`,
             }
           })
           .then((res) => resolve(res))

diff --git a/src/pages/SignIn/SignInForm/index.tsx b/src/pages/SignIn/SignInForm/index.tsx
@@ -22,7 +22,7 @@ function SignInForm() {
     formState: { errors, isValid },
   } = useForm<FormValues>();
 
-  const { signIn, token } = useAuth();
+  const { signIn, isAuthenticated } = useAuth();
 
   const onSubmit = handleSubmit(async (data: FormValues) => {
     setLoading(true);
@@ -34,9 +34,9 @@ function SignInForm() {
   })
 
   useEffect(() => {
-    if (!token) return;
+    if (!isAuthenticated) return;
     navigate('/inicio');
-  }, [token])
+  }, [isAuthenticated])
 
   return (
     <form onSubmit={onSubmit}>

diff --git a/src/pages/SignIn/index.tsx b/src/pages/SignIn/index.tsx
@@ -1,8 +1,18 @@
 import { Box, Center, Stack } from '@chakra-ui/react';
 import SignInForm from './SignInForm';
 import SignInHeader from './SignInHeader';
+import { useNavigate } from 'react-router';
+import { useAuth } from '../../hooks/useAuth';
+import { useEffect } from 'react';
 
 function SignIn() {
+  const navigate = useNavigate();
+  const { isAuthenticated } = useAuth();
+
+  useEffect(() => {
+    if (isAuthenticated) navigate('/inicio');
+  }, [isAuthenticated])
+
   return (
     <Box padding='40px'>
       <Center>

diff --git a/src/pages/Users/index.tsx b/src/pages/Users/index.tsx
@@ -9,16 +9,18 @@ import {
   PaginationPrevTrigger,
   PaginationRoot,
 } from "../../components/ui/pagination";
+import { useAuth } from '../../hooks/useAuth';
 
 function Users() {
   const [users, setUsers] = useState<User[]>([]);
   const [usersCount, setUsersCount] = useState(0);
   const [page, setPage] = useState(1);
 
   const { getUsers } = useApi();
+  const { token } = useAuth();
 
   const fetchUsers = async () => {
-    const { data } = await getUsers({ perPage: 10, page: page - 1 });
+    const { data } = await getUsers({ perPage: 10, page: page - 1 }, token);
     setUsers(data.items);
     setUsersCount(data.total);
   }