Add month view for bazaar and validate range parameter

.gitignore

@@ -39,3 +39,4 @@ cypress/videos/*
 /playwright-report/
 /playwright/.cache/
 data/
+tsconfig.tsbuildinfo

app/item/[tag]/page.tsx

@@ -155,7 +155,8 @@ ${getFiltersText(filter)}` : ''}`,
 }
 
 async function getItemData(searchParams, params) {
-    let range = searchParams.range || 'day'
+    let validRanges = ['active', 'hour', 'day', 'week', 'month', 'year', 'full']
+    let range = validRanges.includes(searchParams.range) ? searchParams.range : 'day'
     let tag = params.tag as string
     let itemFilter = getItemFilterFromUrl(searchParams)
 
@@ -278,6 +279,10 @@ async function fetchPrices(api: API, tag: string, range: string, isBazaar: boole
     if (isBazaar) {
         if (range === 'full') {
             return api.getBazaarPricesByRange(tag, new Date(0), new Date())
+        } else if (range === 'month') {
+            let monthAgo = new Date()
+            monthAgo.setMonth(monthAgo.getMonth() - 1)
+            return api.getBazaarPricesByRange(tag, monthAgo, new Date())
         } else {
             return api.getBazaarPrices(tag, range as any)
         }

components/ItemPriceRange/ItemPriceRange.tsx

@@ -6,6 +6,7 @@ import { getURLSearchParam } from '../../utils/Parser/URLParser'
 import styles from './ItemPriceRange.module.css'
 import { isClientSideRendering } from '../../utils/SSRUtils'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { VALID_RANGES } from '../../hooks/useValidRange'
 
 export enum DateRange {
     ACTIVE = 'active',
@@ -38,7 +39,10 @@ export function ItemPriceRange(props: Props) {
     let pathname = usePathname()
     let router = useRouter()
     let searchParams = useSearchParams()
-    let [selectedDateRange, _setSelectedDateRange] = useState(searchParams.get('range') || DEFAULT_DATE_RANGE)
+    let [selectedDateRange, _setSelectedDateRange] = useState<DateRange>(() => {
+        let urlRange = searchParams.get('range')
+        return urlRange && VALID_RANGES.includes(urlRange) ? (urlRange as DateRange) : DEFAULT_DATE_RANGE
+    })
     let urlUpdateCountRef = useRef<number[]>([])
 
     useEffect(() => {
@@ -61,7 +65,7 @@ export function ItemPriceRange(props: Props) {
 
     useEffect(() => {
         let range = getURLSearchParam('range')
-        if (!range) {
+        if (!range || !VALID_RANGES.includes(range)) {
             return
         }
         DEFAULT_DATE_RANGE = range as DateRange

components/PriceGraph/AuctionHousePriceGraph/AuctionHousePriceGraph.tsx

@@ -9,6 +9,7 @@ import { AUCTION_GRAPH_LEGEND_SELECTION } from '../../../utils/SettingsUtils'
 import ActiveAuctions from '../../ActiveAuctions/ActiveAuctions'
 import ItemFilter, { getPrefillFilter } from '../../ItemFilter/ItemFilter'
 import { DateRange, DEFAULT_DATE_RANGE, ItemPriceRange } from '../../ItemPriceRange/ItemPriceRange'
+import { useValidRange } from '../../../hooks/useValidRange'
 import Number from '../../Number/Number'
 import GoogleSignIn from '../../GoogleSignIn/GoogleSignIn'
 import RecentAuctions from '../../RecentAuctions/RecentAuctions'
@@ -82,7 +83,7 @@ let mounted = true
 
 function AuctionHousePriceGraph(props: Props) {
     let searchParams = useSearchParams()
-    let [fetchspan, setFetchspan] = useState((searchParams.get('range') as DateRange) || DEFAULT_DATE_RANGE)
+    let [fetchspan, setFetchspan] = useValidRange()
     let [isLoading, setIsLoading] = useState(false)
     let [noDataFound, setNoDataFound] = useState(false)
     let [avgPrice, setAvgPrice] = useState(0)

components/PriceGraph/BazaarPriceGraph/BazaarPriceGraph.tsx

@@ -11,6 +11,7 @@ import { getURLSearchParam } from '../../../utils/Parser/URLParser'
 import { BAZAAR_GRAPH_LEGEND_SELECTION, BAZAAR_GRAPH_TYPE } from '../../../utils/SettingsUtils'
 import { isClientSideRendering } from '../../../utils/SSRUtils'
 import { DateRange, DEFAULT_DATE_RANGE, ItemPriceRange } from '../../ItemPriceRange/ItemPriceRange'
+import { getValidatedRange } from '../../../hooks/useValidRange'
 import Number from '../../Number/Number'
 import RelatedItems from '../../RelatedItems/RelatedItems'
 import ShareButton from '../../ShareButton/ShareButton'
@@ -92,7 +93,7 @@ function BazaarPriceGraph(props: Props) {
     }, [graphType])
 
     function init() {
-        fetchspan = (getURLSearchParam('range') as DateRange) || DEFAULT_DATE_RANGE
+        fetchspan = getValidatedRange(getURLSearchParam('range'))
         setFetchspan(fetchspan)
 
         graphType = (localStorage.getItem(BAZAAR_GRAPH_TYPE) as GRAPH_TYPE) || DEFAULT_GRAPH_TYPE
@@ -200,6 +201,10 @@ function BazaarPriceGraph(props: Props) {
     function loadBazaarPrices(tag: string, fetchspan: DateRange): Promise<BazaarPrice[]> {
         if (fetchspan === DateRange.ALL) {
             return api.getBazaarPricesByRange(tag, new Date(0), new Date())
+        } else if (fetchspan === DateRange.MONTH) {
+            let monthAgo = new Date()
+            monthAgo.setMonth(monthAgo.getMonth() - 1)
+            return api.getBazaarPricesByRange(tag, monthAgo, new Date())
         } else {
             return api.getBazaarPrices(tag, fetchspan as any)
         }
@@ -375,7 +380,7 @@ function BazaarPriceGraph(props: Props) {
         <div>
             <Suspense>
                 <ItemPriceRange
-                    dateRangesToDisplay={[DateRange.HOUR, DateRange.DAY, DateRange.WEEK, DateRange.ALL]}
+                    dateRangesToDisplay={[DateRange.HOUR, DateRange.DAY, DateRange.WEEK, DateRange.MONTH, DateRange.ALL]}
                     onRangeChange={onRangeChange}
                     disableAllTime={false}
                     item={props.item}

hooks/useValidRange.ts

@@ -0,0 +1,18 @@
+import { useState, Dispatch, SetStateAction } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { DateRange, DEFAULT_DATE_RANGE } from '../components/ItemPriceRange/ItemPriceRange'
+
+export const VALID_RANGES = Object.values(DateRange) as string[]
+
+export function getValidatedRange(urlRange: string | null | undefined, defaultRange: DateRange = DEFAULT_DATE_RANGE): DateRange {
+    return urlRange && VALID_RANGES.includes(urlRange) ? (urlRange as DateRange) : defaultRange
+}
+
+export function useValidRange(defaultRange: DateRange = DEFAULT_DATE_RANGE): [DateRange, Dispatch<SetStateAction<DateRange>>] {
+    let searchParams = useSearchParams()
+
+    return useState<DateRange>(() => {
+        let urlRange = searchParams.get('range')
+        return getValidatedRange(urlRange, defaultRange)
+    })
+}