imports/ui/BarraNav/UserStat.jsx

@@ -1,5 +1,5 @@
 import { Meteor } from 'meteor/meteor';
-import React, {useState, useRef, useEffect, Suspense} from 'react';
+import React, {useState, useEffect, Suspense} from 'react';
 import { useTracker, useFind } from 'meteor/react-meteor-data/suspense';
 
 // import { FilesCol } from '/imports/api/files.js';
@@ -28,89 +28,13 @@ const IndicadorMissatges = ({notif}) => {
   </span>;
 };
 
-const useLongPress = (mostraMenu, setMostraMenu) => {
-  const [isPressed, setIsPressed] = useState(false);
-  const [startTime, setStartTime] = useState(0);
-  const [hasLongPressed, setHasLongPressed] = useState(false);
-
-  const targetRef = useRef(null);
-
-
-  const onPointerDown = (e) => {
-    if (!isPressed) {
-      setIsPressed(true);
-      setStartTime(Date.now());
-    }
-  };
-
-  const onPointerUp = () => {
-    if (isPressed) {
-      setIsPressed(false);
-      // Clear any pending timeout
-      clearTimeout(timeoutId?.current);
-    }
-  };
-
-  const onPointerMove = () => {
-    if (!isPressed) return;
-    // Check pointer position changes and update state if needed
-    // You can implement your own logic here to detect movement
-  };
-
-  useEffect(() => {
-    let timeoutId = undefined;
-
-    if (isPressed) {
-      timeoutId = setTimeout(() => {
-        const duration = Date.now() - startTime;
-        if (duration >= 500 && isPressed) {
-          setHasLongPressed(true);
-          setMostraMenu(true);
-          
-        }
-      }, 500);
-    }
-
-    return () => clearTimeout(timeoutId);
-  }, [isPressed]);
-
-  useEffect(() => {
-    const handleDocumentClick = (e) => {
-      if (targetRef.current && !targetRef.current.contains(e.target)) {
-        setHasLongPressed(false);
-        setIsPressed(false);
-        setMostraMenu(false);
-      }
-    };
-
-    document.addEventListener('click', handleDocumentClick);
-    document.addEventListener('touchstart', handleDocumentClick);
-    document.addEventListener('pointerdown', handleDocumentClick);
-
-    return () => {
-      document.removeEventListener('click', handleDocumentClick);
-      document.removeEventListener('touchstart', handleDocumentClick);
-      document.removeEventListener('pointerdown', handleDocumentClick);
-    };
-  }, [targetRef]);
-
-  return {
-    hasLongPressed,
-    setHasLongPressed,
-    onPointerDown,
-    onPointerUp,
-    onPointerMove,
-    targetRef
-  };
-};
-
-
 const UserStat = ({esAdministrador, setEsAdministrador}) => {
-  
+
   // const [esAdministrador, setEsAdministrador] = useState(false);
-  
-  const [mostraMenu, setMostraMenu] = useState(false);
-  const { hasLongPressed, setHasLongPressed, onPointerDown, onPointerUp, onPointerMove, targetRef } = useLongPress(mostraMenu, setMostraMenu);
+
+  const { onPointerDown, onPointerUp, onPointerCancel, onPointerOut } = useLongTap(() => {
+    alert('Long tap detected!');
+  });
 
   const u = useTracker("user", async () => await Meteor.userAsync());
   const userId = Meteor.userId();
@@ -139,19 +63,13 @@ const UserStat = ({esAdministrador, setEsAdministrador}) => {
 
 // const uname = useTracker(() => Meteor.user({ fields: { 'username': 1 } })?.username );
   
+  const [mostraMenu, setMostraMenu] = useState(false);
 
   //const avatarLink = u.avatarLink;
 
   // alert("avLnk: ", u.profile.avatarLink);
-
-
-  // if (hasLongPressed) {
-  //   setMostraMenu(true);
-  // }
   
   return <Suspense fallback="Carregant...">
-
-    
     <div
       style={{
         // color: `lightblue`,
@@ -170,13 +88,6 @@ const UserStat = ({esAdministrador, setEsAdministrador}) => {
       // onMouseEnter={ev => {
       //   setMostraMenu(true);
       // }}
-
-      onPointerDown={onPointerDown}
-      onPointerUp={onPointerUp}
-      onPointerMove={onPointerMove}
-      
-      ref={targetRef}
-      
     
       // // title="Logout"
 
@@ -190,13 +101,11 @@ const UserStat = ({esAdministrador, setEsAdministrador}) => {
 
       // }}
 
-      
-      // onPointerCancel={onPointerCancel}
-      // onPointerOut={onPointerOut}
+      onPointerDown={onPointerDown}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerCancel}
+      onPointerOut={onPointerOut}
     >
-      {/* <span onClick={() => setHasLongPressed(!hasLongPressed)}>
-      {hasLongPressed ? 'Yes!' : 'No'}
-      </span> */}
       { (u && esAdministrador) && <div style={{
           color: `red`,
           fontSize: `xx-small`,

imports/ui/Login.tsx

@@ -55,13 +55,6 @@ export const Login = () => {
   if (isLogin) {
     return <form
       onSubmit={handleLogin}
-      style={{
-        border: `2px solid #cccc`,
-        padding: `.8rem`,
-        borderRadius: `.5em`,
-        display: `inline-block`,
-        backgroundColor: `#eeed`
-      }}
     >
       <label htmlFor="email">Correu electrònic o nom d'usuari: </label>
       <input id="email" type="email" required />
@@ -154,32 +147,7 @@ export const Login = () => {
           // ;
         
       }}
-
-      style={{
-        border: `2px solid #cccc`,
-        padding: `.8rem`,
-        borderRadius: `.5em`,
-        display: `inline-block`,
-        backgroundColor: `#eeed`
-      }}
     >
-      Avatar: <img
-        style={{
-          width: `3em`,
-          height: `3em`,
-          borderRadius: `50%`,
-          overflow: `hidden`,
-          verticalAlign: `middle`,
-          margin: `.3em`,
-          border: `solid 4px whitesmoke`
-        }}
-        // src={u?.profile?.avatarLink}
-
-        onClick={ev => {
-          
-        }}
-      />
-      <br />
       <label htmlFor="username">Nom d'usuari: </label>
       <input id="username" name="username" type="text" required />
       <br />