mirror of
https://github.com/vale981/Vulcan
synced 2025-03-05 09:31:43 -05:00
withMessage is functionnal, need testing
This commit is contained in:
Eric Burel
parent
e9788cbf45
commit
cbc387e7d1
4 changed files with 107 additions and 48 deletions
86
package-lock.json
generated
86
package-lock.json
generated
|
|
@ -2010,6 +2010,7 @@
|
|||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.2.tgz",
|
||||
"integrity": "sha1-g6c/L+pWmJj7c3GTyPhzyvbUXJQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"foreach": "^2.0.5",
|
||||
"object-keys": "^1.0.8"
|
||||
|
|
@ -2282,6 +2283,7 @@
|
|||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.1.1.tgz",
|
||||
"integrity": "sha512-kC8pAtU2Jk3OJ0EG8Y2813dg9Ol0TXi7UNxHzHiWs30Jo/hj7alc//G1YpKUsPP1oKl9X+Lkx+WlGJpPYA+nvw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"enzyme-adapter-utils": "^1.3.0",
|
||||
"lodash": "^4.17.4",
|
||||
|
|
@ -2296,6 +2298,7 @@
|
|||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.4.0.tgz",
|
||||
"integrity": "sha512-ajvyXQYbmCoKCX/FaraNzBgXDXJBltCd0GdXfKc0DdRPYgCLaZfS6Ts576IFt8aX2GU9ajZv2g5jfcJ+Nttejw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"object.assign": "^4.1.0",
|
||||
"prop-types": "^15.6.0"
|
||||
|
|
@ -2314,6 +2317,7 @@
|
|||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.10.0.tgz",
|
||||
"integrity": "sha512-/uh/DhdqIOSkAWifU+8nG78vlQxdLckUdI/sPgy0VhuXi2qJ7T8czBmqIYtLQVpCIFYafChnsRsB5pyb1JdmCQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"es-to-primitive": "^1.1.1",
|
||||
"function-bind": "^1.1.1",
|
||||
|
|
@ -2326,6 +2330,7 @@
|
|||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.1.1.tgz",
|
||||
"integrity": "sha1-RTVSSKiJeQNLZ5Lhm7gfK3l13Q0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-callable": "^1.1.1",
|
||||
"is-date-object": "^1.0.1",
|
||||
|
|
@ -3032,6 +3037,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"fbjs-css-vars": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.1.tgz",
|
||||
"integrity": "sha512-IM+v/C40MNZWqsLErc32e0TyIk/NhkkQZL0QmjBh6zi1eXv0/GeVKmKmueQX7nn9SXQBQbTUcB8zuexIF3/88w=="
|
||||
},
|
||||
"fclone": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/fclone/-/fclone-1.0.11.tgz",
|
||||
|
|
@ -3165,7 +3175,8 @@
|
|||
"foreach": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
|
||||
"integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k="
|
||||
"integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k=",
|
||||
"dev": true
|
||||
},
|
||||
"forever-agent": {
|
||||
"version": "0.6.1",
|
||||
|
|
@ -3227,7 +3238,8 @@
|
|||
"function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
|
||||
"dev": true
|
||||
},
|
||||
"function.prototype.name": {
|
||||
"version": "1.1.0",
|
||||
|
|
@ -3425,6 +3437,7 @@
|
|||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.1.tgz",
|
||||
"integrity": "sha1-hGFzP1OLCDfJNh45qauelwTcLyg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"function-bind": "^1.0.2"
|
||||
}
|
||||
|
|
@ -3446,7 +3459,8 @@
|
|||
"has-symbols": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
|
||||
"integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q="
|
||||
"integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=",
|
||||
"dev": true
|
||||
},
|
||||
"hawk": {
|
||||
"version": "6.0.2",
|
||||
|
|
@ -3816,12 +3830,14 @@
|
|||
"is-callable": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.3.tgz",
|
||||
"integrity": "sha1-hut1OSgF3cM69xySoO7fdO52BLI="
|
||||
"integrity": "sha1-hut1OSgF3cM69xySoO7fdO52BLI=",
|
||||
"dev": true
|
||||
},
|
||||
"is-date-object": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
|
||||
"integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY="
|
||||
"integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
|
||||
"dev": true
|
||||
},
|
||||
"is-decimal": {
|
||||
"version": "1.0.1",
|
||||
|
|
@ -3985,6 +4001,7 @@
|
|||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
|
||||
"integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has": "^1.0.1"
|
||||
}
|
||||
|
|
@ -4015,7 +4032,8 @@
|
|||
"is-symbol": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.1.tgz",
|
||||
"integrity": "sha1-PMWfAAJRlLarLjjbrmaJJWtmBXI="
|
||||
"integrity": "sha1-PMWfAAJRlLarLjjbrmaJJWtmBXI=",
|
||||
"dev": true
|
||||
},
|
||||
"is-typedarray": {
|
||||
"version": "1.0.0",
|
||||
|
|
@ -5792,12 +5810,14 @@
|
|||
"object-keys": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.11.tgz",
|
||||
"integrity": "sha1-xUYBd4rVYPEULODgG8yotW0TQm0="
|
||||
"integrity": "sha1-xUYBd4rVYPEULODgG8yotW0TQm0=",
|
||||
"dev": true
|
||||
},
|
||||
"object.assign": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
|
||||
"integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"define-properties": "^1.1.2",
|
||||
"function-bind": "^1.1.1",
|
||||
|
|
@ -5831,6 +5851,7 @@
|
|||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/object.values/-/object.values-1.0.4.tgz",
|
||||
"integrity": "sha1-5STaCbT2b/Bd9FdUbscqyZ8TBpo=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"define-properties": "^1.1.2",
|
||||
"es-abstract": "^1.6.1",
|
||||
|
|
@ -6386,18 +6407,45 @@
|
|||
}
|
||||
},
|
||||
"react-apollo": {
|
||||
"version": "1.4.16",
|
||||
"resolved": "https://registry.npmjs.org/react-apollo/-/react-apollo-1.4.16.tgz",
|
||||
"integrity": "sha512-/Htq9zI/u/PpIdoH/qBU9Zty09U23biH585H52GvEF0m/kK9te9QFCnYfjKpB30DS6YleIk1uKNcqeK3HEfU6w==",
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-apollo/-/react-apollo-2.2.1.tgz",
|
||||
"integrity": "sha512-M1UY0o66e2rc4xhAtLKXWRx183yHW/ei1XAno8vWyIUQaEAg3rP5Sgw9nzl3wvpvU1lFjlsY50sbh2Ia1NB5+w==",
|
||||
"requires": {
|
||||
"apollo-client": "^1.4.0",
|
||||
"enzyme-adapter-react-16": "^1.0.0",
|
||||
"graphql-tag": "^2.0.0",
|
||||
"hoist-non-react-statics": "^2.2.0",
|
||||
"invariant": "^2.2.1",
|
||||
"lodash.pick": "^4.4.0",
|
||||
"object-assign": "^4.0.1",
|
||||
"prop-types": "^15.5.8"
|
||||
"fbjs": "^1.0.0",
|
||||
"hoist-non-react-statics": "^3.0.0",
|
||||
"invariant": "^2.2.2",
|
||||
"lodash": "^4.17.10",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"fbjs": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-1.0.0.tgz",
|
||||
"integrity": "sha512-MUgcMEJaFhCaF1QtWGnmq9ZDRAzECTCRAF7O6UZIlAlkTs1SasiX9aP0Iw7wfD2mJ7wDTNfg2w7u5fSCwJk1OA==",
|
||||
"requires": {
|
||||
"core-js": "^2.4.1",
|
||||
"fbjs-css-vars": "^1.0.0",
|
||||
"isomorphic-fetch": "^2.1.1",
|
||||
"loose-envify": "^1.0.0",
|
||||
"object-assign": "^4.1.0",
|
||||
"promise": "^7.1.1",
|
||||
"setimmediate": "^1.0.5",
|
||||
"ua-parser-js": "^0.7.18"
|
||||
}
|
||||
},
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.0.1.tgz",
|
||||
"integrity": "sha512-1kXwPsOi0OGQIZNVMPvgWJ9tSnGMiMfJdihqEzrPEXlHOBh9AAHXX/QYmAJTXztnz/K+PQ8ryCb4eGaN6HlGbQ==",
|
||||
"requires": {
|
||||
"react-is": "^16.3.2"
|
||||
}
|
||||
},
|
||||
"ua-parser-js": {
|
||||
"version": "0.7.18",
|
||||
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",
|
||||
"integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-bootstrap": {
|
||||
|
|
@ -6582,6 +6630,7 @@
|
|||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.7.0.tgz",
|
||||
"integrity": "sha512-50JwZ3yNyMS8fchN+jjWEJOH3Oze7UmhxeoJLn2j6f3NjpfCRbcmih83XTWmzqtar/ivd5f7tvQhvvhism2fgg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fbjs": "^0.8.16",
|
||||
"loose-envify": "^1.1.0",
|
||||
|
|
@ -6753,6 +6802,7 @@
|
|||
"version": "16.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.1.tgz",
|
||||
"integrity": "sha512-wyyiPxRZOTpKnNIgUBOB6xPLTpIzwcQMIURhZvzUqZzezvHjaGNsDPBhMac5fIY3Jf5NuKxoGvV64zDSOECPPQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fbjs": "^0.8.16",
|
||||
"object-assign": "^4.1.1",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
"@babel/runtime": "7.0.0-beta.55",
|
||||
"analytics-node": "^2.1.1",
|
||||
"apollo-cache-inmemory": "^1.2.10",
|
||||
"apollo-client": "^1.2.2",
|
||||
"apollo-client": "^2.4.2",
|
||||
"apollo-engine": "^0.5.4",
|
||||
"apollo-errors": "^1.4.0",
|
||||
"apollo-link-state": "^0.4.2",
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
"prop-types": "^15.6.0",
|
||||
"react": "^16.2.0",
|
||||
"react-addons-pure-render-mixin": "^15.4.1",
|
||||
"react-apollo": "^1.4.15",
|
||||
"react-apollo": "^2.2.1",
|
||||
"react-bootstrap": "^0.32.0",
|
||||
"react-bootstrap-datetimepicker": "0.0.22",
|
||||
"react-cookie": "^2.1.4",
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
|
|||
import { intlShape } from 'meteor/vulcan:i18n';
|
||||
|
||||
class Flash extends PureComponent {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.dismissFlash = this.dismissFlash.bind(this);
|
||||
|
|
@ -27,34 +26,42 @@ class Flash extends PureComponent {
|
|||
return {
|
||||
message: errorObject,
|
||||
type: 'error'
|
||||
}
|
||||
};
|
||||
} else {
|
||||
// else return full error object after internationalizing message
|
||||
const { id, message, properties } = errorObject;
|
||||
const translatedMessage = this.context.intl.formatMessage({ id, defaultMessage: message }, properties);
|
||||
const translatedMessage = this.context.intl.formatMessage(
|
||||
{ id, defaultMessage: message },
|
||||
properties
|
||||
);
|
||||
return {
|
||||
...errorObject,
|
||||
message: translatedMessage,
|
||||
message: translatedMessage
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
const { message, type } = this.getProperties();
|
||||
const flashType = type === 'error' ? 'danger' : type; // if flashType is "error", use "danger" instead
|
||||
|
||||
return (
|
||||
<Components.Alert className="flash-message" variant={flashType} onDismiss={this.dismissFlash}>
|
||||
<Components.Alert
|
||||
className="flash-message"
|
||||
variant={flashType}
|
||||
onDismiss={this.dismissFlash}
|
||||
>
|
||||
{message}
|
||||
</Components.Alert>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Flash.propTypes = {
|
||||
message: PropTypes.object.isRequired
|
||||
}
|
||||
message: PropTypes.object.isRequired,
|
||||
markAsSeen: PropTypes.func.isRequired,
|
||||
clear: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
Flash.contextTypes = {
|
||||
intl: intlShape
|
||||
|
|
@ -62,20 +69,25 @@ Flash.contextTypes = {
|
|||
|
||||
registerComponent('Flash', Flash);
|
||||
|
||||
const FlashMessages = ({messages, clear, markAsSeen}) => {
|
||||
const FlashMessages = ({ messages, clear, markAsSeen }) => {
|
||||
return (
|
||||
<div className="flash-messages">
|
||||
{messages
|
||||
.filter(message => message.show)
|
||||
.map(message => <Components.Flash key={message._id} message={message} clear={clear} markAsSeen={markAsSeen} />)}
|
||||
{messages.filter(message => message.show).map(message => (
|
||||
<Components.Flash
|
||||
key={message._id}
|
||||
message={message}
|
||||
clear={clear}
|
||||
markAsSeen={markAsSeen}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
FlashMessages.displayName = 'FlashMessages';
|
||||
FlashMessages.propTypes = {
|
||||
messages: PropTypes.array.isRequired
|
||||
}
|
||||
};
|
||||
|
||||
registerComponent('FlashMessages', FlashMessages, withMessages);
|
||||
|
||||
|
|
|
|||
|
|
@ -7,18 +7,15 @@ HoC that provides access to flash messages stored in Redux state and actions to
|
|||
*/
|
||||
|
||||
import { registerMutation, registerDefault } from 'meteor/vulcan:lib';
|
||||
import { graphql } from 'react-apollo';
|
||||
import { graphql, compose } from 'react-apollo';
|
||||
import gql from 'graphql-tag';
|
||||
import compose from 'recompose/compose';
|
||||
// 1. Define the queries
|
||||
// the @client tag tells graphQL that we fetch data from the cache
|
||||
|
||||
// read (equivalent to selectors)
|
||||
const getMessagesQuery = gql`
|
||||
query getFlashMessages {
|
||||
flashMessages @client {
|
||||
value
|
||||
}
|
||||
query FlashMessage {
|
||||
flashMessages @client
|
||||
}
|
||||
`;
|
||||
// write (equivalent to actions)
|
||||
|
|
@ -125,24 +122,24 @@ if (Meteor.isClient) {
|
|||
const withMessages = compose(
|
||||
// equivalent to mapDispatchToProps (map the state-link to the component props, so it can access the mutations)
|
||||
graphql(flashQuery, {
|
||||
name: 'flashMessagesFlashMutation' // name in the props
|
||||
name: 'flash' // name in the props
|
||||
}),
|
||||
graphql(markAsSeenQuery, {
|
||||
name: 'flashMessagesMarkAsSeenMutation'
|
||||
name: 'markAsSeen'
|
||||
}),
|
||||
graphql(clearQuery, {
|
||||
name: 'flashMessagesClearMutation'
|
||||
name: 'clear'
|
||||
}),
|
||||
graphql(clearSeenQuery, {
|
||||
name: 'flashMessagesClearSeenMutation'
|
||||
name: 'clearSeen'
|
||||
}),
|
||||
|
||||
// equivalent to mapStateToProps (map the graphql query to the component props)
|
||||
graphql(getMessagesQuery, {
|
||||
props: ({ ownProps, data /*: { flashMessages }*/ }) => {
|
||||
console.log(data);
|
||||
console.log(data.flashMessages);
|
||||
const { flashMessages } = data;
|
||||
return { ...ownProps, flashMessages: flashMessages };
|
||||
return { ...ownProps, messages: flashMessages };
|
||||
}
|
||||
})
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue