#57 makeRequest uses env variable so all requests use the configuration

docker-compose.yml

@@ -4,11 +4,29 @@ services:
     image: comp2707-frontend
     build: frontend/
     container_name: comp2707-frontend
+    environment:
+      - BACKEND_URL="http://backend:5000"
     ports:
       - 8080:8080
   backend:
     image: comp2707-backend
     build: backend/
     container_name: comp2707-backend
+    environment:
+      - DB_HOST=db
+      - DB_USER=joe
+      - DB_PASSWORD=mama
     ports:
       - 5000:5000
+  db:
+    image: mariadb:latest
+    environment:
+      - MARIADB_USER=joe
+      - MARIADB_PASWWORD=mama
+      - MARIADB_ROOT_PASSWORD=mama
+    volumes:
+      - db-volume:/var/lib/mysql
+
+volumes:
+  db-volume:
+    driver: local

frontend/src/components/CoursesWidget.jsx

@@ -12,7 +12,7 @@ const CoursesWidget = ({ className = "" }) => {
     if (!currentUser.id) {
       return;
     }
-    makeRequest({ url: `http://localhost:5000/user/${currentUser.id}/courses` })
+    makeRequest({ endpoint: `user/${currentUser.id}/courses` })
       .then((resp) => resp.json())
       .then((data) => {
         setCourseData(data.courses);

frontend/src/pages/CoursePage.jsx

@@ -7,7 +7,7 @@ const CoursePage = ({ id }) => {
   const [courseData, setCourseData] = useState({});
 
   useEffect(() => {
-    makeRequest({ url: `http://localhost:5000/course/${id}` })
+    makeRequest({ endpoint: `course/${id}` })
       .then((resp) => resp.json())
       .then((data) => {
         setCourseData(data);

frontend/src/pages/ManagePage.jsx

@@ -11,7 +11,7 @@ const ManagePage = () => {
 
   useEffect(() => {
     makeRequest({
-      url: `http://localhost:5000/user/${currentUser.id}/courses`,
+      endpoint: `user/${currentUser.id}/courses`,
       method: "GET",
     })
       .then((req) => req.json())

frontend/src/pages/ManageStudentsPage.jsx

@@ -9,7 +9,7 @@ const ManageStutentsPage = ({ cid }) => {
 
   const submitStudentForm = async (username) => {
     await makeRequest({
-      url: `http://localhost:5000/user/${username}/enroll/${cid}`,
+      endpoint: `user/${username}/enroll/${cid}`,
       method: "POST",
     });
     window.location.reload();
@@ -48,7 +48,7 @@ const ManageStutentsPage = ({ cid }) => {
   };
   useEffect(() => {
     makeRequest({
-      url: `http://localhost:5000/course/${cid}/students`,
+      endpoint: `course/${cid}/students`,
       method: "GET",
     })
       .then((req) => req.json())
@@ -62,7 +62,7 @@ const ManageStutentsPage = ({ cid }) => {
 
   const sendUnenrollRequest = (uid) => {
     makeRequest({
-      url: `http://localhost:5000/user/${uid}/enroll/${cid}`,
+      endpoint: `user/${uid}/enroll/${cid}`,
       method: "DELETE",
     }).then((resp) => {
       window.location.reload();

frontend/src/pages/RegisterPage.jsx

@@ -17,7 +17,7 @@ const RegisterPage = () => {
   const sendRegisterRequest = (e) => {
     e?.preventDefault();
     makeRequest({
-      url: "http://localhost:5000/register",
+      endpoint: "register",
       method: "POST",
       body: {
         role,

frontend/src/utils.ts

@@ -1,4 +1,6 @@
-const makeRequest = ({ url, method, body = null }): Promise<Response> => {
+const { REACT_APP_BACKEND_URL } = process.env;
+
+const makeRequest = ({ endpoint, method, body = null }): Promise<Response> => {
   const req: RequestInit = {
     method: method,
     credentials: "include",
@@ -8,7 +10,7 @@ const makeRequest = ({ url, method, body = null }): Promise<Response> => {
   if (body) {
     req["body"] = JSON.stringify(body);
   }
-  return fetch(url, req);
+  return fetch(`${REACT_APP_BACKEND_URL}/${endpoint}`, req);
 };
 
 const sendLoginRequest = async (
@@ -17,7 +19,7 @@ const sendLoginRequest = async (
 ): Promise<object> => {
   const p: Promise<object> = new Promise(async (res) => {
     await makeRequest({
-      url: "http://localhost:5000/login",
+      endpoint: "login",
       method: "POST",
       body: { username, password },
     })
@@ -36,7 +38,7 @@ const sendLoginRequest = async (
 const sendLogoutRequest = async (): Promise<object> => {
   const p: Promise<object> = new Promise(async (res) => {
     await makeRequest({
-      url: "http://localhost:5000/logout",
+      endpoint: "logout",
       method: "POST",
     })
       .then((resp) => resp.json())