Merge pull request #5960 from FreeCodeCamp/feature/hikes
Add toasts to react app
This commit is contained in:
Logan Tegman
@ -227,7 +227,7 @@
|
||||
"react/jsx-boolean-value": [1, "always"],
|
||||
"jsx-quotes": [1, "prefer-single"],
|
||||
"react/jsx-no-undef": 1,
|
||||
"react/jsx-sort-props": 1,
|
||||
"react/jsx-sort-props": [1, { "ignoreCase": true }],
|
||||
"react/jsx-uses-react": 1,
|
||||
"react/jsx-uses-vars": 1,
|
||||
"react/no-did-mount-set-state": 2,
|
||||
|
||||
@ -35,7 +35,7 @@ $(document).ready(function() {
|
||||
.flatMap(code => {
|
||||
return common.detectUnsafeCode$(code)
|
||||
.map(() => {
|
||||
const combinedCode = common.head + '\n;;' + code + '\n;;' + common.tail;
|
||||
const combinedCode = common.head + code + common.tail;
|
||||
|
||||
return addLoopProtect(combinedCode);
|
||||
})
|
||||
|
||||
@ -18,7 +18,7 @@ window.common = (function(global) {
|
||||
const originalCode = code;
|
||||
const head = common.arrayToNewLineString(common.head);
|
||||
const tail = common.arrayToNewLineString(common.tail);
|
||||
const combinedCode = head + '\n;;' + code + '\n;;' + tail;
|
||||
const combinedCode = head + code + tail;
|
||||
|
||||
ga('send', 'event', 'Challenge', 'ran-code', common.challengeName);
|
||||
|
||||
|
||||
9
client/err-saga.js
Normal file
9
client/err-saga.js
Normal file
@ -0,0 +1,9 @@
|
||||
export default function toastSaga(err$, toast) {
|
||||
err$
|
||||
.doOnNext(() => toast({
|
||||
type: 'error',
|
||||
title: 'Oops, something went wrong',
|
||||
message: `Something went wrong, please try again later`
|
||||
}))
|
||||
.subscribe(err => console.error(err));
|
||||
}
|
||||
@ -20,7 +20,7 @@ const emptyLocation = {
|
||||
|
||||
let prevKey;
|
||||
let isSyncing = false;
|
||||
export default function synchroniseHistory(
|
||||
export default function historySaga(
|
||||
history,
|
||||
updateLocation,
|
||||
goTo,
|
||||
@ -35,7 +35,7 @@ export default function synchroniseHistory(
|
||||
}
|
||||
|
||||
// store location has changed, update history
|
||||
if (location.key !== prevKey) {
|
||||
if (!location.key || location.key !== prevKey) {
|
||||
isSyncing = true;
|
||||
history.transitionTo({ ...emptyLocation, ...location });
|
||||
isSyncing = false;
|
||||
@ -9,7 +9,8 @@ import { hydrate } from 'thundercats';
|
||||
import { render$ } from 'thundercats-react';
|
||||
|
||||
import { app$ } from '../common/app';
|
||||
import synchroniseHistory from './synchronise-history';
|
||||
import historySaga from './history-saga';
|
||||
import errSaga from './err-saga';
|
||||
|
||||
const debug = debugFactory('fcc:client');
|
||||
const DOMContianer = document.getElementById('fcc');
|
||||
@ -38,34 +39,41 @@ app$({ history, location: appLocation })
|
||||
({ nextLocation, props }, appCat) => ({ nextLocation, props, appCat })
|
||||
)
|
||||
.doOnNext(({ appCat }) => {
|
||||
const { updateLocation, goTo, goBack } = appCat.getActions('appActions');
|
||||
const appStore$ = appCat.getStore('appStore');
|
||||
|
||||
const {
|
||||
toast,
|
||||
updateLocation,
|
||||
goTo,
|
||||
goBack
|
||||
} = appCat.getActions('appActions');
|
||||
|
||||
|
||||
const routerState$ = appStore$
|
||||
.map(({ location }) => location)
|
||||
.distinctUntilChanged(
|
||||
location => location && location.key ? location.key : location
|
||||
);
|
||||
.filter(location => !!location);
|
||||
|
||||
// set page title
|
||||
appStore$
|
||||
.pluck('title')
|
||||
.distinctUntilChanged()
|
||||
.doOnNext(title => document.title = title)
|
||||
.subscribe(() => {});
|
||||
|
||||
appStore$
|
||||
.pluck('err')
|
||||
.filter(err => !!err)
|
||||
.distinctUntilChanged()
|
||||
.subscribe(err => console.error(err));
|
||||
|
||||
synchroniseHistory(
|
||||
historySaga(
|
||||
history,
|
||||
updateLocation,
|
||||
goTo,
|
||||
goBack,
|
||||
routerState$
|
||||
);
|
||||
|
||||
const err$ = appStore$
|
||||
.pluck('err')
|
||||
.filter(err => !!err)
|
||||
.distinctUntilChanged();
|
||||
|
||||
errSaga(err$, toast);
|
||||
})
|
||||
// allow store subscribe to subscribe to actions
|
||||
.delay(10)
|
||||
|
||||
@ -1138,3 +1138,4 @@ code {
|
||||
@import "chat.less";
|
||||
@import "jobs.less";
|
||||
@import "challenge.less";
|
||||
@import "toastr.less";
|
||||
|
||||
269
client/less/toastr.less
Normal file
269
client/less/toastr.less
Normal file
@ -0,0 +1,269 @@
|
||||
// sourced from https://github.com/CodeSeven/toastr
|
||||
// MIT license
|
||||
// Mix-ins
|
||||
.borderRadius(@radius) {
|
||||
-moz-border-radius: @radius;
|
||||
-webkit-border-radius: @radius;
|
||||
border-radius: @radius;
|
||||
}
|
||||
|
||||
.boxShadow(@boxShadow) {
|
||||
-moz-box-shadow: @boxShadow;
|
||||
-webkit-box-shadow: @boxShadow;
|
||||
box-shadow: @boxShadow;
|
||||
}
|
||||
|
||||
.opacity(@opacity) {
|
||||
@opacityPercent: @opacity * 100;
|
||||
opacity: @opacity;
|
||||
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{opacityPercent})";
|
||||
filter: ~"alpha(opacity=@{opacityPercent})";
|
||||
}
|
||||
|
||||
.wordWrap(@wordWrap: break-word) {
|
||||
-ms-word-wrap: @wordWrap;
|
||||
word-wrap: @wordWrap;
|
||||
}
|
||||
|
||||
// Variables
|
||||
@black: #000000;
|
||||
@grey: #999999;
|
||||
@light-grey: #CCCCCC;
|
||||
@white: #FFFFFF;
|
||||
@near-black: #030303;
|
||||
@green: #51A351;
|
||||
@red: #BD362F;
|
||||
@blue: #2F96B4;
|
||||
@orange: #F89406;
|
||||
@default-container-opacity: .8;
|
||||
|
||||
// Styles
|
||||
.toast-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
.wordWrap();
|
||||
|
||||
a,
|
||||
label {
|
||||
color: @white;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: @light-grey;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-close-button {
|
||||
position: relative;
|
||||
right: -0.3em;
|
||||
top: -0.3em;
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: @white;
|
||||
-webkit-text-shadow: 0 1px 0 rgba(255,255,255,1);
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
||||
.opacity(0.8);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
.opacity(0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/*Additional properties for button version
|
||||
iOS requires the button element instead of an anchor tag.
|
||||
If you want the anchor version, it requires `href="#"`.*/
|
||||
button.toast-close-button {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
//#endregion
|
||||
|
||||
.toast-top-center {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toast-bottom-center {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toast-top-full-width {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toast-bottom-full-width {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toast-top-left {
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.toast-top-right {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.toast-bottom-right {
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
}
|
||||
|
||||
.toast-bottom-left {
|
||||
bottom: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
#toast-container {
|
||||
position: fixed;
|
||||
z-index: 999999;
|
||||
// The container should not be clickable.
|
||||
pointer-events: none;
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
// The toast itself should be clickable.
|
||||
pointer-events: auto;
|
||||
overflow: hidden;
|
||||
margin: 0 0 6px;
|
||||
padding: 15px 15px 15px 50px;
|
||||
width: 300px;
|
||||
.borderRadius(3px 3px 3px 3px);
|
||||
background-position: 15px center;
|
||||
background-repeat: no-repeat;
|
||||
.boxShadow(0 0 12px @grey);
|
||||
color: @white;
|
||||
.opacity(@default-container-opacity);
|
||||
}
|
||||
|
||||
> :hover {
|
||||
.boxShadow(0 0 12px @black);
|
||||
.opacity(1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> .toast-info {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
|
||||
}
|
||||
|
||||
> .toast-error {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
|
||||
}
|
||||
|
||||
> .toast-success {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
|
||||
}
|
||||
|
||||
> .toast-warning {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
|
||||
}
|
||||
|
||||
/*overrides*/
|
||||
&.toast-top-center > div,
|
||||
&.toast-bottom-center > div {
|
||||
width: 300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.toast-top-full-width > div,
|
||||
&.toast-bottom-full-width > div {
|
||||
width: 96%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.toast {
|
||||
background-color: @near-black;
|
||||
}
|
||||
|
||||
.toast-success {
|
||||
background-color: @green;
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
background-color: @red;
|
||||
}
|
||||
|
||||
.toast-info {
|
||||
background-color: @blue;
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
background-color: @orange;
|
||||
}
|
||||
|
||||
.toast-progress {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 4px;
|
||||
background-color: @black;
|
||||
.opacity(0.4);
|
||||
}
|
||||
|
||||
/*Responsive Design*/
|
||||
|
||||
@media all and (max-width: 240px) {
|
||||
#toast-container {
|
||||
|
||||
> div {
|
||||
padding: 8px 8px 8px 50px;
|
||||
width: 11em;
|
||||
}
|
||||
|
||||
& .toast-close-button {
|
||||
right: -0.2em;
|
||||
top: -0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 241px) and (max-width: 480px) {
|
||||
#toast-container {
|
||||
> div {
|
||||
padding: 8px 8px 8px 50px;
|
||||
width: 18em;
|
||||
}
|
||||
|
||||
& .toast-close-button {
|
||||
right: -0.2em;
|
||||
top: -0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 481px) and (max-width: 768px) {
|
||||
#toast-container {
|
||||
> div {
|
||||
padding: 15px 15px 15px 50px;
|
||||
width: 25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,16 +1,33 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { contain } from 'thundercats-react';
|
||||
import { Row } from 'react-bootstrap';
|
||||
import { ToastMessage, ToastContainer } from 'react-toastr';
|
||||
import { contain } from 'thundercats-react';
|
||||
|
||||
import { Nav } from './components/Nav';
|
||||
|
||||
const toastMessageFactory = React.createFactory(ToastMessage.animation);
|
||||
|
||||
export default contain(
|
||||
{
|
||||
actions: ['appActions'],
|
||||
store: 'appStore',
|
||||
fetchAction: 'appActions.getUser',
|
||||
isPrimed({ username }) {
|
||||
return !!username;
|
||||
},
|
||||
map({
|
||||
username,
|
||||
points,
|
||||
picture,
|
||||
toast
|
||||
}) {
|
||||
return {
|
||||
username,
|
||||
points,
|
||||
picture,
|
||||
toast
|
||||
};
|
||||
},
|
||||
getPayload(props) {
|
||||
return {
|
||||
isPrimed: !!props.username
|
||||
@ -21,11 +38,26 @@ export default contain(
|
||||
displayName: 'FreeCodeCamp',
|
||||
|
||||
propTypes: {
|
||||
appActions: PropTypes.object,
|
||||
children: PropTypes.node,
|
||||
username: PropTypes.string,
|
||||
points: PropTypes.number,
|
||||
picture: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
username: PropTypes.string
|
||||
toast: PropTypes.object
|
||||
},
|
||||
|
||||
componentWillReceiveProps({ toast: nextToast = {} }) {
|
||||
const { toast = {} } = this.props;
|
||||
if (toast.id !== nextToast.id) {
|
||||
this.refs.toaster[nextToast.type || 'success'](
|
||||
nextToast.message,
|
||||
nextToast.title,
|
||||
{
|
||||
closeButton: true,
|
||||
timeOut: 10000
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
render() {
|
||||
@ -38,6 +70,10 @@ export default contain(
|
||||
<Row>
|
||||
{ this.props.children }
|
||||
</Row>
|
||||
<ToastContainer
|
||||
className='toast-bottom-right'
|
||||
ref='toaster'
|
||||
toastMessageFactory={ toastMessageFactory } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -33,8 +33,28 @@ export default Actions({
|
||||
},
|
||||
|
||||
// routing
|
||||
// goTo(path: String) => path
|
||||
goTo: null,
|
||||
|
||||
// goBack(arg?) => arg?
|
||||
goBack: null,
|
||||
|
||||
// toast(args: { type?: String, message: String, title: String }) => args
|
||||
toast(args) {
|
||||
return {
|
||||
transform(state) {
|
||||
return {
|
||||
...state,
|
||||
toast: {
|
||||
...args,
|
||||
id: state.toast && state.toast.id ? state.toast.id : 1
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// updateLocation(location: { pathname: String }) => location
|
||||
updateLocation(location) {
|
||||
return {
|
||||
transform(state) {
|
||||
|
||||
@ -28,7 +28,8 @@ export default Store({
|
||||
const {
|
||||
updateLocation,
|
||||
getUser,
|
||||
setTitle
|
||||
setTitle,
|
||||
toast
|
||||
} = cat.getActions('appActions');
|
||||
|
||||
register(
|
||||
@ -39,7 +40,8 @@ export default Store({
|
||||
setTitle
|
||||
)
|
||||
),
|
||||
updateLocation
|
||||
updateLocation,
|
||||
toast
|
||||
)
|
||||
);
|
||||
|
||||
@ -47,7 +49,6 @@ export default Store({
|
||||
const {
|
||||
toggleQuestions,
|
||||
fetchHikes,
|
||||
hideInfo,
|
||||
resetHike,
|
||||
grabQuestion,
|
||||
releaseQuestion,
|
||||
@ -59,7 +60,6 @@ export default Store({
|
||||
fromMany(
|
||||
toggleQuestions,
|
||||
fetchHikes,
|
||||
hideInfo,
|
||||
resetHike,
|
||||
grabQuestion,
|
||||
releaseQuestion,
|
||||
|
||||
@ -52,7 +52,11 @@ export default contain(
|
||||
|
||||
renderTranscript(transcript, dashedName) {
|
||||
return transcript.map((line, index) => (
|
||||
<p key={ dashedName + index }>{ line }</p>
|
||||
<p
|
||||
className='lead text-left'
|
||||
key={ dashedName + index }>
|
||||
{ line }
|
||||
</p>
|
||||
));
|
||||
},
|
||||
|
||||
|
||||
@ -1,15 +1,9 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { spring, Motion } from 'react-motion';
|
||||
import { contain } from 'thundercats-react';
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
Modal,
|
||||
Panel,
|
||||
Row
|
||||
} from 'react-bootstrap';
|
||||
import { Button, Col, Panel, Row } from 'react-bootstrap';
|
||||
|
||||
const ANSWER_THRESHOLD = 200;
|
||||
const answerThreshold = 100;
|
||||
|
||||
export default contain(
|
||||
{
|
||||
@ -23,7 +17,6 @@ export default contain(
|
||||
isCorrect = false,
|
||||
delta = [0, 0],
|
||||
isPressed = false,
|
||||
showInfo = false,
|
||||
shake = false
|
||||
} = hikesApp;
|
||||
return {
|
||||
@ -33,9 +26,8 @@ export default contain(
|
||||
isCorrect,
|
||||
delta,
|
||||
isPressed,
|
||||
showInfo,
|
||||
shake,
|
||||
username
|
||||
isSignedIn: !!username
|
||||
};
|
||||
}
|
||||
},
|
||||
@ -49,58 +41,48 @@ export default contain(
|
||||
isCorrect: PropTypes.bool,
|
||||
delta: PropTypes.array,
|
||||
isPressed: PropTypes.bool,
|
||||
showInfo: PropTypes.bool,
|
||||
shake: PropTypes.bool,
|
||||
username: PropTypes.string,
|
||||
isSignedIn: PropTypes.bool,
|
||||
hikesActions: PropTypes.object
|
||||
},
|
||||
|
||||
handleMouseDown({ pageX, pageY, touches }) {
|
||||
if (touches) {
|
||||
({ pageX, pageY } = touches[0]);
|
||||
}
|
||||
const { mouse: [pressX, pressY], hikesActions } = this.props;
|
||||
hikesActions.grabQuestion({ pressX, pressY, pageX, pageY });
|
||||
},
|
||||
|
||||
handleMouseUp() {
|
||||
handleMouseUp(e, answer, info) {
|
||||
e.stopPropagation();
|
||||
if (!this.props.isPressed) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const {
|
||||
hike,
|
||||
currentQuestion,
|
||||
isSignedIn,
|
||||
delta
|
||||
} = this.props;
|
||||
|
||||
this.props.hikesActions.releaseQuestion();
|
||||
this.props.hikesActions.answer({
|
||||
e,
|
||||
answer,
|
||||
hike,
|
||||
delta,
|
||||
currentQuestion,
|
||||
isSignedIn,
|
||||
info,
|
||||
threshold: answerThreshold
|
||||
});
|
||||
},
|
||||
|
||||
handleMouseMove(answer) {
|
||||
handleMouseMove(e) {
|
||||
if (!this.props.isPressed) {
|
||||
return () => {};
|
||||
return null;
|
||||
}
|
||||
const { delta, hikesActions } = this.props;
|
||||
|
||||
return (e) => {
|
||||
let { pageX, pageY, touches } = e;
|
||||
|
||||
if (touches) {
|
||||
e.preventDefault();
|
||||
// these re-assigns the values of pageX, pageY from touches
|
||||
({ pageX, pageY } = touches[0]);
|
||||
}
|
||||
|
||||
const { delta: [dx, dy], hikesActions } = this.props;
|
||||
const mouse = [pageX - dx, pageY - dy];
|
||||
|
||||
if (mouse[0] >= ANSWER_THRESHOLD) {
|
||||
return this.onAnswer(answer, true)();
|
||||
}
|
||||
|
||||
if (mouse[0] <= -ANSWER_THRESHOLD) {
|
||||
return this.onAnswer(answer, false)();
|
||||
}
|
||||
|
||||
return hikesActions.moveQuestion(mouse);
|
||||
};
|
||||
hikesActions.moveQuestion({ e, delta });
|
||||
},
|
||||
|
||||
onAnswer(answer, userAnswer) {
|
||||
const { hikesActions } = this.props;
|
||||
onAnswer(answer, userAnswer, info) {
|
||||
const { isSignedIn, hike, currentQuestion, hikesActions } = this.props;
|
||||
return (e) => {
|
||||
if (e && e.preventDefault) {
|
||||
e.preventDefault();
|
||||
@ -109,47 +91,17 @@ export default contain(
|
||||
return hikesActions.answer({
|
||||
answer,
|
||||
userAnswer,
|
||||
props: this.props
|
||||
currentQuestion,
|
||||
hike,
|
||||
info,
|
||||
isSignedIn
|
||||
});
|
||||
};
|
||||
},
|
||||
|
||||
routerWillLeave(nextState, router, cb) {
|
||||
// TODO(berks): do animated transitions here stuff here
|
||||
this.setState({
|
||||
showInfo: false,
|
||||
isCorrect: false,
|
||||
mouse: [0, 0]
|
||||
}, cb);
|
||||
},
|
||||
|
||||
renderInfo(showInfo, info, hideInfo) {
|
||||
if (!info) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<Modal
|
||||
backdrop={ true }
|
||||
onHide={ hideInfo }
|
||||
show={ showInfo }>
|
||||
<Modal.Body>
|
||||
<h3>
|
||||
{ info }
|
||||
</h3>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button
|
||||
block={ true }
|
||||
bsSize='large'
|
||||
onClick={ hideInfo }>
|
||||
hide
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
},
|
||||
|
||||
renderQuestion(number, question, answer, shake) {
|
||||
renderQuestion(number, question, answer, shake, info) {
|
||||
const { hikesActions } = this.props;
|
||||
const mouseUp = e => this.handleMouseUp(e, answer, info);
|
||||
return ({ x }) => {
|
||||
const style = {
|
||||
WebkitTransform: `translate3d(${ x }px, 0, 0)`,
|
||||
@ -160,13 +112,13 @@ export default contain(
|
||||
<Panel
|
||||
className={ shake ? 'animated swing shake' : '' }
|
||||
header={ title }
|
||||
onMouseDown={ this.handleMouseDown }
|
||||
onMouseLeave={ this.handleMouseUp }
|
||||
onMouseMove={ this.handleMouseMove(answer) }
|
||||
onMouseUp={ this.handleMouseUp }
|
||||
onTouchEnd={ this.handleMouseUp }
|
||||
onTouchMove={ this.handleMouseMove(answer) }
|
||||
onTouchStart={ this.handleMouseDown }
|
||||
onMouseDown={ hikesActions.grabQuestion }
|
||||
onMouseLeave={ mouseUp }
|
||||
onMouseMove={ this.handleMouseMove }
|
||||
onMouseUp={ mouseUp }
|
||||
onTouchEnd={ mouseUp }
|
||||
onTouchMove={ this.handleMouseMove }
|
||||
onTouchStart={ hikesActions.grabQuestion }
|
||||
style={ style }>
|
||||
<p>{ question }</p>
|
||||
</Panel>
|
||||
@ -175,37 +127,42 @@ export default contain(
|
||||
},
|
||||
|
||||
render() {
|
||||
const { showInfo, shake } = this.props;
|
||||
const {
|
||||
hike: { tests = [] } = {},
|
||||
mouse: [x],
|
||||
currentQuestion,
|
||||
hikesActions
|
||||
shake
|
||||
} = this.props;
|
||||
|
||||
const [ question, answer, info ] = tests[currentQuestion - 1] || [];
|
||||
const questionElement = this.renderQuestion(
|
||||
currentQuestion,
|
||||
question,
|
||||
answer,
|
||||
shake,
|
||||
info
|
||||
);
|
||||
|
||||
return (
|
||||
<Col
|
||||
onMouseUp={ this.handleMouseUp }
|
||||
onMouseUp={ e => this.handleMouseUp(e, answer, info) }
|
||||
xs={ 8 }
|
||||
xsOffset={ 2 }>
|
||||
<Row>
|
||||
<Motion style={{ x: spring(x, [120, 10]) }}>
|
||||
{ this.renderQuestion(currentQuestion, question, answer, shake) }
|
||||
{ questionElement }
|
||||
</Motion>
|
||||
{ this.renderInfo(showInfo, info, hikesActions.hideInfo) }
|
||||
<Panel>
|
||||
<Button
|
||||
bsSize='large'
|
||||
className='pull-left'
|
||||
onClick={ this.onAnswer(answer, false) }>
|
||||
onClick={ this.onAnswer(answer, false, info) }>
|
||||
false
|
||||
</Button>
|
||||
<Button
|
||||
bsSize='large'
|
||||
className='pull-right'
|
||||
onClick={ this.onAnswer(answer, true) }>
|
||||
onClick={ this.onAnswer(answer, true, info) }>
|
||||
true
|
||||
</Button>
|
||||
</Panel>
|
||||
|
||||
@ -4,6 +4,7 @@ import { Actions } from 'thundercats';
|
||||
import debugFactory from 'debug';
|
||||
|
||||
const debug = debugFactory('freecc:hikes:actions');
|
||||
const noOp = { transform: () => {} };
|
||||
|
||||
function getCurrentHike(hikes = [{}], dashedName, currentHike) {
|
||||
if (!dashedName) {
|
||||
@ -35,18 +36,18 @@ function findNextHike(hikes, id) {
|
||||
return hikes[currentIndex + 1] || hikes[0];
|
||||
}
|
||||
|
||||
function releaseQuestion(state) {
|
||||
const oldHikesApp = state.hikesApp;
|
||||
const hikesApp = {
|
||||
...oldHikesApp,
|
||||
isPressed: false,
|
||||
delta: [0, 0],
|
||||
mouse: oldHikesApp.isCorrect ?
|
||||
oldHikesApp.mouse :
|
||||
[0, 0]
|
||||
};
|
||||
|
||||
return { ...state, hikesApp };
|
||||
function getMouse(e, [dx, dy]) {
|
||||
let { pageX, pageY, touches, changedTouches } = e;
|
||||
|
||||
// touches can be empty on touchend
|
||||
if (touches || changedTouches) {
|
||||
e.preventDefault();
|
||||
// these re-assigns the values of pageX, pageY from touches
|
||||
({ pageX, pageY } = touches[0] || changedTouches[0]);
|
||||
}
|
||||
|
||||
return [pageX - dx, pageY - dy];
|
||||
}
|
||||
|
||||
export default Actions({
|
||||
@ -98,73 +99,130 @@ export default Actions({
|
||||
};
|
||||
},
|
||||
|
||||
hideInfo() {
|
||||
return {
|
||||
transform(state) {
|
||||
const hikesApp = { ...state.hikesApp, showInfo: false };
|
||||
return { ...state, hikesApp };
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
grabQuestion({ pressX, pressY, pageX, pageY }) {
|
||||
const dx = pageX - pressX;
|
||||
const dy = pageY - pressY;
|
||||
|
||||
const delta = [dx, dy];
|
||||
const mouse = [pageX - dx, pageY - dy];
|
||||
grabQuestion(e) {
|
||||
let { pageX, pageY, touches } = e;
|
||||
if (touches) {
|
||||
e.preventDefault();
|
||||
// these re-assigns the values of pageX, pageY from touches
|
||||
({ pageX, pageY } = touches[0]);
|
||||
}
|
||||
const delta = [pageX, pageY];
|
||||
const mouse = [0, 0];
|
||||
|
||||
return {
|
||||
transform(state) {
|
||||
const hikesApp = { ...state.hikesApp, isPressed: true, delta, mouse };
|
||||
return { ...state, hikesApp };
|
||||
return {
|
||||
...state,
|
||||
hikesApp: {
|
||||
...state.hikesApp,
|
||||
isPressed: true,
|
||||
delta,
|
||||
mouse
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
releaseQuestion() {
|
||||
return { transform: releaseQuestion };
|
||||
},
|
||||
|
||||
moveQuestion(mouse) {
|
||||
return {
|
||||
transform(state) {
|
||||
const hikesApp = { ...state.hikesApp, mouse };
|
||||
return { ...state, hikesApp };
|
||||
return {
|
||||
...state,
|
||||
hikesApp: {
|
||||
...state.hikesApp,
|
||||
isPressed: false,
|
||||
mouse: [0, 0]
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
moveQuestion({ e, delta }) {
|
||||
const mouse = getMouse(e, delta);
|
||||
|
||||
return {
|
||||
transform(state) {
|
||||
return {
|
||||
...state,
|
||||
hikesApp: {
|
||||
...state.hikesApp,
|
||||
mouse
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
answer({
|
||||
e,
|
||||
answer,
|
||||
userAnswer,
|
||||
props: {
|
||||
hike: { id, name, tests, challengeType },
|
||||
currentQuestion,
|
||||
username
|
||||
}
|
||||
hike: { id, name, tests, challengeType },
|
||||
currentQuestion,
|
||||
isSignedIn,
|
||||
delta,
|
||||
info,
|
||||
threshold
|
||||
}) {
|
||||
if (typeof userAnswer === 'undefined') {
|
||||
const [positionX] = getMouse(e, delta);
|
||||
|
||||
// question released under threshold
|
||||
if (Math.abs(positionX) < threshold) {
|
||||
return noOp;
|
||||
}
|
||||
|
||||
if (positionX >= threshold) {
|
||||
userAnswer = true;
|
||||
}
|
||||
|
||||
if (positionX <= -threshold) {
|
||||
userAnswer = false;
|
||||
}
|
||||
}
|
||||
|
||||
// incorrect question
|
||||
if (answer !== userAnswer) {
|
||||
const startShake = {
|
||||
transform(state) {
|
||||
const hikesApp = { ...state.hikesApp, showInfo: true, shake: true };
|
||||
return { ...state, hikesApp };
|
||||
const toast = !info ?
|
||||
state.toast :
|
||||
{
|
||||
id: state.toast && state.toast.id ? state.toast.id + 1 : 1,
|
||||
title: 'Hint',
|
||||
message: info,
|
||||
type: 'info'
|
||||
};
|
||||
|
||||
return {
|
||||
...state,
|
||||
toast,
|
||||
hikesApp: {
|
||||
...state.hikesApp,
|
||||
shake: true
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const removeShake = {
|
||||
transform(state) {
|
||||
const hikesApp = { ...state.hikesApp, shake: false };
|
||||
return { ...state, hikesApp };
|
||||
return {
|
||||
...state,
|
||||
hikesApp: {
|
||||
...state.hikesApp,
|
||||
shake: false
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
return Observable
|
||||
.just(removeShake)
|
||||
.delay(500)
|
||||
.startWith({ transform: releaseQuestion }, startShake);
|
||||
.startWith(startShake);
|
||||
}
|
||||
|
||||
// move to next question
|
||||
@ -175,8 +233,7 @@ export default Actions({
|
||||
transform(state) {
|
||||
const hikesApp = {
|
||||
...state.hikesApp,
|
||||
mouse: [0, 0],
|
||||
showInfo: false
|
||||
mouse: [0, 0]
|
||||
};
|
||||
return { ...state, hikesApp };
|
||||
}
|
||||
@ -198,55 +255,88 @@ export default Actions({
|
||||
}
|
||||
|
||||
// challenge completed
|
||||
const optimisticSave = username ?
|
||||
this.post$('/completed-challenge', { id, name, challengeType }) :
|
||||
Observable.just(true);
|
||||
let update$;
|
||||
if (isSignedIn) {
|
||||
const body = { id, name, challengeType };
|
||||
update$ = this.postJSON$('/completed-challenge', body)
|
||||
// if post fails, will retry once
|
||||
.retry(3)
|
||||
.map(({ alreadyCompleted, points }) => ({
|
||||
transform(state) {
|
||||
return {
|
||||
...state,
|
||||
points,
|
||||
toast: {
|
||||
message:
|
||||
'Challenge saved.' +
|
||||
(alreadyCompleted ? '' : ' First time Completed!'),
|
||||
title: 'Saved',
|
||||
type: 'info',
|
||||
id: state.toast && state.toast.id ? state.toast.id + 1 : 1
|
||||
}
|
||||
};
|
||||
}
|
||||
}))
|
||||
.catch((errObj => {
|
||||
const err = new Error(errObj.message);
|
||||
err.stack = errObj.stack;
|
||||
return {
|
||||
transform(state) { return { ...state, err }; }
|
||||
};
|
||||
}));
|
||||
} else {
|
||||
update$ = Observable.just({ transform: (() => {}) });
|
||||
}
|
||||
|
||||
const correctAnswer = {
|
||||
const challengeCompleted$ = Observable.just({
|
||||
transform(state) {
|
||||
const hikesApp = {
|
||||
...state.hikesApp,
|
||||
isCorrect: true,
|
||||
isPressed: false,
|
||||
delta: [0, 0],
|
||||
mouse: [ userAnswer ? 1000 : -1000, 0]
|
||||
};
|
||||
const { hikes, currentHike: { id } } = state.hikesApp;
|
||||
const currentHike = findNextHike(hikes, id);
|
||||
|
||||
return {
|
||||
...state,
|
||||
hikesApp
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
return Observable.just({
|
||||
transform(state) {
|
||||
const { hikes, currentHike: { id } } = state.hikesApp;
|
||||
const currentHike = findNextHike(hikes, id);
|
||||
|
||||
// go to next route
|
||||
state.location = {
|
||||
action: 'PUSH',
|
||||
pathname: currentHike && currentHike.dashedName ?
|
||||
`/hikes/${ currentHike.dashedName }` :
|
||||
'/hikes'
|
||||
};
|
||||
|
||||
const hikesApp = {
|
||||
points: isSignedIn ? state.points + 1 : state.points,
|
||||
hikesApp: {
|
||||
...state.hikesApp,
|
||||
currentHike,
|
||||
showQuestions: false,
|
||||
currentQuestion: 1,
|
||||
mouse: [0, 0]
|
||||
};
|
||||
},
|
||||
toast: {
|
||||
title: 'Congratulations!',
|
||||
message: 'Hike completed.' + (isSignedIn ? ' Saving...' : ''),
|
||||
id: state.toast && state.toast.id ?
|
||||
state.toast.id + 1 :
|
||||
1,
|
||||
type: 'success'
|
||||
},
|
||||
location: {
|
||||
action: 'PUSH',
|
||||
pathname: currentHike && currentHike.dashedName ?
|
||||
`/hikes/${ currentHike.dashedName }` :
|
||||
'/hikes'
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
...state,
|
||||
points: username ? state.points + 1 : state.points,
|
||||
hikesApp
|
||||
};
|
||||
},
|
||||
optimistic: optimisticSave
|
||||
})
|
||||
const correctAnswer = {
|
||||
transform(state) {
|
||||
return {
|
||||
...state,
|
||||
hikesApp: {
|
||||
...state.hikesApp,
|
||||
isCorrect: true,
|
||||
isPressed: false,
|
||||
delta: [0, 0],
|
||||
mouse: [ userAnswer ? 1000 : -1000, 0]
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
return Observable.merge(challengeCompleted$, update$)
|
||||
.delay(300)
|
||||
.startWith(correctAnswer)
|
||||
.catch(err => Observable.just({
|
||||
@ -261,7 +351,6 @@ export default Actions({
|
||||
...state.hikesApp,
|
||||
currentQuestion: 1,
|
||||
showQuestions: false,
|
||||
showInfo: false,
|
||||
mouse: [0, 0],
|
||||
delta: [0, 0]
|
||||
}
|
||||
|
||||
@ -272,8 +272,12 @@ export function postJSON$(url, body) {
|
||||
body,
|
||||
method: 'POST',
|
||||
responseType: 'json',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
})
|
||||
.map(({ response }) => response);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -294,7 +298,12 @@ export function get$(url) {
|
||||
* @returns {Observable} The observable sequence which contains the parsed JSON
|
||||
*/
|
||||
export function getJSON$(url) {
|
||||
return ajax$({ url: url, responseType: 'json' }).map(function(x) {
|
||||
return x.response;
|
||||
});
|
||||
return ajax$({
|
||||
url: url,
|
||||
responseType: 'json',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
}).map(({ response }) => response);
|
||||
}
|
||||
|
||||
@ -54,6 +54,7 @@
|
||||
"express-session": "^1.12.1",
|
||||
"express-state": "^1.2.0",
|
||||
"express-validator": "^2.18.0",
|
||||
"fbjs": "^0.6.0",
|
||||
"fetchr": "~0.5.12",
|
||||
"forever": "~0.15.1",
|
||||
"frameguard": "~0.2.2",
|
||||
@ -109,7 +110,8 @@
|
||||
"react-motion": "~0.3.1",
|
||||
"react-router": "^1.0.0",
|
||||
"react-router-bootstrap": "https://github.com/FreeCodeCamp/react-router-bootstrap.git#freecodecamp",
|
||||
"react-vimeo": "~0.0.3",
|
||||
"react-toastr": "^2.3.0",
|
||||
"react-vimeo": "~0.1.0",
|
||||
"request": "^2.65.0",
|
||||
"rev-del": "^1.0.5",
|
||||
"rx": "^4.0.0",
|
||||
|
||||
@ -4,6 +4,7 @@ import moment from 'moment';
|
||||
import { Observable, Scheduler } from 'rx';
|
||||
import assign from 'object.assign';
|
||||
import debugFactory from 'debug';
|
||||
import accepts from 'accepts';
|
||||
|
||||
import {
|
||||
dasherize,
|
||||
@ -81,7 +82,8 @@ function updateUserProgress(user, challengeId, completedChallenge) {
|
||||
lastUpdated: completedChallenge.completedDate
|
||||
}
|
||||
);
|
||||
return user;
|
||||
|
||||
return { user, alreadyCompleted };
|
||||
}
|
||||
|
||||
|
||||
@ -373,6 +375,7 @@ module.exports = function(app) {
|
||||
}
|
||||
|
||||
function completedChallenge(req, res, next) {
|
||||
const type = accepts(req).type('html', 'json', 'text');
|
||||
|
||||
const completedDate = Math.round(+new Date());
|
||||
const {
|
||||
@ -382,7 +385,7 @@ module.exports = function(app) {
|
||||
solution
|
||||
} = req.body;
|
||||
|
||||
updateUserProgress(
|
||||
const { alreadyCompleted } = updateUserProgress(
|
||||
req.user,
|
||||
id,
|
||||
{
|
||||
@ -395,16 +398,20 @@ module.exports = function(app) {
|
||||
}
|
||||
);
|
||||
|
||||
let user = req.user;
|
||||
saveUser(req.user)
|
||||
.subscribe(
|
||||
function(user) {
|
||||
debug(
|
||||
'user save points %s',
|
||||
user && user.progressTimestamps && user.progressTimestamps.length
|
||||
);
|
||||
user = user;
|
||||
},
|
||||
next,
|
||||
function() {
|
||||
if (type === 'json') {
|
||||
return res.json({
|
||||
points: user.progressTimestamps.length,
|
||||
alreadyCompleted
|
||||
});
|
||||
}
|
||||
res.sendStatus(200);
|
||||
}
|
||||
);
|
||||
|
||||
@ -24,7 +24,8 @@ export default function csp() {
|
||||
'https://*.jsdelivr.com',
|
||||
'*.jsdelivr.com',
|
||||
'*.twimg.com',
|
||||
'https://*.twimg.com'
|
||||
'https://*.twimg.com',
|
||||
'vimeo.com'
|
||||
].concat(trusted),
|
||||
connectSrc: [
|
||||
'vimeo.com'
|
||||
|
||||
Reference in New Issue
Block a user