XavierOliveira/Plataforma-de-Tutoriais
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: offcava

Browse Source
This commit is contained in:
Xavier Oliveira
2026-05-28 17:51:13 +01:00
parent 21f7f444dc
commit ca79de6cc1
7 changed files with 66 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend-plataforma-tutoriais/src/components/header/index.tsx
View File

@@ -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);

29
frontend-plataforma-tutoriais/src/components/sidebar/index.tsx
View File

@@ -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>

2
frontend-plataforma-tutoriais/src/hooks/useGetVideos.ts
View File

@@ -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;

2
frontend-plataforma-tutoriais/src/pages/private/videos/index.tsx
View File

@@ -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([]);
}

53
frontend-plataforma-tutoriais/src/pages/private/workshop/[id].tsx
View File

@@ -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>

3
frontend-plataforma-tutoriais/src/types.tsx
View File

@@ -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 = {