Fix #25: DeSelection of skills in SkillSection

Author: siddheshkothadi

Frontend/components/SkillSection.js

@@ -46,29 +46,46 @@ function SkillSection(props) {
           paddingStart: 4,
           marginTop: 12,
         }}>
-        {searchTerm.length > 0 &&
-          getFilteredSkills().map((skill, index) => {
-            return (
-              <Chip
-                key={skill.skill_id}
-                onPress={() => {
-                  if (skills.some(s => s.skill_id === skill.skill_id)) {
-                    setSkills(
-                      skills.filter(s => s.skill_id !== skill.skill_id),
+        {searchTerm.length > 0
+          ? getFilteredSkills().map((skill, index) => {
+              return (
+                <Chip
+                  key={skill.skill_id}
+                  onPress={() => {
+                    if (skills.some(s => s.skill_id === skill.skill_id)) {
+                      setSkills(
+                        skills.filter(s => s.skill_id !== skill.skill_id),
+                      );
+                    } else {
+                      setSkills(skills.concat(skill));
+                    }
+                  }}
+                  selected={skills.some(s => s.skill_id === skill.skill_id)}
+                  style={{
+                    marginEnd: 8,
+                    marginBottom: 8,
+                  }}>
+                  {skill.skill_name}
+                </Chip>
+              );
+            })
+          : skills.map((skill, index) => {
+              return (
+                <Chip
+                  key={index}
+                  onPress={() => {
+                    const newSkills = skills.filter(
+                      it => it.skill_id !== skill.skill_id,
                     );
-                  } else {
-                    setSkills(skills.concat(skill));
-                  }
-                }}
-                selected={skills.some(s => s.skill_id === skill.skill_id)}
-                style={{
-                  marginEnd: 8,
-                  marginBottom: 8,
-                }}>
-                {skill.skill_name}
-              </Chip>
-            );
-          })}
+                    setSkills(newSkills);
+                  }}
+                  style={{margin: 4}}
+                  icon="close"
+                  selected={true}>
+                  {skill.skill_name}
+                </Chip>
+              );
+            })}
       </View>
       {searchTerm.length === 0 &&
         skillList.map((domain, index) => (