diff --git a/app/layout.tsx b/app/layout.tsx index b91f8f0..382684d 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,14 +1,13 @@ -"use client"; import React, { FC } from "react"; -import Layout from "@/pages/Layout/_index" +import Layout from "@/pages/Layout/layout" import "./globals.css"; -interface RootLayoutProps { +interface Props { children: React.ReactNode; } -const RootLayout: FC = ({ children }) => { +const RootLayout: FC = ({ children }) => { return {children}; }; diff --git a/app/page.tsx b/app/page.tsx index a84a367..eeb2c5b 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -23,4 +23,4 @@ export default function Home() { ); -} +} \ No newline at end of file diff --git a/src/pages/Layout/_index.tsx b/src/pages/Layout/layout.tsx similarity index 99% rename from src/pages/Layout/_index.tsx rename to src/pages/Layout/layout.tsx index 3eaec72..1f41ca9 100644 --- a/src/pages/Layout/_index.tsx +++ b/src/pages/Layout/layout.tsx @@ -1,3 +1,5 @@ +"use client"; + import { FC, useEffect, useState } from "react"; import { useStore } from "@/features/store"; import { Footer, Header } from "@/widgets"; diff --git a/src/pages/public/account/publicnet.tsx b/src/pages/public/account/publicnet.tsx index 86e34e7..c3c525b 100644 --- a/src/pages/public/account/publicnet.tsx +++ b/src/pages/public/account/publicnet.tsx @@ -22,7 +22,7 @@ interface Props { } const PublicNet: FC = ({ id }) => { - const account = id; + const account = id const { net } = useStore(useShallow((state) => ({ net: state.net }))); const [information, setInformation] = useState( {} as Information diff --git a/src/pages/public/assets/AssetsListItem.tsx b/src/pages/public/assets/AssetsListItem.tsx index 4948723..91fe43b 100644 --- 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 = ({ item }) => { +const AssetsListItem: FC = ({ 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 (
  • @@ -31,29 +41,36 @@ const AssetsListItem: FC = ({ item }) => { href={`/${net}/account?id=${item?.issuer}`} style={{ marginRight: "1em" }} > - {item?.code} + + {item?.code} + - - {" "} - {item?.tag ? ( - - #{item?.tag} - - ) : ( - - #other - - )} + {" "} + {item?.tag && + (tags.includes(item.tag) ? ( + + #{item?.tag} + + ) : ( + + #{item?.tag} + + ))}
    - {item?.issuer} - + title={item?.issuer} + aria-label={item?.issuer} + className="account-address" + href={`/${net}/account?id=${item?.issuer}`} + style={{ marginRight: "1em" }} + > + + {item?.issuer} + +
  • ); }; diff --git a/src/pages/public/assets/page.tsx b/src/pages/public/assets/page.tsx index 0c0a7d1..8fe2c19 100644 --- a/src/pages/public/assets/page.tsx +++ b/src/pages/public/assets/page.tsx @@ -5,23 +5,27 @@ import { useSearchParams } from "next/navigation"; import { MainLayout } from "@/widgets"; import AssetsListItem, { AssetsItem } from "./AssetsListItem"; import trustedMtlAssets from "@/shared/configs/trusted-mtl-assets.json"; +import Link from "next/link"; const ITEMS_PER_PAGE = 20; const Assets: FC = () => { const searchParams = useSearchParams(); const paramsSearch = searchParams?.get("search"); - + const tags = searchParams?.get("tag[]")?.split(",") || []; + const [staticTags, setStaticTags] = useState([]); const [filter, setFilter] = useState(paramsSearch || ""); const [currentPage, setCurrentPage] = useState(1); const [displayedItems, setDisplayedItems] = useState([]); const observerRef = useRef(null); useEffect(() => { - const filteredItems = trustedMtlAssets.filter( - (item) => item.code.includes(filter) || item.issuer.includes(filter) + const filtredItems = trustedMtlAssets.filter( + (item) => + item.code.toLowerCase().includes(filter.toLowerCase()) || + item.issuer.toLowerCase().includes(filter.toLowerCase()) ); - setDisplayedItems(filteredItems.slice(0, currentPage * ITEMS_PER_PAGE)); + setDisplayedItems(filtredItems.slice(0, currentPage * ITEMS_PER_PAGE)); }, [filter, currentPage]); useEffect(() => { @@ -34,17 +38,25 @@ const Assets: FC = () => { { threshold: 1 } ); - if (observerRef.current) { - observer.observe(observerRef.current); + const currentObserverRef = observerRef.current; + if (currentObserverRef) { + observer.observe(currentObserverRef); } return () => { - if (observerRef.current) { - observer.unobserve(observerRef.current); + if (currentObserverRef) { + observer.unobserve(currentObserverRef); } }; }, []); + useEffect(() => { + if (!filter) { + const uniqueTags = [...new Set(displayedItems.map((item) => item.tag))]; + setStaticTags(uniqueTags.sort()); + } + }, [displayedItems, filter]); + const handleSubmit = (e: FormEvent) => { e.preventDefault(); const formData = new FormData(e.currentTarget); @@ -52,6 +64,15 @@ const Assets: FC = () => { setCurrentPage(1); }; + 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 (
    @@ -62,6 +83,7 @@ const Assets: FC = () => { className="icon icon-github" title="Log in with Github" style={{ fontSize: "1.4em" }} + target="_blank" >
    @@ -72,19 +94,43 @@ const Assets: FC = () => { name="search" className="primary" defaultValue={filter} + onChange={(e) => setFilter(e.target.value)} placeholder="Search assets by code, or public key" style={{ maxWidth: "36em" }} />
    Filter by tag:
    -
    +
    + {staticTags.map((value: string, index: number) => ( +
    + {tags.includes(value) ? ( + + #{value} + + ) : ( + + #{value} + + )} +
    + ))} +
      - {displayedItems.map((value: AssetsItem, index: number) => ( - - ))} + {tags[0] + ? displayedItems + .filter((item) => tags.includes(item.tag)) + .map((value: AssetsItem, index: number) => ( + + )) + : displayedItems.map((value: AssetsItem, index: number) => ( + + ))}
    diff --git a/src/shared/lib/processKeys/index.ts b/src/shared/lib/processKeys/index.ts index cd58712..f02728f 100644 --- a/src/shared/lib/processKeys/index.ts +++ b/src/shared/lib/processKeys/index.ts @@ -36,7 +36,7 @@ const processKeys = (key: string, value: string): { processedKey: string, proces processedValue = `${decodedValue}`; break; case 'links': - processedValue = `${decodedValue}`; + processedValue = `${decodedValue}`; break; case 'names': processedValue = decodedValue; // Add specific processing for names if needed