-
Notifications
You must be signed in to change notification settings - Fork 0
/
AuctionList.tsx
143 lines (126 loc) · 4.45 KB
/
AuctionList.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
import { useQueryClient } from '@tanstack/react-query';
import { useActiveAuctions } from '../../hooks/api/auctions';
import AuctionCard from '../AuctionCard/AuctionCard';
import { useWallet } from '@meshsdk/react';
import { AuctionInfo, WalletApp } from 'hydra-auction-offchain';
import { useEffect, useState } from 'react';
import {
METADATA_QUERY_KEY,
getAndStoreAssetMetadata,
} from 'src/hooks/api/assets';
import { getLocalStorageItem } from 'src/utils/localStorage';
import { getAuctionAssetUnit } from 'src/utils/auction';
import { useWalletAddress } from 'src/hooks/api/user';
import {
AuctionListSortState,
auctionListFilterOptions,
} from 'src/utils/auctionState';
import { DropDown } from '../DropDown/DropDown';
export default function AuctionList() {
const { name: walletName, wallet, connected } = useWallet();
const { data: walletAddress } = useWalletAddress(wallet, connected);
const walletApp: WalletApp = walletName as WalletApp;
const { data: auctions } = useActiveAuctions(walletApp);
const queryClient = useQueryClient();
const localMetadata = getLocalStorageItem('metadata');
console.log({ walletApp });
console.log({ auctions });
console.log({ localMetadata });
const [auctionsWithImage, setAuctionsWithImage] = useState<
AuctionInfo[] | null
>([]);
const [filteredAuctions, setFilteredAuctions] = useState<
AuctionInfo[] | undefined
>([]);
const [activeFilter, setActiveFilter] = useState<AuctionListSortState>(
AuctionListSortState.ALL
);
const fetchAndFilterAuctionsByImage = async (auctions: AuctionInfo[]) => {
const filteredAuctions = await Promise.all(
auctions.map(async (auction) => {
const assetUnit = getAuctionAssetUnit(auction);
await queryClient.prefetchQuery({
queryKey: [METADATA_QUERY_KEY, assetUnit],
queryFn: async () => await getAndStoreAssetMetadata(assetUnit),
});
const nftHasImage: any = queryClient.getQueryData([
METADATA_QUERY_KEY,
assetUnit,
]);
return nftHasImage?.image !== undefined ? auction : null;
})
);
// Auto sorted to most recently started auctions
return filteredAuctions
.filter(Boolean)
?.sort(
(a: AuctionInfo | null, b: AuctionInfo | null) =>
Number(b?.auctionTerms.biddingStart) -
Number(a?.auctionTerms.biddingStart)
);
};
useEffect(() => {
async function getAuctionsWithImage(auctions: AuctionInfo[]) {
const filteredAuctionsByImage = await fetchAndFilterAuctionsByImage(
auctions
);
setAuctionsWithImage(filteredAuctionsByImage as AuctionInfo[]);
}
if (auctions) {
getAuctionsWithImage(auctions);
}
}, [auctions]);
useEffect(() => {
if (auctionsWithImage) {
switch (activeFilter) {
case AuctionListSortState.ALL:
setFilteredAuctions(auctionsWithImage);
break;
case AuctionListSortState.SELLER:
setFilteredAuctions(
auctionsWithImage?.filter(
(auction) => auction.auctionTerms.sellerAddress === walletAddress
)
);
break;
case AuctionListSortState.NOT_SELLER:
setFilteredAuctions(
auctionsWithImage?.filter(
(auction) => auction.auctionTerms.sellerAddress !== walletAddress
)
);
break;
default:
setFilteredAuctions(auctionsWithImage);
}
}
}, [activeFilter, auctions, auctionsWithImage]);
return (
<>
<div className="flex flex-col justify-center items-center">
<h1 className="text-title1 text-center mb-3">Query Auctions</h1>
<hr className="border-b border-gray-400 w-32 mb-4" />
</div>
<div>
<div className="flex items-center gap-2 justify-between p-2 font-semibold">
<div>{filteredAuctions?.length || 0} Auctions</div>
<DropDown
onChange={(index) => {
setActiveFilter(auctionListFilterOptions[index].accessor);
}}
options={auctionListFilterOptions}
title="Filter Auctions"
/>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4">
{filteredAuctions?.map((auctionInfo, index) => (
<AuctionCard
key={`${auctionInfo.auctionId}_${index}`}
auctionInfo={auctionInfo}
/>
))}
</div>
</div>
</>
);
}