["className"] = ""
+ if (props.allowOverdraw) {
+ if (props.balance > 0) {
+ color = "text-gray-300"
+ } else if (props.balance < -150) {
+ color = "text-amber-700"
+ } else if (props.balance < 0) {
+ color = "text-blue-grey-600"
+ }
+ }
+ else {
+ if (props.balance > 0) {
+ color = "text-green-600"
+ } else if (props.balance < 0) {
+ color = "text-red-700"
+ }
}
return {props.balance.toFixed(2)}€
}
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index 432009b..5bb7258 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -218,7 +218,7 @@ export default function Header() {
-
+
diff --git a/src/components/PageComponents/UserOverview.tsx b/src/components/PageComponents/UserOverview.tsx
index ab581d1..8454899 100644
--- a/src/components/PageComponents/UserOverview.tsx
+++ b/src/components/PageComponents/UserOverview.tsx
@@ -109,7 +109,7 @@ const UserOverview = () => {
-
+
|
{user.allowOverdraw ? (
diff --git a/src/pages/buy.tsx b/src/pages/buy.tsx
index dfb3345..b1abf1f 100644
--- a/src/pages/buy.tsx
+++ b/src/pages/buy.tsx
@@ -1,5 +1,5 @@
import { type NextPage } from "next"
-import { useRef, useState } from "react"
+import { useRef, useState, useSyncExternalStore } from "react"
import { Search, Package } from "lucide-react"
import ActionResponsePopup, {
type AnimationHandle,
@@ -9,6 +9,35 @@ import BuyItemCard from "~/components/General/BuyItemCard"
import RegularPage from "~/components/Layout/RegularPage"
import { api } from "~/utils/api"
+type SortMode = "recent" | "alphabetic" | "mostBought"
+
+const SORT_MODE_STORAGE_KEY = "buyPageSortMode"
+const SORT_MODE_STORAGE_EVENT = "buyPageSortModeChange"
+const sortModes: SortMode[] = ["recent", "alphabetic", "mostBought"]
+
+const isSortMode = (value: string | null): value is SortMode => {
+ return sortModes.includes(value as SortMode)
+}
+
+const getStoredSortMode = (): SortMode => {
+ if (typeof window === "undefined") {
+ return "recent"
+ }
+
+ const storedSortMode = window.localStorage.getItem(SORT_MODE_STORAGE_KEY)
+ return isSortMode(storedSortMode) ? storedSortMode : "recent"
+}
+
+const subscribeToSortMode = (onStoreChange: () => void) => {
+ window.addEventListener("storage", onStoreChange)
+ window.addEventListener(SORT_MODE_STORAGE_EVENT, onStoreChange)
+
+ return () => {
+ window.removeEventListener("storage", onStoreChange)
+ window.removeEventListener(SORT_MODE_STORAGE_EVENT, onStoreChange)
+ }
+}
+
const BuyPage: NextPage = () => {
const allItemsRequest = api.item.getBuyable.useQuery()
const allCategoriesRequest = api.category.getAllWithItems.useQuery()
@@ -16,19 +45,26 @@ const BuyPage: NextPage = () => {
const trpcUtils = api.useUtils()
const animationRef = useRef(null)
const [searchString, setSearchString] = useState("")
+ const sortMode = useSyncExternalStore(subscribeToSortMode, getStoredSortMode, () => "recent")
const [categoryOverrides, setCategoryOverrides] = useState<{ [index: string]: boolean }>({})
const apiBuyOneItemMultiple = api.item.buyItem.useMutation()
+ const handleSortModeChange = (newSortMode: SortMode) => {
+ window.localStorage.setItem(SORT_MODE_STORAGE_KEY, newSortMode)
+ window.dispatchEvent(new Event(SORT_MODE_STORAGE_EVENT))
+ }
+
const buyAction = async (itemID: string, quantity: number = 1): Promise => {
try {
await apiBuyOneItemMultiple.mutateAsync({ productID: itemID, quantity })
-
- const message = quantity === 1
- ? "Erfolgreich gekauft!"
+
+ const message = quantity === 1
+ ? "Erfolgreich gekauft!"
: `${quantity}x erfolgreich gekauft!`
animate(animationRef, "success", message)
await trpcUtils.user.invalidate()
+ await trpcUtils.item.getBuyable.invalidate()
} catch (error: any) {
console.error(error)
animate(animationRef, "failure", error.message)
@@ -59,7 +95,27 @@ const BuyPage: NextPage = () => {
const searchShown = item.name.toLowerCase().includes(searchString.toLowerCase())
return categoryShown && searchShown
})
- .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
+ .sort((a, b) => {
+ const nameComparison = a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+
+ if (sortMode === "alphabetic") {
+ return nameComparison
+ }
+ else if (sortMode === "mostBought") {
+ if (a.userOrderCount !== b.userOrderCount) {
+ return b.userOrderCount - a.userOrderCount
+ }
+ return nameComparison
+ }
+ else {
+ const aLastBoughtAt = a.userLastBoughtAt?.getTime() ?? 0
+ const bLastBoughtAt = b.userLastBoughtAt?.getTime() ?? 0
+ if (aLastBoughtAt !== bLastBoughtAt) {
+ return bLastBoughtAt - aLastBoughtAt
+ }
+ return nameComparison
+ }
+ })
const selectedCategoriesCount = Object.values(displayCategories).filter(Boolean).length
const allCategoriesSelected = selectedCategoriesCount === allRelevantCategories?.length
@@ -91,13 +147,14 @@ const BuyPage: NextPage = () => {
{/* Search and Filter Section */}
- {/* Search Bar */}
-
+
+
- {/* Results Summary */}
-
- {displayedItems ? (
-
- {displayedItems.length} Produkt{displayedItems.length !== 1 ? "e" : ""} gefunden
-
- ) : (
- Lade...
- )}
+
+
+
+
+
+
+
+
+
+
+
+ {displayedItems ? (
+
+ {displayedItems.length} Produkt{displayedItems.length !== 1 ? "e" : ""} gefunden
+
+ ) : (
+ Lade...
+ )}
+
@@ -136,7 +213,7 @@ const BuyPage: NextPage = () => {
-
+
-
+
{allRelevantCategories?.filter(i => i.is_active).map((category) => {
const isSelected = displayCategories[category.id] === true
const itemCount = category.items.filter(item => !item.for_grouporders && item.is_active).length
-
+
return (
|