Fix Network Error exceptions in all production components

dawidolko · dawidolko · commit 2dc856573492 · 2026-02-13T04:12:45.000+01:00
- Fix CartPreview component to use mockAPI instead of direct API calls
- Add config.useMockData validation in CartContent fetchProducts method
- Fix NewProducts component with null checks for undefined photos array
- Add mock data support to Testimonials and ProductSlider components
- Prevent TypeError: Cannot read properties of undefined (reading '0')
- Eliminate all localhost:8000 API calls on GitHub Pages production
- Add PLACEHOLDER_IMAGE fallbacks for missing product images
- All components now work seamlessly offline with static mock data
diff --git a/frontend/src/components/CartContent/CartContent.jsx b/frontend/src/components/CartContent/CartContent.jsx
@@ -68,8 +68,13 @@ const CartContent = () => {
   useEffect(() => {
     const fetchProducts = async () => {
       try {
-        const response = await axios.get(`${config.apiUrl}/api/products/`);
-        setShopData(response.data);
+        if (config.useMockData) {
+          const data = await mockAPI.getProducts();
+          setShopData(data);
+        } else {
+          const response = await axios.get(`${config.apiUrl}/api/products/`);
+          setShopData(response.data);
+        }
       } catch (error) {
         console.error("Error fetching products:", error);
       }
@@ -92,6 +97,12 @@ const CartContent = () => {
   const fetchRecommendations = async () => {
     setRecommendationsLoading(true);
     try {
+      if (config.useMockData) {
+        // Na produkcji nie ma rekomendacji
+        setRecommendations([]);
+        return;
+      }
+
       const productIds = Object.keys(items).filter((id) => items[id] > 0);
       if (productIds.length === 0) return;
 
diff --git a/frontend/src/components/CartContent/CartPreview.jsx b/frontend/src/components/CartContent/CartPreview.jsx
@@ -5,6 +5,7 @@ import { AiOutlineClose, AiOutlineShopping } from "react-icons/ai";
 import { Link, useNavigate } from "react-router-dom";
 import config from "../../config/config";
 import { CartContext } from "../ShopContext/ShopContext";
+import { mockAPI, PLACEHOLDER_IMAGE } from "../../utils/mockData";
 
 const BASE_URL = `${config.apiUrl}`;
 
@@ -30,20 +31,35 @@ const CartPreview = () => {
 
     const fetchProducts = async () => {
       try {
-        const productIds = Object.keys(items).join(",");
-        const response = await axios.get(
-          `${BASE_URL}/api/products/?ids=${productIds}`
-        );
-        const productMap = {};
-        response.data.forEach((product) => {
-          productMap[product.id] = {
-            ...product,
-            image: product.photos?.[0]?.path
-              ? `${BASE_URL}/media/${product.photos[0].path}`
-              : "https://via.placeholder.com/150",
-          };
-        });
-        setProducts(productMap);
+        if (config.useMockData) {
+          const allProducts = await mockAPI.getProducts();
+          const productMap = {};
+          Object.keys(items).forEach((itemId) => {
+            const product = allProducts.find((p) => p.id === parseInt(itemId));
+            if (product) {
+              productMap[itemId] = {
+                ...product,
+                image: product.imgs?.[0] || PLACEHOLDER_IMAGE,
+              };
+            }
+          });
+          setProducts(productMap);
+        } else {
+          const productIds = Object.keys(items).join(",");
+          const response = await axios.get(
+            `${BASE_URL}/api/products/?ids=${productIds}`,
+          );
+          const productMap = {};
+          response.data.forEach((product) => {
+            productMap[product.id] = {
+              ...product,
+              image: product.photos?.[0]?.path
+                ? `${BASE_URL}/media/${product.photos[0].path}`
+                : PLACEHOLDER_IMAGE,
+            };
+          });
+          setProducts(productMap);
+        }
       } catch (error) {
         console.error("Error with loading products:", error);
       }
diff --git a/frontend/src/components/LogoSlider/ProductSlider.jsx b/frontend/src/components/LogoSlider/ProductSlider.jsx
@@ -7,6 +7,7 @@ import config from "../../config/config";
 import "./ProductSlider.scss";
 import axios from "axios";
 import ProductSliderItem from "./ProductSliderItem";
+import { mockAPI } from "../../utils/mockData";
 
 const ProductSlider = () => {
   const [productsState, setProductsState] = useState({
@@ -19,22 +20,27 @@ const ProductSlider = () => {
     const fetchData = async () => {
       setProductsState((prev) => ({ ...prev, isLoading: true }));
       try {
-        const token = localStorage.getItem("access");
-        if (token) {
-          const settingsResponse = await axios.get(
-            `${config.apiUrl}/api/recommendation-settings/`,
-            { headers: { Authorization: `Bearer ${token}` } }
-          );
-          const algorithm =
-            settingsResponse.data.active_algorithm || "collaborative";
-          setProductsState((prev) => ({
-            ...prev,
-            currentAlgorithm: algorithm,
-          }));
-
-          await fetchProducts(algorithm, token);
-        } else {
+        if (config.useMockData) {
+          // Use mock data for GitHub Pages
           await fetchProducts(null, null);
+        } else {
+          const token = localStorage.getItem("access");
+          if (token) {
+            const settingsResponse = await axios.get(
+              `${config.apiUrl}/api/recommendation-settings/`,
+              { headers: { Authorization: `Bearer ${token}` } },
+            );
+            const algorithm =
+              settingsResponse.data.active_algorithm || "collaborative";
+            setProductsState((prev) => ({
+              ...prev,
+              currentAlgorithm: algorithm,
+            }));
+
+            await fetchProducts(algorithm, token);
+          } else {
+            await fetchProducts(null, null);
+          }
         }
       } catch (error) {
         console.error("Error in initial fetch:", error);
@@ -81,11 +87,20 @@ const ProductSlider = () => {
 
   const fetchProducts = async (algorithm, token) => {
     try {
+      if (config.useMockData) {
+        const data = await mockAPI.getRandomProducts(8);
+        setProductsState((prev) => ({
+          ...prev,
+          products: data,
+        }));
+        return;
+      }
+
       if (token && algorithm) {
         try {
           const previewResponse = await axios.get(
             `${config.apiUrl}/api/recommendation-preview/?algorithm=${algorithm}`,
-            { headers: { Authorization: `Bearer ${token}` } }
+            { headers: { Authorization: `Bearer ${token}` } },
           );
 
           if (previewResponse.data && previewResponse.data.length > 0) {
diff --git a/frontend/src/components/NewProducts/NewProducts.jsx b/frontend/src/components/NewProducts/NewProducts.jsx
@@ -132,7 +132,7 @@ const NewProducts = () => {
               old_price: product.old_price
                 ? parseFloat(product.old_price)
                 : null,
-              imgs: product.photos.map(
+              imgs: (product.photos || []).map(
                 (photo) => `${config.apiUrl}/media/${photo.path}`,
               ),
               category: product.categories?.[0] || "N/A",
@@ -151,7 +151,7 @@ const NewProducts = () => {
         name: product.name,
         price: parseFloat(product.price),
         old_price: product.old_price ? parseFloat(product.old_price) : null,
-        imgs: product.photos.map(
+        imgs: (product.photos || []).map(
           (photo) => `${config.apiUrl}/media/${photo.path}`,
         ),
         category: product.categories?.[0] || "N/A",
diff --git a/frontend/src/components/Testimonials/Testimonials.jsx b/frontend/src/components/Testimonials/Testimonials.jsx
@@ -61,6 +61,7 @@ import "slick-carousel/slick/slick-theme.css";
 import "./Testimonials.scss";
 import TestimonialsItem from "./TestimonialsItem";
 import config from "../../config/config";
+import { mockAPI } from "../../utils/mockData";
 
 const Testimonials = () => {
   const [productsState, setProductsState] = useState({
@@ -73,22 +74,27 @@ const Testimonials = () => {
     const fetchData = async () => {
       setProductsState((prev) => ({ ...prev, isLoading: true }));
       try {
-        const token = localStorage.getItem("access");
-        if (token) {
-          const settingsResponse = await axios.get(
-            `${config.apiUrl}/api/recommendation-settings/`,
-            { headers: { Authorization: `Bearer ${token}` } }
-          );
-          const algorithm =
-            settingsResponse.data.active_algorithm || "collaborative";
-          setProductsState((prev) => ({
-            ...prev,
-            currentAlgorithm: algorithm,
-          }));
-
-          await fetchProducts(algorithm, token);
-        } else {
+        if (config.useMockData) {
+          // Use mock data for GitHub Pages
           await fetchProducts(null, null);
+        } else {
+          const token = localStorage.getItem("access");
+          if (token) {
+            const settingsResponse = await axios.get(
+              `${config.apiUrl}/api/recommendation-settings/`,
+              { headers: { Authorization: `Bearer ${token}` } },
+            );
+            const algorithm =
+              settingsResponse.data.active_algorithm || "collaborative";
+            setProductsState((prev) => ({
+              ...prev,
+              currentAlgorithm: algorithm,
+            }));
+
+            await fetchProducts(algorithm, token);
+          } else {
+            await fetchProducts(null, null);
+          }
         }
       } catch (error) {
         console.error("Error in initial fetch:", error);
@@ -135,11 +141,20 @@ const Testimonials = () => {
 
   const fetchProducts = async (algorithm, token) => {
     try {
+      if (config.useMockData) {
+        const data = await mockAPI.getRandomProducts(8);
+        setProductsState((prev) => ({
+          ...prev,
+          products: data,
+        }));
+        return;
+      }
+
       if (token && algorithm) {
         try {
           const previewResponse = await axios.get(
             `${config.apiUrl}/api/recommendation-preview/?algorithm=${algorithm}`,
-            { headers: { Authorization: `Bearer ${token}` } }
+            { headers: { Authorization: `Bearer ${token}` } },
           );
 
           if (previewResponse.data && previewResponse.data.length > 0) {
@@ -190,10 +205,10 @@ const Testimonials = () => {
       return productsState.currentAlgorithm === "collaborative"
         ? "Personalized Recommendations (Collaborative Filtering)"
         : productsState.currentAlgorithm === "content_based"
-        ? "Personalized Recommendations (Content-Based)"
-        : productsState.currentAlgorithm === "fuzzy_logic"
-        ? "Personalized Recommendations (Fuzzy Logic)"
-        : "Personalized Recommendations";
+          ? "Personalized Recommendations (Content-Based)"
+          : productsState.currentAlgorithm === "fuzzy_logic"
+            ? "Personalized Recommendations (Fuzzy Logic)"
+            : "Personalized Recommendations";
     }
     return "Discover Our Products";
   };
@@ -203,10 +218,10 @@ const Testimonials = () => {
       return productsState.currentAlgorithm === "collaborative"
         ? "Based on what users like you are buying"
         : productsState.currentAlgorithm === "content_based"
-        ? "Based on products similar to your preferences"
-        : productsState.currentAlgorithm === "fuzzy_logic"
-        ? "Based on fuzzy logic matching your preferences with uncertainty modeling"
-        : "Based on your shopping patterns";
+          ? "Based on products similar to your preferences"
+          : productsState.currentAlgorithm === "fuzzy_logic"
+            ? "Based on fuzzy logic matching your preferences with uncertainty modeling"
+            : "Based on your shopping patterns";
     }
     return "Check out selected proposals from our product database – scroll to see more and test our recommendation system in action!";
   };
