fix history not being limited

locales/de.json

@@ -102,7 +102,8 @@
     "title": "Einstellungen",
     "language": "Sprache",
     "history-limit": "Verlaufslimit",
-    "save": "Einstellungen speichern"
+    "save": "Einstellungen speichern",
+    "save-success": "Einstellungen erfolgreich gespeichert!"
   },
   "Presentation": {
     "title": "Präsentation",

locales/en.json

@@ -102,7 +102,8 @@
     "title": "Settings",
     "language": "Language",
     "history-limit": "History Limit",
-    "save": "Save Settings"
+    "save": "Save Settings",
+    "save-success": "Settings saved successfully!"
   },
   "Presentation": {
     "title": "Presentation Selection",

src/app/[locale]/wallet/history/page.tsx

@@ -2,13 +2,14 @@
 
 import Table, { type TableData } from '@/components/table/Table';
 import { useApiData } from '@/service/apiService';
-import type { HistoryData } from '@/service/types';
+import type { DefaultConfig, HistoryData } from '@/service/types';
 import { AppContext } from '@/store/AppContextProvider';
 import { useTranslations } from 'next-intl';
 import { useAuth } from 'oidc-react';
 import { useContext, useEffect, useState } from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
 import css from './history.module.scss';
+import { useQueryClient } from '@tanstack/react-query';
 
 const History = (): JSX.Element => {
   const { userData } = useAuth();
@@ -21,6 +22,7 @@ const History = (): JSX.Element => {
       },
     }
   );
+  const config = useQueryClient().getQueryData<DefaultConfig>(['defaultConfig']);
   const [tableData, setTableData] = useState<TableData>();
   const { setError } = useContext(AppContext);
   const t = useTranslations('History');
@@ -36,9 +38,12 @@ const History = (): JSX.Element => {
 
     setTableData({
       head: Object.keys(historyData[0]),
-      body: historyData.map(({ ...history }) => {
-        return { ...history, id: history.userId };
-      }),
+      body: historyData
+        .map(({ ...history }, i) => {
+          return { ...history, id: `id_${i}` };
+        })
+        .sort((a, b) => (a.timestamp > b.timestamp ? -1 : 1))
+        .slice(0, config?.historyLimit),
     });
   }, [data]);
 

src/app/[locale]/wallet/settings/page.tsx

@@ -3,38 +3,25 @@
 import { Button, Col, Container, Form, FormControl, FormGroup, FormLabel, FormSelect, Row } from 'react-bootstrap';
 import css from './settings.module.scss';
 import Divider from '@/components/divider/Divider';
-import { useLocale, useTranslations } from 'next-intl';
+import { useTranslations } from 'next-intl';
 import { useContext, useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
 import { AppContext } from '@/store/AppContextProvider';
-import { useApiData } from '@/service/apiService';
 import { type DefaultConfig } from '@/service/types';
 import { useAuth } from 'oidc-react';
+import { useQueryClient } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
 
 const Settings = (): JSX.Element => {
   const t = useTranslations('Settings');
-  const router = useRouter();
-  const currentLocale = useLocale();
   const { userData } = useAuth();
-  const { data, error } = useApiData<DefaultConfig>(
-    'defaultConfig',
-    `${process.env.API_URL_ACCOUNT_SERVICE}/configurations/list`,
-    {
-      headers: {
-        Authorization: `Bearer ${userData?.access_token}`,
-      },
-    }
-  );
+  const queryClient = useQueryClient();
+  const data = queryClient.getQueryData<DefaultConfig>(['defaultConfig']);
   const { setError } = useContext(AppContext);
   const [formData, setFormData] = useState<DefaultConfig>({
     historyLimit: 0,
     language: '',
   });
 
-  useEffect(() => {
-    error && setError(error);
-  }, [error]);
-
   useEffect(() => {
     if (data) {
       setFormData(data);
@@ -65,12 +52,9 @@ const Settings = (): JSX.Element => {
         }),
       });
 
-      if (formData.language.toLocaleLowerCase() !== currentLocale) {
-        router.push(`/${formData.language.toLowerCase()}/wallet/settings`);
-        return;
-      }
+      await queryClient.refetchQueries({ queryKey: ['defaultConfig'] });
 
-      router.refresh();
+      toast.success(t('save-success'));
     } catch (error) {
       setError(error as Error);
     }