Merge pull request #784 from topcoder-platform/talent-search

Lint fixes and smaller background image

Author: vas3a

src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx

@@ -11,7 +11,6 @@ import {
     UserTraitIds,
     UserTraits,
 } from '~/libs/core'
-import { Button } from '~/libs/ui'
 
 import { AddButton, EditMemberPropertyBtn } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'

src/apps/talent-search/src/assets/background.png

@@ -33,25 +33,25 @@
 }
 
 .popularSkillsTitle{
-  font-family: 'Roboto';
+  font-family: $font-roboto;
   font-weight: 700;
   font-size: 20px;
   line-height: 26px;
   text-align: center;
-  color: #fff;
+  color: $tc-white;
 }
 
 .searchHeader{
   text-align: center;
 }
 
 .searchHeaderText{
-  font-family: 'Roboto';
+  font-family: $font-roboto;
   font-weight: 500;
   font-size: 30px;
   line-height: 20px;
   letter-spacing: 0.5px;
-  color: white;
+  color: $tc-white;
 }
 
 .subHeader{
@@ -60,19 +60,19 @@
 }
 
 .subHeaderText{
-  font-family: 'Barlow';
+  font-family: $font-barlow;
   font-weight: 400;
   font-size: 25px;
   line-height: 30px;
-  color: white;
+  color: $tc-white;
 
 }
 .searchPrompt{
-  font-family: 'Roboto';
+  font-family: $font-roboto;
   font-weight: 700;
   font-size: 16px;
   line-height: 48px;
-  color: white;
+  color: $tc-white;
 }
 
 .searchOptions{
@@ -90,7 +90,7 @@
 .searchIcon{
   width: 24px;
   height: 24px;
-  color: #aaaaaa;
-  stroke: #aaaaaa;
+  color: $black-40;
+  stroke: $black-40;
   margin-right: 24px;
 }

src/apps/talent-search/src/routes/talent-search/TalentSearch.module.scss

@@ -1,56 +1,57 @@
-/* eslint-disable react/destructuring-assignment */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable arrow-body-style */
-/* eslint-disable @typescript-eslint/typedef */
-/* eslint-disable indent */
-/* eslint-disable sort-keys */
-/* eslint-disable ordered-imports/ordered-imports */
 /* eslint-disable react/jsx-no-bind */
 import {
+    CSSProperties,
     FC,
     useState,
-    CSSProperties
 } from 'react'
-
-import { components, ControlProps, Options, GroupBase, MultiValue, SingleValue, StylesConfig, ActionMeta } from 'react-select'
+import { components, ControlProps, GroupBase,
+    MultiValue, Options, SingleValue, StylesConfig } from 'react-select'
 import AsyncSelect from 'react-select/async'
+import PropTypes from 'prop-types'
 
+import { SearchIcon } from '@heroicons/react/outline'
 import { ContentLayout } from '~/libs/ui'
 import { Skill } from '@talentSearch/lib/models/'
 import MatcherService from '@talentSearch/lib/services/MatcherService'
-import { SearchIcon } from '@heroicons/react/outline'
+
 import SkillPill from './components/SkillPill'
 import styles from './TalentSearch.module.scss'
 
 function search(skills:Options<Skill>): void {
-    alert("Searching skills: " + JSON.stringify(skills))
+    alert(JSON.stringify(skills))
 }
 
-const Control: React.FC<ControlProps<Skill, boolean, GroupBase<Skill>>> = ({children, ...props }) => (
+// eslint-disable-next-line react/destructuring-assignment, @typescript-eslint/typedef
+const Control: React.FC<ControlProps<Skill, boolean, GroupBase<Skill>>> = ({ children, ...props }) => (
     <components.Control {...props}>
         {children}
-        <span onClick={() => search(props.getValue())} className={styles.searchIconSpan}><SearchIcon className={styles.searchIcon} /></span>
+        <span
+            onClick={() => search(props.getValue())}
+            className={styles.searchIconSpan}
+        >
+            <SearchIcon className={styles.searchIcon} />
+        </span>
     </components.Control>
 )
 
+Control.propTypes = {
+    children: PropTypes.node.isRequired,
+    getValue: PropTypes.func.isRequired,
+}
+
 export const TalentSearch: FC = () => {
     const [skillsFilter, setSkillsFilter] = useState<Array<Skill>>([])
 
-    function search(): void {
-        alert("Searching for skills: " + JSON.stringify(skillsFilter))
-    }
-
-    function toggleSkill(skill:Skill, pill:SkillPill): void {
+    function toggleSkill(skill:Skill): void {
         let newFilter: Array<Skill> = []
         let deleted: boolean = false
         if (skillsFilter) {
             // Either delete the value from the list, if we're toggling one that's already in the list
             // Or add the new item to the list
-            skillsFilter.forEach((filterSkill, index) => {
+            skillsFilter.forEach(filterSkill => {
                 if (filterSkill.emsiId === skill.emsiId) {
                     deleted = true
-                }
-                else {
+                } else {
                     newFilter.push(filterSkill)
                 }
             })
@@ -62,18 +63,17 @@ export const TalentSearch: FC = () => {
         }
     }
 
-    function onChange(options:MultiValue<Skill> | SingleValue<Skill>, meta:ActionMeta<Skill>): void {
+    function onChange(options:MultiValue<Skill> | SingleValue<Skill>): void {
         if (Array.isArray(options)) {
             setSkillsFilter(options)
-        }
-        else {
+        } else {
             setSkillsFilter([])
         }
     }
 
     function filteringSkill(skill:Skill): boolean {
         let result: boolean = false
-        skillsFilter.forEach((filterSkill, index) => {
+        skillsFilter.forEach(filterSkill => {
             if (filterSkill.emsiId === skill.emsiId) {
                 result = true
             }
@@ -82,118 +82,105 @@ export const TalentSearch: FC = () => {
         return result
     }
 
+    // TODO: Make this configurable, or read from a service.  We need to discuss
+    // how we want to handle this.
     const popularSkills:Skill[][] = [
-        [{ name: 'Typescript', emsiId: 'KS441LF7187KS0CV4B6Y' },
-         { name: 'Front-End Engineering', emsiId: 'KS1244K6176NLVWV02B6' },
-         { name: 'Bootstrap (Front-End Framework)', emsiId: 'KS1214R5XG4X4PY7LGY6' }],
-        [{ name: 'Cascading Style Sheets (CSS)', emsiId: 'KS121F45VPV8C9W3QFYH' },
-         { name: 'JavaScript (Programming Language)', emsiId: 'KS1200771D9CR9LB4MWW' }],
-        [{ name: 'HyperText Markup Language (HTML)', emsiId: 'KS1200578T5QCYT0Z98G' },
-         { name: 'IOS Development', emsiId: 'ES86A20379CD2AD061F3' },
-         { name: 'Node.js', emsiId: 'KS127296VDYS7ZFWVC46' }],
-        [{ name: '.NET Development', emsiId: 'ES50D03AC9CFC1A0BC93' }, 
-         { name: 'C++ (Programming Language)', emsiId: 'KS1219W70LY1GXZDSKW5' },
-         { name: 'PHP Development', emsiId: 'KS127SZ60YZR8B5CQKV1' }],
-        [{ name: 'Adobe Illustrator', emsiId: 'KS1206V6K46N1SDVJGBD' }, 
-         { name: 'Ruby (Programming Language)', emsiId: 'ESD07FEE22E7EC094EB8' },
-         { name: 'Java (Programming Language)', emsiId: 'KS120076FGP5WGWYMP0F' }],
-        [{ name: 'React Native', emsiId: 'KSPSGF5MXB6568UIQ4BK' },
-         { name: 'User Experience (UX)', emsiId: 'KS441PL6JPXW200W0GRQ' }],
+        [{ emsiId: 'KS441LF7187KS0CV4B6Y', name: 'Typescript' },
+            { emsiId: 'KS1244K6176NLVWV02B6', name: 'Front-End Engineering' },
+            { emsiId: 'KS1214R5XG4X4PY7LGY6', name: 'Bootstrap (Front-End Framework)' }],
+        [{ emsiId: 'KS121F45VPV8C9W3QFYH', name: 'Cascading Style Sheets (CSS)' },
+            { emsiId: 'KS1200771D9CR9LB4MWW', name: 'JavaScript (Programming Language)' }],
+        [{ emsiId: 'KS1200578T5QCYT0Z98G', name: 'HyperText Markup Language (HTML)' },
+            { emsiId: 'ES86A20379CD2AD061F3', name: 'IOS Development' },
+            { emsiId: 'KS127296VDYS7ZFWVC46', name: 'Node.js' }],
+        [{ emsiId: 'ES50D03AC9CFC1A0BC93', name: '.NET Development' },
+            { emsiId: 'KS1219W70LY1GXZDSKW5', name: 'C++ (Programming Language)' },
+            { emsiId: 'KS127SZ60YZR8B5CQKV1', name: 'PHP Development' }],
+        [{ emsiId: 'KS1206V6K46N1SDVJGBD', name: 'Adobe Illustrator' },
+            { emsiId: 'ESD07FEE22E7EC094EB8', name: 'Ruby (Programming Language)' },
+            { emsiId: 'KS120076FGP5WGWYMP0F', name: 'Java (Programming Language)' }],
+        [{ emsiId: 'KSPSGF5MXB6568UIQ4BK', name: 'React Native' },
+            { emsiId: 'KS441PL6JPXW200W0GRQ', name: 'User Experience (UX)' }],
     ]
 
     const controlStyle: CSSProperties = {
         borderColor: 'black',
-        paddingTop: '10px',
         paddingBottom: '10px',
+        paddingTop: '10px',
     }
 
     const placeholderStyle: CSSProperties = {
-        height: '36px',
-        paddingTop: '4px',
         color: '#2A2A2A',
-        fontSize: '16',
         fontFamily: 'Roboto',
+        fontSize: '16',
         fontWeight: 400,
+        height: '36px',
+        paddingTop: '4px',
     }
 
-
     const multiValueStyle: CSSProperties = {
         backgroundColor: 'white',
         border: '1px solid #d4d4d4',
-        color: '#333',
         borderRadius: '24px',
-        height: '32px',
+        color: '#333',
         fontFamily: 'Roboto',
-        fontWeight: '400',
         fontSize: '14',
-        paddingRight: '8px',
-        paddingLeft: '8px',
+        fontWeight: '400',
+        height: '32px',
         marginRight: '10px',
+        paddingLeft: '8px',
+        paddingRight: '8px',
     }
 
     const multiValueRemoveStyle: CSSProperties = {
-        width: '12px',
-        height: '12px',
         backgroundColor: '#d9d9d9',
+        border: '1px solid #d4d4d4',
+        borderRadius: '11px',
         color: '#333',
-        marginTop: 'auto',
+        fontSize: '12',
+        height: '12px',
         marginBottom: 'auto',
-        marginRight: '5px',
         marginLeft: '5px',
-        borderRadius: '11px',
-        border: '1px solid #d4d4d4',
-        fontSize: '12',
+        marginRight: '5px',
+        marginTop: 'auto',
         padding: '0px',
+        width: '12px',
     }
 
     const hiddenStyle: CSSProperties = {
         display: 'none',
     }
 
     const selectStyle: StylesConfig<Skill> = {
-        control: (provided, state) => {
-          return {
+        clearIndicator: provided => ({
+            ...provided,
+            ...hiddenStyle,
+        }),
+        control: provided => ({
             ...provided,
             ...controlStyle,
-          }
-        },
-        multiValue: (provided, state) => {
-            return {
-              ...provided,
-              ...multiValueStyle,
-            }
-        },
-        multiValueRemove: (provided, state) => {
-            return {
+        }),
+        dropdownIndicator: provided => ({
+            ...provided,
+            ...hiddenStyle,
+        }),
+        indicatorSeparator: provided => ({
+            ...provided,
+            ...hiddenStyle,
+        }),
+        multiValue: provided => ({
+            ...provided,
+            ...multiValueStyle,
+        }),
+        multiValueRemove: provided => ({
             ...provided,
             ...multiValueRemoveStyle,
-            }
-        },
-        clearIndicator: (provided, state) => {
-            return {
-                ...provided,
-                ...hiddenStyle,
-            }
-        },
-        dropdownIndicator: (provided, state) => {
-            return {
-                ...provided,
-                ...hiddenStyle,
-            }
-        },
-        indicatorSeparator: (provided, state) => {
-            return {
-                ...provided,
-                ...hiddenStyle,
-            }
-        },
-        placeholder: (provided, state) => {
-            return {
-                ...provided,
-                ...placeholderStyle,
-            }
-        },
-      }
+        }),
+        placeholder: provided => ({
+            ...provided,
+            ...placeholderStyle,
+        }),
+    }
     return (
         <ContentLayout
             contentClass={styles.contentLayout}
@@ -225,21 +212,26 @@ export const TalentSearch: FC = () => {
                     components={{ Control }}
                     openMenuOnClick={false}
                     value={skillsFilter}
-                    onChange={(newValue: MultiValue<Skill> | SingleValue<Skill>, actionMeta: ActionMeta<Skill>) => 
-                               onChange(newValue, actionMeta)}
+                    onChange={(
+                        newValue: MultiValue<Skill> | SingleValue<Skill>,
+                    ) => onChange(newValue)}
                 />
             </div>
             <div className={styles.popularSkillsContainer}>
                 <span className={styles.popularSkillsTitle}>Popular Skills</span>
 
-                {popularSkills.map(row =>
-                    <div className={styles.pillRow}>
-                        {row.map(skill => 
-                            <SkillPill skill={skill} 
-                                selected={ filteringSkill(skill) } 
-                                onClick={toggleSkill} 
-                            /> )}
-                    </div>
+                {popularSkills.map(
+                    row => (
+                        <div className={styles.pillRow}>
+                            {row.map(skill => (
+                                <SkillPill
+                                    skill={skill}
+                                    selected={filteringSkill(skill)}
+                                    onClick={toggleSkill}
+                                />
+                            ))}
+                        </div>
+                    ),
                 )}
             </div>
         </ContentLayout>