level 199

CodeYourFuture · Aug 13, 2023 · 3c67dc3 · 3c67dc3
1 parent f472443
commit 3c67dc3
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 9 deletions.
diff --git a/client/src/AddingItem.js b/client/src/AddingItem.js
@@ -19,13 +19,24 @@ export default function AddingItem({addVideo, id}) {
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    addVideo(newVideo);
-    setNewVideo({
-      id: id + 1, 
-      title: "",
-      url: "",
-      rating: 0,
-    });
+    const pattern =
+      /^(https?:\/\/)?(www\.)?youtube\.com\/watch\?v=([a-zA-Z0-9_-]{11})/;
+      const pattern2 =
+        /^(https?:\/\/)?(www\.)?youtube\.com\/embed\/[a-zA-Z0-9_-]{11}$/;
+    //   https://www.youtube.com/embed/dQw4w9WgXcQ
+      if (pattern.test(newVideo.url) || pattern2.test(newVideo.url)) {
+        const time = new Date();
+    const formattedTime = time.toLocaleString();
+         addVideo({...newVideo, dateTime: formattedTime});
+         setNewVideo({
+           id: id + 1,
+           title: "",
+           url: "",
+           rating: 0,
+         });
+      } else {
+        alert("Not a valid YouTube URL");
+      }
   };
     return (
       <div className="adding-item">
@@ -43,6 +54,7 @@ export default function AddingItem({addVideo, id}) {
               <input
                 type="text"
                 name="title"
+                required
                 value={newVideo.title}
                 onChange={handleTitleChange}
               ></input>

diff --git a/client/src/App.css b/client/src/App.css
@@ -75,6 +75,13 @@ body {
   margin-left: 3px;
 }
 
+.uploaded-time {
+  display: flex;
+  align-self: flex-end;
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+
 .video-form {
   background-color: #162232;
   border-radius: 10px;

diff --git a/client/src/App.js b/client/src/App.js
@@ -37,7 +37,7 @@ function App() {
       </header>
       <AddingItem addVideo = {addVideo} id={videos.length}/>
       <div className="video-container">
-        {videos.map((video) => (
+        {videos.sort((a, b) => b.rating - a.rating).map((video) => (
           <Videocard
             key={video.id}
             video={video}

diff --git a/client/src/Videocard.js b/client/src/Videocard.js
@@ -43,7 +43,9 @@ function Videocard({ video, onUpVote, onDownVote, onRemove }) {
           Remove
         </button>
         </div>
-
+      </div>
+      <div className="uploaded-time">
+        Uploaded: {video.dateTime? video.dateTime : ""}
       </div>
     </div>
   );