Merge remote-tracking branch 'origin/dev' into fix#74/estudio-de-criacao

package.json

@@ -39,6 +39,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.1",
     "react-markdown": "^9.0.1",
+    "react-multi-carousel": "^2.8.5",
     "react-toastify": "^10.0.5",
     "rehype-katex": "^7.0.0",
     "rehype-raw": "^7.0.0",
@@ -51,7 +52,7 @@
   },
   "devDependencies": {
     "@tanstack/react-query-devtools": "^5.51.21",
-    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
     "@types/cookie": "^0.6.0",
     "@types/jest": "^29.5.12",

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

@@ -22,11 +22,6 @@ const signInWithToken = async ({
     refresh,
     redirect: false,
   });
-  if (!result?.error) {
-    return result;
-  } else {
-    throw new Error(result.error);
-  }
 };
 
 const OAuthContent = () => {
@@ -36,30 +31,32 @@ const OAuthContent = () => {
   const searchParams = useSearchParams();
   const token = searchParams.get('token');
   const refresh = searchParams.get('refresh');
+  const [isPending, setIsPending] = useState(true);
+
+
+  useEffect(() => {
+    const fetchSession = async () => {
+      const result = await signIn('credentials', {
+        token,
+        refresh,
+        redirect: false,
+      });
+
+      if (result?.error) {
+        toast.error('Erro ao efetuar login, por favor tente novamente!');
+        router.push('/login');
+      }
 
-  const { mutate, isPending } = useMutation({
-    mutationFn: signInWithToken,
-    onSuccess: () => {
-      setMessage('Login efetuado com sucesso! redirecionando');
       localStorage.setItem('token', JSON.stringify(session?.user.accessToken));
       localStorage.setItem(
         'refresh',
         JSON.stringify(session?.user.refreshToken),
       );
       router.push('/home');
-    },
-    onError: () => {
-      toast.error('Erro ao efetuar login, por favor tente novamente!');
-      router.push('/login');
-    },
-  });
-
-  useEffect(() => {
-    if (token && refresh && !session) {
-      mutate({ token, refresh });
     }
-  }, [token, session, mutate]);
-
+    fetchSession();
+  }, [])
+
   if (!token) {
     toast.error('Erro ao efetuar login, por favor tente novamente!');
     router.push('/login');

src/app/home/page.tsx

@@ -1,23 +1,17 @@
 'use client';
 
 import { useSession } from 'next-auth/react';
-import { SignOutButton } from '@/components/ui/buttons/signOut.button';
+import HomePrincipalPage from '@/components/home/homePage';
+
 
 export default function HomePage() {
   const { data: session } = useSession();
 
   return (
-    <div>
-      <p className="pl-8 pt-4  text-black font-bold text-[#1F1F1F]">
-        {session?.user.name}
-      </p>
-      <p className="pl-8 text-black font-bold text-[#1F1F1F]">
-        {session?.user.email}
-      </p>
-      <p className=" pl-8 text-black font-bold">
-        Esta tela ainda está em desenvolvimento :)
-      </p>
-      <SignOutButton />
+    <div className='bg-[#F1F1F1] min-h-screen'>
+      <div className='bg-[#F1F1F1] max-w-7xl mx-auto pt-14 px-5'>
+          <HomePrincipalPage />
+      </div>
     </div>
   );
 }

src/app/journey/[...id]/page.tsx

@@ -27,7 +27,7 @@ export default function ManageTrack({ params }: { params: { id: string } }) {
     isLoading,
     error,
   } = useQuery<Trail[], Error>({
-    queryKey: ['trails'],
+    queryKey: ['trails', params.id],
     queryFn: fetchTrails,
   });
 

src/app/page.tsx

@@ -51,7 +51,7 @@ export default function LandingPage() {
             <div className="flex justify-center md:justify-start">
               <Link href="/register">
                 <MyButton width="150px" height="50px" color="red" bold>
-                  Começe aqui
+                  Comece aqui
                 </MyButton>
               </Link>
             </div>

src/components/home/SearchBar.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { TextField, IconButton } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+
+interface SearchBarProps {
+  value: string;
+  onChange: (query: string) => void;
+}
+
+const SearchBar: React.FC<SearchBarProps> = ({ value, onChange }) => {
+  return (
+    <TextField
+      variant="outlined"
+      style={{ width: '400px' }}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      InputProps={{
+        startAdornment: (
+          <IconButton>
+            <SearchIcon />
+          </IconButton>
+        ),
+      }}
+      sx={{
+        backgroundColor: 'white',
+        borderRadius: '10px',
+        '& .MuiOutlinedInput-root': {
+          '& fieldset': {
+            borderWidth: '1px',
+            borderColor: '#dcdcdc',
+            borderRadius: '10px',
+          },
+          '&:hover fieldset': {
+            borderColor: '#a0a0a0',
+          },
+          '&.Mui-focused fieldset': {
+            borderColor: '#a0a0a0',
+          },
+        },
+      }}
+    />
+  );
+};
+
+export default SearchBar;

src/components/home/homeJourneyCard.tsx

@@ -0,0 +1,41 @@
+'use client';
+import React from 'react';
+import Image from 'next/image';
+import MyButton from '@/components/ui/buttons/myButton.component';
+interface JourneyCardProps {
+    type: 'emAndamento' | 'geral';
+    title: string;
+    image: string;
+    description?: string;
+    URL?: string;
+}
+
+const JourneyCard: React.FC<JourneyCardProps> = ({
+    type,
+    title,
+    image,
+    description,
+    URL,
+}) => {
+    if (type === 'emAndamento') {
+        return (
+            <div className="bg-[#FFFAFA] border-2 rounded-3xl w-44 h-60 overflow-hidden flex items-center flex-col gap-7 justify-center cursor-pointer">
+                <Image src={image} alt={title} width={120} height={120} style={{marginTop:"20px"}}/>
+                <h3 className="text-lg font-bold text-center flex-1">{title}</h3>
+            </div>
+        );
+    } else {
+        return (
+        <div className="w-full flex gap-5 justify-between items-center border-b-2 py-4 mb-5">
+            <Image src={image} alt={title} width={100} height={100} />
+            <h3 className="text-2xl font-bold flex-1">{title}</h3>
+            <p className='flex-1'>{description}</p>
+            <MyButton color='purple' width='150px' radius='100px' >
+                VER TRILHAS
+            </MyButton>
+        </div>
+        );
+    }
+};
+
+export default JourneyCard;

src/components/home/homePage.tsx

@@ -0,0 +1,145 @@
+import React, { useState, useEffect } from 'react';
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
+import Foto from '@/public/calculus-logo.svg';
+import JourneyCard from '@/components/home/homeJourneyCard';
+import JourneyService from './service/home.services';
+import SearchBar from './SearchBar';
+import { useSession } from 'next-auth/react';
+
+const HomePrincipalPage = () => {
+  const { data: session } = useSession();
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [userJourneys, setUserJourneys] = useState<any[]>([]);
+  const [allJourneys, setAllJourneys] = useState<any[]>([]);
+
+  useEffect(() => {
+    try {
+      const fetchJourneys = async () => {
+        const { fetchUserJourneys, fetchJourneyById } = JourneyService();
+        const journeyIds = await fetchUserJourneys(session);
+
+        const journeysDetails = await Promise.all(
+          journeyIds.map(async (id: string) => await fetchJourneyById(id)),
+        );
+
+        setUserJourneys(journeysDetails.filter((j) => j !== null)); // Filtrar jornadas que foram encontradas
+      };
+
+      fetchJourneys();
+    } catch (error) {
+      console.log(error);
+    }
+  }, [session]);
+
+  useEffect(() => {
+    try {
+      const loadJourneys = async () => {
+        const { fetchJourneys } = JourneyService();
+        const allJourneys = await fetchJourneys();
+
+        setAllJourneys(allJourneys);
+      };
+      loadJourneys();
+    } catch (error) {
+      console.log(error);
+    }
+  }, []);
+
+  const filteredJourneys =
+    searchQuery.length > 0
+      ? allJourneys.filter(
+          (jornada) =>
+            jornada.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            jornada.description
+              .toLowerCase()
+              .includes(searchQuery.toLowerCase()),
+        )
+      : [];
+
+  const responsive = {
+    superLargeDesktop: {
+      breakpoint: { max: 4000, min: 3000 },
+      items: 6,
+    },
+    desktop: {
+      breakpoint: { max: 3000, min: 1024 },
+      items: 6,
+    },
+    tablet: {
+      breakpoint: { max: 1024, min: 464 },
+      items: 5,
+    },
+    mobile: {
+      breakpoint: { max: 464, min: 0 },
+      items: 2,
+    },
+  };
+
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+  }
+
+  return (
+    <>
+      <h5 className="text-3xl font-bold mb-5">Em andamento</h5>
+      {userJourneys.length > 0 ? (
+        <>
+          <Carousel responsive={responsive}>
+            {userJourneys.map((jornada) => (
+              <JourneyCard
+                type="emAndamento"
+                key={jornada._id}
+                title={jornada.title}
+                image={jornada.image || Foto}
+              />
+            ))}
+          </Carousel>
+        </>
+      ) : (
+        <div className="border rounded-lg bg-white my-10 w-2/4 p-8 mx-auto">
+          <p className="text-2xl font-medium text-center">
+            Você ainda não se inscreveu em nenhuma jornada, se inscreva em uma e
+            comece agora a aprender
+          </p>
+        </div>
+      )}
+
+      <>
+        <div className="flex justify-between items-center mb-6 mt-12">
+          <h1 className="text-3xl font-bold my-5">Jornadas</h1>
+          <SearchBar value={searchQuery} onChange={handleSearch} />
+        </div>
+        {searchQuery.length > 0 ? (
+          <div>
+            {filteredJourneys.map((jornada) => (
+              <JourneyCard
+                type="geral"
+                key={jornada._id}
+                title={jornada.title}
+                description={jornada.description}
+                image={jornada.image || Foto}
+                URL="/"
+              />
+            ))}
+          </div>
+        ) : (
+          <div>
+            {allJourneys.map((jornada) => (
+              <JourneyCard
+                type="geral"
+                key={jornada._id}
+                title={jornada.title}
+                description={jornada.description}
+                image={jornada.image || Foto}
+                URL="/"
+              />
+            ))}
+          </div>
+        )}
+      </>
+    </>
+  );
+};
+
+export default HomePrincipalPage;