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 = (
);
} 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 = (
);
}
return (
Welcome to {siteTitle}
{introductionText}
{buttonsContainer}
)
}
}
class HpIntroSection extends React.Component {
constructor(props){
super(props);
this.state = {};
}
render(){
return (
)
}
}
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 = (
);
}
if (this.state.showRightArrow){
rightArrowDisplay = (
);
}
return (
{leftArrowDisplay}
{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 (
)
}
}