refactor: common tagsgroup component

webofpies · Jan 29, 2025 · ac62e71 · ac62e71
1 parent 3d034b7
commit ac62e71
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 31 deletions.
diff --git a/...onents/TermsTable/components/PillCell.jsx → ...components/common/TagsGroup/TagsGroup.jsx b/...onents/TermsTable/components/PillCell.jsx → ...components/common/TagsGroup/TagsGroup.jsx
@@ -1,10 +1,10 @@
 import { Pill, PillGroup } from "@mantine/core";
-import classes from "../TermsTable.module.css";
+import classes from "./TagsGroup.module.css";
 
-function PillCell({ tagsList }) {
+function TagsGroup({ tags }) {
   return (
     <PillGroup gap={4}>
-      {tagsList.map((tag) => (
+      {tags.map((tag) => (
         <Pill
           key={tag}
           classNames={{
@@ -17,4 +17,4 @@ function PillCell({ tagsList }) {
   );
 }
 
-export default PillCell;
+export default TagsGroup;
diff --git a/...mponents/TermsTable/TermsTable.module.css → ...nts/common/TagsGroup/TagsGroup.module.css b/...mponents/TermsTable/TermsTable.module.css → ...nts/common/TagsGroup/TagsGroup.module.css
diff --git a/frontend/src/features/book/components/BooksTable/columnDefinition.jsx b/frontend/src/features/book/components/BooksTable/columnDefinition.jsx
@@ -1,11 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "react-router-dom";
-import { Group, Pill, PillGroup, Text, ThemeIcon } from "@mantine/core";
+import { Group, Text, ThemeIcon } from "@mantine/core";
 import {
   IconArchiveFilled,
   IconCircleCheckFilled,
   IconHeadphonesFilled,
 } from "@tabler/icons-react";
+import TagsGroup from "@common/TagsGroup/TagsGroup";
 import StatsBar from "../StatsBar/StatsBar";
 import { getBookStatsQuery } from "../../api/query";
 import dayjs from "dayjs";
@@ -104,13 +105,7 @@ const columnDefinition = (languageChoices, tagChoices) => [
     filterVariant: "select",
     columnFilterModeOptions: false,
     accessorFn: (row) => (row.tags.length > 0 ? row.tags.join() : ""),
-    Cell: ({ row }) => (
-      <PillGroup gap={4}>
-        {row.original.tags.map((tag) => (
-          <Pill key={tag}>{tag}</Pill>
-        ))}
-      </PillGroup>
-    ),
+    Cell: ({ row }) => <TagsGroup tags={row.original.tags} />,
   },
   {
     header: "LAST READ",

diff --git a/frontend/src/features/term/components/Popup/components/PopupData/PopupData.jsx b/frontend/src/features/term/components/Popup/components/PopupData/PopupData.jsx
@@ -1,6 +1,6 @@
 // lute\templates\read\termpopup.html
-
-import { Group, Pill, PillGroup, Text, Tooltip } from "@mantine/core";
+import { Group, Text, Tooltip } from "@mantine/core";
+import TagsGroup from "@common/TagsGroup/TagsGroup";
 import classes from "./PopupData.module.css";
 
 function PopupData({ data }) {
@@ -9,13 +9,7 @@ function PopupData({ data }) {
       <div className={classes.container}>
         <Group gap={5} wrap="nowrap">
           <span className={classes.term}>{data.text}</span>
-          {data.tags.length > 0 && (
-            <PillGroup gap={4}>
-              {data.tags.map((tag) => (
-                <Pill key={tag}>{tag}</Pill>
-              ))}
-            </PillGroup>
-          )}
+          {data.tags.length > 0 && <TagsGroup tags={data.tags} />}
         </Group>
 
         {data.pronunciation && <em>{data.pronunciation}</em>}
@@ -64,13 +58,7 @@ function Section({ data }) {
           }}
         />
         {d.pronunciation && <em>({d.pronunciation})</em>}
-        {d.tags.length > 0 && (
-          <PillGroup gap={4}>
-            {d.tags.map((tag) => (
-              <Pill key={tag}>{tag}</Pill>
-            ))}
-          </PillGroup>
-        )}
+        {d.tags.length > 0 && <TagsGroup tags={d.tags} />}
       </Group>
       {d.translation && (
         <span

diff --git a/frontend/src/features/term/components/TermsTable/columnDefinition.jsx b/frontend/src/features/term/components/TermsTable/columnDefinition.jsx
@@ -13,7 +13,7 @@ import {
   IconNumber5,
 } from "@tabler/icons-react";
 import StatusRadio from "../StatusRadio/StatusRadio";
-import PillCell from "./components/PillCell";
+import TagsGroup from "@common/TagsGroup/TagsGroup";
 import TermImage from "../TermImage/TermImage";
 import { buildSuggestionsList } from "@actions/utils";
 import { getTermSuggestionsQuery } from "@term/api/query";
@@ -69,7 +69,7 @@ const columnDefinition = (languageChoices, tagChoices) => [
       const parentsList = row.original.parentsString
         ? row.original.parentsString.split(",")
         : [];
-      return <PillCell tagsList={parentsList} />;
+      return <TagsGroup tags={parentsList} />;
     },
     Edit: ({ row, cell }) => {
       const parentsList = row.original.parentsString
@@ -168,7 +168,7 @@ const columnDefinition = (languageChoices, tagChoices) => [
       const tagsList = row.original.tagsString
         ? row.original.tagsString.split(",")
         : [];
-      return <PillCell tagsList={tagsList} />;
+      return <TagsGroup tags={tagsList} />;
     },
     Edit: ({ cell }) => {
       const tagsList = cell.getValue() ? cell.getValue().split(",") : [];