feat: rename frontend env var and add auth header

Author: tituschewxj

apps/frontend/.env.example

@@ -1,3 +1,3 @@
 # Replace with the corresponding url, credentials and endpoint
-NEXT_PUBLIC_API_URL="http://localhost:8080/"
+NEXT_PUBLIC_QUESTION_SERVICE_URL="http://localhost:8080/"
 NEXT_PUBLIC_USER_SERVICE_URL="http://localhost:3001/"

apps/frontend/Dockerfile

@@ -1,9 +1,5 @@
 FROM node:18-alpine AS base
 
-# For now we can specify it here, else we can use --build-arg in our docker build command
-ARG NEXT_PUBLIC_API_URL
-ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
-
 # Install dependencies only when needed
 FROM base AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.

apps/frontend/README.md

@@ -23,7 +23,7 @@ pnpm install
 Then, follow the `.env.example` file and create a `.env` file in the current directory. Replace the necessary values within.
 
 ```bash
-NEXT_PUBLIC_API_URL=http://localhost:8080
+NEXT_PUBLIC_QUESTION_SERVICE_URL=http://localhost:8080
 ```
 
 First, run the development server:
@@ -42,7 +42,7 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update
 # Navigate to the frontend app directory
 cd apps/frontend
 # Build dockerfile (Ensure that your docker daemon is running beforehand)
-docker build -t frontend --build-arg NEXT_PUBLIC_API_URL="http://localhost:8080/" -f Dockerfile .
+docker build -t frontend -e NEXT_PUBLIC_QUESTION_SERVICE_URL="http://localhost:8080/" -f Dockerfile .
 ```
 
 Run the backend server locally and visit http://localhost:3000/ to see the frontend application working

apps/frontend/src/app/services/question.ts

@@ -1,3 +1,7 @@
+import { getToken } from "./login-store";
+
+const QUESTION_SERVICE_URL = process.env.NEXT_PUBLIC_QUESTION_SERVICE_URL;
+
 export interface Question {
   id: number;
   docRefId: string;
@@ -37,7 +41,7 @@ export const GetQuestions = async (
   categories?: string[],
   title?: string
 ): Promise<QuestionListResponse> => {
-  let query_url = `${process.env.NEXT_PUBLIC_API_URL}questions`;
+  let query_url = `${QUESTION_SERVICE_URL}questions`;
   let query_params = "";
 
   if (currentPage) {
@@ -73,15 +77,26 @@ export const GetQuestions = async (
   }
 
   query_url += query_params;
-  const response = await fetch(query_url);
+  const response = await fetch(query_url, {
+    method: "GET",
+    headers: {
+      'Authorization': `Bearer ${getToken()}`,
+    }
+  });
   const data = await response.json();
   return data;
 };
 
 // Get single question
 export const GetSingleQuestion = async (docRef: string): Promise<Question> => {
   const response = await fetch(
-    `${process.env.NEXT_PUBLIC_API_URL}questions/${docRef}`
+    `${QUESTION_SERVICE_URL}questions/${docRef}`,
+    {
+      method: "GET",
+      headers: {
+        'Authorization': `Bearer ${getToken()}`,
+      }
+    }
   );
   const data = await response.json();
   return data;
@@ -91,10 +106,11 @@ export const GetSingleQuestion = async (docRef: string): Promise<Question> => {
 export const CreateQuestion = async (
   question: NewQuestion
 ): Promise<Question> => {
-  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}questions`, {
+  const response = await fetch(`${QUESTION_SERVICE_URL}questions`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      'Authorization': `Bearer ${getToken()}`,
     },
     body: JSON.stringify(question),
   });
@@ -113,11 +129,12 @@ export const EditQuestion = async (
   docRefId: string
 ): Promise<Question> => {
   const response = await fetch(
-    `${process.env.NEXT_PUBLIC_API_URL}questions/${docRefId}`,
+    `${QUESTION_SERVICE_URL}questions/${docRefId}`,
     {
       method: "PUT",
       headers: {
         "Content-Type": "application/json",
+        'Authorization': `Bearer ${getToken()}`,
       },
       body: JSON.stringify(question),
     }
@@ -135,9 +152,12 @@ export const EditQuestion = async (
 // Delete single question (TODO: Ryan)
 export async function DeleteQuestion(docRef: String): Promise<void> {
   const res = await fetch(
-    `${process.env.NEXT_PUBLIC_API_URL}questions/${docRef}`,
+    `${QUESTION_SERVICE_URL}questions/${docRef}`,
     {
       method: "DELETE",
+      headers: {
+        'Authorization': `Bearer ${getToken()}`,
+      },
     }
   );
   // error handling later