refactor: create TableWrapper component, restructure goa data

dictyBase · Oct 29, 2018 · ba61d12 · ba61d12
1 parent 22ab29a
commit ba61d12
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 54 deletions.
diff --git a/src/common/components/TableWrapper.js b/src/common/components/TableWrapper.js
@@ -0,0 +1,37 @@
+// @flow
+import React from "react"
+import { withStyles } from "@material-ui/core/styles"
+import Table from "@material-ui/core/Table"
+import TableBody from "@material-ui/core/TableBody"
+import Paper from "@material-ui/core/Paper"
+
+const styles = theme => ({
+  root: {
+    width: "100%",
+  },
+  table: {
+    borderBottom: "1px dotted #A3BAE9",
+  },
+})
+
+type Props = {
+  /** Material-UI styling */
+  classes: Object,
+  /** Children passed to component */
+  children: any,
+}
+
+/**
+ * This is a basic table wrapper that uses Material-UI for the design.
+ * It is used inside every panel on the gene summary page.
+ */
+
+const TableWrapper = ({ classes, children }: Props) => (
+  <Paper className={classes.root}>
+    <Table className={classes.table}>
+      <TableBody>{children}</TableBody>
+    </Table>
+  </Paper>
+)
+
+export default withStyles(styles)(TableWrapper)
diff --git a/src/features/Ontology/OntologyTabContainer.js b/src/features/Ontology/OntologyTabContainer.js
@@ -56,7 +56,7 @@ export class OntologyTabContainer extends Component<Props> {
 
     if (goa.data) {
       // set variables for filtered arrays based on evidence code
-      const all = goa.data.data[0]
+      const all = goa.data
       const experimental = all.filter(
         (code: Object) =>
           code.attributes.evidence_code === "IMP" ||

diff --git a/src/features/Ontology/goaReducer.js b/src/features/Ontology/goaReducer.js
@@ -25,9 +25,22 @@ const goaReducer = (
 ) => {
   switch (action.type) {
     case FETCH_GOA_REQUEST:
+      return {
+        ...state,
+        isFetching: true,
+      }
     case FETCH_GOA_SUCCESS:
+      return {
+        ...state,
+        data: action.payload.data.data[0],
+        isFetching: false,
+      }
     case FETCH_GOA_FAILURE:
-      return { ...state, ...action.payload }
+      return {
+        ...state,
+        isFetching: false,
+        error: action.payload.error,
+      }
     case GOA_NO_REFETCH:
       return state
     case CHANGE_GOA_TAB:

diff --git a/src/features/Summary/Panels/GoaPanel.js b/src/features/Summary/Panels/GoaPanel.js
@@ -1,12 +1,9 @@
 // @flow
 import React from "react"
-import { withStyles } from "@material-ui/core/styles"
-import Table from "@material-ui/core/Table"
-import TableBody from "@material-ui/core/TableBody"
 import TableRow from "@material-ui/core/TableRow"
-import Paper from "@material-ui/core/Paper"
 
 import GoaPanelContent from "./GoaPanelContent"
+import TableWrapper from "common/components/TableWrapper"
 import PanelListItemLeft from "common/components/panels/PanelListItemLeft"
 import PanelListItemRight from "common/components/panels/PanelListItemRight"
 
@@ -55,16 +52,6 @@ const dataFilter = (arr, type) => {
   return expChecker
 }
 
-// Material-UI stylings
-const styles = theme => ({
-  root: {
-    width: "100%",
-  },
-  table: {
-    borderBottom: "1px dotted #A3BAE9",
-  },
-})
-
 type Props = {
   /** Material-UI styling */
   classes: Object,
@@ -77,46 +64,38 @@ type Props = {
  */
 
 const GoaPanel = (props: Props) => {
-  const { classes, panelData } = props
+  const { panelData } = props
 
   return (
-    <Paper className={classes.root}>
-      <Table className={classes.table}>
-        <TableBody>
-          <TableRow>
-            <PanelListItemLeft title="Molecular Function" />
-            <PanelListItemRight>
-              {dataFilter(panelData.data.data[0], "molecular_function").map(
-                (item: Object, i: string) => (
-                  <GoaPanelContent key={i} item={item} />
-                ),
-              )}
-            </PanelListItemRight>
-          </TableRow>
-          <TableRow>
-            <PanelListItemLeft title="Biological Process" />
-            <PanelListItemRight>
-              {dataFilter(panelData.data.data[0], "biological_process").map(
-                (item, i) => (
-                  <GoaPanelContent key={i} item={item} />
-                ),
-              )}
-            </PanelListItemRight>
-          </TableRow>
-          <TableRow>
-            <PanelListItemLeft title="Cellular Component" />
-            <PanelListItemRight>
-              {dataFilter(panelData.data.data[0], "cellular_component").map(
-                (item, i) => (
-                  <GoaPanelContent key={i} item={item} />
-                ),
-              )}
-            </PanelListItemRight>
-          </TableRow>
-        </TableBody>
-      </Table>
-    </Paper>
+    <TableWrapper>
+      <TableRow>
+        <PanelListItemLeft title="Molecular Function" />
+        <PanelListItemRight>
+          {dataFilter(panelData.data, "molecular_function").map(
+            (item: Object, i: string) => (
+              <GoaPanelContent key={i} item={item} />
+            ),
+          )}
+        </PanelListItemRight>
+      </TableRow>
+      <TableRow>
+        <PanelListItemLeft title="Biological Process" />
+        <PanelListItemRight>
+          {dataFilter(panelData.data, "biological_process").map((item, i) => (
+            <GoaPanelContent key={i} item={item} />
+          ))}
+        </PanelListItemRight>
+      </TableRow>
+      <TableRow>
+        <PanelListItemLeft title="Cellular Component" />
+        <PanelListItemRight>
+          {dataFilter(panelData.data, "cellular_component").map((item, i) => (
+            <GoaPanelContent key={i} item={item} />
+          ))}
+        </PanelListItemRight>
+      </TableRow>
+    </TableWrapper>
   )
 }
 
-export default withStyles(styles)(GoaPanel)
+export default GoaPanel