-
-
+
);
})}
diff --git a/langjo-frontend/src/components/NavBar/NavBar.js b/langjo-frontend/src/components/NavBar/NavBar.js
index 809d03f..4c06f8f 100644
--- a/langjo-frontend/src/components/NavBar/NavBar.js
+++ b/langjo-frontend/src/components/NavBar/NavBar.js
@@ -35,7 +35,7 @@ function NavBar() {
Beginner
-
Intermadite
+
Intermediate
Advance
Quiz
diff --git a/langjo-frontend/src/components/VideoPage/VideoPage.js b/langjo-frontend/src/components/VideoPage/VideoPage.js
new file mode 100644
index 0000000..c62fa39
--- /dev/null
+++ b/langjo-frontend/src/components/VideoPage/VideoPage.js
@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+
+
+const VideoPage = () => {
+ const videoId = useParams();
+ const [videoData, setVideoData] = useState(null);
+ useEffect(() => {
+ const fetchVideoData = async () => {
+ try {
+ const res = await fetch(
+ `http://localhost:5000/api/videos/beginners-level/${videoId.id}`
+ );
+ if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
+ const data = await res.json();
+ setVideoData(data.data);
+ } catch (error) {
+ console.error("Failed to fetch video data:", error);
+ }
+ };
+ fetchVideoData();
+ }, [videoId]);
+ if (!videoData) {
+ return (
+
+ );
+ }
+ const videoGet =
+ (videoData.videoUrl && videoData.videoUrl.split("/").pop()) || "";
+ return (
+
+
+
+
{videoData.title}
+
{videoData.desc}
+
+ VIDEO
+
+
+
+
+ );
+};
+export default VideoPage;
diff --git a/langjo-frontend/src/pages/Pages.js b/langjo-frontend/src/pages/Pages.js
index 82dd8db..82cced4 100644
--- a/langjo-frontend/src/pages/Pages.js
+++ b/langjo-frontend/src/pages/Pages.js
@@ -6,6 +6,8 @@ import LogIn from "../components/LogIn/LogIn";
import BeginnerLevel from "../components/BeginnerLevel/BeginnerLevel";
import EnglishLevel from "../components/EnglishLevel/EnglishLevel";
import BlockCards from "../components/BlockCards/BlocksCards";
+import VideoPage from "../components/VideoPage/VideoPage";
+
function Pages() {
return (
@@ -17,6 +19,7 @@ function Pages() {
} />
} />
} />
+
} />
);
diff --git a/server/controllers/video.js b/server/controllers/video.js
index 87c98a9..cc9c380 100644
--- a/server/controllers/video.js
+++ b/server/controllers/video.js
@@ -10,6 +10,21 @@ export const createVideo = async (req, res, next) => {
};
export const displayVideo = async (req, res, next) => {
+ try {
+ const videoId = req.params.id;
+ const video = await Video.findById(videoId);
+ if (!video) {
+ return res
+ .status(404)
+ .json({ success: false, message: "Video not found" });
+ }
+ res.status(200).json({ success: true, data: video });
+ } catch (error) {
+ next(error);
+ }
+};
+
+export const displayVideos = async (req, res, next) => {
try {
const video = await Video.find();
res.status(200).json({ success: true, data: video });
@@ -17,3 +32,24 @@ export const displayVideo = async (req, res, next) => {
next(error);
}
};
+export const getVideo = async (req, res, next) => {
+ try {
+ const video = await Video.findById(req.params.id);
+ res.status(200).json({ success: true, data: video });
+ } catch (error) {
+ next(error);
+ }
+};
+export const getVideoByTitle = async (req, res, next) => {
+ try {
+ const video = await Video.findOne({ title: req.params.title });
+ if (!video) {
+ return res
+ .status(404)
+ .json({ success: false, message: "Video not found" });
+ }
+ res.status(200).json({ success: true, data: video });
+ } catch (error) {
+ next(error);
+ }
+};
diff --git a/server/index.js b/server/index.js
index c431e5d..73e4197 100644
--- a/server/index.js
+++ b/server/index.js
@@ -2,18 +2,14 @@ import express from "express";
import mongoose from "mongoose";
import cors from "cors";
import * as dotenv from "dotenv";
-import { userRouter } from "./routes/users.js"
-import { videoRouter } from "./routes/beginners-level.js"
+import { userRouter } from "./routes/users.js";
+import { videoRouter } from "./routes/beginners-level.js";
import { authRouter } from "./routes/auth.js";
import { commentRouter } from "./routes/comment.js";
import cookieParser from "cookie-parser";
-
dotenv.config();
-
const PORT = process.env.PORT || 5000;
const app = express();
-
-// Enable CORS for all routes
app.use(
cors({
origin: "http://localhost:3000",
@@ -21,33 +17,24 @@ app.use(
allowedHeaders: "Content-Type, Authorization, X-Requested-With, Accept",
})
);
-
const connect = () => {
mongoose.connect(
"mongodb+srv://chioma:chioma@cluster0.cfdz7fx.mongodb.net/?retryWrites=true&w=majority"
);
};
-
-app.get('/', (req, res) => {
- res.json({ message: "This is LangJo App 🏴!" });
-})
-app.use(cookieParser())
+app.get("/", (req, res) => {
+ res.json({ message: "This is LangJo App :flag-england:!" });
+});
+app.use(cookieParser());
app.use(express.json());
-app.use("/api/auth", authRouter)
-app.use("/api/users", userRouter)
-app.use("/api/videos", videoRouter)
-app.use("/api/comments", commentRouter)
-
-// API routes
+app.use("/api/auth", authRouter);
app.use("/api/users", userRouter);
-app.use("/api/videos", videoRouter);
-
-// Error-handling middleware
+app.use("/api/videos", videoRouter); // This route will handle both "/api/videos/" and "/api/videos/:id"
+app.use("/api/comments", commentRouter);
app.use((error, req, res, next) => {
- // Error handling code
+ res.status(500).json({ message: error.message });
});
-
+connect();
app.listen(PORT, () => {
- connect();
console.log(`Listening on port ${PORT}`);
});
diff --git a/server/package-lock.json b/server/package-lock.json
index 1f4244d..0033b25 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -10,12 +10,16 @@
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
+ "buffer-equal-constant-time": "^1.0.1",
"cookie-parser": "^1.4.6",
+ "cors": "^2.8.5",
"dotenv": "^16.1.3",
"express": "^4.18.2",
"jsonwebtoken": "^9.0.0",
+ "mongodb": "^5.6.0",
"mongoose": "^7.3.4",
- "nodemon": "^2.0.22"
+ "nodemon": "^2.0.22",
+ "yallist": "^4.0.0"
}
},
"node_modules/@types/node": {
@@ -140,6 +144,11 @@
"node": ">=14.20.1"
}
},
+ "node_modules/buffer-equal-constant-time": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+ "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
+ },
"node_modules/bytes": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -1310,6 +1319,11 @@
"engines": {
"node": ">=12"
}
+ },
+ "node_modules/yallist": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
}
}
}
diff --git a/server/package.json b/server/package.json
index 1d6c391..e7ff2b5 100644
--- a/server/package.json
+++ b/server/package.json
@@ -12,14 +12,16 @@
"author": "",
"license": "ISC",
"dependencies": {
- "cors": "^2.8.5",
- "mongodb": "^5.6.0",
"bcryptjs": "^2.4.3",
+ "buffer-equal-constant-time": "^1.0.1",
"cookie-parser": "^1.4.6",
+ "cors": "^2.8.5",
"dotenv": "^16.1.3",
"express": "^4.18.2",
"jsonwebtoken": "^9.0.0",
+ "mongodb": "^5.6.0",
"mongoose": "^7.3.4",
- "nodemon": "^2.0.22"
+ "nodemon": "^2.0.22",
+ "yallist": "^4.0.0"
}
}
diff --git a/server/routes/beginners-level.js b/server/routes/beginners-level.js
index 40ab754..68df77c 100644
--- a/server/routes/beginners-level.js
+++ b/server/routes/beginners-level.js
@@ -1,6 +1,15 @@
import express from "express";
import cors from "cors";
-import { displayVideo, createVideo } from "../controllers/video.js";
+
+import {
+ getVideo,
+ getVideoByTitle,
+ displayVideo,
+ createVideo,
+ displayVideos,
+} from "../controllers/video.js";
+import { verifyToken } from "../verifyToken.js";
+
const app = express();
app.use(
@@ -15,7 +24,11 @@ app.use(
app.use(express.json());
const videoRouter = express.Router();
-videoRouter.get("/beginners-level", displayVideo);
+videoRouter.get("/beginners-level", displayVideos);
+videoRouter.get("/beginners-level/:id", displayVideo);
+videoRouter.get("/beginners-level", displayVideos);
videoRouter.post("/beginners-level", createVideo);
-
+videoRouter.get("/beginners-level/:videoId", getVideo);
+videoRouter.put("/beginners-level/:videoId", verifyToken);
+videoRouter.get("/title/:title", getVideoByTitle);
export { videoRouter };
diff --git a/server/routes/videos.js b/server/routes/videos.js
new file mode 100644
index 0000000..7c538e9
--- /dev/null
+++ b/server/routes/videos.js
@@ -0,0 +1,19 @@
+import express from "express";
+import { getVideo, createVideo } from "../controllers/video.js";
+import { verifyToken } from "../verifyToken.js";
+
+const videoRouter = express.Router();
+
+// get all videos
+videoRouter.get("/videos", getVideo);
+
+// create a new video
+videoRouter.post("/videos", createVideo);
+
+// get a video
+videoRouter.get("/videos/:videoId", getVideo);
+
+// put a video
+videoRouter.put("/videos/:videoId", verifyToken);
+
+export { videoRouter };