Lint fixes and smaller background image

Author: jmgasper

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 { EditMemberPropertyBtn } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable react/destructuring-assignment */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable arrow-body-style */
@@ -9,10 +10,11 @@
 import {
     FC,
     useState,
-    CSSProperties
+    CSSProperties,
 } from 'react'
 
-import { components, ControlProps, Options, GroupBase, MultiValue, SingleValue, StylesConfig, ActionMeta } from 'react-select'
+import { components, ControlProps, Options,
+    GroupBase, MultiValue, SingleValue, StylesConfig, ActionMeta } from 'react-select'
 import AsyncSelect from 'react-select/async'
 
 import { ContentLayout } from '~/libs/ui'
@@ -23,24 +25,25 @@ 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 }) => (
+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>
 )
 
 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) {
@@ -49,8 +52,7 @@ export const TalentSearch: FC = () => {
             skillsFilter.forEach((filterSkill, index) => {
                 if (filterSkill.emsiId === skill.emsiId) {
                     deleted = true
-                }
-                else {
+                } else {
                     newFilter.push(filterSkill)
                 }
             })
@@ -65,8 +67,7 @@ export const TalentSearch: FC = () => {
     function onChange(options:MultiValue<Skill> | SingleValue<Skill>, meta:ActionMeta<Skill>): void {
         if (Array.isArray(options)) {
             setSkillsFilter(options)
-        }
-        else {
+        } else {
             setSkillsFilter([])
         }
     }
@@ -91,10 +92,10 @@ export const TalentSearch: FC = () => {
         [{ name: 'HyperText Markup Language (HTML)', emsiId: 'KS1200578T5QCYT0Z98G' },
          { name: 'IOS Development', emsiId: 'ES86A20379CD2AD061F3' },
          { name: 'Node.js', emsiId: 'KS127296VDYS7ZFWVC46' }],
-        [{ name: '.NET Development', emsiId: 'ES50D03AC9CFC1A0BC93' }, 
+        [{ name: '.NET Development', emsiId: 'ES50D03AC9CFC1A0BC93' },
          { name: 'C++ (Programming Language)', emsiId: 'KS1219W70LY1GXZDSKW5' },
          { name: 'PHP Development', emsiId: 'KS127SZ60YZR8B5CQKV1' }],
-        [{ name: 'Adobe Illustrator', emsiId: 'KS1206V6K46N1SDVJGBD' }, 
+        [{ name: 'Adobe Illustrator', emsiId: 'KS1206V6K46N1SDVJGBD' },
          { name: 'Ruby (Programming Language)', emsiId: 'ESD07FEE22E7EC094EB8' },
          { name: 'Java (Programming Language)', emsiId: 'KS120076FGP5WGWYMP0F' }],
         [{ name: 'React Native', emsiId: 'KSPSGF5MXB6568UIQ4BK' },
@@ -116,7 +117,6 @@ export const TalentSearch: FC = () => {
         fontWeight: 400,
     }
 
-
     const multiValueStyle: CSSProperties = {
         backgroundColor: 'white',
         border: '1px solid #d4d4d4',
@@ -225,21 +225,27 @@ 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>,
+                            actionMeta: ActionMeta<Skill>,
+                        ) => onChange(newValue, actionMeta)}
                 />
             </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>

src/apps/talent-search/src/routes/talent-search/TalentSearch.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prefer-stateless-function */
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable react/no-access-state-in-setstate */
 /* eslint-disable react/state-in-constructor */
@@ -10,22 +11,15 @@ import styles from './SkillPill.module.scss'
 type SkillPillProps = {
     skill: Skill,
     selected: boolean
-    onClick: (skill:Skill, pill:SkillPill) => void,
+    onClick: (skill:Skill) => void,
 }
 
 export default class SkillPill extends Component<SkillPillProps> {
-    constructor(props: SkillPillProps) {
-        super(props)
-    }
-
-    componentDidUpdate(): void {
-    }
-
     render(): JSX.Element | null {
         return (
             <span
                 className={this.props.selected ? styles.selected : styles.unSelected}
-                onClick={() => this.props.onClick(this.props.skill, this)}
+                onClick={() => this.props.onClick(this.props.skill)}
             >
                 <span className={styles.pillText}>
                     {this.props.skill.name}