Commit 723d3f65 authored by Matija Obreza's avatar Matija Obreza
Browse files

Moved to SearchPage

parent d26a2abc
import * as React from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {withStyles} from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import TextField from 'material-ui/TextField';
import Tabs, {Tab} from 'material-ui/Tabs';
import Paper from 'material-ui/Paper';
import Loading from 'ui/common/Loading';
import Container from 'ui/common/container';
import {searchDatasets, searchDescriptorLists, searchDescriptors} from 'actions/search';
import {Dataset, IDatasetFilter} from 'model/dataset.model';
import {Page} from 'model/common.model';
import {Descriptor, DescriptorList, IDescriptorFilter, IDescriptorListFilter} from 'model/descriptor.model';
import ContentHeader from 'ui/common/heading/ContentHeader';
interface ISearchPageProps extends React.ClassAttributes<any> {
classes: any;
search: string;
loading: boolean;
pagedDatasets: Page<Dataset>;
pagedDescriptors: Page<Descriptor>;
pagedDescriptorLists: Page<DescriptorList>;
searchDatasets: (page?: number, results?: number, sortBy?: string, filter?: IDatasetFilter) => any;
searchDescriptors: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorFilter) => any;
searchDescriptorLists: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorListFilter) => any;
}
const styles = (theme) => ({
alignCenter: {
textAlign: 'center',
},
paper: {
margin: 20,
height: 500,
overflow: 'auto' as 'auto',
},
});
class SearchPage extends React.Component<ISearchPageProps, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
search: props.search || '',
value: 0,
};
}
protected search = (e) => {
e.preventDefault();
const {search, value} = this.state;
const {searchDatasets, searchDescriptors, searchDescriptorLists} = this.props;
if (!search) {
return;
}
switch (value) {
case 0:
searchDatasets(0, 20, null, {_text: search});
break;
case 1:
searchDescriptors(0, 20, null, {_text: search});
break;
case 2:
searchDescriptorLists(0, 20, null, {_text: search});
break;
}
}
protected onSearchChange = (e) => {
const search = e.target.value;
this.setState((state) => ({...state, search}));
}
protected handleChange = (event, value) => {
this.setState((state) => ({...state, value}));
}
protected getContent = (value) => {
const {pagedDatasets, pagedDescriptors, pagedDescriptorLists} = this.props;
switch (value) {
case 0:
return pagedDatasets && JSON.stringify(pagedDatasets.content);
case 1:
return pagedDescriptors && JSON.stringify(pagedDescriptors.content);
case 2:
return pagedDescriptorLists && JSON.stringify(pagedDescriptorLists.content);
}
}
public render() {
const {classes, loading} = this.props;
const {search, value} = this.state;
return (
<Container testid="counter" size={ 12 } center>
<ContentHeader title="Search the Genesys Catalog"/>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } className={ classes.alignCenter }>
<form onSubmit={ this.search }>
<TextField
label="Search"
value={ search }
onChange={ this.onSearchChange }
margin="normal"
/>
</form>
</Grid>
<Grid item xs={ 12 }>
<Tabs value={ value } onChange={ this.handleChange } centered>
<Tab label="Datasets"/>
<Tab label="Descriptors"/>
<Tab label="Descriptor lists"/>
</Tabs>
<Paper className={ classes.paper }>
{ loading ? <Loading/> : this.getContent(value) }
</Paper>
</Grid>
</Grid>
</Container>
);
}
}
const styled = withStyles(styles)(SearchPage);
const mapStateToProps = (state, ownProps) => ({
search: state.search.search,
loading: state.search.loading,
pagedDatasets: state.search.pagedDatasets,
pagedDescriptors: state.search.pagedDescriptors,
pagedDescriptorLists: state.search.pagedDescriptorLists,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
searchDatasets,
searchDescriptors,
searchDescriptorLists,
}, dispatch);
export default connect(
mapStateToProps,
mapDispatchToProps,
)(styled);
import * as React from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {withStyles} from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import TextField from 'material-ui/TextField';
import Tabs, {Tab} from 'material-ui/Tabs';
import Paper from 'material-ui/Paper';
import Loading from 'ui/common/Loading';
import Container from 'ui/common/container';
import {searchDatasets, searchDescriptorLists, searchDescriptors} from 'actions/search';
import {Dataset, IDatasetFilter} from 'model/dataset.model';
import {Page} from 'model/common.model';
import {Descriptor, DescriptorList, IDescriptorFilter, IDescriptorListFilter} from 'model/descriptor.model';
import ContentHeader from 'ui/common/heading/ContentHeader';
import Heading from 'ui/common/heading';
interface IWelcomePageProps extends React.ClassAttributes<any> {
classes: any;
search: string;
loading: boolean;
pagedDatasets: Page<Dataset>;
pagedDescriptors: Page<Descriptor>;
pagedDescriptorLists: Page<DescriptorList>;
searchDatasets: (page?: number, results?: number, sortBy?: string, filter?: IDatasetFilter) => any;
searchDescriptors: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorFilter) => any;
searchDescriptorLists: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorListFilter) => any;
function mapStateToProps(state) {
return {
};
}
const styles = (theme) => ({
alignCenter: {
textAlign: 'center',
},
paper: {
margin: 20,
height: 500,
overflow: 'auto' as 'auto',
},
});
class WelcomePage extends React.Component<IWelcomePageProps, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
search: props.search || '',
value: 0,
};
}
protected search = (e) => {
e.preventDefault();
const {search, value} = this.state;
const {searchDatasets, searchDescriptors, searchDescriptorLists} = this.props;
if (!search) {
return;
}
switch (value) {
case 0:
searchDatasets(0, 20, null, {_text: search});
break;
case 1:
searchDescriptors(0, 20, null, {_text: search});
break;
case 2:
searchDescriptorLists(0, 20, null, {_text: search});
break;
}
}
protected onSearchChange = (e) => {
const search = e.target.value;
this.setState((state) => ({...state, search}));
}
protected handleChange = (event, value) => {
this.setState((state) => ({...state, value}));
}
protected getContent = (value) => {
const {pagedDatasets, pagedDescriptors, pagedDescriptorLists} = this.props;
switch (value) {
case 0:
return pagedDatasets && JSON.stringify(pagedDatasets.content);
case 1:
return pagedDescriptors && JSON.stringify(pagedDescriptors.content);
case 2:
return pagedDescriptorLists && JSON.stringify(pagedDescriptorLists.content);
}
}
public render() {
const {classes, loading} = this.props;
const {search, value} = this.state;
return (
<Container testid="counter" size={ 12 } center>
<ContentHeader title="Welcome to the Genesys Catalog"/>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } className={ classes.alignCenter }>
<form onSubmit={ this.search }>
<TextField
label="Search"
value={ search }
onChange={ this.onSearchChange }
margin="normal"
/>
</form>
</Grid>
<Grid item xs={ 12 }>
<Tabs value={ value } onChange={ this.handleChange } centered>
<Tab label="Datasets"/>
<Tab label="Descriptors"/>
<Tab label="Descriptor lists"/>
</Tabs>
<Paper className={ classes.paper }>
{ loading ? <Loading/> : this.getContent(value) }
</Paper>
</Grid>
</Grid>
</Container>
);
}
function mapDispatchToProps(dispatch) {
return {
};
}
const styled = withStyles(styles)(WelcomePage);
const mapStateToProps = (state, ownProps) => ({
search: state.search.search,
loading: state.search.loading,
pagedDatasets: state.search.pagedDatasets,
pagedDescriptors: state.search.pagedDescriptors,
pagedDescriptorLists: state.search.pagedDescriptorLists,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
searchDatasets,
searchDescriptors,
searchDescriptorLists,
}, dispatch);
class WelcomePage extends React.Component<React.Props<any>, void> {
public render() {
return (
<Container testid="counter" size={ 12 } center>
<Heading title="Welcome to the Genesys Catalog" />
<h2>The TO-DO list</h2>
<ul>
<li>Entry page</li>
<li>... and everything else!</li>
</ul>
</Container>
);
}
}
export default connect(
mapStateToProps,
mapDispatchToProps,
)(styled);
mapStateToProps,
mapDispatchToProps,
)(WelcomePage);
......@@ -8,6 +8,7 @@ import App from './App';
import AuthorizedRouteComponent from './common/authorized/AuthorizedRouteComponent';
import WelcomePage from './pages/welcome';
import LoginPage from './pages/login/LoginPage';
import SearchPage from './pages/search/SearchPage';
import PartnerWrapper from './pages/partner/Wrapper';
import PartnerBrowsePage from './pages/partner/BrowsePage';
......@@ -136,6 +137,8 @@ export default(
<IndexRoute component={ AccessionsBrowsePage } />
</Route>
<Route path="/search" exact component={ SearchPage } />
<Route path="/login" component={ LoginPage }/>
{ guiTestingRoutes() }
<Route path="*" component={ NotFound }/>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment