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

fix: use environment variable for API URL

Browse Source
This commit is contained in:
Xavier Oliveira
2026-05-28 14:41:32 +01:00
parent cf916eabb3
commit 82de11a99f
32 changed files with 98 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend-plataforma-tutoriais/.gitignore vendored
View File

@@ -10,6 +10,7 @@ lerna-debug.log*
node_modules node_modules
dist dist
dist-ssr dist-ssr
.env
*.local *.local
# Editor directories and files # Editor directories and files

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

@@ -1,3 +1,4 @@
import API_URL from "../../config/api";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { LuUser, LuMenu, LuSearch, LuLogOut, LuUsers, LuMail, LuGraduationCap, LuTvMinimalPlay, LuLayoutDashboard, LuCircleUser, LuPanelLeftClose, LuClock3, LuCalendar } from "react-icons/lu"; import { LuUser, LuMenu, LuSearch, LuLogOut, LuUsers, LuMail, LuGraduationCap, LuTvMinimalPlay, LuLayoutDashboard, LuCircleUser, LuPanelLeftClose, LuClock3, LuCalendar } from "react-icons/lu";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -13,7 +14,8 @@ import { PiCheckCircleFill } from "react-icons/pi";
import { useGetWorkshopsSearch } from "../../hooks/useGetWorkshopsSearch"; import { useGetWorkshopsSearch } from "../../hooks/useGetWorkshopsSearch";
import { imageSkeletonFadeStyle, onImageSkeletonLoad } from "../../utils/imageSkeleton"; import { imageSkeletonFadeStyle, onImageSkeletonLoad } from "../../utils/imageSkeleton";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { useGetCurrentUser } from "../../hooks/useGetCurrentUser"; /* import { useGetCurrentUser } from "../../hooks/useGetCurrentUser"; */
export default function Header() { export default function Header() {
const [showMenu, setShowMenu] = useState(false); const [showMenu, setShowMenu] = useState(false);
@@ -28,7 +30,7 @@ export default function Header() {
const { getVideos } = useGetVideos(); const { getVideos } = useGetVideos();
const { getVideosSearch } = useGetVideosSearch(); const { getVideosSearch } = useGetVideosSearch();
const { getWorkshopsSearch } = useGetWorkshopsSearch(); const { getWorkshopsSearch } = useGetWorkshopsSearch();
const { getCurrentUser } = useGetCurrentUser(); /* const { getCurrentUser } = useGetCurrentUser(); */
const [role, setRole] = useState(0); const [role, setRole] = useState(0);
const [videosWatched, setVideosWatched] = useState(0); const [videosWatched, setVideosWatched] = useState(0);
const [videosCount, setVideosCount] = useState(0); const [videosCount, setVideosCount] = useState(0);
@@ -41,8 +43,8 @@ export default function Header() {
setVideosWatched(videosWatched ? parseInt(videosWatched) : 0); setVideosWatched(videosWatched ? parseInt(videosWatched) : 0);
const videosCount = localStorage.getItem("videosCount"); const videosCount = localStorage.getItem("videosCount");
setVideosCount(videosCount ? parseInt(videosCount) : 0); setVideosCount(videosCount ? parseInt(videosCount) : 0);
const userData = await getCurrentUser(); /* const userData = await getCurrentUser();
setRole(userData.data.role_id); setRole(userData.data.role_id); */
}; };
fetchAll(); fetchAll();
}, []); }, []);
@@ -235,7 +237,7 @@ export default function Header() {
<div className={`${styles.boxVideo} position-relative`} > <div className={`${styles.boxVideo} position-relative`} >
<img <img
className={`${styles.videoThumbnail} position-absolute top-0 start-0 bottom-0 h-100`} className={`${styles.videoThumbnail} position-absolute top-0 start-0 bottom-0 h-100`}
src={`http://127.0.0.1:8000/storage/${video.thumbnail}`} src={`${API_URL}/storage/${video.thumbnail}`}
alt={video.title} alt={video.title}
style={imageSkeletonFadeStyle} style={imageSkeletonFadeStyle}
onLoad={onImageSkeletonLoad} onLoad={onImageSkeletonLoad}
@@ -267,7 +269,7 @@ export default function Header() {
<Link to={`/workshop/${workshop.id}`} className="text-decoration-none text-black" onClick={handleCloseSearch}> <Link to={`/workshop/${workshop.id}`} className="text-decoration-none text-black" onClick={handleCloseSearch}>
<div className={`${styles.thumbnailWorkshop} position-relative`}> <div className={`${styles.thumbnailWorkshop} position-relative`}>
<img <img
src={`http://127.0.0.1:8000/storage/${workshop.image}`} src={`${API_URL}/storage/${workshop.image}`}
alt={workshop.title} alt={workshop.title}
className={styles.thumbnailWorkshop} className={styles.thumbnailWorkshop}
style={imageSkeletonFadeStyle} style={imageSkeletonFadeStyle}

3
frontend-plataforma-tutoriais/src/config/api.ts Normal file
View File

@@ -0,0 +1,3 @@
const API_URL = import.meta.env.VITE_API_URL || "http://127.0.0.1:8000";
export default API_URL;

3
frontend-plataforma-tutoriais/src/hooks/useGetCurrentUser.ts
View File

@@ -1,3 +1,4 @@
import API_URL from "../config/api";
import type { User } from "../types"; import type { User } from "../types";
@@ -9,7 +10,7 @@ interface ApiUserResponse {
export function useGetCurrentUser() { export function useGetCurrentUser() {
async function getCurrentUser(): Promise<ApiUserResponse> { async function getCurrentUser(): Promise<ApiUserResponse> {
const response = await fetch("http://127.0.0.1:8000/api/me", { const response = await fetch(`${API_URL}/api/me`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",

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

@@ -1,3 +1,4 @@
import API_URL from "../config/api";
import type { ApiErrorResponse, Category, Video } from "../types"; import type { ApiErrorResponse, Category, Video } from "../types";
type GetVideosParams = { type GetVideosParams = {
@@ -18,7 +19,7 @@ export function useGetVideos() {
if (params.status) query.append("status", params.status); if (params.status) query.append("status", params.status);
if (params.watched !== undefined) query.append("watched", params.watched.toString()); if (params.watched !== undefined) query.append("watched", params.watched.toString());
const response = await fetch(`http://127.0.0.1:8000/api/videos?${query.toString()}`, { const response = await fetch(`${API_URL}/api/videos?${query.toString()}`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",

3
frontend-plataforma-tutoriais/src/hooks/useGetVideosLength.ts
View File

@@ -1,9 +1,10 @@
import API_URL from "../config/api";
import type { ApiErrorResponse } from "../types"; import type { ApiErrorResponse } from "../types";
export function useGetVideosLength() { export function useGetVideosLength() {
async function getVideosLength() { async function getVideosLength() {
try { try {
const response = await fetch("http://127.0.0.1:8000/api/videos-length", { const response = await fetch(`${API_URL}/api/videos-length`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",

3
frontend-plataforma-tutoriais/src/hooks/useGetVideosSearch.ts
View File

@@ -1,9 +1,10 @@
import API_URL from "../config/api";
import type { ApiErrorResponse, Video } from "../types"; import type { ApiErrorResponse, Video } from "../types";
export function useGetVideosSearch() { export function useGetVideosSearch() {
async function getVideosSearch(searchQuery: string = "") { async function getVideosSearch(searchQuery: string = "") {
const response = await fetch( const response = await fetch(
`http://127.0.0.1:8000/api/videos-search?search=${encodeURIComponent(searchQuery)}`, `${API_URL}/api/videos-search?search=${encodeURIComponent(searchQuery)}`,
{ {
method: "GET", method: "GET",
headers: { headers: {

3
frontend-plataforma-tutoriais/src/hooks/useGetWorkshops.ts
View File

@@ -1,3 +1,4 @@
import API_URL from "../config/api";
import type { ApiErrorResponse, Workshop } from "../types"; import type { ApiErrorResponse, Workshop } from "../types";
type GetWorkshopsParams = { type GetWorkshopsParams = {
@@ -16,7 +17,7 @@ export function useGetWorkshops() {
if (params.page) query.append("page", params.page.toString()); if (params.page) query.append("page", params.page.toString());
if (params.per_page) query.append("per_page", params.per_page.toString()); if (params.per_page) query.append("per_page", params.per_page.toString());
const response = await fetch(`http://127.0.0.1:8000/api/workshops?${query.toString()}`, { const response = await fetch(`${API_URL}/api/workshops?${query.toString()}`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",

3
frontend-plataforma-tutoriais/src/hooks/useGetWorkshopsLength.ts
View File

@@ -1,9 +1,10 @@
import API_URL from "../config/api";
import type { ApiErrorResponse } from "../types"; import type { ApiErrorResponse } from "../types";
export function useGetWorkshopsLength() { export function useGetWorkshopsLength() {
async function getWorkshopsLength() { async function getWorkshopsLength() {
try { try {
const response = await fetch("http://127.0.0.1:8000/api/workshops-length", { const response = await fetch(`${API_URL}/api/workshops-length`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",

3
frontend-plataforma-tutoriais/src/hooks/useGetWorkshopsSearch.ts
View File

@@ -1,9 +1,10 @@
import API_URL from "../config/api";
import type { ApiErrorResponse, Workshop } from "../types"; import type { ApiErrorResponse, Workshop } from "../types";
export function useGetWorkshopsSearch() { export function useGetWorkshopsSearch() {
async function getWorkshopsSearch(searchQuery: string = "") { async function getWorkshopsSearch(searchQuery: string = "") {
const response = await fetch( const response = await fetch(
`http://127.0.0.1:8000/api/workshops-search?search=${encodeURIComponent(searchQuery)}`, `${API_URL}/api/workshops-search?search=${encodeURIComponent(searchQuery)}`,
{ {
method: "GET", method: "GET",
headers: { headers: {

3
frontend-plataforma-tutoriais/src/hooks/useNextVideos.ts
View File

@@ -1,8 +1,9 @@
import API_URL from "../config/api";
import type { ApiErrorResponse, Video } from "../types"; import type { ApiErrorResponse, Video } from "../types";
export function useNextVideos() { export function useNextVideos() {
async function getNextVideos() { async function getNextVideos() {
const response = await fetch("http://127.0.0.1:8000/api/next-videos", { const response = await fetch(`${API_URL}/api/next-videos`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",

3
frontend-plataforma-tutoriais/src/hooks/useNextWorkshops.ts
View File

@@ -1,8 +1,9 @@
import API_URL from "../config/api";
import type { ApiErrorResponse, NextWorkshopsResponse } from "../types"; import type { ApiErrorResponse, NextWorkshopsResponse } from "../types";
export function useNextWorkshops() { export function useNextWorkshops() {
async function getNextWorkshops() { async function getNextWorkshops() {
const response = await fetch("http://127.0.0.1:8000/api/next-workshops", { const response = await fetch(`${API_URL}/api/next-workshops`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",

3
frontend-plataforma-tutoriais/src/hooks/useVideoWatch.ts
View File

@@ -1,3 +1,4 @@
import API_URL from "../config/api";
import { useState, useRef } from "react"; import { useState, useRef } from "react";
export function useVideoWatch(videoId: number, initialWatched: boolean) { export function useVideoWatch(videoId: number, initialWatched: boolean) {
@@ -10,7 +11,7 @@ export function useVideoWatch(videoId: number, initialWatched: boolean) {
alreadySent.current = true; alreadySent.current = true;
try { try {
await fetch(`http://127.0.0.1:8000/api/video/${videoId}/watch`, { await fetch(`${API_URL}/api/video/${videoId}/watch`, {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",

3
frontend-plataforma-tutoriais/src/pages/private/admin/createUser/index.tsx
View File

@@ -1,3 +1,4 @@
import API_URL from "../../../../config/api";
import { useState } from "react"; import { useState } from "react";
import { Link } from "react-router"; import { Link } from "react-router";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
@@ -71,7 +72,7 @@ export default function CreateUser() {
role_id: role_id, role_id: role_id,
}; };
const response = await fetch("http://127.0.0.1:8000/api/create-user", { const response = await fetch(`${API_URL}/api/create-user`, {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",

7
frontend-plataforma-tutoriais/src/pages/private/admin/createVideo/index.tsx
View File

@@ -1,3 +1,4 @@
import API_URL from "../../../../config/api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link } from "react-router"; import { Link } from "react-router";
import type { Category } from "../../../../types"; import type { Category } from "../../../../types";
@@ -25,7 +26,7 @@ export default function CreateVideo() {
}, []); }, []);
async function getCategories() { async function getCategories() {
const response = await fetch("http://127.0.0.1:8000/api/categories", { const response = await fetch(`${API_URL}/api/categories`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -75,7 +76,7 @@ export default function CreateVideo() {
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open("POST", "http://127.0.0.1:8000/api/create-video"); xhr.open("POST", `${API_URL}/api/create-video`);
xhr.setRequestHeader("Authorization", `Bearer ${localStorage.getItem("token")}`); xhr.setRequestHeader("Authorization", `Bearer ${localStorage.getItem("token")}`);
xhr.setRequestHeader("Accept", "application/json"); xhr.setRequestHeader("Accept", "application/json");
xhr.upload.onprogress = (event) => { xhr.upload.onprogress = (event) => {
@@ -167,7 +168,7 @@ export default function CreateVideo() {
} }
async function createCategory(categoryName: string) { async function createCategory(categoryName: string) {
const response = await fetch("http://127.0.0.1:8000/api/categories", { const response = await fetch(`${API_URL}/api/categories`, {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",

3
frontend-plataforma-tutoriais/src/pages/private/admin/createWorkshop/index.tsx
View File

@@ -1,3 +1,4 @@
import API_URL from "../../../../config/api";
import { useState } from "react"; import { useState } from "react";
import { Link } from "react-router"; import { Link } from "react-router";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
@@ -50,7 +51,7 @@ export default function CreateWorkshop() {
formData.append("time_start", time_start.toTimeString().slice(0, 5)); formData.append("time_start", time_start.toTimeString().slice(0, 5));
formData.append("time_end", time_end.toTimeString().slice(0, 5)); formData.append("time_end", time_end.toTimeString().slice(0, 5));
const response = await fetch("http://127.0.0.1:8000/api/create-workshop", { const response = await fetch(`${API_URL}/api/create-workshop`, {
method: "POST", method: "POST",
headers: { headers: {
'Accept': 'application/json', 'Accept': 'application/json',

11
frontend-plataforma-tutoriais/src/pages/private/admin/editVideo/[id].tsx
View File

@@ -1,3 +1,4 @@
import API_URL from "../../../../config/api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link, useNavigate, useParams } from "react-router"; import { Link, useNavigate, useParams } from "react-router";
import type { ApiErrorResponse, Category, Video } from "../../../../types"; import type { ApiErrorResponse, Category, Video } from "../../../../types";
@@ -35,7 +36,7 @@ export default function editVideo() {
setLoading(true); setLoading(true);
try { try {
const response = await fetch(`http://127.0.0.1:8000/api/video/${id}`, { const response = await fetch(`${API_URL}/api/video/${id}`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -61,7 +62,7 @@ export default function editVideo() {
} }
async function destroy(id: number) { async function destroy(id: number) {
const response = await fetch(`http://127.0.0.1:8000/api/delete-video/${id}`, { const response = await fetch(`${API_URL}/api/delete-video/${id}`, {
method: "DELETE", method: "DELETE",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -124,7 +125,7 @@ export default function editVideo() {
// quando a rota aceita PATCH (method spoofing) // quando a rota aceita PATCH (method spoofing)
formData.append("_method", "PATCH"); formData.append("_method", "PATCH");
const response = await fetch(`http://127.0.0.1:8000/api/edit-video/${id}`, { const response = await fetch(`${API_URL}/api/edit-video/${id}`, {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -157,7 +158,7 @@ export default function editVideo() {
} }
async function getCategories() { async function getCategories() {
const response = await fetch("http://127.0.0.1:8000/api/categories", { const response = await fetch(`${API_URL}/api/categories`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -206,7 +207,7 @@ export default function editVideo() {
} }
async function createCategory(categoryName: string) { async function createCategory(categoryName: string) {
const response = await fetch("http://127.0.0.1:8000/api/categories", { const response = await fetch(`${API_URL}/api/categories`, {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",

9
frontend-plataforma-tutoriais/src/pages/private/admin/editWorkshop/[id].tsx
View File

@@ -1,3 +1,4 @@
import API_URL from "../../../../config/api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link, useParams } from "react-router"; import { Link, useParams } from "react-router";
import { CgSpinner } from "react-icons/cg"; import { CgSpinner } from "react-icons/cg";
@@ -47,7 +48,7 @@ export default function Workshop() {
async function getWorkshop() { async function getWorkshop() {
setLoading(true); setLoading(true);
try { try {
const response = await fetch(`http://127.0.0.1:8000/api/edit-workshop/${id}`, { const response = await fetch(`${API_URL}/api/edit-workshop/${id}`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -93,7 +94,7 @@ export default function Workshop() {
formData.append("image", image); formData.append("image", image);
} }
const response = await fetch(`http://127.0.0.1:8000/api/edit-workshop/${id}`, { const response = await fetch(`${API_URL}/api/edit-workshop/${id}`, {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -146,7 +147,7 @@ export default function Workshop() {
} }
/* async function destroy(id: number) { /* async function destroy(id: number) {
const response = await fetch(`http://127.0.0.1:8000/api/workshop/${id}`, { const response = await fetch(`${API_URL}/api/workshop/${id}`, {
method: "DELETE", method: "DELETE",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -205,7 +206,7 @@ export default function Workshop() {
<div className="row mt-4 g-3 gx-md-4 gx-lg-5 ms-0"> <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`}> <div className={`${styles.thumbnailWrapper} col-12 col-lg-3 align-self-center align-self-sm-center px-0 mt-0`}>
<img <img
src={`http://127.0.0.1:8000/storage/${workshop.image}`} src={`${API_URL}/storage/${workshop.image}`}
alt={workshop.title} alt={workshop.title}
className={`${styles.thumbnail} w-100`} className={`${styles.thumbnail} w-100`}
style={imageSkeletonFadeStyle} style={imageSkeletonFadeStyle}

9
frontend-plataforma-tutoriais/src/pages/private/admin/user/[id].tsx
View File

@@ -1,3 +1,4 @@
import API_URL from "../../../../config/api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link, useNavigate, useParams } from "react-router"; import { Link, useNavigate, useParams } from "react-router";
import type { ApiErrorResponse, User, Workshop } from "../../../../types"; import type { ApiErrorResponse, User, Workshop } from "../../../../types";
@@ -26,7 +27,7 @@ export default function User() {
async function getUser() { async function getUser() {
setLoading(true); setLoading(true);
try { try {
const response = await fetch(`http://127.0.0.1:8000/api/get-user/${id}`, { const response = await fetch(`${API_URL}/api/get-user/${id}`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -56,7 +57,7 @@ export default function User() {
} }
async function destroy(id: number) { async function destroy(id: number) {
const response = await fetch(`http://127.0.0.1:8000/api/edit-user/${id}`, { const response = await fetch(`${API_URL}/api/edit-user/${id}`, {
method: "DELETE", method: "DELETE",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -118,7 +119,7 @@ export default function User() {
role_id: role_id, role_id: role_id,
}; };
const response = await fetch(`http://127.0.0.1:8000/api/edit-user/${id}`, { const response = await fetch(`${API_URL}/api/edit-user/${id}`, {
method: "PATCH", method: "PATCH",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -216,7 +217,7 @@ export default function User() {
<div className={`${styles.boxWorkshop} text-start pb-3`}> <div className={`${styles.boxWorkshop} text-start pb-3`}>
<div className={`${styles.thumbnailWorkshop} position-relative`}> <div className={`${styles.thumbnailWorkshop} position-relative`}>
<img <img
src={`http://127.0.0.1:8000/storage/${workshop.image}`} src={`${API_URL}/storage/${workshop.image}`}
alt={workshop.title} alt={workshop.title}
className={styles.thumbnailWorkshop} className={styles.thumbnailWorkshop}
style={imageSkeletonFadeStyle} style={imageSkeletonFadeStyle}

3
frontend-plataforma-tutoriais/src/pages/private/admin/users/index.tsx
View File

@@ -1,3 +1,4 @@
import API_URL from "../../../../config/api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useDebounce } from "../../../../hooks/useDebounce"; import { useDebounce } from "../../../../hooks/useDebounce";
import type { ApiErrorResponse, User } from "../../../../types"; import type { ApiErrorResponse, User } from "../../../../types";
@@ -29,7 +30,7 @@ export default function Users() {
async function index(debouncedSearch: string) { async function index(debouncedSearch: string) {
setLoadingUsers(true); setLoadingUsers(true);
try { try {
const response = await fetch(`http://127.0.0.1:8000/api/users?page=${currentPage}&filter=${selectedUsers}&search=${encodeURIComponent(debouncedSearch)}`, { const response = await fetch(`${API_URL}/api/users?page=${currentPage}&filter=${selectedUsers}&search=${encodeURIComponent(debouncedSearch)}`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",

3
frontend-plataforma-tutoriais/src/pages/private/contactos/index.tsx
View File

@@ -1,3 +1,4 @@
import API_URL from "../../../config/api";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { LuMail, LuMapPin, LuPhone } from "react-icons/lu"; import { LuMail, LuMapPin, LuPhone } from "react-icons/lu";
import { CgSpinner } from "react-icons/cg"; import { CgSpinner } from "react-icons/cg";
@@ -35,7 +36,7 @@ export default function Contactos() {
}; };
setSending(true); setSending(true);
const response = await fetch("http://127.0.0.1:8000/api/contact", { const response = await fetch(`${API_URL}/api/contact`, {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",

13
frontend-plataforma-tutoriais/src/pages/private/dashboard/index.tsx
View File

@@ -1,3 +1,4 @@
import API_URL from "../../../config/api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import type { ApiErrorResponse, Video, Workshop, DashboardResponse } from "../../../types"; import type { ApiErrorResponse, Video, Workshop, DashboardResponse } from "../../../types";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
@@ -36,7 +37,7 @@ export default function Home() {
async function getDashboard() { async function getDashboard() {
setLoading(true); setLoading(true);
const response = await fetch("http://127.0.0.1:8000/api/dashboard", { const response = await fetch(`${API_URL}/api/dashboard`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -70,7 +71,7 @@ export default function Home() {
/* Inscrever num workshop */ /* Inscrever num workshop */
async function inscrever(workshopId: number) { async function inscrever(workshopId: number) {
const response = await fetch(`http://127.0.0.1:8000/api/inscrever/${workshopId}`, { const response = await fetch(`${API_URL}/api/inscrever/${workshopId}`, {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -102,7 +103,7 @@ export default function Home() {
/* Cancelar inscrição num workshop */ /* Cancelar inscrição num workshop */
async function cancelarInscricao(workshopId: number) { async function cancelarInscricao(workshopId: number) {
const response = await fetch(`http://127.0.0.1:8000/api/cancelar-inscricao/${workshopId}`, { const response = await fetch(`${API_URL}/api/cancelar-inscricao/${workshopId}`, {
method: "DELETE", method: "DELETE",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -151,7 +152,7 @@ export default function Home() {
}; };
setSending(true); setSending(true);
const response = await fetch("http://127.0.0.1:8000/api/contact", { const response = await fetch(`${API_URL}/api/contact`, {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -215,7 +216,7 @@ export default function Home() {
<Link to={`/admin/edit-video/${video.id}`}> <LuPencil className={`${styles.iconEdit} text-decoration-none`} /> </Link> <Link to={`/admin/edit-video/${video.id}`}> <LuPencil className={`${styles.iconEdit} text-decoration-none`} /> </Link>
)} )}
<img <img
src={`http://127.0.0.1:8000/storage/${video.thumbnail}`} src={`${API_URL}/storage/${video.thumbnail}`}
className={`${styles.videoThumbnail} position-absolute top-0 start-0 bottom-0 h-100`} className={`${styles.videoThumbnail} position-absolute top-0 start-0 bottom-0 h-100`}
alt={video.title} alt={video.title}
style={imageSkeletonFadeStyle} style={imageSkeletonFadeStyle}
@@ -248,7 +249,7 @@ export default function Home() {
<div className={`${styles.boxWorkshop} text-start pb-3`}> <div className={`${styles.boxWorkshop} text-start pb-3`}>
<div className={`${styles.thumbnailWorkshop} position-relative`}> <div className={`${styles.thumbnailWorkshop} position-relative`}>
<img <img
src={`http://127.0.0.1:8000/storage/${workshop.image}`} src={`${API_URL}/storage/${workshop.image}`}
alt={workshop.title} alt={workshop.title}
className={styles.thumbnailWorkshop} className={styles.thumbnailWorkshop}
style={imageSkeletonFadeStyle} style={imageSkeletonFadeStyle}

15
frontend-plataforma-tutoriais/src/pages/private/profile/index.tsx
View File

@@ -1,3 +1,4 @@
import API_URL from "../../../config/api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import type { User, Video, Workshop } from "../../../types"; import type { User, Video, Workshop } from "../../../types";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
@@ -31,7 +32,7 @@ export default function Profile() {
async function getProfile() { async function getProfile() {
setLoading(true); setLoading(true);
const response = await fetch("http://127.0.0.1:8000/api/profile", { const response = await fetch(`${API_URL}/api/profile`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -80,7 +81,7 @@ export default function Profile() {
confirmarPassword: confirmarPassword, confirmarPassword: confirmarPassword,
}; };
const response = await fetch(`http://127.0.0.1:8000/api/profile/${user_id}`, { const response = await fetch(`${API_URL}/api/profile/${user_id}`, {
method: "PATCH", method: "PATCH",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -123,7 +124,7 @@ export default function Profile() {
email: email, email: email,
}; };
const response = await fetch(`http://127.0.0.1:8000/api/profile/${user_id}`, { const response = await fetch(`${API_URL}/api/profile/${user_id}`, {
method: "PATCH", method: "PATCH",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -156,7 +157,7 @@ export default function Profile() {
/* Cancelar inscrição num workshop */ /* Cancelar inscrição num workshop */
async function cancelarInscricao(workshopId: number) { async function cancelarInscricao(workshopId: number) {
const response = await fetch(`http://127.0.0.1:8000/api/cancelar-inscricao/${workshopId}`, { const response = await fetch(`${API_URL}/api/cancelar-inscricao/${workshopId}`, {
method: "DELETE", method: "DELETE",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -329,7 +330,7 @@ export default function Profile() {
<Link to={`/admin/edit-video/${video.id}`}> <LuPencil className={`${styles.iconEdit} text-decoration-none`} /> </Link> <Link to={`/admin/edit-video/${video.id}`}> <LuPencil className={`${styles.iconEdit} text-decoration-none`} /> </Link>
)} )}
<img <img
src={`http://127.0.0.1:8000/storage/${video.thumbnail}`} src={`${API_URL}/storage/${video.thumbnail}`}
className={`${styles.videoThumbnail} position-absolute top-0 start-0 bottom-0 h-100`} className={`${styles.videoThumbnail} position-absolute top-0 start-0 bottom-0 h-100`}
alt={video.title} alt={video.title}
style={imageSkeletonFadeStyle} style={imageSkeletonFadeStyle}
@@ -361,7 +362,7 @@ export default function Profile() {
<div className={`${styles.boxWorkshop} text-start pb-3`}> <div className={`${styles.boxWorkshop} text-start pb-3`}>
<div className={`${styles.thumbnailWorkshop} position-relative`}> <div className={`${styles.thumbnailWorkshop} position-relative`}>
<img <img
src={`http://127.0.0.1:8000/storage/${workshop.image}`} src={`${API_URL}/storage/${workshop.image}`}
alt={workshop.title} alt={workshop.title}
className={styles.thumbnailWorkshop} className={styles.thumbnailWorkshop}
style={imageSkeletonFadeStyle} style={imageSkeletonFadeStyle}
@@ -402,7 +403,7 @@ export default function Profile() {
<div className={`${styles.boxWorkshop} text-start pb-3`}> <div className={`${styles.boxWorkshop} text-start pb-3`}>
<div className={`${styles.thumbnailWorkshop} position-relative`}> <div className={`${styles.thumbnailWorkshop} position-relative`}>
<img <img
src={`http://127.0.0.1:8000/storage/${workshop.image}`} src={`${API_URL}/storage/${workshop.image}`}
alt={workshop.title} alt={workshop.title}
className={styles.thumbnailWorkshop} className={styles.thumbnailWorkshop}
style={imageSkeletonFadeStyle} style={imageSkeletonFadeStyle}

5
frontend-plataforma-tutoriais/src/pages/private/search/index.tsx
View File

@@ -1,3 +1,4 @@
import API_URL from "../../../config/api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import type { ApiErrorResponse, User, Video, Workshop } from "../../../types"; import type { ApiErrorResponse, User, Video, Workshop } from "../../../types";
import { Link, useSearchParams } from "react-router"; import { Link, useSearchParams } from "react-router";
@@ -90,7 +91,7 @@ export default function Search() {
)} )}
<img <img
className={`${styles.videoThumbnail} position-absolute top-0 start-0 bottom-0 h-100`} className={`${styles.videoThumbnail} position-absolute top-0 start-0 bottom-0 h-100`}
src={`http://127.0.0.1:8000/storage/${video.thumbnail}`} src={`${API_URL}/storage/${video.thumbnail}`}
alt={video.title} alt={video.title}
style={imageSkeletonFadeStyle} style={imageSkeletonFadeStyle}
onLoad={onImageSkeletonLoad} onLoad={onImageSkeletonLoad}
@@ -115,7 +116,7 @@ export default function Search() {
<div className={`${styles.boxWorkshop} text-start pb-3`}> <div className={`${styles.boxWorkshop} text-start pb-3`}>
<div className={`${styles.thumbnailWorkshop} position-relative`}> <div className={`${styles.thumbnailWorkshop} position-relative`}>
<img <img
src={`http://127.0.0.1:8000/storage/${workshop.image}`} src={`${API_URL}/storage/${workshop.image}`}
alt={workshop.title} alt={workshop.title}
className={styles.thumbnailWorkshop} className={styles.thumbnailWorkshop}
style={imageSkeletonFadeStyle} style={imageSkeletonFadeStyle}

5
frontend-plataforma-tutoriais/src/pages/private/video/[id].tsx
View File

@@ -1,3 +1,4 @@
import API_URL from "../../../config/api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link, useParams } from "react-router"; import { Link, useParams } from "react-router";
import type { ApiErrorResponse, Video } from "../../../types"; import type { ApiErrorResponse, Video } from "../../../types";
@@ -79,7 +80,7 @@ export default function Video() {
setLoading(true); setLoading(true);
setPlayerReady(false); setPlayerReady(false);
try { try {
const response = await fetch(`http://127.0.0.1:8000/api/video/${id}`, { const response = await fetch(`${API_URL}/api/video/${id}`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -151,7 +152,7 @@ export default function Video() {
<Plyr <Plyr
source={{ source={{
type: "video", type: "video",
sources: [{ src: `http://127.0.0.1:8000${video.url}`, type: "video/mp4" }], sources: [{ src: `${API_URL}${video.url}`, type: "video/mp4" }],
}} }}
/> />
</div> </div>

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

@@ -1,3 +1,4 @@
import API_URL from "../../../config/api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import type { ApiErrorResponse, Category, Video } from "../../../types"; import type { ApiErrorResponse, Category, Video } from "../../../types";
import { Link } from "react-router"; import { Link } from "react-router";
@@ -228,7 +229,7 @@ export default function Videos() {
)} )}
<img <img
className={`${styles.videoThumbnail} position-absolute top-0 start-0 bottom-0 h-100`} className={`${styles.videoThumbnail} position-absolute top-0 start-0 bottom-0 h-100`}
src={`http://127.0.0.1:8000/storage/${video.thumbnail}`} src={`${API_URL}/storage/${video.thumbnail}`}
alt={video.title} alt={video.title}
style={imageSkeletonFadeStyle} style={imageSkeletonFadeStyle}
onLoad={onImageSkeletonLoad} onLoad={onImageSkeletonLoad}

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

@@ -1,3 +1,4 @@
import API_URL from "../../../config/api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link, useParams } from "react-router"; import { Link, useParams } from "react-router";
import { CgSpinner } from "react-icons/cg"; import { CgSpinner } from "react-icons/cg";
@@ -41,7 +42,7 @@ export default function Workshop() {
async function getWorkshop() { async function getWorkshop() {
try { try {
const response = await fetch(`http://127.0.0.1:8000/api/workshop/${id}`, { const response = await fetch(`${API_URL}/api/workshop/${id}`, {
method: "GET", method: "GET",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -66,7 +67,7 @@ export default function Workshop() {
/* Inscrever num workshop */ /* Inscrever num workshop */
async function inscrever(workshopId: number) { async function inscrever(workshopId: number) {
const response = await fetch(`http://127.0.0.1:8000/api/inscrever/${workshopId}`, { const response = await fetch(`${API_URL}/api/inscrever/${workshopId}`, {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -98,7 +99,7 @@ export default function Workshop() {
/* Cancelar inscrição num workshop */ /* Cancelar inscrição num workshop */
async function cancelarInscricao(workshopId: number) { async function cancelarInscricao(workshopId: number) {
const response = await fetch(`http://127.0.0.1:8000/api/cancelar-inscricao/${workshopId}`, { const response = await fetch(`${API_URL}/api/cancelar-inscricao/${workshopId}`, {
method: "DELETE", method: "DELETE",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -158,7 +159,7 @@ export default function Workshop() {
<div className="row mt-4 g-3 gx-md-4 gx-lg-5 ms-0"> <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`}> <div className={`${styles.thumbnailWrapper} col-12 col-lg-3 align-self-center align-self-sm-center px-0 mt-0`}>
<img <img
src={`http://127.0.0.1:8000/storage/${workshop.image}`} src={`${API_URL}/storage/${workshop.image}`}
alt={workshop.title} alt={workshop.title}
className={`${styles.thumbnail} w-100`} className={`${styles.thumbnail} w-100`}
style={imageSkeletonFadeStyle} style={imageSkeletonFadeStyle}

7
frontend-plataforma-tutoriais/src/pages/private/workshops/index.tsx
View File

@@ -1,3 +1,4 @@
import API_URL from "../../../config/api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import type { User, Workshop } from "../../../types"; import type { User, Workshop } from "../../../types";
import { Link } from "react-router"; import { Link } from "react-router";
@@ -62,7 +63,7 @@ export default function Workshops() {
/* Inscrever num workshop */ /* Inscrever num workshop */
async function inscrever(workshopId: number) { async function inscrever(workshopId: number) {
const response = await fetch(`http://127.0.0.1:8000/api/inscrever/${workshopId}`, { const response = await fetch(`${API_URL}/api/inscrever/${workshopId}`, {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -104,7 +105,7 @@ export default function Workshops() {
/* Cancelar inscrição num workshop */ /* Cancelar inscrição num workshop */
async function cancelarInscricao(workshopId: number) { async function cancelarInscricao(workshopId: number) {
const response = await fetch(`http://127.0.0.1:8000/api/cancelar-inscricao/${workshopId}`, { const response = await fetch(`${API_URL}/api/cancelar-inscricao/${workshopId}`, {
method: "DELETE", method: "DELETE",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
@@ -247,7 +248,7 @@ export default function Workshops() {
<div className={`${styles.boxWorkshop} text-start pb-3`}> <div className={`${styles.boxWorkshop} text-start pb-3`}>
<div className={`${styles.thumbnailWorkshop} position-relative`}> <div className={`${styles.thumbnailWorkshop} position-relative`}>
<img <img
src={`http://127.0.0.1:8000/storage/${workshop.image}`} src={`${API_URL}/storage/${workshop.image}`}
alt={workshop.title} alt={workshop.title}
className={styles.thumbnailWorkshop} className={styles.thumbnailWorkshop}
style={imageSkeletonFadeStyle} style={imageSkeletonFadeStyle}

3
frontend-plataforma-tutoriais/src/pages/public/login/index.tsx
View File

@@ -1,3 +1,4 @@
import API_URL from "../../../config/api";
import { useEffect, useState, type FormEvent } from "react"; import { useEffect, useState, type FormEvent } from "react";
import { useNavigate } from "react-router"; import { useNavigate } from "react-router";
import type { ApiErrorResponse, LoginResponse } from "../../../types"; import type { ApiErrorResponse, LoginResponse } from "../../../types";
@@ -32,7 +33,7 @@ export default function Login() {
} }
try { try {
const response = await fetch("http://127.0.0.1:8000/api/login", { const response = await fetch(`${API_URL}/api/login`, {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",

3
frontend-plataforma-tutoriais/src/pages/public/register/index.tsx
View File

@@ -1,3 +1,4 @@
import API_URL from "../../../config/api";
import { useState, type FormEvent } from "react"; import { useState, type FormEvent } from "react";
import { useNavigate } from "react-router"; import { useNavigate } from "react-router";
import type { RegisterResponse } from "../../../types"; import type { RegisterResponse } from "../../../types";
@@ -36,7 +37,7 @@ export default function Register() {
} }
try { try {
const response = await fetch("http://127.0.0.1:8000/api/register", { const response = await fetch(`${API_URL}/api/register`, {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",

2
frontend-plataforma-tutoriais/vite
View File

@@ -1 +1 @@
VITE_API_URL= "http://127.0.0.1:8000/api/" VITE_API_URL= `${API_URL}/api/"

2
plataforma-tutorias/config/cors.php
View File

@@ -23,7 +23,7 @@ return [
'http://localhost:5173', 'http://localhost:5173',
'http://127.0.0.1:5173', 'http://127.0.0.1:5173',
'http://localhost:8000', 'http://localhost:8000',
'http://127.0.0.1:8000', env('API_URL'),
], ],
'allowed_origins_patterns' => [], 'allowed_origins_patterns' => [],