FRONT: Criar diferentes componentes de rotas para grupos de usuários

[IguJl15]

Para retirar a repetitiva logica de verificação do status da autenticação (se está ou não logado) de componentes que montam telas do sistema, devemos criar um componente que verifica esta condição. Assim como o layout padrão da aplicação, aquele que monta a estrutura básica == NAVBAR == == Conteúdo == <- depende da rota é necessário criar um componente que verifique se o usuário esta logado ou não antes de mostrar a rota anônima pedida.

• [ ] Componente para rotas publicas (logado e não logado)
• [ ] Componente para rotas anônimas (somente não logado)
• [ ] Componente para rotas privadas (somente logado)

Patch file das modificações feitas durante conversa no Discord

diff --git a/src/features/auth/pages/Login.tsx b/src/features/auth/pages/Login.tsx
index 3aea062..5e6b73d 100644
--- a/src/features/auth/pages/Login.tsx
+++ b/src/features/auth/pages/Login.tsx
@@ -1,18 +1,13 @@
 import { useAuth } from '@/core/contexts/AuthContext';
 import { EmailTextField } from '@/core/ui/components/EmailTextField';
 import { black60 } from '@/core/ui/constants/colors';
-import { MailOutline, VpnKeyOutlined } from '@mui/icons-material';
+import { VpnKeyOutlined } from '@mui/icons-material';
 import { Box, Button, InputAdornment, Stack, TextField, Typography } from '@mui/material';
-import { FormEvent, useEffect } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { FormEvent } from 'react';
+import { Link } from 'react-router-dom';

 export default function Login() {
-  const { signed, logIn } = useAuth();
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (signed) navigate('/');
-  });
+  const { logIn } = useAuth();

   function onSubmit(event: FormEvent<HTMLFormElement>): void {
     event.preventDefault();

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 5658b51..f4cbe93 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,6 +1,8 @@
 import App from '@/App';
+import { useAuth } from '@/core/contexts/AuthContext';
 import { AuthRoutes } from '@/features/auth';
-import { createBrowserRouter } from 'react-router-dom';
+import { useEffect } from 'react';
+import { Outlet, createBrowserRouter, useNavigate } from 'react-router-dom';

 export const router = createBrowserRouter([
   {
@@ -11,8 +13,23 @@ export const router = createBrowserRouter([
         path: '/',
         element: <h1>Home Page</h1>,
       },
-      ...AuthRoutes,
+      {
+        element: <AnonymousLayout />,
+        
+        children: AuthRoutes,
+      },
     ],
     errorElement: <h1>Error Page</h1>,
   },
 ]);
+
+function AnonymousLayout() {  
+  const {signed} = useAuth()
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (signed) navigate('/');
+  });
+  
+  return (<>{signed ? <></> : <Outlet />}</>);
+}