Feat: add comp bar to likes card (ilPhil#246)

rebecca-xm · Feb 25, 2022 · 9496874 · 9496874
1 parent fac02d1
commit 9496874
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 3 deletions.
diff --git a/src/components/LikesCardInfo/LikesCardInfo.module.scss b/src/components/LikesCardInfo/LikesCardInfo.module.scss
@@ -51,6 +51,27 @@
         font-size: 2rem;
         cursor: pointer;
       }
+      .compatibility {
+        display: flex;
+        flex-direction: column;
+        margin: 0.5rem 0;
+        font-size: $superSmall;
+        progress[value] {
+          -webkit-appearance: none;
+          appearance: none;
+          margin-top: 5px;
+          width: 100px;
+          height: 10px;
+        }
+        progress[value]::-webkit-progress-bar {
+          background-color: #eee;
+          border-radius: 2px;
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+        }
+        progress[value]::-webkit-progress-value {
+          background-color: $mainPink;
+        }
+      }
     }
   }
 

diff --git a/src/components/LikesCardInfo/index.jsx b/src/components/LikesCardInfo/index.jsx
@@ -14,12 +14,40 @@ import { useSelector, useDispatch } from "react-redux";
 
 const LikesCardInfo = ({ data, showInfo, setShowInfo, isRoom }) => {
   const dispatch = useDispatch();
-  const loading = useSelector((store) => store.loading);
-  const loggedUser = useSelector((store) => store.user);
+  const loading = useSelector(store => store.loading);
+  const loggedUser = useSelector(store => store.user);
+  const user = useSelector(state => state.user);
+
 
   const currentItemDetails = isRoom ? data.friendlyWith : data.iam;
   const currentItem = data;
 
+  // CHECK ROOM COMPATIBILITY
+  const roomComp = () => {
+    let compatibility = 0;
+    let percent = 0;
+
+    Object.keys(currentItemDetails).forEach(par => {
+      parseInt(currentItemDetails[par]) === parseInt(user.iam[par]) &&
+        compatibility++;
+      percent++;
+    });
+    return parseInt((compatibility * 100) / percent);
+  };
+
+  // CHECK USER COMPATIBILITY
+  const userComp = () => {
+    let compatibility = 0;
+    let percent = 0;
+
+    Object.keys(currentItemDetails).forEach(par => {
+      parseInt(currentItemDetails[par]) ===
+        parseInt(user.roomId.friendlyWith[par]) && compatibility++;
+      percent++;
+    });
+    return parseInt((compatibility * 100) / percent);
+  };
+
   const likeFunc = () => {
     dispatch(
       isRoom
@@ -216,7 +244,10 @@ const LikesCardInfo = ({ data, showInfo, setShowInfo, isRoom }) => {
           </div>
           <h4>Price: {data.rentPrice},00€/month</h4>
         </div>
-
+        <div className={styles.compatibility}>
+          <label htmlFor="">Compatibility {roomComp()}%</label>
+          <progress value={roomComp()} max="100"></progress>
+        </div>
         <div className={styles.likeBtn}>
           <FiHeart
             onClick={() => !loading && likeFunc() && setShowInfo(!showInfo)}
@@ -242,6 +273,10 @@ const LikesCardInfo = ({ data, showInfo, setShowInfo, isRoom }) => {
               from {data.town} ({data.city})
             </p>
           </div>
+          <div className={styles.compatibility}>
+            <label htmlFor="">Compatibility {userComp()}%</label>
+            <progress value={userComp()} max="100"></progress>
+          </div>
         </div>
 
         <div className={styles.likeBtn}>