Merge pull request #20 from KPMP/KPMP-1917_ButtonToValidateFilenames

Kpmp 1917 button to validate filenames

package.json

@@ -21,7 +21,7 @@
     "redux-thunk": "2.3.0"
   },
   "devDependencies": {
-    "node-sass-chokidar": "^1.4.0",
+    "node-sass-chokidar": "^1.5.0",
     "npm-run-all": "4.1.5"
   },
   "scripts": {

src/App.js

@@ -13,67 +13,69 @@ import { Route, Switch, Router } from 'react-router-dom';
 import ErrorBoundaryContainer from './components/Error/ErrorBoundaryContainer';
 import Oops from './components/Error/Oops';
 import PackageDashboardPageContainer from './components/PackageDashboard/PackageDashboardPageContainer';
+import FilenameValidationPageContainer from './components/Validation/FilenameValidationPageContainer';
 import PermissionDenied from './components/Error/PermissionDenied';
 import NotRegistered from './components/Error/NotRegistered';
 
 const cacheStore = window.sessionStorage.getItem('redux-store');
 const initialState = cacheStore ? JSON.parse(cacheStore) : loadedState;
 const store = applyMiddleware(thunk)(createStore)(
-  rootReducer,
-  initialState,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+	rootReducer,
+	initialState,
+	window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );
 const saveState = () => {
-  window.sessionStorage.setItem(
-    'redux-store',
-    JSON.stringify(store.getState())
-  );
+	window.sessionStorage.setItem(
+		'redux-store',
+		JSON.stringify(store.getState())
+	);
 };
 
 const GA_TRACKING_ID = 'UA-124331187-8';
 
 if(process.env.NODE_ENV === 'production') {
-  ReactGA.initialize(GA_TRACKING_ID);
+	ReactGA.initialize(GA_TRACKING_ID);
 }
 
 function logPageView(location, action) {
-  ReactGA.set({ page: location.pathname + location.search });
-  ReactGA.pageview(location.pathname + location.search);
+	ReactGA.set({ page: location.pathname + location.search });
+	ReactGA.pageview(location.pathname + location.search);
 }
 const history = createBrowserHistory();
 history.listen((location, action) => {
-  logPageView(location, action);
+	logPageView(location, action);
 });
 
 store.subscribe(function() {
-  console.log(store.getState());
+	console.log(store.getState());
 });
 
 store.subscribe(saveState);
 
 class App extends Component {
-  componentWillMount() {
-    logPageView(window.location, '');
-  }
+	componentWillMount() {
+		logPageView(window.location, '');
+	}
 
-  render() {
-    return (
-      <Provider store={store}>
-        <Router history={history}>
-          <ErrorBoundaryContainer>
-            <NavBar />
-            <Switch>
-            	<Route exact path="/" component={PackageDashboardPageContainer} store={store} />
-            	<Route exact path="/oops" component={Oops} />
-            	<Route exact path="/permissionDenied" component={PermissionDenied} />
-            	<Route exact path="/notRegistered" component={NotRegistered} />
-            </Switch>
-            <NavFooter />
-          </ErrorBoundaryContainer>
-        </Router>
-      </Provider>
-    );
-  }
+	render() {
+		return (
+			<Provider store={store}>
+				<Router history={history}>
+					<ErrorBoundaryContainer>
+					<NavBar />
+						<Switch>
+							<Route exact path='/' component={PackageDashboardPageContainer} store={store} />
+							<Route exact path='/filenameValidation' component={FilenameValidationPageContainer} store={store}/>
+							<Route exact path='/oops' component={Oops} />
+							<Route exact path='/permissionDenied' component={PermissionDenied} />
+							<Route exact path='/notRegistered' component={NotRegistered} />
+						</Switch>
+					<NavFooter />
+					</ErrorBoundaryContainer>
+				</Router>
+			</Provider>
+		);
+	}
 }
 
 export default App;

src/components/PackageDashboard/PackageDashboardPage.js

@@ -1,24 +1,34 @@
 import React, { Component } from 'react';
-import { Container, Row, Col } from 'reactstrap';
+import { Container, Row, Col, Button } from 'reactstrap';
+import { Link } from 'react-router-dom';
 import PackageTable from './PackageTable';
 
 class PackageDashboardPage extends Component {
 
-    componentDidMount() {
-        this.props.getPackages();
-    }
+	componentDidMount() {
+		this.props.getPackages();
+	}
 
-    render() {
-        return <Container id="package-dashboard-page">
-            <Row>
-                <Col sm={12}>
-                    <PackageTable
-                        packages={this.props.packages}
-                    />
-                </Col>
-            </Row>
-        </Container>;
-    }
+	render() {
+		return ( 
+			<Container id='package-dashboard-page'>
+				<Row className='mt-3'>
+					<Col sm={12}>
+						<Link className='float-right' to='/filenameValidation'>
+							<Button color="primary">Validate Filenames</Button>
+						</Link>
+					</Col>
+				</Row>
+				<Row className='mt-3'>
+					<Col sm={12}>
+					<PackageTable
+					packages={this.props.packages}
+					/>
+					</Col>
+				</Row>
+			</Container>
+		);
+	}
 }
 
 export default PackageDashboardPage;

src/components/Validation/FilenameValidationPage.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import { Container, Row, Col, Button } from 'reactstrap';
+
+class FilenameValidationPage extends Component {
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			packageId: '',
+			filenames: ''
+		};
+		this.handleSubmit = this.handleSubmit.bind(this);
+	}
+
+	handlePackageIdChange = (event) => {
+		this.setState({ packageId: event.target.value });
+	}
+
+	handleFilenamesChange = (event) => {
+		this.setState({ filenames: event.target.value });
+	}
+
+	handleSubmit(e) {
+		e.preventDefault();
+	}
+
+
+	render() {
+		const { packageId, filenames } = this.state;
+		const isEnabled = packageId.length > 0 && filenames.length > 0;
+		return (
+			<Container>
+				<form onSubmit={this.handleSubmit}>
+					<Row className='mt-3'>
+						<Col sm={3}>
+							<label>Package Id:</label>
+						</Col>
+						<Col sm={9}>
+							<input type='text' size={40} ref={(input) => this.packageId = input} onChange={this.handlePackageIdChange}/>
+						</Col>
+					</Row>
+					<Row className='mt-3'>
+						<Col sm={3}>
+							<label>Files in metadata spreadsheet:</label>
+						</Col>
+						<Col sm={9}>
+							<textarea name='filenames' id='filenames' rows='10' cols='100' onChange={this.handleFilenamesChange} ref={(input) => this.filenames = input}/>
+						</Col>
+					</Row>
+					<Row className='mt-3'>
+						<Col sm={3} >
+						</Col>
+						<Col sm={9}>
+							<Button color='primary' type="submit" disabled={!isEnabled}>Validate</Button>
+						</Col>
+					</Row>
+				</form>
+			</Container>
+		);
+	}
+
+}
+
+export default FilenameValidationPage;

src/components/Validation/FilenameValidationPageContainer.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import FilenameValidationPage from './FilenameValidationPage';
+
+const mapStateToProps = (state, props) => ({
+});
+
+const mapDispatchToProps = (dispatch, props) => ({
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(FilenameValidationPage);