OK-683 käytetään nuqsia myös sivutusparametrien handlauksee, OphButto…

…n-komponentti sivutuslinkkiin, poistettu custom hook

viestinvalitys-raportointi/src/app/LahetyksetSivutus.tsx

@@ -1,29 +1,31 @@
 'use client';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import { Button } from '@mui/material';
-import Link from 'next/link';
 import { useTranslations } from 'next-intl';
-import useQueryParams from './hooks/useQueryParams';
+import { NUQS_DEFAULT_OPTIONS } from './lib/constants';
+import { useQueryState } from 'nuqs';
+import { OphButton } from '@opetushallitus/oph-design-system';
 
 const LahetyksetSivutus = ({
-  seuraavatAlkaen,
+  sivutusAlkaenParam,
 }: {
-  seuraavatAlkaen?: string;
+  sivutusAlkaenParam?: string;
 }) => {
-  const { createQueryString } = useQueryParams();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [seuraavatAlkaen, setSeuraavatAlkaen] = useQueryState(
+    'seuraavatAlkaen',
+    NUQS_DEFAULT_OPTIONS,
+  );
   const t = useTranslations();
-  return seuraavatAlkaen ? (
-
-    <Button
-      component={Link}
-      href={'/?' + createQueryString('seuraavatAlkaen', seuraavatAlkaen)}
+  return sivutusAlkaenParam ? (
+    <OphButton
+      variant="text"
+      onClick={() => setSeuraavatAlkaen(sivutusAlkaenParam ?? null)}
       aria-label={t('yleinen.sivutus.seuraavat')}
       size="large"
       endIcon={<ChevronRightIcon />}
-      prefetch={false}
     >
       {t('yleinen.sivutus.seuraavat')}
-    </Button>
+    </OphButton>
   ) : (
     <></>
   );

viestinvalitys-raportointi/src/app/lahetys/[tunniste]/VastaanottajatSivutus.tsx

@@ -1,40 +1,35 @@
 'use client';
-import { usePathname } from 'next/navigation';
-import Link from 'next/link';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import { Button } from '@mui/material';
-import useQueryParams from '@/app/hooks/useQueryParams';
 import { useTranslations } from 'next-intl';
+import { useQueryState } from 'nuqs';
+import { NUQS_DEFAULT_OPTIONS } from '@/app/lib/constants';
+import { OphButton } from '@opetushallitus/oph-design-system';
 
 const VastaanottajatSivutus = ({
-  seuraavatAlkaen,
+  sivutusAlkaenParam,
 }: {
-  seuraavatAlkaen?: string;
+  sivutusAlkaenParam?: string;
 }) => {
-  const pathname = usePathname();
-  const { createQueryStrings } = useQueryParams();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [alkaen, setAlkaen] = useQueryState(
+    'alkaen',
+    NUQS_DEFAULT_OPTIONS,
+  );
   const t = useTranslations();
-
-  return seuraavatAlkaen ? (
-    <Button
-      component={Link}
-      href={
-        pathname +
-        '/?' +
-        createQueryStrings([
-          { name: 'alkaen', value: seuraavatAlkaen },
-        ])
-      }
+  return sivutusAlkaenParam ? (
+    <OphButton
+      variant="text"
+      onClick={() => setAlkaen(sivutusAlkaenParam ?? null)}
       aria-label={t('yleinen.sivutus.seuraavat')}
       size="large"
       endIcon={<ChevronRightIcon />}
-      prefetch={false}
     >
       {t('yleinen.sivutus.seuraavat')}
-    </Button>
+    </OphButton>
   ) : (
     <></>
   );
+
 };
 
 export default VastaanottajatSivutus;

viestinvalitys-raportointi/src/app/lahetys/[tunniste]/page.tsx

@@ -184,7 +184,7 @@ const LahetysView = async ({
                 onMassaviesti={onMassaviesti}
               />
               <VastaanottajatSivutus
-                seuraavatAlkaen={data.seuraavatAlkaen}
+                sivutusAlkaenParam={data.seuraavatAlkaen}
               />
             </>
           ) : (

viestinvalitys-raportointi/src/app/page.tsx

@@ -32,7 +32,7 @@ const Lahetykset = async () => {
         ) : (
           <NoResults text={t('lahetykset.haku.eituloksia')} />
         )}
-      <LahetyksetSivutus seuraavatAlkaen={data.seuraavatAlkaen} />
+      <LahetyksetSivutus sivutusAlkaenParam={data.seuraavatAlkaen} />
     </>
   );
 };