0

I have a react app that containing a moltiple stores I'm using the store name in the url to get store data and redirect to signup page and it's working locally but after deploying it to heroku when add store name to heroku app url return the store data not signup page This is the store name middleware

app.get('/store/:storeName', cors(), (req, res) => {
  const storeName = req.params.storeName;
  // Fetch data for the specified store from the database
  Store.findOne({ name: storeName })
    .then((store) => {
      if (!store) {
        res.status(404).send('No data found');
      } else {
        const logoData = store.logo;
        const base64Data = Buffer.from(logoData, 'base64').toString('base64');
        // Set the store ID in a cookie
        res.cookie('storeId', store._id);
        // Return the data as JSON with the logo image data as a base64-encoded string
        const data = { logo: base64Data, name: store.name, color: store.color, storeId: store._id };
        res.json(data);
      }
    })
    .catch((error) => {
      console.error('Error fetching store data:', error);
      res.status(500).send('Internal server error', error);
    });
}); 

This is the route in app.js

<Routes>
          <Route path="/store/:storeName" Component={Signup}/>
       </Routes>

This StoreContext that fetch the store middleware

const StoreProvider = ({ children }) => {
  const [store, setStore] = useState({ logo: '', name: '', color: '' });

  useEffect(() => {
    // Retrieve the store ID from the 'storeId' cookie
   
    // Extract the store name from the URL path
    const storeName = window.location.pathname.split('/').pop();
  
    // Construct the URL to fetch store data
    const url = `${serverUrl}/store/${storeName}`;
  
fetch(url)
.then(response => response.json())
.then(data => {
  // Decode the logo image data from base64 to binary data
  const binaryData = atob(data.logo);
  // Convert the binary data to a Uint8Array
  const uint8Array = new Uint8Array(binaryData.length);
  for (let i = 0; i < binaryData.length; i++) {
    uint8Array[i] = binaryData.charCodeAt(i);
  }
  // Create a Blob object from the Uint8Array and get the data URL
  const blob = new Blob([uint8Array], { type: 'image/png' });
  const url = URL.createObjectURL(blob);
  // Set the logo property of the store state to the data URL
  setStore({ logo: url, name: data.name, color: data.color, id: data.storeId });

  // Set the store ID in a cookie with domain and path options
  document.cookie = `storeId=${data.storeId}; domain=localhost; path=/`;
})
.catch(error => {
  console.error('Error fetching store data:', error);
});
})
  


  return (
    <StoreContext.Provider value={{ store }}>
      {children}
    </StoreContext.Provider>
  );
};

0 Answers0