diff --git a/httpdocs/theme/react/app/_homepage.js b/httpdocs/theme/react/app/_homepage.js index b9f3108f3..daaf36af7 100644 --- a/httpdocs/theme/react/app/_homepage.js +++ b/httpdocs/theme/react/app/_homepage.js @@ -1,286 +1,286 @@ class HomePage extends React.Component { constructor(props){ super(props); this.state = { device:store.getState().device, products:store.getState().products }; } componentWillReceiveProps(nextProps) { if (nextProps.device){ this.setState({device:nextProps.device}); } if (nextProps.products){ this.setState({products:nextProps.products}); } } render(){ return (
) } } const mapStateToHomePageProps = (state) => { const device = state.device; const products = state.products; return { device, products } } const mapDispatchToHomePageProps = (dispatch) => { return { dispatch } } const HomePageWrapper = ReactRedux.connect( mapStateToHomePageProps, mapDispatchToHomePageProps )(HomePage); class Introduction extends React.Component { render(){ let introductionText, siteTitle, buttonsContainer; if (window.page === "appimages"){ siteTitle = "AppImageHub"; introductionText = (

- This catalog has AppImages and counting.
+ This catalog has {this.props.count} AppImages and counting.
AppImages are self-contained apps which can simply be downloaded & run on any Linux distribution. For easy integration, download AppImageLauncher:

); buttonsContainer = (
AppImageLauncher Browse all apps
); } else if (window.page === "libreoffice"){ siteTitle = "LibreOffice"; introductionText = (

Extensions add new features to your LibreOffice or make the use of already existing ones easier. Currently there are {this.props.count} project(s) available.

); buttonsContainer = (
Add Extension Browse all Extensions
); } return (

Welcome to {siteTitle}

{introductionText} {buttonsContainer}
) } } class HpIntroSection extends React.Component { constructor(props){ super(props); this.state = {}; } render(){ return (

Search thousands of snaps used by millions of people across 50 Linux distributions

) } } const mapStateToHpIntroSectionProps = (state) => { const categories = state.categories; return { categories } } const mapDispatchToHpIntroSectionProps = (dispatch) => { return { dispatch } } const HpIntroSectionWrapper = ReactRedux.connect( mapStateToHpIntroSectionProps, mapDispatchToHpIntroSectionProps )(HpIntroSection); class ProductCarousel extends React.Component { constructor(props){ super(props); this.state = { showRightArrow:true, showLeftArrow:false }; this.updateDimensions = this.updateDimensions.bind(this); this.animateProductCarousel = this.animateProductCarousel.bind(this); } componentWillMount() { window.addEventListener("resize", this.updateDimensions); } componentDidMount() { this.updateDimensions(); } updateDimensions(){ const containerWidth = $('#introduction').find('.container').width(); const sliderWidth = containerWidth * 3; const itemWidth = containerWidth / 5; this.setState({ sliderPosition:0, containerWidth:containerWidth, sliderWidth:sliderWidth, itemWidth:itemWidth }); } animateProductCarousel(dir){ let newSliderPosition = this.state.sliderPosition; if (dir === 'left'){ newSliderPosition = this.state.sliderPosition - this.state.containerWidth; } else { newSliderPosition = this.state.sliderPosition + this.state.containerWidth; } this.setState({sliderPosition:newSliderPosition},function(){ let showLeftArrow = true, showRightArrow = true; const endPoint = this.state.sliderWidth - this.state.containerWidth; if (this.state.sliderPosition <= 0){ showLeftArrow = false; } if (this.state.sliderPosition >= endPoint){ showRightArrow = false; } this.setState({ showLeftArrow:showLeftArrow, showRightArrow:showRightArrow }); }); } render(){ let carouselItemsDisplay; if (this.props.products && this.props.products.length > 0){ carouselItemsDisplay = this.props.products.map((product,index) => ( )); } let rightArrowDisplay, leftArrowDisplay; if (this.state.showLeftArrow){ leftArrowDisplay = (
this.animateProductCarousel('left')} className="carousel-arrow arrow-left"> chevron_left
); } if (this.state.showRightArrow){ rightArrowDisplay = (
this.animateProductCarousel('right')} className="carousel-arrow arrow-right"> chevron_right
); } return (

{this.props.title}chevron_right

{leftArrowDisplay}
{carouselItemsDisplay}
{rightArrowDisplay}
) } } class ProductCarouselItem extends React.Component { constructor(props){ super(props); this.state = {}; } render(){ let imageBaseUrl; if (store.getState().env === 'live') { imageBaseUrl = 'cn.opendesktop.org'; } else { imageBaseUrl = 'cn.pling.it'; } return (
{this.props.product.title} {this.props.product.username}
) } }