From 07487e8122a5dcfe4c3473c032910ee4a67c3cc2 Mon Sep 17 00:00:00 2001 From: Chaiwat Ekkaewnumchai Date: Thu, 5 Dec 2019 03:24:51 -0800 Subject: [PATCH] Change NotificationsHub to StaticView Summary: - Point the Noitifications to the static view - Add function to check activeness of static view - Add `SupportRequestDetails` to type (needed?) Reviewed By: mweststrate Differential Revision: D18810149 fbshipit-source-id: a33f61f521f3db0dd2a73e56d99b12d029b46a57 --- src/App.tsx | 4 +- src/NotificationsHub.tsx | 2 +- src/chrome/MainSidebar.tsx | 87 +++++++++++++------------ src/chrome/NotificationScreen.tsx | 102 ++++++++++++++++++++++++++++++ src/reducers/connections.tsx | 9 +-- 5 files changed, 156 insertions(+), 48 deletions(-) create mode 100644 src/chrome/NotificationScreen.tsx diff --git a/src/App.tsx b/src/App.tsx index f58d2d9ed..e491969c0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -141,7 +141,9 @@ export class App extends React.Component { {this.props.leftSidebarVisible && } {this.props.staticView != null ? ( - React.createElement(this.props.staticView) + React.createElement(this.props.staticView, { + logger: this.props.logger, + }) ) : ( )} diff --git a/src/NotificationsHub.tsx b/src/NotificationsHub.tsx index 07d090c7e..e8ab8834b 100644 --- a/src/NotificationsHub.tsx +++ b/src/NotificationsHub.tsx @@ -330,7 +330,7 @@ class NotificationsTable extends Component { } } -const ConnectedNotificationsTable = connect< +export const ConnectedNotificationsTable = connect< StateFromProps, DispatchFromProps, OwnProps, diff --git a/src/chrome/MainSidebar.tsx b/src/chrome/MainSidebar.tsx index 66a671e17..96f1ff702 100644 --- a/src/chrome/MainSidebar.tsx +++ b/src/chrome/MainSidebar.tsx @@ -37,7 +37,7 @@ import { Info, } from 'flipper'; import React, {Component, PureComponent, Fragment} from 'react'; -import NotificationsHub from '../NotificationsHub'; +import NotificationScreen from '../chrome/NotificationScreen'; import { selectPlugin, starPlugin, @@ -286,7 +286,6 @@ class MainSidebar extends PureComponent { staticView, selectPlugin, setStaticView, - numNotifications, uninitializedClients, } = this.props; const clients = getAvailableClients(selectedDevice, this.props.clients); @@ -377,38 +376,10 @@ class MainSidebar extends PureComponent { )} - {!GK.get('flipper_disable_notifications') && ( - - selectPlugin({ - selectedPlugin: 'notifications', - selectedApp: null, - deepLinkPayload: null, - }) - } - style={{ - borderTop: `1px solid ${colors.blackAlpha10}`, - }}> - 0 - ? NotificationsHub.icon || 'bell' - : 'bell-null' - } - isActive={selectedPlugin === NotificationsHub.id} - /> - - {NotificationsHub.title} - - - )} + {this.renderNotificationsEntry()} {this.state.showSupportForm && (function() { - const active = staticView && staticView === SupportRequestFormV2; + const active = isStaticViewActive(staticView, SupportRequestFormV2); return ( { return null; } const {staticView, setStaticView} = this.props; + const supportRequestDetailsactive = isStaticViewActive( + staticView, + SupportRequestDetails, + ); return ( <> @@ -451,21 +426,14 @@ class MainSidebar extends PureComponent { {this.state.showSupportForm && (selectedDevice as ArchivedDevice).supportRequestDetails && ( setStaticView(SupportRequestDetails)}> - + Support Request Details @@ -593,6 +561,41 @@ class MainSidebar extends PureComponent { ); } + + renderNotificationsEntry() { + if (GK.get('flipper_disable_notifications')) { + return null; + } + + const active = isStaticViewActive( + this.props.staticView, + NotificationScreen, + ); + return ( + this.props.setStaticView(NotificationScreen)} + style={{ + borderTop: `1px solid ${colors.blackAlpha10}`, + }}> + 0 ? 'bell' : 'bell-null'} + isActive={active} + /> + + Notifications + + + ); + } +} + +function isStaticViewActive( + current: StaticView, + selected: StaticView, +): boolean { + return current && selected && current === selected; } function getFavoritePlugins( diff --git a/src/chrome/NotificationScreen.tsx b/src/chrome/NotificationScreen.tsx new file mode 100644 index 000000000..20d9230b6 --- /dev/null +++ b/src/chrome/NotificationScreen.tsx @@ -0,0 +1,102 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import {PureComponent, Fragment} from 'react'; +import {Logger} from '../fb-interfaces/Logger'; +import {connect} from 'react-redux'; +import {State as Store} from '../reducers/index'; +import {ConnectedNotificationsTable} from '../NotificationsHub'; +import {Button, colors, styled, FlexColumn} from '../ui'; +import {clearAllNotifications} from '../reducers/notifications'; +import {selectPlugin} from '../reducers/connections'; +import React from 'react'; + +type StateFromProps = { + deepLinkPayload: string | null; + blacklistedPlugins: Array; + blacklistedCategories: Array; +}; + +type DispatchFromProps = { + clearAllNotifications: () => void; + selectPlugin: (payload: { + selectedPlugin: string | null; + selectedApp: string | null | undefined; + deepLinkPayload: string | null; + }) => any; +}; + +type OwnProps = { + logger: Logger; +}; + +type Props = StateFromProps & DispatchFromProps & OwnProps; + +type State = {}; + +const Container = styled(FlexColumn)({ + width: 0, + flexGrow: 1, + flexShrink: 1, + backgroundColor: colors.white, +}); + +class Notifications extends PureComponent { + render() { + const { + blacklistedPlugins, + blacklistedCategories, + deepLinkPayload, + logger, + clearAllNotifications, + selectPlugin, + } = this.props; + return ( + + + ({ + value, + type: 'exclude', + key: 'plugin', + })), + ...blacklistedCategories.map(value => ({ + value, + type: 'exclude', + key: 'category', + })), + ]} + actions={ + + + + } + /> + + + ); + } +} + +export default connect( + ({ + connections: {deepLinkPayload}, + notifications: {blacklistedPlugins, blacklistedCategories}, + }) => ({ + deepLinkPayload, + blacklistedPlugins, + blacklistedCategories, + }), + {clearAllNotifications, selectPlugin}, +)(Notifications); diff --git a/src/reducers/connections.tsx b/src/reducers/connections.tsx index d6eec980f..bab1d6f54 100644 --- a/src/reducers/connections.tsx +++ b/src/reducers/connections.tsx @@ -19,14 +19,18 @@ import {Actions} from '.'; const WelcomeScreen = isHeadless() ? require('../chrome/WelcomeScreenHeadless').default : require('../chrome/WelcomeScreen').default; +import NotificationScreen from '../chrome/NotificationScreen'; import SupportRequestForm from '../fb-stubs/SupportRequestFormManager'; import SupportRequestFormV2 from '../fb-stubs/SupportRequestFormV2'; +import SupportRequestDetails from '../fb-stubs/SupportRequestDetails'; export type StaticView = | null | typeof WelcomeScreen + | typeof NotificationScreen | typeof SupportRequestForm - | typeof SupportRequestFormV2; + | typeof SupportRequestFormV2 + | typeof SupportRequestDetails; export type FlipperError = { occurrences?: number; @@ -155,8 +159,6 @@ const INITAL_STATE: State = { deepLinkPayload: null, staticView: WelcomeScreen, }; -// Please sync with NotificationsHub -const STATIC_PLUGINS_ID: Array = ['notifications']; const reducer = (state: State = INITAL_STATE, action: Actions): State => { switch (action.type) { @@ -560,7 +562,6 @@ function updateSelection(state: Readonly): State { const availablePlugins: string[] = [ ...(device?.devicePlugins || []), ...(client?.plugins || []), - ...STATIC_PLUGINS_ID, ]; if (