Replaced Button components representing Tags with reusable Tag component

yaba-web/src/components/bookmarks/bookmark.jsx

@@ -3,6 +3,7 @@ import { Row, Col, Form, Button } from "../external";
 import DateTimeHelper from "../../utils/dateTimeHelper";
 import "../../styles/component/bookmark.css";
 import { useNavigate } from "react-router-dom";
+import { Tag } from "../../components";
 
 export function Bookmark(props) {
     const navigate = useNavigate();
@@ -16,9 +17,9 @@ export function Bookmark(props) {
                 <a href="#" style={{textDecoration: "none"}}>{props.bookmark.title}</a>
                 <div className="font-weight-normal">{props.bookmark.description.substring(0, 100)}</div>
                 <div>
-                    {props.bookmark.tags.map((tag) => {
+                    {
-                        return <Button variant="link" key={props.bookmark.id-tag.id} style={{textDecoration: "none"}} className="p-0 me-2">#{tag.name}</Button>
+                        props.bookmark.tags.map((tag) => <Tag key={props.bookmark.id-tag.id} tag={tag} />)
-                    })}
+                    }
                 </div>
                 <div>
                     <span>{DateTimeHelper.getFriendlyDate(props.bookmark.createdOn)} | </span>

yaba-web/src/components/index.js

@@ -1,12 +1,13 @@
 import { Footer } from "./footer";
 import { Header } from "./header";
-import { Bookmark } from "./bookmark/bookmark";
+import { Bookmark } from "./bookmarks/bookmark";
 import { Auth0ProviderWithNavigate } from "./auth0ProviderWithNavigate";
 import { ProtectedRoute } from "./protectedRoute";
 import { SplashScreen } from "./shared/splashScreen";
 import { SearchForm } from "./shared/searchForm";
 import { UpsertTagModal } from "./tags/upsertTagModal";
 import { InterceptModal } from "./shared/interceptModal";
+import { Tag } from "./tags/tag";
 
 export {
     Footer,
@@ -18,4 +19,5 @@ export {
     SearchForm,
     UpsertTagModal,
     InterceptModal,
+    Tag,
 };

yaba-web/src/components/tags/tag.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Button } from "../external";
+
+export function Tag(props) {
+    return (
+        <Button
+            variant="link" 
+            style={{textDecoration: "none"}} className={`ms-0 me-2 p-0 ${props.tag.isHidden ? "text-danger" : null}`} 
+            onClick={props.onClick}>
+            #{props.tag.name}
+        </Button>
+    );
+};

yaba-web/src/views/bookmarksListView.jsx

@@ -3,7 +3,7 @@ import { Alert, Col, Container, Row, Button, Modal, Dropdown, DropdownButton } f
 import { Bookmark } from "../components";
 import { useAuth0 } from "@auth0/auth0-react";
 import { deleteBookmarks, getAllBookmarks, hideBookmarks } from "../api";
-import { SplashScreen, SearchForm } from "../components";
+import { SplashScreen, SearchForm, Tag } from "../components";
 import { getTagGroups, isSubset, containsSubstring, flattenTagArrays } from "../utils";
 
 export function BookmarksListView(props) {
@@ -334,11 +334,7 @@ export function BookmarksListView(props) {
                                             <span key={group.name} className="text-primary fw-bold">{group.name}</span>
                                             <br />
                                             {
-                                                group.tags.map((tag) => {
+                                                group.tags.map((tag) => <Tag key={tag.id} tag={tag} onClick={() => onTagSelected(true, tag)} />)
-                                                    return <Button key={tag.id} variant="link" style={{textDecoration: "none"}} className={`ms-0 me-2 p-0 ${tag.isHidden ? "text-danger" : null}`} onClick={() => onTagSelected(true, tag)}>
-                                                            #{tag.name}
-                                                        </Button>
-                                                })
                                             }
                                         </div>
                                 })