Masked urls with environment variables

backend/nest-cli.json

@@ -0,0 +1,5 @@
+{
+    "collection": "@nestjs/schematics",
+    "sourceRoot": "src",
+    "entryFile": "backend/src/main.js"
+}

backend/src/notifications/notification.controller.ts

@@ -6,10 +6,8 @@ import { Notification } from '../../../middle-layer/types/Notification';
 @Controller('notifications')
 export class NotificationController {
 
-
   constructor(private readonly notificationService: NotificationService) { }
 
-
   // allows to create a new notification
   @Post()
   async create(@Body() notification: Partial<Notification>): Promise<Notification> {

backend/tsconfig.json

@@ -2,7 +2,7 @@
 {
     "compilerOptions": {
       "outDir": "./dist",
-      "rootDir": "../",
+      "rootDirs": ["./src", "../middle-layer"],
       "module": "commonjs",
       "target": "es2017",
       "experimentalDecorators": true,

frontend/src/Bell.tsx

@@ -21,7 +21,7 @@ const BellButton = () => {
   // function that handles when button is clicked and fetches notifications
   const handleClick = async () => {
     const response = await fetch(
-      `http://localhost:3001/notifications/user/${currUserID}`,
+      `${import.meta.env.VITE_SERVER_URL}/notifications/user/${currUserID}`,
       {
         method: "GET",
       }

frontend/src/Profile.tsx

@@ -19,7 +19,7 @@ const Profile = observer(() => {
     e.preventDefault();
 
     try {
-      const response = await fetch("http://localhost:3001/auth/update-profile", {
+      const response = await fetch(import.meta.env.VITE_SERVER_URL+"/auth/update-profile", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",

frontend/src/Register.tsx

@@ -16,7 +16,7 @@ const Register = observer(() => {
     e.preventDefault();
 
     try {
-      const response = await fetch("http://localhost:3001/auth/register", {
+      const response = await fetch(import.meta.env.VITE_SERVER_URL+"/auth/register", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ username, password, email }),
@@ -30,7 +30,7 @@ const Register = observer(() => {
       }
 
       // If registration succeeded, automatically log in the user
-      const loginResponse = await fetch("http://localhost:3001/auth/login", {
+      const loginResponse = await fetch(import.meta.env.VITE_SERVER_URL+"/auth/login", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ username, password }),

frontend/src/context/auth/authContext.tsx

@@ -33,7 +33,7 @@ export const AuthProvider = observer(({ children }: { children: ReactNode }) =>
    * Attempt to log in the user
    */
   const login = async (username: string, password: string) => {
-    const response = await fetch('http://localhost:3001/auth/login', {
+    const response = await fetch(import.meta.env.VITE_SERVER_URL+'/auth/login', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ username, password }),
@@ -54,7 +54,7 @@ export const AuthProvider = observer(({ children }: { children: ReactNode }) =>
    * Register a new user and automatically log them in
    */
   const register = async (username: string, password: string, email: string) => {
-    const response = await fetch('http://localhost:3001/auth/register', {
+    const response = await fetch(import.meta.env.VITE_SERVER_URL+'/auth/register', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ username, password, email }),

frontend/src/grant-info/components/GrantItem.tsx

@@ -37,7 +37,7 @@ const GrantItem: React.FC<GrantItemProps> = ({ grant }) => {
       try {
         console.log("Saving grant!");
         console.log(curGrant);
-        const response = await fetch("http://localhost:3001/grant/save", {
+        const response = await fetch(import.meta.env.VITE_SERVER_URL+"/grant/save", {
           method: "PUT",
           headers: {
             "Content-Type": "application/json",

frontend/src/grant-info/components/GrantLabels.tsx

@@ -18,7 +18,7 @@ const GrantLabels: React.FC<{
   }
 
   return (
-    <ul className="grant-labels grid grid-cols-4 justify-stretch font-semibold p-4">
+    <ul className="grant-labels grid grid-cols-4 justify-stretch font-semibold pt-4">
       <li className="text-center">
         <button
           className="grant-name"

frontend/src/grant-info/components/GrantList.tsx

@@ -19,7 +19,7 @@ import { Grant } from "../../../../middle-layer/types/Grant.ts";
 // How many items to show per page
 const fetchGrants = async () => {
   try {
-    const response = await fetch("http://localhost:3001/grant");
+    const response = await fetch(import.meta.env.VITE_SERVER_URL + "/grant");
     if (!response.ok) {
       throw new Error(`HTTP Error, Status: ${response.status}`);
     }
@@ -104,13 +104,14 @@ const GrantList: React.FC = observer(() => {
       */}
       <PaginationRoot defaultPage={1} count={totalPages}>
         {/* Actual grants for the current page */}
+        <div className="bg-light-orange rounded-[1.2rem] pt-2">
         <GrantLabels onSort={HandleHeaderClick} />
-        <div className="grant-list p-4">
+        <div className="grant-list p-4 ">
         {grants.map(grant => (
           <GrantItem key={grant.grantId} grant={grant} />
         ))}
         </div>
-
+        </div>
         {/* 
            Paging Controls:
             - Prev / Next triggers