Sorting by alphabet and clickable tags in items

montelibero-org · Aug 12, 2024 · 7d78f62 · 7d78f62
1 parent 990df90
commit 7d78f62
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 26 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -9,7 +9,6 @@ interface Props {
 
 const RootLayout: FC<Props> = ({ children }) => {
   return <Layout>{children}</Layout>;
-  // test
 };
 
 export default RootLayout;
diff --git a/src/pages/public/assets/AssetsListItem.tsx b/src/pages/public/assets/AssetsListItem.tsx
@@ -11,15 +11,25 @@ export interface AssetsItem {
 
 type Props = {
   item: AssetsItem;
+  tags: string[];
 };
 
-const AssetsListItem: FC<Props> = ({ item }) => {
+const AssetsListItem: FC<Props> = ({ item, tags }) => {
   const { net } = useStore(
     useShallow((state) => ({
       net: state.net,
     }))
   );
 
+  const addToHref = (tag: string) => {
+    if (!tags[0]) return `?tag[]=${tag}`;
+    return `?tag[]=${tags.join(",")},${tag}`;
+  };
+
+  const removeFromHref = (tag: string) => {
+    return `?tag[]=${tags.filter((t) => t !== tag).join(",")}`;
+  };
+
   return (
     <li style={{ padding: "1em", lineHeight: "1.6", overflow: "hidden" }}>
       <div>
@@ -31,29 +41,36 @@ const AssetsListItem: FC<Props> = ({ item }) => {
             href={`/${net}/account?id=${item?.issuer}`}
             style={{ marginRight: "1em" }}
           >
-            <span className="account-key" style={{fontSize: "1.6rem"}}>{item?.code}</span>
+            <span className="account-key" style={{ fontSize: "1.6rem" }}>
+              {item?.code}
+            </span>
           </Link>
-        </b>
-        {" "}
-        {item?.tag ? (
-          <a href="#" className="inline-tag">
-            #{item?.tag}
-          </a>
-        ) : (
-          <a href="#" className="inline-tag">
-            #other
-          </a>
-        )}
+        </b>{" "}
+        {item?.tag &&
+          (tags.includes(item.tag) ? (
+            <Link
+              href={removeFromHref(item?.tag)}
+              className="inline-tag active"
+            >
+              #{item?.tag}
+            </Link>
+          ) : (
+            <Link href={addToHref(item?.tag)} className="inline-tag">
+              #{item?.tag}
+            </Link>
+          ))}
       </div>
       <Link
-            title={item?.issuer}
-            aria-label={item?.issuer}
-            className="account-address"
-            href={`/${net}/account?id=${item?.issuer}`}
-            style={{ marginRight: "1em" }}
-          >
-            <span className="account-key" style={{fontSize: "1.6rem"}}>{item?.issuer}</span>
-          </Link>
+        title={item?.issuer}
+        aria-label={item?.issuer}
+        className="account-address"
+        href={`/${net}/account?id=${item?.issuer}`}
+        style={{ marginRight: "1em" }}
+      >
+        <span className="account-key" style={{ fontSize: "1.6rem" }}>
+          {item?.issuer}
+        </span>
+      </Link>
     </li>
   );
 };

diff --git a/src/pages/public/assets/page.tsx b/src/pages/public/assets/page.tsx
@@ -14,7 +14,6 @@ const Assets: FC = () => {
   const paramsSearch = searchParams?.get("search");
   const tags = searchParams?.get("tag[]")?.split(",") || [];
   const [staticTags, setStaticTags] = useState<string[]>([]);
-
   const [filter, setFilter] = useState<string>(paramsSearch || "");
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [displayedItems, setDisplayedItems] = useState<AssetsItem[]>([]);
@@ -54,7 +53,7 @@ const Assets: FC = () => {
   useEffect(() => {
     if (!filter) {
       const uniqueTags = [...new Set(displayedItems.map((item) => item.tag))];
-      setStaticTags(uniqueTags);
+      setStaticTags(uniqueTags.sort());
     }
   }, [displayedItems, filter]);
 
@@ -127,10 +126,10 @@ const Assets: FC = () => {
               ? displayedItems
                   .filter((item) => tags.includes(item.tag))
                   .map((value: AssetsItem, index: number) => (
-                    <AssetsListItem key={index} item={value} />
+                    <AssetsListItem key={index} item={value} tags={tags} />
                   ))
               : displayedItems.map((value: AssetsItem, index: number) => (
-                  <AssetsListItem key={index} item={value} />
+                  <AssetsListItem key={index} item={value} tags={tags} />
                 ))}
           </ul>
           <div ref={observerRef} />