マルチプレイ、参加リクエストを何度も送れないようにする

calmery · Feb 27, 2021 · 126a208 · 126a208
1 parent e9140a7
commit 126a208
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/components/Exhibition/Menu/Multiplay.tsx b/src/components/Exhibition/Menu/Multiplay.tsx
@@ -38,7 +38,7 @@ export const Multiplay: React.FC<
   ReturnType<typeof useMultiplay> & {
     onClose: () => void;
   }
-> = ({ join, leave, onClose, players }) => {
+> = ({ alreadyJoinRequested, join, leave, onClose, players }) => {
   const [groupId, setGroupId] = useState("");
 
   const handleChangeInput = useCallback(
@@ -49,12 +49,16 @@ export const Multiplay: React.FC<
   );
 
   const handleClickJoinButton = useCallback(() => {
+    if (alreadyJoinRequested) {
+      return;
+    }
+
     join(groupId ? groupId : undefined);
-  }, [groupId, join]);
+  }, [alreadyJoinRequested, groupId, join]);
 
   return (
     <ExhibitionPopup label="みんなでトリップする" onClose={onClose} small>
-      <div className="flex flex-col h-full w-full">
+      <div className="flex flex-col w-full h-full">
         <div css={description}>
           友達と一緒にトリップしたいときは夢番地を入力してトリップしよう！入力せずにトリップするとランダムな夢番地に繋がるよ
         </div>
@@ -70,7 +74,7 @@ export const Multiplay: React.FC<
         />
         {!players && (
           <div
-            className="bg-blue-400 bold cursor-pointer mt-auto text-center"
+            className="mt-auto text-center bg-blue-400 cursor-pointer bold"
             css={connectButton}
             onClick={handleClickJoinButton}
           >
@@ -79,7 +83,7 @@ export const Multiplay: React.FC<
         )}
         {!!players && (
           <div
-            className="bg-red-400 bold cursor-pointer mt-auto text-center"
+            className="mt-auto text-center bg-red-400 cursor-pointer bold"
             css={connectButton}
             onClick={leave}
           >

diff --git a/src/hooks/exhibition/useMultuplay.ts b/src/hooks/exhibition/useMultuplay.ts
@@ -44,6 +44,7 @@ export const useMultiplay = () => {
   > | null>(null);
   const [lastUpdate, setLastUpdate] = useState<UpdatePayload | null>(null);
   const [socket, setSocket] = useState(createSocket());
+  const [alreadyJoinRequested, setAlreadyJoinRequested] = useState(false);
 
   //
 
@@ -63,6 +64,7 @@ export const useMultiplay = () => {
 
   const join = useCallback(
     (payload?: string) => {
+      setAlreadyJoinRequested(true);
       socket.connect();
       socket.emit("join", payload);
       GA.multiplay("join");
@@ -95,6 +97,7 @@ export const useMultiplay = () => {
   );
 
   const handleSocketDisconnect = useCallback(() => {
+    setAlreadyJoinRequested(false);
     setPlayers(null);
     GA.multiplay("leave");
   }, []);
@@ -180,6 +183,7 @@ export const useMultiplay = () => {
   //
 
   return {
+    alreadyJoinRequested,
     join,
     leave: handleLeave,
     players,