Feature(toasts): make toast short lived by default

This commit is contained in:
Berkeley Martinez
2016-07-08 12:06:02 -07:00
parent 979eb4f7d1
commit c204e8cdea
5 changed files with 17 additions and 37 deletions

View File

@ -5,20 +5,6 @@ import types from './types';
// updateTitle(title: String) => Action
export const updateTitle = createAction(types.updateTitle);
let id = 0;
// makeToast({ type?: String, message: String, title: String }) => Action
export const makeToast = createAction(
types.makeToast,
toast => {
id += 1;
return {
...toast,
id,
type: toast.type || 'info'
};
}
);
// fetchUser() => Action
// used in combination with fetch-user-saga
export const fetchUser = createAction(types.fetchUser);

View File

@ -18,7 +18,8 @@ export default class ToolPanel extends PureComponent {
makeHint() {
this.props.makeToast({
message: this.props.hint
message: this.props.hint,
timeout: 4000
});
this.props.updateHint();
}
@ -27,7 +28,8 @@ export default class ToolPanel extends PureComponent {
this.props.makeToast({
message: 'This will restore your code editor to its original state.',
action: 'clear my code',
actionCreator: 'resetChallenge'
actionCreator: 'resetChallenge',
timeout: 4000
});
}

View File

@ -55,7 +55,10 @@ export default function answerSaga(action$, getState) {
if (answer !== finalAnswer) {
let infoAction;
if (info) {
infoAction = makeToast({ message: info });
infoAction = makeToast({
message: info,
timeout: 5000
});
}
return Observable

View File

@ -9,28 +9,18 @@ import {
import { makeToast } from '../../../toasts/redux/actions';
import { challengeSelector } from './selectors';
import { backEndProject } from '../../../utils/challengeTypes';
import { randomCompliment } from '../../../utils/get-words';
import { backEndProject } from '../../../utils/challengeTypes';
import { postJSON$ } from '../../../../utils/ajax-stream';
function postChallenge(url, body, username) {
const saveChallenge$ = postJSON$(url, body)
.retry(3)
.flatMap(({ alreadyCompleted, points }) => {
return Observable.of(
makeToast({
message: randomCompliment() +
(alreadyCompleted ? '!' : '! First time Completed!')
}),
updateUserPoints(username, points)
);
.map(({ points }) => {
return updateUserPoints(username, points);
})
.catch(createErrorObservable);
const challengeCompleted$ = Observable.of(
moveToNextChallenge(),
username ? makeToast({ message: ' Saving...' }) : null
);
const challengeCompleted$ = Observable.of(moveToNextChallenge());
return Observable.merge(saveChallenge$, challengeCompleted$);
}
@ -40,9 +30,10 @@ function submitModern(type, state) {
if (type === types.checkChallenge) {
return Observable.of(
makeToast({
message: 'Go to my next challenge.',
message: `${randomCompliment()} Go to next challenge.`,
action: 'Submit',
actionCreator: 'submitChallenge'
actionCreator: 'submitChallenge',
timeout: 10000
})
);
}
@ -61,9 +52,7 @@ function submitModern(type, state) {
return postChallenge('/modern-challenge-completed', body, user);
}
}
return Observable.just(makeToast({
message: 'Not all tests are passing, yet.'
}));
return Observable.just(makeToast({ message: 'Not quite there, yet.' }));
}
function submitProject(type, state, { solution, githubLink }) {

View File

@ -9,7 +9,7 @@ export const makeToast = createAction(
// assign current value of key to new toast
// and then increment key value
key: key++,
dismissAfter: timeout || 10000,
dismissAfter: timeout || 2000,
position: rest.position === 'left' ? 'left' : 'right'
})
);