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>
);
};