Abans d'actualitzar a Router v7

imports/ui/BarraNav/UserStat.jsx

@@ -10,6 +10,7 @@ import { Roles } from 'meteor/roles';
 // import { groupBy } from 'lodash';
 
 //import Radium from 'radium';
+import { useLongTap } from '../hooks';
 
 
 const IndicadorMissatges = ({notif}) => {
@@ -31,6 +32,10 @@ const UserStat = ({esAdministrador, setEsAdministrador}) => {
 
   // const [esAdministrador, setEsAdministrador] = useState(false);
 
+  const { onPointerDown, onPointerUp, onPointerCancel, onPointerOut } = useLongTap(() => {
+    alert('Long tap detected!');
+  });
+
   const u = useTracker("user", async () => await Meteor.userAsync());
   const userId = Meteor.userId();
 
@@ -80,21 +85,26 @@ const UserStat = ({esAdministrador, setEsAdministrador}) => {
         fontWeight: `bold`,
         display: `inline-block`
       }}
-      onMouseEnter={ev => {
+      // onMouseEnter={ev => {
-        setMostraMenu(true);
+      //   setMostraMenu(true);
-      }}
+      // }}
     
-      // title="Logout"
+      // // title="Logout"
 
-      onClick={ev => {
+      // onClick={ev => {
-        ev.stopPropagation();
+      //   ev.stopPropagation();
-        ev.preventDefault();
+      //   ev.preventDefault();
 
-        // console.log("u: ", u);
+      //   // console.log("u: ", u);
 
-        navigate(`/${u.username}`);
+      //   navigate(`/${u.username}`);
 
-      }}
+      // }}
+
+      onPointerDown={onPointerDown}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerCancel}
+      onPointerOut={onPointerOut}
     >
       { (u && esAdministrador) && <div style={{
           color: `red`,

imports/ui/Usuaris.jsx

@@ -5,9 +5,6 @@ import { useSubscribe, useTracker, useFind } from 'meteor/react-meteor-data/susp
 
 import { Roles } from 'meteor/roles';
 // import { useUserId } from 'meteor/react-meteor-accounts';
-import { BarraNav } from "./BarraNav/BarraNav";
-
-
 
 
 export const Usuaris = () => {

imports/ui/hooks.jsx

@@ -0,0 +1,46 @@
+import { useState, useEffect } from 'react';
+
+const useLongTap = (onLongTap, duration = 500) => {
+  const [isPressing, setIsPressing] = useState(false);
+  const [startTime, setStartTime] = useState(null);
+
+  useEffect(() => {
+    if (isPressing && startTime) {
+      const elapsedTime = performance.now() - startTime;
+      if (elapsedTime >= duration) {
+        onLongTap();
+        setIsPressing(false);
+        setStartTime(null);
+      }
+    }
+  }, [isPressing, startTime, onLongTap, duration]);
+
+  const handlePointerDown = (event) => {
+    setIsPressing(true);
+    setStartTime(performance.now());
+  };
+
+  const handlePointerUp = () => {
+    setIsPressing(false);
+    setStartTime(null);
+  };
+
+  const handlePointerCancel = () => {
+    setIsPressing(false);
+    setStartTime(null);
+  };
+
+  const handlePointerOut = () => {
+    setIsPressing(false);
+    setStartTime(null);
+  };
+
+  return {
+    onPointerDown: handlePointerDown,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerCancel,
+    onPointerOut: handlePointerOut,
+  };
+};
+
+export { useLongTap };