merge persistedState by keys

Summary: Pushing all new rows into an array could result in duplicate entries. Now the data is stored in an object, using the row's id as a key. This deduplicates the data.

Reviewed By: jknoxville

Differential Revision: D15200794

fbshipit-source-id: 6afa2b7d02c1bdb796c250400938c38c51fdd207

src/plugins/seamammals/index.js

@@ -36,11 +36,11 @@ function renderSidebar(row: Row) {
 }
 
 type State = {
-  selectedIndex: number,
+  selectedID: ?string,
 };
 
 type PersistedState = {
-  data: Array<Row>,
+  [key: string]: Row,
 };
 
 export default class SeaMammals extends FlipperPlugin<
@@ -48,9 +48,7 @@ export default class SeaMammals extends FlipperPlugin<
   void,
   PersistedState,
 > {
-  static defaultPersistedState = {
+  static defaultPersistedState = {};
-    data: [],
-  };
 
   static persistedStateReducer = (
     persistedState: PersistedState,
@@ -59,7 +57,8 @@ export default class SeaMammals extends FlipperPlugin<
   ) => {
     if (method === 'newRow') {
       return {
-        data: [...persistedState.data, payload],
+        ...persistedState,
+        [payload.id]: payload,
       };
     }
     return persistedState;
@@ -71,29 +70,30 @@ export default class SeaMammals extends FlipperPlugin<
     alignItems: 'flex-start',
     alignContent: 'flex-start',
     flexGrow: 1,
+    overflow: 'scroll',
   });
 
   state = {
-    selectedIndex: -1,
+    selectedID: null,
   };
 
   render() {
-    const {selectedIndex} = this.state;
+    const {selectedID} = this.state;
-    const {data} = this.props.persistedState;
+    const {persistedState} = this.props;
 
     return (
       <SeaMammals.Container>
-        {data.map((row, i) => (
+        {Object.entries(persistedState).map(([id, row]) => (
           <Card
             {...row}
-            onSelect={() => this.setState({selectedIndex: i})}
+            onSelect={() => this.setState({selectedID: id})}
-            selected={i === selectedIndex}
+            selected={id === selectedID}
-            key={i}
+            key={id}
           />
         ))}
         <DetailSidebar>
-          {this.state.selectedIndex > -1 &&
+          {typeof selectedID === 'string' &&
-            renderSidebar(this.props.persistedState.data[selectedIndex])}
+            renderSidebar(persistedState[selectedID])}
         </DetailSidebar>
       </SeaMammals.Container>
     );