WidgetWindow.tsx

import React from 'react';
import { useOnCreate } from 'slap';
import { ModalLayout } from '../../shared/ModalLayout';
import { Services } from '../../service-provider';
import { AlertBox } from '../AlertBox';
import { AlertBoxModule } from '../useAlertBox';
import { useWidgetRoot, WidgetModule } from './useWidget';
// TODO: import other widgets here to avoid merge conflicts
import { GenericGoal, GenericGoalModule } from '../GenericGoal';
import { ChatBox, ChatBoxModule } from '../ChatBox';
// ChatHighlight
// Credits
import { DonationTicker, DonationTickerModule } from '../DonationTicker';
import { EmoteWall, EmoteWallModule } from '../EmoteWall';
import { EventList, EventListModule } from '../EventList';
// MediaShare
// Poll
// SpinWheel
import { SponsorBanner, SponsorBannerModule } from '../SponsorBanner';
// StreamBoss
// TipJar
import { GameWidget, GameWidgetModule } from '../GameWidget';
import { ViewerCount, ViewerCountModule } from '../ViewerCount';
import { CustomWidget, CustomWidgetModule } from '../CustomWidget';
import { GamePulseWidget } from 'components-react/widgets/GamePulse';
import { GamePulseModule } from 'components-react/widgets/game-pulse/useGamePulseWidget';
import { useSubscription } from '../../hooks/useSubscription';
import { useChildWindowParams } from 'components-react/hooks';
import { Streamboss, StreambossModule } from '../StreamBoss';

// define list of Widget components and modules
export const components = {
  AlertBox: [AlertBox, AlertBoxModule],
  BitGoal: [GenericGoal, GenericGoalModule],
  DonationGoal: [GenericGoal, GenericGoalModule],
  CharityGoal: [GenericGoal, GenericGoalModule],
  FollowerGoal: [GenericGoal, GenericGoalModule],
  StarsGoal: [GenericGoal, GenericGoalModule],
  SubGoal: [GenericGoal, GenericGoalModule],
  SubscriberGoal: [GenericGoal, GenericGoalModule],
  SuperchatGoal: [GenericGoal, GenericGoalModule],
  ChatBox: [ChatBox, ChatBoxModule],
  // ChatHighlight
  // Credits
  DonationTicker: [DonationTicker, DonationTickerModule],
  EmoteWall: [EmoteWall, EmoteWallModule],
  EventList: [EventList, EventListModule],
  // MediaShare
  // Poll
  // SpinWheel
  SponsorBanner: [SponsorBanner, SponsorBannerModule],
  StreamBoss: [Streamboss, StreambossModule],
  // TipJar
  ViewerCount: [ViewerCount, ViewerCountModule],
  GameWidget: [GameWidget, GameWidgetModule],
  CustomWidget: [CustomWidget, CustomWidgetModule],
  GamePulseWidget: [GamePulseWidget, GamePulseModule],
};

/**
 * Renders a widget window by given sourceId from window's query params
 */
export function WidgetWindow() {
  const { WidgetsService } = Services;
  const { sourceId, widgetType } = useChildWindowParams();

  // take the source id and widget's component from the window's params
  const { Module, WidgetSettingsComponent } = useOnCreate(() => {
    // TODO: index
    // @ts-ignore
    const [WidgetSettingsComponent, Module] = components[widgetType];
    return { sourceId, Module, WidgetSettingsComponent };
  });

  // initialize the Redux module for the widget
  // so all children components can use it via `useWidget()` call
  const { reload } = useWidgetRoot(Module as typeof WidgetModule, { sourceId });

  useSubscription(WidgetsService.settingsInvalidated, reload);

  return (
    <ModalLayout bodyStyle={{ padding: '0px' }} hideFooter={true}>
      <WidgetSettingsComponent />
    </ModalLayout>
  );
}