Merge pull request #370 from bounswe/frontend/development

Frontend/development
bounswe · Nov 14, 2023 · e51a398 · e51a398
2 parents 10e38aa + 41b100f
commit e51a398
Show file tree

Hide file tree

Showing 32 changed files with 1,382 additions and 323 deletions.
diff --git a/prediction-polls/frontend/src/Assets/icons/EditIcon.jsx b/prediction-polls/frontend/src/Assets/icons/EditIcon.jsx
@@ -0,0 +1,10 @@
+import styles from "./Icon.module.css";
+const EditIcon = ({ width, height }) => (
+
+<svg width={width ?? "30"} height={height ?? "30"} viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Edit / Edit_Pencil_Line_01">
+<path className={styles.iconEdit} id="Vector" d="M5 25.0001H25M5 25.0001V20.0001L15 10.0001M5 25.0001L10 25.0001L20 15.0001M15 10.0001L18.5858 6.41433L18.5879 6.4122C19.0815 5.9186 19.3288 5.67136 19.6138 5.57876C19.8648 5.49719 20.1353 5.49719 20.3864 5.57876C20.6712 5.67129 20.9181 5.91825 21.411 6.41116L23.5858 8.5859C24.0808 9.08092 24.3284 9.32855 24.4211 9.61396C24.5027 9.86501 24.5027 10.1354 24.4211 10.3865C24.3284 10.6717 24.0812 10.919 23.5869 11.4133L23.5858 11.4143L20 15.0001M15 10.0001L20 15.0001" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</g>
+</svg>
+)
+export default EditIcon;
diff --git a/prediction-polls/frontend/src/Assets/icons/Icon.module.css b/prediction-polls/frontend/src/Assets/icons/Icon.module.css
@@ -3,4 +3,8 @@
 }
 .iconFill{
     fill:var(--neutral-900)
+}
+.iconEdit{
+    stroke:var(--neutral-white)
+
 }
diff --git a/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css b/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css
@@ -1,55 +1,16 @@
-.mobileMenu {
-  width: 80vw;
-  height: 100vh;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  padding-top: 20px;
-  background-color: var(--primary-50);
-  justify-content: space-between;
-  overflow: auto;
-}
-.wrapper {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-}
 
-.menuItem {
-  padding: 20px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 20px;
-  background-color: var(--primary-50);
-  color: var(--neutral-900);
-  cursor: pointer;
-  border-bottom: 1px solid var(--neutral-300);
-}
-
-.menuItem:last-child {
-  border-bottom: none;
-}
-
-.logo {
-  width: 100%;
-  flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-}
 
 .mobileMenuButton {
   display: none;
   font-size: 24px;
   color: var(--neutral-900);
   cursor: pointer;
 }
+.wrapper {
+  display: none;
+}
 
-@media (max-width: 640px) {
+@media (max-width: 768px) {
   .mobileMenuButton {
     justify-content: flex-start;
     height: 50px;
@@ -60,8 +21,52 @@
     cursor: pointer;
     padding-left: 10px;
   }
-}
-.point {
+  .mobileMenu {
+    width: 80vw;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    padding-top: 20px;
+    background-color: var(--primary-50);
+    justify-content: space-between;
+  }
+  .wrapper {
+    flex-grow: 1;
+    position: fixed;
+    width: 100vw;
+    height: 100%;
+    z-index: 3;
+    display: flex;
+    align-items: stretch;
+  }
+
+  .menuItem {
+    padding: 20px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 20px;
+    background-color: var(--primary-50);
+    color: var(--neutral-900);
+    cursor: pointer;
+    border-bottom: 1px solid var(--neutral-300);
+  }
+
+  .menuItem:last-child {
+    border-bottom: none;
+  }
+
+  .logo {
+    width: 100%;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+  }
+  .point {
   display: flex;
   justify-content: center;
   gap: 20px;
@@ -73,3 +78,5 @@
   font-size: 20px;
   font-weight: 700;
 }
+}
+
diff --git a/prediction-polls/frontend/src/Components/MobileMenu/index.jsx b/prediction-polls/frontend/src/Components/MobileMenu/index.jsx
@@ -26,9 +26,7 @@ const menuData = [
 const MobileMenuItem = ({ pageKey, Icon, label, navigate, to, theme }) => {
   return (
     <div key={pageKey} className={styles.menuItem} onClick={() => navigate(to)}>
-      {Icon && (
-        <Icon width={30} height={30} />
-      )}
+      {Icon && <Icon width={30} height={30} />}
       {label || pageKey}
     </div>
   );
@@ -44,11 +42,13 @@ const MobileMenu = () => {
 
   return (
     <>
-      {!menuActive && (
+      {!menuActive ? (
         <MenuOutlined
           className={styles.mobileMenuButton}
           onClick={toggleMenu}
         />
+      ) : (
+        <div className={styles.mobileMenuButton}></div>
       )}
       {menuActive && (
         <div className={styles.wrapper} onClick={() => setMenuActive(false)}>

diff --git a/prediction-polls/frontend/src/Components/PollCard/PollCard.module.css b/prediction-polls/frontend/src/Components/PollCard/PollCard.module.css
@@ -2,9 +2,10 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  width: 90%;
+  width: 95%;
   box-shadow: 2px 4px 8px var(--neutral-shadow);
   padding: 30px;
+  box-sizing: border-box;
   border-radius: 8px;
   gap: 20px;
   background-color: var(--neutral-pollCard);
@@ -28,11 +29,13 @@
   display: flex;
   align-items: center;
   gap: 5px;
+  cursor: pointer;
 }
 .creatorImage {
   width: 35px;
   height: 35px;
   border-radius: 100px;
+  cursor: pointer;
 }
 .creatorName {
   font-size: 16px;
@@ -157,3 +160,29 @@
   color: var(--neutral-black);
 
 }
+
+a{
+  text-decoration: none;
+}
+
+.buttonText{
+  margin: 0px;
+}
+
+@media (max-width:769px){
+  .buttonText{
+    display: none;
+  }
+  .commentButton,
+.shareButton,
+.reportButton {
+  padding: 12px;
+}
+}
+@media (max-width:1025px){
+  .card{
+    padding: 25px 15px ;
+
+  }
+
+}
diff --git a/prediction-polls/frontend/src/Components/PollCard/index.jsx b/prediction-polls/frontend/src/Components/PollCard/index.jsx
@@ -8,36 +8,58 @@ import { ReactComponent as ReportIcon } from "../../Assets/icons/Warning.svg";
 import PollOption from "../PollOption";
 
 function PollCard({ PollData }) {
-  const totalPoints = !PollData.isCustomPoll
+  const [selectedArray, setSelectedArray] = React.useState(
+    !PollData.isCustomPoll ? Array(PollData["options"].length).fill(false) : []
+  );
+  const [pollData, setPollData] = React.useState(
+    JSON.parse(JSON.stringify(PollData))
+  );
+  var totalPoints = !PollData.isCustomPoll
     ? PollData.options.reduce((acc, curr) => acc + curr.votes, 0)
     : 0;
-
+  const handleSelect = (newList) => {
+    setSelectedArray(newList);
+    var newPoll = JSON.parse(JSON.stringify(PollData));
+    for (let i = 0; i < PollData["options"].length; i++) {
+      if (newList[i] == true) {
+        newPoll["options"][i]["votes"] = newPoll["options"][i]["votes"] + 1;
+        break;
+      }
+    }
+    setPollData(JSON.parse(JSON.stringify(newPoll)));
+    totalPoints = !PollData.isCustomPoll
+      ? PollData.options.reduce((acc, curr) => acc + curr.votes, 0)
+      : 0;
+  };
   const navigate = useNavigate();
+
   return (
     <div className={styles.card}>
       <div className={styles.question}>
         <div className={styles.tags}>
-          {PollData.tags.map((tag, index) => (
+          {pollData.tags.map((tag, index) => (
             <PollTag TagName={tag} key={index} />
           ))}
         </div>
         <div className={styles.questionPoints}>
           <div className={styles.question}>
-            <p>{PollData.question}</p>
+            <p>{pollData.question}</p>
           </div>
-
         </div>
-        {!PollData.isCustomPoll ? (
+        {!pollData.isCustomPoll ? (
           <div className={styles.optionList}>
-            {PollData.options.map((option, index) => {
+            {pollData.options.map((option, index) => {
               const widthPercentage = (option.votes / totalPoints) * 100;
               return (
                 <PollOption
                   widthPercentage={widthPercentage}
-                  navigate={navigate}
+                  id={PollData.id}
                   option={option}
+                  isSelected={selectedArray[index]}
                   index={index}
+                  arrayLength={PollData["options"].length}
                   key={index}
+                  selectOption={handleSelect}
                 />
               );
             })}
@@ -57,7 +79,7 @@ function PollCard({ PollData }) {
         <div className={styles.actionButtons}>
           <div className={styles.buttonWrapper}>
             <button className={styles.commentButton}>
-              <CommentIcon /> Comments
+              <CommentIcon /> <p className={styles.buttonText}>Comments</p>
             </button>
             <span className={styles.commentCount}>
               {`${PollData.comments.length} comment${
@@ -68,25 +90,30 @@ function PollCard({ PollData }) {
 
           <div className={styles.buttonWrapper}>
             <button className={styles.shareButton}>
-              <ShareIcon /> Share
+              <ShareIcon /> <p className={styles.buttonText}>Share</p>
             </button>
           </div>
           <div className={styles.buttonWrapper}>
             <button className={styles.reportButton}>
               <ReportIcon />
-              Report
+              <p className={styles.buttonText}>Report</p>
+
             </button>
           </div>
         </div>
       </div>
       <div className={styles.info}>
         <div className={styles.creator}>
-          <img
-            src={PollData.creatorImage}
-            alt="user"
-            className={styles.creatorImage}
-          />
-          <div className={styles.creatorName}>{PollData.creatorName}</div>
+          <a href={`/profile/${PollData.creatorUsername}`}>
+            <img
+              src={PollData.creatorImage}
+              alt="user"
+              className={styles.creatorImage}
+            />
+          </a>
+          <a href={`/profile/${PollData.creatorUsername}`}>
+            <div className={styles.creatorName}>{PollData.creatorName}</div>
+          </a>
         </div>
         <div className={styles.textGroup}>
           <p className={styles.textDescription}>Closing In</p>

diff --git a/prediction-polls/frontend/src/Components/PollOption/PollOption.module.css b/prediction-polls/frontend/src/Components/PollOption/PollOption.module.css
@@ -19,6 +19,22 @@
   cursor: pointer;
   display: flex;
 }
+.selectedOptionText {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border: 2px solid var(--secondary-500);
+  border-radius: 10px;
+  font-size: 16px;
+  font-weight: 500;
+  width: 100%;
+  padding: 0px 10px ;
+  box-sizing: border-box;
+  font-weight: 700;
+  position: relative;
+  cursor: pointer;
+  display: flex;
+}
 .optionPoints {
   font-size: 14px;
   font-weight: normal;
@@ -33,6 +49,15 @@
   border-radius: 8px;
   z-index: 1;
 }
+.selectedBackgroundDiv {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: var(--secondary-500);
+  border-radius: 8px;
+  z-index: 1;
+}
 
 .textDiv {
   z-index: 2;