Merge pull request #19 from fga-eps-mds/fix-project-file-structure

Fix project file structure

package.json

@@ -25,16 +25,17 @@
     "cookie": "^0.6.0",
     "dotenv": "^16.4.5",
     "glob": "^9.3.5",
-    "jsonwebtoken": "^9.0.2",
     "next": "^14.2.5",
     "next-auth": "^4.24.7",
+    "next-safe-action": "^7.4.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.1",
-    "react-toastify": "^10.0.5",
+    "sonner": "^1.5.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@tanstack/react-query-devtools": "^5.51.21",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@types/cookie": "^0.6.0",

src/app/(auth)/login/page.tsx

@@ -1,9 +1,9 @@
-'use client';
-
-import { Box } from '@mui/material';
+import { Box, Grid, Link } from '@mui/material';
 import Image from 'next/image';
 import calcuclusLogo from '@/public/calculus-logo.svg';
-import LoginComponent from '@/app/components/login.component';
+import { GoogleAuthButton } from '@/components/ui/buttons/googleAuth.button';
+import { MicrosoftAuthButton } from '@/components/ui/buttons/microsoftAuth.button';
+import { SingInForm } from '@/components/forms/signInForm';
 
 export default function LoginPage() {
   return (
@@ -19,7 +19,28 @@ export default function LoginPage() {
           />
           <p className="text-[32px] font-bold">Login</p>
         </Box>
-        <LoginComponent />
+        <Grid
+          container
+          spacing={1}
+          justifyContent="center"
+          className="mt-2 mb-2"
+        >
+          <Grid item>
+            <GoogleAuthButton />
+          </Grid>
+          <Grid item>
+            <MicrosoftAuthButton />
+          </Grid>
+        </Grid>
+
+        <SingInForm />
+
+        <p className="text-[18px] font-light">
+          Novo Usuário?
+          <Link href="/register" className="text-indigo-700 block">
+            Cadastre-se
+          </Link>
+        </p>
       </Box>
     </Box>
   );

src/app/(auth)/oauth/page.tsx

@@ -1,40 +1,71 @@
-// page.tsx
-
 'use client';
 
 import { signIn, useSession } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { Suspense } from 'react';
+import { toast } from 'sonner';
+import { useMutation } from '@tanstack/react-query';
+import loadImage from '@/public/loading.gif';
+import Image from 'next/image';
+
+
+const signInWithToken = async (token: string) => {
+  const result = await signIn('credentials', { token, redirect: false });
+  if (!result?.error) {
+    return result;
+  } else {
+    throw new Error(result.error);
+  }
+};
 
 const OAuthContent = () => {
+  const router = useRouter();
   const { data: session } = useSession();
-  const [authenticated, setAuthenticated] = useState(false);
   const [message, setMessage] = useState('Carregando...');
   const searchParams = useSearchParams();
   const token = searchParams.get('token');
 
+  const { mutate, isPending } = useMutation({
+    mutationFn: signInWithToken,
+    onSuccess: () => {
+      setMessage('Login efetuado com sucesso! redirecionando');
+      window.location.href = '/home';
+    },
+    onError: () => {
+      toast.error('Erro ao efetuar login, por favor tente novamente!');
+      router.push('/login');
+    },
+  });
+
   useEffect(() => {
-    if (token && !authenticated) {
-      const signInWithToken = async () => {
-        await signIn('credentials', { token });
-        if (session) {
-          setAuthenticated(true);
-          setMessage('Login efetuado com sucesso! redirecionando');
-          window.location.href = '/home';
-        }
-      };
-
-      signInWithToken();
+    if (token && !session) {
+      mutate(token);
     }
-  }, [token, authenticated, session]);
+  }, [token, session, mutate]);
+
+  if (!token) {
+    toast.error('Erro ao efetuar login, por favor tente novamente!');
+    router.push('/login');
+  }
 
-  return <p>{message}</p>;
+  return (
+    <div className="flex justify-center items-center h-screen">
+      {isPending ? <Image src={loadImage.src} alt="Carregando..." /> : message}
+    </div>
+  );
 };
 
 const OAuthPage = () => {
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense
+      fallback={
+        <div className="flex justify-center items-center h-screen">
+          <img src={loadImage.src} alt="Carregando..." />
+        </div>
+      }
+    >
       <OAuthContent />
     </Suspense>
   );

src/app/admin/page.tsx

@@ -1,10 +1,19 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import UserTable from '@/app/components/admin/UserTable';
-import SearchBar from '@/app/components/admin/SearchBar';
+import UserTable from '@/components/admin/UserTable';
+import SearchBar from '@/components/admin/SearchBar';
 import { getUsers, updateUserRole } from '@/services/user.service';
-import { CircularProgress, Box, Dialog, DialogActions, DialogContent, DialogTitle, Button, Typography } from '@mui/material';
+import {
+  CircularProgress,
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Button,
+  Typography,
+} from '@mui/material';
 
 type User = {
   _id: string;
@@ -42,9 +51,10 @@ const Admin: React.FC = () => {
 
   useEffect(() => {
     const lowercasedQuery = searchQuery.toLowerCase();
-    const newFilteredUsers = users.filter(user =>
-      user.username.toLowerCase().includes(lowercasedQuery) ||
-      user.email.toLowerCase().includes(lowercasedQuery)
+    const newFilteredUsers = users.filter(
+      (user) =>
+        user.username.toLowerCase().includes(lowercasedQuery) ||
+        user.email.toLowerCase().includes(lowercasedQuery),
     );
     setFilteredUsers(newFilteredUsers);
   }, [searchQuery, users]);
@@ -53,7 +63,10 @@ const Admin: React.FC = () => {
     setSearchQuery(query);
   };
 
-  const handleMenuClick = (event: React.MouseEvent<HTMLButtonElement>, user: User) => {
+  const handleMenuClick = (
+    event: React.MouseEvent<HTMLButtonElement>,
+    user: User,
+  ) => {
     setAnchorEl(event.currentTarget);
     setSelectedUser(user);
   };
@@ -73,8 +86,10 @@ const Admin: React.FC = () => {
     if (selectedUser && selectedRole) {
       try {
         await updateUserRole(selectedUser._id, selectedRole);
-        const updatedUsers = users.map(user =>
-          user._id === selectedUser._id ? { ...user, role: selectedRole } : user
+        const updatedUsers = users.map((user) =>
+          user._id === selectedUser._id
+            ? { ...user, role: selectedRole }
+            : user,
         );
         setUsers(updatedUsers);
         setFilteredUsers(updatedUsers);
@@ -95,7 +110,14 @@ const Admin: React.FC = () => {
   if (error) return <div>{error}</div>;
 
   return (
-    <Box sx={{ padding: 2, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+    <Box
+      sx={{
+        padding: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
       <Box sx={{ width: '100%', maxWidth: 800, marginBottom: 2 }}>
         <SearchBar value={searchQuery} onChange={handleSearch} />
       </Box>

src/app/api/auth/[...nextauth]/route.ts

@@ -1,5 +1,5 @@
 import { authOptions } from '@/lib/auth';
-import NextAuth from "next-auth"
+import NextAuth from 'next-auth';
 
 const handler = NextAuth(authOptions);
 

src/app/home/page.tsx

@@ -1,12 +1,11 @@
 'use client';
 
 import { useSession } from 'next-auth/react';
-import { SignOutButton } from '../components/buttons/signOut.button';
+import { SignOutButton } from '@/components/ui/buttons/signOut.button';
 
 export default function HomePage() {
   const session = useSession();
 
-  console.log('my user: ' + session.data?.user);
   return (
     <div>
       <p className="pl-8 pt-4  text-black font-bold text-[#1F1F1F]">

src/app/layout.tsx

@@ -1,11 +1,11 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import '../styles/globals.css';
-import SessionProvider from '@/app/components/sessionProvider';
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import SessionProvider from '@/providers/session.provider';
 import './globals.css';
-import ClientLayout from './components/clientLayout';
+import ClientLayout from '@/components/clientLayout';
+import { Toaster } from 'sonner';
+import ReactQueryProvider from '@/providers/reactQueryProvider.provider';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -23,9 +23,11 @@ export default async function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <SessionProvider>
-          <ClientLayout>{children}</ClientLayout>
+          <ClientLayout>
+            <ReactQueryProvider>{children}</ReactQueryProvider>
+          </ClientLayout>
+          <Toaster position="top-center" closeButton richColors />
         </SessionProvider>
-        <ToastContainer />
       </body>
     </html>
   );

src/app/page.tsx

@@ -9,7 +9,7 @@ import { useSession } from 'next-auth/react';
 
 export default function LandingPage() {
   const session = useSession();
-  
+
   if (session.data) {
     window.location.href = '/home';
   }

src/app/register/page.tsx

@@ -1,14 +1,10 @@
 import React from 'react';
 import { Box, Typography, IconButton, Link, Grid } from '@mui/material';
-import { Apple } from '@mui/icons-material';
 import Image from 'next/image';
 import maoCerebro from '@/public/mao_cerebro.png';
-import googleIcon from '@/public/googleIcon.svg';
-import microsoftIcon from '../../public/microsoftIcon.svg';
-import { SingUpForm } from '../components/forms/signupForm';
-import { GoogleAuthButton } from '../components/buttons/googleAuth.button';
-import { MicrosoftAuthButton } from '../components/buttons/microsoftAuth.button';
-import { AppleAuthButton } from '../components/buttons/appleAuth.button';
+import { SingUpForm } from '@/components/forms/signUpForm';
+import { GoogleAuthButton } from '@/components/ui/buttons/googleAuth.button';
+import { MicrosoftAuthButton } from '@/components/ui/buttons/microsoftAuth.button';
 
 export default function SingUpPage() {
   return (