feat(#15): create & apply TagBadge component

Mayank0255 · Nov 4, 2020 · ff24133 · ff24133
1 parent 41d5cfb
commit ff24133
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 40 deletions.
diff --git a/client/src/components/TagBadge/TagBadge.component.jsx b/client/src/components/TagBadge/TagBadge.component.jsx
@@ -0,0 +1,14 @@
+import React, { Fragment } from "react";
+import { Link } from "react-router-dom";
+
+const TagBadge = ({ tag_name, size, display }) => {
+    return <Fragment>
+        <div className='tags-badge' style={{display: display}}>
+            <Link className={`${size}`} to={`/tags/${tag_name}`}>
+                {tag_name}
+            </Link>
+        </div>
+    </Fragment>
+}
+
+export default TagBadge;
diff --git a/client/src/components/TagBadge/TagBadge.styles.scss b/client/src/components/TagBadge/TagBadge.styles.scss
@@ -0,0 +1,5 @@
+.tags-badge {
+  color: #242729;
+  line-height: 18px;
+  float: left;
+}
diff --git a/client/src/components/postItem/postItem.component.jsx b/client/src/components/postItem/postItem.component.jsx
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
 import UserCard from "../UserCard/UserCard.component";
+import TagBadge from "../TagBadge/TagBadge.component";
 
 import './postItem.styles.scss';
 
@@ -47,11 +48,10 @@ const PostItem = ({ post: { id, title, body, tagname, username, user_id, answer_
                 <div className='brief'>
                     {body.substring(0, 200)}...
                 </div>
-                <div className='question-tags'>
-                    <Link className='s-tag' to={`/tags/${tagname}`}>
-                        {tagname}
-                    </Link>
-                </div>
+                <TagBadge
+                    tag_name={tagname}
+                    size={'s-tag'}
+                />
                 <UserCard
                     created_at={created_at}
                     user_id={user_id}

diff --git a/client/src/components/postItem/postItem.styles.scss b/client/src/components/postItem/postItem.styles.scss
@@ -31,7 +31,6 @@
       border: 1px solid #63b47c;
       border-radius: 3px;
     }
-
   }
 
   .summary {
@@ -58,19 +57,12 @@
     }
 
     .brief {
-      padding: 0;
-      padding-bottom: 5px;
+      padding: 0 0 5px 0;
       margin: 0;
       font-family: Arial, serif;
       font-size: 13px;
     }
 
-    .question-tags {
-      color: #242729;
-      line-height: 18px;
-      float: left;
-    }
-
     .question-user {
       width: 200px;
       line-height: 18px;

diff --git a/client/src/components/rightSideBar/rightSideBar.component.jsx b/client/src/components/rightSideBar/rightSideBar.component.jsx
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { getTags } from '../../redux/tags/tags.actions';
 
+import TagBadge from "../TagBadge/TagBadge.component";
 import { ReactComponent as Stackoverflow } from '../../assets/LogoGlyphXxs.svg';
 import { ReactComponent as Stackoverflowhite } from '../../assets/LogoGlyphXxswhite.svg';
 
@@ -140,9 +141,11 @@ const RightSideBar = ({ getTags , tag: { tags, loading }}) => {
                 <h4 className='tag-headline'>Top Ten Tags</h4>
                 {tags.slice(0, 10).map(tag => (
                     <div key={tag.tagname} className='tag-content'>
-                        <a className='s-tag s-tag__md' href={`/tags/${tag.tagname}`}>
-                            {tag.tagname}
-                        </a>
+                        <TagBadge
+                            tag_name={tag.tagname}
+                            size={'s-tag s-tag__md'}
+                            display={'inline'}
+                        />
                         &nbsp;
                         <span className='tag-mult'>
                             <span>&times;</span>

diff --git a/client/src/pages/Post/Post.component.jsx b/client/src/pages/Post/Post.component.jsx
@@ -17,6 +17,7 @@ import UserCard from "../../components/UserCard/UserCard.component";
 
 import './Post.styles.scss'
 import Spinner from "../../components/spinner/spinner.component";
+import TagBadge from "../../components/TagBadge/TagBadge.component";
 
 const Post = (
     {
@@ -125,9 +126,10 @@ const Post = (
                                         {post.post_body}
                                     </div>
                                     <div className='post-tags fc-black-800'>
-                                        <div className='tag-cell'>
-                                            <Link className='s-tag' to={`/tags/${post.tagname}`}>{post.tagname}</Link>
-                                        </div>
+                                        <TagBadge
+                                            tag_name={post.tagname}
+                                            size={'s-tag'}
+                                        />
                                     </div>
                                     <div className='post-actions fc-black-800'>
                                         <div className='post-actions-extended'>

diff --git a/client/src/pages/TagsPage/TagPanel.component.jsx b/client/src/pages/TagsPage/TagPanel.component.jsx
@@ -1,23 +1,20 @@
 import React from 'react';
 import moment from 'moment';
 import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import TagBadge from "../../components/TagBadge/TagBadge.component";
 
 import './TagPanel.styles.scss';
 
+
 const TagPanel = ({ tag: {tagname, description, created_at, posts_count} }) => {
     return (
         <div className='tag-card'>
             <div className='grid'>
-                <div className='grid-cell'>
-                    <Link
-                        className='s-tag'
-                        to={{ pathname: `/tags/${tagname}` }}
-                    >
-                        {tagname}
-                    </Link>
-                </div>
+                <TagBadge
+                    tag_name={tagname}
+                    size={'s-tag'}
+                />
             </div>
             <div className="description">{description}</div>
             <div className='tag-caption'>

diff --git a/client/src/pages/UserPage/UserPage.component.jsx b/client/src/pages/UserPage/UserPage.component.jsx
@@ -10,10 +10,10 @@ import { ReactComponent as Logo } from '../../assets/LogoGlyphMd.svg';
 import SideBar from '../../components/sideBar/sideBar.component';
 import RightSideBar from '../../components/rightSideBar/rightSideBar.component';
 import PageTitle from "../../components/pageTitle/pageTitle.component";
-
-import './UserPage.styles.scss'
 import Spinner from "../../components/spinner/spinner.component";
+import TagBadge from "../../components/TagBadge/TagBadge.component";
 
+import './UserPage.styles.scss'
 
 const UserPage = ({ getUser, user: { user, loading }, match  }) => {
     useEffect(() => {
@@ -159,9 +159,10 @@ const UserPage = ({ getUser, user: { user, loading }, match  }) => {
                                     <div className='top-tags-cells'>
                                         <div className='top-cell'>
                                             <div className='tag-cell bg-black-025'>
-                                                <Link className='s-tag s-tag__lg' to='/tags/java'>
-                                                    java
-                                                </Link>
+                                                <TagBadge
+                                                    tag_name={'java'}
+                                                    size={'s-tag s-tag__lg'}
+                                                />
                                                 <div className='score'>
                                                     <div className='score-txt'>
                                                         <div className='score-tab'>
@@ -176,9 +177,10 @@ const UserPage = ({ getUser, user: { user, loading }, match  }) => {
                                     <div className='top-tags-cells'>
                                         <div className='top-cell'>
                                             <div className='tag-cell bg-black-025'>
-                                                <Link className='s-tag s-tag__md' to='/tags/node.js'>
-                                                    node.js
-                                                </Link>
+                                                <TagBadge
+                                                    tag_name={'node.js'}
+                                                    size={'s-tag s-tag__md'}
+                                                />
                                                 <div className='score'>
                                                     <div className='score-txt'>
                                                         <div className='score-tab'>
@@ -193,9 +195,10 @@ const UserPage = ({ getUser, user: { user, loading }, match  }) => {
                                     <div className='top-tags-cells'>
                                         <div className='top-cell'>
                                             <div className='tag-cell bg-black-025'>
-                                                <Link className='s-tag s-tag__md' to='/tags/react'>
-                                                    react
-                                                </Link>
+                                                <TagBadge
+                                                    tag_name={'react'}
+                                                    size={'s-tag s-tag__md'}
+                                                />
                                                 <div className='score'>
                                                     <div className='score-txt'>
                                                         <div className='score-tab'>