From 330eaf7c6b9070c5870ff840708313ae95e30ff9 Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Thu, 5 Aug 2021 00:08:25 +0800
Subject: [PATCH] fix: issue #412

---
 .../components/ResultCard/index.jsx           |  4 ++--
 .../components/ResultCard/styles.module.scss  |  3 +++
 .../components/SearchAndSubmit/index.jsx      | 22 +++++++------------
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/routes/CreateNewTeam/components/ResultCard/index.jsx b/src/routes/CreateNewTeam/components/ResultCard/index.jsx
index 79f9a91d..4f941285 100644
--- a/src/routes/CreateNewTeam/components/ResultCard/index.jsx
+++ b/src/routes/CreateNewTeam/components/ResultCard/index.jsx
@@ -256,7 +256,7 @@ function ResultCard({
       {!showRates && (
         <div styleName="content">
           <div styleName="matching-info">
-            <div>
+            <div styleName="matching-info-left">
               {matchedSkills.length
                 ? _.map(matchedSkills, (s) => (
                     <SkillTag name={s.name} id={s.id} />
@@ -282,7 +282,7 @@ function ResultCard({
               ) : null}
             </div>
             <div styleName="vertical-line" />
-            <div>
+            <div styleName="matching-info-right">
               <IconMultipleUsers styleName="users" />
               <h4>{numberOfMembersAvailable}+</h4>
               <p>Members matched</p>
diff --git a/src/routes/CreateNewTeam/components/ResultCard/styles.module.scss b/src/routes/CreateNewTeam/components/ResultCard/styles.module.scss
index 150884c0..8a85931d 100644
--- a/src/routes/CreateNewTeam/components/ResultCard/styles.module.scss
+++ b/src/routes/CreateNewTeam/components/ResultCard/styles.module.scss
@@ -71,6 +71,9 @@
     display: flex;
     text-align: center;
     align-items: center;
+    .matching-info-left, .matching-info-right {
+      flex: 1;
+    }
     > div.vertical-line {
       display: block;
       height: 170px;
diff --git a/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx b/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx
index f42dae20..af4a8130 100644
--- a/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx
+++ b/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx
@@ -30,35 +30,29 @@ function SearchAndSubmit(props) {
     if (
       skills &&
       matchingRole &&
-      matchingRole.listOfSkills &&
-      searchObject &&
-      searchObject.skills &&
-      searchObject.skills.length
+      matchingRole.matchedSkills
     ) {
-      return _.map(searchObject.skills, (s) =>
-        _.find(skills, (skill) => skill.id === s)
+      return _.map(matchingRole.matchedSkills, (s) =>
+        _.find(skills, (skill) => skill.name === s)
       );
     } else {
       return [];
     }
-  }, [skills, matchingRole, searchObject]);
+  }, [skills, matchingRole]);
 
   const unMatchedSkills = useMemo(() => {
     if (
       skills &&
       matchingRole &&
-      matchingRole.listOfSkills &&
-      matchedSkills.length
+      matchingRole.unMatchedSkills
     ) {
-      const list = _.filter(
-        matchingRole.listOfSkills,
-        (l) => !_.find(matchedSkills, (m) => m.name === l)
+      return _.map(matchingRole.unMatchedSkills, (s) =>
+        _.find(skills, (skill) => skill.name === s)
       );
-      return _.map(list, (s) => _.find(skills, (skill) => skill.name === s));
     } else {
       return [];
     }
-  }, [skills, matchingRole, matchedSkills]);
+  }, [skills, matchingRole]);
   useEffect(() => {
     const isFromInputPage =
       searchObject.role ||