Persist user interactions (#7)

* persist all user interactions

* move localstorage logic to custom hook

* hook rewrite

features/strategies/components/Buy.tsx

@@ -1,16 +1,15 @@
 'use client'
 
-import { useState } from 'react'
 import { useDebounce } from 'use-debounce'
 import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
 import { usePrices } from '@/features/prices'
 import { getTokenBySymbol } from '@/lib'
-import { FormAmount, Result } from '@/features/strategies'
+import { FormAmount, Result, usePersistentState } from '@/features/strategies'
 import stylesShared from '@/features/strategies/styles/shared.module.css'
 
 export function Buy() {
   const { prices, isValidating, isLoading } = usePrices()
-  const [amount, setAmount] = useState(100)
+  const [amount, setAmount] = usePersistentState('buyAmount', 100)
   const [debouncedAmount] = useDebounce(amount, 500)
 
   return (

features/strategies/components/Swap/Swap.tsx

@@ -1,17 +1,24 @@
 'use client'
 
-import { useState } from 'react'
 import { useDebounce } from 'use-debounce'
 import { SwapResults } from './Results'
 import { TokenSymbol } from '@/types'
-import { type Market, FormAmount, FormMarket } from '@/features/strategies'
+import {
+  type Market,
+  FormAmount,
+  FormMarket,
+  usePersistentState
+} from '@/features/strategies'
 import stylesShared from '@/features/strategies/styles/shared.module.css'
 
 export function Swap() {
-  const [amount, setAmount] = useState(100)
+  const [amount, setAmount] = usePersistentState('swapAmount', 100)
   const [debouncedAmount] = useDebounce(amount, 500)
-  const [tokenSymbol, setTokenSymbol] = useState<TokenSymbol>('OCEAN')
-  const [market, setMarket] = useState<Market>('all')
+  const [tokenSymbol, setTokenSymbol] = usePersistentState<TokenSymbol>(
+    'swapTokenSymbol',
+    'OCEAN'
+  )
+  const [market, setMarket] = usePersistentState<Market>('swapMarket', 'all')
 
   return (
     <div className={stylesShared.results}>

features/strategies/hooks/index.tsx

@@ -1 +1,2 @@
 export * from './use-quote'
+export * from './use-persistent-state'

features/strategies/hooks/use-persistent-state.ts

@@ -0,0 +1,36 @@
+'use client'
+
+import { useState, useEffect, Dispatch, SetStateAction } from 'react'
+
+function parse(value: string) {
+  try {
+    return JSON.parse(value)
+  } catch {
+    return value
+  }
+}
+
+export function usePersistentState<T>(
+  key: string,
+  initialState?: T | (() => T)
+): [T, Dispatch<SetStateAction<T>>] {
+  const [state, setState] = useState<T>(initialState as T)
+
+  function changeValue(state: SetStateAction<T>) {
+    setState(state)
+    localStorage.setItem(key, JSON.stringify(state))
+  }
+
+  useEffect(() => {
+    const stored = localStorage.getItem(key)
+
+    if (!stored) {
+      setState(initialState as T)
+      localStorage.setItem(key, JSON.stringify(initialState))
+    } else {
+      setState(parse(stored))
+    }
+  }, [initialState, key])
+
+  return [state, changeValue]
+}