apply linting over work

Author: vas3a

src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.tsx

@@ -50,7 +50,7 @@ const WorkDetailDetailsPane: FC<WorkDetailDetailsPaneProps> = ({
         return <LoadingSpinner />
     }
 
-    const onTogglePane: () => void = () => {
+    function onTogglePane(): void {
         if (!collapsible) {
             return
         }

src-ts/tools/work/work-detail-details/work-detail-details-sidebar/WorkDetailDetailsSidebar.tsx

@@ -14,23 +14,34 @@ const WorkDetailDetailsSidebar: FC<{}> = () => {
         = useState<boolean>(false)
 
     // TODO: update the Button component so it can handle links that don't have arrows
-    function handleClick(event: MouseEvent<HTMLAnchorElement>, setter: Dispatch<SetStateAction<boolean>>): void {
-        event.preventDefault()
-        setter(true)
+    function getClickHandler(setter: Dispatch<SetStateAction<boolean>>): (event: MouseEvent) => void {
+        return (event: MouseEvent): void => {
+            event.preventDefault()
+            setter(true)
+        }
     }
 
     return (
         <>
-            <OrderContractModal isOpen={isOrderContractModalOpen} onClose={() => setIsOrderContractModalOpen(false)} />
-            <PrivacyPolicyModal isOpen={isPrivacyPolicyModalOpen} onClose={() => setIsPrivacyPolicyModalOpen(false)} />
-            <TermsModal isOpen={isTermsModalOpne} onClose={() => setIsTermsModalOpen(false)} />
+            <OrderContractModal
+                isOpen={isOrderContractModalOpen}
+                onClose={function handleOrderClose() { setIsOrderContractModalOpen(false) }}
+            />
+            <PrivacyPolicyModal
+                isOpen={isPrivacyPolicyModalOpen}
+                onClose={function handlePPClose() { setIsPrivacyPolicyModalOpen(false) }}
+            />
+            <TermsModal
+                isOpen={isTermsModalOpne}
+                onClose={function handleTermsClose() { setIsTermsModalOpen(false) }}
+            />
 
             <div className={styles.wrap}>
                 <h4>supporting information</h4>
                 <a
                     className={styles.link}
                     href={window.location.href}
-                    onClick={e => handleClick(e, setIsOrderContractModalOpen)}
+                    onClick={getClickHandler(setIsOrderContractModalOpen)}
                     rel='noopener noreferrer'
                     role='button'
                     tabIndex={0}
@@ -40,7 +51,7 @@ const WorkDetailDetailsSidebar: FC<{}> = () => {
                 <a
                     className={styles.link}
                     href={window.location.href}
-                    onClick={e => handleClick(e, setIsPrivacyPolicyModalOpen)}
+                    onClick={getClickHandler(setIsPrivacyPolicyModalOpen)}
                     rel='noopener noreferrer'
                     role='button'
                     tabIndex={0}
@@ -50,7 +61,7 @@ const WorkDetailDetailsSidebar: FC<{}> = () => {
                 <a
                     className={styles.link}
                     href={window.location.href}
-                    onClick={e => handleClick(e, setIsTermsModalOpen)}
+                    onClick={getClickHandler(setIsTermsModalOpen)}
                     rel='noopener noreferrer'
                     role='button'
                     tabIndex={0}

src-ts/tools/work/work-detail-header/WorkFeedback/WorkFeedback.tsx

@@ -1,12 +1,14 @@
 import { Dispatch, FC, SetStateAction, useState } from 'react'
 
 import { BaseModal, Form, FormDefinition, formGetInputFields, FormInputModel, formOnReset } from '../../../../lib'
+import { FormValue } from '../../../../lib/form/form-functions'
 import { Challenge } from '../../work-lib'
 
 import { workFeedbackFormDef } from './work-feedback-form.config'
 import styles from './WorkFeedback.module.scss'
 
 interface WorkFeedbackProps {
+    // eslint-disable-next-line react/no-unused-prop-types
     challenge: Challenge
     onClose: () => void
     saveSurvey: (feedback: any) => void
@@ -20,17 +22,18 @@ interface Feedback {
 
 const WorkFeedback: FC<WorkFeedbackProps> = (props: WorkFeedbackProps) => {
 
-    const [formDef, setFormDef]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>] = useState<FormDefinition>({ ...workFeedbackFormDef })
+    const [formDef, setFormDef]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
+        = useState<FormDefinition>({ ...workFeedbackFormDef })
 
     function requestGenerator(inputs: ReadonlyArray<FormInputModel>): Array<Feedback> {
         return inputs
             .map((input: FormInputModel) => ({
                 name: input.instructions || input.label as string,
                 value: input.value,
-            }))
+            } as Feedback))
     }
 
-    async function saveAsync(feedback: Array<Feedback>): Promise<void> {
+    async function saveAsync(feedback: FormValue): Promise<void> {
         props.saveSurvey(feedback)
         onClose()
     }

src-ts/tools/work/work-detail-header/WorkFeedback/work-feedback-form.config.ts

@@ -57,5 +57,7 @@ export const workFeedbackFormDef: FormDefinition = {
         },
     ],
     subtitle: 'To mark this work as done, please provide feedback on your experience.',
-    successMessage: 'Your feedback has been submitted. If your changes do not appear immediately, please reload the page.',
+    successMessage: (
+        'Your feedback has been submitted. If your changes do not appear immediately, please reload the page.'
+    ),
 }

src-ts/tools/work/work-detail-solutions/WorkDetailSolutions.tsx

@@ -32,7 +32,8 @@ const WorkDetailSolutions: FC<WorkDetailSolutionsProps> = (props: WorkDetailSolu
                         Solutions Available for Download
                     </h3>
                     <p className='body-small'>
-                        The solutions listed below have met your detailed criteria. They are ranked based on the best solution as determined by Topcoder expert reviewers.
+                        The solutions listed below have met your detailed criteria.
+                        They are ranked based on the best solution as determined by Topcoder expert reviewers.
                     </p>
                 </div>
             )}

src-ts/tools/work/work-detail-solutions/work-solutions-list/work-solutions-list-item/WorkSolutionsListItem.tsx

@@ -10,21 +10,27 @@ interface WorkSolutionsListItemProps {
     solution: WorkSolution
 }
 
-const WorkSolutionsListItem: FC<WorkSolutionsListItemProps> = (props: WorkSolutionsListItemProps) => (
-    <div className={styles.wrap}>
-        <div className={styles.name}>
-            <span>Submitted by:</span>
-            <span>{props.solution.createdBy}</span>
-        </div>
+const WorkSolutionsListItem: FC<WorkSolutionsListItemProps> = (props: WorkSolutionsListItemProps) => {
+    function handleClick(): void {
+        props.onDownload(props.solution.id)
+    }
+
+    return (
+        <div className={styles.wrap}>
+            <div className={styles.name}>
+                <span>Submitted by:</span>
+                <span>{props.solution.createdBy}</span>
+            </div>
 
-        <Button
-            buttonStyle='secondary'
-            tabIndex={-1}
-            label='Download'
-            size='md'
-            onClick={() => props.onDownload(props.solution.id)}
-        />
-    </div>
-)
+            <Button
+                buttonStyle='secondary'
+                tabIndex={-1}
+                label='Download'
+                size='md'
+                onClick={handleClick}
+            />
+        </div>
+    )
+}
 
 export default WorkSolutionsListItem

src-ts/tools/work/work-detail-summary/WorkDetailHighlights/WorkDetailHighlights.tsx

@@ -15,36 +15,34 @@ interface WorkDetailHighlightsProps {
 
 const WorkDetailHighlights: FC<WorkDetailHighlightsProps> = (props: WorkDetailHighlightsProps) => {
 
-    const { work }: WorkDetailHighlightsProps = props
-
     const highlights: ReadonlyArray<{
         icon: JSX.Element,
         info?: number | string
         name: string
     }> = [
         {
             icon: <IconOutline.CalendarIcon />,
-            info: textFormatDateLocaleShortString(work.submittedDate),
+            info: textFormatDateLocaleShortString(props.work.submittedDate),
             name: 'Submitted',
         },
         {
             icon: <IconOutline.CurrencyDollarIcon />,
-            info: textFormatMoneyLocaleString(work.cost),
+            info: textFormatMoneyLocaleString(props.work.cost),
             name: 'Cost (USD)',
         },
         {
             icon: <IconOutline.UserGroupIcon />,
-            info: work.participantsCount,
+            info: props.work.participantsCount,
             name: 'Participants',
         },
         {
             icon: <IconOutline.DocumentTextIcon />,
-            info: work.solutionsCount,
+            info: props.work.solutionsCount,
             name: 'Solutions Received',
         },
         {
             icon: <IconOutline.IdentificationIcon />,
-            info: work.id,
+            info: props.work.id,
             name: 'Work id',
         },
     ]
@@ -53,7 +51,7 @@ const WorkDetailHighlights: FC<WorkDetailHighlightsProps> = (props: WorkDetailHi
         .map((item, index) => (
             <div
                 className={styles.highlight}
-                key={index}
+                key={index as any}
             >
 
                 <div className={styles.icon}>

src-ts/tools/work/work-detail-summary/WorkDetailProgress/WorkDetailProgress.tsx

@@ -8,15 +8,13 @@ import styles from './WorkDetailProgress.module.scss'
 
 const WorkDetailProgress: FC<WorkProgress> = (props: WorkProgress) => {
 
-    const { steps, activeStepIndex }: WorkProgress = props
-
-    const progressItems: Array<JSX.Element> = steps
+    const progressItems: Array<JSX.Element> = props.steps
         .map((item, index) => (
             <WorkDetailProgressItem
                 {...item}
-                activeStepIndex={activeStepIndex}
+                activeStepIndex={props.activeStepIndex}
                 currentIndex={index}
-                key={index}
+                key={index as any}
             />
         ))
 

src-ts/tools/work/work-detail-summary/WorkTransferredStatus/WorkTransferredStatus.tsx

@@ -7,7 +7,8 @@ const WorkTransferredStatus: FC<{}> = () => (
         <h3>Transferred</h3>
         <p>
             <div className={styles.line}>
-                We have a few outstanding questions that will help us better understand the work and scope before we can launch your work on our platform.
+                We have a few outstanding questions that will help us better understand the
+                work and scope before we can launch your work on our platform.
             </div>
 
             <div className={styles.line}>

src-ts/tools/work/work-lib/work-provider/message-functions/message-store/message.store.ts

@@ -5,7 +5,10 @@ import { GetUnreadMessageCountResponse } from './get-unread-message-count-respon
 
 export async function getUnreadCountAsync(workId: string, handle: string): Promise<GetUnreadMessageCountResponse> {
 
-    const url: string = `${EnvironmentConfig.API.FORUM_V2}/groups/${workId}/member/${handle}?access_token=${EnvironmentConfig.API.FORUM_ACCESS_TOKEN}`
+    const url: string = [
+        `${EnvironmentConfig.API.FORUM_V2}/groups/${workId}/member/${handle}`,
+        `access_token=${EnvironmentConfig.API.FORUM_ACCESS_TOKEN}`,
+    ].join('?')
 
     const response: { unreadNotifications: number } = await xhrGetAsync(url)