Merge pull request #66 from Opetushallitus/OK-746-esiparannuksia-refa…

…ktorointeja

OK-746: Esiparannuksia ja refaktorointeja

package.json

@@ -30,9 +30,9 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^6.2.1",
-    "@mui/material": "^6.2.1",
-    "@mui/material-nextjs": "^6.2.1",
+    "@mui/icons-material": "^6.4.0",
+    "@mui/material": "^6.4.0",
+    "@mui/material-nextjs": "^6.3.1",
     "@opetushallitus/oph-design-system": "github:opetushallitus/oph-design-system#v0.1.8",
     "@tanstack/react-query": "^5.62.8",
     "@tanstack/react-query-devtools": "^5.62.8",

src/app/components/action-bar.tsx

@@ -18,7 +18,7 @@ export const Button = withDefaultProps(
     },
   })),
   { variant: 'text' },
-);
+) as typeof OphButton;
 
 export const Container = styled(Box)(({ theme }) => ({
   display: 'flex',

src/app/components/file-download-button.tsx

@@ -0,0 +1,50 @@
+import { FileResult } from '@/app/lib/http-client';
+import useToaster from '@/app/hooks/useToaster';
+import { useFileDownloadMutation } from '../hooks/useFileDownloadMutation';
+import { FileDownloadOutlined } from '@mui/icons-material';
+import { OphButton } from '@opetushallitus/oph-design-system';
+import { ButtonProps } from '@mui/material';
+
+type FileDownloadProps = {
+  component?: typeof OphButton;
+  icon?: React.ReactNode;
+  getFile: () => Promise<FileResult>;
+  children: React.ReactNode;
+  defaultFileName: string;
+  errorKey: string;
+  errorMessage: string;
+} & Omit<ButtonProps, 'onClick' | 'loading'>;
+
+export function FileDownloadButton({
+  defaultFileName,
+  children,
+  getFile,
+  errorKey,
+  errorMessage,
+  startIcon,
+  ...props
+}: FileDownloadProps) {
+  const { addToast } = useToaster();
+  const mutation = useFileDownloadMutation({
+    onError: () => {
+      addToast({
+        key: errorKey,
+        message: errorMessage,
+        type: 'error',
+      });
+    },
+    getFile,
+    defaultFileName,
+  });
+
+  return (
+    <OphButton
+      startIcon={startIcon ?? <FileDownloadOutlined />}
+      loading={mutation.isPending}
+      onClick={() => mutation.mutate()}
+      {...props}
+    >
+      {children}
+    </OphButton>
+  );
+}

src/app/components/localized-select.tsx

@@ -9,6 +9,7 @@ export const LocalizedSelect = (
   return (
     <OphSelect
       inputProps={{ 'aria-label': t('yleinen.valitsevaihtoehto') }}
+      MenuProps={{ id: 'select-menu' }}
       placeholder={t('yleinen.valitse')}
       {...props}
     />

src/app/haku/[oid]/hakukohde/[hakukohde]/harkinnanvaraiset/components/harkinnanvaraiset-action-bar.tsx

@@ -7,34 +7,10 @@ import {
   NoteOutlined,
 } from '@mui/icons-material';
 import { ActionBar } from '@/app/components/action-bar';
-import { useMutation } from '@tanstack/react-query';
-import useToaster from '@/app/hooks/useToaster';
-import { DownloadButton } from '@/app/components/download-button';
 import { getOsoitetarratHakemuksille } from '@/app/lib/valintalaskentakoostepalvelu';
-import { downloadBlob } from '@/app/lib/common';
 import { HarkinnanvaraisetTilatByHakemusOids } from '@/app/lib/types/harkinnanvaraiset-types';
-
-const useOsoitetarratMutation = ({ selection }: { selection: Set<string> }) => {
-  const { addToast } = useToaster();
-
-  return useMutation({
-    mutationFn: async () => {
-      const { fileName, blob } = await getOsoitetarratHakemuksille({
-        tag: 'harkinnanvaraiset',
-        hakemusOids: Array.from(selection),
-      });
-      downloadBlob(fileName ?? 'osoitetarrat.pdf', blob);
-    },
-    onError: (e) => {
-      addToast({
-        key: 'get-osoitetarrat',
-        message: 'harkinnanvaraiset.virhe-osoitetarrat',
-        type: 'error',
-      });
-      console.error(e);
-    },
-  });
-};
+import { FileDownloadButton } from '@/app/components/file-download-button';
+import { useCallback } from 'react';
 
 const HyvaksyValitutButton = ({
   selection,
@@ -71,19 +47,27 @@ const OsoitetarratDownloadButton = ({
 }) => {
   const { t } = useTranslation();
 
-  const osoitetarratMutation = useOsoitetarratMutation({
-    selection,
-  });
+  const getFile = useCallback(
+    () =>
+      getOsoitetarratHakemuksille({
+        tag: 'harkinnanvaraiset',
+        hakemusOids: Array.from(selection),
+      }),
+    [selection],
+  );
 
   return (
-    <DownloadButton
-      Component={ActionBar.Button}
+    <FileDownloadButton
+      component={ActionBar.Button}
       disabled={selection.size === 0}
-      mutation={osoitetarratMutation}
       startIcon={<NoteOutlined />}
+      defaultFileName="osoitetarrat.pdf"
+      getFile={getFile}
+      errorKey="get-osoitetarrat-error"
+      errorMessage="harkinnanvaraiset.virhe-osoitetarrat"
     >
       {t('harkinnanvaraiset.muodosta-osoitetarrat')}
-    </DownloadButton>
+    </FileDownloadButton>
   );
 };
 

src/app/haku/[oid]/hakukohde/[hakukohde]/pistesyotto/components/pistesyotto-actions.tsx

@@ -1,8 +1,8 @@
 import { useTranslations } from '@/app/hooks/useTranslations';
 import { CircularProgress, Stack } from '@mui/material';
 import { OphButton } from '@opetushallitus/oph-design-system';
-import { ExcelUploadButton } from './pistesyotto-excel-upload-button';
-import { ExcelDownloadButton } from './pistesyotto-excel-download-button';
+import { PistesyottoExcelUploadButton } from './pistesyotto-excel-upload-button';
+import { PistesyottoExcelDownloadButton } from './pistesyotto-excel-download-button';
 
 export const PisteSyottoActions = ({
   hakuOid,
@@ -29,8 +29,8 @@ export const PisteSyottoActions = ({
       {isUpdating && (
         <CircularProgress aria-label={t('valinnanhallinta.lasketaan')} />
       )}
-      <ExcelDownloadButton hakuOid={hakuOid} hakukohdeOid={hakukohdeOid} />
-      <ExcelUploadButton hakuOid={hakuOid} hakukohdeOid={hakukohdeOid} />
+      <PistesyottoExcelDownloadButton hakuOid={hakuOid} hakukohdeOid={hakukohdeOid} />
+      <PistesyottoExcelUploadButton hakuOid={hakuOid} hakukohdeOid={hakukohdeOid} />
     </Stack>
   );
 };