import * as React from "react" ; import { default as isEqual } from "lodash/isEqual" ; import type { Settings , VisibleTaskSettings , TaskSortType , State as ExtensionState , BadgeDisplayType , } from "../common/state" ; import { Popup } from "./Popup" ; import { getClient , PopupClient } from "./popupClient" ; interface Props { state : ExtensionState ; updateSettings : ( settings : Settings ) => void ; } interface State { client : PopupClient | undefined ; } export class PopupWrapper extends React . PureComponent < Props > { state : State = { client : getClient ( this . props . state . settings . connection ) , } ; render ( ) { return ( < Popup tasks = { this . props . state . tasks } taskFetchFailureReason = { this . props . state . taskFetchFailureReason } tasksLastInitiatedFetchTimestamp = { this . props . state . tasksLastInitiatedFetchTimestamp } tasksLastCompletedFetchTimestamp = { this . props . state . tasksLastCompletedFetchTimestamp } visibleTasks = { this . props . state . settings . visibleTasks } changeVisibleTasks = { this . changeVisibleTasks } taskSort = { this . props . state . settings . taskSortType } changeTaskSort = { this . changeSortType } badgeDisplay = { this . props . state . settings . badgeDisplayType } changeBadgeDisplay = { this . changeBadgeDisplay } showInactiveTasks = { this . props . state . settings . showInactiveTasks } changeShowInactiveTasks = { this . changeShowInactiveTasks } client = { this . state . client } / > ) ; } private changeVisibleTasks = ( visibleTasks ) => { this . props . updateSettings ( { ... this . props . state . settings , visibleTasks } ) ; } ; private changeSortType = ( taskSortType ) => { this . props . updateSettings ( { ... this . props . state . settings , taskSortType } ) ; } ; private changeBadgeDisplay = ( badgeDisplayType ) => { this . props . updateSettings ( { ... this . props . state . settings , badgeDisplayType } ) ; } ; private changeShowInactiveTasks = ( showInactiveTasks ) => { this . props . updateSettings ( { ... this . props . state . settings , showInactiveTasks } ) ; } ; UNSAFE_componentWillReceiveProps ( nextProps ) { if ( ! isEqual ( this . props . state . settings . connection , nextProps . state . settings . connection ) ) { this . setState ( { client : getClient ( nextProps . state . settings . connection ) } ) ; } } }