store settings with react-cookie

package.json

@@ -32,6 +32,7 @@
         "eslint-plugin-react-refresh": "^0.4.5",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
+        "react-cookie": "^7.0.1",
         "react-icons": "^4.12.0",
         "sass": "^1.69.7",
         "ts-jest": "^29.1.1",

src/components/ToggleButton/ToggleButton.scss

@@ -20,8 +20,6 @@ h4 {
 
 .tgl {
     display: none;
-
-    // add default box-sizing for this scope
     &,
     &:after,
     &:before,

src/main.tsx

@@ -1,9 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
+import { CookiesProvider } from 'react-cookie'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <CookiesProvider >
+      <App />
+    </CookiesProvider>
   </React.StrictMode>,
 )

src/pages/Spendings/Spendings.tsx

@@ -6,6 +6,7 @@ import { CurrencyEnum, CurrencyOptionsEnum, TSpendingEntry, TSpendingsListSettin
 import { useQuery } from 'react-query';
 import { extractValidData } from '../../utils/validData';
 import { assembleSpendingUrl } from '../../utils/assembleSpendingUrl';
+import { useCookies } from 'react-cookie';
 
 const spendingURL: string = process.env.VITE_SPENDING_API_URL as string;
 
@@ -24,19 +25,22 @@ const sortSpendingsList = (spendingsList: TSpendingEntry[], sortOrder: TSpending
     });
 };
 
-const defaultSettings: TSpendingsListSettings = {
-    sortOrder: '-spent_at',
-    currencyFilter: CurrencyOptionsEnum.ALL,
-    clientSideSortAndFilter: false,
-};
+
 
 const Spendings: React.FC = () => {
 
+    const [cookies, setCookie] = useCookies<keyof TSpendingsListSettings>(['currencyFilter', 'sortOrder', 'clientSideSortAndFilter']);
 
+    const defaultSettings: TSpendingsListSettings = {
+        sortOrder: cookies.sortOrder || '-spent_at',
+        currencyFilter: cookies.currencyFilter || CurrencyOptionsEnum.ALL,
+        clientSideSortAndFilter: cookies.clientSideSortAndFilter || false,
+    };
     const [listSettings, setListSettings] = useState<TSpendingsListSettings>(defaultSettings);
 
     const assembledURL = assembleSpendingUrl(listSettings, spendingURL);
 
+
     const { data, isError, isLoading, refetch } = useQuery(['spendings', listSettings.sortOrder, listSettings.currencyFilter], () => {
         return fetch(assembledURL)
             .then((response) => {
@@ -50,6 +54,10 @@ const Spendings: React.FC = () => {
 
     const handleSettingsChange = (newListSettings: Partial<TSpendingsListSettings>) => {
         setListSettings((previousState) => ({ ...previousState, ...newListSettings }));
+        setCookie('currencyFilter', newListSettings.currencyFilter ?? cookies.currencyFilter);
+        setCookie('sortOrder', newListSettings.sortOrder ?? cookies.sortOrder);
+        setCookie('clientSideSortAndFilter', newListSettings.clientSideSortAndFilter ?? cookies.clientSideSortAndFilter);
+
     }
 
     const triggerRefetch = () => {