migrate redux store

Summary: Migrating redux stores to TypeScript

Reviewed By: passy

Differential Revision: D16579796

fbshipit-source-id: e3e507f17f1bdd57eb45e30cb0b28aaee6c4521c

src/reducers/__tests__/connections.node.tsx

@@ -7,7 +7,7 @@
 
 import reducer from '../connections';
 import BaseDevice from '../../devices/BaseDevice';
-import type {State} from '../connections';
+import {State} from '../connections';
 
 test('REGISTER_DEVICE doesnt remove error', () => {
   const initialState: State = reducer(undefined, {

src/reducers/__tests__/notifications.node.tsx

@@ -5,7 +5,7 @@
  * @format
  */
 
-import type {State} from '../notifications';
+import {State} from '../notifications';
 
 import {
   default as reducer,

src/reducers/__tests__/pluginStates.node.tsx

@@ -5,8 +5,7 @@
  * @format
  */
 
-import {default as reducer, setPluginState} from '../pluginStates';
-import type {Action} from '../pluginStates';
+import {default as reducer, setPluginState, Action} from '../pluginStates';
 
 test('reduce setPluginState', () => {
   const result = reducer(

src/reducers/__tests__/plugins.node.tsx

@@ -83,7 +83,6 @@ test('do not add other classes', () => {
       disabledPlugins: [],
       selectedPlugins: [],
     },
-    // $FlowFixMe testing wrong classes on purpose here
     registerPlugins([testBasePlugin]),
   );
   expect(res.devicePlugins.size).toEqual(0);

src/reducers/__tests__/user.node.tsx

@@ -8,7 +8,7 @@
 import {default as reducer, login, logout} from '../user';
 
 test('login', () => {
-  const userData = {username: 'Jane Doe'};
+  const userData = {name: 'Jane Doe'};
   const res = reducer({}, login(userData));
   expect(res).toEqual(userData);
 });
@@ -16,7 +16,7 @@ test('login', () => {
 test('logout', () => {
   const res = reducer(
     {
-      username: 'Jane Doe',
+      name: 'Jane Doe',
     },
     logout(),
   );

src/reducers/application.tsx

@@ -7,8 +7,7 @@
 
 import {remote} from 'electron';
 import uuidv1 from 'uuid/v1';
-import {type Element as ReactElement} from 'react';
-import CancellableExportStatus from '../chrome/CancellableExportStatus';
+
 export const ACTIVE_SHEET_PLUGIN_SHEET: 'PLUGIN_SHEET' = 'PLUGIN_SHEET';
 export const ACTIVE_SHEET_BUG_REPORTER: 'BUG_REPORTER' = 'BUG_REPORTER';
 export const ACTIVE_SHEET_PLUGIN_DEBUGGER: 'PLUGIN_DEBUGGER' =
@@ -42,12 +41,16 @@ export type ServerPorts = {
   secure: number,
 };
 
-type SubShareType = {type: 'file', file: string} | {type: 'link'};
+type SubShareType =
+  | {
+      type: 'file',
+      file: string,
+    }
+  | {type: 'link'};
 
 export type ShareType = {
-  statusComponent?: ReactElement<typeof CancellableExportStatus>,
-  ...SubShareType,
-};
+  statusComponent?: React.ReactNode,
+} & SubShareType;
 
 export type State = {
   leftSidebarVisible: boolean,
@@ -55,12 +58,12 @@ export type State = {
   rightSidebarAvailable: boolean,
   windowIsFocused: boolean,
   activeSheet: ActiveSheet,
-  share: ?ShareType,
-  sessionId: ?string,
+  share: ShareType | null,
+  sessionId: string | null,
   serverPorts: ServerPorts,
   downloadingImportData: boolean,
   launcherMsg: LauncherMsg,
-  flipperRating: ?number,
+  flipperRating: number | null,
 };
 
 type BooleanActionType =
@@ -108,11 +111,11 @@ export type Action =
       },
     }
   | {
-      type: typeof UNSET_SHARE,
+      type: 'UNSET_SHARE',
     }
   | {
-      type: typeof SET_EXPORT_STATUS_MESSAGE,
-      payload: ReactElement<typeof CancellableExportStatus>,
+      type: 'SET_EXPORT_STATUS_MESSAGE',
+      payload: React.ReactNode,
     };
 
 const initialState: () => State = () => ({
@@ -195,7 +198,6 @@ export default function reducer(state: State, action: Action): State {
       const {share} = state;
       return {
         ...state,
-        //$FlowFixMe: T48110490, its not able to understand for which case it needs to apply the changes
         share: {...share, statusComponent: action.payload},
       };
     }
@@ -215,17 +217,6 @@ export const toggleAction = (
   payload,
 });
 
-export const unsetShare = (): Action => ({
-  type: UNSET_SHARE,
-});
-
-export const setExportStatusComponent = (
-  payload: ReactElement<typeof CancellableExportStatus>,
-): Action => ({
-  type: SET_EXPORT_STATUS_MESSAGE,
-  payload,
-});
-
 export const setSelectPluginsToExportActiveSheet = (
   payload: ShareType,
 ): Action => ({

src/reducers/connections.tsx

@@ -5,33 +5,32 @@
  * @format
  */
 
-import type BaseDevice from '../devices/BaseDevice';
+import BaseDevice from '../devices/BaseDevice';
 import MacDevice from '../devices/MacDevice';
-import type Client from '../Client';
-import type {UninitializedClient} from '../UninitializedClient';
+import Client from '../Client';
+import {UninitializedClient} from '../UninitializedClient';
 import {isEqual} from 'lodash';
 import iosUtil from '../fb-stubs/iOSContainerUtility';
-// $FlowFixMe perf_hooks is a new API in node
 import {performance} from 'perf_hooks';
 
-export type State = {|
+export type State = {
   devices: Array<BaseDevice>,
   androidEmulators: Array<string>,
-  selectedDevice: ?BaseDevice,
-  selectedPlugin: ?string,
-  selectedApp: ?string,
-  userPreferredDevice: ?string,
-  userPreferredPlugin: ?string,
-  userPreferredApp: ?string,
-  error: ?string,
+  selectedDevice: null | BaseDevice,
+  selectedPlugin: null | string,
+  selectedApp: null | string,
+  userPreferredDevice: null | string,
+  userPreferredPlugin: null | string,
+  userPreferredApp: null | string,
+  error: null | string,
   clients: Array<Client>,
   uninitializedClients: Array<{
     client: UninitializedClient,
     deviceId?: string,
     errorMessage?: string,
   }>,
-  deepLinkPayload: ?string,
-|};
+  deepLinkPayload: null | string,
+};
 
 export type Action =
   | {
@@ -52,11 +51,11 @@ export type Action =
     }
   | {
       type: 'SELECT_PLUGIN',
-      payload: {|
-        selectedPlugin: ?string,
-        selectedApp: ?string,
-        deepLinkPayload: ?string,
-      |},
+      payload: {
+        selectedPlugin: null | string,
+        selectedApp?: null | string,
+        deepLinkPayload: null | string,
+      },
     }
   | {
       type: 'SELECT_USER_PREFERRED_PLUGIN',
@@ -64,7 +63,7 @@ export type Action =
     }
   | {
       type: 'SERVER_ERROR',
-      payload: ?string,
+      payload: null | string,
     }
   | {
       type: 'NEW_CLIENT',
@@ -138,7 +137,7 @@ const reducer = (state: State = INITAL_STATE, action: Action): State => {
       let {selectedDevice, selectedPlugin} = state;
 
       // select the default plugin
-      let selection = {
+      let selection: Partial<State> = {
         selectedApp: null,
         selectedPlugin: DEFAULT_PLUGIN,
       };
@@ -270,7 +269,7 @@ const reducer = (state: State = INITAL_STATE, action: Action): State => {
     case 'CLIENT_REMOVED': {
       const {payload} = action;
 
-      const selected = {};
+      const selected: Partial<State> = {};
       if (state.selectedApp === payload) {
         selected.selectedApp = null;
         selected.selectedPlugin = DEFAULT_PLUGIN;
@@ -374,11 +373,11 @@ export const preferDevice = (payload: string): Action => ({
   payload,
 });
 
-export const selectPlugin = (payload: {|
-  selectedPlugin: ?string,
-  selectedApp?: ?string,
-  deepLinkPayload: ?string,
-|}): Action => ({
+export const selectPlugin = (payload: {
+  selectedPlugin: null | string,
+  selectedApp?: null | string,
+  deepLinkPayload: null | string,
+}): Action => ({
   type: 'SELECT_PLUGIN',
   payload,
 });

src/reducers/index.tsx

@@ -5,42 +5,33 @@
  * @format
  */
 
-import {combineReducers} from 'redux';
-import application from './application.js';
-import connections from './connections.js';
-import pluginStates from './pluginStates.js';
-import notifications from './notifications.js';
-import plugins from './plugins.js';
-import user from './user.js';
+import {combineReducers, Dispatch} from 'redux';
+import application, {
+  State as ApplicationState,
+  Action as ApplicationAction,
+} from './application';
+import connections, {
+  State as DevicesState,
+  Action as DevicesAction,
+} from './connections';
+import pluginStates, {
+  State as PluginStatesState,
+  Action as PluginStatesAction,
+} from './pluginStates';
+import notifications, {
+  State as NotificationsState,
+  Action as NotificationsAction,
+} from './notifications';
+import plugins, {
+  State as PluginsState,
+  Action as PluginsAction,
+} from './plugins';
+import user, {State as UserState, Action as UserAction} from './user';
 
 import {persistReducer} from 'redux-persist';
 import storage from 'redux-persist/lib/storage/index.js';
 
-import type {
-  State as ApplicationState,
-  Action as ApplicationAction,
-} from './application.js';
-import type {
-  State as DevicesState,
-  Action as DevicesAction,
-} from './connections.js';
-import type {
-  State as PluginStatesState,
-  Action as PluginStatesAction,
-} from './pluginStates.js';
-import type {
-  State as NotificationsState,
-  Action as NotificationsAction,
-} from './notifications.js';
-import type {
-  State as PluginsState,
-  Action as PluginsAction,
-} from './plugins.js';
-import type {State as UserState, Action as UserAction} from './user.js';
-import type {
-  Store as ReduxStore,
-  MiddlewareAPI as ReduxMiddlewareAPI,
-} from 'redux';
+import {Store as ReduxStore, MiddlewareAPI as ReduxMiddlewareAPI} from 'redux';
 
 type Actions =
   | ApplicationAction
@@ -49,21 +40,21 @@ type Actions =
   | NotificationsAction
   | PluginsAction
   | UserAction
-  | {|type: 'INIT'|};
+  | {type: 'INIT'};
 
-export type State = {|
+export type State = {
   application: ApplicationState,
   connections: DevicesState,
   pluginStates: PluginStatesState,
   notifications: NotificationsState,
   plugins: PluginsState,
   user: UserState,
-|};
+};
 
 export type Store = ReduxStore<State, Actions>;
-export type MiddlewareAPI = ReduxMiddlewareAPI<State, Actions>;
+export type MiddlewareAPI = ReduxMiddlewareAPI<Dispatch<Actions>, State>;
 
-export default combineReducers<_, Actions>({
+export default combineReducers<State, Actions>({
   application: persistReducer(
     {
       key: 'application',

src/reducers/notifications.tsx

@@ -4,13 +4,13 @@
  * LICENSE file in the root directory of this source tree.
  * @format
  */
-import type {Notification} from '../plugin';
+import {Notification} from '../plugin';
 
-export type PluginNotification = {|
+export type PluginNotification = {
   notification: Notification,
   pluginId: string,
-  client: ?string,
-|};
+  client: null | string,
+};
 
 export type State = {
   activeNotifications: Array<PluginNotification>,
@@ -24,7 +24,7 @@ type ActiveNotificationsAction = {
   type: 'SET_ACTIVE_NOTIFICATIONS',
   payload: {
     notifications: Array<Notification>,
-    client: ?string,
+    client: null | string,
     pluginId: string,
   },
 };
@@ -37,7 +37,7 @@ export type Action =
       type: 'SET_ACTIVE_NOTIFICATIONS',
       payload: {
         notifications: Array<Notification>,
-        client: ?string,
+        client: null | string,
         pluginId: string,
       },
     }
@@ -139,7 +139,7 @@ function activeNotificationsReducer(
 
 export function setActiveNotifications(payload: {
   notifications: Array<Notification>,
-  client: ?string,
+  client: null | string,
   pluginId: string,
 }): Action {
   return {
@@ -154,14 +154,14 @@ export function clearAllNotifications(): Action {
   };
 }
 
-export function updatePluginBlacklist(payload: Array<string>) {
+export function updatePluginBlacklist(payload: Array<string>): Action {
   return {
     type: 'UPDATE_PLUGIN_BLACKLIST',
     payload,
   };
 }
 
-export function updateCategoryBlacklist(payload: Array<string>) {
+export function updateCategoryBlacklist(payload: Array<string>): Action {
   return {
     type: 'UPDATE_CATEGORY_BLACKLIST',
     payload,

src/reducers/plugins.tsx

@@ -6,19 +6,18 @@
  */
 
 import {FlipperPlugin, FlipperDevicePlugin} from '../plugin.js';
-
-import type {PluginDefinition} from '../dispatcher/plugins';
+import {PluginDefinition} from '../dispatcher/plugins';
 
 export type State = {
-  devicePlugins: Map<string, Class<FlipperDevicePlugin<>>>,
-  clientPlugins: Map<string, Class<FlipperPlugin<>>>,
+  devicePlugins: Map<string, typeof FlipperDevicePlugin>,
+  clientPlugins: Map<string, typeof FlipperPlugin>,
   gatekeepedPlugins: Array<PluginDefinition>,
   disabledPlugins: Array<PluginDefinition>,
   failedPlugins: Array<[PluginDefinition, string]>,
   selectedPlugins: Array<string>,
 };
 
-type P = Class<FlipperPlugin<> | FlipperDevicePlugin<>>;
+type P = typeof FlipperPlugin | typeof FlipperDevicePlugin;
 
 export type Action =
   | {