Merge pull request #1284 from Coflnet/move-archived-auctions-button

Move archived auctions button
Coflnet · Jul 9, 2024 · 6a6df13 · 6a6df13
2 parents e93e018 + 6503c77
commit 6a6df13
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 40 deletions.
diff --git a/components/ActiveAuctions/ActiveAuctions.tsx b/components/ActiveAuctions/ActiveAuctions.tsx
@@ -235,6 +235,7 @@ function ActiveAuctions(props: Props) {
                 )}
             </div>
             {getMoreAuctionsElement(
+                'active-auctions-load-more',
                 isLoggedIn,
                 wasAlreadyLoggedIn,
                 premiumType,

diff --git a/components/ArchivedAuctions.tsx/ArchivedAuctions.tsx b/components/ArchivedAuctions.tsx/ArchivedAuctions.tsx
@@ -31,6 +31,7 @@ const ArchivedAuctionsList = (props: Props) => {
     let [isLoading, setIsLoading] = useState(false)
     let [currentPage, setCurrentPage] = useState(0)
     let [allElementsLoaded, setAllElementsLoaded] = useState(false)
+    let [noResults, setNoResults] = useState(false)
 
     let currentPageRef = useRef(currentPage)
     currentPageRef.current = currentPage
@@ -75,6 +76,11 @@ const ArchivedAuctionsList = (props: Props) => {
             setArchivedAuctions([])
             setCurrentPage(0)
             setAllElementsLoaded(false)
+            setNoResults(false)
+
+            archivedAuctionsRef.current = []
+            currentPageRef.current = 0
+            allElementsLoadedRef.current = false
         }
 
         setIsLoading(true)
@@ -101,6 +107,10 @@ const ArchivedAuctionsList = (props: Props) => {
             currentPageRef.current = newPage
             setCurrentPage(newPage)
 
+            if (newAuctions.length === 0) {
+                setNoResults(true)
+            }
+
             if (newAuctions.length < 12) {
                 setAllElementsLoaded(true)
                 setIsLoading(false)
@@ -201,7 +211,7 @@ const ArchivedAuctionsList = (props: Props) => {
                 Search
             </Button>
             <hr />
-            {isLoading && !archivedAuctions ? getLoadingElement(<p>Loading archived auctions...</p>) : null}
+            {isLoading && archivedAuctions.length === 0 ? getLoadingElement(<p>Loading archived auctions...</p>) : null}
             {archivedAuctions.length > 0 ? (
                 <>
                     <InfiniteScroll
@@ -225,6 +235,7 @@ const ArchivedAuctionsList = (props: Props) => {
                     </div>
                 </>
             ) : null}
+            {noResults ? <p style={{ textAlign: 'center' }}>No auctions found</p> : null}
             <GoogleSignIn key="googleSignin" onAfterLogin={onAfterLogin} />
         </>
     )

diff --git a/components/PriceGraph/AuctionHousePriceGraph/AuctionHousePriceGraph.tsx b/components/PriceGraph/AuctionHousePriceGraph/AuctionHousePriceGraph.tsx
@@ -17,11 +17,6 @@ import styles from './AuctionHousePriceGraph.module.css'
 import graphConfig from './PriceGraphConfig'
 import { applyMayorDataToChart } from '../../../utils/GraphUtils'
 import EChartsReact from 'echarts-for-react'
-import { toast } from 'react-toastify'
-import { Button } from 'react-bootstrap'
-import { PREMIUM_RANK, getHighestPriorityPremiumProduct, getPremiumType, hasHighEnoughPremium } from '../../../utils/PremiumTypeUtils'
-import GoogleSignIn from '../../GoogleSignIn/GoogleSignIn'
-import Link from 'next/link'
 
 interface Props {
     item: Item
@@ -43,7 +38,6 @@ function AuctionHousePriceGraph(props: Props) {
     let [chartOptions, setChartOptions] = useState(graphConfig)
     let [mayorData, setMayorData] = useState<MayorData[]>([])
     let graphRef = useRef<EChartsReact>(null)
-    let [premiumProducts, setPremiumProducts] = useState<PremiumProduct[]>([])
 
     let fetchspanRef = useRef(fetchspan)
     fetchspanRef.current = fetchspan
@@ -138,12 +132,6 @@ function AuctionHousePriceGraph(props: Props) {
             })
     }
 
-    function onAfterLogin() {
-        api.getPremiumProducts().then(products => {
-            setPremiumProducts(products)
-        })
-    }
-
     let onRangeChange = (timespan: DateRange) => {
         setFetchspan(timespan)
         if (timespan !== DateRange.ACTIVE) {
@@ -228,13 +216,6 @@ function AuctionHousePriceGraph(props: Props) {
                 </div>
                 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                     <SubscribeButton type="item" topic={props.item.tag} />
-                    {hasHighEnoughPremium(premiumProducts, PREMIUM_RANK.PREMIUM_PLUS) ? (
-                        <div>
-                            <Link href={`/item/${props.item.tag}/archive`}>
-                                <Button>Archived Auctions</Button>
-                            </Link>
-                        </div>
-                    ) : null}
                     <ShareButton
                         title={'Prices for ' + props.item.name}
                         text="See list, search and filter item prices from the auction house and bazar in Hypixel Skyblock"
@@ -250,9 +231,6 @@ function AuctionHousePriceGraph(props: Props) {
                     <RecentAuctions item={props.item} itemFilter={itemFilter || {}} />
                 </div>
             )}
-            <div style={{ visibility: 'collapse', height: 0 }}>
-                <GoogleSignIn onAfterLogin={onAfterLogin} />
-            </div>
         </div>
     )
 }

diff --git a/components/RecentAuctions/RecentAuctions.tsx b/components/RecentAuctions/RecentAuctions.tsx
@@ -13,6 +13,7 @@ import { getHighestPriorityPremiumProduct, getPremiumType, PREMIUM_RANK } from '
 import { RECENT_AUCTIONS_FETCH_TYPE_KEY } from '../../utils/SettingsUtils'
 import Number from '../Number/Number'
 import styles from './RecentAuctions.module.css'
+import { useSearchParams } from 'next/navigation'
 
 interface Props {
     item: Item
@@ -36,7 +37,9 @@ function RecentAuctions(props: Props) {
     let [allElementsLoaded, setAllElementsLoaded] = useState(false)
     let [premiumType, setPremiumType] = useState<PremiumType>()
     let [isLoggedIn, setIsLoggedIn] = useState(false)
+    let [noResults, setNoResults] = useState(false)
     let wasAlreadyLoggedIn = useWasAlreadyLoggedIn()
+    let searchParams = useSearchParams()
 
     let itemFilterRef = useRef<ItemFilter>(props.itemFilter)
     itemFilterRef.current = props.itemFilter
@@ -58,6 +61,7 @@ function RecentAuctions(props: Props) {
         let recentAuctions = reset ? [] : recentAuctionsRef.current
         if (reset) {
             setRecentAuctions([])
+            setNoResults(false)
         }
 
         let itemFilter = { ...itemFilterRef.current }
@@ -104,6 +108,9 @@ function RecentAuctions(props: Props) {
             if (!mounted || currentLoadingString !== JSON.stringify({ tag: props.item.tag, filter: itemFilterRef.current })) {
                 return
             }
+            if (newRecentAuctions.length === 0) {
+                setNoResults(true)
+            }
             if (newRecentAuctions.length < FETCH_RESULT_SIZE) {
                 setAllElementsLoaded(true)
             }
@@ -224,19 +231,36 @@ function RecentAuctions(props: Props) {
                     >
                         {recentAuctionList}
                     </InfiniteScroll>
-                ) : (
-                    <p style={{ textAlign: 'center' }}>No recent auctions found</p>
-                )}
+                ) : null}
+                {noResults ? (
+                    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+                        <p style={{ textAlign: 'center' }}>No recent auctions found.</p>
+                        {premiumType?.priority >= PREMIUM_RANK.PREMIUM_PLUS ? (
+                            <Link
+                                style={{ textAlign: 'center', marginBottom: '15px' }}
+                                href={`/item/${props.item.tag}/archive?${searchParams.has('itemFilter') ? `?${searchParams.get('itemFilter')}` : ''}`}
+                            >
+                                <Button>Archived Auctions</Button>
+                            </Link>
+                        ) : (
+                            <div style={{ textAlign: 'center', marginBottom: '15px' }}>
+                                You can search through all our archived auctions with <Link href={'/premium'}>Premium+</Link>
+                            </div>
+                        )}
+                    </div>
+                ) : null}
             </div>
-            {getMoreAuctionsElement(
-                isLoggedIn,
-                wasAlreadyLoggedIn,
-                premiumType,
-                onAfterLogin,
-                <span>
-                    You currently use Starter Premium. You can see up to 120 recent auctions with <Link href={'/premium'}>Premium</Link>
-                </span>
-            )}
+            {!noResults &&
+                getMoreAuctionsElement(
+                    'recent-auctions-load-more',
+                    isLoggedIn,
+                    wasAlreadyLoggedIn,
+                    premiumType,
+                    onAfterLogin,
+                    <span style={{ textAlign: 'center', marginBottom: '15px' }}>
+                        You currently use Starter Premium. You can see up to 120 recent auctions with <Link href={'/premium'}>Premium</Link>
+                    </span>
+                )}
         </div>
     )
 }

diff --git a/utils/ListUtils.tsx b/utils/ListUtils.tsx
@@ -7,19 +7,21 @@ import { PREMIUM_RANK } from './PremiumTypeUtils'
  * Displayed if more auctions could be loaded with premium
  */
 export function getMoreAuctionsElement(
+    key: string,
     isLoggedIn: boolean,
     wasAlreadyLoggedIn: boolean,
     premiumType: PremiumType | undefined,
     onAfterLogin: () => void,
     textForStarterPremium: JSX.Element
 ) {
+    if (wasAlreadyLoggedIn && !isLoggedIn) {
+        return <GoogleSignIn onAfterLogin={onAfterLogin} />
+    }
+
     if (!isLoggedIn || !premiumType) {
         return (
-            <div style={wasAlreadyLoggedIn ? { visibility: 'collapse', height: 0 } : {}}>
-                You can see more auctions with{' '}
-                <Link href={'/premium'} style={{ marginBottom: '15px' }}>
-                    Premium
-                </Link>
+            <div style={{ marginBottom: '15px', textAlign: 'center' }}>
+                You can see more auctions with <Link href={'/premium'}>Premium</Link>
                 <GoogleSignIn onAfterLogin={onAfterLogin} />
             </div>
         )