Merge pull request #394 from navikt/better-callbacks

OnLinkClick og enhet objekt i onEnhetChanged

Author: LudvigHz

v3/README.md

@@ -61,8 +61,9 @@ export interface DecoratorProps {
   fetchActiveEnhetOnMount?: boolean | undefined; // Om enhet er undefined fra container appen, og denne er satt til true, henter den sist aktiv enhet og bruker denne.
   fetchActiveUserOnMount?: boolean | undefined; // Om fnr er undefined fra container appen, og denne er satt til true for at den skal hente siste aktiv fnr.
   onBeforeRequest?: (headers: HeadersInit) => HeadersInit | undefined; // Her kan headeren til alle nettverkskall bli modifisert før de blir kalt
-  onEnhetChanged: (enhet?: string | null) => void; // Kalles når enheten endres
+  onEnhetChanged: (enhet?: string | null, enhet?: Enhet) => void; // Kalles når enheten endres
   onFnrChanged: (fnr?: string | null) => void; // Kalles når fnr enheten endres
+  onLinkClick?: (link: { text: string; url: string }) => void; // Kan brukes for å legge til callbacks ved klikk på lenker i menyen. Merk at callbacken ikke kan awaites og man må selv håndtere at siden lukkes. Nyttig for å f.eks tracke navigasjon events i amplitude
   appName: string; // Navn på applikasjonen
   hotkeys?: Hotkey[]; // Konfigurasjon av hurtigtaster
   markup?: Markup; // Egen HTML

v3/bun.lockb

@@ -13,8 +13,11 @@ import { useEffect } from 'react';
 import NewUserModal from './components/modals/NewUserModal';
 import NewEnhetModal from './components/modals/NewEnhetModal';
 import { useSyncStore } from './hooks/useSyncStore';
+import useGlobalHandlers from './store/GlobalHandlers';
 
 const App: React.FC<AppProps> = (props: AppProps) => {
+  const { onLinkClick } = props;
+
   useSyncStore(props);
   useSyncAppState(props);
   useSyncHotkeys(props);
@@ -31,6 +34,16 @@ const App: React.FC<AppProps> = (props: AppProps) => {
     useAppState.setState({ open: false }),
   );
 
+  const setHandler = useGlobalHandlers((state) => state.setHandler);
+
+  useEffect(() => {
+    if (onLinkClick) {
+      setHandler('onLinkClick', (linkText, url) =>
+        onLinkClick({ text: linkText, url }),
+      );
+    }
+  }, [setHandler, onLinkClick]);
+
   return (
     <>
       <div className="dekorator" data-theme="internarbeidsflatedecorator-theme">

v3/packages/internarbeidsflate-decorator-v3/src/App.tsx

@@ -1,8 +1,9 @@
 import { Link } from '@navikt/ds-react';
-import React, { PropsWithChildren, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { useAppState } from '../../states/AppState';
 import { LinkSection, LinkSections, generateLinks } from './generateLinks';
 import StoreHandler from '../../store/StoreHandler';
+import useGlobalHandlers from '../../store/GlobalHandlers';
 
 const Links: React.FC = () => {
   const { fnr, enhet } = StoreHandler.store((state) => ({
@@ -42,9 +43,12 @@ const Column: React.FC<{ linkSection: LinkSection }> = ({ linkSection }) => {
         {linkSection.links.map((link) => {
           const href = `${link.url}${link.subPath}`;
           return (
-            <LinkComponent key={href} href={href} newPage={linkSection.newPage}>
-              {link.title}
-            </LinkComponent>
+            <LinkComponent
+              key={href}
+              href={href}
+              newPage={linkSection.newPage}
+              linkText={link.title}
+            />
           );
         })}
       </ul>
@@ -62,28 +66,41 @@ const Row: React.FC<{ linkSection: LinkSection }> = ({ linkSection }) => {
         {linkSection.links.map((link) => {
           const href = `${link.url}${link.subPath}`;
           return (
-            <LinkComponent key={href} href={href} newPage={linkSection.newPage}>
-              {link.title}
-            </LinkComponent>
+            <LinkComponent
+              key={href}
+              href={href}
+              newPage={linkSection.newPage}
+              linkText={link.title}
+            />
           );
         })}
       </ul>
     </section>
   );
 };
 
-const LinkComponent: React.FC<
-  PropsWithChildren & { href: string; newPage?: boolean | undefined }
-> = ({ href, children, newPage = false }) => {
+const LinkComponent: React.FC<{
+  href: string;
+  newPage?: boolean | undefined;
+  linkText: string;
+}> = ({ href, linkText, newPage = false }) => {
+  const onLinkClick = useGlobalHandlers((state) => state.onLinkClick);
+
+  const onClick = () => {
+    onLinkClick?.(linkText, href);
+  };
+
   return (
     <li className="dr-block dr-text-white dr-py-1">
       <Link
         href={href}
         rel="nooppener noreferrer"
         target={newPage ? '_blank' : '_self'}
         className="!dr-block !dr-text-white !dr-py-1 !dr-no-underline focus:!dr-outline-none focus:!dr-ring focus:!dr-ring-orange-400 focus:!dr-bg-transparent hover:!dr-text-orange-400 hover:before:!dr-w-2 hover:before:!dr-h-2 hover:before:!-dr-mr-2 hover:before:!dr-bg-orange-400 hover:before:!dr-rounded-full hover:before:!dr-inline-block hover:before:!-dr-left-4 hover:before:!dr-relative hover:before:!dr-mb-[2px] hover:visited:!dr-text-orange-400"
-        children={children}
-      />
+        onClick={onClick}
+      >
+        {linkText}
+      </Link>
     </li>
   );
 };

v3/packages/internarbeidsflate-decorator-v3/src/components/Links/Links.tsx

@@ -14,7 +14,7 @@ export class EnhetValueManager extends ContextValueManager {
   #errorMessageManager: ErrorMessageManager;
   #fnrValueManager: FnrValueManager;
   #propsUpdateHandler: PropsUpdateHandler;
-  #onEnhetChanged?: (newEnhet?: string | null) => void;
+  #onEnhetChanged?: (newEnhet?: string | null, enhetObject?: Enhet) => void;
   constructor(
     substateProps: SubstateHandlerProps,
     errorMessageManager: ErrorMessageManager,
@@ -148,7 +148,7 @@ export class EnhetValueManager extends ContextValueManager {
 
     const enhet = this.#updateEnhet(matchendeEnhet);
     this.setState({ enhet });
-    if (this.#onEnhetChanged) this.#onEnhetChanged(newEnhetId);
+    if (this.#onEnhetChanged) this.#onEnhetChanged(newEnhetId, matchendeEnhet);
   };
 
   readonly changeEnhetLocallyAndExternally = async (

v3/packages/internarbeidsflate-decorator-v3/src/store/EnhetValueManager.ts

@@ -0,0 +1,18 @@
+import { create } from 'zustand';
+
+type GlobalHandlers = {
+  onLinkClick?: (linkText: string, url: string) => void;
+};
+
+type Methods = {
+  setHandler: <T extends keyof GlobalHandlers>(
+    type: T,
+    handler: GlobalHandlers[T],
+  ) => void;
+};
+
+const useGlobalHandlers = create<GlobalHandlers & Methods>((set) => ({
+  setHandler: (key, handler) => set(() => ({ [key]: handler })),
+}));
+
+export default useGlobalHandlers;

v3/packages/internarbeidsflate-decorator-v3/src/store/GlobalHandlers.ts

@@ -1,4 +1,5 @@
 import { AppState } from '../states/AppState';
+import { Enhet } from './Enhet';
 
 interface DomainProps {
   enhet?: string | undefined;
@@ -9,8 +10,9 @@ interface DomainProps {
   fetchActiveEnhetOnMount?: boolean | undefined;
   fetchActiveUserOnMount?: boolean | undefined;
   onBeforeRequest?: (headers: HeadersInit) => HeadersInit | undefined;
-  onEnhetChanged: (enhet?: string | null) => void;
+  onEnhetChanged: (enhet?: string | null, enhetObjekt?: Enhet) => void;
   onFnrChanged: (fnr?: string | null) => void;
+  onLinkClick?: (link: { text: string; url: string }) => void;
 }
 
-export interface AppProps extends DomainProps, Omit<AppState, 'open'> { }
+export interface AppProps extends DomainProps, Omit<AppState, 'open'> {}