From 3b127ae1dd19d45bc1c02c75afc448ab6c80d099 Mon Sep 17 00:00:00 2001 From: Astri4-4 Date: Wed, 13 Aug 2025 09:57:14 +0000 Subject: [PATCH] Added channel page and channel details request --- backend/app/controllers/channel.controller.js | 5 ++- backend/app/routes/channel.route.js | 2 +- backend/logs/access.log | 13 +++++++ frontend/src/pages/Channel.jsx | 35 +++++++++++++++++++ frontend/src/routes/routes.jsx | 17 +++++++-- frontend/src/services/channel.service.js | 15 ++++++++ 6 files changed, 83 insertions(+), 4 deletions(-) create mode 100644 frontend/src/pages/Channel.jsx create mode 100644 frontend/src/services/channel.service.js diff --git a/backend/app/controllers/channel.controller.js b/backend/app/controllers/channel.controller.js index f1e51ca..8885774 100644 --- a/backend/app/controllers/channel.controller.js +++ b/backend/app/controllers/channel.controller.js @@ -30,9 +30,12 @@ export async function getById(req, res) { const client = await getClient(); const query = ` - SELECT * + SELECT channels.*, u.username, u.picture, COUNT(s.id) as subscriptions FROM channels + JOIN public.users u ON channels.owner = u.id + LEFT JOIN public.subscriptions s ON channels.id = s.channel WHERE channels.id = $1 + GROUP BY channels.id, name, description, channels.owner, u.username, u.picture `; const result = await client.query(query, [id]); diff --git a/backend/app/routes/channel.route.js b/backend/app/routes/channel.route.js index 4876c6a..3663063 100644 --- a/backend/app/routes/channel.route.js +++ b/backend/app/routes/channel.route.js @@ -18,7 +18,7 @@ const router = Router(); router.post("/", [addLogger, isTokenValid, ChannelCreate.name, ChannelCreate.description, ChannelCreate.owner, validator, doUserExistsBody, doUserHaveChannel, isOwnerBody, doChannelNameExists], create); // GET CHANNEL BY ID -router.get("/:id", [addLogger, isTokenValid, Channel.id, validator, doChannelExists], getById); +router.get("/:id", [addLogger, Channel.id, validator, doChannelExists], getById); // GET ALL CHANNEL router.get("/", [addLogger, isTokenValid], getAll); diff --git a/backend/logs/access.log b/backend/logs/access.log index c2a14a4..c212ba4 100644 --- a/backend/logs/access.log +++ b/backend/logs/access.log @@ -4196,3 +4196,16 @@ [2025-08-13 08:35:26.517] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200 [2025-08-13 09:11:32.832] [undefined] POST(/login): try to login with username 'sacha' [2025-08-13 09:11:32.881] [undefined] POST(/login): Successfully logged in with status 200 +[2025-08-13 09:44:49.864] [undefined] GET(/:id): failed due to invalid values with status 400 +[2025-08-13 09:44:49.869] [undefined] GET(/:id/stats): failed due to invalid values with status 400 +[2025-08-13 09:50:37.371] [undefined] GET(/:id): Invalid token with status 401 +[2025-08-13 09:50:54.834] [undefined] GET(/:id): try to get channel with id 1 +[2025-08-13 09:50:54.845] [undefined] GET(/:id): Successfully get channel with id 1 with status 200 +[2025-08-13 09:51:11.325] [undefined] GET(/:id): failed to retrieve channel because it doesn't exist with status 404 +[2025-08-13 09:52:08.315] [undefined] GET(/:id): failed to retrieve channel because it doesn't exist with status 404 +[2025-08-13 09:52:27.562] [undefined] GET(/:id): failed to retrieve channel because it doesn't exist with status 404 +[2025-08-13 09:52:43.945] [undefined] GET(/:id): failed to retrieve channel because it doesn't exist with status 404 +[2025-08-13 09:52:52.674] [undefined] GET(/:id): failed to retrieve channel because it doesn't exist with status 404 +[2025-08-13 09:55:55.264] [undefined] GET(/:id): failed to retrieve channel because it doesn't exist with status 404 +[2025-08-13 09:55:58.016] [undefined] GET(/:id): try to get channel with id 1 +[2025-08-13 09:55:58.026] [undefined] GET(/:id): Successfully get channel with id 1 with status 200 diff --git a/frontend/src/pages/Channel.jsx b/frontend/src/pages/Channel.jsx new file mode 100644 index 0000000..47ce853 --- /dev/null +++ b/frontend/src/pages/Channel.jsx @@ -0,0 +1,35 @@ +import Navbar from "../components/Navbar.jsx"; +import {useEffect, useState} from "react"; +import {useParams} from "react-router-dom"; +import {fetchChannelDetails} from "../services/channel.service.js"; + + +export default function Channel() { + + const id = useParams().id; + + const [alerts, setAlerts] = useState([]); + const [channel, setChannel] = useState(null); + + useEffect(() => { + async function fetchAlerts() { + setChannel(await fetchChannelDetails(id, addAlert)); + } + fetchAlerts(); + }, []) + + const addAlert = (type, message) => { + const newAlert = { type, message, id: Date.now() }; // Add unique ID + setAlerts([...alerts, newAlert]); + }; + const onCloseAlert = (alertToRemove) => { + setAlerts(alerts.filter(alert => alert !== alertToRemove)); + } + + return ( +
+ +
+ ) + +} \ No newline at end of file diff --git a/frontend/src/routes/routes.jsx b/frontend/src/routes/routes.jsx index 706cede..74735bf 100644 --- a/frontend/src/routes/routes.jsx +++ b/frontend/src/routes/routes.jsx @@ -8,6 +8,7 @@ import ManageChannel from "../pages/ManageChannel.jsx"; import ManageVideo from "../pages/ManageVideo.jsx"; import AddVideo from "../pages/AddVideo.jsx"; import Search from "../pages/Search.jsx"; +import Channel from "../pages/Channel.jsx"; const routes = [ { path: "/", element: }, @@ -29,7 +30,11 @@ const routes = [ }, { path: "/video/:id", - element: