diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index 4dec60f..cba6882 100644 --- a/src/pages/library/index.tsx +++ b/src/pages/library/index.tsx @@ -4,6 +4,7 @@ import ContentPanel, { ContentPanelWidthSizes, } from "components/Panels/ContentPanel"; import { + GetCurrenciesQuery, GetLibraryItemsPreviewQuery, GetWebsiteInterfaceQuery, } from "graphql/operations-types"; @@ -13,7 +14,7 @@ import AppLayout from "components/AppLayout"; import LibraryItemsPreview from "components/Library/LibraryItemsPreview"; import Select from "components/Select"; import { useEffect, useState } from "react"; -import { prettyDate, prettyinlineTitle } from "queries/helpers"; +import { convertPrice, prettyDate, prettyinlineTitle } from "queries/helpers"; import Switch from "components/Switch"; import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; @@ -27,7 +28,7 @@ type GroupLibraryItems = Map< >; export default function Library(props: LibraryProps): JSX.Element { - const { langui, items } = props; + const { langui, items, currencies } = props; const [showSubitems, setShowSubitems] = useState(false); const [showPrimaryItems, setShowPrimaryItems] = useState(true); @@ -40,7 +41,7 @@ export default function Library(props: LibraryProps): JSX.Element { ); const [sortedItems, setSortedItem] = useState( - sortBy(groupingMethod, filteredItems) + sortBy(groupingMethod, filteredItems, currencies) ); const [groups, setGroups] = useState( @@ -54,7 +55,7 @@ export default function Library(props: LibraryProps): JSX.Element { }, [showSubitems, items, showPrimaryItems, showSecondaryItems]); useEffect(() => { - setSortedItem(sortBy(sortingMethod, filteredItems)); + setSortedItem(sortBy(sortingMethod, filteredItems, currencies)); }, [filteredItems, sortingMethod]); useEffect(() => { @@ -278,7 +279,8 @@ function filterItems( function sortBy( orderByType: number, - items: LibraryProps["items"] + items: LibraryProps["items"], + currencies: GetCurrenciesQuery["currencies"]["data"] ): LibraryProps["items"] { switch (orderByType) { case 0: @@ -297,8 +299,12 @@ function sortBy( }); case 1: return [...items].sort((a, b) => { - const priceA = a.attributes.price ? a.attributes.price.amount : 99999; - const priceB = b.attributes.price ? b.attributes.price.amount : 99999; + const priceA = a.attributes.price + ? convertPrice(a.attributes.price, currencies[0]) + : 99999; + const priceB = b.attributes.price + ? convertPrice(b.attributes.price, currencies[0]) + : 99999; return priceA - priceB; }); case 2: diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts index c475860..6e30470 100644 --- a/src/queries/helpers.ts +++ b/src/queries/helpers.ts @@ -33,10 +33,7 @@ export function prettyPrice( let result = ""; currencies.map((currency) => { if (currency.attributes.code === targetCurrencyCode) { - let amountInUSD = - pricePicker.amount * pricePicker.currency.data.attributes.rate_to_usd; - let amountInTargetCurrency = - amountInUSD / currency.attributes.rate_to_usd; + const amountInTargetCurrency = convertPrice(pricePicker, currency); result = currency.attributes.symbol + amountInTargetCurrency.toLocaleString(undefined, { @@ -48,6 +45,16 @@ export function prettyPrice( return result; } +export function convertPrice( + pricePicker: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"], + targetCurrency: GetCurrenciesQuery["currencies"]["data"][number] +): number { + return ( + (pricePicker.amount * pricePicker.currency.data.attributes.rate_to_usd) / + targetCurrency.attributes.rate_to_usd + ); +} + export function prettySlug(slug?: string, parentSlug?: string): string { if (slug) { if (parentSlug && slug.startsWith(parentSlug))