Merge pull request #65 from kaogeek/44-add-chapter-text-in-filter-menu

#44 add chapter text in chapter filter menu
kaogeek · Mar 12, 2024 · 277279d · 277279d
2 parents 234174f + a7ad6f0
commit 277279d
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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/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/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/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)) {

diff --git 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
@@ -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}
                       />
                     ))}