♻️ refactor components

dxanh97 · Oct 14, 2024 · 110beae · 110beae
1 parent fd5089b
commit 110beae
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 107 deletions.
diff --git a/src/components/AddPlayerInput.tsx b/src/components/AddPlayerInput.tsx
diff --git a/...components/game-screen/AddRoundButton.tsx → src/components/AddRoundButton.tsx b/...components/game-screen/AddRoundButton.tsx → src/components/AddRoundButton.tsx
@@ -13,9 +13,9 @@ import {
 import { Carousel } from '@mantine/carousel';
 import { useDisclosure, useMap } from '@mantine/hooks';
 
-import { formatNumber, getColor, getSum } from '../../utils/helpers';
+import { formatNumber, getColor, getSum } from '../utils/helpers';
 
-import AddActionButton from '../shared/AddActionButton';
+import AddActionButton from './shared/AddActionButton';
 
 interface Props {
   betSize: number;

diff --git a/...omponents/game-screen/EditRoundButton.tsx → src/components/EditRoundButton.tsx b/...omponents/game-screen/EditRoundButton.tsx → src/components/EditRoundButton.tsx
@@ -13,11 +13,11 @@ import { Carousel } from '@mantine/carousel';
 import { useDisclosure, useMap } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 
-import { selectRoundById } from '../../redux/round.selector';
-import { useAppSelector } from '../../redux/store';
-import { selectGameById } from '../../redux/game.selector';
+import { selectRoundById } from '../redux/round.selector';
+import { useAppSelector } from '../redux/store';
+import { selectGameById } from '../redux/game.selector';
 
-import { formatNumber, getColor, getSum } from '../../utils/helpers';
+import { formatNumber, getColor, getSum } from '../utils/helpers';
 
 interface Props {
   roundId: string;

diff --git a/src/components/GamesList.tsx b/src/components/GamesList.tsx
@@ -0,0 +1,64 @@
+import { ActionIcon, Card, Group, Text } from '@mantine/core';
+import { modals } from '@mantine/modals';
+import { useNavigate } from 'react-router-dom';
+import { IconInfoSquareRounded, IconTrash } from '@tabler/icons-react';
+
+import { useAppDispatch, useAppSelector } from '../redux/store';
+import { selectAllGames } from '../redux/game.selector';
+import { deleteGame } from '../redux/game.slice';
+import { deleteGameRounds } from '../redux/round.slice';
+import { formatDateTime } from '../utils/helpers';
+
+import Empty from './shared/Empty';
+import PlayerAvatars from './shared/PlayerAvatars';
+
+function GamesList() {
+  const navigate = useNavigate();
+  const allGames = useAppSelector(selectAllGames);
+  const dispatch = useAppDispatch();
+
+  const onDeleteGame = (gameId: string) => {
+    modals.openConfirmModal({
+      title: 'Xoá game này?',
+      size: 'sm',
+      radius: 'md',
+      withCloseButton: false,
+      centered: true,
+      labels: { confirm: 'Oke', cancel: 'Thoi' },
+      onConfirm: () => {
+        dispatch(deleteGame(gameId));
+        dispatch(deleteGameRounds(gameId));
+      },
+    });
+  };
+
+  return (
+    <>
+      {allGames.length === 0 && <Empty subTitle="Tạo game mới đê" />}
+      {allGames.map((x) => (
+        <Card key={x.id} shadow="sm" p="xs" mt="sm" radius="md" withBorder>
+          <Group justify="space-between">
+            <Text fw={800} fz={20}>
+              {x.name}
+            </Text>
+            <Group gap="xs">
+              <ActionIcon
+                variant="subtle"
+                onClick={() => navigate(`/game/${x.id}`)}
+              >
+                <IconInfoSquareRounded />
+              </ActionIcon>
+              <ActionIcon variant="subtle" onClick={() => onDeleteGame(x.id)}>
+                <IconTrash />
+              </ActionIcon>
+            </Group>
+          </Group>
+          <Text c="dimmed">{formatDateTime(x.timestamp)}</Text>
+          <PlayerAvatars playerNames={x.playerNames} />
+        </Card>
+      ))}
+    </>
+  );
+}
+
+export default GamesList;
diff --git a/src/components/game-screen/Leaderboard.tsx → src/components/Leaderboard.tsx b/src/components/game-screen/Leaderboard.tsx → src/components/Leaderboard.tsx
@@ -11,12 +11,12 @@ import {
 } from '@mantine/core';
 import { Sparkline } from '@mantine/charts';
 
-import { useAppSelector } from '../../redux/store';
-import { selectAllRoundsFromGameId } from '../../redux/round.selector';
-import { formatNumber, getColor } from '../../utils/helpers';
-import { selectGameById } from '../../redux/game.selector';
+import { useAppSelector } from '../redux/store';
+import { selectAllRoundsFromGameId } from '../redux/round.selector';
+import { formatNumber, getColor } from '../utils/helpers';
+import { selectGameById } from '../redux/game.selector';
 
-import Empty from '../shared/Empty';
+import Empty from './shared/Empty';
 
 interface Props {
   gameId: string;

diff --git a/src/components/game-screen/RoundsList.tsx → src/components/RoundsList.tsx b/src/components/game-screen/RoundsList.tsx → src/components/RoundsList.tsx
@@ -12,13 +12,13 @@ import {
 import { modals } from '@mantine/modals';
 import { IconTrash } from '@tabler/icons-react';
 
-import { useAppDispatch, useAppSelector } from '../../redux/store';
-import { selectAllRoundsFromGameId } from '../../redux/round.selector';
-import { selectGameById } from '../../redux/game.selector';
-import { deleteRound, updateRound } from '../../redux/round.slice';
-import { formatNumber, getColor } from '../../utils/helpers';
+import { useAppDispatch, useAppSelector } from '../redux/store';
+import { selectAllRoundsFromGameId } from '../redux/round.selector';
+import { selectGameById } from '../redux/game.selector';
+import { deleteRound, updateRound } from '../redux/round.slice';
+import { formatNumber, getColor } from '../utils/helpers';
 
-import Empty from '../shared/Empty';
+import Empty from './shared/Empty';
 import EditRoundButton from './EditRoundButton';
 
 interface Props {

diff --git a/...nents/game-screen/EditablePlayerOrder.tsx → src/components/SortPlayerOrder.tsx b/...nents/game-screen/EditablePlayerOrder.tsx → src/components/SortPlayerOrder.tsx
@@ -4,17 +4,17 @@ import { useDisclosure, useListState } from '@mantine/hooks';
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import { IconGripVertical } from '@tabler/icons-react';
 
-import { useAppDispatch, useAppSelector } from '../../redux/store';
-import { selectGameById } from '../../redux/game.selector';
-import { updateGamePlayerNames } from '../../redux/game.slice';
+import { useAppDispatch, useAppSelector } from '../redux/store';
+import { selectGameById } from '../redux/game.selector';
+import { updateGamePlayerNames } from '../redux/game.slice';
 
-import PlayerAvatars from '../shared/PlayerAvatars';
+import PlayerAvatars from './shared/PlayerAvatars';
 
 interface Props {
   gameId: string;
 }
 
-function EditablePlayerOrder(props: Props) {
+function SortPlayerOrder(props: Props) {
   const { gameId } = props;
   const game = useAppSelector((s) => selectGameById(s, gameId));
   const dispatch = useAppDispatch();
@@ -84,4 +84,4 @@ function EditablePlayerOrder(props: Props) {
   );
 }
 
-export default EditablePlayerOrder;
+export default SortPlayerOrder;
diff --git a/src/pages/game-screen.tsx b/src/pages/game-screen.tsx
@@ -6,11 +6,11 @@ import { selectGameById } from '../redux/game.selector';
 import { useAppDispatch, useAppSelector } from '../redux/store';
 import { createRound } from '../redux/round.slice';
 
-import AddRoundButton from '../components/game-screen/AddRoundButton';
-import RoundsList from '../components/game-screen/RoundsList';
-import Leaderboard from '../components/game-screen/Leaderboard';
+import AddRoundButton from '../components/AddRoundButton';
+import RoundsList from '../components/RoundsList';
+import Leaderboard from '../components/Leaderboard';
 import TopNav from '../components/shared/TopNav';
-import EditablePlayerOrder from '../components/game-screen/EditablePlayerOrder';
+import SortPlayerOrder from '../components/SortPlayerOrder';
 
 function GameScreenPage() {
   const { gameId = '' } = useParams();
@@ -37,7 +37,7 @@ function GameScreenPage() {
   return game ? (
     <Box>
       <TopNav title={gameName}>
-        <EditablePlayerOrder gameId={game.id} />
+        <SortPlayerOrder gameId={game.id} />
       </TopNav>
 
       <Tabs

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -1,68 +1,17 @@
-import { ActionIcon, Box, Card, Group, Text } from '@mantine/core';
-import { modals } from '@mantine/modals';
+import { Box } from '@mantine/core';
 import { useNavigate } from 'react-router-dom';
-import { IconInfoSquareRounded, IconTrash } from '@tabler/icons-react';
-
-import { useAppDispatch, useAppSelector } from '../redux/store';
-import { selectAllGames } from '../redux/game.selector';
-import { deleteGame } from '../redux/game.slice';
-import { deleteGameRounds } from '../redux/round.slice';
-import { formatDateTime } from '../utils/helpers';
 
 import TopNav from '../components/shared/TopNav';
-import Empty from '../components/shared/Empty';
-import PlayerAvatars from '../components/shared/PlayerAvatars';
+import GamesList from '../components/GamesList';
 import AddActionButton from '../components/shared/AddActionButton';
 
 function HomePage() {
   const navigate = useNavigate();
 
-  const allGames = useAppSelector(selectAllGames);
-
-  const dispatch = useAppDispatch();
-
-  const onDeleteGame = (gameId: string) => {
-    modals.openConfirmModal({
-      title: 'Xoá game này?',
-      size: 'sm',
-      radius: 'md',
-      withCloseButton: false,
-      centered: true,
-      labels: { confirm: 'Oke', cancel: 'Thoi' },
-      onConfirm: () => {
-        dispatch(deleteGame(gameId));
-        dispatch(deleteGameRounds(gameId));
-      },
-    });
-  };
-
   return (
     <Box>
       <TopNav isHome title="Sải Nhà Cố" />
-
-      {allGames.length === 0 && <Empty subTitle="Tạo game mới đê" />}
-      {allGames.map((x) => (
-        <Card key={x.id} shadow="sm" p="xs" mt="sm" radius="md" withBorder>
-          <Group justify="space-between">
-            <Text fw={800} fz={20}>
-              {x.name}
-            </Text>
-            <Group gap="xs">
-              <ActionIcon
-                variant="subtle"
-                onClick={() => navigate(`/game/${x.id}`)}
-              >
-                <IconInfoSquareRounded />
-              </ActionIcon>
-              <ActionIcon variant="subtle" onClick={() => onDeleteGame(x.id)}>
-                <IconTrash />
-              </ActionIcon>
-            </Group>
-          </Group>
-          <Text c="dimmed">{formatDateTime(x.timestamp)}</Text>
-          <PlayerAvatars playerNames={x.playerNames} />
-        </Card>
-      ))}
+      <GamesList />
       <AddActionButton onClick={() => navigate('/new-game')} />
     </Box>
   );

diff --git a/src/pages/new-game.tsx b/src/pages/new-game.tsx
@@ -1,13 +1,12 @@
 import { useState } from 'react';
-import { Button, Input, NumberInput, Stack } from '@mantine/core';
+import { Button, Input, NumberInput, Stack, TagsInput } from '@mantine/core';
 import { useNavigate } from 'react-router-dom';
 import { nanoid } from '@reduxjs/toolkit';
 
 import { useAppDispatch, useAppSelector } from '../redux/store';
 import { createGame } from '../redux/game.slice';
 import { selectAllGames, selectLatestGame } from '../redux/game.selector';
 
-import AddPlayerInput from '../components/AddPlayerInput';
 import TopNav from '../components/shared/TopNav';
 
 function NewGamePage() {
@@ -43,8 +42,10 @@ function NewGamePage() {
       <Input.Wrapper label="Tên game">
         <Input value={gameName} onChange={(e) => setGameName(e.target.value)} />
       </Input.Wrapper>
-      <AddPlayerInput
-        playerNames={[...playerNames]}
+      <TagsInput
+        label="Nhấn 'Enter/Nhập' để thêm người chơi"
+        placeholder="Tên người chơi"
+        value={[...playerNames]}
         onChange={setPlayerNames}
       />
       <Input.Wrapper label="Mức bẹt">