From 4fc63da386adfb8c9eab346f4eec5ed2893bf369 Mon Sep 17 00:00:00 2001
From: Andrey Mishanin <amishanin@fb.com>
Date: Mon, 17 Aug 2020 08:03:11 -0700
Subject: [PATCH] Wrap focusedGenerationId in a type

Summary:
- Use `FocusInfo` type instead of a raw string (I'll add another field to it in the next diff and it made sense to keep the changes separate).
- `userSelectedGenerationId` now has the type of `string | undefined` for consistency.

Reviewed By: fabiomassimo

Differential Revision: D23160820

fbshipit-source-id: f210d93b9ed7cb25eb3c2c8e6e6aadec4dc872d7
---
 desktop/plugins/sections/src/index.tsx | 38 +++++++++++++++++---------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/desktop/plugins/sections/src/index.tsx b/desktop/plugins/sections/src/index.tsx
index 51e31d10b..4ee96471d 100644
--- a/desktop/plugins/sections/src/index.tsx
+++ b/desktop/plugins/sections/src/index.tsx
@@ -69,12 +69,16 @@ type Events = {
   updateTreeGenerationChangesetGeneration: UpdateTreeGenerationChangesetGenerationPayload;
 };
 
+type FocusInfo = {
+  generationId: string;
+};
+
 export function plugin(client: FlipperClient<Events, {}>) {
   const generations = createState<{[id: string]: TreeGeneration}>(
     {},
     {persist: 'generations'},
   );
-  const focusedGenerationId = createState<string | null>(null);
+  const focusInfo = createState<FocusInfo | undefined>(undefined);
   const recording = createState<boolean>(true);
 
   client.onMessage('addEvent', (data) => {
@@ -84,7 +88,9 @@ export function plugin(client: FlipperClient<Events, {}>) {
     generations.update((draft) => {
       draft[data.id] = {...data, changeSets: []};
     });
-    focusedGenerationId.set(focusedGenerationId.get() || data.id);
+    focusInfo.set({
+      generationId: focusInfo.get()?.generationId || data.id,
+    });
   });
   client.onMessage('updateTreeGenerationHierarchyGeneration', (data) => {
     generations.update((draft) => {
@@ -114,22 +120,28 @@ export function plugin(client: FlipperClient<Events, {}>) {
   }
   function clear() {
     generations.set({});
-    focusedGenerationId.set(null);
+    focusInfo.set(undefined);
     recording.set(true);
   }
 
-  return {generations, focusedGenerationId, recording, setRecording, clear};
+  return {
+    generations,
+    focusInfo,
+    recording,
+    setRecording,
+    clear,
+  };
 }
 
 export function Component() {
   const instance = usePlugin(plugin);
   const generations = useValue(instance.generations);
-  const focusedGenerationId = useValue(instance.focusedGenerationId);
+  const focusInfo = useValue(instance.focusInfo);
   const recording = useValue(instance.recording);
 
   const [userSelectedGenerationId, setUserSelectedGenerationId] = useState<
-    string | null
-  >(null);
+    string | undefined
+  >();
   const [searchString, setSearchString] = useState<string>('');
   const [focusedChangeSet, setFocusedChangeSet] = useState<
     UpdateTreeGenerationChangesetApplicationPayload | null | undefined
@@ -137,12 +149,12 @@ export function Component() {
   const [selectedTreeNode, setSelectedTreeNode] = useState<any>();
 
   const focusedTreeGeneration: TreeGeneration | null = useMemo(() => {
-    const id = userSelectedGenerationId || focusedGenerationId;
-    if (id === null) {
+    const id = userSelectedGenerationId || focusInfo?.generationId;
+    if (id === undefined) {
       return null;
     }
     return generations[id];
-  }, [userSelectedGenerationId, focusedGenerationId, generations]);
+  }, [userSelectedGenerationId, focusInfo, generations]);
   const filteredGenerations: Array<TreeGeneration> = useMemo(() => {
     const generationValues = Object.values(generations);
     if (searchString.length <= 0) {
@@ -207,9 +219,9 @@ export function Component() {
             <EventTable
               generations={filteredGenerations}
               focusedGenerationId={
-                userSelectedGenerationId || focusedGenerationId
+                userSelectedGenerationId || focusInfo?.generationId
               }
-              onClick={(id: string | null) => {
+              onClick={(id?: string) => {
                 setFocusedChangeSet(null);
                 setUserSelectedGenerationId(id);
                 setSelectedTreeNode(null);
@@ -217,7 +229,7 @@ export function Component() {
             />
           </Sidebar>
           <Layout.Top>
-            <Sidebar position="top" minHeight={80} height={80}>
+            <Sidebar position="top" minHeight={400} height={400}>
               <TreeHierarchy
                 generation={focusedTreeGeneration}
                 focusedChangeSet={focusedChangeSet}