From 1613e3390c7f2fe9b712f8a6184218ccc05e8891 Mon Sep 17 00:00:00 2001 From: Marja Kari Date: Fri, 8 Nov 2024 10:18:52 +0200 Subject: [PATCH] =?UTF-8?q?OK-683=20k=C3=A4ytet=C3=A4=C3=A4n=20nuqsia=20my?= =?UTF-8?q?=C3=B6s=20sivutusparametrien=20handlauksee,=20OphButton-kompone?= =?UTF-8?q?ntti=20sivutuslinkkiin,=20poistettu=20custom=20hook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/LahetyksetSivutus.tsx | 28 +++++----- .../src/app/hooks/useQueryParams.ts | 56 ------------------- .../[tunniste]/VastaanottajatSivutus.tsx | 37 ++++++------ .../src/app/lahetys/[tunniste]/page.tsx | 2 +- viestinvalitys-raportointi/src/app/page.tsx | 2 +- 5 files changed, 33 insertions(+), 92 deletions(-) delete mode 100644 viestinvalitys-raportointi/src/app/hooks/useQueryParams.ts diff --git a/viestinvalitys-raportointi/src/app/LahetyksetSivutus.tsx b/viestinvalitys-raportointi/src/app/LahetyksetSivutus.tsx index 3ebb8ea8..a310cdab 100644 --- a/viestinvalitys-raportointi/src/app/LahetyksetSivutus.tsx +++ b/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 ? ( - - + ) : ( <> ); diff --git a/viestinvalitys-raportointi/src/app/hooks/useQueryParams.ts b/viestinvalitys-raportointi/src/app/hooks/useQueryParams.ts deleted file mode 100644 index 9ff15b98..00000000 --- a/viestinvalitys-raportointi/src/app/hooks/useQueryParams.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { usePathname, useRouter, useSearchParams } from 'next/navigation'; -import { useCallback } from 'react'; - -export default function useQueryParams() { - const searchParams = useSearchParams(); - const router = useRouter(); - const pathname = usePathname(); - - type UrlParam = { - name: string; - value: string; - }; - - const createQueryStrings = useCallback( - (newparams: UrlParam[]) => { - const params = new URLSearchParams(searchParams?.toString() ?? ''); - newparams.map((p) => params.set(p.name, p.value)); - - return params.toString(); - }, - [searchParams], - ); - const createQueryString = useCallback( - (name: string, value: string) => { - const params = new URLSearchParams(searchParams); - params.set(name, value); - return params.toString(); - }, - [searchParams], - ); - - const removeQueryString = useCallback( - (name: string) => { - const params = new URLSearchParams(searchParams); - params.delete(name); - return params.toString(); - }, - [searchParams], - ); - - const setQueryParam = (queryName: string, value: string) => { - router.push(`${pathname}?${createQueryString(queryName, value)}`); - }; - - const removeQueryParam = (queryName: string) => { - router.push(`${pathname}?${removeQueryString(queryName)}`); - }; - - return { - queryParams: searchParams, - createQueryString, - createQueryStrings, - removeQueryParam, - setQueryParam, - }; -} diff --git a/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/VastaanottajatSivutus.tsx b/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/VastaanottajatSivutus.tsx index 508f3e5d..149168e5 100644 --- a/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/VastaanottajatSivutus.tsx +++ b/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 ? ( - + ) : ( <> ); + }; export default VastaanottajatSivutus; diff --git a/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/page.tsx b/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/page.tsx index ede46020..8329f2d2 100644 --- a/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/page.tsx +++ b/viestinvalitys-raportointi/src/app/lahetys/[tunniste]/page.tsx @@ -184,7 +184,7 @@ const LahetysView = async ({ onMassaviesti={onMassaviesti} /> ) : ( diff --git a/viestinvalitys-raportointi/src/app/page.tsx b/viestinvalitys-raportointi/src/app/page.tsx index 5d3fab70..8ac3dcac 100644 --- a/viestinvalitys-raportointi/src/app/page.tsx +++ b/viestinvalitys-raportointi/src/app/page.tsx @@ -32,7 +32,7 @@ const Lahetykset = async () => { ) : ( )} - + ); };