fix: replace hardcoded ip address with api url var

This commit is contained in:
Stijnvandenbroek
2025-06-30 09:43:11 +02:00
parent 16e2032f9e
commit c8c2292501
4 changed files with 9 additions and 9 deletions

View File

@@ -18,7 +18,5 @@ EXPOSE 4000
ENV PORT=4000 ENV PORT=4000
ENV WDS_SOCKET_PORT=0 ENV WDS_SOCKET_PORT=0
# Create an .env file at build time # Use environment variables from docker-compose at runtime
RUN echo "REACT_APP_API_URL=http://localhost:8000" > .env
CMD ["npm", "start"] CMD ["npm", "start"]

View File

@@ -40,5 +40,6 @@
}, },
"devDependencies": { "devDependencies": {
"cross-env": "^7.0.3" "cross-env": "^7.0.3"
} },
"proxy": "http://backend:8000"
} }

View File

@@ -93,7 +93,7 @@ function App() {
const handleRetryQuiz = async () => { const handleRetryQuiz = async () => {
try { try {
await axios.post('http://10.0.0.3:8000/reset-session/', { await axios.post('http://backend:8000/reset-session/', {
session_id: sessionId, session_id: sessionId,
}); });
setIsTransitioning(true); setIsTransitioning(true);

View File

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
const Quiz = ({ sessionId, onGoHome, onRetry }) => { const Quiz = ({ sessionId, onGoHome, onRetry }) => {
const API_URL = process.env.REACT_APP_API_URL;
const [questionData, setQuestionData] = useState(null); const [questionData, setQuestionData] = useState(null);
const [selectedAnswers, setSelectedAnswers] = useState([]); const [selectedAnswers, setSelectedAnswers] = useState([]);
const [userAnswer, setUserAnswer] = useState(''); const [userAnswer, setUserAnswer] = useState('');
@@ -144,7 +145,7 @@ const Quiz = ({ sessionId, onGoHome, onRetry }) => {
const fetchQuestion = async () => { const fetchQuestion = async () => {
try { try {
const response = await axios.get(`http://10.0.0.3:8000/next-question/?session_id=${sessionId}`); const response = await axios.get(`${API_URL}/next-question/?session_id=${sessionId}`);
console.log("Fetched Question Data:", response.data); console.log("Fetched Question Data:", response.data);
if (response.data.message === 'Quiz complete!') { if (response.data.message === 'Quiz complete!') {
@@ -170,7 +171,7 @@ const Quiz = ({ sessionId, onGoHome, onRetry }) => {
const fetchQuizStats = async () => { const fetchQuizStats = async () => {
try { try {
const response = await axios.get(`http://10.0.0.3:8000/quiz-stats/?session_id=${sessionId}`); const response = await axios.get(`${API_URL}/quiz-stats/?session_id=${sessionId}`);
setTotalQuestions(response.data.total_questions); setTotalQuestions(response.data.total_questions);
setCorrectAnswersCount(response.data.correct_answers); setCorrectAnswersCount(response.data.correct_answers);
setIncorrectAnswersCount(response.data.incorrect_answers); setIncorrectAnswersCount(response.data.incorrect_answers);
@@ -217,7 +218,7 @@ const Quiz = ({ sessionId, onGoHome, onRetry }) => {
} }
try { try {
const response = await axios.post('http://10.0.0.3:8000/submit-answer/', submissionData); const response = await axios.post(`${API_URL}/submit-answer/`, submissionData);
const result = response.data.result; const result = response.data.result;
setFeedback(result); setFeedback(result);
setIsFeedbackVisible(true); setIsFeedbackVisible(true);
@@ -238,7 +239,7 @@ const Quiz = ({ sessionId, onGoHome, onRetry }) => {
const moveQuestionToBottom = async () => { const moveQuestionToBottom = async () => {
try { try {
const questionIndex = questionData.question_index; const questionIndex = questionData.question_index;
await axios.post(`http://10.0.0.3:8000/move-question-to-bottom/`, { await axios.post(`${API_URL}/move-question-to-bottom/`, {
session_id: sessionId, session_id: sessionId,
question_index: questionIndex, question_index: questionIndex,
}); });