Trading UI

api/ApiHelper.tsx

@@ -15,6 +15,7 @@ import {
     parseFilterOption,
     parseFlipAuction,
     parseFlipTrackingResponse,
+    parseInventoryData,
     parseItem,
     parseItemBidForList,
     parseItemPrice,
@@ -1945,6 +1946,132 @@ export function initAPI(returnSSRResponse: boolean = false): API {
         })
     }
 
+    let getPlayerInventory = (): Promise<InventoryData[]> => {
+        return new Promise((resolve, reject) => {
+            let googleId = sessionStorage.getItem('googleId')
+            if (!googleId) {
+                toast.error('You need to be logged in to load the inventory.')
+                reject()
+                return
+            }
+            httpApi.sendApiRequest({
+                type: RequestType.INVENTORY_DATA,
+                customRequestURL: `${getApiEndpoint()}/inventory`,
+                requestHeader: {
+                    GoogleToken: googleId,
+                    'Content-Type': 'application/json'
+                },
+                data: '',
+                resolve: data => {
+                    resolve(data ? (data as TradeObject[]).slice(Math.max(data.length - 36, 0)).map(parseInventoryData) : [])
+                },
+                reject: (error: any) => {
+                    apiErrorHandler(RequestType.INVENTORY_DATA, error)
+                    reject(error)
+                }
+            })
+        })
+    }
+
+    let createTradeOffer = (playerUUID: string, offer: InventoryData, wantedItems: WantedItem[]): Promise<void> => {
+        return new Promise((resolve, reject) => {
+            let googleId = sessionStorage.getItem('googleId')
+            if (!googleId) {
+                toast.error('You need to be logged in to load the inventory.')
+                reject()
+                return
+            }
+            httpApi.sendApiRequest(
+                {
+                    type: RequestType.CREATE_TRADE_OFFER,
+                    requestMethod: 'POST',
+                    customRequestURL: `${getApiEndpoint()}/trades`,
+                    requestHeader: {
+                        GoogleToken: googleId,
+                        'Content-Type': 'application/json'
+                    },
+                    data: '',
+                    resolve: () => {
+                        resolve()
+                    },
+                    reject: (error: any) => {
+                        apiErrorHandler(RequestType.CREATE_TRADE_OFFER, error)
+                        reject(error)
+                    }
+                },
+                JSON.stringify([
+                    {
+                        playerUuid: playerUUID,
+                        item: offer,
+                        wantedItems: wantedItems
+                    }
+                ])
+            )
+        })
+    }
+
+    let deleteTradeOffer = (tradeId: string): Promise<void> => {
+        return new Promise((resolve, reject) => {
+            let googleId = sessionStorage.getItem('googleId')
+            if (!googleId) {
+                toast.error('You need to be logged in to delete your trades.')
+                reject()
+                return
+            }
+            httpApi.sendApiRequest({
+                type: RequestType.DELETE_TRADE_OFFER,
+                requestMethod: 'DELETE',
+                customRequestURL: `${getApiEndpoint()}/trades/${tradeId}`,
+                requestHeader: {
+                    GoogleToken: googleId,
+                    'Content-Type': 'application/json'
+                },
+                data: '',
+                resolve: () => {
+                    resolve()
+                },
+                reject: (error: any) => {
+                    apiErrorHandler(RequestType.DELETE_TRADE_OFFER, error, tradeId)
+                    reject(error)
+                }
+            })
+        })
+    }
+
+    let getTradeOffers = (onlyOwn: boolean, filter?: ItemFilter): Promise<TradeObject[]> => {
+        return new Promise((resolve, reject) => {
+            let googleId = sessionStorage.getItem('googleId')
+            if (!googleId) {
+                toast.error('You need to be logged in to use the trade feature.')
+                reject()
+                return
+            }
+            let params = new URLSearchParams()
+            if (filter) {
+                params = new URLSearchParams({
+                    filters: JSON.stringify(filter)
+                })
+            }
+
+            httpApi.sendApiRequest({
+                type: RequestType.GET_TRADES,
+                customRequestURL: `${getApiEndpoint()}/trades${onlyOwn ? '/own' : ''}?${filter ? `${params.toString()}` : ''}`,
+                data: '',
+                requestHeader: {
+                    GoogleToken: googleId,
+                    'Content-Type': 'application/json'
+                },
+                resolve: data => {
+                    resolve(data)
+                },
+                reject: (error: any) => {
+                    apiErrorHandler(RequestType.GET_TRADES, error)
+                    reject(error)
+                }
+            })
+        })
+    }
+
     return {
         search,
         trackSearch,
@@ -2019,6 +2146,10 @@ export function initAPI(returnSSRResponse: boolean = false): API {
         getRelatedItems,
         getOwnerHistory,
         getMayorData,
+        getPlayerInventory,
+        createTradeOffer,
+        getTradeOffers,
+        deleteTradeOffer,
         getTransactions
     }
 }

api/ApiTypes.d.tsx

@@ -75,6 +75,10 @@ export enum RequestType {
     CHECK_FILTER = 'checkFilter',
     OWNER_HISOTRY = 'ownerHistory',
     MAYOR_DATA = 'mayorData',
+    INVENTORY_DATA = 'inventoryData',
+    CREATE_TRADE_OFFER = 'createTradeOffer',
+    DELETE_TRADE_OFFER = 'deleteTradeOffer',
+    GET_TRADES = 'getTrades',
     GET_TRANSACTIONS = 'getTransactions'
 }
 

app/trade/page.tsx

@@ -0,0 +1,20 @@
+import { getHeadMetadata } from '../../utils/SSRUtils'
+import NavBar from '../../components/NavBar/NavBar'
+import { Container } from 'react-bootstrap'
+import TradingOverview from '../../components/TradingOverview/TradingOverview'
+
+export default async function Page() {
+    return (
+        <>
+            <Container>
+                <h2>
+                    <NavBar />
+                    <span>Trading (WIP)</span>
+                </h2>
+                <TradingOverview />
+            </Container>
+        </>
+    )
+}
+
+export const metadata = getHeadMetadata('Trading')

components/GoogleSignIn/GoogleSignIn.tsx

@@ -35,21 +35,22 @@ function GoogleSignIn(props: Props) {
         setIsSSR(false)
         if (wasAlreadyLoggedInThisSession) {
             onLoginSucces(localStorage.getItem('googleId')!)
-        }
-        setTimeout(() => {
-            let isShown = false
-            document.querySelectorAll('iframe').forEach(e => {
-                if (e.src && e.src.includes('accounts.google.com')) {
-                    isShown = true
+        } else {
+            setTimeout(() => {
+                let isShown = false
+                document.querySelectorAll('iframe').forEach(e => {
+                    if (e.src && e.src.includes('accounts.google.com')) {
+                        isShown = true
+                    }
+                })
+                if (!isShown) {
+                    setIsLoggedIn(false)
+                    setIsLoginNotShowing(true)
+                    sessionStorage.removeItem('googleId')
+                    localStorage.removeItem('googleId')
                 }
-            })
-            if (!isShown) {
-                setIsLoggedIn(false)
-                setIsLoginNotShowing(true)
-                sessionStorage.removeItem('googleId')
-                localStorage.removeItem('googleId')
-            }
-        }, 5000)
+            }, 5000)
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 

components/ItemFilter/ItemFilter.tsx

@@ -27,6 +27,7 @@ interface Props {
     defaultFilter?: ItemFilter
     disableLastUsedFilter?: boolean
     showModAdvert?: boolean
+    showFilterInfoElement?: boolean
     onIsValidChange?(newIsValid: boolean)
     emptyLabel?: string
 }
@@ -370,7 +371,7 @@ function ItemFilter(props: Props) {
                 <Card>
                     <Card.Title style={{ margin: '10px' }}>
                         Filter
-                        {infoIconElement}
+                        {props.showFilterInfoElement ? infoIconElement : null}
                     </Card.Title>
                     <Card.Body>
                         {props.showModAdvert ? <ModAdvert /> : null}

components/NavBar/NavBar.tsx

@@ -11,6 +11,7 @@ import PetsIcon from '@mui/icons-material/PetsOutlined'
 import PolicyIcon from '@mui/icons-material/Policy'
 import ShareIcon from '@mui/icons-material/ShareOutlined'
 import StorefrontIcon from '@mui/icons-material/Storefront'
+import CurrencyExchangeIcon from '@mui/icons-material/CurrencyExchange'
 import Image from 'next/image'
 import Link from 'next/link'
 import React, { useEffect, useState } from 'react'
@@ -166,6 +167,9 @@ function NavBar(props: Props) {
                             <MenuItem className={styles.menuItem} component={<Link href={'/premium'} />} icon={<AccountBalanceIcon />}>
                                 Premium / Shop
                             </MenuItem>
+                            <MenuItem className={styles.menuItem} component={<Link href={'/trade'} />} icon={<CurrencyExchangeIcon />}>
+                                Trading
+                            </MenuItem>
                             <MenuItem className={styles.menuItem} component={<Link href={'/kat'} />} icon={<PetsIcon />}>
                                 Kat Flips
                             </MenuItem>

components/PlayerInventory/PlayerInventory.module.css

@@ -0,0 +1,37 @@
+.inventory {
+    overflow: hidden;
+}
+
+.card {
+    margin-bottom: 30px;
+}
+
+.inventory .grid {
+    width: 540px;
+    height: 100%;
+}
+
+.inventory .gridCell {
+    width: 60px;
+    height: 60px;
+    background-color: #8b8b8b;
+    border-top: thick double #373737;
+    border-left: thick double #373737;
+    border-right: double #ffffff;
+    border-bottom: double #ffffff;
+    float: left;
+}
+
+.inventory .image {
+    display: block;
+    margin: auto;
+    padding: 2px;
+}
+
+.hoverElement li {
+    text-align: left;
+}
+
+.hoverElement {
+    min-width: "800px" !important;
+}

components/PlayerInventory/PlayerInventory.tsx

@@ -0,0 +1,90 @@
+import { Card } from 'react-bootstrap'
+import { convertTagToName, getMinecraftColorCodedElement, numberWithThousandsSeparators } from '../../utils/Formatter'
+import styles from './PlayerInventory.module.css'
+import { useEffect, useState } from 'react'
+import api from '../../api/ApiHelper'
+import Tooltip from '../Tooltip/Tooltip'
+import { getLoadingElement } from '../../utils/LoadingUtils'
+
+interface Props {
+    onItemClick?(item: InventoryData)
+}
+
+export default function PlayerInventory(props: Props) {
+    let [inventoryEntires, setInventoryEntries] = useState<InventoryData[]>([])
+    let [isLoading, setIsLoading] = useState(true)
+
+    useEffect(() => {
+        api.getPlayerInventory()
+            .then(entry => {
+                setInventoryEntries(entry)
+            })
+            .finally(() => {
+                setIsLoading(false)
+            })
+    }, [])
+
+    function getItemEntryElement(item: InventoryData) {
+        if (!item || item.itemName === null) {
+            return <div className={styles.gridCell}></div>
+        }
+        return (
+            <div className={styles.gridCell}>
+                <Tooltip
+                    type="hover"
+                    className={styles.hoverElement}
+                    hoverPlacement="bottom"
+                    content={
+                        <img
+                            title={convertTagToName(item.itemName)}
+                            className={styles.image}
+                            src={api.getItemImageUrl({ tag: item.tag })}
+                            alt=""
+                            crossOrigin="anonymous"
+                            height={48}
+                            style={{ cursor: 'pointer' }}
+                            onClick={() => {
+                                if (props.onItemClick) {
+                                    props.onItemClick(item)
+                                }
+                            }}
+                        />
+                    }
+                    tooltipContent={
+                        <div>
+                            <p>
+                                <img
+                                    title={convertTagToName(item.tag)}
+                                    className={styles.image}
+                                    src={api.getItemImageUrl(item)}
+                                    alt=""
+                                    crossOrigin="anonymous"
+                                    height={24}
+                                />
+                                {getMinecraftColorCodedElement(`${item.itemName}`)}
+                            </p>
+                            {getMinecraftColorCodedElement(item.description, false)}
+                        </div>
+                    }
+                />
+            </div>
+        )
+    }
+
+    if (isLoading) {
+        return getLoadingElement()
+    }
+
+    return (
+        <Card className={styles.card}>
+            <Card.Header>
+                <Card.Title>Your Items</Card.Title>
+            </Card.Header>
+            <Card.Body>
+                <div className={styles.inventory}>
+                    <div className={styles.grid}>{inventoryEntires.map(entry => getItemEntryElement(entry))}</div>
+                </div>
+            </Card.Body>
+        </Card>
+    )
+}

components/PriceGraph/AuctionHousePriceGraph/AuctionHousePriceGraph.tsx

@@ -186,7 +186,7 @@ function AuctionHousePriceGraph(props: Props) {
 
     return (
         <div>
-            <ItemFilter filters={filters} onFilterChange={onFilterChange} showModAdvert={true} />
+            <ItemFilter filters={filters} onFilterChange={onFilterChange} showModAdvert={true} showFilterInfoElement={true} />
             <ItemPriceRange
                 setToDefaultRangeSwitch={defaultRangeSwitch}
                 onRangeChange={onRangeChange}