From cdf0a05981ba737a90925dcfaf43b7d71635b528 Mon Sep 17 00:00:00 2001
From: Matthias Luger <malua007@live.de>
Date: Sat, 20 Jul 2024 13:39:56 +0200
Subject: [PATCH] store flip tracking filter in url

---
 components/FlipTracking/FlipTracking.tsx | 16 +++++++++++++---
 utils/Hooks.tsx                          | 24 ++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/components/FlipTracking/FlipTracking.tsx b/components/FlipTracking/FlipTracking.tsx
index f4beaddc..5c4216a4 100644
--- a/components/FlipTracking/FlipTracking.tsx
+++ b/components/FlipTracking/FlipTracking.tsx
@@ -4,7 +4,7 @@ import Image from 'next/image'
 import { ChangeEvent, useEffect, useState } from 'react'
 import { Form, ListGroup } from 'react-bootstrap'
 import { Item, Menu, useContextMenu } from 'react-contexify'
-import { useForceUpdate, useWasAlreadyLoggedIn } from '../../utils/Hooks'
+import { useForceUpdate, useQueryParamState, useWasAlreadyLoggedIn } from '../../utils/Hooks'
 import { getSettingsObject, IGNORE_FLIP_TRACKING_PROFIT, setSetting } from '../../utils/SettingsUtils'
 import { isClientSideRendering } from '../../utils/SSRUtils'
 import styles from './FlipTracking.module.css'
@@ -85,8 +85,6 @@ const TRACKED_FLIP_CONTEXT_MENU_ID = 'tracked-flip-context-menu'
 
 export function FlipTracking(props: Props) {
     let [trackedFlips, setTrackedFlips] = useState<FlipTrackingFlip[]>(props.trackedFlips || [])
-    let [orderBy, setOrderBy] = useState<SortOption>(SORT_OPTIONS[0])
-    let [filterBy, setFilterBy] = useState(FILTER_OPTIONS[0])
     let [ignoreProfitMap, setIgnoreProfitMap] = useState(getSettingsObject(IGNORE_FLIP_TRACKING_PROFIT, {}))
     let [rangeStartDate, setRangeStartDate] = useState(new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 7))
     let [rangeEndDate, setRangeEndDate] = useState(new Date())
@@ -97,6 +95,18 @@ export function FlipTracking(props: Props) {
     let wasAlreadyLoggedIn = useWasAlreadyLoggedIn()
     let forceUpdate = useForceUpdate()
 
+    let [_orderBy, _setOrderBy] = useQueryParamState<string>('order', SORT_OPTIONS[0].value)
+    let [_filterBy, _setFilterBy] = useQueryParamState<string>('filter', FILTER_OPTIONS[0].value)
+
+    let orderBy = SORT_OPTIONS.find(o => o.value === _orderBy)!
+    let filterBy = FILTER_OPTIONS.find(f => f.value === _filterBy)!
+    let setOrderBy = (newValue: SortOption) => {
+        _setOrderBy(newValue.value)
+    }
+    let setFilterBy = (newValue: FilterOption) => {
+        _setFilterBy(newValue.value)
+    }
+
     const { show } = useContextMenu({
         id: TRACKED_FLIP_CONTEXT_MENU_ID
     })
diff --git a/utils/Hooks.tsx b/utils/Hooks.tsx
index e5714de4..44caf3b9 100644
--- a/utils/Hooks.tsx
+++ b/utils/Hooks.tsx
@@ -3,6 +3,8 @@ import api from '../api/ApiHelper'
 import { CUSTOM_EVENTS } from '../api/ApiTypes.d'
 import { getCurrentCoflCoins, subscribeToCoflcoinChange } from './CoflCoinsUtils'
 import { isClientSideRendering } from './SSRUtils'
+import { getURLSearchParam } from './Parser/URLParser'
+import { useRouter } from 'next/navigation'
 
 export function useForceUpdate() {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -129,3 +131,25 @@ export function useStateWithRef<T>(defaultValue: T): [T, Dispatch<SetStateAction
 
     return [state, setState, stateRef]
 }
+
+export function useQueryParamState<T>(key: string, defaultValue: T): [T, Dispatch<SetStateAction<T>>] {
+    const [state, setState] = useState<T>(getDefaultValue() || defaultValue)
+    const router = useRouter()
+
+    function getDefaultValue(): T | undefined {
+        let param = getURLSearchParam(key)
+        if (!param) {
+            return undefined
+        }
+        return JSON.parse(decodeURIComponent(param)) as T
+    }
+
+    function _setState(newState: T) {
+        setState(newState)
+        let urlparams = new URLSearchParams(window.location.search)
+        urlparams.set(key, encodeURIComponent(JSON.stringify(newState)))
+        router.replace(`${window.location.pathname}?${urlparams.toString()}`)
+    }
+
+    return [state, _setState]
+}