Frontend/feature/moderation-not-moderator-jury-backend-connections

prediction-polls/frontend/src/Components/TagSelection/index.jsx

@@ -1,30 +1,38 @@
-import React, { useState } from "react";
+// TagSelection.js
+import React, { useState, useEffect } from "react";
 import styles from './TagSelection.module.css';
-import { Checkbox } from "antd";
 
-const mockTags = ["sport", "NBA", "education"];
+const TagSelection = ({ initialTags, onTagChange }) => {
+  const [tags, setTags] = useState([]);
+
+  useEffect(() => {
+    // Ensure initialTags is defined before setting the state
+    if (initialTags) {
+      setTags(initialTags);
+    }
+  }, [initialTags]);
 
-const TagSelection = ({ selectedTags, onTagChange }) => {
   const handleTagChange = (tag) => {
-    const updatedTags = selectedTags.includes(tag)
-      ? selectedTags.filter((selectedTag) => selectedTag !== tag)
-      : [...selectedTags, tag];
+    const updatedTags = tags.map((t) =>
+      t.topic === tag.topic ? { ...t, isSelected: !t.isSelected } : t
+    );
 
+    setTags(updatedTags);
     onTagChange(updatedTags);
   };
 
   return (
     <div className={styles.tagSelection}>
-      <p className={styles.tagTitle}>Select Tags</p>
+      <p className={styles.tagTitle}>Select Tags:</p>
       <div className={styles.tagList}>
-        {mockTags.map((tag) => (
-          <label key={tag} className={styles.tagLabel}>
-            <Checkbox
-              className={styles.tagCheckbox}
-              checked={selectedTags.includes(tag)}
-              onChange={() => handleTagChange(tag)}
+        {tags.map(({ topic, isSelected }) => (
+          <label key={topic} className={styles.tagLabel}>
+            <input
+              type="checkbox"
+              checked={isSelected}
+              onChange={() => handleTagChange({ topic, isSelected })}
             />
-            {tag}
+            {topic}
           </label>
         ))}
       </div>

prediction-polls/frontend/src/Pages/Moderation/Moderation.module.css

@@ -44,6 +44,30 @@
     text-align: center;
   }
 
+  .message {
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 10px;
+    background-color: #4caf50;
+    color: #fff;
+    text-align: center;
+    z-index: 1000;
+  }
+
+  .message2 {
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 10px;
+    background-color: var(--warning-400);
+    color: #fff;
+    text-align: center;
+    z-index: 1000;
+  }
+
 .text {
     font-size: 20px;
     font-weight: 700;

prediction-polls/frontend/src/Pages/Moderation/index.jsx

@@ -3,7 +3,6 @@ import React, { useEffect } from "react";
 import Menu from "../../Components/Menu";
 import styles from "./Moderation.module.css";
 import { Button } from "antd";
-import SearchBar from "../../Components/SearchBar";
 import { useNavigate } from "react-router-dom";
 import PollTag from "../../Components/PollTag";
 import PointsButton from "../../Components/PointsButton";
@@ -16,9 +15,98 @@ function Moderation() {
   const [userData, setUserData] = useState({});
   const [moderatorPosts, setModeratorPosts] = useState([]);
   const [selectedTags, setSelectedTags] = useState([]);
+  const [message, setMessage] = useState(null);
+  const [tags, setTags] = useState([]);
+  const [prevTags, setPrevTags] = useState(null);
 
-  const handleTagChange = (tags) => {
-    setSelectedTags(tags);
+  const showMessage = (text) => {
+    setMessage(text);
+
+    // Automatically hide the message after a certain duration (e.g., 3000 milliseconds)
+    setTimeout(() => {
+      setMessage(null);
+    }, 9000);
+  };
+
+  useEffect(() => {
+    // Make a GET request to fetch available tags from the backend
+    const fetchData = async () => {
+      try {
+        const response = await fetch(url + "/moderators/my-tags", {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+        setTags(result);
+        setPrevTags(result);
+      } catch (error) {
+        console.error('Error fetching tags:', error.message);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const handleTagChange = (updatedTags) => {
+    // This function will be called whenever a tag is selected/unselected
+    // You can use the updatedTags array to track the current state of tags
+
+    const selectedCount = updatedTags.reduce((count, tag) => (tag.isSelected ? count + 1 : count), 0);
+
+    if (selectedCount === 0 || selectedCount > 5) {
+      showMessage('Please select at least one tag and at most 5 tags.');
+      return;
+    }
+
+    const updatedTagsWithNumbers = updatedTags.map((tag) => ({
+      topic: tag.topic,
+      isSelected: tag.isSelected ? 1 : 0,
+    }));
+
+    let lastUpdatedTag;
+    if (prevTags) {
+      lastUpdatedTag = updatedTags.find((tag) => {
+        const prevTag = prevTags.find((prev) => prev.topic === tag.topic);
+        return prevTag && prevTag.isSelected !== tag.isSelected;
+      });
+    }
+
+
+    const postUpdatedTags = async () => {
+      try {
+        const response = await fetch(url + '/moderators/my-tags', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+          },
+          body: JSON.stringify({
+            topic: lastUpdatedTag.topic,
+            isSelected: lastUpdatedTag.isSelected ? 1 : 0,
+          }),
+        });
+
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+
+        // Handle success
+      } catch (error) {
+        console.error('Error updating tags:', error.message);
+      }
+    };
+
+    postUpdatedTags();
+    handlePostUpdate(); 
+
+
+
+    // Update the previous state with the current state
+    setPrevTags(updatedTags);
   };
 
   useEffect(() => {
@@ -52,10 +140,83 @@ function Moderation() {
     fetchData();
   }, []);
 
-  const isModerator = true;
+  const handlePostUpdate = () => {
+
+    const fetchData = async () => {
+      try {
+        const response = await fetch(url + "/moderators/my-requests", {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+
+        const result = await response.json();
+        setModeratorPosts(result);
+      } catch (error) {
+        console.error("Error fetching data:", error.message);
+      }
+    };
+
+    // Call the function to fetch data
+    fetchData();
+
+  }
+
+  const handleGetTagUpdate = () => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(url + "/moderators/my-tags", {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+        setTags(result);
+        setPrevTags(result);
+      } catch (error) {
+        console.error('Error fetching tags:', error.message);
+      }
+    };
+
+    fetchData();
+  }
+
+  const isModerator = userData?.isMod;
 
   const handleBecomeModerator = () => {
     console.log("User wants to become a moderator");
+    const fetchData = async () => {
+      try {
+        const response = await fetch(url + "/moderators/request-promotion", {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+
+        showMessage('Your application to become a moderator has been submitted successfully.');
+
+      } catch (error) {
+        console.error("Error fetching data:", error.message);
+      }
+    };
+
+    // Call the function to fetch data
+    fetchData();
   };
 
   const handleBecomeJury = () => {
@@ -99,11 +260,16 @@ function Moderation() {
           <div className={styles.tagContainer}>
             <div className={styles.selectedTags}>
               <TagSelection
-                selectedTags={selectedTags}
+                initialTags={tags}
                 onTagChange={handleTagChange}
               />
             </div>
           </div>
+          {message && (
+            <div className={styles.message2}>
+              {message}
+            </div>
+          )}
           <PointsButton point={userData?.points ?? 0} />
         </>
       ) : (
@@ -119,7 +285,13 @@ function Moderation() {
             >
               Apply
             </Button>
+
           </div>
+          {message && (
+            <div className={styles.message}>
+              {message}
+            </div>
+          )}
           <PointsButton point={userData?.points ?? 0} />
         </>
       )}