From 8866366d3cf5f95e2a4d3c244fb13fea76dc8634 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Fri, 17 Feb 2017 16:07:34 -0700 Subject: [PATCH 01/24] storing my place in case we want to come back to this --- .../coral-admin/src/components/FlagWidget.js | 2 +- .../coral-admin/src/components/LikeWidget.js | 34 +++++++++++++++++++ client/coral-admin/src/components/Widget.css | 34 +++++++++++++++++++ .../src/containers/Dashboard/Dashboard.js | 11 ++++-- .../coral-admin/src/graphql/queries/index.js | 20 +++++++++-- .../src/graphql/queries/metrics.graphql | 24 +++++++++++++ 6 files changed, 119 insertions(+), 6 deletions(-) create mode 100644 client/coral-admin/src/components/LikeWidget.js create mode 100644 client/coral-admin/src/components/Widget.css create mode 100644 client/coral-admin/src/graphql/queries/metrics.graphql diff --git a/client/coral-admin/src/components/FlagWidget.js b/client/coral-admin/src/components/FlagWidget.js index 187306c8c..96e21ac0b 100644 --- a/client/coral-admin/src/components/FlagWidget.js +++ b/client/coral-admin/src/components/FlagWidget.js @@ -1,6 +1,6 @@ import React, {PropTypes} from 'react'; import {Link} from 'react-router'; -import styles from './FlagWidget.css'; +import styles from './Widget.css'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from 'coral-admin/src/translations'; diff --git a/client/coral-admin/src/components/LikeWidget.js b/client/coral-admin/src/components/LikeWidget.js new file mode 100644 index 000000000..33df3e2b4 --- /dev/null +++ b/client/coral-admin/src/components/LikeWidget.js @@ -0,0 +1,34 @@ +import React, {PropTypes} from 'react'; +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'; + +const lang = new I18n(translations); + +const LikeWidget = ({assets}) => { + return ( + +
+ ); +}; + +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; diff --git a/client/coral-admin/src/components/Widget.css b/client/coral-admin/src/components/Widget.css new file mode 100644 index 000000000..f40da403d --- /dev/null +++ b/client/coral-admin/src/components/Widget.css @@ -0,0 +1,34 @@ +.heading { + margin: 0; + font-size: 1.5rem; + font-weight: bold; +} + +.widgetTable { + width: 100%; + border-collapse: collapse; + box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); +} + +.widgetTable thead th { + border-bottom: 1px solid #f47e6b; + padding: 10px; + text-align: left; +} + +.widgetTable tbody tr { + border-bottom: 1px solid lightgrey; +} + +.widgetTable tbody tr:last-child { + border-bottom: none; +} + +.widgetTable tbody td { + padding: 10px; +} + +.lede { + font-size: 0.9em; + color: grey; +} diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js index 6baa16af1..253c0980b 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.js +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js @@ -1,14 +1,16 @@ import React from 'react'; import {compose} from 'react-apollo'; -import {mostFlags} from 'coral-admin/src/graphql/queries'; +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 {metrics: assets} = data; if (data.loading) { @@ -28,11 +30,16 @@ class Dashboard extends React.Component {

Top ten comments with the most likes

+
+

Top Ten Articles with the most likes

+ +
); } } export default compose( - mostFlags + mostFlags, + mostLikes )(Dashboard); diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js index 3325249e1..f98b40091 100644 --- a/client/coral-admin/src/graphql/queries/index.js +++ b/client/coral-admin/src/graphql/queries/index.js @@ -1,14 +1,14 @@ import {graphql} from 'react-apollo'; -import MOST_FLAGS from './mostFlags.graphql'; +import METRICS from './metrics.graphql'; import MOD_QUEUE_QUERY from './modQueueQuery.graphql'; -export const mostFlags = graphql(MOST_FLAGS, { +export const mostFlags = graphql(METRICS, { options: () => { // currently hard-coded per Greg's advice const fiveMinutesAgo = new Date(); - fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 305); + fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5); return { variables: { sort: 'FLAG', @@ -19,6 +19,20 @@ export const mostFlags = graphql(MOST_FLAGS, { } }); +export const mostLikes = graphql(METRICS, { + options: () => { + const fiveMinutesAgo = new Date(); + fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5); + return { + variables: { + sort: 'LIKE', + from: fiveMinutesAgo.toISOString(), + to: new Date().toISOString() + } + }; + } +}); + export const modQueueQuery = graphql(MOD_QUEUE_QUERY, { options: ({params: {id = null}}) => { return { diff --git a/client/coral-admin/src/graphql/queries/metrics.graphql b/client/coral-admin/src/graphql/queries/metrics.graphql new file mode 100644 index 000000000..2f9afe621 --- /dev/null +++ b/client/coral-admin/src/graphql/queries/metrics.graphql @@ -0,0 +1,24 @@ +fragment metrics on Asset { + id + title + action_summaries { + type: __typename + actionCount + actionableItemCount + } +} + +query Metrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) { + metrics(from: $from, to: $to, sort: $sort) { + id + title + url + commentCount + author + created_at + action_summaries { + actionCount + actionableItemCount + } + } +} From 364cf1808e107551218beec3f329d121e4d42dbf Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Tue, 21 Feb 2017 10:28:33 -0700 Subject: [PATCH 02/24] assets by like? --- .../src/containers/Dashboard/Dashboard.js | 6 +++--- .../{metrics.graphql => assetsByFlag.graphql} | 17 ++++++----------- .../src/graphql/queries/assetsByLike.graphql | 19 +++++++++++++++++++ .../coral-admin/src/graphql/queries/index.js | 7 ++++--- 4 files changed, 32 insertions(+), 17 deletions(-) rename client/coral-admin/src/graphql/queries/{metrics.graphql => assetsByFlag.graphql} (51%) create mode 100644 client/coral-admin/src/graphql/queries/assetsByLike.graphql diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js index 253c0980b..0cc015e00 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.js +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js @@ -11,7 +11,7 @@ class Dashboard extends React.Component { const {data} = this.props; console.log('data', data); - const {metrics: assets} = data; + const {assetsByLike, assetsByFlag} = data; if (data.loading) { return ; @@ -25,14 +25,14 @@ class Dashboard extends React.Component {

Top Ten Articles with the most flagged comments

- +

Top ten comments with the most likes

Top Ten Articles with the most likes

- +
); diff --git a/client/coral-admin/src/graphql/queries/metrics.graphql b/client/coral-admin/src/graphql/queries/assetsByFlag.graphql similarity index 51% rename from client/coral-admin/src/graphql/queries/metrics.graphql rename to client/coral-admin/src/graphql/queries/assetsByFlag.graphql index 2f9afe621..c6f0900ac 100644 --- a/client/coral-admin/src/graphql/queries/metrics.graphql +++ b/client/coral-admin/src/graphql/queries/assetsByFlag.graphql @@ -1,6 +1,10 @@ fragment metrics on Asset { id title + url + commentCount + author + created_at action_summaries { type: __typename actionCount @@ -9,16 +13,7 @@ fragment metrics on Asset { } query Metrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) { - metrics(from: $from, to: $to, sort: $sort) { - id - title - url - commentCount - author - created_at - action_summaries { - actionCount - actionableItemCount - } + assetsByFlag: metrics(from: $from, to: $to, sort: $sort) { + ...metrics } } diff --git a/client/coral-admin/src/graphql/queries/assetsByLike.graphql b/client/coral-admin/src/graphql/queries/assetsByLike.graphql new file mode 100644 index 000000000..853afee41 --- /dev/null +++ b/client/coral-admin/src/graphql/queries/assetsByLike.graphql @@ -0,0 +1,19 @@ +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 f98b40091..96cb319c9 100644 --- a/client/coral-admin/src/graphql/queries/index.js +++ b/client/coral-admin/src/graphql/queries/index.js @@ -1,9 +1,10 @@ import {graphql} from 'react-apollo'; -import METRICS from './metrics.graphql'; +import BY_LIKES from './assetsByLike.graphql'; +import BY_FLAGS from './assetsByFlag.graphql'; import MOD_QUEUE_QUERY from './modQueueQuery.graphql'; -export const mostFlags = graphql(METRICS, { +export const mostFlags = graphql(BY_FLAGS, { options: () => { // currently hard-coded per Greg's advice @@ -19,7 +20,7 @@ export const mostFlags = graphql(METRICS, { } }); -export const mostLikes = graphql(METRICS, { +export const mostLikes = graphql(BY_LIKES, { options: () => { const fiveMinutesAgo = new Date(); fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5); From 5d94a98305bfaa5c07b87746d40565dc41ff6337 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Tue, 21 Feb 2017 14:05:49 -0700 Subject: [PATCH 03/24] Like and Flag summaries work again --- .../coral-admin/src/components/FlagWidget.js | 102 +++++++++--------- .../coral-admin/src/components/LikeWidget.js | 73 +++++++++---- .../src/containers/Dashboard/Dashboard.js | 53 +++------ .../src/graphql/queries/assetsByLike.graphql | 19 ---- .../coral-admin/src/graphql/queries/index.js | 9 +- .../{assetsByFlag.graphql => metrics.graphql} | 2 +- client/coral-admin/src/translations.json | 2 + 7 files changed, 121 insertions(+), 139 deletions(-) delete mode 100644 client/coral-admin/src/graphql/queries/assetsByLike.graphql rename client/coral-admin/src/graphql/queries/{assetsByFlag.graphql => metrics.graphql} (80%) 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": { From f32fe2629ce74e3214c590fc7014b6109440c4e0 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Tue, 21 Feb 2017 14:16:02 -0700 Subject: [PATCH 04/24] css is the worst --- .../src/containers/Dashboard/Dashboard.css | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.css b/client/coral-admin/src/containers/Dashboard/Dashboard.css index be2cd9f7a..0e46fb642 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.css +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.css @@ -1,19 +1,14 @@ .Dashboard { display: flex; - padding: 5px; + flex-wrap: wrap; } .widget { - margin-top: 10px; - flex: 1; + box-sizing: border-box; + margin: 10px 5px 5px 5px; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); - margin-right: 10px; padding: 15px; - -} - -.widget:last-child { - margin-right: 0; + width: calc(50% - 10px); } .heading { From 2360f280d2015849954e4d911ee0f78f7781f03c Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Tue, 21 Feb 2017 14:17:56 -0700 Subject: [PATCH 05/24] Added commentMetrics edge. --- graph/loaders/metrics.js | 65 +++++++++++++++++++++++++++++++++-- graph/resolvers/comment.js | 6 +++- graph/resolvers/root_query.js | 12 +++++-- graph/typeDefs.graphql | 10 ++++-- 4 files changed, 85 insertions(+), 8 deletions(-) diff --git a/graph/loaders/metrics.js b/graph/loaders/metrics.js index a842165c0..7cdecbc8e 100644 --- a/graph/loaders/metrics.js +++ b/graph/loaders/metrics.js @@ -5,7 +5,10 @@ const {objectCacheKeyFn} = require('./util'); const CommentModel = require('../../models/comment'); const ActionModel = require('../../models/action'); -const getMetrics = ({loaders: {Metrics, Assets}}, {from, to, sort, limit}) => { +/** + * Returns a list of assets with action metadata included on the models. + */ +const getAssetMetrics = ({loaders: {Metrics, Assets}}, {from, to, sort, limit}) => { let commentMetrics = {}; let assetMetrics = []; @@ -99,6 +102,59 @@ const getMetrics = ({loaders: {Metrics, Assets}}, {from, to, sort, limit}) => { }); }; +/** + * Returns a list of comments that are retrieved based on most activity within + * the indicated time range. + */ +const getCommentMetrics = ({loaders: {Metrics, Assets}}, {from, to, sort, limit}) => { + + let commentActionSummaries = {}; + + return Metrics.getRecentActions.load({from, to}) + .then((actionSummaries) => { + + actionSummaries.sort((a, b) => { + let aActionSummary = a.action_type === sort ? a : null; + let bActionSummary = b.action_type === sort ? b : null; + + // If either a or b don't have this action type, then one of them will + // automatically win. + if (aActionSummary == null || bActionSummary == null) { + if (bActionSummary != null) { + return 1; + } + + if (aActionSummary != null) { + return -1; + } + + return 0; + } + + // Both of them had an actionCount, hence we can determine that we could + // compare the actual values directly. + return bActionSummary.count - aActionSummary.count; + }); + + commentActionSummaries = _.groupBy(actionSummaries, 'item_id'); + + let commentIDs = _.uniq(actionSummaries.map(({item_id}) => item_id)); + + // Only keep the top `limit`. + commentIDs = commentIDs.slice(0, limit); + + // Find those comments. + return Metrics.getSpecificComments.loadMany(commentIDs); + }) + .then((comments) => comments.map((comment) => { + + // Add in the action summaries genrerated. + comment.action_summaries = commentActionSummaries[comment.id]; + + return comment; + })); +}; + const getRecentActions = (context, {from, to}) => { return ActionModel.aggregate([ @@ -150,6 +206,11 @@ module.exports = (context) => ({ batch: false, cacheKeyFn: objectCacheKeyFn('from', 'to') }), - get: ({from, to, sort, limit}) => getMetrics(context, {from, to, sort, limit}) + Assets: { + get: ({from, to, sort, limit}) => getAssetMetrics(context, {from, to, sort, limit}) + }, + Comments: { + get: ({from, to, sort, limit}) => getCommentMetrics(context, {from, to, sort, limit}) + } } }); diff --git a/graph/resolvers/comment.js b/graph/resolvers/comment.js index ef77ff6b5..de1909df1 100644 --- a/graph/resolvers/comment.js +++ b/graph/resolvers/comment.js @@ -25,7 +25,11 @@ const Comment = { return null; }, - action_summaries({id}, _, {loaders: {Actions}}) { + action_summaries({id, action_summaries}, _, {loaders: {Actions}}) { + if (action_summaries) { + return action_summaries; + } + return Actions.getSummariesByItemID.load(id); }, asset({asset_id}, _, {loaders: {Assets}}) { diff --git a/graph/resolvers/root_query.js b/graph/resolvers/root_query.js index ced4e65cf..8800bfebf 100644 --- a/graph/resolvers/root_query.js +++ b/graph/resolvers/root_query.js @@ -56,12 +56,20 @@ const RootQuery = { return Comments.getCountByQuery({statuses, asset_id, parent_id}); }, - metrics(_, {from, to, sort, limit = 10}, {user, loaders: {Metrics}}) { + assetMetrics(_, {from, to, sort, limit = 10}, {user, loaders: {Metrics: {Assets}}}) { if (user == null || !user.hasRoles('ADMIN')) { return null; } - return Metrics.get({from, to, sort, limit}); + return Assets.get({from, to, sort, limit}); + }, + + commentMetrics(_, {from, to, sort, limit = 10}, {user, loaders: {Metrics: {Comments}}}) { + if (user == null || !user.hasRoles('ADMIN')) { + return null; + } + + return Comments.get({from, to, sort, limit}); }, // This returns the current user, ensure that if we aren't logged in, we diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql index 72a54a0cd..0eec34b54 100644 --- a/graph/typeDefs.graphql +++ b/graph/typeDefs.graphql @@ -456,9 +456,13 @@ type RootQuery { # role. me: User - # Metrics related to user actions are saturated into the assets returned. The - # sort will affect if it will allow - metrics(from: Date!, to: Date!, sort: ACTION_TYPE!, limit: Int = 10): [Asset] + # Asset metrics related to user actions are saturated into the assets + # returned. + assetMetrics(from: Date!, to: Date!, sort: ACTION_TYPE!, limit: Int = 10): [Asset] + + # Comment metrics related to user actions are saturated into the comments + # returned. + commentMetrics(from: Date!, to: Date!, sort: ACTION_TYPE!, limit: Int = 10): [Comment] } ################################################################################ From 6398e2faad14b3e3728a774e8352d2c06ea84a8d Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Wed, 22 Feb 2017 09:32:51 -0700 Subject: [PATCH 06/24] Fixed issue with comment hydration --- graph/loaders/comments.js | 16 ++++++++++++++++ graph/loaders/metrics.js | 13 ++++++++++--- graph/typeDefs.graphql | 4 ++-- 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/graph/loaders/comments.js b/graph/loaders/comments.js index ad78a1e92..47a8095dc 100644 --- a/graph/loaders/comments.js +++ b/graph/loaders/comments.js @@ -270,6 +270,21 @@ const genRecentComments = (_, ids) => { .then(util.arrayJoinBy(ids, 'asset_id')); }; +/** + * Returns the comment's by their id. + * @param {Object} context graph context + * @param {Array} ids the comment id's to fetch + * @return {Promise} resolves to the comments + */ +const genCommentsByID = (context, ids) => { + return CommentModel.find({ + id: { + $in: ids + } + }) + .then(util.singleJoinBy(ids, 'id')); +}; + /** * Creates a set of loaders based on a GraphQL context. * @param {Object} context the context of the GraphQL request @@ -277,6 +292,7 @@ const genRecentComments = (_, ids) => { */ module.exports = (context) => ({ Comments: { + get: new DataLoader((ids) => genCommentsByID(context, ids)), getByQuery: (query) => getCommentsByQuery(context, query), getCountByQuery: (query) => getCommentCountByQuery(context, query), countByAssetID: new util.SharedCacheDataLoader('Comments.countByAssetID', 3600, (ids) => getCountsByAssetID(context, ids)), diff --git a/graph/loaders/metrics.js b/graph/loaders/metrics.js index 7cdecbc8e..8591ecefe 100644 --- a/graph/loaders/metrics.js +++ b/graph/loaders/metrics.js @@ -106,7 +106,7 @@ const getAssetMetrics = ({loaders: {Metrics, Assets}}, {from, to, sort, limit}) * Returns a list of comments that are retrieved based on most activity within * the indicated time range. */ -const getCommentMetrics = ({loaders: {Metrics, Assets}}, {from, to, sort, limit}) => { +const getCommentMetrics = ({loaders: {Metrics, Comments}}, {from, to, sort, limit}) => { let commentActionSummaries = {}; @@ -143,8 +143,15 @@ const getCommentMetrics = ({loaders: {Metrics, Assets}}, {from, to, sort, limit} // Only keep the top `limit`. commentIDs = commentIDs.slice(0, limit); - // Find those comments. - return Metrics.getSpecificComments.loadMany(commentIDs); + // If there are no comment's to get, then just continue with an empty + // array. + if (commentIDs.length === 0) { + return []; + } + + // Find those comments, this is the final stage, so let's get all the + // fields. + return Comments.get.loadMany(commentIDs); }) .then((comments) => comments.map((comment) => { diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql index 0eec34b54..c61312255 100644 --- a/graph/typeDefs.graphql +++ b/graph/typeDefs.graphql @@ -458,11 +458,11 @@ type RootQuery { # Asset metrics related to user actions are saturated into the assets # returned. - assetMetrics(from: Date!, to: Date!, sort: ACTION_TYPE!, limit: Int = 10): [Asset] + assetMetrics(from: Date!, to: Date!, sort: ACTION_TYPE!, limit: Int = 10): [Asset!] # Comment metrics related to user actions are saturated into the comments # returned. - commentMetrics(from: Date!, to: Date!, sort: ACTION_TYPE!, limit: Int = 10): [Comment] + commentMetrics(from: Date!, to: Date!, sort: ACTION_TYPE!, limit: Int = 10): [Comment!] } ################################################################################ From bc4849632794a2a1947d92b3ecd27113bb92902b Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Wed, 22 Feb 2017 10:47:23 -0700 Subject: [PATCH 07/24] add most liked comments widget --- .../src/containers/Dashboard/Dashboard.css | 8 ----- .../src/containers/Dashboard/Dashboard.js | 17 ++++----- .../Dashboard}/FlagWidget.js | 2 +- .../Dashboard}/LikeWidget.js | 2 +- .../Dashboard/MostLikedCommentsWidget.js | 35 +++++++++++++++++++ .../Dashboard}/Widget.css | 8 +++++ .../ModerationQueue/ModerationContainer.js | 5 +-- .../ModerationQueue/ModerationQueue.js | 6 ++-- .../{metrics.graphql => assetMetrics.graphql} | 2 +- .../graphql/queries/commentMetrics.graphql | 19 ++++++++++ .../coral-admin/src/graphql/queries/index.js | 23 ++++++++++-- .../coral-sign-in/components/SignUpContent.js | 9 ++--- 12 files changed, 100 insertions(+), 36 deletions(-) rename client/coral-admin/src/{components => containers/Dashboard}/FlagWidget.js (98%) rename client/coral-admin/src/{components => containers/Dashboard}/LikeWidget.js (98%) create mode 100644 client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js rename client/coral-admin/src/{components => containers/Dashboard}/Widget.css (75%) rename client/coral-admin/src/graphql/queries/{metrics.graphql => assetMetrics.graphql} (80%) create mode 100644 client/coral-admin/src/graphql/queries/commentMetrics.graphql diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.css b/client/coral-admin/src/containers/Dashboard/Dashboard.css index 0e46fb642..a23927d8a 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.css +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.css @@ -3,14 +3,6 @@ flex-wrap: wrap; } -.widget { - box-sizing: border-box; - margin: 10px 5px 5px 5px; - box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); - padding: 15px; - width: calc(50% - 10px); -} - .heading { margin: 0; font-size: 1.5rem; diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js index fcccb36b3..282772403 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.js +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js @@ -1,20 +1,15 @@ import React from 'react'; import styles from './Dashboard.css'; -import FlagWidget from '../../components/FlagWidget'; -import LikeWidget from '../../components/LikeWidget'; +import FlagWidget from './FlagWidget'; +import LikeWidget from './LikeWidget'; +import MostLikedCommentsWidget from './MostLikedCommentsWidget'; const Dashboard = () => { return (
-
- -
-
-

Top ten comments with the most likes

-
-
- -
+ + +
); }; diff --git a/client/coral-admin/src/components/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js similarity index 98% rename from client/coral-admin/src/components/FlagWidget.js rename to client/coral-admin/src/containers/Dashboard/FlagWidget.js index a37ddcd2c..4fb993d35 100644 --- a/client/coral-admin/src/components/FlagWidget.js +++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js @@ -18,7 +18,7 @@ const FlagWidget = (props) => { const {data: {metrics: assets}} = props; return ( -
+

Top Ten Articles with the most flagged comments

diff --git a/client/coral-admin/src/components/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js similarity index 98% rename from client/coral-admin/src/components/LikeWidget.js rename to client/coral-admin/src/containers/Dashboard/LikeWidget.js index ac9e111ea..0f6ea2ba0 100644 --- a/client/coral-admin/src/components/LikeWidget.js +++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js @@ -18,7 +18,7 @@ const LikeWidget = (props) => { const {data: {metrics: assets}} = props; return ( -
+

Top Ten Articles with the most likes

diff --git a/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js b/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js new file mode 100644 index 000000000..6e7d03185 --- /dev/null +++ b/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js @@ -0,0 +1,35 @@ +import React from 'react'; +import {compose} from 'react-apollo'; +import {mostLikedComments} from 'coral-admin/src/graphql/queries'; +import I18n from 'coral-framework/modules/i18n/i18n'; +import translations from 'coral-admin/src/translations'; +import ModerationQueue from 'coral-admin/src/containers/ModerationQueue/ModerationQueue'; +import {Spinner} from 'coral-ui'; +import styles from './Widget.css'; + +const lang = new I18n(translations); + +const MostLikedCommentsWidget = props => { + + if (props.data.loading) { + return ; + } + + const {data: {comments}} = props; + + console.log('MostLikedCommentsWidget', comments); + + return ( +
+

most liked comments

+ {}} + acceptComment={() => {}} + rejectComment={() => {}} /> +
+ ); +}; + +export default compose(mostLikedComments)(MostLikedCommentsWidget); diff --git a/client/coral-admin/src/components/Widget.css b/client/coral-admin/src/containers/Dashboard/Widget.css similarity index 75% rename from client/coral-admin/src/components/Widget.css rename to client/coral-admin/src/containers/Dashboard/Widget.css index f40da403d..d9cce2043 100644 --- a/client/coral-admin/src/components/Widget.css +++ b/client/coral-admin/src/containers/Dashboard/Widget.css @@ -1,3 +1,11 @@ +.widget { + box-sizing: border-box; + margin: 10px 5px 5px 5px; + box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); + padding: 15px; + width: calc(50% - 10px); +} + .heading { margin: 0; font-size: 1.5rem; diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index f685ac094..9c68d0728 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -66,6 +66,8 @@ class ModerationContainer extends Component { } } + const comments = data[activeTab]; + return (
@@ -76,9 +78,8 @@ class ModerationContainer extends Component { flaggedCount={data.flaggedCount} /> { +const ModerationQueue = ({comments, ...props}) => { return (
    { - props.data[activeTab].map((comment, i) => { + comments.map((comment, i) => { const status = comment.action_summaries ? 'FLAGGED' : comment.status; return { }; ModerationQueue.propTypes = { - data: PropTypes.object.isRequired + comments: PropTypes.array.isRequired }; export default ModerationQueue; diff --git a/client/coral-admin/src/graphql/queries/metrics.graphql b/client/coral-admin/src/graphql/queries/assetMetrics.graphql similarity index 80% rename from client/coral-admin/src/graphql/queries/metrics.graphql rename to client/coral-admin/src/graphql/queries/assetMetrics.graphql index 9a226d8bc..caed174b4 100644 --- a/client/coral-admin/src/graphql/queries/metrics.graphql +++ b/client/coral-admin/src/graphql/queries/assetMetrics.graphql @@ -13,7 +13,7 @@ fragment metrics on Asset { } query Metrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) { - metrics(from: $from, to: $to, sort: $sort) { + metrics: assetMetrics(from: $from, to: $to, sort: $sort) { ...metrics } } diff --git a/client/coral-admin/src/graphql/queries/commentMetrics.graphql b/client/coral-admin/src/graphql/queries/commentMetrics.graphql new file mode 100644 index 000000000..59a89739c --- /dev/null +++ b/client/coral-admin/src/graphql/queries/commentMetrics.graphql @@ -0,0 +1,19 @@ +query CommentMetrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) { + comments: commentMetrics(from: $from, to: $to, sort: $sort) { + id + body + user { + status + username + } + asset { + id + title + } + created_at + action_summaries { + type: __typename + count + } + } +} diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js index 1628a4ac8..ceedffd9d 100644 --- a/client/coral-admin/src/graphql/queries/index.js +++ b/client/coral-admin/src/graphql/queries/index.js @@ -1,9 +1,10 @@ import {graphql} from 'react-apollo'; -import METRICS from './metrics.graphql'; +import ASSET_METRICS from './assetMetrics.graphql'; +import COMMENT_METRICS from './commentMetrics.graphql'; import MOD_QUEUE_QUERY from './modQueueQuery.graphql'; -export const mostFlags = graphql(METRICS, { +export const mostFlags = graphql(ASSET_METRICS, { options: () => { // currently hard-coded per Greg's advice @@ -19,7 +20,23 @@ export const mostFlags = graphql(METRICS, { } }); -export const mostLikes = graphql(METRICS, { +export const mostLikes = graphql(ASSET_METRICS, { + options: () => { + + // currently hard-coded per Greg's advice + const fiveMinutesAgo = new Date(); + fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5); + return { + variables: { + sort: 'LIKE', + from: fiveMinutesAgo.toISOString(), + to: new Date().toISOString() + } + }; + } +}); + +export const mostLikedComments = graphql(COMMENT_METRICS, { options: () => { // currently hard-coded per Greg's advice diff --git a/client/coral-sign-in/components/SignUpContent.js b/client/coral-sign-in/components/SignUpContent.js index 6a781675b..216349412 100644 --- a/client/coral-sign-in/components/SignUpContent.js +++ b/client/coral-sign-in/components/SignUpContent.js @@ -138,12 +138,9 @@ class SignUpContent extends React.Component {
}
- - {lang.t('signIn.alreadyHaveAnAccount')} - changeView('SIGNIN')}> - {lang.t('signIn.signIn')} - - + {lang.t('signIn.alreadyHaveAnAccount')} changeView('SIGNIN')}> + {lang.t('signIn.signIn')} +
); From 691d00121366f7f2e14bc2a65cd1e76b61343d2d Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Wed, 22 Feb 2017 10:49:48 -0700 Subject: [PATCH 08/24] simplify a bit --- client/coral-admin/src/containers/Dashboard/FlagWidget.js | 2 +- client/coral-admin/src/containers/Dashboard/LikeWidget.js | 2 +- client/coral-admin/src/graphql/queries/assetMetrics.graphql | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js index 4fb993d35..8c334d2b8 100644 --- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js +++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js @@ -15,7 +15,7 @@ const FlagWidget = (props) => { return ; } - const {data: {metrics: assets}} = props; + const {data: {assets}} = props; return (
diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js index 0f6ea2ba0..09dc5606e 100644 --- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js +++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js @@ -15,7 +15,7 @@ const LikeWidget = (props) => { return ; } - const {data: {metrics: assets}} = props; + const {data: {assets}} = props; return (
diff --git a/client/coral-admin/src/graphql/queries/assetMetrics.graphql b/client/coral-admin/src/graphql/queries/assetMetrics.graphql index caed174b4..de0eb1fe8 100644 --- a/client/coral-admin/src/graphql/queries/assetMetrics.graphql +++ b/client/coral-admin/src/graphql/queries/assetMetrics.graphql @@ -13,7 +13,7 @@ fragment metrics on Asset { } query Metrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) { - metrics: assetMetrics(from: $from, to: $to, sort: $sort) { + assets: assetMetrics(from: $from, to: $to, sort: $sort) { ...metrics } } From 111b956522df820b008b112406cf51f3c4b7e744 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Wed, 22 Feb 2017 13:10:50 -0700 Subject: [PATCH 09/24] change index route to Dashboard component --- client/coral-admin/src/AppRouter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js index d96bacfe0..38d06dcb1 100644 --- a/client/coral-admin/src/AppRouter.js +++ b/client/coral-admin/src/AppRouter.js @@ -15,7 +15,7 @@ const routes = (
- + From e6b78a3e63fe3b5f336c1470ccbeee702afa1277 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Wed, 22 Feb 2017 13:33:50 -0700 Subject: [PATCH 10/24] change some copy --- client/coral-admin/src/containers/Dashboard/FlagWidget.js | 2 +- client/coral-admin/src/containers/Dashboard/LikeWidget.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js index 8c334d2b8..370010c35 100644 --- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js +++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js @@ -19,7 +19,7 @@ const FlagWidget = (props) => { return (
-

Top Ten Articles with the most flagged comments

+

Articles with the most flags

diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js index 09dc5606e..9c46fbbe0 100644 --- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js +++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js @@ -19,7 +19,7 @@ const LikeWidget = (props) => { return (
-

Top Ten Articles with the most likes

+

Articles with the most likes

From 9e759c7667ceebd1fd4b975f78db3f1333866b9d Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Wed, 22 Feb 2017 13:55:48 -0700 Subject: [PATCH 11/24] Adjusted BE beheviour --- .../Dashboard/MostLikedCommentsWidget.js | 8 ++- graph/loaders/metrics.js | 42 +++++++----- test/graph/loaders/metrics.js | 66 +++++++++++++++++++ 3 files changed, 96 insertions(+), 20 deletions(-) create mode 100644 test/graph/loaders/metrics.js diff --git a/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js b/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js index 6e7d03185..39f01b41b 100644 --- a/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js +++ b/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js @@ -1,13 +1,15 @@ import React from 'react'; import {compose} from 'react-apollo'; import {mostLikedComments} from 'coral-admin/src/graphql/queries'; -import I18n from 'coral-framework/modules/i18n/i18n'; -import translations from 'coral-admin/src/translations'; + +// import I18n from 'coral-framework/modules/i18n/i18n'; +// import translations from 'coral-admin/src/translations'; + import ModerationQueue from 'coral-admin/src/containers/ModerationQueue/ModerationQueue'; import {Spinner} from 'coral-ui'; import styles from './Widget.css'; -const lang = new I18n(translations); +// const lang = new I18n(translations); const MostLikedCommentsWidget = props => { diff --git a/graph/loaders/metrics.js b/graph/loaders/metrics.js index 8591ecefe..1b0719d0f 100644 --- a/graph/loaders/metrics.js +++ b/graph/loaders/metrics.js @@ -17,6 +17,10 @@ const getAssetMetrics = ({loaders: {Metrics, Assets}}, {from, to, sort, limit}) .then((actionSummaries) => { commentMetrics = actionSummaries.reduce((acc, {item_id, action_type, count}) => { + if (action_type !== sort) { + return acc; + } + if (!(item_id in acc)) { acc[item_id] = []; } @@ -47,29 +51,24 @@ const getAssetMetrics = ({loaders: {Metrics, Assets}}, {from, to, sort, limit}) })); return {action_summaries, id: asset_id}; - }); + }) + + .filter((asset) => { + let contextActionSummary = asset.action_summaries.find((({action_type}) => action_type === sort)); + if (contextActionSummary === null) { + return false; + } + + return true; + }) // Sort these metrics by the predefined sort order. This will ensure that // if the action summary does not exist on the object, that it is less // prefered over the one that does have it. - assetMetrics.sort((a, b) => { + .sort((a, b) => { let aActionSummary = a.action_summaries.find((({action_type}) => action_type === sort)); let bActionSummary = b.action_summaries.find((({action_type}) => action_type === sort)); - // If either a or b don't have this action type, then one of them will - // automatically win. - if (aActionSummary == null || bActionSummary == null) { - if (bActionSummary != null) { - return 1; - } - - if (aActionSummary != null) { - return -1; - } - - return 0; - } - // Both of them had an actionCount, hence we can determine that we could // compare the actual values directly. return bActionSummary.actionCount - aActionSummary.actionCount; @@ -138,7 +137,16 @@ const getCommentMetrics = ({loaders: {Metrics, Comments}}, {from, to, sort, limi commentActionSummaries = _.groupBy(actionSummaries, 'item_id'); - let commentIDs = _.uniq(actionSummaries.map(({item_id}) => item_id)); + // Grab the comment id's for comment where they have at least one of the + // actions being sorted by. + let commentIDs = Object.keys(commentActionSummaries).filter((item_id) => { + let contextActionSummary = commentActionSummaries[item_id].find(({action_type}) => action_type === sort); + if (contextActionSummary == null) { + return false; + } + + return true; + }); // Only keep the top `limit`. commentIDs = commentIDs.slice(0, limit); diff --git a/test/graph/loaders/metrics.js b/test/graph/loaders/metrics.js new file mode 100644 index 000000000..303b40897 --- /dev/null +++ b/test/graph/loaders/metrics.js @@ -0,0 +1,66 @@ +const {expect} = require('chai'); +const {graphql} = require('graphql'); + +const schema = require('../../../graph/schema'); +const Context = require('../../../graph/context'); +const UserModel = require('../../../models/user'); +const SettingsService = require('../../../services/settings'); +const ActionModel = require('../../../models/action'); +const CommentModel = require('../../../models/comment'); + +describe('graph.loaders.Metrics', () => { + beforeEach(() => SettingsService.init()); + + describe('#Comments', () => { + const query = ` + query CommentMetrics($from: Date!, $to: Date!) { + liked: commentMetrics(from: $from, to: $to, sort: LIKE) { + id + } + flagged: commentMetrics(from: $from, to: $to, sort: FLAG) { + id + } + } + `; + + describe('different comment states', () => { + + beforeEach(() => CommentModel.create([ + {id: '1', body: 'a new comment!'} + ])); + + [ + {liked: 0, flagged: 0, actions: []}, + {liked: 1, flagged: 0, actions: [{action_type: 'LIKE', item_id: '1', item_type: 'COMMENTS'}]}, + {liked: 0, flagged: 1, actions: [{action_type: 'FLAG', item_id: '1', item_type: 'COMMENTS'}]}, + {liked: 1, flagged: 1, actions: [ + {action_type: 'FLAG', item_id: '1', item_type: 'COMMENTS'}, + {action_type: 'LIKE', item_id: '1', item_type: 'COMMENTS'} + ]} + ].forEach(({liked, flagged, actions}) => { + + describe(`with actions=${actions.length}`, () => { + + beforeEach(() => ActionModel.create(actions)); + + it(`returns the correct amount of metrics liked=${liked} flagged=${flagged}`, () => { + const context = new Context({user: new UserModel({roles: ['ADMIN']})}); + + return graphql(schema, query, {}, context, { + from: (new Date()).setMinutes((new Date()).getMinutes() - 5), + to: (new Date()).setMinutes((new Date()).getMinutes() + 5) + }) + .then(({data, errors}) => { + expect(errors).to.be.undefined; + expect(data.liked).to.have.length(liked); + expect(data.flagged).to.have.length(flagged); + }); + }); + + }); + + }); + + }); + }); +}); From 2f314c6937069819b510502fa1a6a26c44220167 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Thu, 23 Feb 2017 14:29:51 -0700 Subject: [PATCH 12/24] omg, a bunch of UI madness --- .../src/containers/Dashboard/Dashboard.js | 79 ++++++++++++++++--- .../src/containers/Dashboard/FlagWidget.js | 12 +-- .../src/containers/Dashboard/LikeWidget.js | 8 +- .../Dashboard/MostLikedCommentsWidget.js | 63 ++++++++------- .../src/graphql/queries/assetMetrics.graphql | 19 ----- .../graphql/queries/commentMetrics.graphql | 19 ----- .../coral-admin/src/graphql/queries/index.js | 66 ++++------------ .../src/graphql/queries/metrics.graphql | 39 +++++++++ .../src/graphql/queries/mostFlags.graphql | 14 ---- 9 files changed, 164 insertions(+), 155 deletions(-) delete mode 100644 client/coral-admin/src/graphql/queries/assetMetrics.graphql delete mode 100644 client/coral-admin/src/graphql/queries/commentMetrics.graphql create mode 100644 client/coral-admin/src/graphql/queries/metrics.graphql delete mode 100644 client/coral-admin/src/graphql/queries/mostFlags.graphql diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js index 282772403..74bbce9fb 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.js +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js @@ -1,17 +1,76 @@ import React from 'react'; import styles from './Dashboard.css'; +import {graphql} from 'react-apollo'; +import {connect} from 'react-redux'; import FlagWidget from './FlagWidget'; import LikeWidget from './LikeWidget'; -import MostLikedCommentsWidget from './MostLikedCommentsWidget'; +import METRICS from 'coral-admin/src/graphql/queries/metrics.graphql'; +// import MostLikedCommentsWidget from './MostLikedCommentsWidget'; +import {showBanUserDialog, hideBanUserDialog} from 'coral-admin/src/actions/moderation'; +import {Spinner} from 'coral-ui'; -const Dashboard = () => { - return ( -
- - - -
- ); +class Dashboard extends React.Component { + + render () { + + if (this.props.data && this.props.data.loading) { + return ; + } + + console.log(this.props.data); + + const {data: {assetsByLike, assetsByFlag}} = this.props; + + console.log('assetsByLike', assetsByLike); + console.log('assetsByFlag', assetsByFlag); + + // const {moderation, settings} = this.props; + + return ( +
+ {assetsByFlag && } + {/**/} + {assetsByLike && } +
+ ); + } +} + +let fiveMinutesAgo = new Date(); +fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5); +fiveMinutesAgo = fiveMinutesAgo.toISOString(); +const now = new Date().toISOString(); + +const getMetrics = graphql(METRICS, { + options: () => { + + return { + variables: { + from: fiveMinutesAgo, + // from: '2017-02-23T16:09:44.235Z', + to: now + // to: '2017-02-23T19:30:23.251Z' + } + }; + } +}); + +const DashboardWithData = getMetrics(Dashboard); + +const mapStateToProps = state => { + return { + settings: state.settings.toJS(), + moderation: state.moderation.toJS() + }; }; -export default Dashboard; +const mapDispatchToProps = dispatch => ({ + showBanUserDialog: (user, commentId) => dispatch(showBanUserDialog(user, commentId)), + hideBanUserDialog: () => dispatch(hideBanUserDialog(false)) +}); + +export default connect(mapStateToProps, mapDispatchToProps)(DashboardWithData); diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js index 370010c35..ada1f03f3 100644 --- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js +++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js @@ -1,21 +1,13 @@ 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 = (props) => { - - if (props.data.loading) { - return ; - } - - const {data: {assets}} = props; + const {assets} = props; return (
@@ -57,4 +49,4 @@ const FlagWidget = (props) => { ); }; -export default compose(mostFlags)(FlagWidget); +export default FlagWidget; diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js index 9c46fbbe0..9358b1f63 100644 --- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js +++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js @@ -11,11 +11,7 @@ const lang = new I18n(translations); const LikeWidget = (props) => { - if (props.data.loading) { - return ; - } - - const {data: {assets}} = props; + const {assets} = props; return (
@@ -58,4 +54,4 @@ const LikeWidget = (props) => { ); }; -export default compose(mostLikes)(LikeWidget); +export default LikeWidget; diff --git a/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js b/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js index 39f01b41b..600a09c13 100644 --- a/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js +++ b/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js @@ -1,37 +1,44 @@ import React from 'react'; -import {compose} from 'react-apollo'; -import {mostLikedComments} from 'coral-admin/src/graphql/queries'; - -// import I18n from 'coral-framework/modules/i18n/i18n'; -// import translations from 'coral-admin/src/translations'; - +import I18n from 'coral-framework/modules/i18n/i18n'; +import translations from 'coral-admin/src/translations'; import ModerationQueue from 'coral-admin/src/containers/ModerationQueue/ModerationQueue'; import {Spinner} from 'coral-ui'; import styles from './Widget.css'; +import BanUserDialog from 'coral-admin/src/components/BanUserDialog'; -// const lang = new I18n(translations); +const lang = new I18n(translations); -const MostLikedCommentsWidget = props => { +class MostLikedCommentsWidget extends React.Component { - if (props.data.loading) { - return ; + render () { + // console.log('render! loading?', this.props.data.loading); + + // if (this.props.data.loading) { + // return ; + // } + + // const { + // comments, + // moderation, + // settings, + // showBanUserDialog, + // hideBanUserDialog + // } = this.props; + + // console.log('MostLikedCommentsWidget', comments); + + return ( +
+

{lang.t('most_liked_comments')}

+ {/* {}} + rejectComment={() => {}} />*/} +
+ ); } +} - const {data: {comments}} = props; - - console.log('MostLikedCommentsWidget', comments); - - return ( -
-

most liked comments

- {}} - acceptComment={() => {}} - rejectComment={() => {}} /> -
- ); -}; - -export default compose(mostLikedComments)(MostLikedCommentsWidget); +export default MostLikedCommentsWidget; diff --git a/client/coral-admin/src/graphql/queries/assetMetrics.graphql b/client/coral-admin/src/graphql/queries/assetMetrics.graphql deleted file mode 100644 index de0eb1fe8..000000000 --- a/client/coral-admin/src/graphql/queries/assetMetrics.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!) { - assets: assetMetrics(from: $from, to: $to, sort: $sort) { - ...metrics - } -} diff --git a/client/coral-admin/src/graphql/queries/commentMetrics.graphql b/client/coral-admin/src/graphql/queries/commentMetrics.graphql deleted file mode 100644 index 59a89739c..000000000 --- a/client/coral-admin/src/graphql/queries/commentMetrics.graphql +++ /dev/null @@ -1,19 +0,0 @@ -query CommentMetrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) { - comments: commentMetrics(from: $from, to: $to, sort: $sort) { - id - body - user { - status - username - } - asset { - id - title - } - created_at - action_summaries { - type: __typename - count - } - } -} diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js index ceedffd9d..d6011e056 100644 --- a/client/coral-admin/src/graphql/queries/index.js +++ b/client/coral-admin/src/graphql/queries/index.js @@ -1,56 +1,24 @@ import {graphql} from 'react-apollo'; -import ASSET_METRICS from './assetMetrics.graphql'; -import COMMENT_METRICS from './commentMetrics.graphql'; +import METRICS from './metrics.graphql'; import MOD_QUEUE_QUERY from './modQueueQuery.graphql'; -export const mostFlags = graphql(ASSET_METRICS, { - options: () => { - - // currently hard-coded per Greg's advice - const fiveMinutesAgo = new Date(); - fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5); - return { - variables: { - sort: 'FLAG', - from: fiveMinutesAgo.toISOString(), - to: new Date().toISOString() - } - }; - } -}); - -export const mostLikes = graphql(ASSET_METRICS, { - options: () => { - - // currently hard-coded per Greg's advice - const fiveMinutesAgo = new Date(); - fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5); - return { - variables: { - sort: 'LIKE', - from: fiveMinutesAgo.toISOString(), - to: new Date().toISOString() - } - }; - } -}); - -export const mostLikedComments = graphql(COMMENT_METRICS, { - options: () => { - - // currently hard-coded per Greg's advice - const fiveMinutesAgo = new Date(); - fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5); - return { - variables: { - sort: 'LIKE', - from: fiveMinutesAgo.toISOString(), - to: new Date().toISOString() - } - }; - } -}); +// export const getMetrics = graphql(METRICS, { +// options: () => { +// +// // currently hard-coded per Greg's advice +// const fiveMinutesAgo = new Date(); +// fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5); +// return { +// variables: { +// // from: fiveMinutesAgo.toISOString(), +// from: '2017-02-23T16:09:44.235Z', +// // to: new Date().toISOString() +// to: '2017-02-23T19:30:23.251Z' +// } +// }; +// } +// }); export const modQueueQuery = graphql(MOD_QUEUE_QUERY, { options: ({params: {id = null}}) => { diff --git a/client/coral-admin/src/graphql/queries/metrics.graphql b/client/coral-admin/src/graphql/queries/metrics.graphql new file mode 100644 index 000000000..4e713c0b7 --- /dev/null +++ b/client/coral-admin/src/graphql/queries/metrics.graphql @@ -0,0 +1,39 @@ +fragment metrics on Asset { + id + title + url + commentCount + author + created_at + action_summaries { + type: __typename + actionCount + actionableItemCount + } +} + +query Metrics ($from: Date!, $to: Date!) { + assetsByFlag: assetMetrics(from: $from, to: $to, sort: FLAG) { + ...metrics + } + assetsByLike: assetMetrics(from: $from, to: $to, sort: LIKE) { + ...metrics + } + mostLikedComments: commentMetrics(from: $from, to: $to, sort: LIKE) { + id + body + user { + status + username + } + asset { + id + title + } + created_at + action_summaries { + type: __typename + count + } + } +} diff --git a/client/coral-admin/src/graphql/queries/mostFlags.graphql b/client/coral-admin/src/graphql/queries/mostFlags.graphql deleted file mode 100644 index 182ea0c8b..000000000 --- a/client/coral-admin/src/graphql/queries/mostFlags.graphql +++ /dev/null @@ -1,14 +0,0 @@ -query Metrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) { - metrics(from: $from, to: $to, sort: $sort) { - id - title - url - commentCount - author - created_at - action_summaries { - actionCount - actionableItemCount - } - } -} From 30b6259e872dfd65851d6bffc913df96f54f3a21 Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Thu, 23 Feb 2017 14:43:25 -0700 Subject: [PATCH 13/24] Patched bug with asset metrics --- graph/loaders/metrics.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/graph/loaders/metrics.js b/graph/loaders/metrics.js index 1b0719d0f..a22cbb58f 100644 --- a/graph/loaders/metrics.js +++ b/graph/loaders/metrics.js @@ -31,7 +31,7 @@ const getAssetMetrics = ({loaders: {Metrics, Assets}}, {from, to, sort, limit}) }, {}); // Collect just the comment id's. - let commentIDs = _.uniq(actionSummaries.map((as) => as.item_id)); + let commentIDs = Object.keys(commentMetrics); // Find those comments. return Metrics.getSpecificComments.loadMany(commentIDs); From be25d6f56d9b2770493e05ee7886559e6ebb1587 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Thu, 23 Feb 2017 15:46:44 -0700 Subject: [PATCH 14/24] "works" --- .../src/containers/Dashboard/Dashboard.css | 1 - .../src/containers/Dashboard/Dashboard.js | 33 ++++++----- .../Dashboard/MostLikedCommentsWidget.js | 59 +++++++++---------- .../src/containers/Dashboard/Widget.css | 2 +- 4 files changed, 47 insertions(+), 48 deletions(-) diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.css b/client/coral-admin/src/containers/Dashboard/Dashboard.css index a23927d8a..72b9bd90c 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.css +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.css @@ -1,6 +1,5 @@ .Dashboard { display: flex; - flex-wrap: wrap; } .heading { diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js index 74bbce9fb..10d3b3ba3 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.js +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js @@ -1,12 +1,13 @@ import React from 'react'; import styles from './Dashboard.css'; -import {graphql} from 'react-apollo'; +import {graphql, compose} from 'react-apollo'; import {connect} from 'react-redux'; import FlagWidget from './FlagWidget'; import LikeWidget from './LikeWidget'; import METRICS from 'coral-admin/src/graphql/queries/metrics.graphql'; -// import MostLikedCommentsWidget from './MostLikedCommentsWidget'; +import MostLikedCommentsWidget from './MostLikedCommentsWidget'; import {showBanUserDialog, hideBanUserDialog} from 'coral-admin/src/actions/moderation'; +import {banUser, setCommentStatus} from 'coral-admin/src/graphql/mutations'; import {Spinner} from 'coral-ui'; class Dashboard extends React.Component { @@ -19,30 +20,34 @@ class Dashboard extends React.Component { console.log(this.props.data); - const {data: {assetsByLike, assetsByFlag}} = this.props; + const {data: {assetsByLike, assetsByFlag, mostLikedComments}} = this.props; console.log('assetsByLike', assetsByLike); console.log('assetsByFlag', assetsByFlag); - // const {moderation, settings} = this.props; + const {moderation, settings} = this.props; return (
- {assetsByFlag && } - {/* + */} - {assetsByLike && } + hideBanUserDialog={this.props.hideBanUserDialog} /> +
); } } -let fiveMinutesAgo = new Date(); -fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5); -fiveMinutesAgo = fiveMinutesAgo.toISOString(); +let then = new Date(); +then.setMinutes(then.getMinutes() - 205); +then = then.toISOString(); const now = new Date().toISOString(); const getMetrics = graphql(METRICS, { @@ -50,16 +55,14 @@ const getMetrics = graphql(METRICS, { return { variables: { - from: fiveMinutesAgo, - // from: '2017-02-23T16:09:44.235Z', + from: then, to: now - // to: '2017-02-23T19:30:23.251Z' } }; } }); -const DashboardWithData = getMetrics(Dashboard); +const DashboardWithData = compose(getMetrics, setCommentStatus, banUser)(Dashboard); const mapStateToProps = state => { return { diff --git a/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js b/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js index 600a09c13..5b0427acb 100644 --- a/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js +++ b/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js @@ -8,37 +8,34 @@ import BanUserDialog from 'coral-admin/src/components/BanUserDialog'; const lang = new I18n(translations); -class MostLikedCommentsWidget extends React.Component { +const MostLikedCommentsWidget = props => { + const { + comments, + moderation, + settings, + handleBanUser, + showBanUserDialog, + hideBanUserDialog, + acceptComment, + rejectComment + } = props; - render () { - // console.log('render! loading?', this.props.data.loading); - - // if (this.props.data.loading) { - // return ; - // } - - // const { - // comments, - // moderation, - // settings, - // showBanUserDialog, - // hideBanUserDialog - // } = this.props; - - // console.log('MostLikedCommentsWidget', comments); - - return ( -
-

{lang.t('most_liked_comments')}

- {/* {}} - rejectComment={() => {}} />*/} -
- ); - } -} + return ( +
+

{lang.t('most_liked_comments')}

+ + +
+ ); +}; export default MostLikedCommentsWidget; diff --git a/client/coral-admin/src/containers/Dashboard/Widget.css b/client/coral-admin/src/containers/Dashboard/Widget.css index d9cce2043..624b72519 100644 --- a/client/coral-admin/src/containers/Dashboard/Widget.css +++ b/client/coral-admin/src/containers/Dashboard/Widget.css @@ -3,7 +3,7 @@ margin: 10px 5px 5px 5px; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); padding: 15px; - width: calc(50% - 10px); + flex: 1; } .heading { From dc5f95ec7f20cba1f6cdcd6e88fe18dcff04a19c Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Fri, 24 Feb 2017 08:50:52 -0700 Subject: [PATCH 15/24] simplify moderationqueue --- .../src/containers/ModerationQueue/ModerationQueue.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js index a0e6332b5..b1792f720 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js @@ -12,7 +12,8 @@ const ModerationQueue = ({comments, ...props}) => {
    { - comments.map((comment, i) => { + comments.length + ? comments.map((comment, i) => { const status = comment.action_summaries ? 'FLAGGED' : comment.status; return { }; ModerationQueue.propTypes = { - suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired + suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired, currentAsset: PropTypes.object, showBanUserDialog: PropTypes.func.isRequired, rejectComment: PropTypes.func.isRequired, From c8c3c4acaf2adcc2c0e35b782ccfb6e63650c5ff Mon Sep 17 00:00:00 2001 From: riley Date: Fri, 24 Feb 2017 08:59:23 -0700 Subject: [PATCH 16/24] lint --- .../src/containers/Dashboard/LikeWidget.js | 3 --- .../Dashboard/MostLikedCommentsWidget.js | 1 - .../coral-admin/src/graphql/queries/index.js | 18 ------------------ 3 files changed, 22 deletions(-) diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js index 9358b1f63..076958bcd 100644 --- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js +++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js @@ -1,8 +1,5 @@ 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'; diff --git a/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js b/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js index 5b0427acb..0c41ac7c6 100644 --- a/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js +++ b/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js @@ -2,7 +2,6 @@ import React from 'react'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from 'coral-admin/src/translations'; import ModerationQueue from 'coral-admin/src/containers/ModerationQueue/ModerationQueue'; -import {Spinner} from 'coral-ui'; import styles from './Widget.css'; import BanUserDialog from 'coral-admin/src/components/BanUserDialog'; diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js index d6011e056..022522500 100644 --- a/client/coral-admin/src/graphql/queries/index.js +++ b/client/coral-admin/src/graphql/queries/index.js @@ -1,25 +1,7 @@ import {graphql} from 'react-apollo'; -import METRICS from './metrics.graphql'; import MOD_QUEUE_QUERY from './modQueueQuery.graphql'; -// export const getMetrics = graphql(METRICS, { -// options: () => { -// -// // currently hard-coded per Greg's advice -// const fiveMinutesAgo = new Date(); -// fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5); -// return { -// variables: { -// // from: fiveMinutesAgo.toISOString(), -// from: '2017-02-23T16:09:44.235Z', -// // to: new Date().toISOString() -// to: '2017-02-23T19:30:23.251Z' -// } -// }; -// } -// }); - export const modQueueQuery = graphql(MOD_QUEUE_QUERY, { options: ({params: {id = null}}) => { return { From c283f193deceb61e5f07b423cd0e103933ff341c Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Fri, 24 Feb 2017 09:07:03 -0700 Subject: [PATCH 17/24] remove console.log --- client/coral-admin/src/containers/Dashboard/Dashboard.js | 6 ------ client/coral-admin/src/containers/Dashboard/LikeWidget.js | 1 - 2 files changed, 7 deletions(-) diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js index 10d3b3ba3..51e46408d 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.js +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js @@ -18,13 +18,7 @@ class Dashboard extends React.Component { return ; } - console.log(this.props.data); - const {data: {assetsByLike, assetsByFlag, mostLikedComments}} = this.props; - - console.log('assetsByLike', assetsByLike); - console.log('assetsByFlag', assetsByFlag); - const {moderation, settings} = this.props; return ( diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js index 076958bcd..82eecb049 100644 --- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js +++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js @@ -29,7 +29,6 @@ const LikeWidget = (props) => { ? 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 (
From f5277ce5e3cdbabd9423b8b825bfec52951d9677 Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Fri, 24 Feb 2017 09:56:18 -0700 Subject: [PATCH 18/24] Patched silly bug --- client/.eslintrc.json | 3 +- graph/loaders/metrics.js | 18 +------ test/graph/loaders/metrics.js | 89 ++++++++++++++++++++++++++++++++++- 3 files changed, 92 insertions(+), 18 deletions(-) diff --git a/client/.eslintrc.json b/client/.eslintrc.json index a935eaec6..1144f985d 100644 --- a/client/.eslintrc.json +++ b/client/.eslintrc.json @@ -18,6 +18,7 @@ ], "rules": { "react/jsx-uses-react": "error", - "react/jsx-uses-vars": "error" + "react/jsx-uses-vars": "error", + "no-console": ["warn", { "allow": ["warn", "error"] }] } } diff --git a/graph/loaders/metrics.js b/graph/loaders/metrics.js index a22cbb58f..2627d82d9 100644 --- a/graph/loaders/metrics.js +++ b/graph/loaders/metrics.js @@ -2,13 +2,12 @@ const _ = require('lodash'); const DataLoader = require('dataloader'); const {objectCacheKeyFn} = require('./util'); -const CommentModel = require('../../models/comment'); const ActionModel = require('../../models/action'); /** * Returns a list of assets with action metadata included on the models. */ -const getAssetMetrics = ({loaders: {Metrics, Assets}}, {from, to, sort, limit}) => { +const getAssetMetrics = ({loaders: {Metrics, Assets, Comments}}, {from, to, sort, limit}) => { let commentMetrics = {}; let assetMetrics = []; @@ -34,7 +33,7 @@ const getAssetMetrics = ({loaders: {Metrics, Assets}}, {from, to, sort, limit}) let commentIDs = Object.keys(commentMetrics); // Find those comments. - return Metrics.getSpecificComments.loadMany(commentIDs); + return Comments.get.loadMany(commentIDs); }) .then((comments) => { @@ -202,21 +201,8 @@ const getRecentActions = (context, {from, to}) => { ]); }; -const getSpecificComments = (context, ids) => { - return CommentModel.find({ - id: { - $in: ids - } - }) - .select({ - id: 1, - asset_id: 1 - }); -}; - module.exports = (context) => ({ Metrics: { - getSpecificComments: new DataLoader((ids) => getSpecificComments(context, ids)), getRecentActions: new DataLoader(([{from, to}]) => getRecentActions(context, {from, to}).then((as) => [as]), { batch: false, cacheKeyFn: objectCacheKeyFn('from', 'to') diff --git a/test/graph/loaders/metrics.js b/test/graph/loaders/metrics.js index 303b40897..032a59536 100644 --- a/test/graph/loaders/metrics.js +++ b/test/graph/loaders/metrics.js @@ -4,6 +4,7 @@ const {graphql} = require('graphql'); const schema = require('../../../graph/schema'); const Context = require('../../../graph/context'); const UserModel = require('../../../models/user'); +const AssetModel = require('../../../models/asset'); const SettingsService = require('../../../services/settings'); const ActionModel = require('../../../models/action'); const CommentModel = require('../../../models/comment'); @@ -26,7 +27,9 @@ describe('graph.loaders.Metrics', () => { describe('different comment states', () => { beforeEach(() => CommentModel.create([ - {id: '1', body: 'a new comment!'} + {id: '1', body: 'a new comment!'}, + {id: '2', body: 'a new comment!'}, + {id: '3', body: 'a new comment!'} ])); [ @@ -36,6 +39,12 @@ describe('graph.loaders.Metrics', () => { {liked: 1, flagged: 1, actions: [ {action_type: 'FLAG', item_id: '1', item_type: 'COMMENTS'}, {action_type: 'LIKE', item_id: '1', item_type: 'COMMENTS'} + ]}, + {liked: 3, flagged: 1, actions: [ + {action_type: 'LIKE', item_id: '1', item_type: 'COMMENTS'}, + {action_type: 'LIKE', item_id: '2', item_type: 'COMMENTS'}, + {action_type: 'LIKE', item_id: '3', item_type: 'COMMENTS'}, + {action_type: 'FLAG', item_id: '3', item_type: 'COMMENTS'} ]} ].forEach(({liked, flagged, actions}) => { @@ -63,4 +72,82 @@ describe('graph.loaders.Metrics', () => { }); }); + + describe('#Assets', () => { + const query = ` + fragment metrics on Asset { + id + action_summaries { + type: __typename + actionCount + actionableItemCount + } + } + + query Metrics($from: Date!, $to: Date!) { + assetsByFlag: assetMetrics(from: $from, to: $to, sort: FLAG) { + ...metrics + } + assetsByLike: assetMetrics(from: $from, to: $to, sort: LIKE) { + ...metrics + } + } + `; + + describe('different comment states', () => { + + beforeEach(() => Promise.all([ + AssetModel.create([ + {id: 'a1', url: 'http://localhost:3030/article/1'}, + {id: 'a2', url: 'http://localhost:3030/article/2'} + ]), + CommentModel.create([ + {id: 'c1', asset_id: 'a1', body: 'a new comment!'}, + {id: 'c2', asset_id: 'a1', body: 'a new comment!'}, + {id: 'c3', asset_id: 'a1', body: 'a new comment!'} + ]) + ])); + + [ + {liked: 0, flagged: 0, actions: []}, + {liked: 1, flagged: 0, actions: [{action_type: 'LIKE', item_id: 'c1', item_type: 'COMMENTS'}]}, + {liked: 0, flagged: 1, actions: [{action_type: 'FLAG', item_id: 'c1', item_type: 'COMMENTS'}]}, + {liked: 1, flagged: 1, actions: [ + {action_type: 'FLAG', item_id: 'c1', item_type: 'COMMENTS'}, + {action_type: 'LIKE', item_id: 'c1', item_type: 'COMMENTS'} + ]}, + {liked: 1, flagged: 1, actions: [ + {action_type: 'LIKE', item_id: 'c1', item_type: 'COMMENTS'}, + {action_type: 'LIKE', item_id: 'c2', item_type: 'COMMENTS'}, + {action_type: 'LIKE', item_id: 'c3', item_type: 'COMMENTS'}, + {action_type: 'FLAG', item_id: 'c3', item_type: 'COMMENTS'} + ]} + ].forEach(({liked, flagged, actions}) => { + + describe(`with actions=${actions.length}`, () => { + + beforeEach(() => ActionModel.create(actions)); + + it(`returns the correct amount of metrics liked=${liked} flagged=${flagged}`, () => { + const context = new Context({user: new UserModel({roles: ['ADMIN']})}); + + return graphql(schema, query, {}, context, { + from: (new Date()).setMinutes((new Date()).getMinutes() - 5), + to: (new Date()).setMinutes((new Date()).getMinutes() + 5) + }) + .then(({data, errors}) => { + console.log(JSON.stringify(errors, null, 2)); + + expect(errors).to.be.undefined; + expect(data.assetsByLike).to.have.length(liked); + expect(data.assetsByFlag).to.have.length(flagged); + }); + }); + + }); + + }); + + }); + }); }); From 799727264e6a42ad7c82925269af8760bbfe9628 Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Fri, 24 Feb 2017 09:57:57 -0700 Subject: [PATCH 19/24] Removed log --- test/graph/loaders/metrics.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/test/graph/loaders/metrics.js b/test/graph/loaders/metrics.js index 032a59536..29f2eeff1 100644 --- a/test/graph/loaders/metrics.js +++ b/test/graph/loaders/metrics.js @@ -136,8 +136,6 @@ describe('graph.loaders.Metrics', () => { to: (new Date()).setMinutes((new Date()).getMinutes() + 5) }) .then(({data, errors}) => { - console.log(JSON.stringify(errors, null, 2)); - expect(errors).to.be.undefined; expect(data.assetsByLike).to.have.length(liked); expect(data.assetsByFlag).to.have.length(flagged); From 38e093aac32e48db9606ec46047ae4a79c4503c1 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Fri, 24 Feb 2017 11:26:23 -0700 Subject: [PATCH 20/24] remove most liked comments widget --- .../src/containers/Dashboard/Dashboard.js | 12 ++++--- .../src/containers/Dashboard/FlagWidget.js | 3 -- .../src/containers/Dashboard/LikeWidget.js | 3 -- .../src/graphql/queries/metrics.graphql | 34 +++++++++---------- client/coral-admin/src/translations.json | 4 +-- 5 files changed, 27 insertions(+), 29 deletions(-) diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js index 51e46408d..ba840c627 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.js +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js @@ -5,7 +5,8 @@ import {connect} from 'react-redux'; import FlagWidget from './FlagWidget'; import LikeWidget from './LikeWidget'; import METRICS from 'coral-admin/src/graphql/queries/metrics.graphql'; -import MostLikedCommentsWidget from './MostLikedCommentsWidget'; + +// import MostLikedCommentsWidget from './MostLikedCommentsWidget'; import {showBanUserDialog, hideBanUserDialog} from 'coral-admin/src/actions/moderation'; import {banUser, setCommentStatus} from 'coral-admin/src/graphql/mutations'; import {Spinner} from 'coral-ui'; @@ -18,12 +19,14 @@ class Dashboard extends React.Component { return ; } - const {data: {assetsByLike, assetsByFlag, mostLikedComments}} = this.props; - const {moderation, settings} = this.props; + const {data: {assetsByLike, assetsByFlag/* , mostLikedComments*/}} = this.props; + + // const {moderation, settings} = this.props; return (
+ {/* + */}
); @@ -40,7 +44,7 @@ class Dashboard extends React.Component { } let then = new Date(); -then.setMinutes(then.getMinutes() - 205); +then.setMinutes(then.getMinutes() - 5); then = then.toISOString(); const now = new Date().toISOString(); diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js index ada1f03f3..34c67086e 100644 --- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js +++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js @@ -18,7 +18,6 @@ const FlagWidget = (props) => {
{/* empty on purpose */} - @@ -27,7 +26,6 @@ const FlagWidget = (props) => { 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 ( @@ -36,7 +34,6 @@ const FlagWidget = (props) => {

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

- ); diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js index 82eecb049..dd92a94ca 100644 --- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js +++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js @@ -18,7 +18,6 @@ const LikeWidget = (props) => { {/* empty on purpose */} - @@ -27,7 +26,6 @@ const LikeWidget = (props) => { { 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 ( @@ -36,7 +34,6 @@ const LikeWidget = (props) => { {asset.title}

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

- diff --git a/client/coral-admin/src/graphql/queries/metrics.graphql b/client/coral-admin/src/graphql/queries/metrics.graphql index 4e713c0b7..da5125a48 100644 --- a/client/coral-admin/src/graphql/queries/metrics.graphql +++ b/client/coral-admin/src/graphql/queries/metrics.graphql @@ -19,21 +19,21 @@ query Metrics ($from: Date!, $to: Date!) { assetsByLike: assetMetrics(from: $from, to: $to, sort: LIKE) { ...metrics } - mostLikedComments: commentMetrics(from: $from, to: $to, sort: LIKE) { - id - body - user { - status - username - } - asset { - id - title - } - created_at - action_summaries { - type: __typename - count - } - } +# mostLikedComments: commentMetrics(from: $from, to: $to, sort: LIKE) { +# id +# body +# user { +# status +# username +# } +# asset { +# id +# title +# } +# created_at +# action_summaries { +# type: __typename +# count +# } +# } } diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json index f3deb6792..92e5d098a 100644 --- a/client/coral-admin/src/translations.json +++ b/client/coral-admin/src/translations.json @@ -112,7 +112,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" + "comment_count": "comments" }, "streams": { "empty_result": "No assets match this search. Maybe try widening your search?", @@ -222,7 +222,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" + "comment_count": "comentarios" }, "streams": { "empty_result": "No se encuentro articulo con esta busqueda. Tal vez extender la busqueda?", From 1058bff8ad66a194cf1a8516f032c14ba9773c81 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Fri, 24 Feb 2017 11:30:59 -0700 Subject: [PATCH 21/24] remove logs --- client/coral-admin/src/actions/install.js | 3 +- .../containers/Configure/CommentSettings.js | 1 - .../ModerationQueue/ModerationContainer.js | 1 - client/coral-framework/actions/auth.js | 3 +- client/coral-plugin-commentbox/CommentBox.js | 1 - .../RileysAwesomeCommentBox.js | 58 ---------- client/coral-plugin-stream/Stream.js | 100 ------------------ .../coral-settings/components/NotLoggedIn.js | 1 - 8 files changed, 2 insertions(+), 166 deletions(-) delete mode 100644 client/coral-plugin-stream/RileysAwesomeCommentBox.js delete mode 100644 client/coral-plugin-stream/Stream.js diff --git a/client/coral-admin/src/actions/install.js b/client/coral-admin/src/actions/install.js index c1d05d253..9fc308d2f 100644 --- a/client/coral-admin/src/actions/install.js +++ b/client/coral-admin/src/actions/install.js @@ -75,8 +75,7 @@ export const submitUser = () => (dispatch, getState) => { dispatch(installRequest()); coralApi('/setup', {method: 'POST', body: data}) .then(result => { - console.log(result); - dispatch(installSuccess()); + dispatch(installSuccess(result)); dispatch(nextStep()); }) .catch(error => { diff --git a/client/coral-admin/src/containers/Configure/CommentSettings.js b/client/coral-admin/src/containers/Configure/CommentSettings.js index 5a14cf565..90057c5fe 100644 --- a/client/coral-admin/src/containers/Configure/CommentSettings.js +++ b/client/coral-admin/src/containers/Configure/CommentSettings.js @@ -52,7 +52,6 @@ const updateClosedMessage = (updateSettings) => (event) => { }; const updateCustomCssUrl = (updateSettings) => (event) => { - console.log('updateCustomCssUrl', event.target.value); const customCssUrl = event.target.value; updateSettings({customCssUrl}); }; diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 9c68d0728..a7d7110ae 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -54,7 +54,6 @@ class ModerationContainer extends Component { } if (data.error) { - console.log(data); return
Error
; } diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js index 4a12245eb..418acc5bb 100644 --- a/client/coral-framework/actions/auth.js +++ b/client/coral-framework/actions/auth.js @@ -192,9 +192,8 @@ export const requestConfirmEmail = (email, redirectUri) => dispatch => { dispatch(verifyEmailSuccess()); }) .catch(err => { - console.log('failed to send email verification', err); // email might have already been verifyed - dispatch(verifyEmailFailure()); + dispatch(verifyEmailFailure(err)); }); }; diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js index 3d895df07..004f294b2 100644 --- a/client/coral-plugin-commentbox/CommentBox.js +++ b/client/coral-plugin-commentbox/CommentBox.js @@ -110,7 +110,6 @@ class CommentBox extends Component { cStyle='darkGrey' className={`${name}-cancel-button`} onClick={() => { - console.log('cancel button in comment box'); cancelButtonClicked(''); }}> {lang.t('cancel')} diff --git a/client/coral-plugin-stream/RileysAwesomeCommentBox.js b/client/coral-plugin-stream/RileysAwesomeCommentBox.js deleted file mode 100644 index 73fa6407d..000000000 --- a/client/coral-plugin-stream/RileysAwesomeCommentBox.js +++ /dev/null @@ -1,58 +0,0 @@ -import React, {Component} from 'react'; -import {graphql} from 'react-apollo'; -import gql from 'graphql-tag'; - -export class RileysAwesomeCommentBox extends Component { - - postComment() { - console.log(this.props); - console.log('postComment', this.props.asset_id); - this.props.mutate({ - variables: { - asset_id: this.props.asset_id, - body: this.textarea.value, - parent_id: null - } - }).then(({data}) => { - console.log('it workt'); - console.log(data); - }); - } - - render() { - return
- - -
; - } -} - -const postComment = gql` - fragment commentView on Comment { - id - body - user { - name: username - } - actions { - type: action_type - count - current: current_user { - id - created_at - } - } - } - - mutation CreateComment ($asset_id: ID!, $parent_id: ID, $body: String!) { - createComment(asset_id:$asset_id, parent_id:$parent_id, body:$body) { - ...commentView - } - } -`; - -const RileysAwesomeCommentBoxWithData = graphql( - postComment -)(RileysAwesomeCommentBox); - -export default RileysAwesomeCommentBoxWithData; diff --git a/client/coral-plugin-stream/Stream.js b/client/coral-plugin-stream/Stream.js deleted file mode 100644 index 72e03d4ae..000000000 --- a/client/coral-plugin-stream/Stream.js +++ /dev/null @@ -1,100 +0,0 @@ -import React, {Component} from 'react'; -import {graphql} from 'react-apollo'; -import gql from 'graphql-tag'; -import {fetchSignIn} from 'coral-framework/actions/auth'; -import RileysAwesomeCommentBox from 'coral-plugin-stream/RileysAwesomeCommentBox'; - -const assetID = '6187a94b-0b6d-4a96-ac6b-62b529cd8410'; - -// MyComponent is a "presentational" or apollo-unaware component, -// It could be a simple React class: -class Stream extends Component { - - constructor(props) { - super(props); - } - - logMeIn() { - fetchSignIn({email: 'your@example.com', password: 'dfasidfaisdufoiausdfoiuaspdoifas'})(() => {}); - } - - render() { - const {data} = this.props; - return
- - { - data.loading - ? 'loading!' - :
- -

Asset ID: {data.asset.id}

-
    - { - data.asset.comments.map(comment => { - return
  • - {comment.body} [{comment.id}] -
      - { - comment.replies.map(reply => { - return
    • {reply.body}
    • ; - }) - } -
    -
  • ; - }) - } -
-
- } -
; - } -} - -// Initialize GraphQL queries or mutations with the gql tag -const StreamQuery = gql`fragment commentView on Comment { - id - body - user { - name: username - } - tags { - name - } - actions { - type: action_type - count - current: current_user { - id - created_at - } - } -} - -query AssetQuery($asset_id: ID!) { - asset(id: $asset_id) { - id - title - url - commentCount - comments { - ...commentView - replies { - ...commentView - } - } - } -}`; - -// We then can use `graphql` to pass the query results returned by MyQuery -// to MyComponent as a prop (and update them as the results change) -const StreamWithData = graphql( - StreamQuery, { - options: { - variables: { - asset_id: assetID - } - } - } -)(Stream); - -export default StreamWithData; diff --git a/client/coral-settings/components/NotLoggedIn.js b/client/coral-settings/components/NotLoggedIn.js index 2e2b64181..acd3ae7e6 100644 --- a/client/coral-settings/components/NotLoggedIn.js +++ b/client/coral-settings/components/NotLoggedIn.js @@ -10,7 +10,6 @@ export default ({showSignInDialog}) => ( From aefcb29877015b15dd4fd2ae4467c5f3c1183ffb Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Fri, 24 Feb 2017 12:58:06 -0700 Subject: [PATCH 22/24] remove comment count from results --- client/coral-admin/src/containers/Dashboard/FlagWidget.js | 2 -- client/coral-admin/src/containers/Dashboard/LikeWidget.js | 2 -- client/coral-admin/src/graphql/queries/metrics.graphql | 1 - 3 files changed, 5 deletions(-) diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js index 34c67086e..537b89b8f 100644 --- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js +++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js @@ -18,7 +18,6 @@ const FlagWidget = (props) => {
{/* empty on purpose */} - @@ -34,7 +33,6 @@ const FlagWidget = (props) => {

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

- ); }) diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js index dd92a94ca..ed6a0c0ae 100644 --- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js +++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js @@ -19,7 +19,6 @@ const LikeWidget = (props) => { {/* empty on purpose */} - @@ -35,7 +34,6 @@ const LikeWidget = (props) => {

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

- ); }) diff --git a/client/coral-admin/src/graphql/queries/metrics.graphql b/client/coral-admin/src/graphql/queries/metrics.graphql index da5125a48..68de89cab 100644 --- a/client/coral-admin/src/graphql/queries/metrics.graphql +++ b/client/coral-admin/src/graphql/queries/metrics.graphql @@ -2,7 +2,6 @@ fragment metrics on Asset { id title url - commentCount author created_at action_summaries { From 65e8e42ae6ad42dede3b5d00154237348ea43582 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Tue, 28 Feb 2017 10:51:14 -0700 Subject: [PATCH 23/24] remove query from Dashboard component per belen's advice --- .../src/containers/Dashboard/Dashboard.js | 47 ++++--------------- .../coral-admin/src/graphql/queries/index.js | 13 +++++ client/coral-admin/src/reducers/settings.js | 9 ++++ 3 files changed, 30 insertions(+), 39 deletions(-) diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js index ba840c627..96e837a9e 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.js +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js @@ -1,14 +1,12 @@ import React from 'react'; import styles from './Dashboard.css'; -import {graphql, compose} from 'react-apollo'; +import {compose} from 'react-apollo'; import {connect} from 'react-redux'; +import {getMetrics} from 'coral-admin/src/graphql/queries'; import FlagWidget from './FlagWidget'; import LikeWidget from './LikeWidget'; -import METRICS from 'coral-admin/src/graphql/queries/metrics.graphql'; - -// import MostLikedCommentsWidget from './MostLikedCommentsWidget'; import {showBanUserDialog, hideBanUserDialog} from 'coral-admin/src/actions/moderation'; -import {banUser, setCommentStatus} from 'coral-admin/src/graphql/mutations'; + import {Spinner} from 'coral-ui'; class Dashboard extends React.Component { @@ -19,49 +17,17 @@ class Dashboard extends React.Component { return ; } - const {data: {assetsByLike, assetsByFlag/* , mostLikedComments*/}} = this.props; - - // const {moderation, settings} = this.props; + const {data: {assetsByLike, assetsByFlag}} = this.props; return (
- {/* - - */}
); } } -let then = new Date(); -then.setMinutes(then.getMinutes() - 5); -then = then.toISOString(); -const now = new Date().toISOString(); - -const getMetrics = graphql(METRICS, { - options: () => { - - return { - variables: { - from: then, - to: now - } - }; - } -}); - -const DashboardWithData = compose(getMetrics, setCommentStatus, banUser)(Dashboard); - const mapStateToProps = state => { return { settings: state.settings.toJS(), @@ -74,4 +40,7 @@ const mapDispatchToProps = dispatch => ({ hideBanUserDialog: () => dispatch(hideBanUserDialog(false)) }); -export default connect(mapStateToProps, mapDispatchToProps)(DashboardWithData); +export default compose( + connect(mapStateToProps, mapDispatchToProps), + getMetrics +)(Dashboard); diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js index 97320591f..a2140a502 100644 --- a/client/coral-admin/src/graphql/queries/index.js +++ b/client/coral-admin/src/graphql/queries/index.js @@ -1,6 +1,7 @@ import {graphql} from 'react-apollo'; import MOD_QUEUE_QUERY from './modQueueQuery.graphql'; +import METRICS from './metrics.graphql'; export const modQueueQuery = graphql(MOD_QUEUE_QUERY, { options: ({params: {id = null}}) => { @@ -17,6 +18,18 @@ export const modQueueQuery = graphql(MOD_QUEUE_QUERY, { }) }); +export const getMetrics = graphql(METRICS, { + options: ({settings: {dashboardWindowStart, dashboardWindowEnd}}) => { + + return { + variables: { + from: dashboardWindowStart, + to: dashboardWindowEnd + } + }; + } +}); + export const modQueueResort = (id, fetchMore) => (sort) => { return fetchMore({ query: MOD_QUEUE_QUERY, diff --git a/client/coral-admin/src/reducers/settings.js b/client/coral-admin/src/reducers/settings.js index a02cac198..a6e0c9339 100644 --- a/client/coral-admin/src/reducers/settings.js +++ b/client/coral-admin/src/reducers/settings.js @@ -1,11 +1,20 @@ import {Map, List} from 'immutable'; import * as actions from '../actions/settings'; +// this is initialized here because +// currently you have to reload the dashboard to get new stats +// cleaner updates are planned in the future. +const DASHBOARD_WINDOW_MINUTES = 5; +let then = new Date(); +then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES); + const initialState = Map({ wordlist: Map({ banned: List(), suspect: List() }), + dashboardWindowStart: then.toISOString(), + dashboardWindowEnd: new Date().toISOString(), domains: Map({ whitelist: List() }), From 86a6b545cc637cfcc9284281fadf17610374078a Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Tue, 28 Feb 2017 11:15:44 -0700 Subject: [PATCH 24/24] create a fragment for asset metrics. add some comments --- .../fragments/assetMetricsView.graphql | 12 ++++++ .../coral-admin/src/graphql/queries/index.js | 2 +- .../src/graphql/queries/metrics.graphql | 38 ------------------- .../src/graphql/queries/metricsQuery.graphql | 10 +++++ client/coral-admin/src/reducers/settings.js | 2 + 5 files changed, 25 insertions(+), 39 deletions(-) create mode 100644 client/coral-admin/src/graphql/fragments/assetMetricsView.graphql delete mode 100644 client/coral-admin/src/graphql/queries/metrics.graphql create mode 100644 client/coral-admin/src/graphql/queries/metricsQuery.graphql diff --git a/client/coral-admin/src/graphql/fragments/assetMetricsView.graphql b/client/coral-admin/src/graphql/fragments/assetMetricsView.graphql new file mode 100644 index 000000000..37335aeaa --- /dev/null +++ b/client/coral-admin/src/graphql/fragments/assetMetricsView.graphql @@ -0,0 +1,12 @@ +fragment metrics on Asset { + id + title + url + author + created_at + action_summaries { + type: __typename + actionCount + actionableItemCount + } +} diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js index a2140a502..c4a30ad44 100644 --- a/client/coral-admin/src/graphql/queries/index.js +++ b/client/coral-admin/src/graphql/queries/index.js @@ -1,7 +1,7 @@ import {graphql} from 'react-apollo'; import MOD_QUEUE_QUERY from './modQueueQuery.graphql'; -import METRICS from './metrics.graphql'; +import METRICS from './metricsQuery.graphql'; export const modQueueQuery = graphql(MOD_QUEUE_QUERY, { options: ({params: {id = null}}) => { diff --git a/client/coral-admin/src/graphql/queries/metrics.graphql b/client/coral-admin/src/graphql/queries/metrics.graphql deleted file mode 100644 index 68de89cab..000000000 --- a/client/coral-admin/src/graphql/queries/metrics.graphql +++ /dev/null @@ -1,38 +0,0 @@ -fragment metrics on Asset { - id - title - url - author - created_at - action_summaries { - type: __typename - actionCount - actionableItemCount - } -} - -query Metrics ($from: Date!, $to: Date!) { - assetsByFlag: assetMetrics(from: $from, to: $to, sort: FLAG) { - ...metrics - } - assetsByLike: assetMetrics(from: $from, to: $to, sort: LIKE) { - ...metrics - } -# mostLikedComments: commentMetrics(from: $from, to: $to, sort: LIKE) { -# id -# body -# user { -# status -# username -# } -# asset { -# id -# title -# } -# created_at -# action_summaries { -# type: __typename -# count -# } -# } -} diff --git a/client/coral-admin/src/graphql/queries/metricsQuery.graphql b/client/coral-admin/src/graphql/queries/metricsQuery.graphql new file mode 100644 index 000000000..42a9fb70e --- /dev/null +++ b/client/coral-admin/src/graphql/queries/metricsQuery.graphql @@ -0,0 +1,10 @@ +#import "../fragments/assetMetricsView.graphql" + +query Metrics ($from: Date!, $to: Date!) { + assetsByFlag: assetMetrics(from: $from, to: $to, sort: FLAG) { + ...metrics + } + assetsByLike: assetMetrics(from: $from, to: $to, sort: LIKE) { + ...metrics + } +} diff --git a/client/coral-admin/src/reducers/settings.js b/client/coral-admin/src/reducers/settings.js index a6e0c9339..f74eb659f 100644 --- a/client/coral-admin/src/reducers/settings.js +++ b/client/coral-admin/src/reducers/settings.js @@ -4,6 +4,8 @@ import * as actions from '../actions/settings'; // this is initialized here because // currently you have to reload the dashboard to get new stats // cleaner updates are planned in the future. +// TODO: if there are more than two fields for the dashboard being created here, +// please create a new reducer specifically for the Dashboard. const DASHBOARD_WINDOW_MINUTES = 5; let then = new Date(); then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES);
{index + 1}.{lang.t('streams.article')} {lang.t('modqueue.flagged')}{lang.t('modqueue.likes')} {lang.t('dashboard.comment_count')}
{index + 1}. {flagSummary ? flagSummary.actionCount : 0}{likeSummary ? likeSummary.actionCount : 0} {asset.commentCount}
{lang.t('streams.article')}{lang.t('modqueue.flagged')} {lang.t('modqueue.likes')} {lang.t('dashboard.comment_count')}
{flagSummary ? flagSummary.actionCount : 0} {likeSummary ? likeSummary.actionCount : 0} {asset.commentCount}
{lang.t('streams.article')} {lang.t('modqueue.flagged')}{lang.t('dashboard.comment_count')}
{flagSummary ? flagSummary.actionCount : 0}{asset.commentCount}
{lang.t('streams.article')} {lang.t('modqueue.likes')}{lang.t('dashboard.comment_count')}
{likeSummary ? likeSummary.actionCount : 0}{asset.commentCount}