fix add new video bug and add some validate

CodeYourFuture · Aug 17, 2023 · 17eaf0a · 17eaf0a
1 parent 0eb3a8a
commit 17eaf0a
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 22 deletions.
diff --git a/client/src/component/delete/DeleteComponent.js b/client/src/component/delete/DeleteComponent.js
@@ -10,7 +10,7 @@ const DeleteComponent = ({ id, onDeleteHandler }) => {
     try {
       const res = await axios.delete(url);
       if (res.status === 200) {
-        alert("Video with id has been deleted successfully");
+        alert("This Video has been deleted successfully");
       } else {
         alert("Video for ID requested is not found");
       }

diff --git a/client/src/component/newVideo/CreateNewVideo.js b/client/src/component/newVideo/CreateNewVideo.js
@@ -1,14 +1,21 @@
 import { React, useState } from "react";
 import axios from "axios";
+import '../newVideo/create.css';
 
 const CreateNewVideo = () => {
   const [title, setTitle] = useState("");
   const [url, setUrl] = useState("");
+  const [error, setError] = useState(false);
 
   const urlForNewVideo = "http://127.0.0.1:5000/videos/data/create";
 
   const clickHandler = async (e) => {
     e.preventDefault();
+    if (!title || !url) {
+      setError(true);
+      return false;
+    }
+
     try {
       const res = await axios.post(urlForNewVideo, {
         title,
@@ -32,6 +39,9 @@ const CreateNewVideo = () => {
       <div className="login-box">
         <form>
           <div className="user-box">
+            {error && !title && (
+              <span className="error-msg">You Must Enter Video Title..!!</span>
+            )}
             <input
               type="text"
               value={title}
@@ -40,6 +50,11 @@ const CreateNewVideo = () => {
             <label>Video Title</label>
           </div>
           <div className="user-box">
+            {error && !url && (
+              <span className="error-msg">
+                Warning: YouTube URL Must be Provided as Embed...!!
+              </span>
+            )}
             <input
               type=""
               value={url}

diff --git a/client/src/component/newVideo/create.css b/client/src/component/newVideo/create.css
@@ -0,0 +1,4 @@
+.error-msg {
+    color: red;
+    font-size: 15px;
+}
diff --git a/client/src/component/videos/Videos.js b/client/src/component/videos/Videos.js
@@ -38,7 +38,7 @@ const Videos = () => {
                 <iframe
                   className="embed-responsive-item"
                   src={`https://www.youtube.com/embed/${
-                    video.url.split("=")[1]
+                    video.url.split("=")[1] || video.url.split("embed/")[1]
                   }`}
                   title={video.title}
                   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -47,7 +47,7 @@ const Videos = () => {
               </div>
               <div className="card-body d-flex flex-column">
                 <h5 className="card-title">{video.title}</h5>
-                <div >{<LikeComponent />}</div>
+                <div>{<LikeComponent />}</div>
               </div>
               <div className="mt-auto">
                 <DeleteComponent

diff --git a/server/exampleresponse.json b/server/exampleresponse.json
@@ -1 +1 @@
-[{"id":523523,"title":"Never Gonna Give You Up","url":"https://www.youtube.com/watch?v=dQw4w9WgXcQ","rating":23},{"id":523427,"title":"The Coding Train","url":"https://www.youtube.com/watch?v=HerCR8bw_GE","rating":230},{"id":858566,"title":"Videos for Cats to Watch - 8 Hour Bird Bonanza","url":"https://www.youtube.com/watch?v=xbs7FT7dXYc","rating":11},{"id":283634,"title":"Learn Unity - Beginner's Game Development Course","url":"https://www.youtube.com/watch?v=gB1F9G0JXOo","rating":211},{"id":562824,"title":"Cracking Enigma in 2021 - Computerphile","url":"https://www.youtube.com/watch?v=RzWB5jL5RX0","rating":111},{"id":442452,"title":"Coding Adventure: Chess AI","url":"https://www.youtube.com/watch?v=U4ogK0MIzqk","rating":671},{"id":536363,"title":"Coding Adventure: Ant and Slime Simulations","url":"https://www.youtube.com/watch?v=X-iSQQgOd1A","rating":76},{"id":323445,"title":"Why the Tour de France is so brutal","url":"https://www.youtube.com/watch?v=ZacOS8NBK6U","rating":73}]
+[{"id":523523,"title":"Never Gonna Give You Up","url":"https://www.youtube.com/watch?v=dQw4w9WgXcQ","rating":23},{"id":523427,"title":"The Coding Train","url":"https://www.youtube.com/watch?v=HerCR8bw_GE","rating":230},{"id":858566,"title":"Videos for Cats to Watch - 8 Hour Bird Bonanza","url":"https://www.youtube.com/watch?v=xbs7FT7dXYc","rating":11},{"id":283634,"title":"Learn Unity - Beginner's Game Development Course","url":"https://www.youtube.com/watch?v=gB1F9G0JXOo","rating":211},{"id":562824,"title":"Cracking Enigma in 2021 - Computerphile","url":"https://www.youtube.com/watch?v=RzWB5jL5RX0","rating":111},{"id":442452,"title":"Coding Adventure: Chess AI","url":"https://www.youtube.com/watch?v=U4ogK0MIzqk","rating":671},{"id":536363,"title":"Coding Adventure: Ant and Slime Simulations","url":"https://www.youtube.com/watch?v=X-iSQQgOd1A","rating":76},{"id":323445,"title":"Why the Tour de France is so brutal","url":"https://www.youtube.com/watch?v=ZacOS8NBK6U","rating":73},{"id":323446,"title":"test new video","url":"https://www.youtube.com/embed/uVwtVBpw7RQ"}]
diff --git a/server/server.js b/server/server.js
@@ -13,28 +13,36 @@ app.use(cors());
 // If you want, you can copy "exampleresponse.json" into here to have some data to work with
 let videos = videosData;
 
-const validateData = [
+const newVideoValidate = [
   body("title").trim().notEmpty(),
-  body("url").trim().notEmpty().isURL(),
-  body("name")
+  body("url")
     .trim()
     .notEmpty()
-    .isLength({ min: 3 })
-    .withMessage("Name must be at less 3 characters"),
-  body("email")
-    .trim()
-    .notEmpty()
-    .isEmail()
-    .toLowerCase()
-    .normalizeEmail()
-    .withMessage("Email must be a valid email"),
-  body("password")
-    .trim()
-    .notEmpty()
-    .withMessage("You must enter your password"),
+    .isURL()
+    .isLength({ min: 30 })
+    .withMessage("Warning: YouTube URL Must be Provided as Embed"),
 ];
 
-// GET "/"
+// const validateData = [
+//   body("name")
+//     .trim()
+//     .notEmpty()
+//     .isLength({ min: 3 })
+//     .withMessage("Name must be at less 3 characters"),
+//   body("email")
+//     .trim()
+//     .notEmpty()
+//     .isEmail()
+//     .toLowerCase()
+//     .normalizeEmail()
+//     .withMessage("Email must be a valid email"),
+//   body("password")
+//     .trim()
+//     .notEmpty()
+//     .withMessage("You must enter your password"),
+// ];
+
+
 app.get("/", (req, res) => {
   // Delete this line after you've confirmed your server is running
   res.send({ express: "Your Backend Service is Running" });
@@ -50,7 +58,7 @@ app.get("/videos/data/:id", (req, res) => {
   res.status(200).send(getVideoByID);
 });
 
-app.post("/videos/data/create", validateData, (req, res) => {
+app.post("/videos/data/create", newVideoValidate, (req, res) => {
   const errors = validationResult(req);
   if (!errors.isEmpty()) {
     return res.status(400).json({ errors: errors.array() });