Merge pull request #138 from SAT-Duel/128-fix-user-login

revised a lot

src/components/Match/MatchingModal.js

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Typography, Spin } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+import styled, { keyframes } from 'styled-components';
+
+const { Text } = Typography;
+
+const spin = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`;
+
+const StyledLoadingIcon = styled(LoadingOutlined)`
+  font-size: 48px;
+  color: #4C3D97;
+  margin-bottom: 24px;
+`;
+
+const MatchingContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px;
+  text-align: center;
+`;
+
+const LoadingText = styled(Text)`
+  font-size: 18px;
+  margin-top: 16px;
+  color: #4A4A4A;
+`;
+
+const sentences = [
+    "Searching for opponents...",
+    "Getting ready for the battle...",
+    "Preparing your duel...",
+    "Almost there...",
+    "Setting up your battle arena..."
+];
+
+const MatchingModal = ({ visible, onCancel }) => {
+    const [loadingMessage, setLoadingMessage] = useState(sentences[0]);
+
+    useEffect(() => {
+        if (visible) {
+            const interval = setInterval(() => {
+                setLoadingMessage((prev) => {
+                    const currentIndex = sentences.indexOf(prev);
+                    return sentences[(currentIndex + 1) % sentences.length];
+                });
+            }, 3000);
+            return () => clearInterval(interval);
+        }
+    }, [visible]);
+
+    return (
+        <Modal
+            visible={visible}
+            onCancel={onCancel}
+            footer={null}
+            closable={true}
+            centered
+            width={400}
+            maskStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }}
+            bodyStyle={{ padding: 0 }}
+        >
+            <MatchingContainer>
+                <StyledLoadingIcon spin />
+                <LoadingText>{loadingMessage}</LoadingText>
+            </MatchingContainer>
+        </Modal>
+    );
+};
+
+export default MatchingModal; 

src/components/BattleHistory.js → src/components/Profile/BattleHistory.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Layout, message, Spin, Table, Typography } from 'antd';
-import { useAuth } from '../context/AuthContext';
+import { useAuth } from '../../context/AuthContext';
 import axios from 'axios';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';

src/components/FriendList.js → src/components/Profile/FriendList.js

@@ -2,10 +2,10 @@ import React, {useState, useEffect} from 'react';
 import styled from 'styled-components';
 import {List, Card, message} from 'antd';
 import axios from 'axios';
-import {useAuth} from '../context/AuthContext';
+import {useAuth} from '../../context/AuthContext';
 import {Link} from 'react-router-dom';
-import FriendRequest from './FriendRequest';
-import SearchUser from './SearchUser';
+import FriendRequest from '../FriendRequest';
+import SearchUser from '../SearchUser';
 
 const Container = styled.div`
     background-color: #f0f2f5;

src/components/Inventory.js → src/components/Profile/Inventory.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tabs } from 'antd';
-import Pets from './Inventory_pets';
-import Storage from './Inventory_storage';
+import Pets from '../Inventory_pets';
+import Storage from '../Inventory_storage';
 
 const { TabPane } = Tabs;