fix: issue #412

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>

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;

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 ||