const BrandFilterContainer = () => {
const [selectedBrands, setSelectedBrands] = useState([]);
const [selectedProcessors, setSelectedProcessors] = useState([]);
const [selectedRams, setSelectedRams] = useState([]);
const [selectedScreenSizes, setSelectedScreenSizes] = useState([]);
const [searchQuery, setSearchQuery] = useState(''); // State for search query
const handleSearchSubmit = (searchQuery) => {
// Perform API request using selected filters and searchQuery
// Log the search query and selected filters
console.table({
'Search Query': searchQuery,
'Selected Brands': selectedBrands,
'Selected Processors': selectedProcessors,
'Selected Rams': selectedRams,
'Selected Screen Sizes': selectedScreenSizes,
});
// You can also call your API request here
};
const handleBrandSelect = (brand) => {
if (selectedBrands.includes(brand)) {
setSelectedBrands(selectedBrands.filter((b) => b !== brand));
} else {
setSelectedBrands([brand]);
}
};
const handleProcessorSelect = (processor) => {
if (selectedProcessors.includes(processor)) {
setSelectedProcessors(selectedProcessors.filter((p) => p !== processor));
} else {
setSelectedProcessors([...selectedProcessors, processor]);
}
};
const handleRamSelect = (ram) => {
if (selectedRams.includes(ram)) {
setSelectedRams(selectedRams.filter((r) => r !== ram));
} else {
setSelectedRams([...selectedRams, ram]);
}
};
const handleScreenSizeSelect = (screenSize) => {
if (selectedScreenSizes.includes(screenSize)) {
setSelectedScreenSizes(selectedScreenSizes.filter((s) => s !== screenSize));
} else {
setSelectedScreenSizes([...selectedScreenSizes, screenSize]);
}
};
return (
<div className="container-fluid">
<Navbar
isSearchEnabled={selectedBrands.length > 0}
onSearchSubmit={handleSearchSubmit}
setSearchQuery={setSearchQuery}
/>
<div className="row">
{/* Sidebar */}
<div className="col-md-2 sidenav" style={{ marginTop: '40px' }}>
<div className="border rounded-lg p-2 mt-3" style={{ maxWidth: '200px', height: 'calc(100vh - 100px)', overflowY: 'auto',position:'fixed' }}>
<BrandFilter
brands={selectedBrands}
onSelectBrand={handleBrandSelect}
/>
{selectedBrands.length > 0 && (
<ProcessorOptions
selectedBrand={selectedBrands[0]}
selectedProcessors={selectedProcessors}
onSelectProcessor={handleProcessorSelect}
/>
)}
{selectedBrands.length > 0 && (
<RamOptions
selectedBrand={selectedBrands[0]}
selectedRams={selectedRams}
onSelectRam={handleRamSelect}
/>
)}
{selectedBrands.length > 0 && (
<ScreenSizeOptions
selectedBrand={selectedBrands[0]}
selectedScreenSizes={selectedScreenSizes}
onSelectScreenSize={handleScreenSizeSelect}
/>
)}
{/* Other filter options */}
</div>
</div>
{/* Main Content */}
<div className="col-md-10">
<div className="container">
{/* Content */}
<ProductList
searchQuery={searchQuery}
selectedFilters={{
selectedBrands,
selectedProcessors,
selectedRams,
selectedScreenSizes,
}}
/>
<CheapestProducts />
</div>
</div>
</div>
</div>
);
};
export default BrandFilterContainer;