#250 Entry page

src/actions/search.ts

+import {DescriptorService} from 'service/DescriptorService';
+import {DatasetService} from 'service/DatasetService';
+import {DescriptorListService} from 'service/DescriptorListService';
+import {Descriptor, DescriptorList} from 'model/descriptor.model';
+import {Page} from 'model/common.model';
+import {Dataset} from 'model/dataset.model';
+import {
+    SEARCH_DATASET_PAGE,
+    SEARCH_DESCRIPTOR_PAGE,
+    SEARCH_DESCRIPTOR_LIST_PAGE,
+    NEW_SEARCH,
+} from 'constants/search';
+import {log} from 'utilities/debug';
+
+const search = (search: string) => ({
+    type: NEW_SEARCH,
+    payload: { search },
+});
+
+const searchDatasetPage = (paged: Page<Dataset>) => ({
+    type: SEARCH_DATASET_PAGE,
+    payload: { paged },
+});
+
+const searchDescriptorPage = (paged: Page<Descriptor>) => ({
+    type: SEARCH_DESCRIPTOR_PAGE,
+    payload: { paged },
+});
+
+const searchDescriptorListPage = (paged: Page<DescriptorList>) => ({
+    type: SEARCH_DESCRIPTOR_LIST_PAGE,
+    payload: { paged },
+});
+
+export function searchDatasets(page?, results?, sortBy?, filter?, order?) {
+    return (dispatch, getState) => {
+        const token = getState().login.access_token;
+
+        dispatch(search(filter._text));
+
+        return DatasetService.listDatasets(token, page, results, sortBy, filter, order)
+            .then((paged) => {
+                return dispatch(searchDatasetPage(paged));
+            })
+            .catch((error) => {
+                log('Error', error);
+            });
+    };
+}
+
+export function searchDescriptors(page?, results?, sortBy?, filter?, order?) {
+    return (dispatch, getState) => {
+        const token = getState().login.access_token;
+
+        dispatch(search(filter._text));
+
+        return DescriptorService.listDescriptors(token, page, results, sortBy, filter, order)
+            .then((paged) => {
+                return dispatch(searchDescriptorPage(paged));
+            })
+            .catch((error) => {
+                log('Error', error);
+            });
+    };
+}
+
+export function searchDescriptorLists(page?, results?, sortBy?, filter?, order?) {
+    return (dispatch, getState) => {
+        const token = getState().login.access_token;
+
+        dispatch(search(filter._text));
+
+        return DescriptorListService.listDescriptorLists(token, page, results, sortBy, filter, order)
+            .then((paged) => {
+                return dispatch(searchDescriptorListPage(paged));
+            })
+            .catch((error) => {
+                log('Error', error);
+            });
+    };
+}

src/constants/search.ts

+export const NEW_SEARCH = 'App/NEW_SEARCH';
+export const SEARCH_DATASET_PAGE = 'App/SEARCH_DATASET_PAGE';
+export const SEARCH_DESCRIPTOR_PAGE = 'App/SEARCH_DESCRIPTOR_PAGE';
+export const SEARCH_DESCRIPTOR_LIST_PAGE = 'App/SEARCH_DESCRIPTOR_LIST_PAGE';

src/model/filter.model.ts

 export interface IBasicModelFilter {
   id?: number[];
+  _text?: string;
 }
 
 export interface IVersionedModelFilter extends IBasicModelFilter {

src/reducers/index.ts

@@ -13,6 +13,7 @@ import appMounted from './appMounted';
 import vocabulary from './vocabulary';
 import crop from './crop';
 import history from './history';
+import search from './search';
 
 const rootReducer = combineReducers({
   lookups,
@@ -27,6 +28,7 @@ const rootReducer = combineReducers({
   filter,
   appMounted,
   history,
+  search,
   routing: routerReducer,
   form: formReducer,
 });

src/reducers/search.ts

+import * as update from 'immutability-helper';
+
+import {
+    SEARCH_DATASET_PAGE,
+    SEARCH_DESCRIPTOR_PAGE,
+    SEARCH_DESCRIPTOR_LIST_PAGE,
+    NEW_SEARCH,
+} from 'constants/search';
+
+import {Dataset} from 'model/dataset.model';
+import {Page} from 'model/common.model';
+import {Descriptor, DescriptorList} from 'model/descriptor.model';
+
+const INITIAL_STATE: {
+    search: string;
+    loading: boolean;
+    pagedDatasets: Page<Dataset>;
+    pagedDescriptors: Page<Descriptor>;
+    pagedDescriptorLists: Page<DescriptorList>;
+} = {
+    search: null,
+    loading: false,
+    pagedDatasets: null,
+    pagedDescriptors: null,
+    pagedDescriptorLists: null,
+};
+
+function search(state = INITIAL_STATE, action: { type?: string, payload?: any } = {type: '', payload: {}}) {
+
+    switch (action.type) {
+        case NEW_SEARCH: {
+            return update(state, {
+                search: {$set: action.payload.search},
+                loading: {$set: true},
+            });
+        }
+
+        case SEARCH_DATASET_PAGE: {
+            return update(state, {
+                pagedDatasets: {$set: action.payload.paged},
+                loading: {$set: false},
+            });
+        }
+        case SEARCH_DESCRIPTOR_PAGE: {
+            return update(state, {
+                pagedDescriptors: {$set: action.payload.paged},
+                loading: {$set: false},
+            });
+        }
+        case SEARCH_DESCRIPTOR_LIST_PAGE: {
+            return update(state, {
+                pagedDescriptorLists: {$set: action.payload.paged},
+                loading: {$set: false},
+            });
+        }
+
+        default:
+            return state;
+    }
+}
+
+export default search;

src/ui/pages/welcome/index.tsx

 import * as React from 'react';
-const connect = require('react-redux').connect;
+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 Heading from 'ui/common/heading';
+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';
 
-function mapStateToProps(state) {
-	return {
-	};
+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 mapDispatchToProps(dispatch) {
-	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;
+        }
+    }
 
-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>
-		);
-	}
+    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>
+        );
+    }
 }
 
+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);
+
 export default connect(
-	mapStateToProps,
-	mapDispatchToProps,
-)(WelcomePage);
+    mapStateToProps,
+    mapDispatchToProps,
+)(styled);