I have two api's one is to list categories and other is to list stores. Second api takes category id as input to show stores of that category, I am unable to list stores of specific category. Here's what I have written so far, I am able to hard code category id.
I want user to select category and then the output gives only those stores falling in that category. Can someone help me update this code?
import React, { useState, useEffect } from "react";
import logo from './logo.svg';
import './App.css';
import axios from "axios";
import appstore from './assets/astore.png'
import gplay from './assets/gplay.png'
import closeicon from './assets/closeicon.svg'
import videostore from './assets/videostore.svg'
import bigboxlogo from './assets/bigboxlogo.svg'
import createstore from './assets/createstore.svg'
import gettheapp from './assets/gettheapp.svg'
const App = () => {
const [category, setCategory] = useState([]);
const [store, setStore] = useState([]);
let attribute;
function showCat(catid) {
let attribute = catid.target.attributes.getNamedItem('data-cat').value;
console.log(attribute)
}
let catid = 10;
const fetchData = () => {
const categoryApi = "https://api.bigbox.online/api/v1/users/brand_categories?page=1&limit=10";
const storeApi = `https://api.bigbox.online/api/v1/users/brand_category_stores?brand_category_id=${catid}&page=1&limit=10`;
const getCategory = axios.get(categoryApi);
const getStore = axios.get(storeApi);
axios.all([getCategory, getStore]).then(
axios.spread((...allData) => {
const allCategory = allData[0].data.brand_categories;
const allStore = allData[1].data.stores;
// console.log(allCategory);
// console.log(allStore);
setCategory(allCategory);
setStore(allStore);
})
)
}
useEffect(() => {
fetchData()
}, [])
function removeDiv1() {
document.getElementById("ad1")
.outerHTML = "";
}
function removeDiv2() {
document.getElementById("ad2")
.outerHTML = "";
}
return (
<div className="App">
<div className="header">
<div className="header-left">
<img src={bigboxlogo} alt="" style={{ marginRight: "20px" }} />
<p>shop</p>
<p>what is bigbox?</p>
<p>bigbox app</p>
<p>for business</p>
<p>help</p>
</div>
<div className="header-right">
<img src={gettheapp} alt="" className="header-btn" />
<img src={createstore} alt="" className="header-btn" />
</div>
</div>
<div style={{ paddingLeft: "30px" }}>
<h1 style={{ fontSize: "80px", marginBottom: "5px" }}>video call your favourite brands.</h1>
<h5 style={{ fontSize: "28px", marginTop: "0", marginBottom: "15px", fontWeight: 400 }}>discover, follow and shop from your favourite stores. anytime. anywhere.</h5>
</div>
<div id="ad1" className="promo">
<p>get the shopping experience you deserve with our new and improved bigbox app</p>
<img src={appstore} alt="" className="promo-img" />
<img src={gplay} alt="" className="promo-img" />
<button className="button" onClick={removeDiv1}>
<img src={closeicon} alt="" style={{ cursor: "pointer" }} />
</button>
</div>
<div id="ad2" className="promo">
<p>selling online? setup your video store with bigbox and sell easily through video calls</p>
<img src={videostore} alt="" className="promo-img" />
<button className="button" onClick={removeDiv2}>
<img src={closeicon} alt="" style={{ cursor: "pointer" }} />
</button>
</div>
<div className="body">
<div className="sidebar">
<p style={{ fontSize: "20px", fontWeight: 600, marginTop: "0" }}>categories</p>
{
category.map((item) => (
<div onClick={showCat} data-cat={item.id} style={{ cursor: "pointer" }}>
{item.name}
</div>
))
}
</div>
<div className="centerbody">
<div>
<p className="numberStores">{store.length} stores</p>
</div>
<div className="home-body">
{
store.map((item) => (
<div key={item.id} className="home-store" >
<img src={item.brand_logo_url} alt="" className="brand-logo" />
<a style={{ textDecoration: 'none' }} href={`https://in.bigbox.online/${item.slug}`} target="_blank" >
<img className="home-storeImg" src={item.cover_pic_mobile_url} alt="" />
<h1>{item.brand.name}</h1>
</a>
</div>
))
}
</div>
</div>
</div>
</div>
);
}
export default App;
CodePudding user response：
First of all, I think you should use the react's state, to handle data changes through selected items like you are trying to do. moreover, in showCat function, there is a problem, let's say you are getting the relevant data you need, but you are not using it or storing it for future use, so at the end of the function the data is not stored and you are losing it.
Therefore, you are not holding the selected id that you need for presenting the relevant stores.
Add new useState for holding the current selected catID like so:
const [selectedCatID, setSelectedCatID] = useState();function showCat(catid) { setSelectedCatID(catid); }
Then change the div attribute to pass the item.id through the onClick's function at triggering showCat.
3) <div onClick={() => showCat(item.id)} style={{ cursor: "pointer" }}>
Lastly modify the jsx to show the relevant stores by the current selected catid:
store.map((item) => { if (selectedCatID && item.id === selectedCatID) { return ( <div key={item.id} className="home-store" > <img src={item.brand_logo_url} alt="" className="brand-logo" /> <a style={{ textDecoration: 'none' }} href={`https://in.bigbox.online/${item.slug}`} target="_blank" > <img className="home-storeImg" src={item.cover_pic_mobile_url} alt="" /> <h1>{item.brand.name}</h1> </a> </div> )} return null; // for the case that does not match the id of the selected store. )
Or either you can filter the stores before and just show to the screen the filtered stores by the selected catid.
let me know if you understood my explantaion. good luck!
EDIT:
when the catid will change the fetchData will run again, on every cat selected.
useEffect(() => {
fetchData()
}, [selectedCatID])
And also modify the storeApi for using the selectedCatID:
const storeApi = `https://api.bigbox.online/api/v1/users/brand_category_stores?brand_category_id=${selectedCatID}&page=1&limit=10`;