Updating

frontend/package.json

@@ -6,7 +6,6 @@
   "dependencies": {
     "aphrodite": "^1.2.5",
     "axios": "^0.17.1",
-    "cross-fetch": "^1.1.1",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
@@ -27,7 +26,7 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "fetch-mock": "^6.0.0-beta.9",
+    "fetch-mock": "^6.0.0",
     "redux-mock-store": "^1.4.0"
   }
 }

frontend/src/API/service.js

@@ -1,4 +1,3 @@
-import fetch from 'cross-fetch';
 
 const API_ROOT = '/api/v1';
 

frontend/src/Entrypoint/Main.js → frontend/src/Entrypoint/Entrypoint.js

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Routes from '../Routes/Routes';
+import { Routes } from '../Routes';
 import { Navbar } from '../Navbar';
 import { Footer } from '../Footer';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { StyleSheet, css } from 'aphrodite';
-import {autoLogin} from '../Redux/actions';
+import { autoLogin } from '../User/userActions';
 
-class app extends Component {
+class Entrypoint extends Component {
   static propTypes = {
     autoLogin: PropTypes.func.isRequired
   };
@@ -36,15 +36,15 @@ const styles = StyleSheet.create({
     display: 'flex',
     height: '100%',
     minHeight: '100vh',
-    //overflow: 'hidden',
+    overflow: 'hidden',
     flexDirection: 'column',
     backgroundColor: '#f0f0f0'
   }
 });
 
 const mapStateToProps = state => {
   return {
-    user: state.user
+    user: state.userReducer
   };
 };
 const mapDispatchToProps = dispatch => {
@@ -53,5 +53,5 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-const App = withRouter(connect(mapStateToProps, mapDispatchToProps)(app));
-export default App;
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Entrypoint));
+

frontend/src/Entrypoint/index.js

@@ -1,3 +1,3 @@
-import Main from './Main';
+import Entrypoint from './Entrypoint';
 
-export { Main };
+export { Entrypoint };

frontend/src/House/Card.js

@@ -4,9 +4,9 @@ import {ImageDefault} from '../Image';
 import Rating from '../Rating';
 import {StyleSheet, css} from 'aphrodite';
 
-const Card = (props) => (
+const Card = props => (
   <div className={css(styles.container)}>
-    <ImageDefault src={props.house.images[0]} missing_url="//via.placeholder.com/350x150?No Image"/>
+    <ImageDefault src={props.house.images[0]} missing_url="//via.placeholder.com/350x150?text=No Image"/>
     <div className={css(styles.title)}>
       {props.house.title}
       <Rating currentRating={props.house.rating}

frontend/src/Image/ImageDefault.js

@@ -20,12 +20,24 @@ class ImageDefault extends React.Component {
   };
   componentDidMount = () => {
     this.component_mounted = true;
-    ImageRef( this.props.src, "//via.placeholder.com/200x200?text=Not Found")
+    this.createImage( this.props.src);
+  };
+
+  componentWillReceiveProps = newProps => {
+    if( this.component_mounted && newProps.src && newProps.src !== this.props.src){
+      this.createImage( newProps.src);
+    }
+  };
+  componentWillUnmount = () => {
+    this.component_mounted = false;
+  };
+  createImage = src => {
+    ImageRef( src, "//via.placeholder.com/200x200?text=Not Found")
     .then( image_src => {
       // check component is mounted or we get warning can't setState on
       // unmounted component
       if( this.component_mounted) {
-        this.setState( {image_src});
+        this.setState( {image_src, image_error:false});
       }
     })
     .catch( () => {
@@ -34,15 +46,6 @@ class ImageDefault extends React.Component {
       }
     });
   };
-
-  componentWillReceiveProps = newProps => {
-    if( this.component_mounted && newProps.src && newProps.src !== this.props.src){
-      this.setState( {image_src: newProps.src, image_error: false});
-    }
-  };
-  componentWillUnmount = () => {
-    this.component_mounted = false;
-  };
   onImageError = () => {
     this.setState( {image_error: true, image_src: this.props.missing_url});
   };
@@ -52,7 +55,7 @@ class ImageDefault extends React.Component {
     return (
       <div>
         { image_error
-          ? <img className={css(styles.image)} src={missing_url} alt="noimage"/>
+          ? <img className={css(styles.image)} src={encodeURI(missing_url)} alt="missing"/>
           : <img className={css(styles.image)}
               src={image_src}
               alt="noimage"

frontend/src/Image/ImageRef.js

@@ -4,13 +4,12 @@ export default function ImageRef(src, missing_url) {
   return new Promise( (resolve, reject) => {
     // check for undefined, url, image mongo id, file
     if ( typeof src === 'undefined' || src === null) {
-        reject(encodeURI( missing_url));
+      resolve(encodeURI( missing_url));
     } else if (typeof src === 'string') {
       if( src.indexOf('/') === -1) {
         loadImage( src)
-        .then( url => {
-          resolve(url);
-        });
+        .then( url => { resolve(url); })
+        .catch( () => reject(encodeURI(missing_url)));
       } else {
         resolve(src);
       }

frontend/src/Navbar/Navbar.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { StyleSheet, css } from 'aphrodite';
 import { connect } from 'react-redux';
-import {logout} from '../Redux/actions';
+import {logout} from '../User/userActions';
 
 class navbar extends Component {
   static propTypes = {
@@ -94,7 +94,7 @@ const styles = StyleSheet.create({
 
 function mapStateToProps(state) {
   return {
-    user: state.user.user,
+    user: state.userReducer.user,
   }
 }
 

frontend/src/Profile/Profile.js

@@ -5,13 +5,13 @@ import {StyleSheet, css} from 'aphrodite';
 import Avatar from './Avatar';
 import Detail from './Detail';
 import ProfileLoader from './Profile.Loader';
-import {getDetail, profileSave} from '../Redux/userActions';
+import {getDetail, profileSave} from '../User/userActions';
 import {ImageRef} from '../Image';
 
 class Profile extends React.Component {
   static propTypes = {
     isWorking: PropTypes.bool,
-    error: PropTypes.string,
+    error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
     match: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired,
     getDetail: PropTypes.func.isRequired,
@@ -54,7 +54,9 @@ class Profile extends React.Component {
   };
   setAvatarImageSrc = image => {
     ImageRef(image, "//via.placeholder.com/200x200?text=No Profile Pic")
-    .then( avatar_src => this.setState( {avatar_src}));
+    .then( avatar_src => this.setState( {avatar_src}))
+    // eslint-disable-next-line no-console
+    .catch(e => console.error('ImageRef failed:', e));
   }
   changeImage = avatar => {
     this.setState( {user: {...this.state.user, avatar}});
@@ -101,9 +103,9 @@ class Profile extends React.Component {
 
 const mapStateToProps = state => {
   return {
-    user: state.user.user,
-    isWorking: state.user.isWorking,
-    error: state.user.error
+    user: state.userReducer.user,
+    isWorking: state.userReducer.isWorking,
+    error: state.userReducer.error
   };
 };
 const mapDispatchToProps = dispatch => {

frontend/src/Redux/index.js

@@ -0,0 +1,3 @@
+import store from './store';
+
+export { store };

frontend/src/Redux/reducers.js

@@ -3,45 +3,10 @@ import houseIssues from '../Dashboard/reducers';
 import house from '../House/reducers';
 import issue from '../Issue/reducers';
 import search from '../Search/reducers';
-import * as UserTypes from './UserTypes';
+import { userReducer } from '../User';
 
-function reducer(state = {user:{}, isWorking:false, error:""}, action) {
-  switch (action.type) {
-    case UserTypes.AUTO_LOGIN_SUCCESS:
-    case UserTypes.REQUEST_LOGIN_SUCCESS:
-      return {...state,
-        user: action.user
-      };
-    case UserTypes.AUTO_LOGIN_FAILED:
-    case UserTypes.REQUEST_LOGIN_FAILED:
-      return {...state,
-        error: action.error
-      };
-    case UserTypes.USER_IS_WORKING:
-      return {...state,
-        isWorking: action.isWorking
-      };
-    case UserTypes.USER_SUCCESS:
-      return {...state,
-        user: action.user
-      };
-    case UserTypes.USER_ERRORED:
-      return {
-        error: action.userErrored
-      };
-    case UserTypes.CLEAR_LOGIN_ERROR:
-    case UserTypes.LOGOUT:
-      return {...state,
-        user: {}
-      };
-    default:
-      return state;
-  }
-}
-
-// user key has to be user
 export default combineReducers({
-  user: reducer,
+  userReducer,
   houseIssues,
   house,
   issue,