From ea6afb0b417ce59accd733705df1ee8ff85556d2 Mon Sep 17 00:00:00 2001 From: Sarah Kehoe <161879347+sarahkeh@users.noreply.github.com> Date: Fri, 4 Oct 2024 11:56:46 -0700 Subject: [PATCH] Feature/CV2-5319-trash-relay-article-refresh (#2142) * relay updates * Reload the current list after trash/recover operation * sidebar updates partially complete * Updated sidebar to remove ArticleCoreListCounter and handle the count in the ArticlesDrawer queryRenderer instead, renamed ProjectsListCounter to DrawerListCounter to make it easier to know what it refers to, prop sorting * cleanup of unused relay config values and team value * clean up of unnecessary props and queried values --------- Co-authored-by: Alexandre Amorim --- .../app/components/drawer/DrawerArticles.json | 5 ++ .../article/ArticleCoreListCounter.js | 56 ------------------- src/app/components/article/ArticleTrash.js | 14 ++++- src/app/components/drawer/DrawerArticles.js | 17 ++++-- ...ctsListCounter.js => DrawerListCounter.js} | 9 ++- ...nter.test.js => DrawerListCounter.test.js} | 10 ++-- .../Projects/ProjectsCoreListCounter.js | 4 +- .../drawer/Projects/ProjectsListItem.js | 21 ++++--- 8 files changed, 49 insertions(+), 87 deletions(-) delete mode 100644 src/app/components/article/ArticleCoreListCounter.js rename src/app/components/drawer/Projects/{ProjectsListCounter.js => DrawerListCounter.js} (73%) rename src/app/components/drawer/Projects/{ProjectsListCounter.test.js => DrawerListCounter.test.js} (56%) diff --git a/localization/react-intl/src/app/components/drawer/DrawerArticles.json b/localization/react-intl/src/app/components/drawer/DrawerArticles.json index 9af9c324c5..596f7c7cc9 100644 --- a/localization/react-intl/src/app/components/drawer/DrawerArticles.json +++ b/localization/react-intl/src/app/components/drawer/DrawerArticles.json @@ -23,5 +23,10 @@ "id": "projectsComponent.published", "description": "Label for a list displayed on the left sidebar that includes items that have published reports", "defaultMessage": "Published" + }, + { + "id": "projectsComponent.trash", + "description": "Label for a list displayed on the left sidebar that includes items that have been marked as Trashed", + "defaultMessage": "Trash" } ] \ No newline at end of file diff --git a/src/app/components/article/ArticleCoreListCounter.js b/src/app/components/article/ArticleCoreListCounter.js deleted file mode 100644 index 5d027cbb1d..0000000000 --- a/src/app/components/article/ArticleCoreListCounter.js +++ /dev/null @@ -1,56 +0,0 @@ -/* eslint-disable react/sort-prop-types */ -import React from 'react'; -import { QueryRenderer, graphql } from 'react-relay/compat'; -import Relay from 'react-relay/classic'; -import PropTypes from 'prop-types'; -import ProjectsListCounter from '../drawer/Projects/ProjectsListCounter'; - -const ArticlesListCounter = ({ defaultFilters, teamSlug, type }) => ( - { - if (props) { - let count = props.team.articles_count; - // Use values that can be updated by the mutations when articles are created - if (Object.keys(defaultFilters).length === 0) { - if (type === 'fact-check') { - count = props.team.factChecksCount; - } else if (type === 'explainer') { - count = props.team.explainersCount; - } else { - count = props.team.articles_count; - } - } - return (); - } - return null; - }} - variables={{ - slug: teamSlug, - type, - ...defaultFilters, - }} - /> -); - -ArticlesListCounter.defaultProps = { - defaultFilters: {}, - type: null, -}; - -ArticlesListCounter.propTypes = { - teamSlug: PropTypes.string.isRequired, - type: PropTypes.oneOf(['explainer', 'fact-check']), - defaultFilters: PropTypes.object, -}; - -export default ArticlesListCounter; diff --git a/src/app/components/article/ArticleTrash.js b/src/app/components/article/ArticleTrash.js index 4d43f80e58..69aa54d30b 100644 --- a/src/app/components/article/ArticleTrash.js +++ b/src/app/components/article/ArticleTrash.js @@ -3,6 +3,7 @@ import Relay from 'react-relay/classic'; import PropTypes from 'prop-types'; import { graphql, createFragmentContainer, commitMutation } from 'react-relay/compat'; import { FormattedMessage } from 'react-intl'; +import { browserHistory } from 'react-router'; import Alert from '../cds/alerts-and-prompts/Alert'; import ExternalLink from '../ExternalLink'; import ButtonMain from '../cds/buttons-checkboxes-chips/ButtonMain'; @@ -20,6 +21,10 @@ const updateExplainer = graphql` id trashed } + team { + explainerCount: articles_count(article_type: "explainer") + trashCount: articles_count(trashed: true) + } } } `; @@ -31,6 +36,12 @@ const updateFactCheck = graphql` id trashed } + team { + factChecksCount: articles_count(article_type: "fact-check") + publishedCount: articles_count(article_type: "fact-check", report_status: "published") + importedCount: articles_count(article_type: "fact-check", imported: true) + trashCount: articles_count(trashed: true) + } } } `; @@ -165,8 +176,7 @@ const ArticleTrash = ({ setFlashMessage(message, 'success'); onClose(); handleDialogClose(); - // FIXME: Replace this reload with a NODE_DELETE, RANGE_DELETE relay config - window.location.reload(); + browserHistory.push(`${window.location.pathname}?reload=true`); }; const handleProceed = () => { diff --git a/src/app/components/drawer/DrawerArticles.js b/src/app/components/drawer/DrawerArticles.js index 19c9820660..0264618504 100644 --- a/src/app/components/drawer/DrawerArticles.js +++ b/src/app/components/drawer/DrawerArticles.js @@ -4,7 +4,7 @@ import Relay from 'react-relay/classic'; import { Link } from 'react-router'; import { FormattedMessage } from 'react-intl'; import cx from 'classnames/bind'; -import ArticleCoreListCounter from '../article/ArticleCoreListCounter'; +import DrawerListCounter from './Projects/DrawerListCounter'; import NewArticleButton from '../article/NewArticleButton'; import PublishedIcon from '../../icons/fact_check.svg'; import TrashIcon from '../../icons/delete.svg'; @@ -59,7 +59,7 @@ const DrawerArticlesComponent = ({ team }) => {
- + {
- + {
- + {
- + @@ -150,7 +150,7 @@ const DrawerArticlesComponent = ({ team }) => {
- + @@ -169,6 +169,11 @@ const DrawerArticles = () => { query DrawerArticlesQuery($teamSlug: String!) { team(slug: $teamSlug) { slug + factChecksCount: articles_count(article_type: "fact-check") + explainersCount: articles_count(article_type: "explainer") + publishedCount: articles_count(article_type: "fact-check", report_status: "published") + importedCount: articles_count(article_type: "fact-check", imported: true) + trashCount: articles_count(trashed: true) ...NewArticleButton_team } } diff --git a/src/app/components/drawer/Projects/ProjectsListCounter.js b/src/app/components/drawer/Projects/DrawerListCounter.js similarity index 73% rename from src/app/components/drawer/Projects/ProjectsListCounter.js rename to src/app/components/drawer/Projects/DrawerListCounter.js index 4e6bb8dfaf..ce7caa1570 100644 --- a/src/app/components/drawer/Projects/ProjectsListCounter.js +++ b/src/app/components/drawer/Projects/DrawerListCounter.js @@ -1,11 +1,10 @@ -/* eslint-disable react/sort-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; import { injectIntl, intlShape } from 'react-intl'; import { getCompactNumber } from '../../../helpers'; import styles from './Projects.module.css'; -const ProjectsListCounter = ({ intl, numberOfItems }) => ( +const DrawerListCounter = ({ intl, numberOfItems }) => (
{ !Number.isNaN(parseInt(numberOfItems, 10)) ? @@ -14,9 +13,9 @@ const ProjectsListCounter = ({ intl, numberOfItems }) => (
); -ProjectsListCounter.propTypes = { - numberOfItems: PropTypes.number.isRequired, +DrawerListCounter.propTypes = { intl: intlShape.isRequired, + numberOfItems: PropTypes.number.isRequired, }; -export default injectIntl(ProjectsListCounter); +export default injectIntl(DrawerListCounter); diff --git a/src/app/components/drawer/Projects/ProjectsListCounter.test.js b/src/app/components/drawer/Projects/DrawerListCounter.test.js similarity index 56% rename from src/app/components/drawer/Projects/ProjectsListCounter.test.js rename to src/app/components/drawer/Projects/DrawerListCounter.test.js index 36db833c70..dfc379154d 100644 --- a/src/app/components/drawer/Projects/ProjectsListCounter.test.js +++ b/src/app/components/drawer/Projects/DrawerListCounter.test.js @@ -1,21 +1,21 @@ import React from 'react'; -import ProjectsListCounter from './ProjectsListCounter'; +import DrawerListCounter from './DrawerListCounter'; import { mountWithIntl } from '../../../../../test/unit/helpers/intl-test'; -describe('', () => { +describe('', () => { it('renders nothing if numberOfItems is not a number', () => { - const counter = mountWithIntl(); + const counter = mountWithIntl(); expect(counter.find('small').text()).toEqual(''); }); it('renders a small number as is', () => { - const counter = mountWithIntl(); + const counter = mountWithIntl(); expect(counter.find('small').text()).toEqual('12'); }); it('makes long numbers shorter', () => { - const counter = mountWithIntl(); + const counter = mountWithIntl(); expect(counter.find('small').text()).toEqual('12K'); }); }); diff --git a/src/app/components/drawer/Projects/ProjectsCoreListCounter.js b/src/app/components/drawer/Projects/ProjectsCoreListCounter.js index a4ea430c9d..b4e99b532a 100644 --- a/src/app/components/drawer/Projects/ProjectsCoreListCounter.js +++ b/src/app/components/drawer/Projects/ProjectsCoreListCounter.js @@ -2,7 +2,7 @@ import React from 'react'; import { QueryRenderer, graphql } from 'react-relay/compat'; import Relay from 'react-relay/classic'; import PropTypes from 'prop-types'; -import ProjectsListCounter from './ProjectsListCounter'; +import DrawerListCounter from './DrawerListCounter'; const ProjectsCoreListCounter = ({ query }) => ( ( `} render={({ props }) => { if (props) { - return (); + return (); } return null; }} diff --git a/src/app/components/drawer/Projects/ProjectsListItem.js b/src/app/components/drawer/Projects/ProjectsListItem.js index 6fab727f33..07543fcfab 100644 --- a/src/app/components/drawer/Projects/ProjectsListItem.js +++ b/src/app/components/drawer/Projects/ProjectsListItem.js @@ -1,9 +1,8 @@ -/* eslint-disable react/sort-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router'; import cx from 'classnames/bind'; -import ProjectsListCounter from './ProjectsListCounter'; +import DrawerListCounter from './DrawerListCounter'; import styles from './Projects.module.css'; const ProjectsListItem = ({ @@ -56,7 +55,7 @@ const ProjectsListItem = ({ {project.title || project.name} - + ); @@ -65,19 +64,18 @@ const ProjectsListItem = ({ }; ProjectsListItem.defaultProps = { + className: '', icon: null, - onClick: null, isActive: false, - className: '', routeSuffix: '', tooltip: null, + onClick: null, }; ProjectsListItem.propTypes = { - teamSlug: PropTypes.string.isRequired, + className: PropTypes.string, icon: PropTypes.node, - routePrefix: PropTypes.string.isRequired, - routeSuffix: PropTypes.string, + isActive: PropTypes.bool, project: PropTypes.shape({ id: PropTypes.string.isRequired, dbid: PropTypes.number.isRequired, @@ -86,10 +84,11 @@ ProjectsListItem.propTypes = { medias_count: PropTypes.number, project_group_id: PropTypes.number, }).isRequired, - onClick: PropTypes.func, - isActive: PropTypes.bool, - className: PropTypes.string, + routePrefix: PropTypes.string.isRequired, + routeSuffix: PropTypes.string, + teamSlug: PropTypes.string.isRequired, tooltip: PropTypes.node, + onClick: PropTypes.func, }; export default ProjectsListItem;