Add typedef for lazyLoad()

Author: vas3a

src-ts/lib/route-provider/router.utils.ts

@@ -1,11 +1,18 @@
-import { lazy } from 'react'
 import { get } from 'lodash'
+import { ComponentType, lazy, LazyExoticComponent } from 'react'
+
+export type LazyLoadedComponent = LazyExoticComponent<ComponentType<any>>
+
+export type LazyLoadType = (
+    moduleImport: () => Promise<any>,
+    namedExport?: string
+) => LazyLoadedComponent
 
 /**
  * Utility wrapper around react's `lazy` method,
  * it allows importing default and named exports from modules using the same unique method
  * (while react's `lazy` method only allows to import default exports)
  */
-export const lazyLoad = (moduleImport: () => Promise<any>, namedExport: string = 'default') => (
+export const lazyLoad: LazyLoadType = (moduleImport: () => Promise<any>, namedExport: string = 'default') => (
     lazy(() => moduleImport().then(m => ({default: get(m, namedExport)})))
 )

src-ts/tools/dev-center/dev-center.routes.tsx

@@ -1,8 +1,8 @@
-import { lazyLoad, PlatformRoute } from '../../lib'
+import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
-const GettingStartedGuide = lazyLoad(() => import('./dev-center-pages/community-app/getting-started/GettingStartedGuide'))
-const DevCenterLandingPage = lazyLoad(() => import('./dev-center-pages/community-app/landing-page/DevCenterLandingPage'))
-const DevCenter = lazyLoad(() => import('./DevCenter'))
+const GettingStartedGuide: LazyLoadedComponent = lazyLoad(() => import('./dev-center-pages/community-app/getting-started/GettingStartedGuide'))
+const DevCenterLandingPage: LazyLoadedComponent = lazyLoad(() => import('./dev-center-pages/community-app/landing-page/DevCenterLandingPage'))
+const DevCenter: LazyLoadedComponent = lazyLoad(() => import('./DevCenter'))
 
 export const toolTitle: string = 'Dev Center'
 

src-ts/tools/gamification-admin/gamification-admin.routes.tsx

@@ -1,10 +1,11 @@
-import { lazyLoad, PlatformRoute, UserRole } from '../../lib'
+import { lazyLoad, LazyLoadedComponent, PlatformRoute, UserRole } from '../../lib'
 
 import { toolTitle } from './GamificationAdmin'
-const GamificationAdmin = lazyLoad(() => import('./GamificationAdmin'))
-const BadgeDetailPage = lazyLoad(() => import('./pages/badge-detail/BadgeDetailPage'))
-const BadgeListingPage = lazyLoad(() => import('./pages/badge-listing/BadgeListingPage'))
-const CreateBadgePage = lazyLoad(() => import('./pages/create-badge/CreateBadgePage'))
+
+const GamificationAdmin: LazyLoadedComponent = lazyLoad(() => import('./GamificationAdmin'))
+const BadgeDetailPage: LazyLoadedComponent = lazyLoad(() => import('./pages/badge-detail/BadgeDetailPage'))
+const BadgeListingPage: LazyLoadedComponent = lazyLoad(() => import('./pages/badge-listing/BadgeListingPage'))
+const CreateBadgePage: LazyLoadedComponent = lazyLoad(() => import('./pages/create-badge/CreateBadgePage'))
 
 export const baseDetailPath: string = '/badge-detail'
 export const createBadgePath: string = '/create-badge'

src-ts/tools/learn/learn.routes.tsx

@@ -1,16 +1,16 @@
-import { authUrlLogin, lazyLoad, PlatformRoute } from '../../lib'
+import { authUrlLogin, lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
 import { toolTitle } from './Learn'
 import { LearnConfig } from './learn-config'
 
-const WelcomePage = lazyLoad(() => import('./welcome'), 'WelcomePage')
-const CourseDetailsPage = lazyLoad(() => import('./course-details'), 'CourseDetailsPage')
-const CourseCompletedPage = lazyLoad(() => import('./course-completed/'), 'CourseCompletedPage')
-const MyCertificate = lazyLoad(() => import('./course-certificate'), 'MyCertificate')
-const UserCertificate = lazyLoad(() => import('./course-certificate'), 'UserCertificate')
-const FreeCodeCamp = lazyLoad(() => import('./free-code-camp'), 'FreeCodeCamp')
-const MyLearning = lazyLoad(() => import('./my-learning'), 'MyLearning')
-const LandingLearn = lazyLoad(() => import('./Learn'))
+const WelcomePage: LazyLoadedComponent = lazyLoad(() => import('./welcome'), 'WelcomePage')
+const CourseDetailsPage: LazyLoadedComponent = lazyLoad(() => import('./course-details'), 'CourseDetailsPage')
+const CourseCompletedPage: LazyLoadedComponent = lazyLoad(() => import('./course-completed/'), 'CourseCompletedPage')
+const MyCertificate: LazyLoadedComponent = lazyLoad(() => import('./course-certificate'), 'MyCertificate')
+const UserCertificate: LazyLoadedComponent = lazyLoad(() => import('./course-certificate'), 'UserCertificate')
+const FreeCodeCamp: LazyLoadedComponent = lazyLoad(() => import('./free-code-camp'), 'FreeCodeCamp')
+const MyLearning: LazyLoadedComponent = lazyLoad(() => import('./my-learning'), 'MyLearning')
+const LandingLearn: LazyLoadedComponent = lazyLoad(() => import('./Learn'))
 
 export enum LEARN_PATHS {
     certificate = '/certificate',

src-ts/tools/work/work.routes.tsx

@@ -1,21 +1,20 @@
 import { Navigate } from 'react-router-dom'
 
-import { contactSupportPath, lazyLoad, PlatformRoute } from '../../lib'
+import { contactSupportPath, lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
 import { dashboardTitle, toolTitle } from './Work'
 import { Work, WorkIntakeFormRoutes, WorkStatus } from './work-lib'
 import { WorkLoginPrompt } from './work-login-prompt'
 import { intakeFormsTitle } from './work-self-service'
 
-const WorkComponent = lazyLoad(() => import('./Work'))
-const WorkNotLoggedIn = lazyLoad(() => import('./work-not-logged-in'), 'WorkNotLoggedIn')
-const BugHuntIntakeForm = lazyLoad(() => import('./work-self-service'), 'BugHuntIntakeForm')
-const IntakeForms = lazyLoad(() => import('./work-self-service'), 'IntakeForms')
-const Review = lazyLoad(() => import('./work-self-service'), 'Review')
-
-const SaveAfterLogin = lazyLoad(() => import('./work-self-service/intake-forms/save-after-login/SaveAfterLogin'))
-const WorkTable = lazyLoad(() => import('./work-table'), 'WorkTable')
-const WorkThankYou = lazyLoad(() => import('./work-thank-you'), 'WorkThankYou')
+const WorkComponent: LazyLoadedComponent = lazyLoad(() => import('./Work'))
+const WorkNotLoggedIn: LazyLoadedComponent = lazyLoad(() => import('./work-not-logged-in'), 'WorkNotLoggedIn')
+const BugHuntIntakeForm: LazyLoadedComponent = lazyLoad(() => import('./work-self-service'), 'BugHuntIntakeForm')
+const IntakeForms: LazyLoadedComponent = lazyLoad(() => import('./work-self-service'), 'IntakeForms')
+const Review: LazyLoadedComponent = lazyLoad(() => import('./work-self-service'), 'Review')
+const SaveAfterLogin: LazyLoadedComponent = lazyLoad(() => import('./work-self-service/intake-forms/save-after-login/SaveAfterLogin'))
+const WorkTable: LazyLoadedComponent = lazyLoad(() => import('./work-table'), 'WorkTable')
+const WorkThankYou: LazyLoadedComponent = lazyLoad(() => import('./work-thank-you'), 'WorkThankYou')
 
 export const rootRoute: string = '/work'
 export const selfServiceRootRoute: string = '/self-service'

src-ts/utils/contact-support/ContactSupport.tsx

@@ -8,6 +8,7 @@ import {
     formGetInputFields,
     formOnReset
 } from '../../lib'
+
 import { toolTitle } from './contact-support.routes'
 
 const ContactSupport: FC<{}> = () => {

src-ts/utils/contact-support/contact-support.routes.tsx

@@ -1,8 +1,8 @@
-import { contactSupportPath, lazyLoad, PlatformRoute } from '../../lib'
+import { contactSupportPath, lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
 export const toolTitle: string = 'Contact Support'
 
-const ContactSupport = lazyLoad(() => import('./ContactSupport'));
+const ContactSupport: LazyLoadedComponent = lazyLoad(() => import('./ContactSupport'))
 
 export const contactSupportRoutes: Array<PlatformRoute> = [
     {

src-ts/utils/home/home.routes.tsx

@@ -1,6 +1,6 @@
-import { lazyLoad, PlatformRoute } from '../../lib'
+import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
-const Home = lazyLoad(() => import('./Home'));
+const Home: LazyLoadedComponent = lazyLoad(() => import('./Home'))
 
 export const homeRoute: string = ''
 

src-ts/utils/settings/settings.routes.tsx

@@ -1,8 +1,8 @@
 import { ToolTitle } from '../../config'
-import { lazyLoad, PlatformRoute } from '../../lib'
+import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
-const Account = lazyLoad(() => import('./account'), 'Account');
-const Settings = lazyLoad(() => import('./Settings'));
+const Account: LazyLoadedComponent = lazyLoad(() => import('./account'), 'Account')
+const Settings: LazyLoadedComponent = lazyLoad(() => import('./Settings'))
 
 export const settingsRoutes: Array<PlatformRoute> = [
     {