Feature/cv2-4440: articles rail drawer and navigation add claims fact…

… checks published and imported (#1954) Refactoring: moving "Published" and "Imported" lists from Tipline rail to Articles rail Add a new Article button component Add a new ArticleCoreListCounter component update list routes Reference: CV2-4440
meedan · Jul 22, 2024 · 66b28d0 · 66b28d0
1 parent 50cf847
commit 66b28d0
Show file tree

Hide file tree

Showing 12 changed files with 306 additions and 69 deletions.
diff --git a/localization/react-intl/src/app/components/article/ArticlesComponent.json b/localization/react-intl/src/app/components/article/ArticlesComponent.json
@@ -0,0 +1,27 @@
+[
+  {
+    "id": "articlesComponent.articles",
+    "description": "The navigation name of the articles section",
+    "defaultMessage": "Articles"
+  },
+  {
+    "id": "articlesComponent.claimAndFactChecks",
+    "description": "Label for a list displayed on the left sidebar that includes items that have claim and fact-checks",
+    "defaultMessage": "Claim & Fact-Checks"
+  },
+  {
+    "id": "articlesComponent.explainers",
+    "description": "Label for a list displayed on the left sidebar that includes items that have explainers",
+    "defaultMessage": "Explainers"
+  },
+  {
+    "id": "projectsComponent.importedReports",
+    "description": "Label for a list displayed on the left sidebar that includes items from the 'Imported fact-checks' channel",
+    "defaultMessage": "Imported"
+  },
+  {
+    "id": "projectsComponent.published",
+    "description": "Label for a list displayed on the left sidebar that includes items that have published reports",
+    "defaultMessage": "Published"
+  }
+]
diff --git a/localization/react-intl/src/app/components/article/NewArticleButton.json b/localization/react-intl/src/app/components/article/NewArticleButton.json
@@ -0,0 +1,12 @@
+[
+  {
+    "id": "articlesComponent.claimAndFactCheck",
+    "description": "The navigation name of the articles section",
+    "defaultMessage": "Claim & Fact Check"
+  },
+  {
+    "id": "articlesComponent.exaplainer",
+    "description": "The navigation name of the articles section",
+    "defaultMessage": "Explainer"
+  }
+]
diff --git a/localization/react-intl/src/app/components/drawer/Projects/ProjectsComponent.json b/localization/react-intl/src/app/components/drawer/Projects/ProjectsComponent.json
@@ -19,11 +19,6 @@
     "description": "Label for a list displayed on the left sidebar that includes items from is any tip line channel and the item status is unstarted",
     "defaultMessage": "Inbox"
   },
-  {
-    "id": "projectsComponent.importedReports",
-    "description": "Label for a list displayed on the left sidebar that includes items from the 'Imported fact-checks' channel",
-    "defaultMessage": "Imported"
-  },
   {
     "id": "projectsComponent.suggestedMatches",
     "description": "Label for a list displayed on the left sidebar that includes items that have a number of suggestions is more than 1",

diff --git a/src/app/components/Root.js b/src/app/components/Root.js
@@ -109,10 +109,10 @@ class Root extends Component {
                   <Route path=":team/all-items(/:query)" component={AllItems} />
                   <Route path=":team/assigned-to-me(/:query)" component={AssignedToMe} />
                   <Route path=":team/tipline-inbox(/:query)" component={TiplineInbox} />
-                  <Route path=":team/imported-fact-checks(/:query)" component={ImportedReports} />
+                  <Route path=":team/articles/imported-fact-checks(/:query)" component={ImportedReports} />
                   <Route path=":team/suggested-matches(/:query)" component={SuggestedMatches} />
                   <Route path=":team/unmatched-media(/:query)" component={UnmatchedMedia} />
-                  <Route path=":team/published(/:query)" component={Published} />
+                  <Route path=":team/articles/published(/:query)" component={Published} />
                   <Route path=":team/feed/create" component={CreateFeed} />
                   <Route path=":team/feeds" component={FeedPage} />
                   <Route path=":team/feed/:feedId/edit" component={EditFeedTeam} />

diff --git a/src/app/components/article/ArticleCoreListCounter.js b/src/app/components/article/ArticleCoreListCounter.js
@@ -0,0 +1,35 @@
+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 = ({ teamSlug, type }) => (
+  <QueryRenderer
+    environment={Relay.Store}
+    query={graphql`
+      query ArticleCoreListCounterQuery($slug: String!, $type: String!) {
+        team(slug: $slug) {
+          articles_count(article_type: $type)
+        }
+      }
+    `}
+    variables={{
+      slug: teamSlug,
+      type,
+    }}
+    render={({ props }) => {
+      if (props) {
+        return (<ProjectsListCounter numberOfItems={props.team.articles_count} />);
+      }
+      return null;
+    }}
+  />
+);
+
+ArticlesListCounter.propTypes = {
+  teamSlug: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['explainer', 'fact-check']).isRequired,
+};
+
+export default ArticlesListCounter;
diff --git a/src/app/components/article/ArticlesComponent.js b/src/app/components/article/ArticlesComponent.js
@@ -0,0 +1,139 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { FormattedMessage } from 'react-intl';
+import cx from 'classnames/bind';
+import PublishedIcon from '../../icons/fact_check.svg';
+import FileDownloadIcon from '../../icons/file_download.svg';
+import BookIcon from '../../icons/book.svg';
+import styles from './../drawer/Projects/Projects.module.css';
+import { publishedDefaultQuery } from '../team/Published';
+import ProjectsCoreListCounter from '../drawer/Projects/ProjectsCoreListCounter';
+import ArticleCoreListCounter from './ArticleCoreListCounter';
+import NewArticleButton from './NewArticleButton';
+import { importedReportsDefaultQuery } from '../team/ImportedReports';
+
+const ArticlesComponent = ({ team }) => {
+  // Get/set which list item should be highlighted
+  const pathParts = window.location.pathname.split('/');
+  const [activeItem, setActiveItem] = React.useState({ type: pathParts[2], id: parseInt(pathParts[3], 10) });
+
+  React.useEffect(() => {
+    const path = window.location.pathname.split('/');
+    if (activeItem.type !== path[3] || activeItem.id !== path[3]) {
+      setActiveItem({ type: path[3], id: parseInt(path[3], 10) });
+    }
+  }, [window.location.pathname]);
+
+  const handleSpecialLists = (listId) => {
+    setActiveItem({ type: listId, id: null });
+  };
+
+  return (
+    <React.Fragment>
+      <div className={styles.listTitle}>
+        <FormattedMessage
+          id="articlesComponent.articles"
+          defaultMessage="Articles"
+          description="The navigation name of the articles section"
+        />
+      </div>
+      <div className={styles.listTitle}>
+        <NewArticleButton />
+      </div>
+      <div className={styles.listWrapperScrollWrapper}>
+        <ul className={cx(styles.listWrapper)}>
+          <Link
+            onClick={() => { handleSpecialLists('fact-checks'); }}
+            to={`/${team.slug}/articles/fact-checks`}
+            className={styles.linkList}
+          >
+            <li
+              className={cx(
+                'projects-list__fact-checks',
+                styles.listItem,
+                styles.listItem_containsCount,
+                {
+                  [styles.listItem_active]: activeItem.type === 'fact-checks',
+                })
+              }
+            >
+              <PublishedIcon className={styles.listIcon} />
+              <div className={styles.listLabel}>
+                <FormattedMessage tagName="span" id="articlesComponent.claimAndFactChecks" defaultMessage="Claim & Fact-Checks" description="Label for a list displayed on the left sidebar that includes items that have claim and fact-checks" />
+              </div>
+              <ArticleCoreListCounter teamSlug={team.slug} type="fact-check" />
+            </li>
+          </Link>
+          <Link
+            onClick={() => { handleSpecialLists('explainers'); }}
+            to={`/${team.slug}/articles/explainers`}
+            className={styles.linkList}
+          >
+            <li
+              className={cx(
+                'projects-list__explainers',
+                styles.listItem,
+                styles.listItem_containsCount,
+                {
+                  [styles.listItem_active]: activeItem.type === 'explainers',
+                })
+              }
+            >
+              <BookIcon className={styles.listIcon} />
+              <div className={styles.listLabel}>
+                <FormattedMessage tagName="span" id="articlesComponent.explainers" defaultMessage="Explainers" description="Label for a list displayed on the left sidebar that includes items that have explainers" />
+              </div>
+              <ArticleCoreListCounter teamSlug={team.slug} type="explainer" />
+            </li>
+          </Link>
+          <Link
+            onClick={() => { handleSpecialLists('imported-fact-checks'); }}
+            to={`/${team.slug}/articles/imported-fact-checks`}
+            className={styles.linkList}
+          >
+            <li
+              className={cx(
+                'projects-list__imported-fact-checks',
+                styles.listItem,
+                styles.listItem_containsCount,
+                {
+                  [styles.listItem_active]: activeItem.type === 'imported-fact-checks',
+                })
+              }
+            >
+              <FileDownloadIcon className={styles.listIcon} />
+              <div className={styles.listLabel}>
+                <FormattedMessage tagName="span" id="projectsComponent.importedReports" defaultMessage="Imported" description="Label for a list displayed on the left sidebar that includes items from the 'Imported fact-checks' channel" />
+              </div>
+              <ProjectsCoreListCounter query={importedReportsDefaultQuery} />
+            </li>
+          </Link>
+          <Link
+            onClick={() => { handleSpecialLists('published'); }}
+            to={`/${team.slug}/articles/published`}
+            className={styles.linkList}
+          >
+            <li
+              className={cx(
+                'projects-list__published',
+                styles.listItem,
+                styles.listItem_containsCount,
+                {
+                  [styles.listItem_active]: activeItem.type === 'published',
+                })
+              }
+            >
+              <PublishedIcon className={styles.listIcon} />
+              <div className={styles.listLabel}>
+                <FormattedMessage tagName="span" id="projectsComponent.published" defaultMessage="Published" description="Label for a list displayed on the left sidebar that includes items that have published reports" />
+              </div>
+              <ProjectsCoreListCounter query={publishedDefaultQuery} />
+            </li>
+          </Link>
+        </ul>
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default ArticlesComponent;
diff --git a/src/app/components/article/NewArticleButton.js b/src/app/components/article/NewArticleButton.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import Menu from '@material-ui/core/Menu';
+import { FormattedMessage } from 'react-intl';
+import MenuItem from '@material-ui/core/MenuItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import ButtonMain from '../cds/buttons-checkboxes-chips/ButtonMain';
+import AddIcon from '../../icons/add.svg';
+import styles from './NewArticleButton.module.css';
+import PublishedIcon from '../../icons/fact_check.svg';
+import BookIcon from '../../icons/book.svg';
+
+const NewArticleButton = () => {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleMenuItemClick = () => {};
+
+  return (
+    <React.Fragment>
+      <ButtonMain
+        variant="contained"
+        size="default"
+        theme="text"
+        iconLeft={<AddIcon />}
+        onClick={e => setAnchorEl(e.currentTarget)}
+        label="New Article"
+        buttonProps={{
+          id: 'new-article-menu__open-button',
+        }}
+      />
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        getContentAnchorEl={null}
+        onClose={() => setAnchorEl(null)}
+        className={styles.menuList}
+      >
+        <MenuItem onClick={handleMenuItemClick} className={styles.menuItem}>
+          <ListItemIcon className={styles.itemIcon}>
+            <PublishedIcon />
+          </ListItemIcon>
+          <ListItemText>
+            <FormattedMessage
+              id="articlesComponent.claimAndFactCheck"
+              defaultMessage="Claim & Fact Check"
+              description="The navigation name of the articles section"
+            />
+          </ListItemText>
+        </MenuItem>
+        <MenuItem onClick={handleMenuItemClick} className={styles.menuItem}>
+          <ListItemIcon className={styles.itemIcon}>
+            <BookIcon />
+          </ListItemIcon>
+          <ListItemText>
+            <FormattedMessage
+              id="articlesComponent.exaplainer"
+              defaultMessage="Explainer"
+              description="The navigation name of the articles section"
+            />
+          </ListItemText>
+        </MenuItem>
+      </Menu>
+    </React.Fragment>
+  );
+};
+
+export default NewArticleButton;
diff --git a/src/app/components/article/NewArticleButton.module.css b/src/app/components/article/NewArticleButton.module.css
@@ -0,0 +1,21 @@
+.menuList {
+  align-items: center;
+  display: flex;
+  margin-top: 10px;
+
+  .menuItem {
+    &:hover {
+      background-color: var(--color-blue-98);
+      color: var(--color-blue-32);
+    }
+  }
+
+  .itemIcon {
+    margin-right: 8px;
+    min-width: fit-content !important;
+  }
+
+  .menuItem:hover .itemIcon {
+    color: var(--color-blue-32);
+  }
+}
diff --git a/src/app/components/drawer/DrawerRail.js b/src/app/components/drawer/DrawerRail.js
@@ -158,7 +158,7 @@ const DrawerRail = (props) => {
                 }
                 id="side-navigation__article-toggle"
                 onClick={() => setDrawerTypeChange('articles')}
-                to={`/${props.team.slug}/articles404`}
+                to={`/${props.team.slug}/articles/fact-checks`}
               >
                 <DescriptionIcon />
               </Link>

diff --git a/src/app/components/drawer/Projects/ArticlesComponent.js b/src/app/components/drawer/Projects/ArticlesComponent.js