From 32f5880e495ff39b66d8ea45cdb165620ff0ff69 Mon Sep 17 00:00:00 2001
From: Anurat Eiamphoklarp <rhymerealm@gmail.com>
Date: Tue, 12 Mar 2024 03:38:34 +0700
Subject: [PATCH 1/2] #44 add chapter text in chapter filter menu

---
 src/components/SelectChapters/ChapterButton.jsx  | 4 ++--
 src/components/SelectChapters/SelectChapters.jsx | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/SelectChapters/ChapterButton.jsx b/src/components/SelectChapters/ChapterButton.jsx
index a8a5726..fce4287 100644
--- a/src/components/SelectChapters/ChapterButton.jsx
+++ b/src/components/SelectChapters/ChapterButton.jsx
@@ -2,7 +2,7 @@ import { Icon } from "@iconify/react";
 
 import chapterColorCode from "../../constants/chapterColorCode";
 
-function ChapterButton({ chapter, selected, onClick }) {
+function ChapterButton({ chapter, wording, selected, onClick }) {
   const activeStyle = "rounded-full text-black px-2";
   const inactiveStyle = "text-[#9f9f9f] px-4";
 
@@ -33,7 +33,7 @@ function ChapterButton({ chapter, selected, onClick }) {
           </div>
         )}
         <div className="text-ellipsis whitespace-nowrap overflow-hidden">
-          {chapter}
+          {wording}
         </div>
       </div>
     </button>
diff --git a/src/components/SelectChapters/SelectChapters.jsx b/src/components/SelectChapters/SelectChapters.jsx
index 4d66b34..773e2b7 100644
--- a/src/components/SelectChapters/SelectChapters.jsx
+++ b/src/components/SelectChapters/SelectChapters.jsx
@@ -1,5 +1,5 @@
 import ChapterButton from "./ChapterButton";
-import chapters from "../../constants/chapters";
+import chapters, { chapterNameToId } from "../../constants/chapters";
 
 function SelectChapters(props) {
   const { selectedChapters, onChange } = props;
@@ -9,6 +9,7 @@ function SelectChapters(props) {
       <ChapterButton
         key={"ทั้งหมด"}
         chapter={"ทั้งหมด"}
+        wording={"ทั้งหมด"}
         selected={selectedChapters.length === 0}
         onClick={() => {
           onChange([]);
@@ -18,6 +19,11 @@ function SelectChapters(props) {
         <ChapterButton
           key={chapter}
           chapter={chapter}
+          wording={
+            chapterNameToId[chapter].match(/^[0-9]+$/)
+              ? 'หมวด ' + chapterNameToId[chapter] + ' ' + chapter
+              : chapter
+          }
           selected={selectedChapters.includes(chapter)}
           onClick={() => {
             if (selectedChapters.includes(chapter)) {

From a7ad6f0e9af0e671801d48450fc5b470e5662ca5 Mon Sep 17 00:00:00 2001
From: Anurat Eiamphoklarp <rhymerealm@gmail.com>
Date: Tue, 12 Mar 2024 04:06:12 +0700
Subject: [PATCH 2/2] #44 add chapter text in chapter filter menu (on chapter
 seleting and mobile)

---
 src/components/Overview/ByChapter.jsx                     | 8 ++++++--
 src/components/Overview/ByDiscussionist.jsx               | 7 ++++++-
 src/components/Overview/BySection.jsx                     | 7 ++++++-
 src/components/SelectChapters/ChapterMobilePillButton.jsx | 4 ++--
 src/components/SelectChapters/SelectChaptersMobile.jsx    | 8 +++++++-
 src/pages/Discussionist.jsx                               | 5 +++++
 6 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/Overview/ByChapter.jsx b/src/components/Overview/ByChapter.jsx
index 28d3cbf..a2942d9 100644
--- a/src/components/Overview/ByChapter.jsx
+++ b/src/components/Overview/ByChapter.jsx
@@ -7,7 +7,7 @@ import SortBy from "../SortBy";
 
 import createDataObject from "../../c60-data-query/data-object.js";
 import data from "../../c60-data-query/data.js";
-import { chapterIdToName } from "../../constants/chapters";
+import { chapterNameToId, chapterIdToName } from "../../constants/chapters";
 
 function ByChapter() {
   const [sort, setSort] = useState(0);
@@ -45,7 +45,11 @@ function ByChapter() {
           {result.map(([chapterName, count]) => (
             <Link to={`/chapter/${chapterName}`} className="w-full" key={chapterName}>
               <ListItem
-                title={chapterName}
+                title={
+                  chapterNameToId[chapterName].match(/^[0-9]+$/)
+                    ? 'หมวด ' + chapterNameToId[chapterName] + ' ' + chapterName
+                    : chapterName
+                }
                 count={count}
                 chartColor={chapterColorCode[chapterName]}
               />
diff --git a/src/components/Overview/ByDiscussionist.jsx b/src/components/Overview/ByDiscussionist.jsx
index 546a735..411ecf3 100644
--- a/src/components/Overview/ByDiscussionist.jsx
+++ b/src/components/Overview/ByDiscussionist.jsx
@@ -11,7 +11,7 @@ import SortBy from "../SortBy";
 
 import createDataObject from "../../c60-data-query/data-object.js";
 import data from "../../c60-data-query/data.js";
-import { chapterIdToName } from "../../constants/chapters.js";
+import { chapterNameToId, chapterIdToName } from "../../constants/chapters.js";
 
 function ByDiscussionist() {
   const [sort, setSort] = useState(0);
@@ -119,6 +119,11 @@ function ByDiscussionist() {
                     {selectedChapters.map((chapter) => (
                       <ChapterMobilePillButton
                         chapter={chapter}
+                        wording={
+                          chapterNameToId[chapter].match(/^[0-9]+$/)
+                            ? 'หมวด ' + chapterNameToId[chapter] + ' ' + chapter
+                            : chapter
+                        }
                         remove={handleRemoveChapter}
                       />
                     ))}
diff --git a/src/components/Overview/BySection.jsx b/src/components/Overview/BySection.jsx
index 8a89dbd..520dbf7 100644
--- a/src/components/Overview/BySection.jsx
+++ b/src/components/Overview/BySection.jsx
@@ -12,7 +12,7 @@ import SortBy from "../SortBy";
 
 import createDataObject from "../../c60-data-query/data-object.js";
 import data from "../../c60-data-query/data.js";
-import { chapterIdToName } from "../../constants/chapters";
+import { chapterNameToId, chapterIdToName } from "../../constants/chapters";
 import isNumeric from "../../utils/isNumeric.js";
 
 function BySection() {
@@ -120,6 +120,11 @@ function BySection() {
                     {selectedChapters.map((chapter) => (
                       <ChapterMobilePillButton
                         chapter={chapter}
+                        wording={
+                          chapterNameToId[chapter].match(/^[0-9]+$/)
+                            ? 'หมวด ' + chapterNameToId[chapter] + ' ' + chapter
+                            : chapter
+                        }
                         remove={handleRemoveChapter}
                       />
                     ))}
diff --git a/src/components/SelectChapters/ChapterMobilePillButton.jsx b/src/components/SelectChapters/ChapterMobilePillButton.jsx
index 3c54ca3..68a9c00 100644
--- a/src/components/SelectChapters/ChapterMobilePillButton.jsx
+++ b/src/components/SelectChapters/ChapterMobilePillButton.jsx
@@ -2,7 +2,7 @@ import { Icon } from "@iconify/react";
 
 import chapterColorCode from "../../constants/chapterColorCode";
 
-function ChapterMobilePillButton({ chapter, remove }) {
+function ChapterMobilePillButton({ chapter, wording, remove }) {
   return (
     <div className="bg-[#2A2A2A] rounded-full py-2 px-2">
       <div className="flex justify-between gap-1 items-center">
@@ -15,7 +15,7 @@ function ChapterMobilePillButton({ chapter, remove }) {
             flexShrink: 0,
           }}
         ></div>
-        <div className="flex-auto text-sm">{chapter}</div>
+        <div className="flex-auto text-sm">{wording}</div>
         <button onClick={() => remove(chapter)}>
           <Icon icon="line-md:close" style={{ fontSize: "16px" }}></Icon>
         </button>
diff --git a/src/components/SelectChapters/SelectChaptersMobile.jsx b/src/components/SelectChapters/SelectChaptersMobile.jsx
index f8b9407..5e46e07 100644
--- a/src/components/SelectChapters/SelectChaptersMobile.jsx
+++ b/src/components/SelectChapters/SelectChaptersMobile.jsx
@@ -1,5 +1,5 @@
 import ChapterButton from "./ChapterButton";
-import chapters from "../../constants/chapters";
+import chapters, { chapterNameToId } from "../../constants/chapters";
 import { Icon } from "@iconify/react";
 
 function SelectChaptersMobile(props) {
@@ -13,6 +13,7 @@ function SelectChaptersMobile(props) {
       <ChapterButton
         key={"ทั้งหมด"}
         chapter={"ทั้งหมด"}
+        wording={"ทั้งหมด"}
         selected={selectedChapters.length === 0}
         onClick={() => {
           onChange([]);
@@ -22,6 +23,11 @@ function SelectChaptersMobile(props) {
         <ChapterButton
           key={chapter}
           chapter={chapter}
+          wording={
+            chapterNameToId[chapter].match(/^[0-9]+$/)
+              ? 'หมวด ' + chapterNameToId[chapter] + ' ' + chapter
+              : chapter
+          }
           selected={selectedChapters.includes(chapter)}
           onClick={() => {
             if (selectedChapters.includes(chapter)) {
diff --git a/src/pages/Discussionist.jsx b/src/pages/Discussionist.jsx
index 03f59d8..05f84e0 100644
--- a/src/pages/Discussionist.jsx
+++ b/src/pages/Discussionist.jsx
@@ -141,6 +141,11 @@ export default function Discussionist() {
                     {selectedChapters.map((chapter) => (
                       <ChapterMobilePillButton
                         chapter={chapter}
+                        wording={
+                          chapterNameToId[chapter].match(/^[0-9]+$/)
+                            ? 'หมวด ' + chapterNameToId[chapter] + ' ' + chapter
+                            : chapter
+                        }
                         remove={handleRemoveChapter}
                       />
                     ))}