Fixed the friends panel double toggling on mobile

ProLoser · Oct 9, 2024 · 1eabee5 · 1eabee5
1 parent a649a4d
commit 1eabee5
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 47 deletions.
diff --git a/src/Avatar.tsx b/src/Avatar.tsx
@@ -3,9 +3,8 @@ import './Avatar.css';
 
 export type AvatarProps = {
     user?: UserData;
-    onClick?: () => void;
 }
 
-export default function Avatar({ user, onClick }: AvatarProps) {
-    return <img className="avatar" onClick={onClick} src={user ? user.photoURL || `https://i.pravatar.cc/100?u=${user.uid}` : 'https://i.pravatar.cc/100'} alt={user?.name} />
+export default function Avatar({ user }: AvatarProps) {
+    return <img className="avatar" src={user ? user.photoURL || `https://i.pravatar.cc/100?u=${user.uid}` : 'https://i.pravatar.cc/100'} alt={user?.name} />
 }
diff --git a/src/Board/Dice.tsx b/src/Board/Dice.tsx
@@ -1,18 +1,18 @@
-import type { MouseEventHandler } from 'react';
+import type { PointerEventHandler } from 'react';
 import * as IMAGES from './images/dice';
 import './Dice.css'
 
 type DiceProps = {
-    onClick: MouseEventHandler,
+    onPointerUp: PointerEventHandler,
     values: [number?, number?],
     color?: 'black' | 'white'
 }
 type ImageKey = keyof typeof IMAGES
 
-export default function Dice({ onClick, values, color }: DiceProps) {
+export default function Dice({ onPointerUp, values, color }: DiceProps) {
     const left: ImageKey = `${color && color || 'black'}${values[0] || 6}`
     const right: ImageKey = `${color && color || 'white'}${values[1] || 6}`
-    return <div className="dice" onClick={onClick}>
+    return <div className="dice" onPointerUp={onPointerUp}>
         <img src={IMAGES[left]} />
         <img src={IMAGES[right]} />
     </div>

diff --git a/src/Board/Point.tsx b/src/Board/Point.tsx
@@ -20,12 +20,12 @@ export default function Point({ pieces, move, position, onSelect, selected }: Po
 
     const color = pieces > 0 ? 'white' : 'black';
 
-    const onClick = useCallback(() => {
+    const onPointerUp = useCallback(() => {
         if (pieces !== 0 || selected !== null)
             onSelect(position)
     }, [pieces, position, onSelect])
 
-    return <div className={`point ${selected === position ? 'selected' : ''}`} onClick={onClick} onDragOver={onDragOver} onDrop={onDrop}>
+    return <div className={`point ${selected === position ? 'selected' : ''}`} onPointerUp={onPointerUp} onDragOver={onDragOver} onDrop={onDrop}>
         {Array.from({ length: Math.abs(pieces) }, (_, index) => <Piece key={index} color={color} position={position} onSelect={onSelect} />)}
     </div>
 }
diff --git a/src/Dialogues/Chat.tsx b/src/Dialogues/Chat.tsx
@@ -26,7 +26,7 @@ export default function ({ chats, user }) {
             <h1>Chat List</h1>
             <ul>
                 {chats.map((chat: firebase.database.DataSnapshot) => (
-                    <li key={chat.key} onClick={() => handleChatClick(chat)}>
+                    <li key={chat.key} onPointerUp={() => handleChatClick(chat)}>
                         {chat.val().name}
                     </li>
                 ))}

diff --git a/src/Dialogues/Friends.tsx b/src/Dialogues/Friends.tsx
@@ -62,14 +62,15 @@ export default function Friends({ authUser, toggle, load, reset }) {
 
     const NOW = new Date()
 
-    const row = (user: UserData, match?: Match) => <li key={user.uid} onClick={() => load(user.uid)}>
-        <Avatar user={user} />
-        <div>
-            <h3>{user.name}</h3>
-            <time>{match?.sort && formatDistance(new Date(match.sort), NOW, { addSuffix: true })}</time>
-            {match?.lastMessage}
-        </div>
-    </li>
+    const row = (user: UserData, match?: Match) => 
+        <li key={user.uid} onPointerUp={() => { load(user.uid); toggle() }}>
+            <Avatar user={user} />
+            <div>
+                <h3>{user.name}</h3>
+                <time>{match?.sort && formatDistance(new Date(match.sort), NOW, { addSuffix: true })}</time>
+                {match?.lastMessage}
+            </div>
+        </li>
 
     const searchReject = (user: UserData) =>
         searchRef.current?.value
@@ -108,14 +109,14 @@ export default function Friends({ authUser, toggle, load, reset }) {
             <button
                 aria-haspopup="menu"
                 aria-expanded={isExpanded}
-                onClick={() => setIsExpanded(!isExpanded)}
+                onPointerUp={() => setIsExpanded(!isExpanded)}
                 className="material-icons"
             >
                 settings
             </button>
             <menu>
                 <li>
-                    <a onClick={invite}>
+                    <a onPointerUp={invite}>
                         <span className="material-icons">person_add_alt_1</span>
                         Invite Friend
                     </a>
@@ -126,13 +127,13 @@ export default function Friends({ authUser, toggle, load, reset }) {
                     </li>
                     : null}
                 <li>
-                    <a onClick={() => toggle('profile')}>
+                    <a onPointerUp={() => toggle('profile')}>
                         <span className="material-icons">manage_accounts</span>
                         Edit Profile
                     </a>
                 </li>
                 <li>
-                    <a onClick={reset}>
+                    <a onPointerUp={reset}>
                         <span className="material-icons">restart_alt</span>
                         Reset Match
                     </a>
@@ -144,7 +145,7 @@ export default function Friends({ authUser, toggle, load, reset }) {
                     </a>
                 </li>
                 <li>
-                    <a onClick={() => firebase.auth().signOut()}>
+                    <a onPointerUp={() => firebase.auth().signOut()}>
                         <span className="material-icons">logout</span>
                         Logout
                     </a>

diff --git a/src/Dialogues/Login.tsx b/src/Dialogues/Login.tsx
@@ -74,7 +74,7 @@ export default function Login({ reset }) {
                 <button
                     aria-haspopup="menu"
                     aria-expanded={isExpanded}
-                    onClick={() => setIsExpanded(!isExpanded)}
+                    onPointerUp={() => setIsExpanded(!isExpanded)}
                     className="material-icons"
                 >
                     settings
@@ -86,7 +86,7 @@ export default function Login({ reset }) {
                         </li>
                         : null}
                     <li>
-                        <a onClick={reset}>
+                        <a onPointerUp={reset}>
                             <span className="material-icons">restart_alt</span>
                             Reset Match
                         </a>

diff --git a/src/Dialogues/Profile.tsx b/src/Dialogues/Profile.tsx
@@ -117,6 +117,7 @@ export default function Profile({ authUser, toggle }) {
         if (!editing) return;
         const userRef = firebase.database().ref(`users/${authUser!.key}`);
         userRef.set(editing);
+        console.log('Saved', editing);
         toggle('friends')
     }, [editing, authUser]);
 
@@ -128,7 +129,7 @@ export default function Profile({ authUser, toggle }) {
         <form onSubmit={save}>
             <header>
                 <h1>
-                    <a onClick={() => toggle('friends')}>
+                    <a onPointerUp={() => toggle('friends')}>
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
                     </a>
                     Edit Profile

diff --git a/src/ToggleFullscreen.tsx b/src/ToggleFullscreen.tsx
@@ -15,7 +15,7 @@ export default function ToggleFullscreen() {
         return () => document.removeEventListener('fullscreenchange', fullscreenchange);
     }, [])
 
-    return <a onClick={toggleFullscreen}>
+    return <a onPointerUp={toggleFullscreen}>
         <span className="material-icons">{fullscreen ? 'fullscreen_exit' : 'fullscreen'}</span>
         {fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
     </a>

diff --git a/src/index.css b/src/index.css
@@ -35,7 +35,7 @@ body,
     inset #bfecf7 0 0 0 23px;
 }
 
-[onClick], a {
+[onPointerUp], a {
   cursor: pointer;
 }
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -48,22 +48,21 @@ export function App() {
   const [selected, setSelected] = useState<number | null>(null);
 
   const toggle = useCallback((newState: ModalState) => {
-    if (newState === true) {
-      setState(prevState => {
+    setState(prevState => {
+      if (typeof newState === 'string') { // Open
+        if (prevState) setLastState(prevState);
+        return newState
+      } else if (newState === true) { // Back
         if (prevState) setLastState(prevState);
         return lastState;
-      });
-    } else if (newState === false) {
-      setState(prevState => {
+      } else if (newState === false) { // Close
         if (prevState) setLastState(prevState);
         return false;
-      });
-    } else {
-      setState(prevState => {
-        if (prevState) setLastState(prevState);
-        return newState
-      });
-    }
+      } else { // Toggle
+        setLastState(prevState);
+        return prevState === 'friends' ? false : 'friends';
+      }
+    });
   }, [lastState]);
 
   const load = useCallback(async (userId?: string) => {
@@ -101,7 +100,6 @@ export function App() {
     } else {
       setMatch(await matchSnapshot.val())
     }
-    toggle(false);
   }, [user]);
 
   const reset = useCallback(() => {
@@ -248,8 +246,6 @@ export function App() {
 
   const friendData = friend?.val();
 
-  const toggleFriends = useCallback(() => { toggle(!state) }, [state])
-
   return (
     <>
       <dialog open={!!state}>
@@ -265,14 +261,14 @@ export function App() {
       </dialog>
 
       <div id="board">
-        <div id="toolbar">
+        <div id="toolbar" onPointerUp={toggle}>
           {friendData
-            ? <Avatar user={friendData} onClick={toggleFriends} />
-            : <a className={`material-icons ${state && 'active' || ''}`} onClick={toggleFriends}>account_circle</a>}
+            ? <Avatar user={friendData} />
+            : <a className={`material-icons ${state && 'active' || ''}`}>account_circle</a>}
           <h2>{friendData?.name}</h2>
         </div>
 
-        <Dice onClick={rollDice} values={game.dice} color={game.color} />
+        <Dice onPointerUp={rollDice} values={game.dice} color={game.color} />
 
         <div className="bar">
           {Array.from({ length: game.prison?.white }, (_, index) =>