feat: hide empty tags

forbole · Dec 21, 2023 · 6cee913 · 6cee913
1 parent 79432a4
commit 6cee913
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 16 deletions.
diff --git a/src/components/tags/index.tsx b/src/components/tags/index.tsx
@@ -4,8 +4,13 @@ import Link from "next/link";
 
 import * as styles from "./index.module.scss";
 
+type BaseTag = {
+  name: string;
+  slug: string;
+};
+
 interface TagsProps {
-  tags: any[];
+  tags: BaseTag[];
   details?: boolean;
   noPadding?: boolean;
 }
@@ -15,6 +20,8 @@ const Tags = (props: TagsProps) => {
   const theme = useTheme();
   const { tags, details, noPadding } = props;
 
+  if (!tags?.length) return null;
+
   return (
     <Box
       className={[
@@ -27,7 +34,7 @@ const Tags = (props: TagsProps) => {
         {t("tags")}
       </Typography>
       <Box className={styles.tag} component="ul">
-        {tags.map((tag: any) => (
+        {tags.map((tag) => (
           <Box className={styles.list} component="li" key={tag.slug}>
             <Link href={`/tag/${tag.slug}`}>{tag.name}</Link>
           </Box>

diff --git a/src/screens/blog_details/index.tsx b/src/screens/blog_details/index.tsx
@@ -14,25 +14,30 @@ import blogPlaceholderImg from "../../../public/images/assets/blog-placeholder.p
 import { Author, SocialMedia } from "./components";
 import * as styles from "./index.module.scss";
 import { ContentBox, ContentCSS, LaptopCSS, MobileCSS } from "./styles";
+import type { PostDetail } from "./types";
 
 // https://schema.org/TechArticle
 
-const BlogDetails = ({ post }: any) => {
+type Props = {
+  post: PostDetail;
+};
+
+const BlogDetails = ({ post }: Props) => {
   const theme = useTheme();
   const topRef = useRef(null);
   const { locale } = useRouter();
 
   if (!post) return null;
 
   const {
-    title,
-    tags,
     excerpt,
     featureImage,
     featureImageCaption,
-    slug,
     primaryAuthor: author,
     publishedAt,
+    slug,
+    tags,
+    title,
   } = post;
 
   const manyTagsStyle = tags.length > 50 ? styles.manyTags : "";
@@ -43,7 +48,7 @@ const BlogDetails = ({ post }: any) => {
       description={excerpt}
       footer
       image={featureImage}
-      keywords={tags.map((x: { name: any }) => x.name ?? "")}
+      keywords={tags?.map((x: { name: any }) => x.name ?? "") || []}
       skipLocale
       title={post.title}
       twitterImage={featureImage}
@@ -63,10 +68,12 @@ const BlogDetails = ({ post }: any) => {
               "image": [featureImage],
               "inLanguage": getLanguageFromLocale(locale),
               "datePublished": publishedAt,
-              "keywords": tags
-                .map((x: { name: any }) => x.name ?? "")
-                .filter(Boolean)
-                .join(", "),
+              ...(!!tags?.length && {
+                keywords: tags
+                  .map((x: { name: any }) => x.name ?? "")
+                  .filter(Boolean)
+                  .join(", "),
+              }),
               "author": [
                 {
                   "@type": "Person",
@@ -114,7 +121,7 @@ const BlogDetails = ({ post }: any) => {
             <ContentBox dangerouslySetInnerHTML={{ __html: post.html }} />
           </ContentCSS>
         </Box>
-        <Tags tags={tags} />
+        {!!tags?.length && <Tags tags={tags} />}
       </MobileCSS>
       <LaptopCSS>
         <Box className={styles.wrapper} ref={topRef}>
@@ -163,11 +170,13 @@ const BlogDetails = ({ post }: any) => {
             <ContentCSS theme={theme}>
               <ContentBox dangerouslySetInnerHTML={{ __html: post.html }} />
             </ContentCSS>
-            <Box display="flex" justifyContent="center">
-              <Box className={[styles.tags, manyTagsStyle].join(" ")}>
-                <Tags details noPadding tags={tags} />
+            {!!tags?.length && (
+              <Box display="flex" justifyContent="center">
+                <Box className={[styles.tags, manyTagsStyle].join(" ")}>
+                  <Tags details noPadding tags={tags} />
+                </Box>
               </Box>
-            </Box>
+            )}
           </Box>
           <Box className={[styles.scrollToTop, manyTagsStyle].join(" ")}>
             <ScrollToTop topRef={topRef} />

diff --git a/src/screens/blog_details/types.ts b/src/screens/blog_details/types.ts
@@ -0,0 +1,22 @@
+type Author = {
+  name: string;
+  profileImage: string;
+  slug: string;
+};
+
+type Tag = {
+  name: string;
+  slug: string;
+};
+
+export type PostDetail = {
+  excerpt: string;
+  featureImage: string;
+  featureImageCaption: string;
+  html: string;
+  primaryAuthor: Author;
+  publishedAt: string;
+  slug: string;
+  tags: Tag[];
+  title: string;
+};