From c1a8f04dc75a311e491963223c87294d991ef332 Mon Sep 17 00:00:00 2001
From: Jagraj Aulakh <aulakhjagraj@gmail.com>
Date: Fri, 14 Apr 2023 12:55:43 -0400
Subject: [PATCH] #57 makeRequest uses env variable so all requests use the
 configuration

---
 docker-compose.yml                        | 18 ++++++++++++++++++
 frontend/src/components/CoursesWidget.jsx |  2 +-
 frontend/src/pages/CoursePage.jsx         |  2 +-
 frontend/src/pages/ManagePage.jsx         |  2 +-
 frontend/src/pages/ManageStudentsPage.jsx |  6 +++---
 frontend/src/pages/RegisterPage.jsx       |  2 +-
 frontend/src/utils.ts                     | 10 ++++++----
 7 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index e158f1c..f6bb35a 100644
--- a/docker-compose.yml
+++ b/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
diff --git a/frontend/src/components/CoursesWidget.jsx b/frontend/src/components/CoursesWidget.jsx
index 02fa5d2..02e0524 100644
--- a/frontend/src/components/CoursesWidget.jsx
+++ b/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);
diff --git a/frontend/src/pages/CoursePage.jsx b/frontend/src/pages/CoursePage.jsx
index ac62920..4615e30 100644
--- a/frontend/src/pages/CoursePage.jsx
+++ b/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);
diff --git a/frontend/src/pages/ManagePage.jsx b/frontend/src/pages/ManagePage.jsx
index 469458b..4ee573b 100644
--- a/frontend/src/pages/ManagePage.jsx
+++ b/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())
diff --git a/frontend/src/pages/ManageStudentsPage.jsx b/frontend/src/pages/ManageStudentsPage.jsx
index 2da86f2..11fec09 100644
--- a/frontend/src/pages/ManageStudentsPage.jsx
+++ b/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();
diff --git a/frontend/src/pages/RegisterPage.jsx b/frontend/src/pages/RegisterPage.jsx
index 83cec48..af2ca48 100644
--- a/frontend/src/pages/RegisterPage.jsx
+++ b/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,
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
index a8d050e..58e5906 100644
--- a/frontend/src/utils.ts
+++ b/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())