Skip to content

Commit

Permalink
🚸 Add listing unhandled count badge in side menu (#275)
Browse files Browse the repository at this point in the history 
* 🚸 Add listing unhandled count badge in side menu

* 🐛 Only check listing if session exists

* 🚑️ Fix duplicated listing entry
  • Loading branch information
@williamchong
williamchong authored Feb 5, 2025
1 parent e0ef48d commit 2304589
Show file tree
Hide file tree
Showing 8 changed files with 120 additions and 63 deletions.
13 changes: 11 additions & 2 deletions app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,16 @@
import { storeToRefs } from 'pinia'
import { useBookStoreApiStore } from '~/stores/book-store-api'
import { useCollectionStore } from '~/stores/collection'
import { useUIStore } from '~/stores/ui'
const { SITE_URL } = useRuntimeConfig().public
const bookStoreApiStore = useBookStoreApiStore()
const collectionStore = useCollectionStore()
const { restoreAuthSession } = bookStoreApiStore
const { isRestoringSession } = storeToRefs(bookStoreApiStore)
const { restoreAuthSession, fetchBookListing } = bookStoreApiStore
const { listNFTBookCollections } = collectionStore
const { isRestoringSession, isAuthenticated } = storeToRefs(bookStoreApiStore)
const uiStore = useUIStore()
const isMobileMenuOpen = computed({
Expand Down Expand Up @@ -93,6 +96,12 @@ useSeoMeta({
onMounted(async () => {
await restoreAuthSession()
if (isAuthenticated.value) {
await Promise.all([
fetchBookListing(),
listNFTBookCollections()
])
}
})
</script>
18 changes: 14 additions & 4 deletions components/SiteMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,15 @@
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useBookStoreApiStore } from '~/stores/book-store-api'
import { useCollectionStore } from '~/stores/collection'
const { ISCN_TOOLS_URL } = useRuntimeConfig().public
const bookStoreApiStore = useBookStoreApiStore()
const collectionStore = useCollectionStore()
const { getTotalPendingNFTCount } = storeToRefs(bookStoreApiStore)
const { getTotalPendingNFTCount: getCollectionTotalPendingNFTCount } = storeToRefs(collectionStore)
const props = defineProps({
isLarge: {
Expand All @@ -53,7 +61,7 @@ function handleLinkClick ({ label }: { label?: string }) {
emit('click-link')
}
const items = [
const items = computed(() => [
{
label: 'Publish NFT Book',
links: [
Expand All @@ -77,13 +85,15 @@ const items = [
label: 'Manage Book Listings',
icon: 'i-heroicons-rectangle-stack',
to: { name: 'nft-book-store' },
exact: true
exact: true,
badge: getTotalPendingNFTCount.value
},
{
label: 'Manage Collections',
icon: 'i-heroicons-rectangle-stack',
to: { name: 'nft-book-store-collection' },
exact: true
exact: true,
badge: getCollectionTotalPendingNFTCount.value
}
]
},
Expand Down Expand Up @@ -170,5 +180,5 @@ const items = [
...link,
click: () => handleLinkClick({ label: link.label })
}))
}))
})))
</script>
9 changes: 8 additions & 1 deletion composables/useAuth.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@ import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useWalletStore } from '~/stores/wallet'
import { useBookStoreApiStore } from '~/stores/book-store-api'
import { useCollectionStore } from '~/stores/collection'

export function useAuth () {
const bookStoreApiStore = useBookStoreApiStore()
const collectionStore = useCollectionStore()
const store = useWalletStore()
const { wallet, signer } = storeToRefs(store)
const { disconnect, signMessageMemo, openConnectWalletModal, initWallet } = store
const { authenticate, clearSession } = bookStoreApiStore
const { authenticate, clearSession, fetchBookListing } = bookStoreApiStore
const { listNFTBookCollections } = collectionStore
const toast = useToast()

const isAuthenticating = ref(false)
Expand Down Expand Up @@ -36,6 +39,10 @@ export function useAuth () {
}

await authenticate(wallet.value, signature)
await Promise.all([
fetchBookListing(),
listNFTBookCollections()
])
} catch (err) {
disconnect()
clearSession()
Expand Down
5 changes: 3 additions & 2 deletions pages/nft-book-store/collection/status/[collectionId].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -445,7 +445,7 @@ const collectionStore = useCollectionStore()
const stripeStore = useStripeStore()
const { token } = storeToRefs(bookStoreApiStore)
const { wallet } = storeToRefs(store)
const { updateNFTBookCollectionById } = collectionStore
const { updateNFTBookCollectionById, reduceListingPendingNFTCountById } = collectionStore
const { getClassMetadataById, lazyFetchClassMetadataById } = nftStore
const { fetchStripeConnectStatusByWallet } = stripeStore
Expand Down Expand Up @@ -868,7 +868,8 @@ async function hardSetStatusToCompleted (purchase: any) {
}
if (previousStatus === 'pendingNFT') {
collectionListingInfo.value.pendingNFTCount -= 1
collectionListingInfo.value.pendingNFTCount -= 11
reduceListingPendingNFTCountById(collectionId.value, 1)
}
}
Expand Down
56 changes: 3 additions & 53 deletions pages/nft-book-store/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,23 +158,18 @@
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useBookStoreApiStore } from '~/stores/book-store-api'
import { useWalletStore } from '~/stores/wallet'
import { useNftStore } from '~/stores/nft'
const { LIKE_CO_API } = useRuntimeConfig().public
const route = useRoute()
const router = useRouter()
const walletStore = useWalletStore()
const bookStoreApiStore = useBookStoreApiStore()
const nftStore = useNftStore()
const { wallet } = storeToRefs(walletStore)
const { token } = storeToRefs(bookStoreApiStore)
const { listingList: bookList, moderatedBookList, token } = storeToRefs(bookStoreApiStore)
const { lazyFetchClassMetadataById } = nftStore
const { fetchBookListing, fetchModeratedBookList } = bookStoreApiStore
const error = ref('')
const isLoading = ref(false)
const bookList = ref<any[]>([])
const moderatedBookList = ref<any[]>([])
// Tabs
const tabItems = [
Expand Down Expand Up @@ -294,53 +289,8 @@ watch(tableRowsPerPage, () => {
tablePage.value = 1
})
async function fetchBookList (params: { key?: number, limit?: number } = {}) {
const qsPayload: any = {
wallet: wallet.value,
limit: params.limit || 100
}
if (params.key) {
qsPayload.key = params.key
}
const { data, error: fetchError } = await useFetch(`${LIKE_CO_API}/likernft/book/store/list?${Object.entries(qsPayload).map(([key, value]) => `${key}=${value}`).join('&')}`,
{
headers: {
authorization: token.value ? `Bearer ${token.value}` : ''
}
})
if (fetchError.value) {
error.value = fetchError.value.toString()
}
const { nextKey, list = [] } = (data.value as any) || {}
if (params) {
bookList.value.push(...list)
} else {
bookList.value = list
}
if (nextKey) {
return fetchBookList({ key: nextKey })
}
}
async function fetchModeratedBookList () {
const { data, error: fetchError } = await useFetch(`${LIKE_CO_API}/likernft/book/store/list/moderated?wallet=${wallet.value}`,
{
headers: {
authorization: `Bearer ${token.value}`
}
}
)
if (fetchError.value) {
error.value = fetchError.value.toString()
}
moderatedBookList.value = (data.value as any)?.list || []
}
onMounted(async () => {
const promises = [fetchBookList()]
const promises = [fetchBookListing()]
if (token.value) {
promises.push(fetchModeratedBookList())
}
Expand Down
3 changes: 2 additions & 1 deletion pages/nft-book-store/status/[classId].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -688,7 +688,7 @@ const nftStore = useNftStore()
const stripeStore = useStripeStore()
const { token } = storeToRefs(bookStoreApiStore)
const { wallet } = storeToRefs(store)
const { updateBookListingSetting } = bookStoreApiStore
const { updateBookListingSetting, reduceListingPendingNFTCountById } = bookStoreApiStore
const { lazyFetchClassMetadataById } = nftStore
const { fetchStripeConnectStatusByWallet } = stripeStore
Expand Down Expand Up @@ -1209,6 +1209,7 @@ async function hardSetStatusToCompleted (purchase: any) {
if (previousStatus === 'pendingNFT') {
classListingInfo.value.pendingNFTCount -= 1
reduceListingPendingNFTCountById(classId.value, 1)
}
}
Expand Down
64 changes: 64 additions & 0 deletions stores/book-store-api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ export const useBookStoreApiStore = defineStore('book-api', () => {
const sessionWallet = ref('')
const isRestoringSession = ref(false)

const listingList = ref([] as any[])
const moderatedBookList = ref([] as any[])
const getTotalPendingNFTCount = computed(() => listingList.value.reduce((acc, item) => acc + (item.pendingNFTCount || 0), 0))

const isAuthenticated = computed(() => {
const isWalletMatch = storeWallet.value === sessionWallet.value
const tokenExists = !!token.value
Expand Down Expand Up @@ -59,6 +63,60 @@ export const useBookStoreApiStore = defineStore('book-api', () => {
saveAuthSession({ wallet: inputWallet, token: token.value })
}

async function fetchBookListing (params: { key?: number, limit?: number } = {}) {
const qsPayload: any = {
wallet: sessionWallet.value,
limit: params.limit || 100
}
if (params.key) {
qsPayload.key = params.key
}
const { data, error: fetchError } = await useFetch(`${LIKE_CO_API}/likernft/book/store/list?${Object.entries(qsPayload).map(([key, value]) => `${key}=${value}`).join('&')}`,
{
headers: {
authorization: token.value ? `Bearer ${token.value}` : ''
}
})

if (fetchError.value) {
throw fetchError.value
}

const { nextKey, list = [] } = (data.value as any) || {}
if (params.key) {
listingList.value.push(...list)
} else {
listingList.value = list
}

if (nextKey) {
return fetchBookListing({ key: nextKey })
}
}

async function fetchModeratedBookList () {
const { data, error: fetchError } = await useFetch(`${LIKE_CO_API}/likernft/book/store/list/moderated?wallet=${sessionWallet.value}`,
{
headers: {
authorization: `Bearer ${token.value}`
}
}
)
if (fetchError.value) {
throw fetchError.value
}
moderatedBookList.value = (data.value as any)?.list || []
}

function reduceListingPendingNFTCountById (classId: string, count: number) {
const targetIndex = listingList.value.findIndex(item => item.classId === classId)
if (targetIndex === -1) {
return
}
const targetItem = listingList.value[targetIndex]
targetItem.pendingNFTCount -= count
}

async function newBookListing (classId: string, payload: any) {
const { error, data } = await useFetch(`${LIKE_CO_API}/likernft/book/store/${classId}/new`, {
method: 'POST',
Expand Down Expand Up @@ -118,11 +176,17 @@ export const useBookStoreApiStore = defineStore('book-api', () => {
return {
token,
wallet: sessionWallet,
listingList,
moderatedBookList,
getTotalPendingNFTCount,
isAuthenticated,
isRestoringSession,
clearSession,
restoreAuthSession,
authenticate,
fetchBookListing,
fetchModeratedBookList,
reduceListingPendingNFTCountById,
newBookListing,
updateBookListingSetting,
updateEditionPrice,
Expand Down
15 changes: 15 additions & 0 deletions stores/collection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ export const useCollectionStore = defineStore('collection', () => {
const bookStoreApiStore = useBookStoreApiStore()
const { token, wallet: sessionWallet } = storeToRefs(bookStoreApiStore)

const collectionList = ref([] as any[])
const collectionByIdMap = ref({} as Record<string, any>)

const getCollectionById = computed(() => (collectionId: string) => collectionByIdMap.value[collectionId])
const getTotalPendingNFTCount = computed(() => collectionList.value.reduce((acc, item) => acc + (item.typePayload?.pendingNFTCount || 0), 0))

async function fetchCollectionById (collectionId: string) {
const data = await getNFTBookCollectionById(collectionId)
Expand Down Expand Up @@ -36,6 +38,7 @@ export const useCollectionStore = defineStore('collection', () => {
if (error.value) {
throw error.value
}
collectionList.value = (data?.value as any)?.list
return data
}

Expand Down Expand Up @@ -71,6 +74,15 @@ export const useCollectionStore = defineStore('collection', () => {
return data
}

function reduceListingPendingNFTCountById (collectionId: string, count: number) {
const targetIndex = collectionList.value.findIndex(item => item.id === collectionId)
if (targetIndex === -1) {
return
}
const targetItem = collectionList.value[targetIndex]
targetItem.pendingNFTCount -= count
}

async function newNFTBookCollection (payload: any) {
const { error, data } = await useFetch(`${LIKE_CO_API}/likernft/collection`, {
method: 'POST',
Expand Down Expand Up @@ -113,12 +125,15 @@ export const useCollectionStore = defineStore('collection', () => {
}

return {
collectionList,
collectionByIdMap,
getCollectionById,
fetchCollectionById,
lazyFetchCollectionById,
listNFTBookCollections,
listModeratedNFTBookCollections,
getTotalPendingNFTCount,
reduceListingPendingNFTCountById,
getNFTBookCollectionById,
newNFTBookCollection,
updateNFTBookCollectionById,
Expand Down

0 comments on commit 2304589

Please sign in to comment.