From 956d90f7dd96dfe5ebe376cadea9000fe5b06439 Mon Sep 17 00:00:00 2001
From: FarmerJohnsBessie <cz52013141834@gmail.com>
Date: Wed, 29 Jan 2025 16:45:24 -0800
Subject: [PATCH] revised a lot

---
 src/components/Match/MatchingModal.js         |  75 +++++++++
 src/components/{ => Profile}/BattleHistory.js |   2 +-
 src/components/{ => Profile}/FriendList.js    |   6 +-
 src/components/{ => Profile}/Inventory.js     |   4 +-
 src/components/{ => Profile}/Profile.js       | 149 +++++++++---------
 .../{ => Profile}/TournamentHistory.js        |   2 +-
 src/context/AuthContext.js                    |   6 +-
 src/pages/GoalSettingPage.js                  |  14 +-
 src/pages/MatchingPage.js                     |  42 ++---
 src/pages/ProfilePage.js                      |  83 +++++-----
 src/pages/TrainerPage.js                      |   4 +-
 src/pages/practice_test/PracticeTestPage.js   |  23 ++-
 12 files changed, 245 insertions(+), 165 deletions(-)
 create mode 100644 src/components/Match/MatchingModal.js
 rename src/components/{ => Profile}/BattleHistory.js (98%)
 rename src/components/{ => Profile}/FriendList.js (95%)
 rename src/components/{ => Profile}/Inventory.js (83%)
 rename src/components/{ => Profile}/Profile.js (64%)
 rename src/components/{ => Profile}/TournamentHistory.js (98%)

diff --git a/src/components/Match/MatchingModal.js b/src/components/Match/MatchingModal.js
new file mode 100644
index 0000000..ce941bb
--- /dev/null
+++ b/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; 
\ No newline at end of file
diff --git a/src/components/BattleHistory.js b/src/components/Profile/BattleHistory.js
similarity index 98%
rename from src/components/BattleHistory.js
rename to src/components/Profile/BattleHistory.js
index 7ad8dc4..5e5048f 100644
--- a/src/components/BattleHistory.js
+++ b/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';
diff --git a/src/components/FriendList.js b/src/components/Profile/FriendList.js
similarity index 95%
rename from src/components/FriendList.js
rename to src/components/Profile/FriendList.js
index 0efa0fb..54c73b2 100644
--- a/src/components/FriendList.js
+++ b/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;
diff --git a/src/components/Inventory.js b/src/components/Profile/Inventory.js
similarity index 83%
rename from src/components/Inventory.js
rename to src/components/Profile/Inventory.js
index 7ab199d..bca1866 100644
--- a/src/components/Inventory.js
+++ b/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;
 
diff --git a/src/components/Profile.js b/src/components/Profile/Profile.js
similarity index 64%
rename from src/components/Profile.js
rename to src/components/Profile/Profile.js
index 544712d..2e0cf65 100644
--- a/src/components/Profile.js
+++ b/src/components/Profile/Profile.js
@@ -1,9 +1,16 @@
-import React, { useEffect, useState } from 'react';
-import axios from 'axios';
-import { useAuth } from "../context/AuthContext";
-import { Card, Form, Input, Button, message, Row, Col, Statistic } from "antd";
-import { UserOutlined, TrophyOutlined, DollarOutlined, StarOutlined, RiseOutlined, ThunderboltOutlined } from '@ant-design/icons';
-import { useNavigate } from 'react-router-dom';
+import React, {useEffect, useState} from 'react';
+import {useAuth} from "../../context/AuthContext";
+import {Card, Form, Input, Button, message, Row, Col, Statistic} from "antd";
+import {
+    UserOutlined,
+    TrophyOutlined,
+    DollarOutlined,
+    StarOutlined,
+    RiseOutlined,
+    ThunderboltOutlined
+} from '@ant-design/icons';
+import {useNavigate} from 'react-router-dom';
+import api from "../api";
 
 const gradientStyle = {
     background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -28,7 +35,7 @@ const iconStyle = {
     marginRight: '8px'
 };
 
-function Profile({ user_id = null }) {
+function Profile({user_id = null}) {
     const [profile, setProfile] = useState({
         user: {
             username: '',
@@ -48,45 +55,46 @@ function Profile({ user_id = null }) {
     });
     const [loadingProfile, setLoadingProfile] = useState(true);
     const [form] = Form.useForm();
-    const { token, loading, user } = useAuth();
+    const {loading, user} = useAuth();
     const navigate = useNavigate();
     const isOwnProfile = user_id === null;
 
     useEffect(() => {
         const fetchProfile = async () => {
-            if (!token) {
-                return;
-            }
             try {
-                const baseUrl = process.env.REACT_APP_API_URL;
-                const url = isOwnProfile ? `${baseUrl}/api/profile/` : `${baseUrl}/api/profile/view_profile/${user_id}/`;
-                const response = await axios.get(url, {
-                    headers: {
-                        'Authorization': `Bearer ${token}`
-                    }
-                });
-
-                const condensedBiography = response.data.biography.replace(/\n+/g, '\n');
-                setProfile(prevProfile => ({
-                    ...prevProfile,
-                    ...response.data,
-                    biography: condensedBiography
-                }));
+                if (isOwnProfile) {
+                    const response = await api.get(`api/profile/`);
+                    const condensedBiography = response.data.biography.replace(/\n+/g, '\n');
+                    setProfile(prevProfile => ({
+                        ...prevProfile,
+                        ...response.data,
+                        biography: condensedBiography
+                    }));
+                    // Fetch Infinite Questions Statistics
+                    const infiniteStatsResponse = await api.get(`api/infinite_questions_profile/`);
 
-                // Fetch Infinite Questions Statistics
-                const infiniteStatsResponse = await axios.get(`${baseUrl}/api/infinite_questions_profile/`, {
-                    headers: {
-                        'Authorization': `Bearer ${token}`
-                    }
-                });
+                    setStatistics(infiniteStatsResponse.data);
 
-                setStatistics(infiniteStatsResponse.data);
+                    setLoadingProfile(false);
 
-                setLoadingProfile(false);
+                    // Set form fields after data is fetched
+                    form.setFieldsValue({biography: condensedBiography});
+                }else{
+                    const response = await api.get(`api/profile/view_profile/${user_id}/`);
+                    const profile = response.data.profile;
+                    const statistic = response.data.statistics;
+                    const condensedBiography = profile.biography.replace(/\n+/g, '\n');
+                    setProfile(prevProfile => ({
+                        ...prevProfile,
+                        ...profile,
+                        biography: condensedBiography
+                    }));
 
-                // Set form fields after data is fetched
-                form.setFieldsValue({ biography: condensedBiography });
+                    setStatistics(statistic);
 
+                    setLoadingProfile(false);
+                    form.setFieldsValue({biography: condensedBiography});
+                }
             } catch (err) {
                 console.error('Error fetching profile:', err);
                 message.error('Failed to load profile');
@@ -94,17 +102,12 @@ function Profile({ user_id = null }) {
             }
         };
         if (!loading) fetchProfile();
-    }, [user_id, token, loading, isOwnProfile, form]);
+    }, [user_id, loading, isOwnProfile, form]);
 
     const onFinish = async (values) => {
         if (!isOwnProfile) return;
         try {
-            const baseUrl = process.env.REACT_APP_API_URL;
-            const response = await axios.patch(`${baseUrl}/api/profile/update_biography/`, values, {
-                headers: {
-                    'Authorization': `Bearer ${token}`
-                }
-            });
+            const response = await api.patch(`api/profile/update_biography/`, values);
 
             const condensedBiography = response.data.biography.replace(/\n+/g, '\n');
             setProfile(prevProfile => ({
@@ -120,19 +123,13 @@ function Profile({ user_id = null }) {
     };
 
     const sendFriendRequest = async () => {
-        if (!token) {
+        if (!user) {
             message.error('You must be logged in to send friend requests');
             return;
         }
         try {
-            const baseUrl = process.env.REACT_APP_API_URL;
-            await axios.post(`${baseUrl}/api/profile/send_friend_request/`,
-                { to_user_id: user_id },
-                {
-                    headers: {
-                        'Authorization': `Bearer ${token}`
-                    }
-                }
+            await api.post(`api/profile/send_friend_request/`,
+                {to_user_id: user_id}
             );
             message.success('Friend request sent.');
         } catch (error) {
@@ -146,28 +143,29 @@ function Profile({ user_id = null }) {
     };
 
     return (
-        <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
+        <div style={{maxWidth: '800px', margin: '0 auto', padding: '20px'}}>
             <Card
-                title={<span style={whiteTextStyle}>{isOwnProfile ? "My Profile" : `${profile.user?.username}'s Profile`}</span>}
+                title={<span
+                    style={whiteTextStyle}>{isOwnProfile ? "My Profile" : `${profile.user?.username}'s Profile`}</span>}
                 loading={loadingProfile}
                 extra={!isOwnProfile && (
                     <Button
                         type="primary"
                         onClick={sendFriendRequest}
-                        style={{ ...gradientStyle, border: 'none' }}
+                        style={{...gradientStyle, border: 'none'}}
                     >
                         Add Friend
                     </Button>
                 )}
-                style={{ ...cardStyle, ...gradientStyle }}
-                headStyle={{ ...gradientStyle, borderBottom: 'none' }}
+                style={{...cardStyle, ...gradientStyle}}
+                headStyle={{...gradientStyle, borderBottom: 'none'}}
             >
                 <Row gutter={16}>
                     <Col span={12}>
                         <Statistic
                             title={<span style={whiteTextStyle}>Username</span>}
                             value={profile.user?.username}
-                            prefix={<UserOutlined style={{ ...iconStyle, color: '#1890ff' }} />}
+                            prefix={<UserOutlined style={{...iconStyle, color: '#1890ff'}}/>}
                             valueStyle={whiteTextStyle}
                         />
                     </Col>
@@ -175,7 +173,7 @@ function Profile({ user_id = null }) {
                         <Statistic
                             title={<span style={whiteTextStyle}>Grade</span>}
                             value={profile.grade}
-                            prefix={<TrophyOutlined style={{ ...iconStyle, color: '#FFA500' }} />}
+                            prefix={<TrophyOutlined style={{...iconStyle, color: '#FFA500'}}/>}
                             valueStyle={whiteTextStyle}
                         />
                     </Col>
@@ -186,15 +184,15 @@ function Profile({ user_id = null }) {
             <Card
                 title={<span style={whiteTextStyle}>Elo Ratings</span>}
                 loading={loadingProfile}
-                style={{ ...cardStyle, ...gradientStyle }}
-                headStyle={{ ...gradientStyle, borderBottom: 'none' }}
+                style={{...cardStyle, ...gradientStyle}}
+                headStyle={{...gradientStyle, borderBottom: 'none'}}
             >
                 <Row gutter={16}>
                     <Col span={12}>
                         <Statistic
                             title={<span style={whiteTextStyle}>Duel Elo</span>}
                             value={profile.elo_rating}
-                            prefix={<RiseOutlined style={{ ...iconStyle, color: '#ff4d4f' }} />}
+                            prefix={<RiseOutlined style={{...iconStyle, color: '#ff4d4f'}}/>}
                             valueStyle={whiteTextStyle}
                         />
                     </Col>
@@ -202,7 +200,7 @@ function Profile({ user_id = null }) {
                         <Statistic
                             title={<span style={whiteTextStyle}>Singleplayer Elo</span>}
                             value={profile.sp_elo_rating}
-                            prefix={<RiseOutlined style={{ ...iconStyle, color: '#FFA500' }} />}
+                            prefix={<RiseOutlined style={{...iconStyle, color: '#FFA500'}}/>}
                             valueStyle={whiteTextStyle}
                         />
                     </Col>
@@ -212,17 +210,18 @@ function Profile({ user_id = null }) {
             {/* Infinite Questions Statistics Card */}
             {statistics && (
                 <Card
-                    title={<span style={whiteTextStyle}>{isOwnProfile ? "My Stats" : `${profile.user?.username}'s Stats`}</span>}
+                    title={<span
+                        style={whiteTextStyle}>{isOwnProfile ? "My Stats" : `${profile.user?.username}'s Stats`}</span>}
                     loading={loadingProfile}
-                    style={{ ...cardStyle, ...gradientStyle }}
-                    headStyle={{ ...gradientStyle, borderBottom: 'none' }}
+                    style={{...cardStyle, ...gradientStyle}}
+                    headStyle={{...gradientStyle, borderBottom: 'none'}}
                 >
                     <Row gutter={16}>
                         <Col span={12}>
                             <Statistic
                                 title={<span style={whiteTextStyle}>Coins</span>}
                                 value={statistics.coins}
-                                prefix={<DollarOutlined style={{ ...iconStyle, color: '#FFD700' }} />}
+                                prefix={<DollarOutlined style={{...iconStyle, color: '#FFD700'}}/>}
                                 valueStyle={whiteTextStyle}
                             />
                         </Col>
@@ -230,17 +229,17 @@ function Profile({ user_id = null }) {
                             <Statistic
                                 title={<span style={whiteTextStyle}>Level</span>}
                                 value={statistics.level}
-                                prefix={<StarOutlined style={{ ...iconStyle, color: '#FFD700' }} />}
+                                prefix={<StarOutlined style={{...iconStyle, color: '#FFD700'}}/>}
                                 valueStyle={whiteTextStyle}
                             />
                         </Col>
                     </Row>
-                    <Row gutter={16} style={{ marginTop: '20px' }}>
+                    <Row gutter={16} style={{marginTop: '20px'}}>
                         <Col span={12}>
                             <Statistic
                                 title={<span style={whiteTextStyle}>XP</span>}
                                 value={statistics.xp}
-                                prefix={<ThunderboltOutlined style={{ ...iconStyle, color: '#ff4d4f' }} />}
+                                prefix={<ThunderboltOutlined style={{...iconStyle, color: '#ff4d4f'}}/>}
                                 valueStyle={whiteTextStyle}
                             />
                         </Col>
@@ -248,7 +247,7 @@ function Profile({ user_id = null }) {
                             <Statistic
                                 title={<span style={whiteTextStyle}>Multiplier</span>}
                                 value={statistics.total_multiplier?.toFixed(2)}
-                                prefix={<RiseOutlined style={{ ...iconStyle, color: '#FFA500' }} />}
+                                prefix={<RiseOutlined style={{...iconStyle, color: '#FFA500'}}/>}
                                 valueStyle={whiteTextStyle}
                             />
                         </Col>
@@ -270,14 +269,14 @@ function Profile({ user_id = null }) {
                         <Form.Item
                             name="biography"
                             rules={[
-                                { required: true, message: 'Please enter your biography' },
-                                { max: 5000, message: 'Biography cannot be longer than 5000 characters' }
+                                {required: true, message: 'Please enter your biography'},
+                                {max: 5000, message: 'Biography cannot be longer than 5000 characters'}
                             ]}
                         >
                             <Input.TextArea
                                 rows={4}
                                 maxLength={5000}
-                                autoSize={{ minRows: 4, maxRows: 10 }}
+                                autoSize={{minRows: 4, maxRows: 10}}
                                 value={profile.biography}
                             />
                         </Form.Item>
@@ -285,7 +284,7 @@ function Profile({ user_id = null }) {
                             <Button
                                 type="primary"
                                 htmlType="submit"
-                                style={{ ...gradientStyle, border: 'none' }}
+                                style={{...gradientStyle, border: 'none'}}
                             >
                                 Update Biography
                             </Button>
@@ -294,7 +293,7 @@ function Profile({ user_id = null }) {
                 </Card>
             )}
 
-            {user?.is_admin && (
+            {user?.is_admin && isOwnProfile &&(
                 <Button
                     type="primary"
                     style={{
diff --git a/src/components/TournamentHistory.js b/src/components/Profile/TournamentHistory.js
similarity index 98%
rename from src/components/TournamentHistory.js
rename to src/components/Profile/TournamentHistory.js
index 0e45c4a..23be2e8 100644
--- a/src/components/TournamentHistory.js
+++ b/src/components/Profile/TournamentHistory.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Layout, message, Spin, Table, Typography, Empty } 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';
diff --git a/src/context/AuthContext.js b/src/context/AuthContext.js
index 4f8ffbb..c91f640 100644
--- a/src/context/AuthContext.js
+++ b/src/context/AuthContext.js
@@ -32,6 +32,10 @@ export const AuthProvider = ({children}) => {
         }
     };
 
+    const setFirstLogin = async () => {
+        setUser({...user, is_first_login: false});
+    };
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const refreshAccessToken = async () => {
         try {
@@ -76,7 +80,7 @@ export const AuthProvider = ({children}) => {
     }, [refreshAccessToken, token]);
 
     return (
-        <AuthContext.Provider value={{user, login, logout, token, loading}}>
+        <AuthContext.Provider value={{user, login, logout, token, loading, setFirstLogin}}>
             {children}
         </AuthContext.Provider>
     );
diff --git a/src/pages/GoalSettingPage.js b/src/pages/GoalSettingPage.js
index a431c95..fd7cd5a 100644
--- a/src/pages/GoalSettingPage.js
+++ b/src/pages/GoalSettingPage.js
@@ -104,28 +104,32 @@ const goalOptions = [
         score: 1500,
         dailyQuestions: 5,
         weeklyQuestions: 40,
-        gradient: 'linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%)'
+        gradient: 'linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%)',
+        key: 'beginner'
     },
     {
         title: 'Steady Learner',
         score: 1540,
         dailyQuestions: 10,
         weeklyQuestions: 100,
-        gradient: 'linear-gradient(135deg, #e6f2ff 0%, #c3dafe 100%)'
+        gradient: 'linear-gradient(135deg, #e6f2ff 0%, #c3dafe 100%)',
+        key: 'intermediate'
     },
     {
         title: 'Advanced Track',
         score: 1570,
         dailyQuestions: 20,
         weeklyQuestions: 150,
-        gradient: 'linear-gradient(135deg, #f0fff4 0%, #9ae6b4 100%)'
+        gradient: 'linear-gradient(135deg, #f0fff4 0%, #9ae6b4 100%)',
+        key: 'advanced'
     },
     {
         title: 'Expert Challenge',
         score: 1600,
         dailyQuestions: 40,
         weeklyQuestions: 250,
-        gradient: 'linear-gradient(135deg, #fffaf0 0%, #fbd38d 100%)'
+        gradient: 'linear-gradient(135deg, #fffaf0 0%, #fbd38d 100%)',
+        key: 'expert'
     }
 ];
 
@@ -141,7 +145,7 @@ const GoalSettingPage = () => {
         if (selectedGoal) {
             try {
                 await api.post('api/set_goal/', {
-                    goal: selectedGoal.title
+                    goal: selectedGoal.key
                 });
                 navigate('/practice_test', { 
                     state: { 
diff --git a/src/pages/MatchingPage.js b/src/pages/MatchingPage.js
index 55f728a..ad09587 100644
--- a/src/pages/MatchingPage.js
+++ b/src/pages/MatchingPage.js
@@ -7,6 +7,7 @@ import {UserOutlined, RocketOutlined, LoadingOutlined, TeamOutlined} from '@ant-
 import styled, {keyframes} from 'styled-components';
 import '../styles/Match.css';
 import api from "../components/api"; // Assuming you have a CSS file for custom styles
+import MatchingModal from '../components/Match/MatchingModal';
 
 const {Title, Paragraph} = Typography;
 
@@ -151,7 +152,6 @@ const Match = () => {
     const {token, loading} = useAuth();
     const [matching, setMatching] = useState(false);
     const [roomId, setRoomIdInternal] = useState(null);
-    const [loadingMessage, setLoadingMessage] = useState(sentences[0]);
     const [onlineUsers, setOnlineUsers] = useState([]);
     const navigate = useNavigate();
 
@@ -162,12 +162,7 @@ const Match = () => {
         }
 
         try {
-            const baseUrl = process.env.REACT_APP_API_URL;
-            const response = await axios.get(`${baseUrl}/api/match/`, {
-                headers: {
-                    'Authorization': `Bearer ${token}`
-                }
-            });
+            const response = await api.get(`/api/match/`);
             setRoomIdInternal(response.data.id);
             if (response.data.full === 'true') {
                 setMatching(false);
@@ -184,9 +179,10 @@ const Match = () => {
     };
 
     const handleCancel = useCallback(async () => {
+        if (!roomId) return;
+        
         try {
-            const baseUrl = process.env.REACT_APP_API_URL;
-            await axios.post(`${baseUrl}/api/match/cancel_match/`, {
+            await api.post(`/api/match/cancel_match/`, {
                 room_id: roomId
             });
             setMatching(false);
@@ -198,7 +194,6 @@ const Match = () => {
         }
     }, [roomId]);
 
-
     const startMatchingTimeout = () => {
         setTimeout(async () => {
             if (matching) {
@@ -235,18 +230,6 @@ const Match = () => {
         }
     }, [roomId, token, navigate, matching]);
 
-    useEffect(() => {
-        if (matching) {
-            const interval = setInterval(() => {
-                setLoadingMessage((prev) => {
-                    const currentIndex = sentences.indexOf(prev);
-                    return sentences[(currentIndex + 1) % sentences.length];
-                });
-            }, 3000);
-            return () => clearInterval(interval);
-        }
-    }, [matching]);
-
     useEffect(() => {
         const rejoinRoom = async () => {
             try {
@@ -333,15 +316,12 @@ const Match = () => {
                     Compete with students worldwide and climb the leaderboards.
                 </HeroParagraph>
 
-                {matching ? (
-                    <div style={{textAlign: 'center', marginBottom: '40px'}}>
-                        <LoadingIcon/>
-                        <Paragraph style={{fontSize: '1.2rem', color: '#4A4A4A'}}>{loadingMessage}</Paragraph>
-                        <CancelButton onClick={handleCancel}>Cancel</CancelButton>
-                    </div>
-                ) : (
-                    <BigButton onClick={handleMatch}>Start a Duel</BigButton>
-                )}
+                <BigButton onClick={handleMatch}>Start a Duel</BigButton>
+
+                <MatchingModal 
+                    visible={matching}
+                    onCancel={handleCancel}
+                />
 
                 {/* Online Users Section */}
                 <OnlineUsersContainer>
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index acda3a8..9f42831 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -1,13 +1,13 @@
 import React, {useEffect} from 'react';
 import {useNavigate, useParams} from 'react-router-dom';
-import Profile from "../components/Profile";
+import Profile from "../components/Profile/Profile";
 import {Tabs, Card, message} from "antd";
-import FriendList from "../components/FriendList";
-import BattleHistory from "../components/BattleHistory";
-import Inventory from "../components/Inventory";
+import FriendList from "../components/Profile/FriendList";
+import BattleHistory from "../components/Profile/BattleHistory";
+import Inventory from "../components/Profile/Inventory";
 import {useAuth} from "../context/AuthContext";
 import { ShoppingCart } from 'lucide-react';
-import TournamentHistory from "../components/TournamentHistory";
+import TournamentHistory from "../components/Profile/TournamentHistory";
 
 const {TabPane} = Tabs;
 
@@ -29,13 +29,13 @@ const containerStyle = {
     minHeight: '100vh',
 };
 
-
 function ProfilePage() {
     const {userId} = useParams();
     const {token, loading} = useAuth();
     const isOwnProfile = !userId;
     const navigate = useNavigate();
 
+
     useEffect(() => {
         if (!loading && !token) {
             message.error("You need to be logged in to view profiles");
@@ -43,44 +43,45 @@ function ProfilePage() {
         }
     }, [navigate, token, loading]);
 
+
     return (
-        <div style={containerStyle}>
-            <Card style={cardStyle}>
-                <Tabs defaultActiveKey="1" type="card" animated={true}>
-                    <TabPane tab={<span style={tabStyle}>Profile</span>} key="1">
-                        <Profile user_id={userId}/>
-                    </TabPane>
-                    <TabPane tab={<span style={tabStyle}>Match History</span>} key="2">
-                        <BattleHistory user_id={userId}/>
-                    </TabPane>
-                    {isOwnProfile && (
-                        <TabPane tab={<span style={tabStyle}>Friends</span>} key="3">
-                            <FriendList/>
+            <div style={containerStyle}>
+                <Card style={cardStyle}>
+                    <Tabs defaultActiveKey="1" type="card" animated={true}>
+                        <TabPane tab={<span style={tabStyle}>Profile</span>} key="1">
+                            <Profile user_id={userId}/>
+                        </TabPane>
+                        <TabPane tab={<span style={tabStyle}>Match History</span>} key="2">
+                            <BattleHistory user_id={userId}/>
                         </TabPane>
-                    )}
-                    {isOwnProfile && (
-                        <TabPane tab={<span style={tabStyle}>Inventory</span>} key="4">
-                            <button
-                                onClick={() => navigate('/shop')}
-                                className="
-                                    inline-flex items-center px-4 py-2
-                                    bg-blue-500 text-white font-semibold rounded-lg
-                                    shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2
-                                    focus:ring-blue-400 focus:ring-opacity-75 transition-colors
-                                "
-                            >
-                                <ShoppingCart className="mr-2" size={20}/>
-                                Visit Shop
-                            </button>
-                            <Inventory/>
+                        {isOwnProfile && (
+                            <TabPane tab={<span style={tabStyle}>Friends</span>} key="3">
+                                <FriendList/>
+                            </TabPane>
+                        )}
+                        {isOwnProfile && (
+                            <TabPane tab={<span style={tabStyle}>Inventory</span>} key="4">
+                                <button
+                                    onClick={() => navigate('/shop')}
+                                    className="
+                                        inline-flex items-center px-4 py-2
+                                        bg-blue-500 text-white font-semibold rounded-lg
+                                        shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2
+                                        focus:ring-blue-400 focus:ring-opacity-75 transition-colors
+                                    "
+                                >
+                                    <ShoppingCart className="mr-2" size={20}/>
+                                    Visit Shop
+                                </button>
+                                <Inventory/>
+                            </TabPane>
+                        )}
+                        <TabPane tab={<span style={tabStyle}>Tournament History</span>} key="5">
+                            <TournamentHistory user_id={userId}/>
                         </TabPane>
-                    )}
-                    <TabPane tab={<span style={tabStyle}>Tournament History</span>} key="5">
-                        <TournamentHistory user_id={userId}/>
-                    </TabPane>
-                </Tabs>
-            </Card>
-        </div>
+                    </Tabs>
+                </Card>
+            </div>
     );
 }
 
diff --git a/src/pages/TrainerPage.js b/src/pages/TrainerPage.js
index 3b9c122..801a7cb 100644
--- a/src/pages/TrainerPage.js
+++ b/src/pages/TrainerPage.js
@@ -3,9 +3,7 @@ import React from 'react';
 import {Layout, Divider} from 'antd';
 import styled from 'styled-components';
 import {useAuth} from '../context/AuthContext';
-// Importing components
-// import WeeklyQuest from '../components/TrainerPageBoxes/QuestsSection';
-// import ModulesBoxComponent from '../components/TrainerPageBoxes/ModulesBox';
+
 
 import HeaderSection from '../components/TrainerPageBoxes/HeaderSection';
 import UserStatisticsCard from '../components/TrainerPageBoxes/UserStatistics';
diff --git a/src/pages/practice_test/PracticeTestPage.js b/src/pages/practice_test/PracticeTestPage.js
index fec8505..1facc2e 100644
--- a/src/pages/practice_test/PracticeTestPage.js
+++ b/src/pages/practice_test/PracticeTestPage.js
@@ -4,6 +4,7 @@ import { ClockCircleOutlined, BookOutlined, TrophyOutlined, RightOutlined, InfoC
 import {useNavigate, useLocation} from "react-router-dom";
 import { useState, useEffect, useRef } from 'react';
 import {useAuth} from "../../context/AuthContext";
+import api from "../../components/api";
 
 const { Title, Paragraph, Text } = Typography;
 const { Header, Content } = Layout;
@@ -14,7 +15,7 @@ const PracticeTestPage = () => {
     const location = useLocation();
     const [isTourOpen, setIsTourOpen] = useState(false);
     const diagnosticCardRef = useRef(null);
-    const {user} = useAuth();
+    const {user, setFirstLogin} = useAuth();
 
     useEffect(() => {
         // Show tour if user is new, coming from goal setting, or if it's their first login
@@ -62,6 +63,24 @@ const PracticeTestPage = () => {
         // Add more tests as needed
     ];
 
+    const handleTourClose = async () => {
+        setIsTourOpen(false);
+        
+        // Only update if user is logged in and it's their first login
+        if (user?.is_first_login) {
+            try {
+                // Update backend
+                await api.post('api/profile/update_first_login/');
+                
+                localStorage.setItem('is_first_login', 'false');
+                // Update user context if needed
+                setFirstLogin();
+            } catch (error) {
+                console.error('Failed to update first login status:', error);
+            }
+        }
+    };
+
     return (
         <Layout className="practice-test-layout">
             {/* Updated Hero Section */}
@@ -294,7 +313,7 @@ const PracticeTestPage = () => {
 
                 <Tour 
                     open={isTourOpen}
-                    onClose={() => setIsTourOpen(false)}
+                    onClose={handleTourClose}
                     steps={tourSteps}
                     mask={true}
                 />