From ef3da0e530da7f2fb3217f3f842a8c4bfd68e579 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Mon, 4 Jan 2021 12:15:49 -0800
Subject: [PATCH] Fix deferred loaded plugins not showing up

Summary:
See previous diff, plugins that are not available during the initial client connection setup didn't show up in the UI, until selecting another device first. This diff fixes that by listening to the `plugins-change` event of the client.

Changelog: Fix issue where React Native plugins didn't show up in the Sandy layout

Reviewed By: passy

Differential Revision: D25755812

fbshipit-source-id: d865d912ecca85d868831c4da7c56b5f0be6c3bf
---
 .../src/sandy-chrome/appinspect/PluginList.tsx  | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/desktop/app/src/sandy-chrome/appinspect/PluginList.tsx b/desktop/app/src/sandy-chrome/appinspect/PluginList.tsx
index 59794cf91..898077bae 100644
--- a/desktop/app/src/sandy-chrome/appinspect/PluginList.tsx
+++ b/desktop/app/src/sandy-chrome/appinspect/PluginList.tsx
@@ -36,7 +36,7 @@ import {
   startPluginDownload,
 } from '../../reducers/pluginDownloads';
 import {activatePlugin, uninstallPlugin} from '../../reducers/pluginManager';
-import {BundledPluginDetails} from 'plugin-lib/lib';
+import {BundledPluginDetails} from 'plugin-lib';
 import {filterNewestVersionOfEachPlugin} from '../../dispatcher/plugins';
 import {reportUsage} from '../../utils/metrics';
 
@@ -57,6 +57,19 @@ export const PluginList = memo(function PluginList({
   const plugins = useStore((state) => state.plugins);
   const downloads = useStore((state) => state.pluginDownloads);
 
+  // client is a mutable structure, so we need the event emitter to detect the addition of plugins....
+  const [pluginsChanged, setPluginsChanged] = useState(0);
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+    const listener = () => setPluginsChanged((v) => v + 1);
+    client.on('plugins-change', listener);
+    return () => {
+      client.off('plugins-change', listener);
+    };
+  }, [client]);
+
   const {
     devicePlugins,
     metroPlugins,
@@ -70,6 +83,7 @@ export const PluginList = memo(function PluginList({
     client,
     plugins,
     connections.userStarredPlugins,
+    pluginsChanged,
   ]);
   const isArchived = !!activeDevice?.isArchived;
 
@@ -460,6 +474,7 @@ export function computePluginLists(
   client: Client | undefined,
   plugins: State['plugins'],
   userStarredPlugins: State['connections']['userStarredPlugins'],
+  _pluginsChanged?: number, // this argument is purely used to invalidate the memoization cache
 ) {
   const devicePlugins: DevicePluginDefinition[] =
     device?.devicePlugins.map((name) => plugins.devicePlugins.get(name)!) ?? [];