roost.tools / coop
Mirror of https://github.com/roostorg/coop github.com/roostorg/coop
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: lazy-load dashboard routes (#334)

authored by

Shalabh Agarwal and committed by
GitHub 8a089c06 30db3f44

+78 -77
+78 -77
client/src/webpages/dashboard/Dashboard.tsx
··· 6 6 } from '@/icons'; 7 7 import { gql } from '@apollo/client'; 8 8 import compact from 'lodash/compact'; 9 - import { useEffect, useState } from 'react'; 9 + import { useEffect, useState, type ComponentType } from 'react'; 10 10 import { Helmet } from 'react-helmet-async'; 11 11 import { 12 12 Navigate, ··· 19 19 import FullScreenLoading from '../../components/common/FullScreenLoading'; 20 20 21 21 import { RequireAuth } from '../../routing/auth'; 22 - import AccountSettings from '../settings/AccountSettings'; 23 - import ApiAuthenticationSettings from '../settings/ApiAuthenticationSettings'; 24 - import ManageUsers from '../settings/ManageUsers'; 25 - import OrgSettings from '../settings/OrgSettings'; 26 - import ActionForm from './actions/ActionForm'; 27 - import ActionsDashboard from './actions/ActionsDashboard'; 28 - import LocationBankForm from './banks/location/LocationBankForm'; 29 - import TextBankForm from './banks/text/TextBankForm'; 30 - import HashBankForm from './banks/hash/HashBankForm'; 31 - import BulkActioningDashboard from './bulk_actioning/BulkActioningDashboard'; 32 - import IntegrationConfigForm from './integrations/IntegrationConfigForm'; 33 - import IntegrationsDashboard from './integrations/IntegrationsDashboard'; 34 - import InvestigationDashboard from './investigation/InvestigationDashboard'; 35 - import ItemTypeForm from './item_types/ItemTypeForm'; 36 - import ItemTypesDashboard from './item_types/ItemTypesDashboard'; 37 - import ManualReviewJobReview from './mrt/manual_review_job/ManualReviewJobReview'; 38 - import ManualReviewAnalyticsDashboard from './mrt/ManualReviewAnalyticsDashboard'; 39 - import ManualReviewQueueForm from './mrt/ManualReviewQueueForm'; 40 - import ManualReviewQueueJobsPreview from './mrt/ManualReviewQueueJobsPreview'; 41 - import ManualReviewQueuesDashboard from './mrt/ManualReviewQueuesDashboard'; 42 - import ManualReviewRecentDecisions from './mrt/ManualReviewRecentDecisions'; 43 - import ManualReviewQueueRoutingDashboard from './mrt/queue_routing/ManualReviewQueueRoutingDashboard'; 44 - import NcmecReportsDashboard from './ncmec/NcmecReportsDashboard'; 45 - import PoliciesDashboard from './policies/PoliciesDashboard'; 46 - import ReportingRulesDashboard from './rules/dashboard/ReportingRulesDashboard'; 47 - import RulesDashboard from './rules/dashboard/RulesDashboard'; 48 - import ReportingRuleInfo from './rules/info/ReportingRuleInfo'; 49 - import RuleInfo from './rules/info/RuleInfo'; 50 - import ReportingRuleForm from './rules/rule_form/ReportingRuleForm'; 51 - import RuleForm from './rules/rule_form/RuleForm'; 52 22 53 23 import './Dashboard.css'; 54 24 ··· 63 33 useGQLDashboardOrgQuery, 64 34 useGQLLogoutMutation, 65 35 } from '../../graphql/generated'; 66 - import OrgSafetySettings from '../settings/OrgSafetySettings'; 67 - import NCMECSettings from '../settings/NCMECSettings'; 68 - import SSOSettings from '../settings/SSOSettings'; 69 - import MatchingBanksDashboard from './banks/MatchingBanksDashboard'; 70 - import ManualReviewAppealSettings from './mrt/ManualReviewAppealSettings'; 71 - import Overview from './overview/Overview'; 72 - import PolicyForm from './policies/PolicyForm'; 73 - import UserStrikeDashboard from './userStrikes/UserStrikeDashboard'; 74 36 75 37 gql` 76 38 query DashboardOrg { ··· 94 56 } 95 57 `; 96 58 59 + const lazyRoute = 60 + (importFn: () => Promise<{ default: ComponentType }>) => async () => ({ 61 + Component: (await importFn()).default, 62 + }); 63 + 97 64 export function DashboardRoutes() { 98 65 return { 99 66 path: 'dashboard', ··· 111 78 }, 112 79 { 113 80 path: 'overview', 114 - element: <Overview />, 115 81 handle: { isUsingLegacyCSS: true }, 82 + lazy: lazyRoute(async () => import('./overview/Overview')), 116 83 }, 117 84 { 118 85 path: 'rules', ··· 121 88 }, 122 89 { 123 90 path: 'rules/proactive', 124 - element: <RulesDashboard />, 125 91 handle: { isUsingLegacyCSS: true }, 92 + lazy: lazyRoute(async () => import('./rules/dashboard/RulesDashboard')), 126 93 }, 127 94 { 128 95 path: 'rules/proactive/info/:id', 129 - element: <RuleInfo />, 130 96 handle: { isUsingLegacyCSS: true }, 97 + lazy: lazyRoute(async () => import('./rules/info/RuleInfo')), 131 98 }, 132 99 { 133 100 path: 'rules/proactive/form/:id?', 134 - element: <RuleForm />, 135 101 handle: { isUsingLegacyCSS: true }, 102 + lazy: lazyRoute(async () => import('./rules/rule_form/RuleForm')), 136 103 }, 137 104 138 105 // Reporting Rules 139 106 { 140 107 path: 'rules/report', 141 - element: <ReportingRulesDashboard />, 142 108 handle: { isUsingLegacyCSS: true }, 109 + lazy: lazyRoute( 110 + async () => import('./rules/dashboard/ReportingRulesDashboard'), 111 + ), 143 112 }, 144 113 { 145 114 path: 'rules/report/info/:id', 146 - element: <ReportingRuleInfo />, 147 115 handle: { isUsingLegacyCSS: true }, 116 + lazy: lazyRoute(async () => import('./rules/info/ReportingRuleInfo')), 148 117 }, 149 118 { 150 119 path: 'rules/report/form/:id?', 151 - element: <ReportingRuleForm />, 152 120 handle: { isUsingLegacyCSS: true }, 121 + lazy: lazyRoute( 122 + async () => import('./rules/rule_form/ReportingRuleForm'), 123 + ), 153 124 }, 154 125 // Matching Banks 155 126 { ··· 159 130 }, 160 131 { 161 132 path: 'rules/banks', 162 - element: <MatchingBanksDashboard />, 163 133 handle: { isUsingLegacyCSS: true }, 134 + lazy: lazyRoute(async () => import('./banks/MatchingBanksDashboard')), 164 135 }, 165 136 { 166 137 path: 'banks/text', ··· 174 145 }, 175 146 { 176 147 path: 'rules/banks/form/text/:id?', 177 - element: <TextBankForm />, 178 148 handle: { 179 149 isUsingLegacyCSS: true, 180 150 error: { ··· 182 152 buttonLinkPath: 'rules/banks', 183 153 }, 184 154 }, 155 + lazy: lazyRoute(async () => import('./banks/text/TextBankForm')), 185 156 }, 186 157 { 187 158 path: 'rules/banks/form/location/:id?', 188 - element: <LocationBankForm />, 189 159 handle: { 190 160 isUsingLegacyCSS: true, 191 161 error: { ··· 193 163 buttonLinkPath: 'rules/banks', 194 164 }, 195 165 }, 166 + lazy: lazyRoute( 167 + async () => import('./banks/location/LocationBankForm'), 168 + ), 196 169 }, 197 170 { 198 171 path: 'rules/banks/form/hash/:id?', 199 - element: <HashBankForm />, 200 172 handle: { 201 173 isUsingLegacyCSS: true, 202 174 error: { ··· 204 176 buttonLinkPath: 'rules/banks?kind=HASH', 205 177 }, 206 178 }, 179 + lazy: lazyRoute(async () => import('./banks/hash/HashBankForm')), 207 180 }, 208 181 209 182 // Actions ··· 233 206 }, 234 207 { 235 208 path: 'manual_review/queues', 236 - element: <ManualReviewQueuesDashboard />, 237 209 handle: { isUsingLegacyCSS: true }, 210 + lazy: lazyRoute( 211 + async () => import('./mrt/ManualReviewQueuesDashboard'), 212 + ), 238 213 }, 239 214 { 240 215 path: 'manual_review/queues/form/:id?', 241 - element: <ManualReviewQueueForm />, 242 216 handle: { isUsingLegacyCSS: true }, 217 + lazy: lazyRoute(async () => import('./mrt/ManualReviewQueueForm')), 243 218 }, 244 219 { 245 220 path: 'manual_review/queues/review/:queueId/:jobId?/:lockToken?', 246 - element: <ManualReviewJobReview />, 247 221 handle: { 248 222 isUsingLegacyCSS: true, 249 223 error: { ··· 251 225 buttonLinkPath: 'manual_review/queues', 252 226 }, 253 227 }, 228 + lazy: lazyRoute( 229 + async () => import('./mrt/manual_review_job/ManualReviewJobReview'), 230 + ), 254 231 }, 255 232 { 256 233 path: 'manual_review/queues/jobs/:queueId', 257 - element: <ManualReviewQueueJobsPreview />, 258 234 handle: { 259 235 isUsingLegacyCSS: true, 260 236 error: { ··· 262 238 buttonLinkPath: 'manual_review/queues', 263 239 }, 264 240 }, 241 + lazy: lazyRoute( 242 + async () => import('./mrt/ManualReviewQueueJobsPreview'), 243 + ), 265 244 }, 266 245 { 267 246 path: 'manual_review/bulk-actioning', 268 - element: <BulkActioningDashboard />, 269 247 handle: { 270 248 isUsingLegacyCSS: true, 271 249 error: { ··· 273 251 buttonLinkPath: 'manual_review/queues', 274 252 }, 275 253 }, 254 + lazy: lazyRoute( 255 + async () => import('./bulk_actioning/BulkActioningDashboard'), 256 + ), 276 257 }, 277 258 { 278 259 path: 'manual_review/investigation', 279 - element: <InvestigationDashboard />, 280 260 handle: { 281 261 isUsingLegacyCSS: true, 282 262 error: { ··· 284 264 buttonLinkPath: 'manual_review/queues', 285 265 }, 286 266 }, 267 + lazy: lazyRoute( 268 + async () => import('./investigation/InvestigationDashboard'), 269 + ), 287 270 }, 288 271 { 289 272 path: 'manual_review/ncmec_reports', 290 - element: <NcmecReportsDashboard />, 291 273 handle: { 292 274 isUsingLegacyCSS: true, 293 275 error: { ··· 295 277 buttonLinkPath: 'manual_review/queues', 296 278 }, 297 279 }, 280 + lazy: lazyRoute(async () => import('./ncmec/NcmecReportsDashboard')), 298 281 }, 299 282 { 300 283 path: 'manual_review/routing', 301 - element: <ManualReviewQueueRoutingDashboard />, 302 284 handle: { 303 285 isUsingLegacyCSS: true, 304 286 error: { ··· 306 288 buttonLinkPath: 'manual_review/queues', 307 289 }, 308 290 }, 291 + lazy: lazyRoute( 292 + async () => 293 + import('./mrt/queue_routing/ManualReviewQueueRoutingDashboard'), 294 + ), 309 295 }, 310 296 { 311 297 path: 'manual_review/recent', 312 - element: <ManualReviewRecentDecisions />, 313 298 handle: { 314 299 isUsingLegacyCSS: true, 315 300 error: { ··· 317 302 buttonLinkPath: 'manual_review/queues', 318 303 }, 319 304 }, 305 + lazy: lazyRoute( 306 + async () => import('./mrt/ManualReviewRecentDecisions'), 307 + ), 320 308 }, 321 309 { 322 310 path: 'manual_review/safety', ··· 325 313 }, 326 314 { 327 315 path: 'manual_review/analytics', 328 - element: <ManualReviewAnalyticsDashboard />, 329 316 handle: { 330 317 isUsingLegacyCSS: true, 331 318 error: { 332 319 buttonTitle: 'Back to Manual Review Queues', 333 320 }, 334 321 }, 322 + lazy: lazyRoute( 323 + async () => import('./mrt/ManualReviewAnalyticsDashboard'), 324 + ), 335 325 }, 336 326 { 337 327 path: 'settings/appeal_settings', 338 - element: <ManualReviewAppealSettings />, 339 328 handle: { 340 329 isUsingLegacyCSS: true, 341 330 error: { 342 331 buttonTitle: 'Back to Manual Review Queues', 343 332 }, 344 333 }, 334 + lazy: lazyRoute(async () => import('./mrt/ManualReviewAppealSettings')), 345 335 }, 346 336 347 337 // Redirect old Bulk Actioning Tool and Investigation paths ··· 359 349 // Policies 360 350 { 361 351 path: 'policies', 362 - element: <PoliciesDashboard />, 363 352 handle: { isUsingLegacyCSS: true }, 353 + lazy: lazyRoute(async () => import('./policies/PoliciesDashboard')), 364 354 }, 365 355 { 366 356 path: 'policies/form/:existingPolicyId?', 367 - element: <PolicyForm />, 368 357 handle: { isUsingLegacyCSS: true }, 358 + lazy: lazyRoute(async () => import('./policies/PolicyForm')), 369 359 }, 370 360 // TODO: uncomment this when final UI is finished 371 - { path: 'user_strikes', element: <UserStrikeDashboard /> }, 361 + { 362 + path: 'user_strikes', 363 + lazy: lazyRoute( 364 + async () => import('./userStrikes/UserStrikeDashboard'), 365 + ), 366 + }, 372 367 373 368 // Integrations 374 369 { ··· 385 380 }, 386 381 { 387 382 path: 'settings/item_types', 388 - element: <ItemTypesDashboard />, 389 383 handle: { isUsingLegacyCSS: true }, 384 + lazy: lazyRoute(async () => import('./item_types/ItemTypesDashboard')), 390 385 }, 391 386 { 392 387 path: 'settings/item_types/form/:id?', 393 - element: <ItemTypeForm />, 394 388 handle: { 395 389 isUsingLegacyCSS: true, 396 390 error: { 397 391 buttonTitle: 'Back to Item Types Dashboard', 398 392 }, 399 393 }, 394 + lazy: lazyRoute(async () => import('./item_types/ItemTypeForm')), 400 395 }, 401 396 { 402 397 path: 'settings/actions', 403 - element: <ActionsDashboard />, 404 398 handle: { isUsingLegacyCSS: true }, 399 + lazy: lazyRoute(async () => import('./actions/ActionsDashboard')), 405 400 }, 406 401 { 407 402 path: 'settings/actions/form/:id?', 408 - element: <ActionForm />, 409 403 handle: { 410 404 isUsingLegacyCSS: true, 411 405 error: { ··· 413 407 buttonLinkPath: '/dashboard/actions', 414 408 }, 415 409 }, 410 + lazy: lazyRoute(async () => import('./actions/ActionForm')), 416 411 }, 417 412 { 418 413 path: 'settings/integrations', 419 - element: <IntegrationsDashboard />, 420 414 handle: { isUsingLegacyCSS: true }, 415 + lazy: lazyRoute( 416 + async () => import('./integrations/IntegrationsDashboard'), 417 + ), 421 418 }, 422 419 { 423 420 path: 'settings/integrations/:name', 424 - element: <IntegrationConfigForm />, 425 421 handle: { 426 422 isUsingLegacyCSS: true, 427 423 error: { 428 424 buttonTitle: 'Back to Integrations Dashboard', 429 425 }, 430 426 }, 427 + lazy: lazyRoute( 428 + async () => import('./integrations/IntegrationConfigForm'), 429 + ), 431 430 }, 432 431 { 433 432 path: 'settings/account', ··· 436 435 }, 437 436 { 438 437 path: 'settings/api_auth', 439 - element: <ApiAuthenticationSettings />, 440 438 handle: { isUsingLegacyCSS: false }, 439 + lazy: lazyRoute( 440 + async () => import('../settings/ApiAuthenticationSettings'), 441 + ), 441 442 }, 442 443 { 443 444 path: 'settings/org_safety_settings', 444 - element: <OrgSafetySettings />, 445 445 handle: { isUsingLegacyCSS: false }, 446 + lazy: lazyRoute(async () => import('../settings/OrgSafetySettings')), 446 447 }, 447 448 { 448 449 path: 'settings/ncmec', 449 - element: <NCMECSettings />, 450 450 handle: { isUsingLegacyCSS: false }, 451 + lazy: lazyRoute(async () => import('../settings/NCMECSettings')), 451 452 }, 452 453 { 453 454 path: 'settings/users', 454 - element: <ManageUsers />, 455 455 handle: { isUsingLegacyCSS: true }, 456 + lazy: lazyRoute(async () => import('../settings/ManageUsers')), 456 457 }, 457 458 { 458 459 path: 'settings/sso', 459 - element: <SSOSettings />, 460 460 handle: { isUsingLegacyCSS: true }, 461 + lazy: lazyRoute(async () => import('../settings/SSOSettings')), 461 462 }, 462 463 { 463 464 path: 'settings/organization', 464 - element: <OrgSettings />, 465 465 handle: { isUsingLegacyCSS: false }, 466 + lazy: lazyRoute(async () => import('../settings/OrgSettings')), 466 467 }, 467 468 // Account 468 469 { 469 470 path: 'account', 470 - element: <AccountSettings />, 471 471 handle: { isUsingLegacyCSS: false }, 472 + lazy: lazyRoute(async () => import('../settings/AccountSettings')), 472 473 }, 473 474 ], 474 475 };