Merge pull request #135 from karrotmvp/develop

hotfix: Fix commnet issue -> user was unable to leave comment due to problem with onChange event handler on input field

package.json

@@ -22,7 +22,7 @@
     "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
     "react-idle-timer": "^4.6.4",
-    "react-modal": "^3.14.3",
+    "react-modal": "^3.14.4",
     "react-redux": "^7.2.5",
     "react-router-dom": "^5.3.0",
     "react-swipeable": "^6.2.0",

src/components/Button/Button.tsx

@@ -190,7 +190,7 @@ const ButtonComponent: React.FC<Props> = (props) => {
 
 export const Button = React.memo(ButtonComponent);
 
-export const DisabledButton: React.FC<Props> = (props) => {
+const DisabledButtonComponent: React.FC<Props> = (props) => {
   return (
     <CustomButton
       size={props.size}
@@ -202,3 +202,5 @@ export const DisabledButton: React.FC<Props> = (props) => {
     </CustomButton>
   );
 };
+
+export const DisabledButton = React.memo(DisabledButtonComponent);

src/index.css

@@ -33,7 +33,7 @@ body {
 #root {
   height: 100%;
 }
-*:not(input) {
+*:not(input, textarea) {
   user-select: none;
 }
 *:focus {

src/pages/Game2048/Game/Game.tsx

@@ -3,12 +3,11 @@ import { useCurrentScreen } from '@karrotframe/navigator';
 import { Button } from 'components/Button';
 import { rem } from 'polished';
 import React, { useCallback, useEffect, useState } from 'react';
-import ReactModal from 'react-modal';
 import { useMinigameApi } from 'services/api/minigameApi';
 import { useMyGame2048Data } from '../hooks';
 import { Board } from './Game/Board';
 import { useGame } from './hooks';
-import { GameOver } from './Modal';
+import { GameOverModal } from './Modal';
 import {
   MemoizedCurrentScore as CurrentScore,
   MemoizedMyBestScore as MyBestScore,
@@ -18,6 +17,7 @@ import refreshGameUrl from 'assets/svg/game2048/refresh_game.svg';
 import { useAnalytics } from 'services/analytics';
 import { useMini, useUserData } from 'hooks';
 import { useDebouncedCallback } from 'use-debounce';
+import ReactModal from 'react-modal';
 
 export const Game: React.FC = () => {
   const analytics = useAnalytics();
@@ -364,8 +364,7 @@ export const Game: React.FC = () => {
 
       <ReactModal
         isOpen={isGameOver}
-        shouldCloseOnOverlayClick={false}
-        contentLabel="Game Over"
+        contentLabel="2048-puzzle-gameover-modal"
         style={{
           overlay: {
             background: 'rgba(90, 90, 90, 0.7)',
@@ -394,7 +393,10 @@ export const Game: React.FC = () => {
           },
         }}
       >
-        <GameOver myPreviousRank={myCurrentRank} currentScore={currentScore} />
+        <GameOverModal
+          myPreviousRank={myCurrentRank}
+          currentScore={currentScore}
+        />
       </ReactModal>
     </>
   );

src/pages/Game2048/Game/Game/Board/Board.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { MemoizedTile as Tile, TileProps } from '../Tile';
-import { animationDuration, boardMargin, boardPadding } from '../styles';
+import { boardMargin, boardPadding } from '../styles';
 import { useSwipeable } from 'react-swipeable';
 import { Guide } from './Guide';
-import { useThrottledCallback } from 'use-debounce/lib';
+
 import { MemoizedGrid as Grid } from '.';
 
 type Props = {
@@ -23,7 +23,7 @@ export const Board: React.FC<Props> = (props) => {
     handlers.ref(el);
     tileContainerRef.current = el;
   };
-  // =================================================================
+
   // mobile(touch) friendly
   const handlers = useSwipeable({
     onSwipeStart: (eventData) => {
@@ -46,36 +46,6 @@ export const Board: React.FC<Props> = (props) => {
     preventDefaultTouchmoveEvent: true,
     trackTouch: true,
   });
-  // desktop(keyboard) friendly
-  const handleKeyDown = useThrottledCallback(
-    (e: KeyboardEvent) => {
-      // disables page scrolling with keyboard arrows
-      e.preventDefault();
-      switch (e.code) {
-        case 'ArrowRight':
-          props.moveRight();
-          break;
-        case 'ArrowLeft':
-          props.moveLeft();
-          break;
-        case 'ArrowUp':
-          props.moveUp();
-          break;
-        case 'ArrowDown':
-          props.moveDown();
-          break;
-      }
-    },
-    animationDuration
-    // { leading: true, trailing: false }
-  );
-  useEffect(() => {
-    window.addEventListener('keydown', handleKeyDown);
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [handleKeyDown]);
-  // =================================================================
 
   // change board & tile size responsively to window size
   useLayoutEffect(() => {

src/pages/Game2048/Game/Modal/PostComment.tsx → src/pages/Game2048/Game/Modal/CommentModal.tsx

@@ -16,59 +16,36 @@ type Props = {
   rank: number;
 };
 
-export const PostComment: React.FC<Props> = (props) => {
+export const CommentModal: React.FC<Props> = (props) => {
   const analytics = useAnalytics();
   const { isTop } = useCurrentScreen();
   const { replace } = useNavigator();
   const minigameApi = useMinigameApi();
   const { townName2: districtName } = useUserData();
   const { isInWebEnvironment } = useMini();
   const { comment: prevComment, updateMyComment } = useMyGame2048Data();
-  const [currentComment, setCurrentComment] = useState({
-    comment: prevComment,
-    length: prevComment.length,
-  });
+  const [comment, setComment] = useState('');
   // Page navigation
   const goToLeaderboardPage = () => {
     replace(`/game-2048/leaderboard`);
   };
-
-  const handleDeleteCharacter = (e: any) => {
-    console.log('onKeyDown', e, e.keyCode, e.key);
-    if (e.keyCode === 8 || e.key === 'Backspace') {
-      if (e.target.defaultValue === '') {
-        setCurrentComment({
-          comment: '',
-          length: 0,
-        });
-      } else {
-        setCurrentComment((prevState) => ({
-          comment: prevState.comment.slice(0, -1),
-          length: prevState.length - 1,
-        }));
-      }
-    }
-  };
-
   const handleCommentInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setCurrentComment({
-      comment: e.target.value.slice(0, 19),
-      length: e.target.value.length,
-    });
+    const { value, maxLength } = e.target;
+    setComment(value.slice(0, maxLength));
   };
 
-  const patchComment = async () => {
+  const patchComment = async ({ comment }: { comment: string }) => {
     if (isInWebEnvironment) {
-      updateMyComment(currentComment.comment);
+      updateMyComment(comment);
       goToLeaderboardPage();
       return;
     }
     try {
-      updateMyComment(currentComment.comment);
+      updateMyComment(comment);
       const { data } = await minigameApi.gamePlayApi.addCommentUsingPATCH(
         'GAME_2048',
         {
-          comment: currentComment.comment,
+          comment: comment,
         }
       );
       if (data.status === 200) {
@@ -118,19 +95,22 @@ export const PostComment: React.FC<Props> = (props) => {
             autoFocus
             type="text"
             maxLength={20}
-            placeholder={`예) 오예~${districtName}짱! :)`}
-            onChange={handleCommentInput}
-            onKeyDown={handleDeleteCharacter}
-            value={currentComment.comment}
+            placeholder={
+              prevComment === '' || prevComment === null
+                ? `예) 오예~${districtName}짱! :)`
+                : `${prevComment}`
+            }
+            onChange={(e) => handleCommentInput(e)}
+            value={comment}
           />
-          <span>{currentComment.length}/20</span>
+          <span>{comment.length}/20</span>
         </CommentInput>
-        {currentComment.length > 0 ? (
+        {comment.length > 0 ? (
           <Button
             size={`large`}
             fontSize={rem(16)}
             color={`primary`}
-            onClick={patchComment}
+            onClick={() => patchComment({ comment: comment })}
           >
             등록하기
           </Button>

src/pages/Game2048/Game/Modal/GameOver.tsx → src/pages/Game2048/Game/Modal/GameOverModal.tsx

@@ -1,8 +1,7 @@
-import { useCurrentScreen, useNavigator } from '@karrotframe/navigator';
 import styled from '@emotion/styled';
 import React, { useState, useEffect, useCallback } from 'react';
-import ReactModal from 'react-modal';
-import { PostComment } from './PostComment';
+import { useCurrentScreen, useNavigator } from '@karrotframe/navigator';
+import { CommentModal } from './CommentModal';
 import gameOverSvgUrl from 'assets/svg/game2048/gameover.svg';
 import { Button } from 'components/Button';
 import { useMinigameApi } from 'services/api/minigameApi';
@@ -17,19 +16,23 @@ import {
   fireRandomDirectionConfetti,
 } from 'utils/functions/confetti';
 import { useThrottledCallback } from 'use-debounce/lib';
+import ReactModal from 'react-modal';
+
 type Props = {
   myPreviousRank: number;
   currentScore: number;
 };
-export const GameOver: React.FC<Props> = (props) => {
+
+export const GameOverModal: React.FC<Props> = (props) => {
   const { isTop } = useCurrentScreen();
   const { replace } = useNavigator();
   const analytics = useAnalytics();
   const minigameApi = useMinigameApi();
   const { isInWebEnvironment, shareApp } = useMini();
   const { nickname } = useUserData();
   const { gameType } = useMyGame2048Data();
-  const [shouldModalOpen, setShouldModalOpen] = useState<boolean>(false);
+  // const [shouldModalOpen, setShouldModalOpen] = useState<boolean>(false);
+  const [isCommentModalOpen, setIsCommentModalOpen] = useState<boolean>(false);
   const [sessionRank, setSessionRank] = useState<{
     rank: number | undefined;
     score: number | undefined;
@@ -91,18 +94,16 @@ export const GameOver: React.FC<Props> = (props) => {
   );
 
   useEffect(() => {
-    if (isTop) {
-      getSessionRank({ gameType: gameType, score: props.currentScore });
-      getMyCurrentRank({
-        gameType: gameType,
-        previousRank: props.myPreviousRank,
-      });
-    }
+    getSessionRank({ gameType: gameType, score: props.currentScore });
+    getMyCurrentRank({
+      gameType: gameType,
+      previousRank: props.myPreviousRank,
+    });
   }, [
     gameType,
     getMyCurrentRank,
     getSessionRank,
-    isTop,
+
     props.currentScore,
     props.myPreviousRank,
   ]);
@@ -123,16 +124,18 @@ export const GameOver: React.FC<Props> = (props) => {
 
   // button to view leaderbaord (open commment modal if condition is met)
   const handleViewLeaderboard = () => {
+    setIsCommentModalOpen(true);
     if (isInWebEnvironment) {
-      goToLeaderboardPage();
+      // goToLeaderboardPage();
+      setIsCommentModalOpen(true);
       return;
     }
     analytics.logEvent('click_view_leaderboard_button', {
       game_type: '2048_puzzle',
     });
     if (sessionRank.rank !== undefined) {
       sessionRank.rank > 0 && sessionRank.rank <= 10
-        ? setShouldModalOpen(true)
+        ? setIsCommentModalOpen(true)
         : goToLeaderboardPage();
     }
   };
@@ -166,6 +169,7 @@ export const GameOver: React.FC<Props> = (props) => {
       colors: [`#0E74FF`, `#82B6FF`, `#E3EFFF`],
     });
   }, 3000);
+
   return (
     <>
       <div
@@ -272,9 +276,8 @@ export const GameOver: React.FC<Props> = (props) => {
         </Button>
       </ActionItems>
       <ReactModal
-        isOpen={shouldModalOpen}
-        shouldCloseOnOverlayClick={false}
-        contentLabel="Post Comment"
+        isOpen={isCommentModalOpen}
+        contentLabel="2048-puzzle-comment-modal"
         style={{
           overlay: {
             background: 'rgba(40, 40, 40, 0.8)',
@@ -298,10 +301,10 @@ export const GameOver: React.FC<Props> = (props) => {
           },
         }}
       >
-        <PostComment
-          setShouldModalOpen={setShouldModalOpen}
-          score={sessionRank.score as number}
+        <CommentModal
+          setShouldModalOpen={setIsCommentModalOpen}
           rank={sessionRank.rank as number}
+          score={sessionRank.score as number}
         />
       </ReactModal>
     </>

src/pages/Game2048/Game/Modal/index.ts

@@ -1,2 +1,2 @@
-export * from './PostComment';
-export * from './GameOver';
+export * from './CommentModal';
+export * from './GameOverModal';

src/pages/Home.tsx

@@ -452,11 +452,9 @@ export const Home: React.FC = () => {
   }, [getLastWeekTopUsers]);
 
   useEffect(() => {
-    if (isTop) {
-      retreieveTop2048PuzzleUsers();
-      retrieveTopKarrotClickerUsers();
-    }
-  }, [isTop, retreieveTop2048PuzzleUsers, retrieveTopKarrotClickerUsers]);
+    retreieveTop2048PuzzleUsers();
+    retrieveTopKarrotClickerUsers();
+  }, [retreieveTop2048PuzzleUsers, retrieveTopKarrotClickerUsers]);
 
   return (
     <div style={{ height: '100%', position: 'relative' }}>

src/pages/KarrotClicker/Game/Game.tsx

@@ -18,7 +18,7 @@ import { useMinigameApi } from 'services/api/minigameApi';
 
 Modal.setAppElement(document.createElement('div'));
 
-export const Game = () => {
+export const Game: React.FC = () => {
   const { isTop } = useCurrentScreen();
   const analytics = useAnalytics();
   const { userId, setUserInfo } = useUserData();