記事のタグ、カテゴリの個数を表示するように追加

4 files changed, 39 insertions, 18 deletions

diff --git a/src/app/article/_components/articleListElement.tsx b/src/app/article/_components/articleListElement.tsx
index 5437c04..3cd30c1 100644
--- a/src/app/article/_components/articleListElement.tsx
+++ b/src/app/article/_components/articleListElement.tsx
@@ -6,7 +6,8 @@ dateformat.i18n.dayNames = [
   '日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'
 ];
 type DisplayData = Awaited<ReturnType<ArticleLoader["loadData"]>>["articles"][number];
-export function ArticleListElement(displayData: DisplayData[]) {
+type CategoryTagData = Awaited<ReturnType<ArticleLoader["loadData"]>>["categoryTag"]
+export function ArticleListElement(displayData: DisplayData[], categoryTag: CategoryTagData) {
   return (
     <table className="w-full">
       <thead className="bg-white border-b sticky top-0 text-md font-medium text-gray-900">
@@ -60,7 +61,14 @@ export function ArticleListElement(displayData: DisplayData[]) {
               if (d.breadLinks.indexOf(bread) != 0) {
                 breadChildElement.push(<span>＞</span>);
               }
-              breadChildElement.push(<Link href={`/article/tag/${bread}`} className="transition duration-300 ease-in-out hover:text-gray-900" key={`bread-${bread}`}>{bread}</Link>);
+              const tagCount = categoryTag.getTagCount(bread);
+              breadChildElement.push(
+                <Link
+                  href={`/article/tag/${bread}`}
+                  className="transition duration-300 ease-in-out hover:text-gray-900"
+                  key={`bread-${bread}`}
+                >{bread}({tagCount})</Link>
+              );
             }
             breadElement = (
               <span className="flex gap-0.5">
@@ -76,8 +84,15 @@ export function ArticleListElement(displayData: DisplayData[]) {
             for (const tag of d.tags) {
               if (d.tags.indexOf(tag) != 0) {
                 tagChildElements.push(<span>／</span>);
-              }
-              tagChildElements.push(<Link href={`/article/tag/${tag}`} className="transition duration-300 ease-in-out hover:text-gray-900" key={`tag-${tag}`}>{tag}</Link>);
+              };
+              const tagCount = categoryTag.getTagCount(tag);
+              tagChildElements.push(
+                <Link
+                  href={`/article/tag/${tag}`}
+                  className="transition duration-300 ease-in-out hover:text-gray-900"
+                  key={`tag-${tag}`}
+                >{tag}({tagCount})</Link>
+              );
             }
             tagElement = (
               <span className="flex gap-0.5">
diff --git a/src/app/article/all/[pageId]/page.tsx b/src/app/article/all/[pageId]/page.tsx
index e076aa0..622edbb 100644
--- a/src/app/article/all/[pageId]/page.tsx
+++ b/src/app/article/all/[pageId]/page.tsx
@@ -28,7 +28,7 @@ export default async function Page(context: PageType) {
     <div className="p-1 gap-16">
       {pagenationElement(pageId, chunkdData.length)}
       <div className="text-right">全:{loadedData.articles.length}件</div>
-      {ArticleListElement(displayData)}
+      {ArticleListElement(displayData, loadedData.categoryTag)}
       {pagenationElement(pageId, chunkdData.length)}
     </div>
   );
diff --git a/src/app/article/tag/[tagName]/page.tsx b/src/app/article/tag/[tagName]/page.tsx
index 991ebfc..7fbce4c 100644
--- a/src/app/article/tag/[tagName]/page.tsx
+++ b/src/app/article/tag/[tagName]/page.tsx
@@ -13,23 +13,21 @@ export async function generateMetadata(context: PageType) {
 }
 export default async function Page(context: PageType) {
   const nowPageTagName = decodeURIComponent(context.params.tagName);
-  const loadedData = await ArticleLoader.instance.loadData().then(articles => {
-    const filterd = articles.articles.filter(article => {
-      if (article.tags.includes(nowPageTagName)) {
-        return true;
-      }
-      if (article.breadLinks.includes(nowPageTagName)) {
-        return true;
-      }
-      return false;
-    });
-    return filterd;
+  const loadedData = await ArticleLoader.instance.loadData()
+  const filterdArticles = loadedData.articles.filter(article => {
+    if (article.tags.includes(nowPageTagName)) {
+      return true;
+    }
+    if (article.breadLinks.includes(nowPageTagName)) {
+      return true;
+    }
+    return false;
   });
   return (
     <div className="p-1 gap-16">
       <div className="text-center">タグ:{nowPageTagName} の記事一覧</div>
-      <div className="text-right">全:{loadedData.length}件</div>
-      {ArticleListElement(loadedData)}
+      <div className="text-right">全:{filterdArticles.length}件</div>
+      {ArticleListElement(filterdArticles, loadedData.categoryTag)}
     </div>
   );
 }
diff --git a/src/util/articleLoader.ts b/src/util/articleLoader.ts
index 1ae0448..f7c7e95 100644
--- a/src/util/articleLoader.ts
+++ b/src/util/articleLoader.ts
@@ -122,6 +122,14 @@ class CategoryTag {
       storeCategory.count += 1;
     }
   }
+  getTagCount(tagName: string) {
+    const data = this.data.get(tagName);
+    if (data == null) {
+      throw new Error(`タグ名:[${tagName}]`);
+    }
+    const count = data.count;
+    return count;
+  }
 }
 class Article {
   constructor(