Skip to content
)
}
});
/**
* BusinessList Component
*
* Outputs List of Businesses
**/
var BusinessList = React.createClass({
handleShowAllClick: function() {
this.props.toggleShortList(this.props.short);
},
render: function() {
var businesses = this.props.businesses;
var result = businesses.sort(comparePromotions).reverse()
var businessNodes = result.map(function(item) {
let imageHolderStyle = {
backgroundImage: `url("${item.photo}")`
};
let businessServices = '';
var isOverlap = [];
if (item.services){
var isOverlap = item.services.filter(function(el){
return this.props.selected.indexOf(el) != -1;
}.bind(this));
}
var businessItemStyle = {};
function clean(string){
var cleaned = string.replace(/ /g, '-').replace(/
|<\/br>/g, '').replace(/[^A-Za-z0-9\-]/g, '').toLowerCase().replace(/-+/g, '-');
return cleaned;
}
function cleanText(string) {
return string.replace(/
|<\/br>/g, '|');
}
function breakLine(text) {
return text.split(/<\/br>/);
}
var address = '';
if ( (item['address_visibility']) ){
if (item['address_visibility'] === 'show'){
address += '-';
address += item['display_address_full'];
}
else {
if (item['city'] && item['city'] != 'N/A'){
address += '-';
address += item['city'];
}
if (item['state'] && item['state'] != 'N/A'){
address += '-';
address += item['state'];
}
if (item['zip'] && item['zip'] != 'N/A'){
address += '-';
address += item['zip'];
}
}
}
else {
if (item.neighborhood && item.neighborhood != 'N/A'){
address += '-';
address += item.neighborhood;
}
if (item.city && item.city != 'N/A'){
address += '-';
address += item.city;
}
if (item.state && item.state != 'N/A'){
address += '-';
address += item.state;
}
if (item.zip && item.zip != 'N/A'){
address += '-';
address += item.zip;
}
}
var cleanName = item.businessName != null ? clean(item.businessName) : "";
var cleanAddress = address != null ? clean(address) : "";
var removeBreak = item.businessName != null ? breakLine(item.businessName) : "";
var cleanDescription = item.tagline != null ? cleanText(item.tagline) : "" ;
// var link = `/services/${slug}/${item.key}/${cleanName}${cleanAddress}`;
var link = `/home-pros/${slug}/${item.key}/${cleanName}`;
return (
{removeBreak}
{cleanDescription}
)
}.bind(this));
var listClassName = 'business-list short';
var seeMoreText = 'See More';
var seeMoreIcon = 'fa fa-chevron-down';
if (this.props.short === false){
listClassName = 'business-list';
seeMoreText = 'Show Less';
seeMoreIcon = 'fa fa-chevron-right';
}
return (
{businessNodes}
{seeMoreText}
)
}
});
/**
* CategoryPage Component
*
* Container Component for Services + Businesses
**/
var CategoryPage = React.createClass({
getInitialState: function() {
if ( currentService.length > 0 ) {
var $uniqueServices = this.props.uniqueServices;
for ( var i in $uniqueServices) {
var cleanService = $uniqueServices[i].toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "-").replace(/^-+|-+$/g, '')
if ( cleanService == currentService ) {
var selectedServices = JSON.parse( '["' + $uniqueServices[i] + '"]' );
}
}
} else {
var selectedServices = [];
}
return {
selected: selectedServices,
shortBusinessList: true,
shortServices: true
};
},
pushSelected: function(item) {
if ( (this.state.selected).length > 0 ) {
this.setState({
selected: []
});
this.state.selected = [];
this.setState({
selected: this.state.selected.concat(item)
});
} else {
this.setState({
selected: this.state.selected.concat(item)
});
}
},
popSelected: function(index) {
this.setState({
selected: this.state.selected.filter((_, i) => i !== index)
});
},
toggleShortList: function(short) {
this.setState({
shortBusinessList: !short
});
},
toggleServices: function() {
this.setState({
shortServices: !this.state.shortServices
});
},
render: function() {
return (
)
}
})
/**
* Render to DOM
**/
ReactDOM.render(
,
document.getElementById('category-page')
);
