Merge pull request #166 from CS3219-AY2425S1/chore/server-constants

Remove all hardcoded localhost

Author: jq1836

.env.sample

@@ -5,6 +5,8 @@ COMPOSE_FILE=docker-compose.yml:docker-compose.dev.yml
 
 ## Frontend variables
 FRONTEND_PORT=3000
+# BASE_URI only needs to be provided if hosting outside of cluster
+BASE_URI=
 
 ## Question service variables
 QUESTION_SVC_PORT=

docker-compose.yml

@@ -2,11 +2,18 @@ services:
   frontend:
     build:
       context: ./frontend
+      args:
+        - BASE_URI=$BASE_URI
+        - USER_SVC_PORT=$USER_SVC_PORT
+        - QUESTION_SVC_PORT=$QUESTION_SVC_PORT
+        - MATCHING_SVC_PORT=$MATCHING_SVC_PORT
     ports:
       - $FRONTEND_PORT:$FRONTEND_PORT
     depends_on:
       - question-service
       - user-service
+    environment:
+      - PORT=$FRONTEND_PORT
 
   question-service:
     build:
@@ -16,6 +23,7 @@ services:
     environment:
       - PORT=$QUESTION_SVC_PORT
       - DB_URI=$QUESTION_SVC_DB_URI
+      - FRONTEND_PORT=$FRONTEND_PORT
 
   user-service:
     build:

frontend/.dockerignore

@@ -1,2 +1,3 @@
 node_modules
+package-lock.json
 .next

frontend/Dockerfile

@@ -1,9 +1,17 @@
 # Base stage
 FROM node:20-alpine AS base
+ARG BASE_URI \
+    USER_SVC_PORT \
+    QUESTION_SVC_PORT \
+    MATCHING_SVC_PORT
 WORKDIR /app
 COPY package.json .
 COPY yarn.lock .
 RUN yarn install --frozen-lockfile
+ENV NEXT_PUBLIC_BASE_URI=$BASE_URI \
+    NEXT_PUBLIC_USER_SVC_PORT=$USER_SVC_PORT \
+    NEXT_PUBLIC_QUESTION_SVC_PORT=$QUESTION_SVC_PORT \
+    NEXT_PUBLIC_MATCHING_SVC_PORT=$MATCHING_SVC_PORT
 
 # Production build stage
 FROM base AS build

frontend/app/auth/auth-context.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { userServiceUri } from "@/lib/api-uri";
 import { User, UserSchema } from "@/lib/schemas/user-schema";
 import { useRouter } from "next/navigation";
 import {
@@ -32,7 +33,7 @@ const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   // Login using locally stored JWT token
   useEffect(() => {
     if (token) {
-      fetch("http://localhost:3001/auth/verify-token", {
+      fetch(`${userServiceUri(window.location.hostname)}/auth/verify-token`, {
         method: "GET",
         headers: {
           Authorization: `Bearer ${token}`,
@@ -51,16 +52,19 @@ const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
 
   // Login using email and password
   const login = async (email: string, password: string): Promise<User> => {
-    const response = await fetch("http://localhost:3001/auth/login", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        email,
-        password,
-      }),
-    });
+    const response = await fetch(
+      `${userServiceUri(window.location.hostname)}/auth/login`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          email,
+          password,
+        }),
+      }
+    );
 
     if (!response.ok) {
       throw new Error("Not OK");

frontend/components/admin-user-management/admin-user-management.tsx

@@ -16,6 +16,7 @@ import LoadingScreen from "@/components/common/loading-screen";
 import AdminEditUserModal from "@/components/admin-user-management/admin-edit-user-modal";
 import { PencilIcon, Trash2Icon } from "lucide-react";
 import { User, UserArraySchema } from "@/lib/schemas/user-schema";
+import { userServiceUri } from "@/lib/api-uri";
 
 const fetcher = async (url: string): Promise<User[]> => {
   const token = localStorage.getItem("jwtToken");
@@ -43,7 +44,7 @@ export default function AdminUserManagement() {
   const auth = useAuth();
 
   const { data, isLoading, mutate } = useSWR(
-    "http://localhost:3001/users",
+    `${userServiceUri(window.location.hostname)}/users`,
     fetcher
   );
 
@@ -67,12 +68,15 @@ export default function AdminUserManagement() {
       throw new Error("No authentication token found");
     }
 
-    const response = await fetch(`http://localhost:3001/users/${userId}`, {
-      method: "DELETE",
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
+    const response = await fetch(
+      `${userServiceUri(window.location.hostname)}/users/${userId}`,
+      {
+        method: "DELETE",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
 
     if (!response.ok) {
       throw new Error("Failed to delete user");

frontend/components/forget-password.tsx

@@ -15,6 +15,7 @@ import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { AlertCircle } from "lucide-react";
+import { userServiceUri } from "@/lib/api-uri";
 
 const ForgetPassword: React.FC = () => {
   const [email, setEmail] = useState("");
@@ -35,7 +36,7 @@ const ForgetPassword: React.FC = () => {
 
     try {
       const response = await fetch(
-        "http://localhost:3001/users/forget-password",
+        `${userServiceUri(window.location.hostname)}/users/forget-password`,
         {
           method: "POST",
           headers: {

frontend/components/questions/questions-listing.tsx

@@ -18,6 +18,7 @@ import {
 } from "@/lib/schemas/question-schema";
 import QuestionFormModal from "./question-form-modal";
 import { updateQuestion } from "@/lib/update-question";
+import { questionServiceUri } from "@/lib/api-uri";
 
 const fetcher = async (url: string): Promise<Question[]> => {
   const token = localStorage.getItem("jwtToken");
@@ -55,7 +56,7 @@ export default function QuestionListing() {
   const [search, setSearch] = useState(searchParams.get("search") || "");
 
   const { data, isLoading, mutate } = useSWR(
-    `http://localhost:8000/questions?category=${encodeURIComponent(category)}&complexity=${encodeURIComponent(complexity)}&search=${encodeURIComponent(search)}`,
+    `${questionServiceUri(window.location.hostname)}/questions?category=${encodeURIComponent(category)}&complexity=${encodeURIComponent(complexity)}&search=${encodeURIComponent(search)}`,
     fetcher,
     {
       keepPreviousData: true,
@@ -144,7 +145,7 @@ export default function QuestionListing() {
     try {
       const token = localStorage.getItem("jwtToken");
       const response = await fetch(
-        "http://localhost:8000/questions/batch-upload",
+        `${questionServiceUri(window.location.hostname)}/questions/batch-upload`,
         {
           method: "POST",
           headers: {
@@ -189,7 +190,7 @@ export default function QuestionListing() {
 
     try {
       const response = await fetch(
-        `http://localhost:8000/questions/${selectedQuestion.id}`,
+        `${questionServiceUri(window.location.hostname)}/questions/${selectedQuestion.id}`,
         {
           method: "DELETE",
         }
@@ -262,18 +263,21 @@ export default function QuestionListing() {
 
   const handleCreate = async (newQuestion: Question) => {
     try {
-      const response = await fetch("http://localhost:8000/questions", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          title: newQuestion.title,
-          description: newQuestion.description,
-          category: newQuestion.category,
-          complexity: newQuestion.complexity,
-        }),
-      });
+      const response = await fetch(
+        `${questionServiceUri(window.location.hostname)}/questions`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            title: newQuestion.title,
+            description: newQuestion.description,
+            category: newQuestion.category,
+            complexity: newQuestion.complexity,
+          }),
+        }
+      );
 
       if (!response.ok) {
         if (response.status == 409) {

frontend/components/user-settings/user-settings.tsx

@@ -24,6 +24,7 @@ import LoadingScreen from "@/components/common/loading-screen";
 import { useAuth } from "@/app/auth/auth-context";
 import { cn } from "@/lib/utils";
 import { User, UserSchema } from "@/lib/schemas/user-schema";
+import { userServiceUri } from "@/lib/api-uri";
 
 const fetcher = async (url: string): Promise<User> => {
   // Retrieve the JWT token from localStorage
@@ -54,7 +55,7 @@ export default function UserSettings({ userId }: { userId: string }) {
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const { data, error, isLoading, mutate } = useSWR(
-    `http://localhost:3001/users/${userId}`,
+    `${userServiceUri(window.location.hostname)}/users/${userId}`,
     fetcher
   );
   const [user, setUser] = useState<User | null>(null);
@@ -139,14 +140,17 @@ export default function UserSettings({ userId }: { userId: string }) {
       }
 
       try {
-        const response = await fetch(`http://localhost:3001/users/${userId}`, {
-          method: "PATCH",
-          headers: {
-            Authorization: `Bearer ${token}`,
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(user),
-        });
+        const response = await fetch(
+          `${userServiceUri(window.location.hostname)}/users/${userId}`,
+          {
+            method: "PATCH",
+            headers: {
+              Authorization: `Bearer ${token}`,
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(user),
+          }
+        );
         if (!response.ok) {
           throw new Error("Failed to save changes");
         } else {
@@ -177,13 +181,16 @@ export default function UserSettings({ userId }: { userId: string }) {
     }
 
     try {
-      const response = await fetch(`http://localhost:3001/users/${userId}`, {
-        method: "DELETE",
-        headers: {
-          Authorization: `Bearer ${token}`,
-          "Content-Type": "application/json",
-        },
-      });
+      const response = await fetch(
+        `${userServiceUri(window.location.hostname)}/users/${userId}`,
+        {
+          method: "DELETE",
+          headers: {
+            Authorization: `Bearer ${token}`,
+            "Content-Type": "application/json",
+          },
+        }
+      );
       if (!response.ok) throw new Error("Failed to delete account");
 
       console.log("Account deleted successfully!");
@@ -237,7 +244,7 @@ export default function UserSettings({ userId }: { userId: string }) {
 
     try {
       const response = await fetch(
-        `http://localhost:3001/users/${userId}/change-password`,
+        `${userServiceUri(window.location.hostname)}/users/${userId}/change-password`,
         {
           method: "PATCH",
           headers: {

frontend/lib/api-uri.ts

@@ -0,0 +1,9 @@
+const constructUri = (baseUri: string, port: string | undefined) =>
+  `http://${process.env.NEXT_PUBLIC_BASE_URI || baseUri}:${port}`;
+
+export const userServiceUri: (baseUri: string) => string = (baseUri) =>
+  constructUri(baseUri, process.env.NEXT_PUBLIC_USER_SVC_PORT);
+export const questionServiceUri: (baseUri: string) => string = (baseUri) =>
+  constructUri(baseUri, process.env.NEXT_PUBLIC_QUESTION_SVC_PORT);
+export const matchingServiceUri: (baseUri: string) => string = (baseUri) =>
+  constructUri(baseUri, process.env.NEXT_PUBLIC_MATCHING_SVC_PORT);