don't show article title in tabs, it's ugly

jaesivsm · Jun 10, 2020 · 6f779f7 · 6f779f7
1 parent 5c0cc98
commit 6f779f7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/jsclient/src/features/clusterlist/components/Article.js b/jsclient/src/features/clusterlist/components/Article.js
@@ -6,7 +6,7 @@ import Divider from "@material-ui/core/Divider";
 
 import makeStyles from "./style";
 
-function Article({ article, hidden }) {
+function Article({ article, hidden, showTitle }) {
   const classes = makeStyles();
   let comments;
   if (article.comments) {
@@ -18,6 +18,7 @@ function Article({ article, hidden }) {
   }
   return (
     <div hidden={hidden} className={classes.article}>
+      <h1 hidden={!showTitle}>{article.title}</h1>
       <p>
         <span>Link</span>
         <Link color="secondary" target="_blank"
@@ -38,10 +39,12 @@ function Article({ article, hidden }) {
 
 Article.propTypes = {
   article: PropTypes.shape({
+    title: PropTypes.string.isRequired,
     link: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
     comments: PropTypes.string,
   }),
+  showTitle: PropTypes.bool.isRequired,
   hidden: PropTypes.bool.isRequired,
 };
 

diff --git a/jsclient/src/features/clusterlist/components/Articles.js b/jsclient/src/features/clusterlist/components/Articles.js
@@ -25,21 +25,18 @@ function Articles({ articles, icons, content }) {
 
   let contentTitle, contentTab;
   if (articles.length === 1 && !content) {
-    return <Article article={articles[0]} hidden={false} />;
+    return <Article article={articles[0]} />;
   } else if (content) {
     contentTitle = (
-      <Tab key="t-0"
+      <Tab key="t-0" label=""
         className={classes.tabs}
-      //
         icon={<img src={jarrIcon} alt={proccessedContentTitle}
                    title={proccessedContentTitle} />}
-        label={proccessedContentTitle}
         value={0} aria-controls="a-0"
       />
     );
     contentTab = <Content content={content} hidden={0 !== currentIndex} />;
   }
-  const isOnlyOneTitle = [...new Set(articles.map((a) => a.title))].length === 1;
   return (
     <>
       <Tabs indicatorColor="primary" textColor="primary"
@@ -48,20 +45,19 @@ function Articles({ articles, icons, content }) {
         {contentTitle}
         {articles.map((article, index) => {
           index = content ? index + 1 : index;
-          return (<Tab key={`t-${index}`}
-            className={classes.tabs}
-            icon={<ClusterIcon iconUrl={icons[article["feed_id"]]} />}
-            label={isOnlyOneTitle ? null : article.title}
-            value={index}
-            aria-controls={`a-${index}`}
-          />);
+          return (<Tab key={`t-${index}`} label=""
+                       className={classes.tabs}
+                       icon={<ClusterIcon iconUrl={icons[article["feed_id"]]} />}
+                       value={index}
+                       aria-controls={`a-${index}`}
+                  />);
         })}
       </Tabs>
       {contentTab}
       {articles.map((article, index) => {
         index = content ? index + 1 : index;
         return (
-          <Article
+          <Article showTitle
             key={`a-${index}-${index !== currentIndex ? "h" : ""}`}
             id={`a-${index}`}
             article={article}

diff --git a/jsclient/src/features/clusterlist/components/Content.js b/jsclient/src/features/clusterlist/components/Content.js
@@ -64,6 +64,7 @@ function Content({ content, hidden }) {
   }
   return (
     <div hidden={hidden} className={classes.article}>
+      <h1>Proccessed Content</h1>
       {head}
       {comments}
       <Divider />