feat: support API endpoint from env

Author: angristan

.env.example

@@ -0,0 +1 @@
+REACT_APP_API_ENDPOINT=http://localhost:3000

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 build/
 .idea
+.env

src/api/BenchmarkServices.ts

@@ -9,7 +9,7 @@ export class BenchmarkServices {
     difficulty: string,
   ): Promise<benchmarkModel> {
     const res: AxiosResponse<benchmarkModel> = await axios.post(
-      'http://localhost:3000/benchmarks',
+      `${process.env.REACT_APP_API_ENDPOINT}/benchmarks`,
       {
         title,
         subject,
@@ -26,14 +26,16 @@ export class BenchmarkServices {
   }
 
   static async getAllBenchmarks(): Promise<benchmarkModel[]> {
-    return axios.get('http://localhost:3000/benchmarks').then((response) => {
-      return response.data;
-    });
+    return axios
+      .get(`${process.env.REACT_APP_API_ENDPOINT}/benchmarks`)
+      .then((response) => {
+        return response.data;
+      });
   }
 
   static async getBenchmarkById(id: string): Promise<benchmarkModel> {
     return axios
-      .get('http://localhost:3000/benchmarks/' + id)
+      .get(`${process.env.REACT_APP_API_ENDPOINT}/benchmarks/${id}`)
       .then((response) => {
         return response.data;
       });

src/api/auth.ts

@@ -2,7 +2,7 @@ import axios, { AxiosResponse } from 'axios';
 
 const login = async (username: string, password: string): Promise<string> => {
   const res: AxiosResponse<{ access_token: string }> = await axios.post(
-    'http://localhost:3000/auth/login',
+    `${process.env.REACT_APP_API_ENDPOINT}/auth/login`,
     {
       username,
       password,

src/api/submissions.ts

@@ -16,17 +16,20 @@ function useProcessInterval({
 
   // 1: Handle code submission
   async function createJob(code: string) {
-    const response = await fetch('http://localhost:3000/submissions', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${token}`,
+    const response = await fetch(
+      `${process.env.REACT_APP_API_ENDPOINT}/submissions`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          language: 'cpython3',
+          code: code,
+        }),
       },
-      body: JSON.stringify({
-        language: 'cpython3',
-        code: code,
-      }),
-    });
+    );
     return await response.json();
   }
 
@@ -50,11 +53,14 @@ function useProcessInterval({
     ['processProgress', token, processId],
     async () => {
       const res: AxiosResponse<{ status: string; output: string }> =
-        await axios.get(`http://localhost:3000/submissions/${processId}`, {
-          headers: {
-            Authorization: `Bearer ${token}`,
+        await axios.get(
+          `${process.env.REACT_APP_API_ENDPOINT}/submissions/${processId}`,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
           },
-        });
+        );
       return res.data;
     },
     {

src/api/users.ts

@@ -6,11 +6,14 @@ function useProfile() {
   const { token } = useToken();
 
   return useQuery<{ email: string }, Error>('profile', async () => {
-    const { data } = await axios.get('http://localhost:3000/users/stan', {
-      headers: {
-        Authorization: `Bearer ${token}`,
+    const { data } = await axios.get(
+      `${process.env.REACT_APP_API_ENDPOINT}/users/stan`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
       },
-    });
+    );
     return data;
   });
 }