From 96d05c68818da461ab2376d6fa67a74f8d2cbfa0 Mon Sep 17 00:00:00 2001 From: divkokal Date: Fri, 24 Jul 2026 15:01:45 +0100 Subject: [PATCH] chore: configure API URL for deployment --- example.env | 2 ++ src/config/api.js | 4 ++++ src/hooks/useSyncUser.js | 4 +++- src/messaging/apiConnection/listingApi.js | 7 +++++-- src/messaging/apiConnection/threadApi.js | 9 ++++++--- src/pages/Browse.jsx | 3 ++- src/pages/Dashboard.jsx | 3 ++- src/pages/Listing.jsx | 3 ++- src/utils/uploadToCloudinary.js | 4 ++-- 9 files changed, 28 insertions(+), 11 deletions(-) create mode 100644 src/config/api.js diff --git a/example.env b/example.env index e84c602..38913b9 100644 --- a/example.env +++ b/example.env @@ -1,3 +1,5 @@ VITE_CLERK_PUBLISHABLE_KEY= VITE_CLOUDINARY_CLOUD_NAME= + +VITE_API_URL= \ No newline at end of file diff --git a/src/config/api.js b/src/config/api.js new file mode 100644 index 0000000..12f909a --- /dev/null +++ b/src/config/api.js @@ -0,0 +1,4 @@ +const API_URL = + import.meta.env.VITE_API_URL || "http://localhost:3000"; + +export default API_URL; \ No newline at end of file diff --git a/src/hooks/useSyncUser.js b/src/hooks/useSyncUser.js index ef18cd9..d1d53bd 100644 --- a/src/hooks/useSyncUser.js +++ b/src/hooks/useSyncUser.js @@ -1,5 +1,7 @@ import { useEffect } from "react"; import { useAuth } from "@clerk/react"; +import API_URL from "../config/api"; + // On sign-in, tell the backend to create / refresh this user's DB row export default function useSyncUser() { @@ -12,7 +14,7 @@ export default function useSyncUser() { // Send the logged-in user to the backend to be saved const syncUser = async () => { const token = await getToken(); // Proves identity to the backend - await fetch("http://localhost:3000/api/me", { + await fetch(`${API_URL}/api/me`, { method: "POST", headers: { Authorization: `Bearer ${token}` }, // Attach the token }).catch((err) => console.error("User sync failed:", err)); diff --git a/src/messaging/apiConnection/listingApi.js b/src/messaging/apiConnection/listingApi.js index 6134d40..8216324 100644 --- a/src/messaging/apiConnection/listingApi.js +++ b/src/messaging/apiConnection/listingApi.js @@ -3,8 +3,11 @@ // This function sends the data to the Express backend. // The backend will save it and send a response back. // Sends the user's Clerk token to the backend + +import API_URL from "../../config/api"; + export async function createListing(data, token) { - const response = await fetch("http://localhost:3000/api/listings", { + const response = await fetch(`${API_URL}/api/listings`, { method: "POST", headers: { "Content-Type": "application/json", @@ -22,7 +25,7 @@ export async function createListing(data, token) { // Get all listings from the backend/database export async function getListings() { - const response = await fetch("http://localhost:3000/api/listings"); + const response = await fetch(`${API_URL}/api/listings`); if (!response.ok) { throw new Error("Failed to fetch listings"); diff --git a/src/messaging/apiConnection/threadApi.js b/src/messaging/apiConnection/threadApi.js index bf0f034..18ba4f1 100644 --- a/src/messaging/apiConnection/threadApi.js +++ b/src/messaging/apiConnection/threadApi.js @@ -1,10 +1,13 @@ +import API_URL from "../../config/api"; + + export async function getThreads() { - const response = await fetch('/api/threads'); + const response = await fetch('${API_URL}/api/threads'); return response.json(); } export async function createOrGetThread(data) { - const response = await fetch('/api/threads', { + const response = await fetch('${API_URL}/api/threads', { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -16,7 +19,7 @@ export async function createOrGetThread(data) { } export async function sendMessage(threadId, text) { - const response = await fetch(`/api/threads/${threadId}/messages`, { + const response = await fetch(`${API_URL}/api/threads/${threadId}/messages`, { method: 'POST', headers: { 'Content-Type': 'application/json', diff --git a/src/pages/Browse.jsx b/src/pages/Browse.jsx index 9a65c95..7ffdabb 100644 --- a/src/pages/Browse.jsx +++ b/src/pages/Browse.jsx @@ -2,6 +2,7 @@ import { useEffect, useState } from "react"; import { Text, Container, SimpleGrid, Stack, Title } from "@mantine/core"; import { ListingSearchBar } from "../components/ListingSearchBar/ListingSearchBar"; import { BrowserCard } from "../components/BrowserCard/BrowserCard"; +import API_URL from "../config/api"; export default function Browse() { // Store listings returned from backend @@ -27,7 +28,7 @@ export default function Browse() { } // Fetch filtered listing from Express backend - fetch(`http://localhost:3000/api/items?${queryParams.toString()}`) + fetch(`${API_URL}/api/items${queryParams.toString()}`) .then((response) => { console.log("Backend response", response); return response.json(); diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx index 68803ff..01c4a52 100644 --- a/src/pages/Dashboard.jsx +++ b/src/pages/Dashboard.jsx @@ -13,6 +13,7 @@ import { } from "@mantine/core"; import { useNavigate, Link } from "react-router-dom"; import { useAuth } from "@clerk/react"; +import API_URL from "../config/api"; function ListingCard({ item }) { const navigate = useNavigate(); @@ -87,7 +88,7 @@ export default function Dashboard() { try { const token = await getToken(); - const response = await fetch("http://localhost:3000/api/my-listings", { + const response = await fetch(`${API_URL}/api/my-listings`, { headers: { Authorization: `Bearer ${token}`, }, diff --git a/src/pages/Listing.jsx b/src/pages/Listing.jsx index 2fa9472..fee3c12 100644 --- a/src/pages/Listing.jsx +++ b/src/pages/Listing.jsx @@ -2,6 +2,7 @@ import { useState, useEffect } from "react"; import { useParams } from "react-router-dom"; import Map from "../components/Map/Map"; import ListingCard from "../components/ListingCard/ListingCard"; +import API_URL from "../config/api"; export default function Listing() { const { id } = useParams(); // the :id from /listing/:id @@ -10,7 +11,7 @@ export default function Listing() { // Fetch the listing whenever the component mounts or the id changes useEffect(() => { - fetch(`http://localhost:3000/api/items/${id}`) + fetch(`${API_URL}/api/items/${id}`) .then((res) => { if (res.status === 404) { setStatus("notfound"); diff --git a/src/utils/uploadToCloudinary.js b/src/utils/uploadToCloudinary.js index 2224de3..002aed1 100644 --- a/src/utils/uploadToCloudinary.js +++ b/src/utils/uploadToCloudinary.js @@ -1,8 +1,8 @@ -const BASE_URL = "http://localhost:3000"; +import API_URL from "../config/api"; export async function uploadToCloudinary(file) { // Ask our backend for a signed signature - const sigRes = await fetch(`${BASE_URL}/api/cloudinary/signature`); + const sigRes = await fetch(`${API_URL}/api/cloudinary/signature`); if (!sigRes.ok) throw new Error("Could not get upload signature"); const { timestamp, signature, apiKey, cloudName } = await sigRes.json();