Skip to content

Commit f66c14b

Browse files
acrellinacrellin
committed
Refactor Features tab components into presentational and container componenets
1 parent fd59540 commit f66c14b

File tree

10 files changed

+131
-117
lines changed

10 files changed

+131
-117
lines changed

‎static/js/components/Features.jsx‎ renamed to ‎static/js/components/FeaturesTab/index.jsx‎

Lines changed: 4 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,10 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { connect } from "react-redux";
4-
import { reduxForm } from 'redux-form';
5-
import ReactTabs from 'react-tabs';
63

7-
import { FormComponent, Form, TextInput, TextareaInput, SubmitButton,
8-
CheckBoxInput, SelectInput } from './Form/index';
9-
import * as Validate from '../validate';
10-
import Expand from './Expand';
11-
import * as Action from '../actions';
12-
import Plot from './Plot';
13-
import FoldableRow from './FoldableRow';
14-
import { reformatDatetime, contains } from '../utils';
15-
import UploadFeaturesForm from './UploadFeaturesForm';
16-
import FeaturizeForm from './FeaturizeForm';
17-
import FeaturesetsTable from './FeaturesetsTable';
4+
import Expand from '../Expand';
5+
import UploadFeaturesForm from '../../containers/UploadFeaturesForm';
6+
import FeaturizeForm from '../../containers/FeaturizeForm';
7+
import FeaturesetsTable from '../../containers/FeaturesetsTable';
188

199

2010
let FeaturesTab = (props) => {
@@ -57,15 +47,4 @@ FeaturesTab.defaultProps = {
5747
selectedProject: {}
5848
};
5949

60-
const ftMapDispatchToProps = (dispatch, ownProps) => (
61-
{
62-
computeFeatures: form => dispatch(Action.computeFeatures(form)),
63-
uploadFeatures: form => dispatch(
64-
Action.uploadFeatureset(form, ownProps.selectedProject)
65-
)
66-
}
67-
);
68-
69-
FeaturesTab = connect(null, ftMapDispatchToProps)(FeaturesTab);
70-
7150
export default FeaturesTab;

‎static/js/components/FeaturesetsTable.jsx‎ renamed to ‎static/js/components/FeaturesetsTable/index.jsx‎

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { connect } from 'react-redux';
43

5-
import { reformatDatetime } from '../utils';
6-
import Plot from './Plot';
7-
import FoldableRow from './FoldableRow';
8-
import Delete from './Delete';
9-
import * as Action from '../actions';
4+
import { reformatDatetime } from '../../utils';
5+
import Plot from '../Plot';
6+
import FoldableRow from '../FoldableRow';
7+
import DeleteFeatureset from '../../containers/DeleteFeatureset';
108

119

1210
const FeaturesetsTable = props => (
@@ -60,19 +58,4 @@ FeaturesetsTable.defaultProps = {
6058
featurePlotURL: null
6159
};
6260

63-
64-
const ftMapStateToProps = (state, ownProps) => (
65-
{
66-
featuresets: state.featuresets.filter(
67-
fs => (fs.project_id === ownProps.selectedProject.id)
68-
)
69-
}
70-
);
71-
72-
const deleteMapDispatchToProps = dispatch => (
73-
{ delete: id => dispatch(Action.deleteFeatureset(id)) }
74-
);
75-
76-
const DeleteFeatureset = connect(null, deleteMapDispatchToProps)(Delete);
77-
78-
export default connect(ftMapStateToProps)(FeaturesetsTable);
61+
export default FeaturesetsTable;

‎static/js/components/FeaturizeForm.jsx‎ renamed to ‎static/js/components/FeaturizeForm/index.jsx‎

Lines changed: 5 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { reduxForm } from 'redux-form';
43
import ReactTabs from 'react-tabs';
54

6-
import * as Validate from '../validate';
75
import { FormComponent, Form, TextInput, TextareaInput, SubmitButton,
8-
CheckBoxInput, SelectInput } from './Form';
9-
import Expand from './Expand';
10-
import { contains } from '../utils';
11-
import * as Action from '../actions';
6+
CheckBoxInput, SelectInput } from '../Form';
7+
import Expand from '../Expand';
8+
import { contains } from '../../utils';
9+
import * as Action from '../../actions';
1210

1311

1412
const { Tab, Tabs, TabList, TabPanel } = { ...ReactTabs };
@@ -131,38 +129,4 @@ FeaturizeForm.defaultProps = {
131129
error: ""
132130
};
133131

134-
const mapStateToProps = (state, ownProps) => {
135-
const featuresList = state.features.featsWithCheckedTags;
136-
137-
const initialValues = { };
138-
featuresList.map((f, idx) => { initialValues[f] = true; return null; });
139-
140-
const filteredDatasets = state.datasets.filter(dataset =>
141-
(dataset.project_id === ownProps.selectedProject.id));
142-
const zerothDataset = filteredDatasets[0];
143-
144-
return {
145-
featuresByCategory: state.features.features_by_category,
146-
tagList: state.features.tagList,
147-
featuresList,
148-
featureDescriptions: state.features.descriptions,
149-
datasets: filteredDatasets,
150-
fields: featuresList.concat(
151-
['datasetID', 'featuresetName', 'customFeatsCode']
152-
),
153-
initialValues: { ...initialValues,
154-
datasetID: zerothDataset ? zerothDataset.id.toString() : "",
155-
customFeatsCode: "" }
156-
};
157-
};
158-
159-
const validate = Validate.createValidator({
160-
datasetID: [Validate.required],
161-
featuresetName: [Validate.required]
162-
});
163-
164-
export default reduxForm({
165-
form: 'featurize',
166-
fields: [''],
167-
validate
168-
}, mapStateToProps)(FeaturizeForm);
132+
export default FeaturizeForm;

‎static/js/components/Main.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import AddProject from '../containers/AddProject';
1616
import ProjectSelector from '../containers/ProjectSelector';
1717
import ProjectTab from '../containers/ProjectTab';
1818
import DatasetsTab from './DatasetsTab';
19-
import FeaturesTab from './Features';
19+
import FeaturesTab from '../containers/FeaturesTab';
2020
import ModelsTab from './Models';
2121
import PredictTab from './Predictions';
2222
import colorScheme from './colorscheme';

‎static/js/components/UploadFeaturesForm.jsx‎ renamed to ‎static/js/components/UploadFeaturesForm/index.jsx‎

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { reduxForm } from 'redux-form';
43

54
import { FormComponent, Form, TextInput, TextareaInput, SubmitButton,
6-
CheckBoxInput, SelectInput, FileInput } from './Form';
7-
import * as Validate from '../validate';
8-
import CesiumTooltip from './Tooltip';
5+
CheckBoxInput, SelectInput, FileInput } from '../Form';
6+
import CesiumTooltip from '../Tooltip';
97

108

119
const UploadFeaturesForm = props => {
@@ -59,27 +57,4 @@ UploadFeaturesForm.defaultProps = {
5957
error: ""
6058
};
6159

62-
const mapStateToProps = (state, ownProps) => {
63-
const initialValues = { };
64-
const filteredDatasets = state.datasets.filter(dataset =>
65-
(dataset.project_id === ownProps.selectedProject.id));
66-
return {
67-
datasets: filteredDatasets,
68-
fields: ['datasetID', 'featuresetName', 'dataFile'],
69-
initialValues: { ...initialValues,
70-
datasetID: "No associated dataset" }
71-
};
72-
};
73-
74-
const validate = Validate.createValidator({
75-
featuresetName: [Validate.required],
76-
dataFile: [Validate.oneFile]
77-
});
78-
79-
export default reduxForm(
80-
{
81-
form: 'uploadFeatures',
82-
fields: [''],
83-
validate
84-
}, mapStateToProps
85-
)(UploadFeaturesForm);
60+
export default UploadFeaturesForm;

‎static/js/containers/DeleteFeatureset/index.jsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { connect } from 'react-redux';
2+
3+
import * as Action from '../../actions';
4+
import Delete from '../../components/Delete';
5+
6+
7+
const deleteMapDispatchToProps = dispatch => (
8+
{ delete: id => dispatch(Action.deleteFeatureset(id)) }
9+
);
10+
11+
export default connect(null, deleteMapDispatchToProps)(Delete);

‎static/js/containers/FeaturesTab/index.jsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { connect } from 'react-redux';
2+
3+
import * as Action from '../../actions';
4+
import FeaturesTab from '../../components/FeaturesTab';
5+
6+
7+
const ftMapDispatchToProps = (dispatch, ownProps) => (
8+
{
9+
computeFeatures: form => dispatch(Action.computeFeatures(form)),
10+
uploadFeatures: form => dispatch(
11+
Action.uploadFeatureset(form, ownProps.selectedProject)
12+
)
13+
}
14+
);
15+
16+
export default connect(null, ftMapDispatchToProps)(FeaturesTab);

‎static/js/containers/FeaturesetsTable/index.jsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { connect } from 'react-redux';
2+
3+
import * as Action from '../../actions';
4+
import FeaturesetsTable from '../../components/FeaturesetsTable';
5+
6+
7+
const ftMapStateToProps = (state, ownProps) => (
8+
{
9+
featuresets: state.featuresets.filter(
10+
fs => (fs.project_id === ownProps.selectedProject.id)
11+
)
12+
}
13+
);
14+
15+
export default connect(ftMapStateToProps)(FeaturesetsTable);

‎static/js/containers/FeaturizeForm/index.jsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { reduxForm } from 'redux-form';
2+
3+
import FeaturizeForm from '../../components/FeaturizeForm';
4+
import * as Validate from '../../validate';
5+
6+
7+
const mapStateToProps = (state, ownProps) => {
8+
const featuresList = state.features.featsWithCheckedTags;
9+
10+
const initialValues = { };
11+
featuresList.map((f, idx) => { initialValues[f] = true; return null; });
12+
13+
const filteredDatasets = state.datasets.filter(dataset =>
14+
(dataset.project_id === ownProps.selectedProject.id));
15+
const zerothDataset = filteredDatasets[0];
16+
17+
return {
18+
featuresByCategory: state.features.features_by_category,
19+
tagList: state.features.tagList,
20+
featuresList,
21+
featureDescriptions: state.features.descriptions,
22+
datasets: filteredDatasets,
23+
fields: featuresList.concat(
24+
['datasetID', 'featuresetName', 'customFeatsCode']
25+
),
26+
initialValues: { ...initialValues,
27+
datasetID: zerothDataset ? zerothDataset.id.toString() : "",
28+
customFeatsCode: "" }
29+
};
30+
};
31+
32+
const validate = Validate.createValidator({
33+
datasetID: [Validate.required],
34+
featuresetName: [Validate.required]
35+
});
36+
37+
export default reduxForm({
38+
form: 'featurize',
39+
fields: [''],
40+
validate
41+
}, mapStateToProps)(FeaturizeForm);

‎static/js/containers/UploadFeaturesForm/index.jsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { reduxForm } from 'redux-form';
2+
3+
import * as Validate from '../../validate';
4+
import UploadFeaturesForm from '../../components/UploadFeaturesForm';
5+
6+
7+
const mapStateToProps = (state, ownProps) => {
8+
const initialValues = { };
9+
const filteredDatasets = state.datasets.filter(dataset =>
10+
(dataset.project_id === ownProps.selectedProject.id));
11+
return {
12+
datasets: filteredDatasets,
13+
fields: ['datasetID', 'featuresetName', 'dataFile'],
14+
initialValues: { ...initialValues,
15+
datasetID: "No associated dataset" }
16+
};
17+
};
18+
19+
const validate = Validate.createValidator({
20+
featuresetName: [Validate.required],
21+
dataFile: [Validate.oneFile]
22+
});
23+
24+
export default reduxForm(
25+
{
26+
form: 'uploadFeatures',
27+
fields: [''],
28+
validate
29+
}, mapStateToProps
30+
)(UploadFeaturesForm);

0 commit comments

Comments
 (0)