Revert to version 64324e0

backend/src/routes/pexels.js

@@ -6,10 +6,21 @@ const fetch = require('node-fetch');
 const KEY = pexelsKey;
 
 router.get('/image', async (req, res) => {
-  // Return static Wix image instead of Pexels
+  const headers = {
-  res.status(200).json({
+    Authorization: `${KEY}`,
-    src: 'https://static.wixstatic.com/media/42b9b7_87daee7014234d78a8a0766bd8d906bd~mv2.jpeg/v1/crop/x_0,y_186,w_768,h_652/fill/w_768,h_652,al_c,q_85,enc_avif,quality_auto/WhatsApp%20Image%202023-11-07%20at%2019_31_00.jpeg'
+  };
-  });
+  const query = pexelsQuery || 'nature';
+  const orientation = 'portrait';
+  const perPage = 1;
+  const url = `https://api.pexels.com/v1/search?query=${query}&orientation=${orientation}&per_page=${perPage}&page=1`;
+
+  try {
+    const response = await fetch(url, { headers });
+    const data = await response.json();
+    res.status(200).json(data.photos[0]);
+  } catch (error) {
+    res.status(200).json({ error: 'Failed to fetch image' });
+  }
 });
 
 router.get('/video', async (req, res) => {
@@ -30,21 +41,66 @@ router.get('/video', async (req, res) => {
   }
 });
 
-// Return the user-specified static images in random order for all galleries
+router.get('/multiple-images', async (req, res) => {
-router.get('/multiple-images', (req, res) => {
+  const headers = {
-  const images = [
+    Authorization: `${KEY}`,
-    { src: 'https://static.wixstatic.com/media/42b9b7_87daee7014234d78a8a0766bd8d906bd~mv2.jpeg/v1/crop/x_0,y_186,w_768,h_652/fill/w_768,h_652,al_c,q_85,enc_avif,quality_auto/WhatsApp%20Image%202023-11-07%20at%2019_31_00.jpeg', photographer: '', photographer_url: '' },
+  };
-    { src: 'https://static.wixstatic.com/media/42b9b7_3e6e0cf2e71f4fca8c12705c35df1d61~mv2.jpg/v1/crop/x_59,y_0,w_905,h_768/fill/w_850,h_721,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/D29C232E-F61F-46B2-AF8C-1E29C87270C8_L0_001%20(1).jpg', photographer: '', photographer_url: '' },
-    { src: 'https://static.wixstatic.com/media/42b9b7_b26e4585851c4e60a32d892baff6ca4e~mv2.png/v1/fill/w_529,h_678,al_c,lg_1,q_85,enc_avif,quality_auto/42b9b7_b26e4585851c4e60a32d892baff6ca4e~mv2.png', photographer: '', photographer_url: '' }
-  ];
 
-  // Shuffle the images array
+  const queries = req.query.queries
-  for (let i = images.length - 1; i > 0; i--) {
+    ? req.query.queries.split(',')
-    const j = Math.floor(Math.random() * (i + 1));
+    : ['home', 'apple', 'pizza', 'mountains', 'cat'];
-    [images[i], images[j]] = [images[j], images[i]];
+  const orientation = 'square';
+  const perPage = 1;
+
+  const fallbackImage = {
+    src: 'https://images.pexels.com/photos/8199252/pexels-photo-8199252.jpeg',
+    photographer: 'Yan Krukau',
+    photographer_url: 'https://www.pexels.com/@yankrukov',
+  };
+  const fetchFallbackImage = async () => {
+    try {
+      const response = await fetch('https://picsum.photos/600');
+      return {
+        src: response.url,
+        photographer: 'Random Picsum',
+        photographer_url: 'https://picsum.photos/',
+      };
+    } catch (error) {
+      return fallbackImage;
     }
+  };
+  const fetchImage = async (query) => {
+    const url = `https://api.pexels.com/v1/search?query=${query}&orientation=${orientation}&per_page=${perPage}&page=1`;
+    const response = await fetch(url, { headers });
+    const data = await response.json();
+    return data.photos[0] || null;
+  };
 
-  res.json(images);
+  const imagePromises = queries.map((query) => fetchImage(query));
+  const imagesResults = await Promise.allSettled(imagePromises);
+
+  const formattedImages = await Promise.all(
+    imagesResults.map(async (result) => {
+      if (result.status === 'fulfilled' && result.value) {
+        const image = result.value;
+        return {
+          src: image.src?.original || fallbackImage.src,
+          photographer: image.photographer || fallbackImage.photographer,
+          photographer_url:
+            image.photographer_url || fallbackImage.photographer_url,
+        };
+      } else {
+        const fallback = await fetchFallbackImage();
+        return {
+          src: fallback.src || '',
+          photographer: fallback.photographer || 'Unknown',
+          photographer_url: fallback.photographer_url || '',
+        };
+      }
+    }),
+  );
+
+  res.json(formattedImages);
 });
 
 module.exports = router;

frontend/src/components/WebPageComponents/HeroComponent/designs/HeroImageBg.tsx

@@ -11,7 +11,7 @@ const HeroImageBg = ({
   <div
     className='relative w-full h-screen flex items-center justify-center text-center mb-24  bg-cover bg-center'
     style={{
-      backgroundImage: `url('https://static.wixstatic.com/media/42b9b7_04d3e636f03349f28be843bce8350e9f~mv2.png/v1/fill/w_1236,h_896,al_c,q_90,enc_avif,quality_auto/42b9b7_04d3e636f03349f28be843bce8350e9f~mv2.png')`,
+      backgroundImage: `url(${imageHero[0]?.src})`,
     }}
   >
     <div className='absolute inset-0 bg-black opacity-50'></div>

frontend/src/helpers/pexels.ts

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 export async function getPexelsImage() {
   try {
-    const response = await axios.get(`/api/pexels/image`);
+    const response = await axios.get(`/pexels/image`);
     return response.data;
   } catch (error) {
     console.error('Error fetching image:', error);
@@ -12,7 +12,7 @@ export async function getPexelsImage() {
 
 export async function getPexelsVideo() {
   try {
-    const response = await axios.get(`/api/pexels/video`);
+    const response = await axios.get(`/pexels/video`);
     return response.data;
   } catch (error) {
     console.error('Error fetching video:', error);
@@ -33,8 +33,6 @@ export async function getMultiplePexelsImages(
   }
   localStorageLock = true;
 
-  // Force-clear old Pexels cache to load new Wix images
-  localStorage.removeItem('pexelsImagesCache');
   const cachedImages =
     JSON.parse(localStorage.getItem('pexelsImagesCache')) || {};
 
@@ -52,7 +50,7 @@ export async function getMultiplePexelsImages(
     const queryString = missingQueries.join(',');
 
     try {
-      const response = await axios.get(`/api/pexels/multiple-images`, {
+      const response = await axios.get(`/pexels/multiple-images`, {
         params: { queries: queryString },
       });
 

frontend/src/pages/index.tsx

@@ -20,6 +20,7 @@ import FeaturesSection from '../components/WebPageComponents/FeaturesComponent';
 
 import GalleryPortfolioSection from '../components/WebPageComponents/GalleryPortfolioComponent';
 
+import { getMultiplePexelsImages } from '../helpers/pexels';
 
 import AboutUsSection from '../components/WebPageComponents/AboutUsComponent';
 
@@ -78,13 +79,32 @@ export default function WebSite() {
       icon: 'mdiChartLine',
     },
   ];
-// Use static Wix images for the gallery
-const images = [
-  { src: 'https://static.wixstatic.com/media/42b9b7_87daee7014234d78a8a0766bd8d906bd~mv2.jpeg/v1/crop/x_0,y_186,w_768,h_652/fill/w_768,h_652,al_c,q_85,enc_avif,quality_auto/WhatsApp%20Image%202023-11-07%20at%2019_31_00.jpeg' },
-  { src: 'https://static.wixstatic.com/media/42b9b7_3e6e0cf2e71f4fca8c12705c35df1d61~mv2.jpg/v1/crop/x_59,y_0,w_905,h_768/fill/w_850,h_721,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/D29C232E-F61F-46B2-AF8C-1E29C87270C8_L0_001%20(1).jpg' },
-  { src: 'https://static.wixstatic.com/media/42b9b7_b26e4585851c4e60a32d892baff6ca4e~mv2.png/v1/fill/w_529,h_678,al_c,lg_1,q_85,enc_avif,quality_auto/42b9b7_b26e4585851c4e60a32d892baff6ca4e~mv2.png' }
-];
 
+  const [images, setImages] = useState([]);
+  const pexelsQueriesWebSite = [
+    'Team building the robot',
+    'Robotics competition excitement',
+    'Innovative robot design process',
+    'Team brainstorming session',
+    'Celebrating competition success',
+  ];
+  useEffect(() => {
+    const fetchImages = async () => {
+      try {
+        const images = await getMultiplePexelsImages(pexelsQueriesWebSite);
+        const formattedImages = (images || []).map((image) => ({
+          src: image?.src || undefined,
+          photographer: image?.photographer || undefined,
+          photographer_url: image?.photographer_url || undefined,
+        }));
+        setImages(formattedImages);
+      } catch (error) {
+        console.error('Error fetching images:', error);
+      }
+    };
+
+    fetchImages();
+  }, []);
 
   return (
     <div className='flex flex-col min-h-screen'>

frontend/src/pages/web_pages/home.tsx

@@ -20,6 +20,7 @@ import FeaturesSection from '../../components/WebPageComponents/FeaturesComponen
 
 import GalleryPortfolioSection from '../../components/WebPageComponents/GalleryPortfolioComponent';
 
+import { getMultiplePexelsImages } from '../../helpers/pexels';
 
 import AboutUsSection from '../../components/WebPageComponents/AboutUsComponent';
 
@@ -58,11 +59,31 @@ export default function WebSite() {
     },
   ];
 
-  const images = [
+  const [images, setImages] = useState([]);
-    { src: 'https://static.wixstatic.com/media/42b9b7_87daee7014234d78a8a0766bd8d906bd~mv2.jpeg/v1/crop/x_0,y_186,w_768,h_652/fill/w_768,h_652,al_c,q_85,enc_avif,quality_auto/WhatsApp%20Image%202023-11-07%20at%2019_31_00.jpeg' },
+  const pexelsQueriesWebSite = [
-    { src: 'https://static.wixstatic.com/media/42b9b7_3e6e0cf2e71f4fca8c12705c35df1d61~mv2.jpg/v1/crop/x_59,y_0,w_905,h_768/fill/w_850,h_721,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/D29C232E-F61F-46B2-AF8C-1E29C87270C8_L0_001%20(1).jpg' },
+    'Team building the robot',
-    { src: 'https://static.wixstatic.com/media/42b9b7_b26e4585851c4e60a32d892baff6ca4e~mv2.png/v1/fill/w_529,h_678,al_c,lg_1,q_85,enc_avif,quality_auto/42b9b7_b26e4585851c4e60a32d892baff6ca4e~mv2.png' }
+    'Robotics competition excitement',
+    'Innovative robot design process',
+    'Team brainstorming session',
+    'Celebrating competition success',
   ];
+  useEffect(() => {
+    const fetchImages = async () => {
+      try {
+        const images = await getMultiplePexelsImages(pexelsQueriesWebSite);
+        const formattedImages = (images || []).map((image) => ({
+          src: image?.src || undefined,
+          photographer: image?.photographer || undefined,
+          photographer_url: image?.photographer_url || undefined,
+        }));
+        setImages(formattedImages);
+      } catch (error) {
+        console.error('Error fetching images:', error);
+      }
+    };
+
+    fetchImages();
+  }, []);
 
   return (
     <div className='flex flex-col min-h-screen'>

frontend/src/stores/scouting/scoutingSlice.ts

@@ -74,7 +74,7 @@ export const create = createAsyncThunk(
   'scouting/createScouting',
   async (data: any, { rejectWithValue }) => {
     try {
-      const result = await axios.post('/api/scouting', { data }, { withCredentials: true });
+      const result = await axios.post('scouting', { data });
       return result.data;
     } catch (error) {
       if (!error.response) {