Resolved issues, ready for publish

SAT-Duel · Jul 16, 2024 · 5edc9ae · 5edc9ae
1 parent 5086852
commit 5edc9ae
Show file tree

Hide file tree

Showing 23 changed files with 116 additions and 75 deletions.
diff --git a/.env.development b/.env.development
@@ -0,0 +1 @@
+REACT_APP_API_URL=http://localhost:8000
diff --git a/.env.production b/.env.production
@@ -0,0 +1 @@
+REACT_APP_API_URL=https://satduel-e07814415d4e.herokuapp.com
diff --git a/src/components/BattleHistory.js b/src/components/BattleHistory.js
@@ -40,7 +40,8 @@ const MatchHistory = ({ user_id = null }) => {
     useEffect(() => {
         const fetchMatchHistory = async () => {
             try {
-                const url = isOwnHistory ? '/api/match/get_match_history/' : `/api/match/get_match_history/${user_id}/`;
+                const baseUrl = process.env.REACT_APP_API_URL;
+                const url = isOwnHistory ? `${baseUrl}/api/match/get_match_history/` : `${baseUrl}/api/match/get_match_history/${user_id}/`;
                 const response = await axios.get(url, {
                     headers: {
                         Authorization: `Bearer ${token}`

diff --git a/src/components/ConfirmEmail.js b/src/components/ConfirmEmail.js
@@ -1,18 +1,19 @@
 // src/ConfirmEmail.js
-import React, {useEffect, useState} from 'react';
-import {useParams, useNavigate} from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
 import axios from 'axios';
-import {message, Spin} from 'antd';
+import { message, Spin } from 'antd';
 
 const ConfirmEmail = () => {
-    const {key} = useParams();
+    const { key } = useParams();
     const navigate = useNavigate();
     const [loading, setLoading] = useState(true);
 
     useEffect(() => {
         const confirmEmail = async () => {
             try {
-                await axios.post('/auth/registration/verify-email/', {
+                const baseUrl = process.env.REACT_APP_API_URL;
+                await axios.post(`${baseUrl}/auth/registration/verify-email/`, {
                     key: key
                 });
                 message.success('Email confirmed successfully!');
@@ -28,8 +29,8 @@ const ConfirmEmail = () => {
     }, [key, navigate]);
 
     return (
-        <div style={{textAlign: 'center', marginTop: '50px'}}>
-            {loading ? <Spin size="large"/> : null}
+        <div style={{ textAlign: 'center', marginTop: '50px' }}>
+            {loading ? <Spin size="large" /> : null}
         </div>
     );
 };

diff --git a/src/components/FriendList.js b/src/components/FriendList.js
@@ -11,7 +11,8 @@ const FriendsList = () => {
     useEffect(() => {
         const fetchFriends = async () => {
             try {
-                const response = await axios.get('/api/profile/friends/', {
+                const baseUrl = process.env.REACT_APP_API_URL;
+                const response = await axios.get(`${baseUrl}/api/profile/friends/`, {
                     headers: {
                         'Authorization': `Bearer ${token}`
                     }
@@ -49,4 +50,4 @@ const FriendsList = () => {
     );
 };
 
-export default FriendsList;
+export default FriendsList;
diff --git a/src/components/FriendRequest.js b/src/components/FriendRequest.js
@@ -10,7 +10,8 @@ const FriendRequests = () => {
     useEffect(() => {
         const fetchFriendRequests = async () => {
             try {
-                const response = await axios.get('/api/profile/friend_requests/', {
+                const baseUrl = process.env.REACT_APP_API_URL;
+                const response = await axios.get(`${baseUrl}/api/profile/friend_requests/`, {
                     headers: {
                         'Authorization': `Bearer ${token}`
                     }
@@ -26,7 +27,8 @@ const FriendRequests = () => {
 
     const respondToRequest = async (requestId, status) => {
         try {
-            await axios.post(`/api/profile/respond_friend_request/${requestId}/`, { status }, {
+            const baseUrl = process.env.REACT_APP_API_URL;
+            await axios.post(`${baseUrl}/api/profile/respond_friend_request/${requestId}/`, { status }, {
                 headers: {
                     'Authorization': `Bearer ${token}`
                 }

diff --git a/src/components/Profile.js b/src/components/Profile.js
@@ -45,7 +45,8 @@ function Profile({user_id = null}) {
     useEffect(() => {
         const fetchProfile = async () => {
             try {
-                const url = isOwnProfile ? '/api/profile/' : `/api/profile/view_profile/${user_id}/`;
+                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}`
@@ -73,7 +74,8 @@ function Profile({user_id = null}) {
     const onFinish = async (values) => {
         if (!isOwnProfile) return;
         try {
-            const response = await axios.patch('/api/profile/update_biography/', values, {
+            const baseUrl = process.env.REACT_APP_API_URL;
+            const response = await axios.patch(`${baseUrl}/api/profile/update_biography/`, values, {
                 headers: {
                     'Authorization': `Bearer ${token}`
                 }
@@ -95,7 +97,8 @@ function Profile({user_id = null}) {
 
     const sendFriendRequest = async () => {
         try {
-            await axios.post('/api/profile/send_friend_request/',
+            const baseUrl = process.env.REACT_APP_API_URL;
+            await axios.post(`${baseUrl}/api/profile/send_friend_request/`,
                 {to_user_id: user_id},
                 {
                     headers: {

diff --git a/src/components/Question.js b/src/components/Question.js
@@ -133,7 +133,8 @@ function Question({questionData, onSubmit, status, questionNumber}) {
     useEffect(() => {
         const getAnswer = async () => {
             try {
-                const response = await axios.post('/api/get_answer/', {question_id: id});
+                const baseUrl = process.env.REACT_APP_API_URL;
+                const response = await axios.post(`${baseUrl}/api/get_answer/`, {question_id: id});
                 setAnswer(response.data.answer);
                 setExplanation(response.data.explanation);
                 setAnswerChoice(response.data.answer_choice);
@@ -217,4 +218,4 @@ function Question({questionData, onSubmit, status, questionNumber}) {
     );
 }
 
-export default Question;
+export default Question;
diff --git a/src/components/SearchUser.js b/src/components/SearchUser.js
@@ -15,7 +15,8 @@ const SearchUsers = () => {
         setQuery(value); // Update the query state with the current search input
         if (value) {
             try {
-                const response = await axios.get(`/api/profile/search/?q=${value}`, {
+                const baseUrl = process.env.REACT_APP_API_URL;
+                const response = await axios.get(`${baseUrl}/api/profile/search/?q=${value}`, {
                     headers: {
                         'Authorization': `Bearer ${token}`
                     }

diff --git a/src/context/AuthContext.js b/src/context/AuthContext.js
@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useState, useEffect } from 'react';
 import axios from "axios";
 import Cookies from 'js-cookie';
-import {message} from 'antd';
+import { message } from 'antd';
 
 const AuthContext = createContext(null);
 
@@ -21,7 +21,8 @@ export const AuthProvider = ({ children }) => {
 
     const logout = async () => {
         try {
-            let response = await axios.post('/api/logout/');
+            const baseUrl = process.env.REACT_APP_API_URL;
+            let response = await axios.post(`${baseUrl}/api/logout/`);
             setUser(null);
             setToken(null);
             Cookies.remove('accessToken');
@@ -36,7 +37,8 @@ export const AuthProvider = ({ children }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const refreshAccessToken = async () => {
         try {
-            const response = await axios.post('/api/token/refresh/', {
+            const baseUrl = process.env.REACT_APP_API_URL;
+            const response = await axios.post(`${baseUrl}/api/token/refresh/`, {
                 refresh: JSON.parse(Cookies.get('refreshToken'))
             });
             const newAccessToken = response.data.access;
@@ -58,7 +60,7 @@ export const AuthProvider = ({ children }) => {
             console.error('Error getting user from cookie', error);
         }
         setLoading(false);
-    },[loading]);
+    }, [loading]);
 
     useEffect(() => {
         if (token) {

diff --git a/src/hooks/useOpponentProgress.js b/src/hooks/useOpponentProgress.js
@@ -4,7 +4,8 @@ import { useAuth } from "../context/AuthContext";
 
 const fetchOpponentProgress = async ({ roomId, token, setOpponentProgress }) => {
     try {
-        const response = await axios.post('/api/match/get_opponent_progress/', {
+        const baseUrl = process.env.REACT_APP_API_URL;
+        const response = await axios.post(`${baseUrl}/api/match/get_opponent_progress/`, {
             room_id: roomId,
         }, {
             headers: {

diff --git a/src/pages/BattleResultPage.js b/src/pages/BattleResultPage.js
@@ -163,11 +163,11 @@ function BattleResultPage() {
     const [results, setResults] = useState(null);
     const navigate = useNavigate();
 
-
     useEffect(() => {
         const fetchResults = async () => {
             try {
-                const response = await axios.post('/api/match/get_results/', {
+                const baseUrl = process.env.REACT_APP_API_URL;
+                const response = await axios.post(`${baseUrl}/api/match/get_results/`, {
                     room_id: roomId,
                 });
                 setResults(response.data);
@@ -193,29 +193,35 @@ function BattleResultPage() {
     const user2Score = calculateScore(results.user2_results);
     const winner = user1Score > user2Score ? results.user1_results[0].user.username :
         user2Score > user1Score ? results.user2_results[0].user.username : 'Tie';
+
     const setWinner = async (winner) => {
         try {
-            await axios.post('/api/match/set_winner/', {
+            const baseUrl = process.env.REACT_APP_API_URL;
+            await axios.post(`${baseUrl}/api/match/set_winner/`, {
                 room_id: roomId,
                 winner: winner
             });
         } catch (err) {
             console.error('Error setting winner:', err);
         }
-    }
+    };
+
     const setScore = async () => {
         try {
-            await axios.post('/api/match/set_score/', {
+            const baseUrl = process.env.REACT_APP_API_URL;
+            await axios.post(`${baseUrl}/api/match/set_score/`, {
                 room_id: roomId,
                 user1_score: user1Score,
                 user2_score: user2Score,
             });
         } catch (err) {
             console.error('Error setting score:', err);
         }
-    }
+    };
+
     setScore();
     setWinner(winner);
+
     return (
         <PageBackground>
             <ResultPageContainer>
@@ -256,4 +262,4 @@ function BattleResultPage() {
     );
 }
 
-export default BattleResultPage;
+export default BattleResultPage;
diff --git a/src/pages/DuelBattlePage.js b/src/pages/DuelBattlePage.js
@@ -50,7 +50,6 @@ const TimeDisplay = styled.div`
     margin-top: 16px;
 `;
 
-
 const DuelBattle = () => {
     const {token, loading} = useAuth(); // Get the token from the AuthContext
     const {roomId} = useParams(); // Get the roomId from the URL params
@@ -62,11 +61,11 @@ const DuelBattle = () => {
     const [timeLeft, setTimeLeft] = useState(null);
     const navigate = useNavigate();
 
-
     useEffect(() => {
         const fetchEndTime = async () => {
             try {
-                const response = await axios.post('/api/match/get_end_time/',
+                const baseUrl = process.env.REACT_APP_API_URL;
+                const response = await axios.post(`${baseUrl}/api/match/get_end_time/`,
                     {
                         room_id: roomId
                     });
@@ -82,11 +81,11 @@ const DuelBattle = () => {
     useEffect(() => {
         const endMatch = async () => {
             try {
-                await axios.post('/api/match/end_match/', {
+                const baseUrl = process.env.REACT_APP_API_URL;
+                await axios.post(`${baseUrl}/api/match/end_match/`, {
                     room_id: roomId
                 });
-            } catch
-                (err) {
+            } catch (err) {
                 message.error(err.response.data.error || 'An error occurred while ending the match.');
             }
         };
@@ -119,7 +118,8 @@ const DuelBattle = () => {
     useOpponentProgress(roomId, setOpponentProgress);
 
     const fetchTrackedQuestions = async (roomId, token) => {
-        const response = await axios.post('/api/match/questions/', {
+        const baseUrl = process.env.REACT_APP_API_URL;
+        const response = await axios.post(`${baseUrl}/api/match/questions/`, {
             room_id: roomId
         }, {
             headers: {
@@ -131,7 +131,8 @@ const DuelBattle = () => {
 
     // Fetch full question details for a given question ID
     const fetchQuestionDetails = async (questionId, token) => {
-        const response = await axios.post('/api/get_question/', {
+        const baseUrl = process.env.REACT_APP_API_URL;
+        const response = await axios.post(`${baseUrl}/api/get_question/`, {
             question_id: questionId
         }, {
             headers: {
@@ -142,8 +143,6 @@ const DuelBattle = () => {
     };
 
     // Combine tracked questions with their full details
-
-
     useEffect(() => {
         const combineQuestionsWithDetails = async (trackedQuestions, token) => {
             const questionPromises = trackedQuestions.map(async (trackedQuestion) => {
@@ -180,15 +179,17 @@ const DuelBattle = () => {
     }, [roomId, token, loading]);
 
     const checkAnswer = async (id, choice) => {
-        console.log(`Question: ${id}, Chosen answer: ${choice}`);
-        const response = await axios.post('/api/check_answer/', {
+        const baseUrl = process.env.REACT_APP_API_URL;
+        const response = await axios.post(`${baseUrl}/api/check_answer/`, {
             question_id: id,
             selected_choice: choice
         });
         return response.data.result;
     };
+
     const updateStatus = async (tracked_question_id, result) => {
-        const response = await axios.post('/api/match/update/', {
+        const baseUrl = process.env.REACT_APP_API_URL;
+        const response = await axios.post(`${baseUrl}/api/match/update/`, {
                 tracked_question_id: tracked_question_id,
                 result: result
             },
@@ -204,7 +205,8 @@ const DuelBattle = () => {
             ));
         }
         console.log(response.data);
-    }
+    };
+
     const handleQuestionSubmit = async (id, choice) => {
         const trackedQuestionId = trackedQuestionMap[id]; // Get the tracked question ID from the map
         const result = await checkAnswer(id, choice);
@@ -218,7 +220,6 @@ const DuelBattle = () => {
         return <div>Loading battle information...</div>;
     }
 
-
     return (
         <DuelBattleContainer>
             <QuestionsSection>

diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
@@ -171,7 +171,7 @@ function HomePage() {
                 <Row gutter={16}>
                     <Col>
                         <StyledButton>
-                            <Link to="/questions">Start Practice</Link>
+                            <Link to="/trainer">Start Practice</Link>
                         </StyledButton>
                     </Col>
                     <Col>

diff --git a/src/pages/InfiniteQuestionPage.js b/src/pages/InfiniteQuestionPage.js
@@ -89,7 +89,8 @@ function InfiniteQuestionsPage() {
     const fetchNextQuestion = async () => {
         try {
             setLoading(true);
-            const response = await axios.get('/api/questions/?num=1');
+            const baseUrl = process.env.REACT_APP_API_URL;
+            const response = await axios.get(`${baseUrl}/api/questions/?num=1`);
             setCurrentQuestion(response.data[0]);
             setQuestionStatus('Blank');
         } catch (error) {
@@ -108,7 +109,8 @@ function InfiniteQuestionsPage() {
 
     const handleQuestionSubmit = async (id, choice) => {
         try {
-            const response = await axios.post('/api/check_answer/', {
+            const baseUrl = process.env.REACT_APP_API_URL;
+            const response = await axios.post(`${baseUrl}/api/check_answer/`, {
                 question_id: id,
                 selected_choice: choice
             });
@@ -175,4 +177,4 @@ function InfiniteQuestionsPage() {
     );
 }
 
-export default InfiniteQuestionsPage;
+export default InfiniteQuestionsPage;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		REACT_APP_API_URL=https://satduel-e07814415d4e.herokuapp.com