support contentful's native tags

components/TagBlock.tsx

@@ -1,5 +1,5 @@
-import classNames from 'classnames';
 import React from 'react';
+import classNames from 'classnames';
 
 interface Props {
   tag: string;
@@ -9,7 +9,7 @@ interface Props {
 
 export function TagBlock(props: Props) {
   const { tag, size = 'small', classes } = props;
-  const href = `/tag/${tag.toLowerCase()}`;
+  const href = `/tag/${tag}`;
 
   return (
     <a
@@ -23,7 +23,7 @@ export function TagBlock(props: Props) {
         classes,
       )}
     >
-      <span className="px-2">{tag.toLowerCase()}</span>
+      <span className="px-2">{tag}</span>
     </a>
   );
 }

pages/tag/[...slug].tsx

@@ -1,5 +1,6 @@
 import { CMS, METADATA } from '@/constants';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
+import { IPost, ITagList } from '@/types/cms';
 import { PageType, setPageType } from '@/state/navigation';
 import { ReactElement, useEffect } from 'react';
 
@@ -9,7 +10,6 @@ import { CmsApi } from '@/services/cms';
 import { Contained } from '@/components/Contained';
 import CustomHead from '@/components/CustomHead';
 import { IPath } from '@/types';
-import { IPost } from '@/types/cms';
 import Pagination from '@/components/Pagination';
 import { TagBlock } from '@/components/TagBlock';
 import classNames from 'classnames';
@@ -38,7 +38,7 @@ export default function Tag(props: Props): ReactElement {
 
   useEffect(() => {
     dispatch(setPageType(PageType.BLOG));
-  }, []);
+  }, [dispatch]);
 
   return (
     <>
@@ -177,16 +177,16 @@ export const getStaticProps: GetStaticProps = async (
 export const getStaticPaths: GetStaticPaths = async () => {
   const cms = new CmsApi();
 
-  const tags = Object.values(await cms.fetchTagList());
+  const tags: ITagList = await cms.fetchTagList();
   const paths: IPath[] = [];
 
-  for (let i = 0; i < tags.length; i++) {
-    const { entries, total } = await cms.fetchBlogEntriesByTag(tags[i]);
+  for (let tag of Object.values(tags)) {
+    const { entries, total } = await cms.fetchBlogEntriesByTag(tag);
     const pageCount = Math.ceil(total / CMS.BLOG_RESULTS_PER_PAGE);
     const _paths = [];
 
     for (let j = 1; j <= pageCount; j++) {
-      _paths.push({ params: { slug: [tags[i], String(j)] } });
+      _paths.push({ params: { slug: [tag, String(j)] } });
     }
 
     paths.push(..._paths);

services/cms.tsx

@@ -43,15 +43,10 @@ export class CmsApi {
   }
 
   public async fetchTagList(): Promise<ITagList> {
-    // TODO Migrate to Contentful Tag System
-    const { entries, total } = await this.fetchBlogEntries();
+    const _tags = await this.client.getTags();
     const tags: ITagList = {};
-    entries.forEach(entry => {
-      entry.tags.forEach(tag => {
-        if (!tags[tag]) {
-          tags[tag] = tag;
-        }
-      });
+    _tags.items.forEach(tag => {
+      tags[tag.sys.id] = tag.name;
     });
     return tags;
   }
@@ -79,10 +74,15 @@ export class CmsApi {
     quantity = CMS.BLOG_RESULTS_PER_PAGE_TAGGED,
     page = 1,
   ): Promise<IFetchBlogEntriesReturn> {
+    const taglist = await this.fetchTagList();
+    const id = Object.entries(taglist).filter(([_, value]) => {
+      return tag === value;
+    })[0][0];
+
     const _entries = await this.client.getEntries({
       content_type: 'post',
       order: '-fields.date',
-      'fields.tags[in]': tag,
+      'metadata.tags.sys.id[in]': id,
       limit: quantity,
       skip: (page - 1) * quantity,
     });
@@ -102,11 +102,11 @@ export class CmsApi {
     quantity = CMS.BLOG_RESULTS_PER_PAGE,
     page = 1,
   ): Promise<IFetchBlogEntriesReturn> {
-    const DEV_UPDATE_TAG = 'dev-update';
+    const DEV_UPDATE_TAG = 'devUpdate';
     const _entries = await this.client.getEntries({
       content_type: 'post', // only fetch blog post entry
       order: '-fields.date',
-      'fields.tags[ne]': DEV_UPDATE_TAG, // Exclude blog posts with the "dev-update" tag
+      'metadata.tags.sys.id[nin]': DEV_UPDATE_TAG, // Exclude blog posts with the "dev-update" tag
       limit: quantity,
       skip: (page - 1) * quantity,
     });