configure deployment

api/search.js

@@ -1,36 +1,35 @@
 const axios = require('axios');
 
-module.exports = (req, res) => {
-  const apiKey = process.env.REACT_APP_API_KEY; // Make sure this environment variable is correctly set in your deployment
-  const { term, location, sort_by } = req.query;
+module.exports = async (req, res) => {
+  // Set CORS headers to allow all domains or specify your application's domain
+  res.setHeader('Access-Control-Allow-Origin', '*'); // Adjust accordingly for production
+  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+
+  // Optional: Handle pre-flight requests for CORS
+  if (req.method === 'OPTIONS') {
+    res.status(200).end();
+    return;
+  }
 
-  console.log('API Key:', apiKey); // Debugging: Log the API Key
-  console.log('Request query params:', req.query); // Debugging: Log the request query parameters
+  const apiKey = process.env.REACT_APP_API_KEY; // Ensure this is set in your Vercel project settings
+  const { term, location, sort_by } = req.query;
 
-  axios({
-    method: 'get',
-    url: `https://api.yelp.com/v3/businesses/search`,
-    headers: {
-      Authorization: `Bearer ${apiKey}`,
-    },
-    params: { // Use the params object for query parameters
-      term: term,
-      location: location,
-      sort_by: sort_by,
-    },
-  })
-  .then((response) => {
-    console.log('Yelp API response:', response.data); // Debugging: Log Yelp API response
-    res.send(response.data);
-  })
-  .catch((error) => {
-    console.log('Yelp API error:', error); // Debugging: Log any error from the Yelp API
+  try {
+    const { data } = await axios.get(`https://api.yelp.com/v3/businesses/search`, {
+      params: { term, location, sort_by },
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+      },
+    });
+    res.status(200).json(data);
+  } catch (error) {
     if (error.response) {
       // Forward Yelp API's error response
-      res.status(error.response.status).send(error.response.data);
+      res.status(error.response.status).json(error.response.data);
     } else {
-      // Handle network or other errors not directly returned from Yelp's API
-      res.status(500).send({ message: 'An error occurred while contacting the Yelp API' });
+      // Handle network or other errors
+      res.status(500).json({ message: 'An error occurred while contacting the Yelp API' });
     }
-  });
+  }
 };

src/utils/Yelp.js

@@ -1,46 +1,41 @@
-const apiKey = process.env.REACT_APP_API_KEY; // Define the API key
-
-const serverUrl = process.env.NODE_ENV === 'production' ? 'https://api.yelp.com' : '/api';
+const serverUrl = process.env.NODE_ENV === 'production' ? '' : 'http://localhost:3000';
 
 const Yelp = {
-  search(term, location, sortBy) {
-    const url = `${serverUrl}/v3/businesses/search?term=${encodeURIComponent(term)}&location=${encodeURIComponent(location)}&sort_by=${sortBy}`;
-    const headers = process.env.NODE_ENV === 'production' ? { Authorization: `Bearer ${apiKey}` } : {};
+  async search(term, location, sortBy) {
+    // Note: Adjusted to remove the redundant `/api` if `serverUrl` is meant to include it for production
+    const url = `${serverUrl}/api/search?term=${term}&location=${location}&sort_by=${sortBy}`;
 
-    console.log('Request URL:', url); // Debugging: Log the request URL
+    console.log('Request URL:', url);
 
-    return fetch(url, { method: 'GET', headers })
-      .then(response => {
-        if (!response.ok) {
-          throw new Error(`Yelp API error: ${response.statusText}`);
-        }
-        return response.json();
-      })
-      .then(jsonResponse => {
-        console.log('Yelp API response:', jsonResponse); // Debugging: Log the API response
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`Yelp API error: ${response.statusText}`);
+      }
+      const jsonResponse = await response.json();
+      console.log('Yelp API response:', jsonResponse);
 
-        if (jsonResponse.businesses) {
-          return jsonResponse.businesses.map(business => ({
-            id: business.id,
-            imageSrc: business.image_url,
-            name: business.name,
-            address: business.location.address1,
-            city: business.location.city,
-            state: business.location.state,
-            zipCode: business.location.zip_code,
-            category: business.categories[0]?.title,
-            rating: business.rating,
-            reviewCount: business.review_count,
-            url: business.url,
-          }));
-        } else {
-          return [];
-        }
-      })
-      .catch(error => {
-        console.error('Error occurred during Yelp API call:', error); // Error handling
+      if (jsonResponse.businesses) {
+        return jsonResponse.businesses.map((business) => ({
+          id: business.id,
+          imageSrc: business.image_url,
+          name: business.name,
+          address: business.location.address1,
+          city: business.location.city,
+          state: business.location.state,
+          zipCode: business.location.zip_code,
+          category: business.categories[0].title,
+          rating: business.rating,
+          reviewCount: business.review_count,
+          url: business.url,
+        }));
+      } else {
         return [];
-      });
+      }
+    } catch (error) {
+      console.error('Error occurred during Yelp API call:', error);
+      return [];
+    }
   },
 };