diff --git a/client/coral-admin/src/components/FlagWidget.js b/client/coral-admin/src/components/FlagWidget.js index 96e21ac0b..a37ddcd2c 100644 --- a/client/coral-admin/src/components/FlagWidget.js +++ b/client/coral-admin/src/components/FlagWidget.js @@ -1,66 +1,60 @@ -import React, {PropTypes} from 'react'; +import React from 'react'; +import {compose} from 'react-apollo'; +import {mostFlags} from 'coral-admin/src/graphql/queries'; import {Link} from 'react-router'; import styles from './Widget.css'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from 'coral-admin/src/translations'; +import {Spinner} from 'coral-ui'; const lang = new I18n(translations); -const FlagWidget = ({assets}) => { +const FlagWidget = (props) => { + + if (props.data.loading) { + return ; + } + + const {data: {metrics: assets}} = props; return ( - - - - {/* empty on purpose */} - - - - - - - - { - assets.length - ? assets.map((asset, index) => { - const flagSummary = asset.action_summaries.find(s => s.__typename === 'FlagAssetActionSummary'); - const likeSummary = asset.action_summaries.find(s => s.__typename === 'LikeAssetActionSummary'); - return ( - - - - - - - - ); - }) - : - } - -
{lang.t('streams.article')}{lang.t('modqueue.flagged')}{lang.t('modqueue.likes')}{lang.t('dashboard.comment_count')}
{index + 1}. - {asset.title} -

{asset.author} - Published: {new Date(asset.created_at).toLocaleDateString()}

-
{flagSummary ? flagSummary.actionCount : 0}{likeSummary ? likeSummary.actionCount : 0}{asset.commentCount}
{lang.t('dashboard.no_flags')}
+
+

Top Ten Articles with the most flagged comments

+ + + + {/* empty on purpose */} + + + + + + + + { + assets.length + ? assets.map((asset, index) => { + const flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary'); + const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary'); + return ( + + + + + + + + ); + }) + : + } + +
{lang.t('streams.article')}{lang.t('modqueue.flagged')}{lang.t('modqueue.likes')}{lang.t('dashboard.comment_count')}
{index + 1}. + {asset.title} +

{asset.author} - Published: {new Date(asset.created_at).toLocaleDateString()}

+
{flagSummary ? flagSummary.actionCount : 0}{likeSummary ? likeSummary.actionCount : 0}{asset.commentCount}
{lang.t('dashboard.no_flags')}
+
); }; -FlagWidget.propTypes = { - assets: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.string, - title: PropTypes.string, - url: PropTypes.string, - commentCount: PropTypes.number, - action_summaries: PropTypes.arrayOf( - PropTypes.shape({ - __typename: PropTypes.string.isRequired, - actionCount: PropTypes.number.isRequired, - actionableItemCount: PropTypes.number.isRequired - }) - ) - }) - ).isRequired -}; - -export default FlagWidget; +export default compose(mostFlags)(FlagWidget); diff --git a/client/coral-admin/src/components/LikeWidget.js b/client/coral-admin/src/components/LikeWidget.js index 33df3e2b4..ac9e111ea 100644 --- a/client/coral-admin/src/components/LikeWidget.js +++ b/client/coral-admin/src/components/LikeWidget.js @@ -1,34 +1,61 @@ -import React, {PropTypes} from 'react'; +import React from 'react'; +import {compose} from 'react-apollo'; +import {mostLikes} from 'coral-admin/src/graphql/queries'; import {Link} from 'react-router'; +import {Spinner} from 'coral-ui'; import styles from './Widget.css'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from 'coral-admin/src/translations'; const lang = new I18n(translations); -const LikeWidget = ({assets}) => { +const LikeWidget = (props) => { + + if (props.data.loading) { + return ; + } + + const {data: {metrics: assets}} = props; + return ( - -
+
+

Top Ten Articles with the most likes

+ + + + {/* empty on purpose */} + + + + + + + + { + assets.length + ? assets.map((asset, index) => { + const flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary'); + const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary'); + console.log('LikeWidget', likeSummary); + return ( + + + + + + + + ); + }) + : + } + +
{lang.t('streams.article')}{lang.t('modqueue.flagged')}{lang.t('modqueue.likes')}{lang.t('dashboard.comment_count')}
{index + 1}. + {asset.title} +

{asset.author} - Published: {new Date(asset.created_at).toLocaleDateString()}

+
{flagSummary ? flagSummary.actionCount : 0}{likeSummary ? likeSummary.actionCount : 0}{asset.commentCount}
{lang.t('dashboard.no_likes')}
+
); }; -LikeWidget.propTypes = { - assets: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.string, - title: PropTypes.string, - url: PropTypes.string, - commentCount: PropTypes.number, - action_summaries: PropTypes.arrayOf( - PropTypes.shape({ - __typename: PropTypes.string.isRequired, - actionCount: PropTypes.number.isRequired, - actionableItemCount: PropTypes.number.isRequired - }) - ) - }) - ).isRequired -}; - -export default LikeWidget; +export default compose(mostLikes)(LikeWidget); diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js index 0cc015e00..fcccb36b3 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.js +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js @@ -1,45 +1,22 @@ import React from 'react'; -import {compose} from 'react-apollo'; -import {mostFlags, mostLikes} from 'coral-admin/src/graphql/queries'; -import {Spinner} from 'coral-ui'; import styles from './Dashboard.css'; import FlagWidget from '../../components/FlagWidget'; import LikeWidget from '../../components/LikeWidget'; -class Dashboard extends React.Component { - render () { - - const {data} = this.props; - console.log('data', data); - const {assetsByLike, assetsByFlag} = data; - - if (data.loading) { - return ; - } - - if (data.error) { - return
{data.error}
; - } - - return ( -
-
-

Top Ten Articles with the most flagged comments

- -
-
-

Top ten comments with the most likes

-
-
-

Top Ten Articles with the most likes

- -
+const Dashboard = () => { + return ( +
+
+
- ); - } -} +
+

Top ten comments with the most likes

+
+
+ +
+
+ ); +}; -export default compose( - mostFlags, - mostLikes -)(Dashboard); +export default Dashboard; diff --git a/client/coral-admin/src/graphql/queries/assetsByLike.graphql b/client/coral-admin/src/graphql/queries/assetsByLike.graphql deleted file mode 100644 index 853afee41..000000000 --- a/client/coral-admin/src/graphql/queries/assetsByLike.graphql +++ /dev/null @@ -1,19 +0,0 @@ -fragment metrics on Asset { - id - title - url - commentCount - author - created_at - action_summaries { - type: __typename - actionCount - actionableItemCount - } -} - -query Metrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) { - assetsByLike: metrics(from: $from, to: $to, sort: $sort) { - ...metrics - } -} diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js index 96cb319c9..1628a4ac8 100644 --- a/client/coral-admin/src/graphql/queries/index.js +++ b/client/coral-admin/src/graphql/queries/index.js @@ -1,10 +1,9 @@ import {graphql} from 'react-apollo'; -import BY_LIKES from './assetsByLike.graphql'; -import BY_FLAGS from './assetsByFlag.graphql'; +import METRICS from './metrics.graphql'; import MOD_QUEUE_QUERY from './modQueueQuery.graphql'; -export const mostFlags = graphql(BY_FLAGS, { +export const mostFlags = graphql(METRICS, { options: () => { // currently hard-coded per Greg's advice @@ -20,8 +19,10 @@ export const mostFlags = graphql(BY_FLAGS, { } }); -export const mostLikes = graphql(BY_LIKES, { +export const mostLikes = graphql(METRICS, { options: () => { + + // currently hard-coded per Greg's advice const fiveMinutesAgo = new Date(); fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5); return { diff --git a/client/coral-admin/src/graphql/queries/assetsByFlag.graphql b/client/coral-admin/src/graphql/queries/metrics.graphql similarity index 80% rename from client/coral-admin/src/graphql/queries/assetsByFlag.graphql rename to client/coral-admin/src/graphql/queries/metrics.graphql index c6f0900ac..9a226d8bc 100644 --- a/client/coral-admin/src/graphql/queries/assetsByFlag.graphql +++ b/client/coral-admin/src/graphql/queries/metrics.graphql @@ -13,7 +13,7 @@ fragment metrics on Asset { } query Metrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) { - assetsByFlag: metrics(from: $from, to: $to, sort: $sort) { + metrics(from: $from, to: $to, sort: $sort) { ...metrics } } diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json index 5b15564d7..13d482d6c 100644 --- a/client/coral-admin/src/translations.json +++ b/client/coral-admin/src/translations.json @@ -110,6 +110,7 @@ }, "dashboard": { "no_flags": "There have been no flags in the last 5 minutes! Hooray!", + "no_likes": "There have been no likes in the last 5 minutes. All quiet.", "comment_count": "Comments" }, "streams": { @@ -217,6 +218,7 @@ }, "dashbord": { "no_flags": "¡Nadie ha marcado nada en los últimos 5 minutos! ¡Bravo!", + "no_likes": "A nadie le ha gustado algún comentario en los últimos 5 minutos. Todo tranquilo.", "comment_count": "Comentarios" }, "streams": {