valiodationtasks

The-Conspiracy-World · Nov 7, 2024 · 4779896 · 4779896
1 parent 1ff449f
commit 4779896
Show file tree

Hide file tree

Showing 5 changed files with 281 additions and 138 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,8 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@google/generative-ai": "^0.3.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

diff --git a/src/Pages/New Post/newpost.js b/src/Pages/New Post/newpost.js
@@ -1,4 +1,4 @@
-import {React, useEffect} from "react";
+import { React, useEffect } from "react";
 import './newpost.css';
 import { initializeApp } from "firebase/app";
 import { getFirestore } from "firebase/firestore";
@@ -26,18 +26,18 @@ function Newpost() {
     useEffect(() => {
         // Set the document title when the component is mounted
         document.title = "New Post";
-    
+
         // Optionally reset the title when the component is unmounted
         return () => {
-          document.title = 'The Conspiracy World';
+            document.title = 'The Conspiracy World';
         };
-      }, []);
+    }, []);
     const navigate = useNavigate();
     const location = useLocation();
     const queryParams = new URLSearchParams(location.search);
     const userid = queryParams.get('userid');
-    const usertype= queryParams.get('usertype');
-    console.log('userid: '+userid);
+    const usertype = queryParams.get('usertype');
+    console.log('userid: ' + userid);
     async function PostTheory() {
         var reference = document.getElementById('refp').innerHTML;
         reference = reference.replace(/<br>/g, ',');
@@ -46,6 +46,11 @@ function Newpost() {
         }
         var content = document.getElementById('content').value;
         var title = document.getElementById('title').value;
+        if (!title || title == " " || !content || content == " " || !reference || reference == " ") {
+            alert('Please fill in all fields.');
+            return
+        }
+
         const Data = {
             Title: title,
             Content: content,
@@ -56,17 +61,17 @@ function Newpost() {
             MythVotes: 0,
             UserId: userid,
             Chats: [],
-            CreatedDT:Timestamp.now()
+            CreatedDT: Timestamp.now()
         };
-        try{
-            await addDoc(collection(firestore,'posts'), Data);
+        try {
+            await addDoc(collection(firestore, 'posts'), Data);
             alert('Post saved');
-            navigate('/home?userid='+userid+'&usertype='+usertype);
+            navigate('/home?userid=' + userid + '&usertype=' + usertype);
         }
-        catch(error){
+        catch (error) {
             alert(error.message);
         }
-        
+
     }
 
 
@@ -75,9 +80,9 @@ function Newpost() {
         p.style.display = "block";
         var data = document.getElementById('ref-in').value;
         if (data.startsWith('http')) {
-            
-                p.innerHTML += data + "<br>";
-            
+
+            p.innerHTML += data + "<br>";
+
 
         }
         else {
@@ -100,12 +105,12 @@ function Newpost() {
                         <input className="text-input" id="ref-in" type="text" />
                         <button className="add" onClick={add} type="button" style={{
                             fontSize: "150%",
-                            paddingLeft:"2%",
-                            paddingRight:"2%",
-                            width:"max-content",
+                            paddingLeft: "2%",
+                            paddingRight: "2%",
+                            width: "max-content",
                             backgroundColor: "#555555",
-                            color:"InfoBackground",
-                            borderRadius:"5px"
+                            color: "InfoBackground",
+                            borderRadius: "5px"
                         }}>+</button>
                         <div id="refp" hidden> </div>
                     </div>
@@ -114,9 +119,9 @@ function Newpost() {
                         fontSize: "100%",
                         width: "100%",
                         padding: "1%",
-                        textAlign:"center",
-                        marginTop:"2%",
-                        border:"1px solid white"
+                        textAlign: "center",
+                        marginTop: "2%",
+                        border: "1px solid white"
                     }}>Post</button>
                 </form>
             </div>

diff --git a/src/Pages/Profile/Profile.css b/src/Pages/Profile/Profile.css
@@ -46,4 +46,92 @@ header {
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.post-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.post-icons {
+    display: flex;
+    gap: 10px;
+}
+
+.icon {
+    cursor: pointer;
+    font-size: 1rem;
+    color: #c6c5c5;
+}
+
+.icon:hover {
+    color: #555;
+}
+
+
+/* Edit Form Header */
+.edit-form-header {
+    background-color: #333;
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+    font-size: 1.5rem;
+    border-radius: 8px 8px 0 0;
+}
+
+/* Edit Form Container */
+.edit-form-container {
+    max-width: 600px;
+    margin: 40px auto;
+    padding: 20px;
+    border-radius: 8px;
+    background-color: #f9f9f900;
+    color: white;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Form Fields */
+.edit-form-container input[type="text"],
+.edit-form-container textarea {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 1rem;
+    background-color: #3b3b3b;
+}
+
+/* Form Buttons */
+.edit-form-container .button-group {
+    display: flex;
+    justify-content: space-between;
+}
+
+.edit-form-container button {
+    padding: 10px 20px;
+    font-size: 1rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.edit-form-container .save-button {
+    background-color: #4CAF50;
+    color: white;
+}
+
+.edit-form-container .save-button:hover {
+    background-color: #45a049;
+}
+
+.edit-form-container .cancel-button {
+    background-color: #f44336;
+    color: white;
+}
+
+.edit-form-container .cancel-button:hover {
+    background-color: #e31e1e;
 }