Make InspectorSidebar a functional component

Summary: Refactoring a bit to make a change easier.

Reviewed By: jknoxville

Differential Revision: D19330542

fbshipit-source-id: 5926b110d04d73e109ea287cacd4e120ea8c9986

src/plugins/layout/InspectorSidebar.tsx

@@ -94,68 +94,62 @@ type Props = {
   logger: Logger;
 };
 
-export default class Sidebar extends Component<Props> {
+const Sidebar: React.FC<Props> = (props: Props) => {
-  render() {
+  const {element} = props;
-    const {element} = this.props;
+  if (!element || !element.data) {
-    if (!element || !element.data) {
+    return <NoData grow>No data</NoData>;
-      return <NoData grow>No data</NoData>;
+  }
-    }
 
-    const sections: Array<any> =
+  const sections: Array<any> =
-      (SidebarExtensions &&
+    (SidebarExtensions &&
-        SidebarExtensions.map(ext =>
+      SidebarExtensions.map(ext =>
-          ext(
+        ext(props.client, props.realClient, element.id, props.logger),
-            this.props.client,
+      )) ||
-            this.props.realClient,
+    [];
-            element.id,
-            this.props.logger,
-          ),
-        )) ||
-      [];
 
-    for (const key in element.data) {
+  for (const key in element.data) {
-      if (key === 'Extra Sections') {
+    if (key === 'Extra Sections') {
-        for (const extraSection in element.data[key]) {
+      for (const extraSection in element.data[key]) {
-          const section = element.data[key][extraSection];
+        const section = element.data[key][extraSection];
-          let data = {};
+        let data = {};
 
-          // data might be sent as stringified JSON, we want to parse it for a nicer persentation.
+        // data might be sent as stringified JSON, we want to parse it for a nicer persentation.
-          if (typeof section === 'string') {
+        if (typeof section === 'string') {
-            try {
+          try {
-              data = JSON.parse(section);
+            data = JSON.parse(section);
-            } catch (e) {
+          } catch (e) {
-              // data was not a valid JSON, type is required to be an object
+            // data was not a valid JSON, type is required to be an object
-              console.error(
+            console.error(
-                `ElementsInspector unable to parse extra section: ${extraSection}`,
+              `ElementsInspector unable to parse extra section: ${extraSection}`,
-              );
+            );
-              data = {};
+            data = {};
-            }
-          } else {
-            data = section;
           }
-          sections.push(
+        } else {
-            <InspectorSidebarSection
+          data = section;
-              tooltips={this.props.tooltips}
-              key={extraSection}
-              id={extraSection}
-              data={data}
-              onValueChanged={this.props.onValueChanged}
-            />,
-          );
         }
-      } else {
         sections.push(
           <InspectorSidebarSection
-            tooltips={this.props.tooltips}
+            tooltips={props.tooltips}
-            key={key}
+            key={extraSection}
-            id={key}
+            id={extraSection}
-            data={element.data[key]}
+            data={data}
-            onValueChanged={this.props.onValueChanged}
+            onValueChanged={props.onValueChanged}
           />,
         );
       }
+    } else {
+      sections.push(
+        <InspectorSidebarSection
+          tooltips={props.tooltips}
+          key={key}
+          id={key}
+          data={element.data[key]}
+          onValueChanged={props.onValueChanged}
+        />,
+      );
     }
-
-    return sections;
   }
-}
+
+  return <>{sections}</>;
+};
+export default Sidebar;