astria
/
3RESIT
1
0
Fork 0
Code Issues Pull Requests 1 Projects 1 Releases 6 Wiki Activity
Browse Source

Finish channel page

features/channel_page
Astri4-4 4 months ago
parent
24cc371289
commit
ae683225da
6 changed files with 302 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      backend/app/controllers/user.controller.js
  2. 7
      backend/app/routes/user.route.js
  3. 184
      backend/logs/access.log
  4. 50
      frontend/src/pages/Channel.jsx
  5. 26
      frontend/src/services/channel.service.js
  6. 18
      frontend/src/services/user.service.js

24
backend/app/controllers/user.controller.js
View File

@ -307,4 +307,28 @@ export async function getHistory(req, res) {
logger.write("successfully retrieved history of user " + id, 200);
client.end();
res.status(200).json(videos);
}
export async function isSubscribed(req, res) {
const token = req.headers.authorization.split(" ")[1];
const tokenPayload = jwt.decode(token);
const userId = tokenPayload.id;
const channelId = req.params.id;
const client = await getClient();
const logger = req.body.logger;
logger.action(`check if user ${userId} is subscribed to channel ${channelId}`);
const query = `SELECT * FROM subscriptions WHERE owner = $1 AND channel = $2`;
const result = await client.query(query, [userId, channelId]);
if (result.rows[0]) {
logger.write(`user ${userId} is subscribed to channel ${channelId}`, 200);
client.end();
return res.status(200).json({subscribed: true});
} else {
logger.write(`user ${userId} is not subscribed to channel ${channelId}`, 200);
client.end();
return res.status(200).json({subscribed: false});
}
}

7
backend/app/routes/user.route.js
View File

@ -6,7 +6,8 @@ import {
getByUsername,
update,
deleteUser,
getChannel, getHistory
getChannel, getHistory,
isSubscribed
} from "../controllers/user.controller.js";
import {
UserRegister,
@ -22,6 +23,7 @@ import validator from "../middlewares/error.middleware.js";
import {isTokenValid} from "../middlewares/jwt.middleware.js";
import {addLogger} from "../middlewares/logger.middleware.js";
import {profileUpload} from "../middlewares/file.middleware.js";
import {Channel} from "../middlewares/channel.middleware.js";
const router = Router();
@ -49,4 +51,7 @@ router.get("/:id/channel", [addLogger, isTokenValid, User.id, validator], getCha
// GET USER HISTORY
router.get("/:id/history", [addLogger, isTokenValid, User.id, validator], getHistory);
// CHECK IF SUBSCRIBED TO CHANNEL
router.get("/:id/channel/subscribed", [addLogger, isTokenValid, User.id, Channel.id, validator], isSubscribed)
export default router;

184
backend/logs/access.log
View File

@ -4416,3 +4416,187 @@
[2025-08-13 15:05:14.147] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 15:51:45.615] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 15:51:45.623] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 16:16:59.269] [undefined] GET(/:id/channel): try to retrieve channel of user 2
[2025-08-13 16:16:59.272] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
[2025-08-13 16:16:59.274] [undefined] GET(/:id/history): try to retrieve history of user 2
[2025-08-13 16:16:59.277] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
[2025-08-13 16:16:59.283] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
[2025-08-13 16:17:06.262] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 16:17:06.271] [undefined] GET(/:id/stats): try to get stats
[2025-08-13 16:17:06.274] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 16:17:06.282] [undefined] GET(/:id/stats): Successfully get stats with status 200
[2025-08-13 16:17:12.950] [undefined] GET(/:id): try to get video 1
[2025-08-13 16:17:12.953] [undefined] GET(/:id/likes/day): try to get likes per day
[2025-08-13 16:17:12.962] [undefined] GET(/:id/likes/day): successfully retrieved likes per day with status 200
[2025-08-13 16:17:12.966] [undefined] GET(/:id): successfully get video 1 with status 200
[2025-08-13 16:17:29.535] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 16:17:29.544] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 16:49:34.721] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 16:49:34.733] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 16:50:12.390] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 16:50:12.400] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 16:50:22.222] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 16:50:22.231] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 16:50:54.583] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 16:50:54.592] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 16:51:09.969] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 16:51:09.979] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 16:51:10.825] [undefined] POST(/:id/subscribe): Invalid token with status 401
[2025-08-13 16:51:51.895] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 16:51:51.904] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 16:51:52.948] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 16:52:06.440] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:04:52.666] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:04:52.676] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:04:53.510] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:05:27.084] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:05:27.093] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:05:29.754] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:06:34.743] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:06:34.752] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:06:36.865] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:07:17.244] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:07:17.253] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:07:18.931] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:07:42.365] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:09:08.819] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:09:08.830] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:09:09.561] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:09:09.569] [undefined] POST(/:id/subscribe): Successfully unsubscribed from channel with status 200
[2025-08-13 17:09:15.011] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:09:15.020] [undefined] POST(/:id/subscribe): Successfully subscribed to channel with status 200
[2025-08-13 17:09:17.626] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:09:17.636] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:09:18.685] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:09:18.694] [undefined] POST(/:id/subscribe): Successfully unsubscribed from channel with status 200
[2025-08-13 17:09:19.297] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:09:19.307] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:09:20.241] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:09:20.249] [undefined] POST(/:id/subscribe): Successfully subscribed to channel with status 200
[2025-08-13 17:09:20.865] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:09:20.875] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:11:41.315] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:11:41.322] [undefined] POST(/:id/subscribe): Successfully unsubscribed from channel with status 200
[2025-08-13 17:14:10.866] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:14:10.877] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:14:12.477] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:14:12.486] [undefined] POST(/:id/subscribe): Successfully subscribed to channel with status 200
[2025-08-13 17:14:14.578] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:14:14.588] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:19:22.939] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:19:22.950] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:19:33.535] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:19:33.545] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:21:08.100] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:21:08.113] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:21:41.263] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:21:41.272] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:21:41.293] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:22:21.218] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:22:21.230] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:22:21.253] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:22:21.255] [undefined] GET(/:id/channel/subscribed): user 2 is subscribed to channel 1 with status 200
[2025-08-13 17:24:13.878] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:24:13.888] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:24:13.911] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:24:13.915] [undefined] GET(/:id/channel/subscribed): user 2 is subscribed to channel 1 with status 200
[2025-08-13 17:24:21.570] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:24:21.579] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:24:21.613] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:24:21.616] [undefined] GET(/:id/channel/subscribed): user 2 is subscribed to channel 1 with status 200
[2025-08-13 17:24:54.126] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:24:54.135] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:24:54.174] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:24:54.177] [undefined] GET(/:id/channel/subscribed): user 2 is subscribed to channel 1 with status 200
[2025-08-13 17:25:05.451] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:25:05.460] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:25:05.478] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:25:05.481] [undefined] GET(/:id/channel/subscribed): user 2 is subscribed to channel 1 with status 200
[2025-08-13 17:25:06.220] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:25:06.230] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:25:06.244] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:25:06.248] [undefined] GET(/:id/channel/subscribed): user 2 is subscribed to channel 1 with status 200
[2025-08-13 17:25:28.777] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:25:28.787] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:25:28.803] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:25:28.806] [undefined] GET(/:id/channel/subscribed): user 2 is subscribed to channel 1 with status 200
[2025-08-13 17:25:30.067] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:25:30.076] [undefined] POST(/:id/subscribe): Successfully unsubscribed from channel with status 200
[2025-08-13 17:25:30.620] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:25:30.629] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:25:30.647] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:25:30.650] [undefined] GET(/:id/channel/subscribed): user 2 is not subscribed to channel 1 with status 200
[2025-08-13 17:25:31.978] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:25:31.986] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:25:32.000] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:25:32.003] [undefined] GET(/:id/channel/subscribed): user 2 is not subscribed to channel 1 with status 200
[2025-08-13 17:25:32.434] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:25:32.443] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:25:32.458] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:25:32.461] [undefined] GET(/:id/channel/subscribed): user 2 is not subscribed to channel 1 with status 200
[2025-08-13 17:25:49.395] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:25:49.404] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:25:49.423] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:25:49.426] [undefined] GET(/:id/channel/subscribed): user 2 is not subscribed to channel 1 with status 200
[2025-08-13 17:26:15.610] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:26:15.619] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:26:15.637] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:26:15.639] [undefined] GET(/:id/channel/subscribed): user 2 is not subscribed to channel 1 with status 200
[2025-08-13 17:26:29.494] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:26:29.503] [undefined] POST(/:id/subscribe): Successfully subscribed to channel with status 200
[2025-08-13 17:26:32.400] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:26:32.408] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:26:32.429] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:26:32.431] [undefined] GET(/:id/channel/subscribed): user 2 is subscribed to channel 1 with status 200
[2025-08-13 17:26:41.304] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:26:41.315] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:26:41.333] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:26:41.336] [undefined] GET(/:id/channel/subscribed): user 2 is subscribed to channel 1 with status 200
[2025-08-13 17:26:44.237] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:26:44.246] [undefined] POST(/:id/subscribe): Successfully unsubscribed from channel with status 200
[2025-08-13 17:26:45.215] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:26:45.224] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:26:45.249] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:26:45.251] [undefined] GET(/:id/channel/subscribed): user 2 is not subscribed to channel 1 with status 200
[2025-08-13 17:27:01.095] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:27:01.105] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:27:01.127] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:27:01.130] [undefined] GET(/:id/channel/subscribed): user 2 is not subscribed to channel 1 with status 200
[2025-08-13 17:27:02.190] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:27:02.198] [undefined] POST(/:id/subscribe): Successfully subscribed to channel with status 200
[2025-08-13 17:27:02.987] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:27:02.996] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:27:03.012] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:27:03.014] [undefined] GET(/:id/channel/subscribed): user 2 is subscribed to channel 1 with status 200
[2025-08-13 17:27:04.543] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:27:04.552] [undefined] POST(/:id/subscribe): Successfully unsubscribed from channel with status 200
[2025-08-13 17:27:05.236] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:27:05.246] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:27:05.262] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:27:05.265] [undefined] GET(/:id/channel/subscribed): user 2 is not subscribed to channel 1 with status 200
[2025-08-13 17:27:54.925] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:27:54.935] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:27:54.964] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:27:54.967] [undefined] GET(/:id/channel/subscribed): user 2 is not subscribed to channel 1 with status 200
[2025-08-13 17:27:55.768] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:27:55.777] [undefined] POST(/:id/subscribe): Successfully subscribed to channel with status 200
[2025-08-13 17:30:22.936] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:30:22.945] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:30:22.964] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:30:22.967] [undefined] GET(/:id/channel/subscribed): user 2 is subscribed to channel 1 with status 200
[2025-08-13 17:30:24.066] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:30:24.075] [undefined] POST(/:id/subscribe): Successfully unsubscribed from channel with status 200
[2025-08-13 17:30:25.190] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:30:25.198] [undefined] POST(/:id/subscribe): Successfully subscribed to channel with status 200
[2025-08-13 17:30:33.111] [undefined] GET(/:id): try to get channel with id 1
[2025-08-13 17:30:33.121] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
[2025-08-13 17:30:33.139] [undefined] GET(/:id/channel/subscribed): check if user 2 is subscribed to channel 1
[2025-08-13 17:30:33.142] [undefined] GET(/:id/channel/subscribed): user 2 is subscribed to channel 1 with status 200
[2025-08-13 17:30:33.992] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:30:34.001] [undefined] POST(/:id/subscribe): Successfully unsubscribed from channel with status 200
[2025-08-13 17:30:34.617] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:30:34.626] [undefined] POST(/:id/subscribe): Successfully subscribed to channel with status 200
[2025-08-13 17:30:37.582] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:30:37.590] [undefined] POST(/:id/subscribe): Successfully unsubscribed from channel with status 200
[2025-08-13 17:30:39.032] [undefined] POST(/:id/subscribe): try to toggle subscription for channel with id 1
[2025-08-13 17:30:39.041] [undefined] POST(/:id/subscribe): Successfully subscribed to channel with status 200

50
frontend/src/pages/Channel.jsx
View File

@ -1,9 +1,10 @@
import Navbar from "../components/Navbar.jsx";
import {useEffect, useState} from "react";
import {useParams} from "react-router-dom";
import {fetchChannelDetails} from "../services/channel.service.js";
import {fetchChannelDetails, subscribe} from "../services/channel.service.js";
import TabLayout from "../components/TabLayout.jsx";
import ChannelLastVideos from "../components/ChannelLastVideos.jsx";
import { isSubscribed } from "../services/user.service.js";
export default function Channel() {
@ -12,26 +13,46 @@ export default function Channel() {
const [alerts, setAlerts] = useState([]);
const [channel, setChannel] = useState(null);
const [isSubscribedToChannel, setIsSubscribedToChannel] = useState(false);
const tabs = [
{ id: 'last', label: 'Dernières vidéos', element: () => <ChannelLastVideos videos={channel && channel.videos.slice(0, 10)} /> },
{ id: 'all', label: 'Toutes les vidéos', element: () => <ChannelLastVideos videos={channel && channel.videos} /> },
];
useEffect(() => {
async function fetchAlerts() {
setChannel(await fetchChannelDetails(id, addAlert));
async function fetchData() {
const chan = await fetchChannelDetails(id, addAlert);
setChannel(chan);
// If not authenticated, isSubscribed may be undefined -> default to false
const subscribed = await isSubscribed(id, addAlert);
setIsSubscribedToChannel(Boolean(subscribed));
}
fetchAlerts();
}, [])
fetchData();
}, [id])
const addAlert = (type, message) => {
const newAlert = { type, message, id: Date.now() }; // Add unique ID
setAlerts([...alerts, newAlert]);
setAlerts(prev => [...prev, newAlert]);
};
const onCloseAlert = (alertToRemove) => {
setAlerts(alerts.filter(alert => alert !== alertToRemove));
}
const handleSubscribe = async () => {
try {
const result = await subscribe(id, addAlert);
// Update local counter from API response
const newCount = Number(result?.subscriptions ?? (channel?.subscriptions ?? 0));
setChannel(prev => (prev ? { ...prev, subscriptions: newCount } : prev));
// Toggle local subscription state and notify
const next = !isSubscribedToChannel;
setIsSubscribedToChannel(next);
} catch (e) {
// Error alert already handled in service
}
};
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} />
@ -50,6 +71,23 @@ export default function Channel() {
<h1 className="font-montserrat font-bold text-3xl text-white" >{channel && channel.name}</h1>
<p className="font-montserrat font-medium text-xl text-white" >{channel && channel.subscriptions} abonné(es)</p>
</div>
{
isSubscribedToChannel ? (
<button
className="ml-5 bg-primary text-white font-montserrat font-bold px-4 py-2 rounded-md cursor-pointer"
onClick={handleSubscribe}
>
se désabonner
</button>
) : (
<button
className="ml-5 bg-primary text-white font-montserrat font-bold px-4 py-2 rounded-md cursor-pointer"
onClick={handleSubscribe}
>
s'abonner
</button>
)
}
</div>
<h2 className="font-bold font-montserrat text-white text-xl mt-4" >Description</h2>

26
frontend/src/services/channel.service.js
View File

@ -12,4 +12,30 @@ export function fetchChannelDetails(channelId, addAlert) {
addAlert('error', "Erreur lors de la récupération des détails de la chaîne");
throw error;
});
}
export async function subscribe(channelId, addAlert) {
const token = localStorage.getItem('token');
const user = JSON.parse(localStorage.getItem('user'));
console.log("Subscribing to channel with ID:", channelId, "for user:", user.id);
return fetch(`/api/channels/${channelId}/subscribe`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': "application/json"
},
body: JSON.stringify({
userId: user.id
})
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.catch(error => {
addAlert('error', "Erreur lors de l'abonnement à la chaîne");
throw error;
});
}

18
frontend/src/services/user.service.js
View File

@ -0,0 +1,18 @@
export async function isSubscribed(channelId, addAlert) {
const token = localStorage.getItem('token');
if (!token) {
return;
}
const headers = {
Authorization: `Bearer ${token}`
};
const request = await fetch(`/api/users/${channelId}/channel/subscribed`, { headers })
const result = await request.json();
console.log("Subscription status for channel ID", channelId, ":", result);
return result.subscribed;
}
Write Preview
Loading…
Cancel
Save