Skip to content

Commit

Permalink
Added React-Toastify notifications
Browse files Browse the repository at this point in the history 
All notifications used from Material-UI have been changed by Toast notifications. 

Error handling has been improved to accept only jsonld and json files that comply with ViadeSpec's specification. The rest of files, without taking into account their extension, will be ignored.
  • Loading branch information
@PabloCanalSuarez
PabloCanalSuarez committed May 6, 2020
1 parent fc9d076 commit 6b98189
Show file tree
Hide file tree
Showing 10 changed files with 143 additions and 171 deletions.
33 changes: 33 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.1",
"react-slick": "^0.25.2",
"react-toastify": "^5.5.0",
"shx": "0.3.2",
"solid": "^0.2.1",
"solid-auth-client": "^2.4.1",
Expand Down
14 changes: 14 additions & 0 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,28 @@ import Router from './components/containers/Router.js';
import "./App.css";
import { Helmet } from 'react-helmet';
import UserCache from './cache/UserCache.js';
import { ToastContainer, toast, Slide } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
UserCache.loadFriends();

return (
<div>
<Helmet>
<title>{'ViaDe'}</title>
</Helmet>
<ToastContainer
position={toast.POSITION.TOP_CENTER}
autoClose={4000}
transition={Slide}
hideProgressBar={false}
newestOnTop={true}
closeOnClick
rtl={false}
pauseOnFocusLoss
pauseOnHover
/>
<Router />
</div>
);
Expand Down
64 changes: 10 additions & 54 deletions src/components/containers/importrouteform/ImportRouteForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,20 @@
import React, { Component } from 'react';
import NavBar from '../../ui/main/NavBar';
import Footer from '../../ui/main/Footer';
import { withStyles, Typography, Paper, Grid, Button, Snackbar, IconButton } from '@material-ui/core';
import { withStyles, Typography, Paper, Grid, Button } from '@material-ui/core';
import ImportRouteCard from '../../ui/ImportRouteCard';
import { parseGpxToRoutes } from '../../../parser/ParserGpxToRoute';
import ParserJsonLdToRoute from '../../../parser/ParserJsonLdToRoute';
import RoutesCache from '../../../cache/RoutesCache';
import { uploadRoute } from '../../../handler/RouteHandler';
import CloseIcon from '@material-ui/icons/Close';
import MuiAlert from '@material-ui/lab/Alert';
import { toast } from 'react-toastify';
import { ErrorToast, SuccessToast } from '../../ui/utils/ToastContent';

export class ImportRouteForm extends Component {

constructor(props) {
super(props);
this.state = {
open: false,
message: '',
vertical: 'top',
horizontal: 'center',
severity: '', // success, error, warning, info
// --- files ---
files: this.props.location.routes,
routes: []
Expand Down Expand Up @@ -81,7 +76,10 @@ export class ImportRouteForm extends Component {
let route = await parser.parseImport(file);

if (!route) {
this.props.history.push('/404');
if(this.state.files.length === 1) {
this.props.history.push('/404');
}
toast.error(<ErrorToast text={"Some of your routes couldn't be imported."} />);
} else {
this.state.routes.push(route);
const { routes } = this.state;
Expand All @@ -98,9 +96,10 @@ export class ImportRouteForm extends Component {
});
});
if (success.includes(-1)) {
this.openNotif("There was an error uploading your routes", 'error');
toast.error(<ErrorToast text={"There was an error uploading your routes."} />);
} else {
this.openNotif("Your route was successfully saved", 'success');
toast.success(<SuccessToast text={"Your routes were successfully saved."} />);

}
await new Promise((r) => setTimeout(r, 1000));
this.props.history.push('/dashboard');
Expand All @@ -114,53 +113,14 @@ export class ImportRouteForm extends Component {
});
}

// ###########################
// Notification
// ###########################

openNotif = (text, newSeverity) => {
this.setState({
open: true,
message: text,
severity: newSeverity
});
};

closeNotif = () => {
this.setState({ open: false });
};

render() {
const { classes } = this.props;
const { routes } = this.state;

const { open, message, severity } = this.state;
const { vertical, horizontal } = this.state;

return (
<div>
<NavBar />

<Snackbar
anchorOrigin={{ vertical, horizontal }}
open={open}
action={
<React.Fragment>
<IconButton
aria-label="close"
color="inherit"
onClick={this.closeNotif}
>
<CloseIcon />
</IconButton>
</React.Fragment>
}
>
<Alert onClose={this.closeNotif} severity={severity}>
{message}
</Alert>
</Snackbar>

<Grid container className={classes.background}>
<Grid
item
Expand Down Expand Up @@ -245,8 +205,4 @@ const useStyles = (theme) => ({
},
});

function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}

export default withStyles(useStyles)(ImportRouteForm);
59 changes: 5 additions & 54 deletions src/components/containers/newrouteform/NewRouteForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ import SuccessForm from '../stepper/success/SuccessForm';
import { withStyles } from '@material-ui/styles';
import Route from '../../../entities/Route';
import { uploadRoute } from '../../../handler/RouteHandler';
import MuiAlert from '@material-ui/lab/Alert';
import CloseIcon from '@material-ui/icons/Close';
import { Snackbar, IconButton, Grid } from '@material-ui/core';
import { Grid } from '@material-ui/core';
import cache from '../../../cache/RoutesCache';
import imageSignal from '../../../assets/img/logo/signal.svg';
import Footer from '../../ui/main/Footer';
import { toast } from 'react-toastify';
import { ErrorToast, SuccessToast } from '../../ui/utils/ToastContent';

export class NewRouteForm extends Component {

Expand All @@ -27,11 +27,6 @@ export class NewRouteForm extends Component {
this.route = null;

this.state = {
open: false,
message: '',
vertical: 'top',
horizontal: 'center',
severity: '', // success, error, warning, info
// ---- route ----
activeStep: 0,
name: '',
Expand Down Expand Up @@ -79,24 +74,6 @@ export class NewRouteForm extends Component {
this.setState({ points: newPoints });
}


// ###########################
// Notification
// ###########################

openNotif = (text, newSeverity) => {
this.setState({
open: true,
message: text,
severity: newSeverity
});
};

closeNotif = () => {
this.setState({ open: false });
};


// ###########################
// Download and Upload methods
// ###########################
Expand Down Expand Up @@ -139,10 +116,10 @@ export class NewRouteForm extends Component {
checkSuccessCode(code) {
switch (code) {
case -1: // error
this.openNotif("There was an error during this operation", 'error');
toast.error(<ErrorToast text={"There was an error during this operation."} />);
break;
case 0: // success
this.openNotif("Your route was successfully saved", 'success');
toast.success(<SuccessToast text={"Your route was successfully saved."} />);
break;
default:
throw new Error('Unknown Success Code ' + code);
Expand All @@ -157,31 +134,9 @@ export class NewRouteForm extends Component {

const { classes } = this.props;

const { open, message, severity } = this.state;
const { vertical, horizontal } = this.state;

return (
<React.Fragment>
<NavBar />
<Snackbar
anchorOrigin={{ vertical, horizontal }}
open={open}
action={
<React.Fragment>
<IconButton
aria-label="close"
color="inherit"
onClick={this.closeNotif}
>
<CloseIcon />
</IconButton>
</React.Fragment>
}
>
<Alert onClose={this.closeNotif} severity={severity}>
{message}
</Alert>
</Snackbar>

{/* Route Banner & Form */}

Expand Down Expand Up @@ -351,8 +306,4 @@ const useStyles = (theme) => ({
},
});

function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}

export default withStyles(useStyles)(NewRouteForm);
51 changes: 7 additions & 44 deletions src/components/containers/stepper/mapform/MapForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,20 @@
import React, { Component } from 'react';
import EditableMap from '../../../map/EditableMap';
import { Button, Typography, Grid, Snackbar, IconButton } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/Close';
import MuiAlert from '@material-ui/lab/Alert';
import { Button, Typography, Grid } from '@material-ui/core';
import { toast } from 'react-toastify';
import { WarnToast, InfoToast } from '../../../ui/utils/ToastContent';

export class MapForm extends Component {

constructor() {
super();
this.points = React.createRef();
this.state = {
open: false,
message: "",
severity: '',
vertical: 'top',
horizontal: 'center',
};
}

next = (e) => {
e.preventDefault();
if (this.points.current.getTrackPoints() === 'undefined' || this.points.current.getTrackPoints().length === 0) {
this.openNotif("You must select at least one track point to continue.", 'warning');
toast.warn(<WarnToast text={"Please, select at least one track point to continue."} />);
return;
}
this.props.handleMapPoints(this.points.current.getTrackPoints());
Expand All @@ -33,43 +26,18 @@ export class MapForm extends Component {
this.props.handleBack();
}

openNotif = (text, newSeverity) => {
this.setState({
open: true,
message: text,
severity: newSeverity
});
openNotif = (text) => {
toast.info(<InfoToast text={text} />);
};

closeNotif = () => {
this.setState({ open: false });
};

render() {
const { open, message, severity } = this.state;
const { vertical, horizontal } = this.state;

return (
<React.Fragment>
<Snackbar
anchorOrigin={{ vertical, horizontal }}
open={open}
action={
<React.Fragment>
<IconButton
aria-label="close"
color="inherit"
onClick={this.closeNotif}
>
<CloseIcon />
</IconButton>
</React.Fragment>
}
>
<Alert onClose={this.closeNotif} severity={severity}>
{message}
</Alert>
</Snackbar>

<Typography variant="h6" gutterBottom>
Click on the map to add trackpoints to your route
Expand Down Expand Up @@ -111,9 +79,4 @@ export class MapForm extends Component {
}
}

function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}

export default MapForm;

export default MapForm;
Loading

0 comments on commit 6b98189

Please sign in to comment.