LXC Url

src/pages/HomePage.jsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState, useContext } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import CardRow from '../components/CardRow/CardRow';
 import SearchBar from '../components/SearchBar/SearchBar';
-import { fetchCards } from '../services/api';
 import { CardContext } from '../store/CardContext';
+import { fetchCards, fetchCardImage } from '../services/api';
 
 // Debounce hook
 function useDebouncedValue(value, delay = 250) {
@@ -34,14 +34,12 @@ function HomePage() {
   }, []);
 
   // Load image for the currently expanded card
+
   useEffect(() => {
     if (!expandedCardId || cardImages[expandedCardId]) return;
 
-    fetch(`http://localhost:3000/cardImage/${expandedCardId}`)
+    fetchCardImage(expandedCardId)
-      .then(res => res.json())
+      .then(image => setCardImage(expandedCardId, image))
-      .then(data => {
-        if (data.image) setCardImage(expandedCardId, data.image);
-      })
       .catch(err => console.error('Failed to load card image', err));
   }, [expandedCardId, cardImages, setCardImage]);
 

src/services/api.jsx

@@ -1,7 +1,14 @@
-const API_BASE = 'http://localhost:3000'; // Backend URL
+const API_BASE = 'http://192.168.178.41:3000'; // Backend URL
 
 export async function fetchCards() {
   const response = await fetch(`${API_BASE}/exportCards`);
   if (!response.ok) throw new Error('Failed to fetch cards');
   return await response.json();
 }
+
+export async function fetchCardImage(cardId) {
+  const response = await fetch(`${API_BASE}/cardImage/${cardId}`);
+  if (!response.ok) throw new Error('Failed to fetch card image');
+  const data = await response.json();
+  return data.image;
+}