Merge pull request #1890 from blockstack/hotfix/home-page-apps-crash

Fix home page apps issues

Author: yknl

app/js/App.js

@@ -39,12 +39,12 @@ function mapStateToProps(state) {
     walletPaymentAddressUrl: state.settings.api.walletPaymentAddressUrl,
     coreAPIPassword: state.settings.api.coreAPIPassword,
     instanceIdentifier: state.apps.instanceIdentifier,
-    lastUpdatedApps: selectLastUpdatedApps(state)
+    lastUpdatedApps: selectLastUpdatedApps(state),
+    topApps: state.apps.topApps
   }
 }
 
-const mapDispatchToProps = dispatch => {
-  return bindActionCreators(
+const mapDispatchToProps = dispatch => bindActionCreators(
     {
       updateApi: SettingsActions.updateApi,
       isCoreRunning: SanityActions.isCoreRunning,
@@ -54,7 +54,6 @@ const mapDispatchToProps = dispatch => {
     },
     dispatch
   )
-}
 
 class AppContainer extends Component {
   static propTypes = {
@@ -80,7 +79,8 @@ class AppContainer extends Component {
     router: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired,
     instanceIdentifier: PropTypes.string,
-    lastUpdatedApps: PropTypes.number
+    lastUpdatedApps: PropTypes.number,
+    topApps: PropTypes.array
   }
 
   constructor(props) {
@@ -166,7 +166,7 @@ class AppContainer extends Component {
     }
 
     if (
-      !this.props.lastUpdatedApps ||
+      !this.props.lastUpdatedApps || !this.props.topApps ||
       Date.now() - this.props.lastUpdatedApps > 900000 // 15 min
     ) {
       // Fetch those apps if data is state

app/js/HomeScreenPage.js

@@ -139,7 +139,7 @@ const AppItem = ({ website, imgixImageUrl, name, description }) => {
               size="64px"
               display="block"
               flexShrink="0"
-              src={imgixImageUrl}
+              src={`${imgixImageUrl}?auto=format&w=128&q=50`}
               alt={name}
             />
             <Box ml={[0, 3, 3, 3]} mt={[3, 0, 0, 0]}>
@@ -188,7 +188,8 @@ class HomeScreenPage extends React.Component {
   render() {
     const loading =
       this.props.apps &&
-      this.props.apps.loading &&
+      this.props.apps.loading ||
+      !this.props.apps.topApps ||
       !this.props.apps.topApps.length
     return (
       <Box>

app/js/store/apps/actions.js

@@ -2,7 +2,7 @@ import * as types from './types'
 import log4js from 'log4js'
 import { randomBytes, createHash } from 'crypto'
 
-const API_URL = 'https://app-co-api.herokuapp.com'
+const API_URL = 'https://api.app.co'
 
 const logger = log4js.getLogger(__filename)
 
@@ -33,8 +33,7 @@ const refreshAppList = (
   browserApiUrl,
   instanceIdentifier,
   instanceCreationDate
-) => {
-  return dispatch => {
+) => dispatch => {
     logger.info('refreshAppList')
     if (instanceIdentifier) {
       return fetch(
@@ -52,7 +51,6 @@ const refreshAppList = (
       return null
     }
   }
-}
 
 const generateInstanceIdentifier = () => {
   logger.info('Generating new instance identifier')