From 9eab1beadc8e35fe81b52ddd05bc8df328c33ac7 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Sun, 7 Aug 2022 14:11:23 +0100
Subject: [PATCH] feat: mint post

---
 src/components/icons/CollectIcon.tsx |  5 +-
 src/components/site/PostFooter.tsx   | 74 ++++++++++++++++++++++++++--
 src/models/page.model.ts             | 33 +++++++++++++
 src/queries/page.ts                  | 48 ++++++++++++++++++
 4 files changed, 154 insertions(+), 6 deletions(-)

diff --git a/src/components/icons/CollectIcon.tsx b/src/components/icons/CollectIcon.tsx
index 7d9aa639..95b23125 100644
--- a/src/components/icons/CollectIcon.tsx
+++ b/src/components/icons/CollectIcon.tsx
@@ -12,7 +12,10 @@ export const CollectIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M877.632 456.8c14.976-14.72 20.384-32.96 14.816-49.984-5.536-17.024-20.608-28.544-41.344-31.584l-190.24-27.84c-6.976-1.024-18.464-9.472-21.6-15.904l-85.12-173.696c-9.28-18.944-24.896-29.76-42.88-29.76-17.952 0-33.6 10.816-42.816 29.76l-85.12 173.696c-3.104 6.432-14.592 14.848-21.6 15.904l-190.24 27.84c-20.704 3.04-35.776 14.56-41.344 31.584-5.568 17.024-0.16 35.232 14.816 49.984l137.696 135.232c5.088 4.992 9.536 18.816 8.32 25.92l-32.48 190.912c-3.552 20.832 2.752 38.816 17.344 49.344 7.52 5.44 16.224 8.16 25.472 8.16 8.576 0 17.6-2.336 26.56-7.04l170.176-90.176c6.048-3.2 20.448-3.2 26.528 0l170.144 90.112c18.528 9.856 37.504 9.44 52.064-1.056 14.56-10.528 20.864-28.48 17.344-49.28l-32.48-190.976c-1.28-7.104 3.2-20.928 8.32-25.92l137.664-135.232z"></path>
+      <path
+        d="M388.821333 375.466667c14.506667-12.672 31.744-22.442667 50.773334-28.202667l10.538666-2.773333 6.826667-1.28 7.509333-1.066667 7.68-0.64 7.850667-0.213333h320a138.666667 138.666667 0 0 1 138.453333 130.773333l0.213334 7.893333v320a138.666667 138.666667 0 0 1-130.816 138.453334l-7.850667 0.213333h-320a138.666667 138.666667 0 0 1-138.453333-130.816L341.333333 800v-320l0.128-6.357333 0.597334-8.106667 1.109333-8.149333 1.536-7.936 2.517333-9.514667 3.413334-10.069333 3.712-8.618667 3.498666-6.912 4.010667-6.954667 6.229333-9.258666 4.010667-5.248 5.76-6.656 4.608-4.778667 6.357333-5.930667zM640 469.333333a32 32 0 0 0-31.701333 27.648l-0.298667 4.352v106.624h-106.666667a32 32 0 0 0-31.701333 27.648l-0.298667 4.352c0 16.213333 12.032 29.568 27.648 31.701334l4.352 0.298666h106.666667v106.709334c0 16.213333 12.032 29.610667 27.648 31.701333L640 810.666667a32 32 0 0 0 31.701333-27.648l0.298667-4.352v-106.709334h106.666667a32 32 0 0 0 31.701333-27.690666L810.666667 640a32 32 0 0 0-27.648-31.701333l-4.352-0.298667h-106.666667V501.333333a32 32 0 0 0-27.648-31.701333L640 469.333333z m24.832-288.725333l2.218667 7.552 29.610666 110.421333H480A181.333333 181.333333 0 0 0 298.666667 479.957333v274.517334a138.752 138.752 0 0 1-123.52-95.061334l-2.218667-7.509333-82.816-309.12a138.666667 138.666667 0 0 1 90.453333-167.594667l7.594667-2.218666 309.077333-82.816a138.666667 138.666667 0 0 1 167.594667 90.453333z"
+        p-id="863"
+      ></path>
     </svg>
   )
 }
diff --git a/src/components/site/PostFooter.tsx b/src/components/site/PostFooter.tsx
index fa7d4128..12ec8d95 100644
--- a/src/components/site/PostFooter.tsx
+++ b/src/components/site/PostFooter.tsx
@@ -4,8 +4,11 @@ import { CollectIcon } from "~/components/icons/CollectIcon"
 import {
   useLikePage,
   useUnlikePage,
+  useMintPage,
   useGetLikes,
   useCheckLike,
+  useGetMints,
+  useCheckMint,
 } from "~/queries/page"
 import { useAccount } from "wagmi"
 import { useConnectModal } from "@rainbow-me/rainbowkit"
@@ -17,9 +20,12 @@ export const PostFooter: React.FC<{
 }> = ({ page }) => {
   const likePage = useLikePage()
   const unlikePage = useUnlikePage()
+  const mintPage = useMintPage()
+
   const { address } = useAccount()
   const { openConnectModal } = useConnectModal()
   const [likeProgress, setLikeProgress] = useState(false)
+  const [mintProgress, setMintProgress] = useState(false)
 
   const like = async () => {
     if (!address) {
@@ -27,12 +33,29 @@ export const PostFooter: React.FC<{
       openConnectModal?.()
     } else if (page?.id) {
       if (isLike.data?.count) {
-        unlikePage.mutate({
+        // unlikePage.mutate({
+        //   address,
+        //   pageId: page?.id,
+        // })
+        // TODO
+      } else {
+        likePage.mutate({
           address,
           pageId: page?.id,
         })
+      }
+    }
+  }
+
+  const mint = async () => {
+    if (!address) {
+      setMintProgress(true)
+      openConnectModal?.()
+    } else if (page?.id) {
+      if (isMint.data?.count) {
+        // TODO
       } else {
-        likePage.mutate({
+        mintPage.mutate({
           address,
           pageId: page?.id,
         })
@@ -48,6 +71,33 @@ export const PostFooter: React.FC<{
     pageId: page?.id,
   })
 
+  const mints = useGetMints({
+    pageId: page?.id,
+  })
+  const isMint = useCheckMint({
+    address,
+    pageId: page?.id,
+  })
+
+  useEffect(() => {
+    if (mintProgress && address && isMint.isSuccess && page?.id) {
+      if (!isMint.data.count) {
+        mintPage.mutate({
+          address,
+          pageId: page?.id,
+        })
+      }
+      setMintProgress(false)
+    }
+  }, [
+    mintProgress,
+    address,
+    isMint.isSuccess,
+    isMint.data?.count,
+    mintPage,
+    page?.id,
+  ])
+
   useEffect(() => {
     if (likeProgress && address && isLike.isSuccess && page?.id) {
       if (!isLike.data.count) {
@@ -68,7 +118,7 @@ export const PostFooter: React.FC<{
   ])
 
   return (
-    <div className="flex fill-gray-400 text-gray-500 mt-10">
+    <div className="flex fill-gray-400 text-gray-500 mt-14">
       <Button
         variant="text"
         className="flex items-center mr-10"
@@ -87,9 +137,23 @@ export const PostFooter: React.FC<{
         <LikeIcon className="mr-2 w-10 h-10" />
         <span>{likes.data?.count || 0}</span>
       </Button>
-      <Button variant="text" className="flex items-center" isAutoWidth={true}>
+      <Button
+        variant="text"
+        className="flex items-center mr-10"
+        isAutoWidth={true}
+        onClick={mint}
+        isLoading={mintPage.isLoading || likeProgress}
+        style={
+          isMint.isSuccess && isMint.data.count
+            ? {
+                color: "#FFCF55",
+                fill: "#FFCF55",
+              }
+            : {}
+        }
+      >
         <CollectIcon className="mr-2 w-10 h-10" />
-        <span>0</span>
+        <span>{mints.data?.count || 0}</span>
       </Button>
     </div>
   )
diff --git a/src/models/page.model.ts b/src/models/page.model.ts
index c33ce758..a3944209 100644
--- a/src/models/page.model.ts
+++ b/src/models/page.model.ts
@@ -363,3 +363,36 @@ export async function checkLike({
     })
   }
 }
+
+export async function mintPage({
+  address,
+  pageId,
+}: {
+  address: string
+  pageId: string
+}) {
+  return contract?.mintNote(pageId.split("-")[0], pageId.split("-")[1], address)
+}
+
+export async function getMints({ pageId }: { pageId: string }) {
+  return indexer.getMintedNotesOfNote(
+    pageId.split("-")[0],
+    pageId.split("-")[1],
+    {
+      limit: 0,
+    },
+  )
+}
+
+export async function checkMint({
+  address,
+  pageId,
+}: {
+  address: string
+  pageId: string
+}) {
+  return indexer.getMintedNotesOfAddress(address, {
+    noteCharacterId: pageId.split("-")[0],
+    noteId: pageId.split("-")[1],
+  })
+}
diff --git a/src/queries/page.ts b/src/queries/page.ts
index abf6e62f..723f46ff 100644
--- a/src/queries/page.ts
+++ b/src/queries/page.ts
@@ -45,6 +45,35 @@ export const useCheckLike = (input: { address?: string; pageId?: string }) => {
   })
 }
 
+export const useGetMints = (input: { pageId?: string }) => {
+  return useQuery(["getMints", input.pageId], async () => {
+    if (!input.pageId) {
+      return {
+        count: 0,
+        list: [],
+      }
+    }
+    return pageModel.getMints({
+      pageId: input.pageId,
+    })
+  })
+}
+
+export const useCheckMint = (input: { address?: string; pageId?: string }) => {
+  return useQuery(["checkMint", input.pageId, input.address], async () => {
+    if (!input.pageId || !input.address) {
+      return {
+        count: 0,
+        list: [],
+      }
+    }
+    return pageModel.checkMint({
+      address: input.address,
+      pageId: input.pageId,
+    })
+  })
+}
+
 export function useCreateOrUpdatePage() {
   const queryClient = useQueryClient()
   const mutation = useMutation(
@@ -113,3 +142,22 @@ export function useUnlikePage() {
     },
   )
 }
+
+export function useMintPage() {
+  const queryClient = useQueryClient()
+  return useMutation(
+    async (input: Parameters<typeof pageModel.mintPage>[0]) => {
+      return pageModel.mintPage(input)
+    },
+    {
+      onSuccess: (data, variables) => {
+        queryClient.invalidateQueries([
+          "checkMint",
+          variables.pageId,
+          variables.address,
+        ])
+        queryClient.invalidateQueries(["getMints", variables.pageId])
+      },
+    },
+  )
+}