From ca79de6cc1b405f754278de5e0e18fc304f037c2 Mon Sep 17 00:00:00 2001
From: Xavier Oliveira <xaviergomesoliveira@gmail.com>
Date: Thu, 28 May 2026 17:51:13 +0100
Subject: [PATCH] fix: offcava

---
 .../src/components/header/index.tsx           | 22 ++++----
 .../src/components/sidebar/index.tsx          | 29 +++-------
 .../src/hooks/useGetVideos.ts                 |  2 +
 .../src/pages/private/videos/index.tsx        |  2 +
 .../src/pages/private/workshop/[id].tsx       | 53 +++++++++----------
 frontend-plataforma-tutoriais/src/types.tsx   |  3 ++
 .../app/Http/Controllers/AuthController.php   | 23 +++++---
 7 files changed, 66 insertions(+), 68 deletions(-)

diff --git a/frontend-plataforma-tutoriais/src/components/header/index.tsx b/frontend-plataforma-tutoriais/src/components/header/index.tsx
index 5689edd..66d5d7b 100644
--- a/frontend-plataforma-tutoriais/src/components/header/index.tsx
+++ b/frontend-plataforma-tutoriais/src/components/header/index.tsx
@@ -14,7 +14,7 @@ import { PiCheckCircleFill } from "react-icons/pi";
 import { useGetWorkshopsSearch } from "../../hooks/useGetWorkshopsSearch";
 import { imageSkeletonFadeStyle, onImageSkeletonLoad } from "../../utils/imageSkeleton";
 import { motion, AnimatePresence } from "framer-motion";
-/* import { useGetCurrentUser } from "../../hooks/useGetCurrentUser"; */
+import { useGetCurrentUser } from "../../hooks/useGetCurrentUser";
 
 
 export default function Header() {
@@ -30,23 +30,21 @@ export default function Header() {
     const { getVideos } = useGetVideos();
     const { getVideosSearch } = useGetVideosSearch();
     const { getWorkshopsSearch } = useGetWorkshopsSearch();
-    /* const { getCurrentUser } = useGetCurrentUser(); */
-    const [role, _setRole] = useState(0);
+    const { getCurrentUser } = useGetCurrentUser();
     const [videosWatched, setVideosWatched] = useState(0);
     const [videosCount, setVideosCount] = useState(0);
+    const [role, setRole] = useState(0);
     
     const navigate = useNavigate();
-    
+
     useEffect(() => {
-        const fetchAll = async () => {
-            const videosWatched = localStorage.getItem("videosWatched");
-            setVideosWatched(videosWatched ? parseInt(videosWatched) : 0);
-            const videosCount = localStorage.getItem("videosCount");
-            setVideosCount(videosCount ? parseInt(videosCount) : 0);
-            /* const userData = await getCurrentUser();
-                setRole(userData.data.role_id); */
+        const fetchCurrentUser = async () => {
+            const currentUser = await getCurrentUser();
+            setRole(currentUser.data.role_id);
+            setVideosWatched(currentUser.data.videosWatched);
+            setVideosCount(currentUser.data.videosCount);
         };
-        fetchAll();
+        fetchCurrentUser();
     }, []);
 
     const handleCloseMenu = () => setShowMenu(false);
diff --git a/frontend-plataforma-tutoriais/src/components/sidebar/index.tsx b/frontend-plataforma-tutoriais/src/components/sidebar/index.tsx
index 5acb2ff..c38a3d7 100644
--- a/frontend-plataforma-tutoriais/src/components/sidebar/index.tsx
+++ b/frontend-plataforma-tutoriais/src/components/sidebar/index.tsx
@@ -22,7 +22,7 @@ export default function Sidebar() {
         };
         fetchCurrentUser();
     }, []);
-    
+
     return sideMenu ? (
         <aside className={styles.sidebar}>
             <div className="d-flex">
@@ -34,7 +34,6 @@ export default function Sidebar() {
             </div>
 
             <nav className={`${styles.nav}`}>
-            {role === 1 ? (
                 <ul className={styles.navList}>
                     <li className={`${styles.navItem} text-start`}>
                         <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/dashboard"> <LuLayoutDashboard className="me-2" size={24} /> {sideMenu ? "Dashboard" : ""} </NavLink>
@@ -45,29 +44,15 @@ export default function Sidebar() {
                     <li className={`${styles.navItem} text-start`}>
                         <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/workshops"> <LuGraduationCap className="me-2" size={24} /> {sideMenu ? "Workshops" : ""} </NavLink>
                     </li>
-                    <li className={`${styles.navItem} text-start`}>
-                        <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/admin/users"> <LuUsers className="me-2" size={24} /> {sideMenu ? "Utilizadores" : ""} </NavLink>
-                    </li>
+                    {role === 1 ? (
+                        <li className={`${styles.navItem} text-start`}>
+                            <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/admin/users"> <LuUsers className="me-2" size={24} /> {sideMenu ? "Utilizadores" : ""} </NavLink>
+                        </li>
+                    ) : null}
                     <li className={`${styles.navItem} text-start`}>
                         <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/contactos"> <LuMail className="me-2" size={24} /> {sideMenu ? "Contactos" : ""} </NavLink>
                     </li>
                 </ul>
-            ) : (
-                <ul className={styles.navList}>
-                    <li className={`${styles.navItem} text-start`}>
-                        <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/dashboard"> <LuLayoutDashboard className="me-2" size={24} /> {sideMenu ? "Dashboard" : ""} </NavLink>
-                    </li>
-                    <li className={`${styles.navItem} text-start`}>
-                        <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/videos"> <LuTvMinimalPlay className="me-2" size={24} />Videos</NavLink>
-                    </li>
-                    <li className={`${styles.navItem} text-start`}>
-                        <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/workshops"> <LuGraduationCap className="me-2" size={24} /> {sideMenu ? "Workshops" : ""} </NavLink>
-                    </li>
-                    <li className={`${styles.navItem} text-start`}>
-                        <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/contactos"> <LuMail className="me-2" size={24} /> {sideMenu ? "Contactos" : ""} </NavLink>
-                    </li>
-                </ul>
-            )}
             </nav>
 
             <div className={styles.logoutWrapper}>
@@ -87,7 +72,7 @@ export default function Sidebar() {
                             <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/dashboard"> <LuLayoutDashboard size={24} /></NavLink>
                         </li>
                         <li className={`${styles.navItem}`} title="Vídeos">
-                            <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/videos"> <LuTvMinimalPlay  size={24} /></NavLink>
+                            <NavLink className={({ isActive }) => isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink} to="/videos"> <LuTvMinimalPlay size={24} /></NavLink>
                         </li>
                         <li className={`${styles.navItem}`} title="Workshops">
                             <NavLink className={({ isActive }) => isActive ? `${styles.navLink} justify-content-center ${styles.navLinkActive}` : styles.navLink} to="/workshops"> <LuGraduationCap size={24} /></NavLink>
diff --git a/frontend-plataforma-tutoriais/src/hooks/useGetVideos.ts b/frontend-plataforma-tutoriais/src/hooks/useGetVideos.ts
index 911b5f6..000a6c2 100644
--- a/frontend-plataforma-tutoriais/src/hooks/useGetVideos.ts
+++ b/frontend-plataforma-tutoriais/src/hooks/useGetVideos.ts
@@ -37,6 +37,8 @@ export function useGetVideos() {
                 meta: data.meta,
                 role: data.role,
                 categories: data.categories as Category[],
+                videosActive: data.videosActive,
+                videosWatched: data.videosWatched,
             };
         } else {
             return data as ApiErrorResponse;
diff --git a/frontend-plataforma-tutoriais/src/pages/private/videos/index.tsx b/frontend-plataforma-tutoriais/src/pages/private/videos/index.tsx
index 3573808..8d968e7 100644
--- a/frontend-plataforma-tutoriais/src/pages/private/videos/index.tsx
+++ b/frontend-plataforma-tutoriais/src/pages/private/videos/index.tsx
@@ -65,6 +65,8 @@ export default function Videos() {
                     setCurrentPage(videosData.meta.current_page);
                     setRole(videosData.role);
                     setCategories(videosData.categories);
+                    localStorage.setItem("videosActive", videosData.videosActive.toString());
+                    localStorage.setItem("videosWatched", videosData.videosWatched.toString());
                 } else {
                     setVideos([]);
                 }
diff --git a/frontend-plataforma-tutoriais/src/pages/private/workshop/[id].tsx b/frontend-plataforma-tutoriais/src/pages/private/workshop/[id].tsx
index 4237169..63b66f6 100644
--- a/frontend-plataforma-tutoriais/src/pages/private/workshop/[id].tsx
+++ b/frontend-plataforma-tutoriais/src/pages/private/workshop/[id].tsx
@@ -1,4 +1,3 @@
-import API_URL from "../../../config/api";
 import { useEffect, useState } from "react";
 import { Link, useParams } from "react-router";
 import { CgSpinner } from "react-icons/cg";
@@ -7,32 +6,27 @@ import { LuArrowLeft, LuCalendar, LuClock3, LuUsers } from "react-icons/lu";
 import "react-datepicker/dist/react-datepicker.css";
 import Swal from "sweetalert2";
 import styles from "./styles.module.css";
-import { useGetCurrentUser } from "../../../hooks/useGetCurrentUser";
 import { imageSkeletonFadeStyle, onImageSkeletonLoad } from "../../../utils/imageSkeleton";
 
 export default function Workshop() {
-    const user = JSON.parse(localStorage.getItem("user") as unknown as string) as User;
-    const isAdmin = user.role_id === 1;
-
-
     const { id } = useParams();
     const [loading, setLoading] = useState(true);
     const [workshop, setWorkshop] = useState<Workshop | null>(null);
     const [error, setError] = useState<ApiErrorResponse | null>(null);
-    const { getCurrentUser } = useGetCurrentUser();
-    const [currentUserData, setCurrentUserData] = useState<User | null>(null);
+    const [role, setRole] = useState(0);
+    const [userId, setUserId] = useState(0);
 
     useEffect(() => {
         const fetchAll = async () => {
             setLoading(true);
 
-            const [workshopData, currentUserData] = await Promise.all([
+            const [workshopData] = await Promise.all([
                 getWorkshop(),
-                getCurrentUser(),
             ]);
 
-            setWorkshop(workshopData as Workshop);
-            setCurrentUserData(currentUserData.data);
+            setWorkshop(workshopData?.workshop as Workshop);
+            setRole(workshopData?.role as number);
+            setUserId(workshopData?.userId as number);
 
             setLoading(false);
         };
@@ -42,7 +36,7 @@ export default function Workshop() {
 
     async function getWorkshop() {
         try {
-            const response = await fetch(`${API_URL}/api/workshop/${id}`, {
+            const response = await fetch(`http://127.0.0.1:8000/api/workshop/${id}`, {
                 method: "GET",
                 headers: {
                     Accept: "application/json",
@@ -54,7 +48,11 @@ export default function Workshop() {
             const data = await response.json();
 
             if (response.ok) {
-                return data.data as Workshop;
+                return {
+                    workshop: data.data as Workshop,
+                    role: data.role as number,
+                    userId: data.userId as number,
+                };
             } else {
                 setError(data as ApiErrorResponse);
                 return null;
@@ -67,7 +65,7 @@ export default function Workshop() {
 
     /* Inscrever num workshop */
     async function inscrever(workshopId: number) {
-        const response = await fetch(`${API_URL}/api/inscrever/${workshopId}`, {
+        const response = await fetch(`http://127.0.0.1:8000/api/inscrever/${workshopId}`, {
             method: "POST",
             headers: {
                 Accept: "application/json",
@@ -86,7 +84,7 @@ export default function Workshop() {
                 showCloseButton: true,
             });
             const workshop = await getWorkshop();
-            setWorkshop(workshop as Workshop);
+            setWorkshop(workshop?.workshop as Workshop);
         } else {
             Swal.fire({
                 title: data.message,
@@ -99,7 +97,7 @@ export default function Workshop() {
 
     /* Cancelar inscrição num workshop */
     async function cancelarInscricao(workshopId: number) {
-        const response = await fetch(`${API_URL}/api/cancelar-inscricao/${workshopId}`, {
+        const response = await fetch(`http://127.0.0.1:8000/api/cancelar-inscricao/${workshopId}`, {
             method: "DELETE",
             headers: {
                 Accept: "application/json",
@@ -118,7 +116,7 @@ export default function Workshop() {
                 showCloseButton: true,
             });
             const workshop = await getWorkshop();
-            setWorkshop(workshop as Workshop);
+            setWorkshop(workshop?.workshop as Workshop);
         } else {
             Swal.fire({
                 title: data.message,
@@ -133,6 +131,7 @@ export default function Workshop() {
         return (
             <div className="text-center mt-5 d-flex flex-column gap-2 align-items-center">
                 <CgSpinner className={`${styles.animateSpin} text-2xl fs-3`} />
+                <span>A carregar dados do workshop...</span>
             </div>
         )
     }
@@ -159,7 +158,7 @@ export default function Workshop() {
                         <div className="row mt-4 g-3 gx-md-4 gx-lg-5 ms-0">
                             <div className={`${styles.thumbnailWrapper} col-12 col-lg-3 align-self-center align-self-sm-center px-0 mt-0`}>
                                 <img
-                                    src={`${API_URL}/storage/${workshop.image}`}
+                                    src={`http://127.0.0.1:8000/storage/${workshop.image}`}
                                     alt={workshop.title}
                                     className={`${styles.thumbnail} w-100`}
                                     style={imageSkeletonFadeStyle}
@@ -190,20 +189,20 @@ export default function Workshop() {
                                     </div>
                                 </div>
                             </div>
-                            <div className="col-12 mx-auto ms-sm-0 mt-5 pt-3">
-                                {!isAdmin ? (
-                                    currentUserData && workshop.users.some((user: User) => user.id === currentUserData.id) ? (
-                                        <button type="button" className={`${styles.btncancelarInscricao} btn text-center mx-auto py-2  text-decoration-none`} onClick={() => { cancelarInscricao(workshop.id); getWorkshop(); }} key={workshop.id} style={{ width: '180px' }}>
+                            {role !== 1 ? (
+                                <div className="col-12 mx-auto ms-sm-0 mt-5 pt-3">
+                                    {workshop.users.some((user: User) => user.id === userId) ? (
+                                        <button type="button" className={`${styles.btncancelarInscricao} btn text-center mx-auto py-2  text-decoration-none`} onClick={() => cancelarInscricao(workshop.id)} key={workshop.id} style={{ width: '180px' }}>
                                             Anular inscrição
                                         </button>
                                     ) : (
-                                        <button type="button" className={`${styles.btnInscrever} btn text-center mx-auto py-2 px-4 text-decoration-none`} onClick={() => { inscrever(workshop.id); getWorkshop(); }} key={workshop.id} style={{ width: '180px' }}>
+                                        <button type="button" className={`${styles.btnInscrever} btn text-center mx-auto py-2 px-4 text-decoration-none`} onClick={() => inscrever(workshop.id)} key={workshop.id} style={{ width: '180px' }}>
                                             Inscrever-me
                                         </button>
-                                    )
-                                ) : null}
+                                    )}
+                                </div>
+                            ) : null}
 
-                            </div>
 
                         </div>
                     </div>
diff --git a/frontend-plataforma-tutoriais/src/types.tsx b/frontend-plataforma-tutoriais/src/types.tsx
index e7996a0..dfe80a9 100644
--- a/frontend-plataforma-tutoriais/src/types.tsx
+++ b/frontend-plataforma-tutoriais/src/types.tsx
@@ -35,6 +35,8 @@ export type User = {
         created_at: string;
         updated_at: string;
     };
+    videosWatched: number;
+    videosCount: number;
 }
 
 export type UpdateUserResponse = {
@@ -125,6 +127,7 @@ export type Workshop = {
     is_active: boolean;
     users: User[];
     role: number;
+    userId: number;
 }
 
 export type NextWorkshopsResponse = {
diff --git a/plataforma-tutorias/app/Http/Controllers/AuthController.php b/plataforma-tutorias/app/Http/Controllers/AuthController.php
index 4e24224..c3a965f 100644
--- a/plataforma-tutorias/app/Http/Controllers/AuthController.php
+++ b/plataforma-tutorias/app/Http/Controllers/AuthController.php
@@ -8,6 +8,7 @@ use Illuminate\Support\Facades\Hash;
 use Tymon\JWTAuth\Facades\JWTAuth;
 use Tymon\JWTAuth\Exceptions\JWTException;
 use App\Http\Requests\LoginRequest;
+use App\Models\Video;
 
 class AuthController extends Controller
 {
@@ -47,15 +48,15 @@ class AuthController extends Controller
             "password" => $request->password
         ]);
 
-        if(!$login) {
+        if (!$login) {
             return response()->json([
                 'message' => 'Credenciais inválidas',
                 'errors' => null,
-            ], 400); 
+            ], 400);
         }
 
         $user = auth()->user();
-        
+
         $token = JWTAuth::claims([
             "role_id" => $user->role_id
         ])->fromUser($user);
@@ -65,9 +66,9 @@ class AuthController extends Controller
             "token_type" => "Bearer",
             "expires_in" => JWTAuth::factory()->getTTL() * 60,
             "user" => [
-                "id" => $user->id, 
-                "name" => $user->name, 
-                "email" => $user->email, 
+                "id" => $user->id,
+                "name" => $user->name,
+                "email" => $user->email,
                 "role_id" => $user->role_id,
                 "password" => $user->password,
                 "created_at" => $user->created_at,
@@ -103,14 +104,22 @@ class AuthController extends Controller
     public function me()
     {
         $user = auth()->user();
+        $videosWatched = Video::select('id')
+            ->with('views')
+            ->whereHas('views', function ($q) use ($user) {
+                $q->where('user_id', $user->id);
+            })->count();
+        $videosCount = Video::select('id')->where('is_active', true)->count();
 
         return response()->json([
             'message' => 'Utilizador obtido com sucesso',
             'data' => [
                 'id' => $user->id,
                 'role_id' => $user->role_id,
+                'videosWatched' => $videosWatched,
+                'videosCount' => $videosCount,
             ],
             'errors' => null,
         ], 200);
     }
-}
\ No newline at end of file
+}