From 5b08f7b43fed206c66988f852ba36f0f0e7ffa13 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 25 Jul 2019 16:55:39 +0100
Subject: [PATCH] [Flare] Adds useListener implementation to ReactDebugHooks
 (#16205)

---
 .../react-debug-tools/src/ReactDebugHooks.js  | 21 +++++++--
 .../ReactHooksInspection-test.internal.js     | 43 +++++++++++++++++++
 2 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index b49813d708508..1de7794bbece9 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
+import type {
+  ReactContext,
+  ReactProviderType,
+  ReactEventResponder,
+} from 'shared/ReactTypes';
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
 import type {Hook} from 'react-reconciler/src/ReactFiberHooks';
 import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactFiberHooks';
@@ -21,6 +25,8 @@ import {
   ForwardRef,
 } from 'shared/ReactWorkTags';
 
+const emptyObject = {};
+
 type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;
 
 // Used to track hooks called during a render
@@ -215,8 +221,17 @@ function useMemo<T>(
   return value;
 }
 
-function useListener() {
-  throw new Error('TODO: not yet implemented');
+function useListener(
+  responder: ReactEventResponder<any, any>,
+  hookProps: ?Object,
+): void {
+  const listenerProps = hookProps || emptyObject;
+  // Don't put the actual event responder object in, just its displayName
+  const value = {
+    responder: responder.displayName || 'EventResponder',
+    props: listenerProps,
+  };
+  hookLog.push({primitive: 'Listener', stackError: new Error(), value});
 }
 
 const Dispatcher: DispatcherType = {
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js
new file mode 100644
index 0000000000000..ac838e2a24492
--- /dev/null
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js
@@ -0,0 +1,43 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+'use strict';
+
+let React;
+let ReactDebugTools;
+
+describe('ReactHooksInspection', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableFlareAPI = true;
+    React = require('react');
+    ReactDebugTools = require('react-debug-tools');
+  });
+
+  it('should inspect a simple useListener hook', () => {
+    const TestResponder = React.unstable_createResponder('TestResponder', {});
+
+    function Foo(props) {
+      React.unstable_useListener(TestResponder, {preventDefault: false});
+      return <div responders={<TestResponder />}>Hello world</div>;
+    }
+    let tree = ReactDebugTools.inspectHooks(Foo, {});
+    expect(tree).toEqual([
+      {
+        isStateEditable: false,
+        id: 0,
+        name: 'Listener',
+        value: {props: {preventDefault: false}, responder: 'TestResponder'},
+        subHooks: [],
+      },
+    ]);
+  });
+});