From a8062499dfbc2b9de1db7026397f154e7c7d3c09 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Mon, 5 Jul 2021 08:38:47 -0700
Subject: [PATCH] Use local storage for state persisting

Summary: Apply local storage setting at a few relevant places, see parent diff

Reviewed By: cekkaewnumchai

Differential Revision: D29516498

fbshipit-source-id: 4797986e3540217e42dfb867f7d627921b97618e
---
 desktop/plugins/public/network/index.tsx      |  5 +-
 .../plugins/public/reactdevtools/index.tsx    | 47 ++++++++++++-------
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/desktop/plugins/public/network/index.tsx b/desktop/plugins/public/network/index.tsx
index 870ec3a04..8deb31c37 100644
--- a/desktop/plugins/public/network/index.tsx
+++ b/desktop/plugins/public/network/index.tsx
@@ -123,7 +123,10 @@ export function plugin(client: PluginClient<Events, Methods>) {
 
   const partialResponses = createState<PartialResponses>({});
 
-  const customColumns = createState<CustomColumnConfig[]>([]); // Store in local storage as well: T69989583
+  const customColumns = createState<CustomColumnConfig[]>([], {
+    persist: 'customColumns',
+    persistToLocalStorage: true,
+  });
   const columns = createState<DataTableColumn<Request>[]>(baseColumns); // not persistable
 
   client.onDeepLink((payload: unknown) => {
diff --git a/desktop/plugins/public/reactdevtools/index.tsx b/desktop/plugins/public/reactdevtools/index.tsx
index 3c9a5f37c..d2cc67a83 100644
--- a/desktop/plugins/public/reactdevtools/index.tsx
+++ b/desktop/plugins/public/reactdevtools/index.tsx
@@ -19,7 +19,7 @@ import {
 } from 'flipper-plugin';
 import React from 'react';
 import getPort from 'get-port';
-import {Button, Switch, Typography} from 'antd';
+import {Button, message, Switch, Typography} from 'antd';
 import child_process from 'child_process';
 import fs from 'fs';
 import path from 'path';
@@ -75,28 +75,37 @@ export function devicePlugin(client: DevicePluginClient) {
     ConnectionStatus.Initializing,
   );
   const globalDevToolsPath = createState<string>();
-  const useGlobalDevTools = createState(false); // TODO: store in local storage T69989583
+  const useGlobalDevTools = createState(false, {
+    persist: 'useGlobalDevTools',
+    persistToLocalStorage: true,
+  });
   let devToolsInstance: typeof ReactDevToolsStandaloneEmbedded =
     ReactDevToolsStandaloneEmbedded;
+
   let startResult: {close(): void} | undefined = undefined;
 
   let pollHandle: NodeJS.Timeout | undefined = undefined;
 
+  function getDevToolsModule() {
+    // Load right library
+    if (useGlobalDevTools.get()) {
+      console.log('Loading ' + globalDevToolsPath.get());
+      return global.electronRequire(globalDevToolsPath.get()!).default;
+    } else {
+      return ReactDevToolsStandaloneEmbedded;
+    }
+  }
+
   async function toggleUseGlobalDevTools() {
     if (!globalDevToolsPath.get()) {
+      message.warn(
+        "No globally installed react-devtools package found. Run 'npm install -g react-devtools'.",
+      );
       return;
     }
     useGlobalDevTools.update((v) => !v);
 
-    // Load right library
-    if (useGlobalDevTools.get()) {
-      console.log('Loading ' + globalDevToolsPath.get());
-      devToolsInstance = global.electronRequire(
-        globalDevToolsPath.get()!,
-      ).default;
-    } else {
-      devToolsInstance = ReactDevToolsStandaloneEmbedded;
-    }
+    devToolsInstance = getDevToolsModule();
 
     statusMessage.set('Switching devTools');
     connectionStatus.set(ConnectionStatus.Initializing);
@@ -221,13 +230,17 @@ export function devicePlugin(client: DevicePluginClient) {
     );
   }
 
-  client.onReady(() => {
-    findGlobalDevTools().then((path) => {
+  client.onReady(async () => {
+    const path = await findGlobalDevTools();
+    if (path) {
       globalDevToolsPath.set(path + '/standalone');
-      if (path) {
-        console.log('Found global React DevTools: ', path);
-      }
-    });
+      console.log('Found global React DevTools: ', path);
+      // load it, if the flag is set
+      devToolsInstance = getDevToolsModule();
+    } else {
+      console.log('Found global React DevTools: ', path);
+      useGlobalDevTools.set(false); // disable in case it was enabled
+    }
   });
 
   client.onDestroy(() => {