pre files

imports/ui/BarraNav/UserStat.jsx

@@ -1,5 +1,5 @@
 import { Meteor } from 'meteor/meteor';
-import React, {useState, useEffect, Suspense} from 'react';
+import React, {useState, useRef, useEffect, Suspense} from 'react';
 import { useTracker, useFind } from 'meteor/react-meteor-data/suspense';
 
 // import { FilesCol } from '/imports/api/files.js';
@@ -28,13 +28,89 @@ 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 { onPointerDown, onPointerUp, onPointerCancel, onPointerOut } = useLongTap(() => {
+  const [mostraMenu, setMostraMenu] = useState(false);
-    alert('Long tap detected!');
+  const { hasLongPressed, setHasLongPressed, onPointerDown, onPointerUp, onPointerMove, targetRef } = useLongPress(mostraMenu, setMostraMenu);
-  });
 
   const u = useTracker("user", async () => await Meteor.userAsync());
   const userId = Meteor.userId();
@@ -63,13 +139,19 @@ 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`,
@@ -89,6 +171,13 @@ const UserStat = ({esAdministrador, setEsAdministrador}) => {
       //   setMostraMenu(true);
       // }}
 
+      onPointerDown={onPointerDown}
+      onPointerUp={onPointerUp}
+      onPointerMove={onPointerMove}
+      
+      ref={targetRef}
+      
+    
       // // title="Logout"
 
       // onClick={ev => {
@@ -101,11 +190,13 @@ const UserStat = ({esAdministrador, setEsAdministrador}) => {
 
       // }}
 
-      onPointerDown={onPointerDown}
+      
-      onPointerUp={onPointerUp}
+      // onPointerCancel={onPointerCancel}
-      onPointerCancel={onPointerCancel}
+      // onPointerOut={onPointerOut}
-      onPointerOut={onPointerOut}
     >
+      {/* <span onClick={() => setHasLongPressed(!hasLongPressed)}>
+      {hasLongPressed ? 'Yes!' : 'No'}
+      </span> */}
       { (u && esAdministrador) && <div style={{
           color: `red`,
           fontSize: `xx-small`,

imports/ui/Login.tsx

@@ -55,6 +55,13 @@ 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 />
@@ -147,7 +154,32 @@ 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 />