lint fixes

Author: vas3a

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardGroup/ScorecardGroup.tsx

@@ -6,23 +6,23 @@ import { IconOutline } from '~/libs/ui'
 import { ScorecardGroup as ScorecardGroupModel } from '../../../../models'
 import { ScorecardSection } from '../ScorecardSection'
 import { ScorecardViewerContextValue, useScorecardContext } from '../ScorecardViewer.context'
-
-import styles from './ScorecardGroup.module.scss'
 import { ScorecardScore } from '../ScorecardScore'
 import { calcGroupScore } from '../utils'
 
+import styles from './ScorecardGroup.module.scss'
+
 interface ScorecardGroupProps {
     index: number
     group: ScorecardGroupModel
 }
 
 const ScorecardGroup: FC<ScorecardGroupProps> = props => {
     const { aiFeedbackItems }: ScorecardViewerContextValue = useScorecardContext()
-    const allFeedbackItems = aiFeedbackItems || [];
-    const { toggleItem, toggledItems }: ScorecardViewerContextValue = useScorecardContext();
+    const allFeedbackItems = aiFeedbackItems || []
+    const { toggleItem, toggledItems }: ScorecardViewerContextValue = useScorecardContext()
 
-    const isVissible = !toggledItems[props.group.id];
-    const toggle = useCallback(() => toggleItem(props.group.id), [props.group, toggleItem]);
+    const isVissible = !toggledItems[props.group.id]
+    const toggle = useCallback(() => toggleItem(props.group.id), [props.group, toggleItem])
 
     const score = useMemo(() => (
         calcGroupScore(props.group, allFeedbackItems)
@@ -32,7 +32,8 @@ const ScorecardGroup: FC<ScorecardGroupProps> = props => {
         <div className={styles.wrap}>
             <div className={classNames(styles.headerBar, isVissible && styles.toggled)} onClick={toggle}>
                 <span className={styles.index}>
-                    {props.index}.
+                    {props.index}
+                    .
                 </span>
                 <span>
                     {props.group.name}
@@ -42,7 +43,6 @@ const ScorecardGroup: FC<ScorecardGroupProps> = props => {
                     <ScorecardScore
                         score={score}
                         scaleMax={1}
-                        scaleType='SCALE'
                         weight={props.group.weight}
                     />
                 </span>
@@ -52,7 +52,7 @@ const ScorecardGroup: FC<ScorecardGroupProps> = props => {
             </div>
 
             {isVissible && props.group.sections.map((section, index) => (
-                <ScorecardSection key={section.id} section={section} index={[props.index, index+1].join('.')} />
+                <ScorecardSection key={section.id} section={section} index={[props.index, index + 1].join('.')} />
             ))}
         </div>
     )

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx

@@ -1,40 +1,42 @@
 import { FC, useMemo } from 'react'
 
+import { IconAiReview } from '~/apps/review/src/lib/assets/icons'
+import { ScorecardQuestion } from '~/apps/review/src/lib/models'
+
 import { ScorecardViewerContextValue, useScorecardContext } from '../../ScorecardViewer.context'
 import { ScorecardQuestionRow } from '../ScorecardQuestionRow'
+import { ScorecardScore } from '../../ScorecardScore'
 
 import styles from './AiFeedback.module.scss'
-import { IconAiReview } from '~/apps/review/src/lib/assets/icons'
-import { ScorecardQuestion } from '~/apps/review/src/lib/models'
-import { ScorecardScore } from '../../ScorecardScore'
 
 interface AiFeedbackProps {
     question: ScorecardQuestion
 }
 
 const AiFeedback: FC<AiFeedbackProps> = props => {
     const { aiFeedbackItems }: ScorecardViewerContextValue = useScorecardContext()
-    const feedback = useMemo(() => aiFeedbackItems?.find(r => r.scorecardQuestionId === props.question.id), [props.question.id, aiFeedbackItems])
+    const feedback = useMemo(() => (
+        aiFeedbackItems?.find(r => r.scorecardQuestionId === props.question.id)
+    ), [props.question.id, aiFeedbackItems])
 
     if (!aiFeedbackItems?.length || !feedback) {
         return <></>
     }
 
-    const isYesNo = props.question.type === 'YES_NO';
+    const isYesNo = props.question.type === 'YES_NO'
 
     return (
         <ScorecardQuestionRow
             icon={<IconAiReview />}
-            index="AI Feedback"
+            index='AI Feedback'
             className={styles.wrap}
-            score={
+            score={(
                 <ScorecardScore
                     score={feedback.questionScore}
                     scaleMax={props.question.scaleMax}
-                    scaleType={props.question.type}
                     weight={props.question.weight}
                 />
-            }
+            )}
         >
             {isYesNo && (
                 <p>

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/ScorecardQuestion.tsx

@@ -1,35 +1,35 @@
 import { FC, useCallback } from 'react'
+import classNames from 'classnames'
 
 import { IconOutline } from '~/libs/ui'
 
 import { ScorecardQuestion as ScorecardQuestionModel } from '../../../../models'
+import { ScorecardViewerContextValue, useScorecardContext } from '../ScorecardViewer.context'
 
-import styles from './ScorecardQuestion.module.scss'
 import { AiFeedback } from './AiFeedback'
 import { ScorecardQuestionRow } from './ScorecardQuestionRow'
-import { ScorecardViewerContextValue, useScorecardContext } from '../ScorecardViewer.context'
-import classNames from 'classnames'
+import styles from './ScorecardQuestion.module.scss'
 
 interface ScorecardQuestionProps {
     index: string
     question: ScorecardQuestionModel
 }
 
 const ScorecardQuestion: FC<ScorecardQuestionProps> = props => {
-    const { toggleItem, toggledItems }: ScorecardViewerContextValue = useScorecardContext();
+    const { toggleItem, toggledItems }: ScorecardViewerContextValue = useScorecardContext()
 
-    const isToggled = toggledItems[props.question.id!];
-    const toggle = useCallback(() => toggleItem(props.question.id!), [props.question, toggleItem]);
+    const isToggled = toggledItems[props.question.id!]
+    const toggle = useCallback(() => toggleItem(props.question.id!), [props.question, toggleItem])
 
     return (
         <div className={styles.wrap}>
             <ScorecardQuestionRow
-                icon={
+                icon={(
                     <IconOutline.ChevronDownIcon
                         className={classNames(styles.toggleBtn, isToggled && styles.toggled)}
                         onClick={toggle}
                     />
-                }
+                )}
                 index={`Question ${props.index}`}
                 className={styles.headerBar}
                 score=''

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/ScorecardQuestionRow/ScorecardQuestionRow.tsx

@@ -1,5 +1,5 @@
-import classNames from 'classnames'
 import { FC, PropsWithChildren, ReactNode } from 'react'
+import classNames from 'classnames'
 
 import styles from './ScorecardQuestionRow.module.scss'
 

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardScore/ScorecardScore.tsx

@@ -1,16 +1,14 @@
 import { FC } from 'react'
 
 import styles from './ScorecardScore.module.scss'
-import { ScorecardQuestion } from '../../../../models'
 
 interface ScorecardScoreProps {
     score: number
     scaleMax: number
-    scaleType: ScorecardQuestion['type']
     weight: number
 }
 
-export const calcScore = (score: number, scaleMax: number, weight: number) => (
+export const calcScore = (score: number, scaleMax: number, weight: number): number => (
     (score / (scaleMax || 1)) * weight
 )
 

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardSection/ScorecardSection.tsx

@@ -15,7 +15,7 @@ interface ScorecardSectionProps {
 
 const ScorecardSection: FC<ScorecardSectionProps> = props => {
     const { aiFeedbackItems }: ScorecardViewerContextValue = useScorecardContext()
-    const allFeedbackItems = aiFeedbackItems || [];
+    const allFeedbackItems = aiFeedbackItems || []
 
     const score = useMemo(() => (
         calcSectionScore(props.section, allFeedbackItems)
@@ -25,7 +25,8 @@ const ScorecardSection: FC<ScorecardSectionProps> = props => {
         <div className={styles.wrap}>
             <div className={styles.headerBar}>
                 <span>
-                    {props.index}.
+                    {props.index}
+                    .
                 </span>
                 <span>
                     {props.section.name}
@@ -35,7 +36,6 @@ const ScorecardSection: FC<ScorecardSectionProps> = props => {
                     <ScorecardScore
                         score={score}
                         scaleMax={1}
-                        scaleType='SCALE'
                         weight={props.section.weight}
                     />
                 </span>
@@ -44,7 +44,7 @@ const ScorecardSection: FC<ScorecardSectionProps> = props => {
             {props.section.questions.map((question, index) => (
                 <ScorecardQuestion
                     key={question.id}
-                    index={[props.index, index+1].join('.')}
+                    index={[props.index, index + 1].join('.')}
                     question={question}
                 />
             ))}

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardTotal/ScorecardTotal.tsx

@@ -1,27 +1,23 @@
 import { FC } from 'react'
 
-import styles from './ScorecardTotal.module.scss'
 import { ScorecardScore } from '../ScorecardScore'
 
+import styles from './ScorecardTotal.module.scss'
+
 interface ScorecardTotalProps {
     score?: number
 }
 
-const ScorecardTotal: FC<ScorecardTotalProps> = props => {
-
-
-    return (
-        <div className={styles.wrap}>
-            <strong>Total Score</strong>
-            <span className={styles.mx} />
-            <ScorecardScore
-                score={props.score ?? 0}
-                scaleMax={100}
-                scaleType='SCALE'
-                weight={100}
-            />
-        </div>
-    )
-}
+const ScorecardTotal: FC<ScorecardTotalProps> = props => (
+    <div className={styles.wrap}>
+        <strong>Total Score</strong>
+        <span className={styles.mx} />
+        <ScorecardScore
+            score={props.score ?? 0}
+            scaleMax={100}
+            weight={100}
+        />
+    </div>
+)
 
 export default ScorecardTotal

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardViewer.context.tsx

@@ -1,6 +1,6 @@
-import { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react';
-import { AiFeedbackItem, Scorecard } from '../../../models';
-import { isEmpty } from 'lodash';
+import { createContext, FC, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+
+import { AiFeedbackItem, Scorecard } from '../../../models'
 
 export interface ScorecardViewerContextProps {
     children: ReactNode;
@@ -14,39 +14,38 @@ export type ScorecardViewerContextValue = {
     toggleItem: (id: string) => void
 };
 
-const ScorecardViewerContext = createContext({} as ScorecardViewerContextValue);
-
+const ScorecardViewerContext = createContext({} as ScorecardViewerContextValue)
 
-export function ScorecardViewerContextProvider({
-    children,
-    aiFeedbackItems,
-    scorecard,
-    ...props
-}: ScorecardViewerContextProps) {
-    const [toggledItems, setToggledItems] = useState<{[key: string]: boolean}>({});
+export const ScorecardViewerContextProvider: FC<ScorecardViewerContextProps> = props => {
+    const [toggledItems, setToggledItems] = useState<{[key: string]: boolean}>({})
 
     const toggleItem = useCallback((id: string, toggle?: boolean) => {
-        setToggledItems((prevItems) => ({
+        setToggledItems(prevItems => ({
             ...prevItems,
             [id]: typeof toggle === 'boolean' ? toggle : !prevItems[id],
         }))
-    }, []);
+    }, [])
 
     // reset toggle state on scorecard change
-    useEffect(() => setToggledItems({}), [scorecard]);
+    useEffect(() => setToggledItems({}), [props.scorecard])
+
+    const ctxValue = useMemo(() => ({
+        aiFeedbackItems: props.aiFeedbackItems,
+        toggledItems,
+        toggleItem,
+    }), [
+        props.aiFeedbackItems,
+        toggledItems,
+        toggleItem,
+    ])
 
     return (
         <ScorecardViewerContext.Provider
-            value={{
-                aiFeedbackItems,
-                toggledItems,
-                toggleItem,
-            }}
-            {...props}
+            value={ctxValue}
         >
-            {children}
+            {props.children}
         </ScorecardViewerContext.Provider>
-    );
-};
+    )
+}
 
-export const useScorecardContext = () => useContext(ScorecardViewerContext);
+export const useScorecardContext = (): ScorecardViewerContextValue => useContext(ScorecardViewerContext)

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardViewer.tsx

@@ -1,32 +1,30 @@
 import { FC } from 'react'
 
-import styles from './ScorecardViewer.module.scss'
 import { AiFeedbackItem, Scorecard } from '../../../models'
+
 import { ScorecardGroup } from './ScorecardGroup'
 import { ScorecardViewerContextProvider } from './ScorecardViewer.context'
 import { ScorecardTotal } from './ScorecardTotal'
+import styles from './ScorecardViewer.module.scss'
 
 interface ScorecardViewerProps {
     scorecard: Scorecard
     aiFeedback?: AiFeedbackItem[]
     score?: number
 }
 
-const ScorecardViewer: FC<ScorecardViewerProps> = props => {
-
-    return (
-        <div className={styles.wrap}>
-            <ScorecardViewerContextProvider
-                scorecard={props.scorecard}
-                aiFeedbackItems={props.aiFeedback}
-            >
-                {props.scorecard.scorecardGroups.map((group, index) => (
-                    <ScorecardGroup key={group.id} group={group} index={index+1} />
-                ))}
-                <ScorecardTotal score={props.score} />
-            </ScorecardViewerContextProvider>
-        </div>
-    )
-}
+const ScorecardViewer: FC<ScorecardViewerProps> = props => (
+    <div className={styles.wrap}>
+        <ScorecardViewerContextProvider
+            scorecard={props.scorecard}
+            aiFeedbackItems={props.aiFeedback}
+        >
+            {props.scorecard.scorecardGroups.map((group, index) => (
+                <ScorecardGroup key={group.id} group={group} index={index + 1} />
+            ))}
+            <ScorecardTotal score={props.score} />
+        </ScorecardViewerContextProvider>
+    </div>
+)
 
 export default ScorecardViewer

src/apps/review/src/pages/ai-scorecards/AiScorecardViewer/AiScorecardViewer.tsx

@@ -8,11 +8,11 @@ import { PageWrapper } from '../../../lib'
 import { useAiScorecardContext } from '../AiScorecardContext'
 import { AiScorecardContextModel } from '../../../lib/models'
 import { AiWorkflowsSidebar } from '../components/AiWorkflowsSidebar'
-
-import styles from './AiScorecardViewer.module.scss'
 import { ScorecardViewer } from '../../../lib/components/Scorecard'
 import { AiWorkflowRunItemsResponse, useFetchAiWorkflowsRunItems } from '../../../lib/hooks'
 
+import styles from './AiScorecardViewer.module.scss'
+
 const AiScorecardViewer: FC = () => {
     const { showBannerNotification, removeNotification }: NotificationContextType = useNotification()
     const { challengeInfo, scorecard, workflowId, workflowRun }: AiScorecardContextModel = useAiScorecardContext()