Added channel page and channel details request

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

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

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

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 (
+        <div className="min-w-screen min-h-screen  bg-linear-to-br from-left-gradient to-right-gradient">
+            <Navbar isSearchPage={false} alerts={alerts} onCloseAlert={onCloseAlert} />
+        </div>
+    )
+
+}

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: <Home/> },
@@ -29,7 +30,11 @@ const routes = [
     },
     {
         path: "/video/:id",
-        element: <Video />
+        element: (
+            <ProtectedRoute requireAuth={false}>
+                <Video />
+            </ProtectedRoute>
+        )
     },
     {
         path: "/profile",
@@ -65,7 +70,15 @@ const routes = [
     },
     {
         path: "search",
-        element: <Search />
+        element: (
+                <Search />
+        )
+    },
+    {
+        path: "channel/:id",
+        element: (
+                <Channel/>
+        )
     }
 ]
 

frontend/src/services/channel.service.js

@@ -0,0 +1,15 @@
+
+
+export function fetchChannelDetails(channelId, addAlert) {
+  return fetch(`/api/channels/${channelId}`)
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      return response.json();
+    })
+    .catch(error => {
+        addAlert('error', "Erreur lors de la récupération des détails de la chaîne");
+      throw error;
+    });
+}