76 lines
1.5 KiB
TypeScript
76 lines
1.5 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { useQuery } from '@woocommerce/navigation';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './search-results.scss';
|
|
import { Product, ProductType, SearchResultType } from '../product-list/types';
|
|
import Products from '../products/products';
|
|
|
|
export interface SearchResultProps {
|
|
products: Product[];
|
|
type: SearchResultType;
|
|
}
|
|
|
|
export default function SearchResults( props: SearchResultProps ): JSX.Element {
|
|
const extensionList = props.products.filter(
|
|
( product ) => product.type === ProductType.extension
|
|
);
|
|
const themeList = props.products.filter(
|
|
( product ) => product.type === ProductType.theme
|
|
);
|
|
|
|
const query = useQuery();
|
|
const showCategorySelector = query.section ? true : false;
|
|
|
|
const extensionComponent = (
|
|
<Products
|
|
products={ extensionList }
|
|
type={ ProductType.extension }
|
|
categorySelector={ showCategorySelector }
|
|
/>
|
|
);
|
|
|
|
const themeComponent = (
|
|
<Products
|
|
products={ themeList }
|
|
type={ ProductType.theme }
|
|
categorySelector={ showCategorySelector }
|
|
/>
|
|
);
|
|
|
|
const content = () => {
|
|
if ( query?.section === SearchResultType.theme ) {
|
|
return themeComponent;
|
|
}
|
|
if ( query?.section === SearchResultType.extension ) {
|
|
return extensionComponent;
|
|
}
|
|
|
|
if ( extensionList.length === 0 && themeList.length > 0 ) {
|
|
return (
|
|
<>
|
|
{ themeComponent }
|
|
{ extensionComponent }
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{ extensionComponent }
|
|
{ themeComponent }
|
|
</>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="woocommerce-marketplace__search-results">
|
|
{ content() }
|
|
</div>
|
|
);
|
|
}
|