Merge pull request #4 from Bhanubediya/bhanu

added valdation and added Assets folder to store png
Maleehak · Apr 30, 2024 · da40d10 · da40d10
2 parents 5655750 + e4e4923
commit da40d10
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 20 deletions.
diff --git a/frontend/briefme/src/App.css b/frontend/briefme/src/App.css
@@ -75,6 +75,7 @@
 
 .url-input-textbox{
   border: 1px dashed #7f7f75;
+  border-radius: 1.5em;
   padding: 10px;
   font-size: 16px;
   width: 80%;

diff --git a/frontend/briefme/public/image.png → frontend/briefme/src/Assets/image.png b/frontend/briefme/public/image.png → frontend/briefme/src/Assets/image.png
diff --git a/frontend/briefme/src/components/Left.js b/frontend/briefme/src/components/Left.js
@@ -1,5 +1,5 @@
 import React from "react";
-
+import image from "../Assets/image.png"
 const Left = () => {
 
   const handleExternalLinkClick = (event) => {
@@ -15,13 +15,13 @@ const Left = () => {
       <div className="description">
         Just enter the url of any Youtube video and get summary within few seconds.
       </div>
-      <img src="image.png" alt="Left Section" className="image"/>
+      <img src={image} alt="Left Section" className="image"/>
 
-      <footer class="left-footer">
+      <footer className="left-footer">
         <a href="https://github.com/Maleehak/BriefMe" onClick={handleExternalLinkClick}>
            View on Github
         </a>
-        <div class="divider">|</div>
+        <div className="divider">|</div>
         <a href="https://www.linkedin.com/in/maleehak/" onClick={handleExternalLinkClick}>
            About the Author
         </a>

diff --git a/frontend/briefme/src/components/Right.js b/frontend/briefme/src/components/Right.js
@@ -9,15 +9,27 @@ const Right = () => {
   const [summary, setSummary] = useState('');
   const [loading, setLoading] = useState(false);
   const [numberOfLines, setNumberOfLines] = useState(4);
+  const [isValidURL, setisValidURL] = useState(false);
 
   const handleChange = (event) => {
-      // Handle changes in the input field
-      setInputUrl(event.target.value);
+    // Handle changes in the input field
+    let url = event.target.value;
+    setInputUrl(url);
+    // Handles input validation state
+    setisValidURL(isValidYoutubeUrl(url));
+  };
+
+  const isValidYoutubeUrl = (url) => {
+    // Regular expression for matching YouTube URLs
+    const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+    return youtubeRegex.test(url);
   };
 
   const handleClick = () => {
-    console.log('Button clicked!');
-    fetchSummary()
+    console.log("Button clicked!");
+    if (isValidURL) {
+      fetchSummary();
+    }
   };
 
   const fetchSummary = async () => {
@@ -28,7 +40,7 @@ const Right = () => {
           video: inputUrl,
           lines: numberOfLines
         },
-      }); 
+      });
       setSummary(response.data);
     } catch (error) {
       setSummary("Unable to process request at the momemt. " +error);
@@ -43,23 +55,18 @@ const Right = () => {
 
   return (
     <div className="vertical-component-right">
-      <input
-        type="text"
-        value={inputUrl}
-        onChange={handleChange}
-        placeholder="Enter url here"
-        className="url-input-textbox" 
-      />
+      <input type="text" value={inputUrl} onChange={handleChange} placeholder="Enter url here" className="url-input-textbox" />
+      {!isValidURL && inputUrl && <p style={{ color: "red" }}>Please enter a valid YouTube URL</p>}
       <div className="selection-container">
-          <p className="selection-text">No. of lines: </p>
-          <SelectBox onSelect={handleSelect} />
+        <p className="selection-text">No. of lines: </p>
+        <SelectBox onSelect={handleSelect} />
       </div>
       <div style={{ display: "flex", width: "83%" }}>
         <button onClick={handleClick} className="submit-btn">
           Summarize
         </button>
       </div>
-    
+
       {loading && 
         <Box sx={{ width: '82%', color: 'orange' }}>
           <LinearProgress color="inherit" />
@@ -71,7 +78,7 @@ const Right = () => {
         onChange={handleChange}
         className="summary-textbox" 
       />
-    </div>
+      </div>
   );
 }