Merge pull request #1252 from Coflnet/number-element-can-format-strings

the number element is now able to handle numbers that are not jet parsed

components/AccountDetails/AccountDetails.tsx

@@ -12,7 +12,7 @@ import { useCoflCoins } from '../../utils/Hooks'
 import { getLoadingElement } from '../../utils/LoadingUtils'
 import GoogleSignIn from '../GoogleSignIn/GoogleSignIn'
 import NavBar from '../NavBar/NavBar'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import PremiumStatus from '../Premium/PremiumStatus/PremiumStatus'
 import Tooltip from '../Tooltip/Tooltip'
 import TransferCoflCoins from '../TransferCoflCoins/TransferCoflCoins'

components/ActiveAuctions/ActiveAuctions.tsx

@@ -13,7 +13,7 @@ import { getHighestPriorityPremiumProduct, getPremiumType, PREMIUM_RANK } from '
 import { CopyButton } from '../CopyButton/CopyButton'
 import styles from './ActiveAuctions.module.css'
 import Image from 'next/image'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 
 interface Props {
     item: Item

components/AuctionDetails/AuctionDetails.tsx

@@ -24,7 +24,7 @@ import styles from './AuctionDetails.module.css'
 import { Help as HelpIcon, ArrowDropDown as ArrowDownIcon, ArrowRight as ArrowRightIcon } from '@mui/icons-material'
 import { FilterChecker } from '../FilterChecker/FilterChecker'
 import Image from 'next/image'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import { parseAuctionDetails } from '../../utils/Parser/APIResponseParser'
 import ItemHistory from '../OwnerHistory/OwnerHistory'
 
@@ -45,6 +45,8 @@ function AuctionDetails(props: Props) {
     let [showItemHistoryDialog, setShowItemHistoryDialog] = useState(false)
     let forceUpdate = useForceUpdate()
 
+    console.log(props)
+
     useEffect(() => {
         // Dont load auction details if
         // - either the auctionUUID is not present (then it cant be loaded here and needs props.auctionDetails)

components/CoflCoins/CoflCoinsDisplay.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import { CUSTOM_EVENTS } from '../../api/ApiTypes.d'
 import { useCoflCoins } from '../../utils/Hooks'
 import { getLoadingElement } from '../../utils/LoadingUtils'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import styles from './CoflCoinsDisplay.module.css'
 
 export function CoflCoinsDisplay() {

components/CoflCoins/GenericProviderPurchaseCard.tsx

@@ -2,7 +2,7 @@ import { Button } from 'react-bootstrap'
 import Tooltip from '../Tooltip/Tooltip'
 import styles from './CoflCoinsPurchase.module.css'
 import HelpIcon from '@mui/icons-material/Help'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 
 interface Props {
     type: 'PayPal' | 'Stripe' | 'LemonSqueezy'

components/CoflCoins/PurchaseElement.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { Card } from 'react-bootstrap'
 import styles from './CoflCoinsPurchase.module.css'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import GenericProviderPurchaseCard from './GenericProviderPurchaseCard'
 
 interface Props {

components/CraftsList/CraftDetails/CraftDetails.tsx

@@ -1,7 +1,7 @@
 'use client'
 import Image from 'next/image'
 import { Badge } from 'react-bootstrap'
-import { Number } from '../../Number/Number'
+import Number from '../../Number/Number'
 import { CraftingRecipe } from '../CraftingRecipe/CraftingRecipe'
 import styles from './CraftDetails.module.css'
 import { IngredientList } from '../IngredientList/IngredientList'

components/CraftsList/CraftsList.tsx

@@ -7,7 +7,7 @@ import { convertTagToName, getMinecraftColorCodedElement } from '../../utils/For
 import { getLoadingElement } from '../../utils/LoadingUtils'
 import { hasHighEnoughPremium, PREMIUM_RANK } from '../../utils/PremiumTypeUtils'
 import GoogleSignIn from '../GoogleSignIn/GoogleSignIn'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import Tooltip from '../Tooltip/Tooltip'
 import { CraftDetails } from './CraftDetails/CraftDetails'
 import styles from './CraftsList.module.css'

components/CraftsList/IngredientList/IngredientList.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import { Number } from '../../Number/Number'
+import Number from '../../Number/Number'
 import { Badge, Container } from 'react-bootstrap'
 import styles from './IngredientList.module.css'
 

components/FlipTracking/FlipTrackingListItem.tsx

@@ -6,7 +6,7 @@ import { useRouter } from 'next/navigation'
 import Image from 'next/image'
 import { getMinecraftColorCodedElement, getStyleForTier } from '../../utils/Formatter'
 import FlipTrackingCopyButton from './FlipTrackingCopyButton'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import ArrowRightIcon from '@mui/icons-material/ArrowRightAlt'
 import Tooltip from '../Tooltip/Tooltip'
 import moment from 'moment'

components/FlipTracking/FlipTrackingTotalProfitCalculation.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Form } from 'react-bootstrap'
 import Tooltip from '../Tooltip/Tooltip'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import SettingsIcon from '@mui/icons-material/Settings'
 
 interface Props {
@@ -16,7 +16,7 @@ enum TotalProfitType {
 }
 
 export function FlipTrackingTotalProfitCalculation(props: Props) {
-    let [totalProfitCalculationType, setTotalProfitCalculationType] = useState(TotalProfitType.ALL)
+    let [totalProfitCalculationType, setTotalProfitCalculationType] = useState(TotalProfitType.ALL)                
     let totalProfit = 0
     props.flips.forEach(flip => {
         if (props.ignoreProfitMap[flip.uId.toString(16)]) {

components/Flipper/Flip/Flip.tsx

@@ -10,7 +10,7 @@ import { getFlipCustomizeSettings, getFlipFinders } from '../../../utils/FlipUti
 import { formatDungeonStarsInString, formatToPriceToShorten, getStyleForTier } from '../../../utils/Formatter'
 import { useForceUpdate } from '../../../utils/Hooks'
 import { CopyButton } from '../../CopyButton/CopyButton'
-import { Number } from '../../Number/Number'
+import Number from '../../Number/Number'
 import styles from './Flip.module.css'
 import { writeToClipboard } from '../../../utils/ClipboardUtils'
 

components/Flipper/FlipBased/FlipBased.tsx

@@ -7,7 +7,7 @@ import { Badge, Card, Form } from 'react-bootstrap'
 import api from '../../../api/ApiHelper'
 import { useForceUpdate } from '../../../utils/Hooks'
 import { getLoadingElement } from '../../../utils/LoadingUtils'
-import { Number } from '../../Number/Number'
+import Number from '../../Number/Number'
 import styles from './FlipBased.module.css'
 
 interface Props {

components/Flipper/Flipper.tsx

@@ -22,7 +22,7 @@ import { FLIPPER_FILTER_KEY, getSetting, getSettingsObject, handleSettingsImport
 import AuctionDetails from '../AuctionDetails/AuctionDetails'
 import { CopyButton } from '../CopyButton/CopyButton'
 import GoogleSignIn from '../GoogleSignIn/GoogleSignIn'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import Tooltip from '../Tooltip/Tooltip'
 import Flip from './Flip/Flip'
 import FlipBased from './FlipBased/FlipBased'

components/KatFlips/KatFlips.tsx

@@ -8,7 +8,7 @@ import api from '../../api/ApiHelper'
 import { convertTagToName, getStyleForTier } from '../../utils/Formatter'
 import { hasHighEnoughPremium, PREMIUM_RANK } from '../../utils/PremiumTypeUtils'
 import GoogleSignIn from '../GoogleSignIn/GoogleSignIn'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import styles from './KatFlips.module.css'
 import { parseKatFlip } from '../../utils/Parser/APIResponseParser'
 import { writeToClipboard } from '../../utils/ClipboardUtils'

components/LowSupplyList/LowSupplyList.tsx

@@ -8,7 +8,7 @@ import { getLoadingElement } from '../../utils/LoadingUtils'
 import { NumericFormat } from 'react-number-format'
 import styles from './LowSupplyList.module.css'
 import Image from 'next/image'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 
 let mounted = true
 

components/Number/Number.tsx

@@ -3,15 +3,17 @@ import React, { useEffect, useState } from 'react'
 import { numberWithThousandsSeparators } from '../../utils/Formatter'
 
 interface Props {
-    number: number
+    number: number | string
 }
 
-export function Number(props: Props) {
+export default function NumberElement(props: Props) {
     let [isSSR, setIsSSR] = useState(true)
 
+    let value = Number(props.number)
+
     useEffect(() => {
         setIsSSR(false)
     }, [])
 
-    return <>{isSSR ? numberWithThousandsSeparators(props.number, ',', '.') : numberWithThousandsSeparators(props.number)}</>
+    return <>{isSSR ? numberWithThousandsSeparators(value, ',', '.') : numberWithThousandsSeparators(value)}</>
 }

components/OwnerHistory/OwnerHistory.tsx

@@ -7,7 +7,7 @@ import styles from './OwnerHistory.module.css'
 import ArrowRightIcon from '@mui/icons-material/ArrowRightAlt'
 import moment from 'moment'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 
 interface Props {
     uid: string

components/PlayerDetailsList/PlayerDetailsList.tsx

@@ -14,7 +14,7 @@ import { getHighestPriorityPremiumProduct, getPremiumType, PREMIUM_RANK } from '
 import { CopyButton } from '../CopyButton/CopyButton'
 import GoogleSignIn from '../GoogleSignIn/GoogleSignIn'
 import ItemFilter from '../ItemFilter/ItemFilter'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import Search from '../Search/Search'
 import SubscribeButton from '../SubscribeButton/SubscribeButton'
 import Tooltip from '../Tooltip/Tooltip'

components/Premium/BuyPremium/BuyPremium.tsx

@@ -7,7 +7,7 @@ import { CUSTOM_EVENTS } from '../../../api/ApiTypes.d'
 import { useCoflCoins } from '../../../utils/Hooks'
 import { getPremiumType, PREMIUM_TYPES } from '../../../utils/PremiumTypeUtils'
 import { CoflCoinsDisplay } from '../../CoflCoins/CoflCoinsDisplay'
-import { Number } from '../../Number/Number'
+import Number from '../../Number/Number'
 import styles from './BuyPremium.module.css'
 import BuyPremiumConfirmationDialog from './BuyPremiumConfirmationDialog'
 

components/Premium/BuyPremium/BuyPremiumConfirmationDialog.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { Button, Modal } from 'react-bootstrap'
 import styles from './BuyPremium.module.css'
-import { Number } from '../../Number/Number'
+import Number from '../../Number/Number'
 import { getPremiumType } from '../../../utils/PremiumTypeUtils'
 import { useState } from 'react'
 import { GoogleLogin } from '@react-oauth/google'

components/Premium/PremiumFeatures/PremiumFeatures.tsx

@@ -2,7 +2,7 @@
 import HelpIcon from '@mui/icons-material/Help'
 import Link from 'next/link'
 import { Table } from 'react-bootstrap'
-import { Number } from '../../Number/Number'
+import Number from '../../Number/Number'
 import Tooltip from '../../Tooltip/Tooltip'
 import styles from './PremiumFeatures.module.css'
 import Image from 'next/image'

components/PriceGraph/AuctionHousePriceGraph/AuctionHousePriceGraph.tsx

@@ -8,7 +8,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 { Number } from '../../Number/Number'
+import Number from '../../Number/Number'
 import RecentAuctions from '../../RecentAuctions/RecentAuctions'
 import RelatedItems from '../../RelatedItems/RelatedItems'
 import ShareButton from '../../ShareButton/ShareButton'

components/PriceGraph/BazaarPriceGraph/BazaarPriceGraph.tsx

@@ -11,7 +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 { Number } from '../../Number/Number'
+import Number from '../../Number/Number'
 import RelatedItems from '../../RelatedItems/RelatedItems'
 import ShareButton from '../../ShareButton/ShareButton'
 import styles from './BazaarPriceGraph.module.css'

components/PriceGraph/BazaarPriceGraph/BazaarSnapshot/BazaarSnapshot.tsx

@@ -6,7 +6,7 @@ import { Table } from 'react-bootstrap'
 import api from '../../../../api/ApiHelper'
 import { CUSTOM_EVENTS } from '../../../../api/ApiTypes.d'
 import { useDebounce } from '../../../../utils/Hooks'
-import { Number } from '../../../Number/Number'
+import Number from '../../../Number/Number'
 import styles from './BazaarSnapshot.module.css'
 
 interface Props {

components/RecentAuctions/RecentAuctions.tsx

@@ -11,7 +11,7 @@ import { getMoreAuctionsElement } from '../../utils/ListUtils'
 import { getLoadingElement } from '../../utils/LoadingUtils'
 import { getHighestPriorityPremiumProduct, getPremiumType, PREMIUM_RANK } from '../../utils/PremiumTypeUtils'
 import { RECENT_AUCTIONS_FETCH_TYPE_KEY } from '../../utils/SettingsUtils'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import styles from './RecentAuctions.module.css'
 
 interface Props {

components/Ref/Ref.tsx

@@ -8,7 +8,7 @@ import { getLoadingElement } from '../../utils/LoadingUtils'
 import { getProperty } from '../../utils/PropertiesUtils'
 import { CopyButton } from '../CopyButton/CopyButton'
 import GoogleSignIn from '../GoogleSignIn/GoogleSignIn'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import styles from './Ref.module.css'
 import Tooltip from '../Tooltip/Tooltip'
 import ClaimAccountTutorial from '../ClaimAccount/ClaimAccountTutorial'

components/Startpage/Startpage.tsx

@@ -14,7 +14,7 @@ import Badge from 'react-bootstrap/Badge'
 import { FixedSizeList as List } from 'react-window'
 import api from '../../api/ApiHelper'
 import { getMinecraftColorCodedElement } from '../../utils/Formatter'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import styles from './Startpage.module.css'
 import { StartpageLargeElementSkeleton } from './StartpageLargeElementSkeleton'
 

components/SubscriptionList/SubscriptionList.tsx

@@ -12,7 +12,7 @@ import { useForceUpdate, useWasAlreadyLoggedIn } from '../../utils/Hooks'
 import { getLoadingElement } from '../../utils/LoadingUtils'
 import GoogleSignIn from '../GoogleSignIn/GoogleSignIn'
 import ItemFilterPropertiesDisplay from '../ItemFilter/ItemFilterPropertiesDisplay'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import SubscribeButton from '../SubscribeButton/SubscribeButton'
 import styles from './SubscriptionList.module.css'
 import NotificationTargets from '../NotificationTargets/NotificationTargets'

components/TradeList/TradeList.tsx

@@ -9,7 +9,7 @@ import ItemFilter from '../ItemFilter/ItemFilter'
 import DeleteIcon from '@mui/icons-material/Delete'
 import { getLoadingElement } from '../../utils/LoadingUtils'
 import { CopyButton } from '../CopyButton/CopyButton'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 
 interface Props {
     currentUserUUID?: string

components/TransferCoflCoins/TransferCoflCoins.tsx

@@ -4,7 +4,7 @@ import { Button, Form } from 'react-bootstrap'
 import { NumericFormat } from 'react-number-format'
 import { useCoflCoins } from '../../utils/Hooks'
 import { PlayerFilterElement } from '../FilterElement/FilterElements/PlayerFilterElement'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import TransferCoflCoinsSummary from './TransferCoflCoinsSummary'
 
 interface Props {

components/TransferCoflCoins/TransferCoflCoinsSummary.tsx

@@ -6,7 +6,7 @@ import { toast } from 'react-toastify'
 import { v4 as generateUUID } from 'uuid'
 import api from '../../api/ApiHelper'
 import { getLoadingElement } from '../../utils/LoadingUtils'
-import { Number } from '../Number/Number'
+import Number from '../Number/Number'
 import styles from './TransferCoflCoinsSummary.module.css'
 
 interface Props {