Introduce useLogger hook

Summary: In the Flipper chrome there is a lot of `logger={logger}` prop drilling. Let's not do that anymore in the future by using a proper hook, which is exposed from `flipper-plugin`.

Reviewed By: passy

Differential Revision: D25421304

fbshipit-source-id: 01ec8563c67f7e2fac359c2f8216eba722bff8d9

desktop/app/src/fb-interfaces/Logger.tsx

@@ -7,33 +7,9 @@
  * @format
  */
 
-export type LogTypes = 'error' | 'warn' | 'info' | 'debug';
-export type TrackType =
-  | 'duration'
-  | 'usage'
-  | 'performance'
-  | 'success-rate'
-  | 'operation-cancelled';
+export {LogTypes, TrackType, Logger} from 'flipper-plugin';
 
 export type Args = {
   isHeadless?: boolean;
   isTest?: boolean;
 };
-
-export interface Logger {
-  track(type: TrackType, event: string, data?: any, plugin?: string): void;
-
-  trackTimeSince(
-    mark: string,
-    eventName?: string | null | undefined,
-    data?: any,
-  ): void;
-
-  info(data: any, category: string): void;
-
-  warn(data: any, category: string): void;
-
-  error(data: any, category: string): void;
-
-  debug(data: any, category: string): void;
-}

desktop/app/src/init.tsx

@@ -39,6 +39,8 @@ import {
   _NuxManagerContext,
   _createNuxManager,
   _setGlobalInteractionReporter,
+  Logger,
+  _LoggerContext,
 } from 'flipper-plugin';
 import isProduction from './utils/isProduction';
 import ReleaseChannel from './ReleaseChannel';
@@ -58,20 +60,22 @@ enableMapSet();
 
 GK.init();
 
-const AppFrame = () => (
-  <Provider store={store}>
-    <CacheProvider value={cache}>
-      <TooltipProvider>
-        <PopoverProvider>
-          <ContextMenuProvider>
-            <_NuxManagerContext.Provider value={_createNuxManager()}>
-              <App logger={logger} />
-            </_NuxManagerContext.Provider>
-          </ContextMenuProvider>
-        </PopoverProvider>
-      </TooltipProvider>
-    </CacheProvider>
-  </Provider>
+const AppFrame = ({logger}: {logger: Logger}) => (
+  <_LoggerContext.Provider value={logger}>
+    <Provider store={store}>
+      <CacheProvider value={cache}>
+        <TooltipProvider>
+          <PopoverProvider>
+            <ContextMenuProvider>
+              <_NuxManagerContext.Provider value={_createNuxManager()}>
+                <App logger={logger} />
+              </_NuxManagerContext.Provider>
+            </ContextMenuProvider>
+          </PopoverProvider>
+        </TooltipProvider>
+      </CacheProvider>
+    </Provider>
+  </_LoggerContext.Provider>
 );
 
 function setProcessState(store: Store) {
@@ -107,7 +111,10 @@ function init() {
       else console.error(msg, r.error);
     }
   });
-  ReactDOM.render(<AppFrame />, document.getElementById('root'));
+  ReactDOM.render(
+    <AppFrame logger={logger} />,
+    document.getElementById('root'),
+  );
   initLauncherHooks(config(), store);
   registerRecordingHooks(store);
   enableConsoleHook();

desktop/app/src/sandy-chrome/SandyApp.tsx

@@ -8,11 +8,10 @@
  */
 
 import React, {useEffect, useState, useCallback} from 'react';
-import {TrackingScope} from 'flipper-plugin';
+import {TrackingScope, useLogger} from 'flipper-plugin';
 import {styled} from '../ui';
 import {Layout, Sidebar} from '../ui';
 import {theme} from 'flipper-plugin';
-import {Logger} from '../fb-interfaces/Logger';
 
 import {LeftRail} from './LeftRail';
 import {TemporarilyTitlebar} from './TemporarilyTitlebar';
@@ -44,7 +43,8 @@ export type ToplevelProps = {
   setToplevelSelection: (_newSelection: ToplevelNavItem) => void;
 };
 
-export function SandyApp({logger}: {logger: Logger}) {
+export function SandyApp() {
+  const logger = useLogger();
   const dispatch = useDispatch();
   const leftSidebarVisible = useStore(
     (state) => state.application.leftSidebarVisible,