Refactor API URLs to use centralized buildApiUrl utility and environment variables

.env.example

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

components/gallery/CreateEventForm.tsx

@@ -4,6 +4,7 @@ import IconTrashLines from '../icon/icon-trash-lines';
 import axios from 'axios';
 import { useRouter } from 'next/navigation';
 import { showMessage } from '@/utils/CommonFunction.utils';
+import { buildApiUrl } from '@/utils/BaseUrl.utils';
 
 interface FormValues {
     year: string;
@@ -85,7 +86,7 @@ const CreateEventForm: React.FC = () => {
         }
 
         try {
-            const ImageUpload = await axios.post(`https://api.tamilculturewaterloo.org/api/upload/single`, data, {
+            const ImageUpload = await axios.post(buildApiUrl('upload/single'), data, {
                 headers: {
                     "Content-Type": "multipart/form-data", // important for file upload
                 },
@@ -99,7 +100,7 @@ const CreateEventForm: React.FC = () => {
                 eventimageurl: ImageUpload?.data?.data?.fullUrl
             }
 
-            const res = await axios.post(`https://api.tamilculturewaterloo.org/api/events`, createData)
+            const res = await axios.post(buildApiUrl('events'), createData)
             console.log("res", res)
             showMessage("Event Created Successfully", "success")
             router?.push(`/`)

components/gallery/CreateEventGalleryForm.tsx

@@ -3,6 +3,7 @@ import React, { useState, ChangeEvent, FormEvent } from 'react';
 import IconTrashLines from '../icon/icon-trash-lines';
 import axios from 'axios';
 import { useRouter } from 'next/navigation';
+import { buildApiUrl } from '@/utils/BaseUrl.utils';
 
 interface FormErrors {
     [key: string]: string;
@@ -61,7 +62,7 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
                 formData.append(`files`, file);
             });
 
-            const uploadRes = await axios.post(`https://api.tamilculturewaterloo.org/api/upload/multiple`, formData)
+            const uploadRes = await axios.post(buildApiUrl('upload/multiple'), formData)
             console.log("uploadres", uploadRes)
             const uploadedUrls = uploadRes?.data?.data?.map((image: any) => image?.fullUrl) || [];
 
@@ -75,7 +76,7 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
 
             // Step 3: Call bulk API
             await axios.post(
-                `https://api.tamilculturewaterloo.org/api/event-images/bulk`,
+                buildApiUrl('event-images/bulk'),
                 body
             );
 

components/gallery/EditEventForm.tsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect, ChangeEvent, FormEvent } from 'react';
 import IconTrashLines from '../icon/icon-trash-lines';
 import axios from 'axios';
 import { useRouter } from 'next/navigation';
+import { buildApiUrl } from '@/utils/BaseUrl.utils';
 
 interface FormValues {
     year: string;
@@ -43,7 +44,7 @@ const EditEventForm: React.FC<EditEventFormProps> = ({ eventId }) => {
 
     const getEvent = async () => {
         try {
-            const res = await axios.get(`https://api.tamilculturewaterloo.org/api/events/${eventId}`);
+            const res = await axios.get(buildApiUrl(`events/${eventId}`));
             const data = res?.data?.data;
 
             setFormData({
@@ -124,7 +125,7 @@ const EditEventForm: React.FC<EditEventFormProps> = ({ eventId }) => {
                 imgFormData.append('file', formData.eventimageurl);
 
                 const uploadRes = await axios.post(
-                    'https://api.tamilculturewaterloo.org/api/upload/single',
+                    buildApiUrl('upload/single'),
                     imgFormData,
                     { headers: { 'Content-Type': 'multipart/form-data' } }
                 );
@@ -140,7 +141,7 @@ const EditEventForm: React.FC<EditEventFormProps> = ({ eventId }) => {
                 eventimageurl: imageUrl,
             };
 
-            const res = await axios.put(`https://api.tamilculturewaterloo.org/api/events/${eventId}`, updatedData, );
+            const res = await axios.put(buildApiUrl(`events/${eventId}`), updatedData, );
 
             console.log('Event updated:', res.data);
             router.push('/');

components/gallery/ListOfEventGallery.tsx

@@ -9,6 +9,7 @@ import axios from 'axios';
 import { useRouter } from 'next/navigation';
 import IconTrashLines from '../icon/icon-trash-lines';
 import Swal from 'sweetalert2';
+import { buildApiUrl } from '@/utils/BaseUrl.utils';
 
 interface EditEventFormProps {
     eventId: string | null;
@@ -29,7 +30,7 @@ const ListOfEventsGallery: React.FC<EditEventFormProps> = ({ eventId }) => {
 
     const getEventGallery = async () => {
         try {
-            const res = await axios.get(`https://api.tamilculturewaterloo.org/api/event-images/event/${eventId}`);
+            const res = await axios.get(buildApiUrl(`event-images/event/${eventId}`));
             const formatted = res.data?.data?.map((img: any) => ({
                 id: img.id, // ensure ID is preserved for deletion
                 src: img.imageurl,
@@ -58,7 +59,7 @@ const ListOfEventsGallery: React.FC<EditEventFormProps> = ({ eventId }) => {
         }).then(async (result) => {
             if (result.isConfirmed) {
                 try {
-                    await axios.delete(`https://api.tamilculturewaterloo.org/api/event-images/${item.id}`);
+                    await axios.delete(buildApiUrl(`event-images/${item.id}`));
                     Swal.fire({
                         title: 'Deleted!',
                         text: 'Your file has been deleted.',

components/gallery/ListOfEvents.tsx

@@ -7,6 +7,7 @@ import IconTrashLines from '../icon/icon-trash-lines';
 import IconPencil from '../icon/icon-pencil';
 import Swal from 'sweetalert2';
 import { useRouter } from 'next/navigation';
+import { buildApiUrl } from '@/utils/BaseUrl.utils';
 
 export const metadata: Metadata = {
     title: 'Knowledge Base',
@@ -23,7 +24,7 @@ const ListOfEvents = () => {
 
     const getEvents = async () => {
         try {
-            const eventRes: any = await axios?.get(`https://api.tamilculturewaterloo.org/api/events`)
+            const eventRes: any = await axios?.get(buildApiUrl('events'))
             console.log("eventRes", eventRes)
             setEvents(eventRes?.data?.data)
         } catch (error) {
@@ -61,7 +62,7 @@ const ListOfEvents = () => {
         }).then(async (result) => {
             if (result.isConfirmed) {
                 try {
-                    await axios.delete(`https://api.tamilculturewaterloo.org/api/events/${event.id}`);
+                    await axios.delete(buildApiUrl(`events/${event.id}`));
                     Swal.fire({
                         title: 'Deleted!',
                         text: 'Your file has been deleted.',

utils/BaseUrl.utils.js

@@ -1 +1,13 @@
-export const Baseurl = "https://api.tamilculturewaterloo.org/api/"
+const DEFAULT_BASE_URL = 'https://api.tamilculturewaterloo.org/api/';
+
+const configuredBaseUrl =
+	typeof process !== 'undefined' && process.env.NEXT_PUBLIC_API_BASE_URL
+		? process.env.NEXT_PUBLIC_API_BASE_URL
+		: DEFAULT_BASE_URL;
+
+export const Baseurl = configuredBaseUrl.endsWith('/') ? configuredBaseUrl : `${configuredBaseUrl}/`;
+
+export const buildApiUrl = (path) => {
+	const normalizedPath = String(path).replace(/^\/+/, '');
+	return `${Baseurl}${normalizedPath}`;
+};