Commit 5b4487e0 authored by Maxym Borodenko's avatar Maxym Borodenko Committed by Matija Obreza
Browse files

Back button using history

parent ce329233
import { UPDATE_HISTORY } from 'constants/history';
export const updateHistory = () => (dispatch) => {
dispatch({type: UPDATE_HISTORY});
};
export const UPDATE_HISTORY = 'UPDATE_HISTORY';
import * as update from 'immutability-helper';
import { IReducerAction } from 'model/common.model';
import { UPDATE_HISTORY } from 'constants/history';
const INITIAL_STATE = {
hasHistory: false,
};
export default function history(state = INITIAL_STATE, action: IReducerAction = {type: ''}) {
switch (action.type) {
case UPDATE_HISTORY: {
return update(state, {
hasHistory: {$set: true},
});
}
default:
return state;
}
}
......@@ -12,6 +12,7 @@ import filter from './filter';
import appMounted from './appMounted';
import vocabulary from './vocabulary';
import crop from './crop';
import history from './history';
const rootReducer = combineReducers({
lookups,
......@@ -25,6 +26,7 @@ const rootReducer = combineReducers({
datasets,
filter,
appMounted,
history,
routing: routerReducer,
form: formReducer,
});
......
......@@ -6,6 +6,7 @@ import {log} from 'utilities/debug';
import {logoutRequest, loginAppRequest} from 'actions/login';
import {serverInfoRequest} from 'actions/serverInfo';
import {setAppMounted} from 'actions/appMounted';
import {updateHistory} from 'actions/history';
// FIXME When we start supporting other languages
import TimeAgo from 'javascript-time-ago';
......@@ -23,8 +24,10 @@ interface IAppProps extends React.ClassAttributes<any> {
logoutRequest: () => Promise<any>;
loginAppRequest: () => Promise<any>;
serverInfo: any;
hasHistory: boolean;
serverInfoRequest: () => Promise<any>;
setAppMounted: () => void;
updateHistory: () => void;
}
class App extends React.Component<IAppProps, any> {
......@@ -35,6 +38,15 @@ class App extends React.Component<IAppProps, any> {
super(props);
}
public componentWillReceiveProps(nextProps) {
const {hasHistory, updateHistory} = this.props;
if (!hasHistory) {
if (this.props.location !== null && nextProps.location !== null) {
updateHistory();
}
}
}
public render() {
const {children, login, logoutRequest, loginAppRequest, router, serverInfoRequest, serverInfo} = this.props;
log('Rendering App view');
......@@ -50,6 +62,7 @@ class App extends React.Component<IAppProps, any> {
}
const mapStateToProps = (state) => ({
hasHistory: state.history.hasHistory,
// accessToken: state.login.access_token,
});
......@@ -58,6 +71,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
loginAppRequest,
serverInfoRequest,
setAppMounted,
updateHistory,
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(App);
import * as React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { browserHistory } from 'react-router';
import Button from 'material-ui/Button';
import { navigateTo } from 'actions/navigation';
interface IBackButtonProps extends React.ClassAttributes<any> {
lastPath: string;
defaultTarget: string;
defaultBackText?: string;
hasHistory: boolean;
preferDefaultTarget?: boolean;
navigateTo: (path: string) => void;
}
class BackButton extends React.Component<IBackButtonProps, any> {
public constructor(props: any) {
super(props);
}
protected onGoBack = () => {
const {defaultTarget, hasHistory, navigateTo, preferDefaultTarget} = this.props;
if (preferDefaultTarget) {
navigateTo(defaultTarget);
} else {
if (hasHistory) {
browserHistory.goBack();
} else {
navigateTo(defaultTarget);
}
}
}
public render() {
const { defaultBackText} = this.props;
return (
<Button raised onClick={ this.onGoBack }>
{ defaultBackText || 'BACK' }
</Button>
);
}
}
const mapStateToProps = (state) => ({
hasHistory: state.history.hasHistory,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
navigateTo,
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(BackButton);
import * as React from 'react';
import {withStyles} from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import {Link} from 'react-router';
import Button from 'material-ui/Button';
const styles = {
subHeader: {
......@@ -19,8 +17,6 @@ const styles = {
interface IContentHeaderWithButtonProps extends React.ClassAttributes<any> {
classes: any;
title: string;
buttonName: string;
buttonUrl: string;
buttons: any;
}
......@@ -32,7 +28,7 @@ class ContentHeaderWithButton extends React.Component<IContentHeaderWithButtonPr
public render() {
const {classes, title, buttonName, buttonUrl, buttons} = this.props;
const {classes, title, buttons} = this.props;
return (
<Grid container spacing={ 0 }>
......@@ -41,17 +37,6 @@ class ContentHeaderWithButton extends React.Component<IContentHeaderWithButtonPr
{ title }
</h3>
<div className={ classes.flexGrow }/>
{ buttonName && buttonUrl ?
(
<Link to={ buttonUrl }>
<Button raised className={ classes.headerButton }>
{ buttonName }
</Button>
</Link>
) : null
}
{ buttons && buttons }
</Grid>
</Grid>
......
......@@ -12,6 +12,7 @@ import {listMyDescriptors} from 'actions/descriptors';
import {listMyDescriptorLists} from 'actions/descriptorList';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import BackButton from 'ui/common/buttons/BackButton';
import MyDataTable from './c/MyDataTable';
interface IDataPublishedContainerProps extends React.ClassAttributes<any> {
......@@ -137,10 +138,7 @@ class DP extends BaseMyDataPage<any> {
return (
<div>
<ContentHeaderWithButton title={ title }
buttonName="BACK TO DASHBOARD"
buttonUrl="/dashboard" />
<ContentHeaderWithButton title={ title } buttons={ <BackButton defaultTarget="/dashboard" defaultBackText="BACK TO DASHBOARD" /> }/>
<MyDataTable tab={ tab } basePath={ basePath }
paged={ paged } onPaginationChange={ this.onPaginationChange } />
</div>
......
......@@ -6,12 +6,11 @@ import { withStyles } from 'material-ui/styles';
import { loadDataset, deleteDataset, publishDataset } from 'actions/dataset';
import { Dataset } from 'model/dataset.model';
import BackButton from 'ui/common/buttons/BackButton';
import Loading from 'ui/common/Loading';
import BrowseMenu from './c/BrowseMenu';
import DatasetDisplay from './c/DatasetDisplay';
import Grid from 'material-ui/Grid';
import { Link } from 'react-router';
import Button from 'material-ui/Button';
interface IDatasetDetailProps extends React.ClassAttributes<any> {
classes: any;
......@@ -57,9 +56,7 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
<Grid item xs={ 12 } className={ `back-gray-yellow pl-20 pr-20 pt-10 pb-10 ${classes.backSection}` }>
<h4 className="font-bold lh-35 m-0">Dataset Detail</h4>
<div className={ classes.flexGrow }/>
<Link to="/datasets"><Button raised className={ classes.headerButton } >
BACK TO LIST
</Button></Link>
<BackButton defaultTarget="/datasets" defaultBackText="BACK TO LIST"/>
</Grid>
{ stillLoading ? <Loading /> :
<Grid item xs={ 12 } className="p-10">
......@@ -72,9 +69,7 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } className={ `back-gray-yellow pt-10 pb-10 pr-20 ${classes.backSection}` }>
<div className={ classes.flexGrow }/>
<Button raised className={ classes.headerButton }>
BACK TO LIST
</Button>
<BackButton defaultTarget="/datasets" defaultBackText="BACK TO LIST"/>
</Grid>
</Grid>
</div>
......
......@@ -174,7 +174,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
}
confirm(<span>Delete <b>{ dataset.title }</b>?</span>, {
description: `Deleting the dartaset will remove all related data.`,
description: `Deleting the dataset will remove all related data.`,
confirmLabel: 'Delete',
abortLabel: 'Cancel',
}).then(() => {
......
......@@ -4,7 +4,7 @@ import Divider from 'material-ui/Divider';
import Button from 'material-ui/Button';
import {withStyles} from 'material-ui/styles';
import Hidden from 'material-ui/Hidden';
import { Link } from 'react-router';
import BackButton from 'ui/common/buttons/BackButton';
const styles = (theme) => ({
root: {
......@@ -29,6 +29,9 @@ const styles = (theme) => ({
headerButton: {
marginLeft: '20px',
},
backButton: {
display: 'inline-block',
},
btnGreen: theme.buttons.green,
btnDefault: theme.buttons.default,
flexGrow: {
......@@ -62,9 +65,9 @@ const TopSection = ({classes}) => (
<Button raised className={ `${ classes.headerButton } ${ classes.btnGreen }` }>
SEE GUIDED TOUR
</Button>
<Link to="/dashboard"><Button raised className={ `${ classes.headerButton } ${ classes.btnDefault }` }>
BACK TO DASHBOARD
</Button></Link>
<div className={ `${ classes.headerButton } ${ classes.backButton }` }>
<BackButton defaultTarget="/dashboard" defaultBackText="BACK TO DASHBOARD" preferDefaultTarget="true" />
</div>
</div>
</Hidden>
<Hidden implementation="css" mdUp>
......
......@@ -106,7 +106,7 @@ class DatasetStepper extends React.Component<IDatasetProps, any> {
const {dataset, deleteDataset, navigateTo} = this.props;
log('Removing dataset', dataset);
confirm(<span>Delete <b>{ dataset.title }</b>?</span>, {
description: `Deleting the dartaset will remove all related data.`,
description: `Deleting the dataset will remove all related data.`,
confirmLabel: 'Delete',
abortLabel: 'Cancel',
}).then(() => {
......
......@@ -21,6 +21,7 @@ import { Table, TableRow, TableCell } from 'ui/common/tables';
import { Properties, PropertiesItem } from 'ui/catalog/Properties';
import VocabularyCard from 'ui/pages/vocabulary/c/VocabularyCard';
import DescriptorScale from 'ui/catalog/descriptor/DescriptorScale';
import BackButton from 'ui/common/buttons/BackButton';
import Grid from 'material-ui/Grid';
import Card, { CardHeader, CardContent, CardActions } from 'ui/common/Card';
......@@ -103,7 +104,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
// <PropertiesItem title="Publisher:">{ descriptor.publisher || <i>Not specified</i> }</PropertiesItem>
return (
<div>
<ContentHeaderWithButton title="Descriptor details" buttonName="BACK" buttonUrl="/descriptors" />
<ContentHeaderWithButton title="Descriptor details" buttons={ <BackButton defaultTarget="/descriptors" /> } />
{ stillLoading ? <Loading /> :
<Grid container spacing={ 24 } className="p-20 back-gray">
<Grid item xs={ 12 }>
......
......@@ -17,6 +17,7 @@ import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import { PartnerLink, DescriptorListLink, CropLink } from 'ui/catalog/Links';
import { Properties, PropertiesItem } from 'ui/catalog/Properties';
import BackButton from 'ui/common/buttons/BackButton';
import Grid from 'material-ui/Grid';
import Card, {CardHeader, CardContent, CardActions } from 'ui/common/Card';
......@@ -130,7 +131,7 @@ class DescriptorListPage extends React.Component<IDescriptorListPageProps, any>
return (
<div>
<ContentHeaderWithButton title="Descriptor list details" buttonName="BACK" buttonUrl="/descriptorlists" />
<ContentHeaderWithButton title="Descriptor list details" buttons={ <BackButton defaultTarget="/descriptorlists" /> } />
{ stillLoading ? <Loading className={ classes.contentContainer } /> :
<span>
<Grid container className={ classes.contentContainer }>
......
......@@ -18,6 +18,7 @@ import {DescriptorList, Descriptor, IDescriptorFilter} from 'model/descriptor.mo
import DescriptorListForm from './c/DescriptorListForm';
import DescriptorPicker from 'ui/catalog/descriptor/DescriptorPicker';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import BackButton from 'ui/common/buttons/BackButton';
import Grid from 'material-ui/Grid';
import Paper from 'material-ui/Paper';
......@@ -154,7 +155,7 @@ class DescriptorListEditPage extends React.Component<IDescriptorListEditPageProp
return (
<div>
<ContentHeaderWithButton title="Edit descriptor list information" buttonName="BACK TO DASHBOARD" buttonUrl="/dashboard/descriptorlists" />
<ContentHeaderWithButton title="Edit descriptor list information" buttons={ <BackButton defaultTarget="/dashboard/descriptorlists" defaultBackText="BACK TO DASHBOARD" /> }/>
<Grid container className="back-gray p-20">
<Grid item xs={ 12 } className="mb-20">
......
......@@ -15,6 +15,7 @@ import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import {Table, TableRow, TableCell} from 'ui/common/tables';
import {VocabularyLink} from 'ui/catalog/Links';
import PaginationComponent from 'ui/common/pagination';
import BackButton from 'ui/common/buttons/BackButton';
import Grid from 'material-ui/Grid';
import Card, {CardHeader, CardContent, CardActions} from 'ui/common/Card';
......@@ -101,7 +102,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
return (
<div>
<ContentHeaderWithButton title="Vocabulary details" buttonName="BACK" buttonUrl="/vocabulary"/>
<ContentHeaderWithButton title="Vocabulary details" buttons={ <BackButton defaultTarget="/vocabulary" /> } />
{ stillLoading ? <Loading/> :
<Grid container className={ classes.contentContainer }>
<Grid item xs={ 12 }>
......
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