From 9f25fe3228690ec43b7f99ad36768c738999f77d Mon Sep 17 00:00:00 2001 From: Ravindranbit Date: Tue, 28 Apr 2026 16:31:48 +0530 Subject: [PATCH] Refactor API URLs to use centralized buildApiUrl utility and environment variables --- .env.example | 1 + components/gallery/CreateEventForm.tsx | 5 +++-- components/gallery/CreateEventGalleryForm.tsx | 5 +++-- components/gallery/EditEventForm.tsx | 7 ++++--- components/gallery/ListOfEventGallery.tsx | 5 +++-- components/gallery/ListOfEvents.tsx | 5 +++-- utils/BaseUrl.utils.js | 14 +++++++++++++- 7 files changed, 30 insertions(+), 12 deletions(-) create mode 100644 .env.example diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..4e8331d --- /dev/null +++ b/.env.example @@ -0,0 +1 @@ +NEXT_PUBLIC_API_BASE_URL=http://localhost:3000/api/ \ No newline at end of file diff --git a/components/gallery/CreateEventForm.tsx b/components/gallery/CreateEventForm.tsx index 945a207..df39541 100644 --- a/components/gallery/CreateEventForm.tsx +++ b/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(`/`) diff --git a/components/gallery/CreateEventGalleryForm.tsx b/components/gallery/CreateEventGalleryForm.tsx index 19e0e8e..bda7edf 100644 --- a/components/gallery/CreateEventGalleryForm.tsx +++ b/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 = ({ 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 = ({ eventId }) => { // Step 3: Call bulk API await axios.post( - `https://api.tamilculturewaterloo.org/api/event-images/bulk`, + buildApiUrl('event-images/bulk'), body ); diff --git a/components/gallery/EditEventForm.tsx b/components/gallery/EditEventForm.tsx index 550b832..adaa67b 100644 --- a/components/gallery/EditEventForm.tsx +++ b/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 = ({ 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 = ({ 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 = ({ 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('/'); diff --git a/components/gallery/ListOfEventGallery.tsx b/components/gallery/ListOfEventGallery.tsx index 40b32d2..94ac554 100644 --- a/components/gallery/ListOfEventGallery.tsx +++ b/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 = ({ 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 = ({ 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.', diff --git a/components/gallery/ListOfEvents.tsx b/components/gallery/ListOfEvents.tsx index 29bff49..5ac63e8 100644 --- a/components/gallery/ListOfEvents.tsx +++ b/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.', diff --git a/utils/BaseUrl.utils.js b/utils/BaseUrl.utils.js index 80053e7..8831b80 100644 --- a/utils/BaseUrl.utils.js +++ b/utils/BaseUrl.utils.js @@ -1 +1,13 @@ -export const Baseurl = "https://api.tamilculturewaterloo.org/api/" \ No newline at end of file +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}`; +}; \ No newline at end of file