Frontend/feature/poll tag

prediction-polls/frontend/src/App.js

@@ -7,8 +7,7 @@ function App() {
   return (
     <ThemeProvider>
       <ModalContextProvider>
-        <AppRouter />
-        <Modals/>     
+        <AppRouter />    
       </ModalContextProvider>
     </ThemeProvider>
 

prediction-polls/frontend/src/Components/Modals/PollTagModal.jsx

@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import { Button, Modal } from "antd";
+import useModal from "../../contexts/ModalContext/useModal";
+import { ModalNames } from "../../contexts/ModalContext/ModalNames";
+import styles from "./PollTagModal.module.css";
+import getTags from "../../api/requests/getTags";
+import addPollTag from "../../api/requests/addPollTag";
+import { useNavigate } from "react-router-dom";
+
+const PollTagModal = ({pollId}) => {
+  const { modals, closeModal } = useModal();
+  const [category, setCategory] = React.useState("");
+  const [tagResponse, setTagResponse] = React.useState(null);
+  const [selectedTags, setSelectedTags] = useState([]);
+  const navigate = useNavigate();
+  const getTagResponse = async () => {
+    try {
+      const response = await getTags({ keyword: category });
+      if (response) {
+        setTagResponse(response);
+      }
+    } catch (error) {
+      console.error("Error fetching profile data:", error);
+    }
+  };
+
+  const handleFindCategories = async () => {
+    await getTagResponse();
+  };
+
+  const handleOk = async () => {
+    let allSuccessful = true; 
+
+    for (const tagId of selectedTags) {
+      const tagData = {
+        pollId: pollId,
+        semanticTag: tagId
+      };
+
+      try {
+        const response = await addPollTag(tagData);
+        if (!response) {
+          allSuccessful = false;
+          break; 
+        }
+      } catch (error) {
+        allSuccessful = false;
+        break; 
+      }
+    }
+
+    if (allSuccessful) {
+      closeModal(ModalNames.PollTagModal);
+      navigate('/feed');
+    }
+  };
+
+  const handleCancel = () => {
+    closeModal(ModalNames.PollTagModal);
+  };
+
+  const toggleTagSelection = (tagId) => {
+    if (selectedTags.includes(tagId)) {
+      setSelectedTags(selectedTags.filter((id) => id !== tagId));
+    } else {
+      setSelectedTags([...selectedTags, tagId]);
+    }
+  };
+
+  return (
+    <>
+      <Modal
+        title="Add Poll Categories"
+        open={modals[ModalNames.PollTagModal]}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        footer={[
+          <Button key="submit" type="primary" onClick={handleOk}>
+            Add
+          </Button>,
+        ]}
+      >
+        <div className={styles.container}>
+          <p className={styles.text}>Can you add a category to your poll?</p>
+
+          <input
+            type="text"
+            placeholder="Enter a category"
+            value={category}
+            onChange={(e) => setCategory(e.target.value)}
+            className={styles.inputStyle}
+          />
+          <button onClick={handleFindCategories} className={styles.buttonStyle}>
+            Find Available Categories
+          </button>
+          <p className={styles.text}>
+            Available Categories(Multiple can be selected)
+          </p>
+          {tagResponse === null ? null : tagResponse.length > 0 ? (
+            <div className={styles.optionContainer}>
+              {tagResponse.map((tag) => (
+                <div
+                  key={tag.id}
+                  className={`${styles.option} ${
+                    selectedTags.includes(tag.id) ? styles.selectedOption : ""
+                  }`}
+                  onClick={() => toggleTagSelection(tag.id)}
+                >
+                  <p className={styles.tagtext}>{tag.label}</p>
+                  <p>{tag.description}</p>
+
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className={styles.text}>No available tags found</p>
+          )}
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default PollTagModal;

prediction-polls/frontend/src/Components/Modals/PollTagModal.module.css

@@ -0,0 +1,105 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%; 
+    max-height: 80vh; 
+    overflow-y: scroll; 
+    padding: 20px;
+    box-sizing: border-box; 
+  }
+
+  .modalContent {
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100% - 40px); 
+    overflow-y: scroll; 
+  }
+
+
+  .text {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 20px; 
+    text-align: center; 
+  }
+  .tagtext {
+    font-size: 16px;
+    font-weight: 500;
+    margin: 0;
+  }
+
+
+  .inputStyle {
+    width: calc(100% - 20px); 
+    height: 40px;
+    border-radius: 8px;
+    border: 1px solid var(--primary-500);
+    padding: 10px;
+    margin-bottom: 20px; 
+    font-size: 16px;
+    box-sizing: border-box; 
+  }
+
+  .inputStyle:focus {
+    outline: 1px solid var(--primary-700); 
+  }
+
+  /* Button Style */
+  .buttonStyle {
+    padding: 10px 20px; 
+    height: auto; 
+    border-radius: 8px;
+    border: none;
+    background-color: var(--primary-500);
+    color: var(--neutral-white);
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s; 
+  }
+
+  .buttonStyle:hover {
+    background-color: var(--primary-700); 
+  }
+
+  /* Option */
+  .option {
+    padding: 0px 10px ;
+    border: 1px solid var(--primary-500);
+    border-radius: 8px;
+    width: 100%; 
+    box-sizing: border-box; 
+    margin-bottom: 10px; 
+    word-wrap: break-word; 
+    cursor: pointer; 
+    transition: background-color 0.1s, color 0.1s;
+  }
+
+
+  .optionContainer {
+    width: 100%; 
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    overflow-y: auto; 
+    max-height: 35vh; 
+    box-sizing: border-box; 
+    padding-right: 15px;
+    padding-left: 15px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    border-radius: 8px;
+    border: 1px solid var(--neutral-200);
+  }
+
+  .option.selectedOption {
+    background-color: var(--primary-500); 
+    color: var(--neutral-white);
+    cursor: pointer;
+  }
+
+  .option.selectedOption p {
+    color: inherit; 
+  }
+

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

@@ -60,7 +60,7 @@ const Sidebar = ({ currentPage, handlePageChange }) => {
     { key: "Create", Icon: CreateIcon, to: "create" },
     { key: "Moderation", Icon: ModerationIcon, to: "moderation" },
     { key: "Leaderboard", Icon: LeaderboardIcon, to: "leaderboard" },
-    { key: "Notifications", Icon: NotificationsIcon, to: "notifications" },
+   // { key: "Notifications", Icon: NotificationsIcon, to: "notifications" },
     { key: "Settings", Icon: SettingsIcon, to: "settings" },
   ];