From c8c22925016c477f844c895bbd2c0d12e5acf1b1 Mon Sep 17 00:00:00 2001
From: Stijnvandenbroek <70574420+Stijnvandenbroek@users.noreply.github.com>
Date: Mon, 30 Jun 2025 09:43:11 +0200
Subject: [PATCH] fix: replace hardcoded ip address with api url var

---
 frontend/Dockerfile             | 4 +---
 frontend/package.json           | 3 ++-
 frontend/src/App.js             | 2 +-
 frontend/src/components/Quiz.js | 9 +++++----
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index e9532d5..5a41026 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -18,7 +18,5 @@ EXPOSE 4000
 ENV PORT=4000
 ENV WDS_SOCKET_PORT=0
 
-# Create an .env file at build time
-RUN echo "REACT_APP_API_URL=http://localhost:8000" > .env
-
+# Use environment variables from docker-compose at runtime
 CMD ["npm", "start"]
diff --git a/frontend/package.json b/frontend/package.json
index 0370fa6..32a00d8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -40,5 +40,6 @@
   },
   "devDependencies": {
     "cross-env": "^7.0.3"
-  }
+  },
+  "proxy": "http://backend:8000"
 }
diff --git a/frontend/src/App.js b/frontend/src/App.js
index af89ad5..d7bbe7b 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -93,7 +93,7 @@ function App() {
 
     const handleRetryQuiz = async () => {
         try {
-            await axios.post('http://10.0.0.3:8000/reset-session/', {
+            await axios.post('http://backend:8000/reset-session/', {
                 session_id: sessionId,
             });
             setIsTransitioning(true);
diff --git a/frontend/src/components/Quiz.js b/frontend/src/components/Quiz.js
index 71f7151..831f98c 100644
--- a/frontend/src/components/Quiz.js
+++ b/frontend/src/components/Quiz.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 
 const Quiz = ({ sessionId, onGoHome, onRetry }) => {
+    const API_URL = process.env.REACT_APP_API_URL;
     const [questionData, setQuestionData] = useState(null);
     const [selectedAnswers, setSelectedAnswers] = useState([]);
     const [userAnswer, setUserAnswer] = useState('');
@@ -144,7 +145,7 @@ const Quiz = ({ sessionId, onGoHome, onRetry }) => {
 
     const fetchQuestion = async () => {
         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);
 
             if (response.data.message === 'Quiz complete!') {
@@ -170,7 +171,7 @@ const Quiz = ({ sessionId, onGoHome, onRetry }) => {
 
     const fetchQuizStats = async () => {
         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);
             setCorrectAnswersCount(response.data.correct_answers);
             setIncorrectAnswersCount(response.data.incorrect_answers);
@@ -217,7 +218,7 @@ const Quiz = ({ sessionId, onGoHome, onRetry }) => {
         }
     
         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;
             setFeedback(result);
             setIsFeedbackVisible(true);
@@ -238,7 +239,7 @@ const Quiz = ({ sessionId, onGoHome, onRetry }) => {
     const moveQuestionToBottom = async () => {
         try {
             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,
                 question_index: questionIndex,
             });