Changes after review. Separate fetching data in child component

Author: tito12

web/src/components/datasets/DatasetColumnLineage.tsx

@@ -1,21 +1,47 @@
 // SPDX-License-Identifier: Apache-2.0
 
+import React, { FunctionComponent, useEffect } from 'react'
+import * as Redux from 'redux'
 import { Box, Button } from '@material-ui/core'
 import MqEmpty from '../core/empty/MqEmpty'
 import MqJson from '../core/code/MqJson'
 import MqText from '../core/text/MqText'
-import React, { FunctionComponent } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { Dataset } from '../../types/api'
+import { fetchDataset, resetDataset } from '../../store/actionCreators'
 import { fileSize } from '../../helpers'
 import { LineageDataset } from '../lineage/types'
 import { saveAs } from 'file-saver'
+import { IState } from '../../store/reducers'
 
 interface DatasetColumnLineageProps {
-  columnLineage: object
   lineageDataset: LineageDataset
 }
 
-const DatasetColumnLineage: FunctionComponent<DatasetColumnLineageProps> = props => {
-  const { columnLineage, lineageDataset } = props
+interface StateProps {
+  dataset: Dataset
+}
+
+interface DispatchProps {
+  fetchDataset: typeof fetchDataset
+  resetDataset: typeof resetDataset
+}
+
+type IProps = DatasetColumnLineageProps & DispatchProps & StateProps
+
+const DatasetColumnLineage: FunctionComponent<IProps> = props => {
+  const { dataset, lineageDataset, fetchDataset, resetDataset } = props
+  const columnLineage = dataset.columnLineage
+
+  useEffect(() => {
+    fetchDataset(lineageDataset.namespace, lineageDataset.name)
+  }, [lineageDataset.name])
+
+  // unmounting
+  useEffect(() => () => {
+    resetDataset()
+  }, [])
 
   const handleDownloadPayload = (data: object) => {
     const title = `${lineageDataset.name}-${lineageDataset.namespace}-columnLineage`
@@ -63,4 +89,20 @@ const DatasetColumnLineage: FunctionComponent<DatasetColumnLineageProps> = props
   )
 }
 
-export default DatasetColumnLineage
+const mapStateToProps = (state: IState) => ({
+  dataset: state.dataset.result,
+})
+
+const mapDispatchToProps = (dispatch: Redux.Dispatch) =>
+  bindActionCreators(
+    {
+      fetchDataset: fetchDataset,
+      resetDataset: resetDataset
+    },
+    dispatch
+  )
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(DatasetColumnLineage)

web/src/components/datasets/DatasetDetailPage.tsx

@@ -1,10 +1,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { ChangeEvent, FunctionComponent, SetStateAction, useEffect } from 'react'
-
 import * as Redux from 'redux'
 import { Box, Chip, Tab, Tabs } from '@material-ui/core'
-import { Dataset, DatasetVersion } from '../../types/api'
+import { DatasetVersion } from '../../types/api'
 import { IState } from '../../store/reducers'
 import {
   Theme as ITheme,
@@ -53,9 +52,7 @@ const styles = ({ spacing }: ITheme) => {
 interface StateProps {
   lineageDataset: LineageDataset
   versions: DatasetVersion[]
-  dataset: Dataset
   versionsLoading: boolean
-  isDatasetInit: boolean
 }
 
 interface DispatchProps {
@@ -95,13 +92,6 @@ const DatasetDetailPage: FunctionComponent<IProps> = props => {
     setTab(newValue)
   }
 
-  const handleFetchDataset = () => {
-    if(!props.isDatasetInit) {
-      fetchDataset(props.lineageDataset.namespace, props.lineageDataset.name)
-    }
-    return true
-  }
-
   if (versionsLoading) {
     return (
       <Box display={'flex'} justifyContent={'center'}>
@@ -168,19 +158,15 @@ const DatasetDetailPage: FunctionComponent<IProps> = props => {
         />
       )}
       {tab === 1 && <DatasetVersions versions={props.versions} />}
-      {tab === 2 && handleFetchDataset() && (
-        <DatasetColumnLineage lineageDataset={props.lineageDataset} columnLineage={props.dataset.columnLineage} />
-      )}
+      {tab === 2 && <DatasetColumnLineage lineageDataset={props.lineageDataset} />}
     </Box>
   )
 }
 
 const mapStateToProps = (state: IState) => ({
   datasets: state.datasets.result,
   versions: state.datasetVersions.result.versions,
-  dataset: state.dataset.result,
-  versionsLoading: state.datasetVersions.isLoading,
-  isDatasetInit: state.dataset.init,
+  versionsLoading: state.datasetVersions.isLoading
 })
 
 const mapDispatchToProps = (dispatch: Redux.Dispatch) =>
@@ -197,4 +183,4 @@ const mapDispatchToProps = (dispatch: Redux.Dispatch) =>
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(withStyles(styles)(DatasetDetailPage))
+)(withStyles(styles)(DatasetDetailPage))