add bazaar subscriptions

api/ApiTypes.d.tsx

@@ -137,7 +137,7 @@ export interface NotificationListener {
     topicId: string
     price: number
     types: SubscriptionType[]
-    type: 'player' | 'item' | 'auction'
+    type: 'player' | 'item' | 'auction' | 'bazaar'
     title?: string
     filter?: ItemFilter
 }

components/PriceGraph/BazaarPriceGraph/BazaarPriceGraph.tsx

@@ -20,6 +20,7 @@ import getPriceGraphConfigSingle from './PriceGraphConfigSingle'
 import getPriceGraphConfigSplit from './PriceGraphConfigSplit'
 import { applyMayorDataToChart } from '../../../utils/GraphUtils'
 import { toast } from 'react-toastify'
+import SubscribeButton from '../../SubscribeButton/SubscribeButton'
 
 interface Props {
     item: Item
@@ -426,20 +427,26 @@ function BazaarPriceGraph(props: Props) {
                             </span>
                         )}
                     </span>
-                    <div style={{ float: 'left' }} className={styles.additionalInfosButton}>
-                        {!isSSR ? (
-                            <Form.Select
-                                defaultValue={localStorage.getItem(BAZAAR_GRAPH_TYPE) || DEFAULT_GRAPH_TYPE}
-                                className={styles.recentAuctionsFetchType}
-                                onChange={onGraphTypeChange}
-                            >
-                                <option value={GRAPH_TYPE.SINGLE}>Single</option>
-                                <option value={GRAPH_TYPE.SPLIT}>Split</option>
-                            </Form.Select>
-                        ) : null}
-                    </div>
-                    <div style={{ float: 'right' }}>
-                        <ShareButton title={'Prices for ' + props.item.name} text="Browse the Bazaar history in Hypixel Skyblock" />
+
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <div className={styles.additionalInfosButton}>
+                            {!isSSR ? (
+                                <Form.Select
+                                    defaultValue={localStorage.getItem(BAZAAR_GRAPH_TYPE) || DEFAULT_GRAPH_TYPE}
+                                    className={styles.recentAuctionsFetchType}
+                                    onChange={onGraphTypeChange}
+                                >
+                                    <option value={GRAPH_TYPE.SINGLE}>Single</option>
+                                    <option value={GRAPH_TYPE.SPLIT}>Split</option>
+                                </Form.Select>
+                            ) : null}
+                        </div>
+                        <div>
+                            <SubscribeButton type="bazaar" topic={props.item.tag} />
+                        </div>
+                        <div>
+                            <ShareButton title={'Prices for ' + props.item.name} text="Browse the Bazaar history in Hypixel Skyblock" />
+                        </div>
                     </div>
                 </div>
                 <hr />

components/SubscribeButton/SubscribeBazaarItemContent/SubscribeBazaarItemContent.module.css

@@ -0,0 +1,4 @@
+.checkBox {
+    display: inline;
+    margin-left: 5px;
+}

components/SubscribeButton/SubscribeBazaarItemContent/SubscribeBazaarItemContent.tsx

@@ -0,0 +1,74 @@
+'use client'
+import { FormControl, InputGroup } from 'react-bootstrap'
+import { Form } from 'react-bootstrap'
+import { NotificationListener, SubscriptionType } from '../../../api/ApiTypes.d'
+import styles from './SubscribeBazaarItemContent.module.css'
+
+interface Props {
+    onPriceChange(value: string)
+    onIsPriceAboveChange(value: boolean)
+    onUseSellPriceChange(value: boolean)
+    itemTag: string
+    prefill?: NotificationListener
+}
+
+function SubscribeBazaarItemContent(props: Props) {
+    return (
+        <>
+            <div className="item-forms">
+                <InputGroup className="price-input">
+                    <InputGroup.Text id="inputGroup-sizing-sm">Item price</InputGroup.Text>
+                    <FormControl
+                        aria-label="Small"
+                        aria-describedby="inputGroup-sizing-sm"
+                        type="number"
+                        defaultValue={props.prefill?.price}
+                        onChange={e => props.onPriceChange(e.target.value)}
+                    />
+                </InputGroup>
+                <hr />
+                <h4 style={{ marginBottom: '20px' }}>Notify me...</h4>
+                <Form.Group>
+                    <Form.Label htmlFor="priceAboveCheckbox">if the price is above the selected value</Form.Label>
+                    <Form.Check
+                        type="radio"
+                        id="priceAboveCheckbox"
+                        name="priceState"
+                        defaultChecked={
+                            props.prefill && (props.prefill.types as unknown as string[]).includes(SubscriptionType[SubscriptionType.PRICE_HIGHER_THAN])
+                        }
+                        onChange={e => props.onIsPriceAboveChange(true)}
+                        className={styles.checkBox}
+                    />
+                </Form.Group>
+                <Form.Group>
+                    <Form.Label htmlFor="priceBelowCheckbox">if the price is below the selected value</Form.Label>
+                    <Form.Check
+                        type="radio"
+                        id="priceBelowCheckbox"
+                        name="priceState"
+                        defaultChecked={
+                            props.prefill && (props.prefill.types as unknown as string[]).includes(SubscriptionType[SubscriptionType.PRICE_LOWER_THAN])
+                        }
+                        onChange={e => props.onIsPriceAboveChange(false)}
+                        className={styles.checkBox}
+                    />
+                </Form.Group>
+                <Form.Group>
+                    <Form.Label htmlFor="useSellPriceCheckbox">if the sell price should be used</Form.Label>
+                    <Form.Check
+                        type="checkbox"
+                        id="useSellPriceCheckbox"
+                        defaultChecked={
+                            props.prefill && (props.prefill.types as unknown as string[]).includes(SubscriptionType[SubscriptionType.USE_SELL_NOT_BUY])
+                        }
+                        onChange={e => props.onUseSellPriceChange(e.target.checked)}
+                        className={styles.checkBox}
+                    />
+                </Form.Group>
+            </div>
+        </>
+    )
+}
+
+export default SubscribeBazaarItemContent

components/SubscribeButton/SubscribeButton.tsx

@@ -18,10 +18,11 @@ import { useWasAlreadyLoggedIn } from '../../utils/Hooks'
 import EditIcon from '@mui/icons-material/Edit'
 import { Typeahead } from 'react-bootstrap-typeahead'
 import NotificationTargetForm from '../NotificationTargets/NotificationTargetForm'
+import SubscribeBazaarItemContent from './SubscribeBazaarItemContent/SubscribeBazaarItemContent'
 
 interface Props {
     topic: string
-    type: 'player' | 'item' | 'auction'
+    type: 'player' | 'item' | 'auction' | 'bazaar'
     buttonContent?: JSX.Element
     isEditButton?: boolean
     onAfterSubscribe?()
@@ -51,6 +52,7 @@ function SubscribeButton(props: Props) {
     let [hasPlayerBoughtAnyAuction, setHasPlayerBoughtAnyAuction] = useState(
         props.prefill?.listener?.types?.includes(SubscriptionType.BOUGHT_ANY_AUCTION) ?? false
     )
+    let [isUseBazaarSellNotBuy, setIsUseBazaarSellNotBuy] = useState(props.prefill?.listener?.types?.includes(SubscriptionType.USE_SELL_NOT_BUY) ?? false)
     let [isLoggedIn, setIsLoggedIn] = useState(false)
     let [itemFilter, setItemFilter] = useState<ItemFilter | undefined>(props.prefill?.listener?.filter || undefined)
     let [isItemFilterValid, setIsItemFilterValid] = useState(true)
@@ -68,6 +70,12 @@ function SubscribeButton(props: Props) {
         if (props.type === 'item' && !price) {
             price = '0'
         }
+        if (props.type === 'bazaar' && !price) {
+            price = '0'
+        }
+        if (props.type === 'item' && !itemFilter) {
+            itemFilter = {}
+        }
 
         api.subscribe(props.topic, getSubscriptionTypes(), selectedNotificationTargets, price ? parseInt(price) : undefined, itemFilter)
             .then(() => {
@@ -119,6 +127,17 @@ function SubscribeButton(props: Props) {
         if (props.type === 'auction') {
             types.push(SubscriptionType.AUCTION)
         }
+        if (props.type === 'bazaar') {
+            if (isPriceAbove) {
+                types.push(SubscriptionType.PRICE_HIGHER_THAN)
+            }
+            if (!isPriceAbove) {
+                types.push(SubscriptionType.PRICE_LOWER_THAN)
+            }
+            if (isUseBazaarSellNotBuy) {
+                types.push(SubscriptionType.USE_SELL_NOT_BUY)
+            }
+        }
         return types
     }
 
@@ -199,6 +218,15 @@ function SubscribeButton(props: Props) {
                                 onIsFilterValidChange={setIsItemFilterValid}
                             />
                         ) : null}
+                        {props.type === 'bazaar' ? (
+                            <SubscribeBazaarItemContent
+                                itemTag={props.topic}
+                                onPriceChange={setPrice}
+                                onIsPriceAboveChange={setIsPriceAbove}
+                                onUseSellPriceChange={setIsUseBazaarSellNotBuy}
+                                prefill={props.prefill?.listener}
+                            />
+                        ) : null}
                         {props.type === 'player' ? (
                             <SubscribePlayerContent
                                 onGotOutbidChange={setGotOutbid}

components/SubscriptionList/SubscriptionList.tsx

@@ -154,6 +154,9 @@ function SubscriptionList() {
                         case SubscriptionType.BOUGHT_ANY_AUCTION.toString():
                             result = <li key={i}>Notify if player bought any auction</li>
                             break
+                        case SubscriptionType.USE_SELL_NOT_BUY.toString():
+                            result = <li key={i}>Use sell price instead of buy price</li>
+                            break
                     }
                     return result
                 })}
@@ -246,6 +249,7 @@ function SubscriptionList() {
         return new Promise((resolve, reject) => {
             switch (subscription.type) {
                 case 'item':
+                case 'bazaar':
                     resolve(convertTagToName(subscription.topicId))
                     break
                 case 'player':
@@ -277,6 +281,7 @@ function SubscriptionList() {
     function getSubscriptionTitleElement(subscription: NotificationListener) {
         switch (subscription.type) {
             case 'item':
+            case 'bazaar':
                 return (
                     <Link href={'/item/' + subscription.topicId} className="disableLinkStyle">
                         {subscription.title}

utils/Parser/APIResponseParser.tsx

@@ -230,13 +230,18 @@ export function parseSubscriptionTypes(typeInNumeric: number): SubscriptionType[
     return subTypes
 }
 
-function _getTypeFromSubTypes(subTypes: SubscriptionType[]): 'item' | 'player' | 'auction' {
+function _getTypeFromSubTypes(subTypes: SubscriptionType[], itemFilter: string): 'item' | 'player' | 'auction' {
     let type
     switch (SubscriptionType[subTypes[0].toString()]) {
         case SubscriptionType.BIN:
         case SubscriptionType.PRICE_HIGHER_THAN:
         case SubscriptionType.PRICE_LOWER_THAN:
-            type = 'item'
+        case SubscriptionType.USE_SELL_NOT_BUY:
+            if (!itemFilter) {
+                type = 'bazaar'
+            } else {
+                type = 'item'
+            }
             break
         case SubscriptionType.OUTBID:
         case SubscriptionType.SOLD:
@@ -257,7 +262,7 @@ export function parseSubscription(subscription: any): NotificationListener {
         price: subscription.price,
         topicId: subscription.topicId,
         types: parseSubscriptionTypes(subscription.type),
-        type: _getTypeFromSubTypes(parseSubscriptionTypes(subscription.type)),
+        type: _getTypeFromSubTypes(parseSubscriptionTypes(subscription.type), subscription.filter),
         filter: subscription.filter ? JSON.parse(subscription.filter) : undefined
     }
 }