Merge pull request #1343 from navikt/Skriv-ut-aktivitetsplan-telefon

Skriv ut aktivitetsplan telefon skal ikke vises

Author: erikbosnes

src/moduler/verktoylinje/Navigasjonslinje.tsx

@@ -3,7 +3,6 @@ import { isAfter } from 'date-fns';
 import React, { useEffect } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import { Link as ReactRouterLink } from 'react-router-dom';
-
 import { fetchSistOppdatert } from '../../api/dialogAPI';
 import { ARBEIDSRETTET_DIALOG_URL, ER_PROD, MINSIDE_URL } from '../../constant';
 import useAppDispatch from '../../felles-komponenter/hooks/useAppDispatch';
@@ -14,6 +13,7 @@ import { hentDialoger } from '../dialog/dialog-slice';
 import { selectCanPrint } from '../feilmelding/feil-selector';
 import { logKlikkKnapp } from '../../amplitude/amplitude';
 import { selectValgtPeriodeId } from '../filtrering/filter/valgt-periode-slice';
+import { useMediaQuery } from '../../utils/use-media-query';
 
 function Navigasjonslinje() {
     const erVeileder = useErVeileder();
@@ -44,6 +44,7 @@ function Navigasjonslinje() {
     }, [dispatch, erVeileder, sistOppdatert]);
 
     const canPrint = useSelector(selectCanPrint);
+    const isMobile = useMediaQuery('(max-width: 768px)');
 
     function handleClick() {
         loggEvent(APNE_OM_TJENESTEN);
@@ -69,7 +70,7 @@ function Navigasjonslinje() {
                     Hva er aktivitetsplanen?
                 </ReactRouterLink>
                 {canPrint && (
-                    <ReactRouterLink to="utskrift" className="text-text-action underline hover:no-underline">
+                    <ReactRouterLink hidden={isMobile} to="utskrift" className="text-text-action underline hover:no-underline">
                         Skriv ut
                     </ReactRouterLink>
                 )}

src/setupTests.jsx

@@ -4,6 +4,7 @@ import.meta.env.VITE_API_URL_BASE = 'http://localhost:3000'; // Dette er det som
 
 HTMLDialogElement.prototype.showModal = () => {};
 window.IntersectionObserver = vi.fn();
+window.matchMedia = ()  => ({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
 // Mocked because react-dnd uses es6 import and have to be transpiled to work in these tests
 vi.mock('react-dnd', () => ({
     useDrag: () => {

src/utils/use-media-query.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+export function useMediaQuery(query: string) {
+    const [value, setValue] = React.useState(false)
+
+    React.useEffect(() => {
+        function onChange(event: MediaQueryListEvent) {
+            setValue(event.matches)
+        }
+
+        const result = matchMedia(query)
+        result.addEventListener("change", onChange)
+        setValue(result.matches)
+
+        return () => result.removeEventListener("change", onChange)
+    }, [query])
+
+    return value
+}