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 <[email protected]>
meedan · Oct 4, 2024 · ea6afb0 · ea6afb0
1 parent 1962068
commit ea6afb0
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 87 deletions.
diff --git 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"
   }
 ]
diff --git a/src/app/components/article/ArticleCoreListCounter.js b/src/app/components/article/ArticleCoreListCounter.js
diff --git 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
@@ -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 }) => {
               <div className={styles.listLabel}>
                 <FormattedMessage defaultMessage="Claim & Fact-Checks" description="Label for a list displayed on the left sidebar that includes items that have claim & fact-checks" id="articlesComponent.claimAndFactChecks" tagName="span" />
               </div>
-              <ArticleCoreListCounter teamSlug={team.slug} type="fact-check" />
+              <DrawerListCounter numberOfItems={team.factChecksCount} />
             </li>
           </Link>
           <Link
@@ -81,7 +81,7 @@ const DrawerArticlesComponent = ({ team }) => {
               <div className={styles.listLabel}>
                 <FormattedMessage defaultMessage="Explainers" description="Label for a list displayed on the left sidebar that includes items that have explainers" id="articlesComponent.explainers" tagName="span" />
               </div>
-              <ArticleCoreListCounter teamSlug={team.slug} type="explainer" />
+              <DrawerListCounter numberOfItems={team.explainersCount} />
             </li>
           </Link>
           <Link
@@ -103,7 +103,7 @@ const DrawerArticlesComponent = ({ team }) => {
               <div className={styles.listLabel}>
                 <FormattedMessage defaultMessage="Imported" description="Label for a list displayed on the left sidebar that includes items from the 'Imported fact-checks' channel" id="projectsComponent.importedReports" tagName="span" />
               </div>
-              <ArticleCoreListCounter defaultFilters={{ imported: true }} teamSlug={team.slug} type="fact-check" />
+              <DrawerListCounter numberOfItems={team.importedCount} />
             </li>
           </Link>
           <Link
@@ -125,7 +125,7 @@ const DrawerArticlesComponent = ({ team }) => {
               <div className={styles.listLabel}>
                 <FormattedMessage defaultMessage="Published" description="Label for a list displayed on the left sidebar that includes items that have published reports" id="projectsComponent.published" tagName="span" />
               </div>
-              <ArticleCoreListCounter defaultFilters={{ report_status: 'published' }} teamSlug={team.slug} type="fact-check" />
+              <DrawerListCounter numberOfItems={team.publishedCount} />
             </li>
           </Link>
         </ul>
@@ -150,7 +150,7 @@ const DrawerArticlesComponent = ({ team }) => {
             <div className={styles.listLabel}>
               <FormattedMessage defaultMessage="Trash" description="Label for a list displayed on the left sidebar that includes items that have been marked as Trashed" id="projectsComponent.trash" tagName="span" />
             </div>
-            <ArticleCoreListCounter defaultFilters={{ trashed: true }} teamSlug={team.slug} />
+            <DrawerListCounter numberOfItems={team.trashCount} />
           </li>
         </Link>
       </ul>
@@ -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/...ts/drawer/Projects/ProjectsListCounter.js → ...ents/drawer/Projects/DrawerListCounter.js b/...ts/drawer/Projects/ProjectsListCounter.js → ...ents/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 }) => (
   <div className={styles.listItemCount} title={numberOfItems}>
     <small>
       { !Number.isNaN(parseInt(numberOfItems, 10)) ?
@@ -14,9 +13,9 @@ const ProjectsListCounter = ({ intl, numberOfItems }) => (
   </div>
 );
 
-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/...awer/Projects/ProjectsListCounter.test.js → ...drawer/Projects/DrawerListCounter.test.js b/...awer/Projects/ProjectsListCounter.test.js → ...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('<ProjectsListCounter />', () => {
+describe('<DrawerListCounter />', () => {
   it('renders nothing if numberOfItems is not a number', () => {
-    const counter = mountWithIntl(<ProjectsListCounter numberOfItems="test" />);
+    const counter = mountWithIntl(<DrawerListCounter numberOfItems="test" />);
     expect(counter.find('small').text()).toEqual('');
   });
 
 
   it('renders a small number as is', () => {
-    const counter = mountWithIntl(<ProjectsListCounter numberOfItems={12} />);
+    const counter = mountWithIntl(<DrawerListCounter numberOfItems={12} />);
     expect(counter.find('small').text()).toEqual('12');
   });
 
   it('makes long numbers shorter', () => {
-    const counter = mountWithIntl(<ProjectsListCounter numberOfItems={12345} />);
+    const counter = mountWithIntl(<DrawerListCounter numberOfItems={12345} />);
     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
@@ -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 }) => (
   <QueryRenderer
@@ -16,7 +16,7 @@ const ProjectsCoreListCounter = ({ query }) => (
     `}
     render={({ props }) => {
       if (props) {
-        return (<ProjectsListCounter numberOfItems={props.search.number_of_results} />);
+        return (<DrawerListCounter numberOfItems={props.search.number_of_results} />);
       }
       return null;
     }}

diff --git 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}
           </span>
         </div>
-        <ProjectsListCounter numberOfItems={project.medias_count} />
+        <DrawerListCounter numberOfItems={project.medias_count} />
       </li>
     </Link>
   );
@@ -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;