From f9ff893763065cd91d38bd28d42d943d0ceeb779 Mon Sep 17 00:00:00 2001 From: DIYgod Date: Wed, 15 Mar 2023 17:50:14 +0000 Subject: [PATCH] feat: sorting reaction component --- public/locales/zh/common.json | 4 +- src/components/common/CharacterList.tsx | 83 +++++++------ src/components/common/PatronModal.tsx | 1 - src/components/common/Reactions.tsx | 149 ++++++++++++------------ src/components/site/PostFooter.tsx | 7 +- src/components/site/SitePage.tsx | 2 +- src/components/ui/Button.tsx | 1 + src/css/tailwind.css | 13 +++ src/queries/page.ts | 10 +- 9 files changed, 146 insertions(+), 124 deletions(-) diff --git a/public/locales/zh/common.json b/public/locales/zh/common.json index 74f962df..42b49087 100644 --- a/public/locales/zh/common.json +++ b/public/locales/zh/common.json @@ -30,6 +30,7 @@ "Cancel Reply": "取消回复", "ago": "{{time}}前", "joined ago": "{{time}}前加入", + "Like": "点赞", "Mint to an NFT": "铸造为 NFT", "Like successfull": "点赞成功", "Mint successfull": "铸造成功", @@ -59,5 +60,6 @@ "One-time": "一次性", "Monthly and NFT Rewards": "每月和 NFT 奖励", "Coming soon": "即将推出", - "What is Mira? Where can I get some?" : "Mira 是什么？我在哪里可以获得？" + "What is Mira? Where can I get some?" : "Mira 是什么？我在哪里可以获得？", + "Tip": "赞赏" } \ No newline at end of file diff --git a/src/components/common/CharacterList.tsx b/src/components/common/CharacterList.tsx index be941025..8c5295f6 100644 --- a/src/components/common/CharacterList.tsx +++ b/src/components/common/CharacterList.tsx @@ -14,7 +14,9 @@ export const CharacterList: React.FC<{ setOpen: (open: boolean) => void hasMore: boolean loadMore: () => Promise - list: any[] + list: { + list: any[] + }[] title: string }> = ({ open, setOpen, hasMore, loadMore, list, title }) => { const { t } = useTranslation("common") @@ -33,44 +35,49 @@ export const CharacterList: React.FC<{ useWindow={false} > {list?.length ? ( - list.map((sub: any, index) => ( -
- - - + page.list?.map((sub: any, index) => { + const character = sub?.character || sub?.fromCharacter + return ( +
+ + + + + {character?.metadata?.content?.name} + + @{character?.handle} + + + - - {sub.character?.metadata?.content?.name} - - @{sub.character?.handle} - - - - - -
- )) + > + + +
+ ) + }), + ) ) : (
{t("No Content Yet.")} diff --git a/src/components/common/PatronModal.tsx b/src/components/common/PatronModal.tsx index 6c081976..3b64f5bf 100644 --- a/src/components/common/PatronModal.tsx +++ b/src/components/common/PatronModal.tsx @@ -16,7 +16,6 @@ import { CharacterFloatCard } from "./CharacterFloatCard" import { UniLink } from "../ui/UniLink" import { getSiteLink } from "~/lib/helpers" import { CSB_SCAN } from "~/lib/env" -import { BlockchainIcon } from "../icons/BlockchainIcon" export const PatronModal: React.FC<{ site: Profile | undefined | null diff --git a/src/components/common/Reactions.tsx b/src/components/common/Reactions.tsx index b2c0fb95..961271c0 100644 --- a/src/components/common/Reactions.tsx +++ b/src/components/common/Reactions.tsx @@ -21,23 +21,23 @@ import { cn } from "~/lib/utils" import { Tooltip } from "~/components/ui/Tooltip" import confetti from "canvas-confetti" import { Trans, useTranslation } from "next-i18next" +import { Profile } from "~/lib/types" export const Reactions: React.FC<{ className?: string size?: "sm" | "base" pageId?: string -}> = ({ className, size, pageId }) => { + site?: Profile | null +}> = ({ className, size, pageId, site }) => { const toggleLikePage = useToggleLikePage() const mintPage = useMintPage() const { t } = useTranslation("common") + // like const userSite = useAccountSites() const [isLikeOpen, setIsLikeOpen] = useState(false) - const [isMintOpen, setIsMintOpen] = useState(false) const [isLikeListOpen, setIsLikeListOpen] = useState(false) - const [isMintListOpen, setIsMintListOpen] = useState(false) const likeRef = useRef(null) - const mintRef = useRef(null) const [likes, likesMutation] = useGetLikes({ pageId }) const [likeStatus] = useCheckLike({ @@ -51,12 +51,6 @@ export const Reactions: React.FC<{ } } - const mints = useGetMints({ - pageId: pageId, - includeCharacter: size !== "sm", - }) - const isMint = useCheckMint(pageId) - const like = () => { if (pageId) { if (likeStatus.isLiked) { @@ -87,6 +81,23 @@ export const Reactions: React.FC<{ } }, [toggleLikePage.isSuccess]) + // mint + const [isMintOpen, setIsMintOpen] = useState(false) + const [isMintListOpen, setIsMintListOpen] = useState(false) + const mintRef = useRef(null) + + const mints = useGetMints({ + pageId: pageId, + includeCharacter: size !== "sm", + }) + const isMint = useCheckMint(pageId) + + const loadMoreMints = async () => { + if (mints.hasNextPage && !mints.isFetchingNextPage) { + await mints.fetchNextPage() + } + } + const mint = () => { if (pageId) { if (isMint.data?.count) { @@ -123,41 +134,16 @@ export const Reactions: React.FC<{ } }, [mintPage.isSuccess]) - const [mintList, setMintList] = useState([]) - const [mintCursor, setMintCursor] = useState() - useEffect(() => { - if (mints.isSuccess && mints.data) { - setMintList(mints.data.list || []) - setMintCursor(mints.data.cursor || "") - } - }, [mints.isSuccess, mints.data]) - - const loadMoreMints = async () => { - if (mintCursor && pageId) { - const subs = await getMints({ - pageId: pageId, - cursor: mintCursor, - }) - setMintList((prev) => [...prev, ...(subs?.list || [])]) - setMintCursor(subs?.cursor || "") - } - } - return ( <>
-
+
{size !== "sm" && (
    setIsLikeListOpen(true)} > {likes @@ -207,38 +204,38 @@ export const Reactions: React.FC<{ )}
- {(() => { - const inner = ( - - ) - return size !== "sm" ? ( - - {inner} - - ) : ( - inner - ) - })()} + ) + return size !== "sm" ? ( + + {inner} + + ) : ( + inner + ) + })()} + {mints.data?.pages?.[0]?.count || 0} + {size !== "sm" && (
    setIsMintListOpen(true)} > - {mints.data?.list + {mints.data?.pages?.[0]?.list ?.sort((a, b: any) => b.character?.metadata?.content?.avatars?.[0] ? 1 : -1, ) @@ -253,10 +250,10 @@ export const Reactions: React.FC<{ /> ))} - {(mints.data?.count || 0) > 3 && ( + {(mints.data?.pages?.[0]?.count || 0) > 3 && (
  • - +{mints.data!.count - 3} + +{mints.data!.pages?.[0]?.count - 3}
    • )} @@ -320,15 +317,15 @@ export const Reactions: React.FC<{ title={t("Like List")} loadMore={loadMoreLikes} hasMore={!!likesMutation.hasNextPage} - list={likes} + list={likesMutation.data?.pages || []} >
diff --git a/src/components/site/PostFooter.tsx b/src/components/site/PostFooter.tsx index e94d062d..f9a3b1ff 100644 --- a/src/components/site/PostFooter.tsx +++ b/src/components/site/PostFooter.tsx @@ -1,13 +1,14 @@ -import { Note } from "~/lib/types" +import { Note, Profile } from "~/lib/types" import { Comment } from "~/components/common/Comment" import { Reactions } from "~/components/common/Reactions" export const PostFooter: React.FC<{ page?: Note | null -}> = ({ page }) => { + site?: Profile | null +}> = ({ page, site }) => { return ( <> - + ) diff --git a/src/components/site/SitePage.tsx b/src/components/site/SitePage.tsx index 3689da01..02d8ba45 100644 --- a/src/components/site/SitePage.tsx +++ b/src/components/site/SitePage.tsx @@ -85,7 +85,7 @@ export const SitePage: React.FC<{ toc={true} > - {page?.metadata && } + {page?.metadata && } ) } diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index b0606b1b..dfc9f2ff 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -15,6 +15,7 @@ export type Variant = | "collect" | "crossbell" | "outline" + | "patron" export type VariantColor = "green" | "red" | "gray" | "gradient" | "black" diff --git a/src/css/tailwind.css b/src/css/tailwind.css index a81ec3b4..040b9ec6 100644 --- a/src/css/tailwind.css +++ b/src/css/tailwind.css @@ -153,6 +153,19 @@ a { fill: #ffcf55; } +.button.is-patron { + @apply shadow-none p-0; + @apply text-gray-500 fill-gray-500; +} +.button.is-patron:hover { + color: #f87171; + fill: #f87171; +} +.button.is-patron.active { + color: #f87171; + fill: #f87171; +} + .button.is-crossbell { background-color: #fff5e1; fill: #e5b65a; diff --git a/src/queries/page.ts b/src/queries/page.ts index a7f98eb7..26634338 100644 --- a/src/queries/page.ts +++ b/src/queries/page.ts @@ -89,9 +89,9 @@ export const useGetMints = (input: { pageId?: string includeCharacter?: boolean }) => { - return useQuery( - ["getMints", input.pageId, input.includeCharacter], - async () => { + return useInfiniteQuery({ + queryKey: ["getMints", input.pageId, input], + queryFn: async ({ pageParam }) => { if (!input.pageId) { return { count: 0, @@ -102,9 +102,11 @@ export const useGetMints = (input: { return pageModel.getMints({ pageId: input.pageId, includeCharacter: input.includeCharacter, + cursor: pageParam, }) }, - ) + getNextPageParam: (lastPage) => lastPage.cursor || undefined, + }) } export const useCheckMint = (pageId: string | undefined) => {