Store collapsed status of sidebar sections

Summary:
See previous diff, let's store the collapsed state of sidebar sections in local storage.

Introduced a reusable hook to take care of that.

Changelog: Device plugins are now expanded by default, and the expand / collapse state will now be remembered across restarts

Reviewed By: passy

Differential Revision: D21903394

fbshipit-source-id: a3c0231acc0aa0877522ec328eedd09cb11aedb1

desktop/app/src/utils/__tests__/useLocalStorage.node.tsx

@@ -0,0 +1,107 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import * as React from 'react';
+import {render, fireEvent, act} from '@testing-library/react';
+
+import {useLocalStorage} from '../useLocalStorage';
+
+function TestComponent({
+  storageKey,
+  value,
+}: {
+  storageKey: string;
+  value: number;
+}) {
+  const [current, setCurrent] = useLocalStorage(storageKey, value);
+
+  return (
+    <div>
+      <div data-testid="value">{current}</div>
+      <button
+        data-testid="inc"
+        onClick={() => {
+          setCurrent((c) => c + 1);
+        }}></button>
+    </div>
+  );
+}
+
+let getSpy: jest.SpyInstance;
+let setSpy: jest.SpyInstance;
+let storage: Record<string, any> = {};
+
+beforeEach(() => {
+  storage = {};
+  getSpy = jest
+    .spyOn(Storage.prototype, 'getItem') // https://github.com/facebook/jest/issues/6798#issuecomment-412871616
+    .mockImplementation((key: string) => {
+      return storage[key];
+    });
+  setSpy = jest
+    .spyOn(Storage.prototype, 'setItem')
+    .mockImplementation((key: string, value: any) => {
+      storage[key] = value;
+    });
+});
+
+afterEach(() => {
+  getSpy.mockRestore();
+  setSpy.mockRestore();
+});
+
+test('it can store values', async () => {
+  const res = render(<TestComponent storageKey="x" value={1} />);
+  expect((await res.findByTestId('value')).textContent).toEqual('1');
+
+  await act(async () => {
+    fireEvent.click(await res.findByTestId('inc'));
+  });
+
+  expect((await res.findByTestId('value')).textContent).toEqual('2');
+  expect(storage).toMatchInlineSnapshot(`
+    Object {
+      "[useLocalStorage]x": "2",
+    }
+  `);
+});
+
+test('it can read default from storage', async () => {
+  storage['[useLocalStorage]x'] = '3';
+  const res = render(<TestComponent storageKey="x" value={1} />);
+  expect((await res.findByTestId('value')).textContent).toEqual('3');
+
+  await act(async () => {
+    fireEvent.click(await res.findByTestId('inc'));
+  });
+
+  expect((await res.findByTestId('value')).textContent).toEqual('4');
+  expect(storage).toMatchInlineSnapshot(`
+    Object {
+      "[useLocalStorage]x": "4",
+    }
+  `);
+});
+
+test('it does not allow changing key', async () => {
+  const res = render(<TestComponent storageKey="x" value={1} />);
+
+  expect(() => {
+    const orig = console.error;
+    try {
+      // supress error in console
+      console.error = jest.fn();
+      res.rerender(<TestComponent storageKey="y" value={1} />);
+    } finally {
+      console.error = orig;
+    }
+  }).toThrowErrorMatchingInlineSnapshot(
+    `"The key passed to useLocalStorage should not be changed, 'x' -> 'y'"`,
+  );
+});