feat(#78): Progresso da Trilha

src/app/journey-page/[journeyId]/page.tsx

@@ -1,28 +1,31 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { Box, CircularProgress, Divider, Typography } from '@mui/material';
+import { Box, CircularProgress, Divider, IconButton, Typography } from '@mui/material';
 import JourneyInfo from '@/components/journey/journeyInfo';
 import JourneyPath from '@/components/journey/journeyPath';
-import { getJourney, getTrails } from '@/services/studioMaker.service';
+import { getJourney, getJourneysByPoint, getTrails } from '@/services/studioMaker.service';
 import { Journey } from '@/lib/interfaces/journey.interface';
 import { Trail } from '@/lib/interfaces/trails.interface';
-import { useParams } from 'next/navigation';
-import {
-  subscribeJourney,
-  getSubscribedJourneys,
-} from '@/services/user.service';
+import { useParams, useRouter } from 'next/navigation';
+import { getSubscribedJourneys, } from '@/services/user.service';
 import { useSession } from 'next-auth/react';
 import { getCompletedTrails } from '@/services/user.service';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+
 
 export default function JourneyPage() {
   const { journeyId } = useParams();
+  const router = useRouter();
   const [journey, setJourney] = useState<Journey | null>(null);
   const [trails, setTrails] = useState<Trail[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [hasJourney, setHasJourney] = useState(false);
   const { data: session } = useSession();
   const [completedTrails, setCompletedTrails] = useState<string[]>([]);
+  const [previousJourney, setPreviousJourney] = useState<Journey | null>(null);
+  const [nextJourney, setNextJourney] = useState<Journey | null>(null);
 
   useEffect(() => {
     const fetchCompletedTrails = async () => {
@@ -50,6 +53,23 @@ export default function JourneyPage() {
         const trailsData = await getTrails({ id, token });
         setTrails(trailsData);
 
+        const pointId = journeyData.point;
+        if (pointId) {
+          const relatedJourneys: Journey[] = await getJourneysByPoint(pointId);
+          const next = relatedJourneys.find(j => j.order === journeyData.order + 1);
+          if (next != undefined) {
+            setNextJourney(next);
+            console.log(next);
+            console.log(nextJourney);
+          }
+          const previous = relatedJourneys.find(j => j.order === journeyData.order - 1);
+          if (previous != undefined) {
+            setPreviousJourney(previous);
+            console.log(previous);
+            console.log(previousJourney);
+          }
+        }
+
         if (session?.user?.id) {
           const userJourneys = await getSubscribedJourneys(session.user.id);
           let isSubscribed = false;
@@ -68,17 +88,13 @@ export default function JourneyPage() {
     fetchJourneyData();
   }, [journeyId, session?.user?.id]);
 
-  const handleJoin = async () => {
-    if (session?.user.id) {
-      const id = Array.isArray(journeyId) ? journeyId[0] : journeyId;
-      await subscribeJourney({
-        userId: session.user.id,
-        journeyId: id,
-        accessToken: session?.user.accessToken,
-      });
-      setHasJourney(true);
-    }
-  };
+  const handleNext = async () => {
+    router.push(`/journey-page/${nextJourney?._id}`);
+  }
+
+  const handlePrevious = async () => {
+    router.push(`/journey-page/${previousJourney?._id}`);
+  }
 
   if (error) {
     return <div>{error}</div>;
@@ -96,7 +112,43 @@ export default function JourneyPage() {
     <Box sx={{
       backgroundColor: '#f1f1f1',
       height: '100vh',
+      position: 'relative',
+      overflow: 'hidden',
     }}>
+      {(previousJourney) &&
+        <IconButton onClick={handlePrevious} sx={{
+          position: 'absolute',  
+          top: '10%',            
+          left: '5%',          
+          backgroundColor: '#FF4122',
+          height: '40px',
+          width: '40px',
+          borderRadius: '40px',
+          color: '#f1f1f1',
+          transform: 'translateY(-50%)',  
+          zIndex: 2,
+        }}>
+          <ArrowBackIcon />
+        </IconButton>
+      }
+
+      {(nextJourney) &&
+        <IconButton onClick={handleNext} sx={{
+          position: 'absolute',  
+          top: '10%',            
+          right: '5%',         
+          backgroundColor: '#FF4122',
+          height: '40px',
+          width: '40px',
+          borderRadius: '40px',
+          color: '#f1f1f1',
+          transform: 'translateY(-50%)',  
+          zIndex: 2,
+        }}>
+          <ArrowForwardIcon />
+        </IconButton>
+      }
+
       <Box
         sx={{
           display: 'flex',
@@ -105,6 +157,7 @@ export default function JourneyPage() {
           height: 'auto',
           width: '100vw',
           overflow: 'hidden',
+          position: 'relative',
         }}
       >
         <Box flex={1} pr={2}>
@@ -113,17 +166,17 @@ export default function JourneyPage() {
             description={journey.description}
             trailCount={trails.length}
             hasJourney={hasJourney}
-            onJoin={handleJoin}
             completedTrailsCount={completedTrailsInJourney.length}
           />
         </Box>
-
+    
         <Divider
           sx={{ marginBottom: '100px', marginTop: '100px' }}
           orientation="vertical"
           variant="middle"
           flexItem
         />
+
         {!trails.length ? (
           <Typography
             variant="h3"
@@ -137,7 +190,7 @@ export default function JourneyPage() {
           </Typography>
         ) : (
           <React.Fragment>
-            <JourneyPath trails={trails} />
+            <JourneyPath trails={trails} journeyId={journey._id} hasJourney={hasJourney} />
           </React.Fragment>
         )}
       </Box>

src/components/journey/journeyInfo.tsx

@@ -3,14 +3,12 @@
 import React from 'react';
 import { Box, Typography, LinearProgress } from '@mui/material';
 import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
-import MyButton from '@/components/ui/buttons/myButton.component';
 
 interface JourneyInfoProps {
   title: string;
   description: string;
   trailCount: number;
   hasJourney: boolean;
-  onJoin: () => void; 
   completedTrailsCount: number;
 }
 
@@ -19,14 +17,9 @@ const JourneyInfo: React.FC<JourneyInfoProps> = ({
   description,
   trailCount,
   hasJourney,
-  onJoin,
   completedTrailsCount,
 }) => {
 
-  const handleJoinClick = () => {
-    onJoin(); 
-  };
-
   const progressValue = Math.floor(( completedTrailsCount / trailCount ) * 100);
 
   return (

src/components/journey/journeyPath.tsx

@@ -3,13 +3,15 @@ import { Box, Button, Typography } from '@mui/material';
 import { Trail } from '@/lib/interfaces/trails.interface';
 import { useRouter } from 'next/navigation';
 import { useSession } from 'next-auth/react';
-import { getCompletedTrails } from '@/services/user.service';
+import { getCompletedTrails, subscribeJourney } from '@/services/user.service';
 
 interface JourneyPathProps {
   trails: Trail[];
+  journeyId: string;
+  hasJourney: boolean;
 }
 
-const JourneyPath: React.FC<JourneyPathProps> = ({ trails }) => {
+const JourneyPath: React.FC<JourneyPathProps> = ({ trails, journeyId, hasJourney }) => {
   const nodeSpacing = 120;
   const nodeSize = 80;
   const zigzagOffset = 100;
@@ -86,7 +88,15 @@ const JourneyPath: React.FC<JourneyPathProps> = ({ trails }) => {
     };
   }, [trails]);
 
-  const handleClick = (trailId: string) => {
+  const handleClick = async (trailId: string) => {
+    if (session?.user.id && !hasJourney) {
+      const id = Array.isArray(journeyId) ? journeyId[0] : journeyId;
+      await subscribeJourney({
+        userId: session.user.id,
+        journeyId: id,
+        accessToken: session?.user.accessToken,
+      });
+    }
     router.push(`/trail-page/${trailId}`);
   };
 
@@ -100,6 +110,7 @@ const JourneyPath: React.FC<JourneyPathProps> = ({ trails }) => {
         height: `${Math.max(trails.length * nodeSpacing + nodeSize + 50, 400)}px`,
         backgroundColor: '#f0f0f0',
         overflow: 'hidden', 
+        zIndex: 1,
       }}
     >
       <svg

src/components/studio/MarkdownPage.tsx

@@ -65,8 +65,8 @@ const MarkdownPage: React.FC<MarkdownPageProps> = ({ trailId }) => {
   return (
     <Box className="relative flex flex-col h-screen">
       <AppBar
-        position="static"
-        className="bg-[#f8f3f3] border-b border-[#D9D9D9]"
+        position="sticky"
+        className="bg-[#f8f3f3] border-b border-[#D9D9D9] top-16 z-10"
       >
         <Toolbar className="flex justify-between items-center">
           <MarkdownToolbar