TCA-560 Type Defs -> TCA-499_eslint

src-ts/.eslintrc.js

@@ -44,20 +44,39 @@ module.exports = {
                 }
             }
         ],
-        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/explicit-function-return-type': [
+            'error',
+            {
+                allowExpressions: true
+            }
+        ],
         '@typescript-eslint/no-explicit-any': 'error',
         '@typescript-eslint/no-inferrable-types': 'off',
         '@typescript-eslint/no-shadow': 'error',
         '@typescript-eslint/no-unused-vars': 'error',
         '@typescript-eslint/strict-boolean-expressions': [
             'error',
             {
+                allowAny: true,
                 allowNullableBoolean: true,
                 allowNullableObject: true,
                 allowNullableNumber: true,
                 allowNullableString: true
             }
         ],
+        '@typescript-eslint/typedef': [
+            'error',
+            {
+                arrowParameter: false,
+                propertyDeclaration: true,
+                parameter: true,
+                memberVariableDeclaration: true,
+                callSignature: true,
+                variableDeclaration: true,
+                arrayDestructuring: true,
+                objectDestructuring: true
+            }
+        ],
         'arrow-parens': [
             'error',
             'as-needed'
@@ -154,13 +173,41 @@ module.exports = {
         'padded-blocks': 'off',
         'padding-line-between-statements': [
             'error',
-            { blankLine: 'always', prev: 'directive', next: '*' },
-            { blankLine: 'any', prev: 'directive', next: 'directive' },
-            { blankLine: 'always', prev: 'cjs-import', next: '*' },
-            { blankLine: 'any', prev: 'cjs-import', next: 'cjs-import' },
-            { blankLine: 'always', prev: 'cjs-export', next: '*' },
-            { blankLine: 'always', prev: 'multiline-block-like', next: '*' },
-            { blankLine: 'always', prev: 'class', next: '*' }
+            {
+                blankLine: 'always',
+                prev: 'directive',
+                next: '*'
+            },
+            {
+                blankLine: 'any',
+                prev: 'directive',
+                next: 'directive'
+            },
+            {
+                blankLine: 'always',
+                prev: 'cjs-import',
+                next: '*'
+            },
+            {
+                blankLine: 'any',
+                prev: 'cjs-import',
+                next: 'cjs-import'
+            },
+            {
+                blankLine: 'always',
+                prev: 'cjs-export',
+                next: '*'
+            },
+            {
+                blankLine: 'always',
+                prev: 'multiline-block-like',
+                next: '*'
+            },
+            {
+                blankLine: 'always',
+                prev: 'class',
+                next: '*'
+            }
         ],
         'prefer-destructuring': 'off',
         'react-hooks/exhaustive-deps': 'warn',
@@ -170,9 +217,10 @@ module.exports = {
             'never'
         ],
         'react/function-component-definition': [
-            2,
+            'error',
             {
-                namedComponents: 'arrow-function'
+                namedComponents: 'arrow-function',
+                unnamedComponents: 'function-expression'
             }
         ],
         'react/jsx-filename-extension': [

src-ts/lib/route-provider/require-auth-provider/require-auth.provider.tsx

@@ -9,39 +9,40 @@ interface RequireAuthProviderProps {
     rolesRequired?: Array<string>
 }
 
-const RequireAuthProvider = (props: RequireAuthProviderProps): JSX.Element => {
+const RequireAuthProvider: (props: RequireAuthProviderProps) => JSX.Element
+    = (props: RequireAuthProviderProps): JSX.Element => {
 
-    const profileContextData: ProfileContextData = useContext(profileContext)
-    const { profile, initialized }: ProfileContextData = profileContextData
+        const profileContextData: ProfileContextData = useContext(profileContext)
+        const { profile, initialized }: ProfileContextData = profileContextData
 
-    // if we're not initialized yet, just return the children
-    if (!initialized) {
-        return props.children
-    }
+        // if we're not initialized yet, just return the children
+        if (!initialized) {
+            return props.children
+        }
 
-    // if we have a profile and `rolesRequired` is configured for the route
-    // check the user's roles, allow access or show restricted page
-    if (!!profile) {
-        if (props.rolesRequired) {
-            if (!profile.roles) {
-                return RestrictedPage
-            }
+        // if we have a profile and `rolesRequired` is configured for the route
+        // check the user's roles, allow access or show restricted page
+        if (!!profile) {
+            if (props.rolesRequired) {
+                if (!profile.roles) {
+                    return RestrictedPage
+                }
+
+                // if the profile doesn't include all the required roles, show the restricted page
+                if (props.rolesRequired.some(role => !profile.roles.includes(role))) {
+                    return RestrictedPage
+                }
 
-            // if the profile doesn't include all the required roles, show the restricted page
-            if (props.rolesRequired.some(role => !profile.roles.includes(role))) {
-                return RestrictedPage
+                return props.children
             }
 
             return props.children
-        }
 
-        return props.children
+        }
 
+        // redirect to the login page
+        window.location.href = props.loginUrl
+        return <></>
     }
 
-    // redirect to the login page
-    window.location.href = props.loginUrl
-    return <></>
-}
-
 export default RequireAuthProvider

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownCode.tsx

@@ -32,9 +32,7 @@ export const MarkdownCode: React.FC<MarkdownCodeProps> = props => {
 
     return (
         <div
-            className={`${styles.codeBlock} ${
-                showLineNumbers ? styles['show-line-numbers'] : ''
-            } hljs`}
+            className={`${styles.codeBlock} ${showLineNumbers ? styles['show-line-numbers'] : ''} hljs`}
             ref={ref}
         >
             <LineNumbers
@@ -54,86 +52,87 @@ interface LineNumbersProps {
     showLineNumbers: boolean
 }
 
-const LineNumbers = (props: LineNumbersProps): React.ReactElement | null => {
-    const { codeRef, showLineNumbers, onVisibilityChange }: LineNumbersProps
-        = props
-    const [lineNumbers, setLineNumbers]: [
-        Array<number>,
-        React.Dispatch<React.SetStateAction<Array<number>>>
-    ] = React.useState([1])
-
-    const size: ReturnType<typeof useWindowSize> = useWindowSize()
-
-    // OnResizing
-    const debounceTimer: React.MutableRefObject<
-        ReturnType<typeof setTimeout> | undefined
-    > = React.useRef<ReturnType<typeof setTimeout>>()
-    React.useEffect(() => {
-        if (!size.width || !codeRef.current) {
-            return
-        }
+const LineNumbers: (props: LineNumbersProps) => React.ReactElement | null
+    = (props: LineNumbersProps): React.ReactElement | null => {
+
+        const { codeRef, showLineNumbers, onVisibilityChange }: LineNumbersProps
+            = props
+        const [lineNumbers, setLineNumbers]: [
+            Array<number>,
+            React.Dispatch<React.SetStateAction<Array<number>>>
+        ] = React.useState([1])
+
+        const size: ReturnType<typeof useWindowSize> = useWindowSize()
+
+        // OnResizing
+        const debounceTimer: React.MutableRefObject<
+            ReturnType<typeof setTimeout> | undefined
+        > = React.useRef<ReturnType<typeof setTimeout>>()
+        React.useEffect(() => {
+            if (!size.width || !codeRef.current) {
+                return
+            }
 
-        if (debounceTimer.current) {
-            clearTimeout(debounceTimer.current)
-            debounceTimer.current = undefined
-        }
+            if (debounceTimer.current) {
+                clearTimeout(debounceTimer.current)
+                debounceTimer.current = undefined
+            }
 
-        const pre: HTMLPreElement | null = codeRef.current.querySelector('pre')
-        if (!pre) {
-            return
-        }
+            const pre: HTMLPreElement | null = codeRef.current.querySelector('pre')
+            if (!pre) {
+                return
+            }
+
+            const innerText: string = pre.innerText
+            const clientWidth: number = pre.clientWidth
 
-        const innerText: string = pre.innerText
-        const clientWidth: number = pre.clientWidth
+            const handleResizing: () => void = () => {
+                const result: Array<number> = computeLineNumbers(
+                    innerText,
+                    clientWidth,
+                )
 
-        const handleResizing: () => void = () => {
-            const result: Array<number> = computeLineNumbers(
-                innerText,
-                clientWidth,
-            )
+                if (result.length < 2) {
+                    onVisibilityChange(false)
+                } else {
+                    onVisibilityChange(true)
+                }
 
-            if (result.length < 2) {
-                onVisibilityChange(false)
-            } else {
-                onVisibilityChange(true)
+                setLineNumbers(result)
             }
 
-            setLineNumbers(result)
-        }
+            debounceTimer.current = setTimeout(() => {
+                debounceTimer.current = undefined
+                handleResizing()
+            }, 100)
 
-        debounceTimer.current = setTimeout(() => {
-            debounceTimer.current = undefined
-            handleResizing()
-        }, 100)
+            return () => {
+                clearTimeout(debounceTimer.current)
+            }
+        }, [size.width, onVisibilityChange, codeRef])
 
-        return () => {
-            clearTimeout(debounceTimer.current)
+        if (!showLineNumbers) {
+            return null
         }
-    }, [size.width, onVisibilityChange, codeRef])
 
-    if (!showLineNumbers) {
-        return null
+        return (
+            <div className={styles.lineNumbers}>
+                {lineNumbers.map((n, index) => {
+                    const prev: number = index > 0 ? lineNumbers[index - 1] : -1
+                    return (
+                        <div
+                            key={`line-${index}`}
+                            className={`${styles.num} ${prev === n ? styles.hidden : ''
+                                }`}
+                        >
+                            {n}
+                        </div>
+                    )
+                })}
+            </div>
+        )
     }
 
-    return (
-        <div className={styles.lineNumbers}>
-            {lineNumbers.map((n, index) => {
-                const prev: number = index > 0 ? lineNumbers[index - 1] : -1
-                return (
-                    <div
-                        key={`line-${index}`}
-                        className={`${styles.num} ${
-                            prev === n ? styles.hidden : ''
-                        }`}
-                    >
-                        {n}
-                    </div>
-                )
-            })}
-        </div>
-    )
-}
-
 function measureText(text: string, canvas: HTMLCanvasElement): number {
     const context: CanvasRenderingContext2D | null = canvas.getContext('2d')
     if (!context) {

src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-action-renderer/MemberActionRenderer.tsx

@@ -1,33 +1,35 @@
+/* eslint-disable arrow-body-style */
 // TODO: enable when unassign feature is ready
 // import { Button, ButtonProps, useCheckIsMobile } from '../../../../../../../lib'
 import { MemberBadgeAward } from '../../../../../game-lib'
 
 import styles from './MemberActionRenderer.module.scss'
 
-const MemberActionRenderer = (memberAward: MemberBadgeAward): JSX.Element =>
+const MemberActionRenderer: (memberAward: MemberBadgeAward) => JSX.Element
+    = (memberAward: MemberBadgeAward): JSX.Element => {
 
-// const isMobile: boolean = useCheckIsMobile()
+        // const isMobile: boolean = useCheckIsMobile()
 
-// const buttonProps: ButtonProps = {
-//     buttonStyle: 'secondary',
-//     size: isMobile ? 'xs' : 'sm',
-// }
+        // const buttonProps: ButtonProps = {
+        //     buttonStyle: 'secondary',
+        //     size: isMobile ? 'xs' : 'sm',
+        // }
 
-// const actionButtons: Array<{
-//     label: string
-// }> = [
-//         {
-//             label: 'Unassign',
-//         },
-//     ]
+        // const actionButtons: Array<{
+        //     label: string
+        // }> = [
+        //         {
+        //             label: 'Unassign',
+        //         },
+        //     ]
 
-// function onUnassign(): void {
+        // function onUnassign(): void {
 
-// }
+        // }
 
-    (
-        <div className={styles['badge-actions']}>
-            {/* {actionButtons.map((button, index) => {
+        return (
+            <div className={styles['badge-actions']}>
+                {/* {actionButtons.map((button, index) => {
                 return (
                     <Button
                         {...buttonProps}
@@ -37,7 +39,8 @@ const MemberActionRenderer = (memberAward: MemberBadgeAward): JSX.Element =>
                     />
                 )
             })} */}
-        </div>
-    )
+            </div>
+        )
+    }
 
 export default MemberActionRenderer