Merge branch 'public-feeds' into dev

package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "deep-object-diff": "^1.1.0",
     "immutable": "^3.8.2",
     "jest-localstorage-mock": "^2.2.0",
     "moment": "^2.21.0",

src/App.test.jsx

@@ -13,6 +13,6 @@ describe('App Component', () => {
   it('==> renders without crashing', () => {
     const div = document.createElement('div');
     ReactDOM.render(<Provider store={store}><Router><App /></Router></Provider>, div);
-    ReactDOM.unmountComponentAtNode(div);
+    // ReactDOM.unmountComponentAtNode(div);
   });
 });

src/components/Callback.jsx

@@ -14,6 +14,7 @@ class Callback extends Component {
     }
     return url.match(/[&?]code=([\w/-]+)/)[1];
   }
+
   //
   // static getStateCode(url) {
   //   const error = url.match(/[&?]error=([^&]+)/);
@@ -35,16 +36,16 @@ class Callback extends Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    return nextProps.isSignIn !== this.props.isSignIn;
+    return (nextProps.isSignIn !== this.props.isSignIn);
   }
 
   render() {
     return (
       <div>
-                Redirecting...
+        Redirecting...
         {
-            this.props.isLoggedIn
-            && <Redirect to="/" />
+          this.props.isLoggedIn
+          && <Redirect to="/" />
         }
       </div>
     );

src/components/FeedsList.jsx

@@ -3,16 +3,43 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 
-export default function FeedList(props) {
-  return (
-    <div className="list-group">
-      {
-        props.feeds.map((feed) => {
-            const timesince = moment(new Date(feed.created_at)).fromNow();
+const FeedList = props => (
+  <div className="list-group">
+    {
+          props.feeds.map((feed) => {
+            let timeSince = null;
+            let commitMsg = '';
+            let avatarUrl = null;
+            let loginName = null;
 
+            if (feed.created_at) {
+             try {
+               timeSince = moment(new Date(feed.created_at)).fromNow();
+             } catch (e) {
+               timeSince = '';
+             }
+            }
             const commitObj = feed.payload.commits;
 
-            const commitMsg = commitObj !== undefined ? commitObj[0].message : '';
+            if (commitObj !== undefined) {
+              if (commitObj[0] !== undefined) {
+                commitMsg = commitObj[0].message;
+              } else {
+                commitMsg = '';
+              }
+            }
+
+            if (feed.actor !== undefined && feed.actor.avatar_url) {
+              avatarUrl = feed.actor.avatar_url;
+            } else {
+              avatarUrl = null;
+            }
+
+            if (feed.repo && feed.repo.name) {
+              loginName = feed.repo.name;
+            } else {
+              loginName = null;
+            }
 
             return (
               <a
@@ -22,21 +49,20 @@ export default function FeedList(props) {
               >
                 <div className="d-flex w-100 justify-content-between">
                   <div className="flex-10">
-                    <img src={feed.actor.avatar_url} alt={feed.actor.login} width="90" />
+                    { avatarUrl && <img src={avatarUrl} alt={feed.actor.login} width="90" /> }
                   </div>
                   <div className="flex-90">
-                    <h6 className="mb-1 feed-title">{feed.type} &rarr; {feed.repo.name}</h6>
-                    <small style={{ float: 'right' }}>{timesince}</small>
+                    <h6 className="mb-1 feed-title">{ feed.type } &rarr; { loginName }</h6>
+                    <small style={{ float: 'right' }}>{ timeSince }</small>
                     <br />
-                    <p className="mb-1">{commitMsg}</p>
+                    <p className="mb-1">{ commitMsg }</p>
                   </div>
                 </div>
               </a>);
-        })
-      }
-    </div>
-  );
-}
+          })
+        }
+  </div>
+);
 
 FeedList.defaultProps = {
   feeds: [],
@@ -45,3 +71,5 @@ FeedList.defaultProps = {
 FeedList.propTypes = {
   feeds: PropTypes.array,
 };
+
+export default FeedList;

src/components/Home.jsx

@@ -3,14 +3,16 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
+import { diff } from 'deep-object-diff';
 import * as Raven from 'raven-js';
 
+
 import { getUserInfo } from '../actions';
 import Profile from './Profile';
 import RepoList from './RepoList';
-import { getFeeds, getRepos } from '../service/httpFetch';
+import { getFeeds, getPublicFeeds, getRepos } from '../service/httpFetch';
 import FeedList from './FeedsList';
-import { sentryExtra } from '../lib/utils';
+// import { sentryExtra } from '../lib/utils';
 import { USER_FEEDS_ERROR, USER_REPO_ERROR } from '../lib/constants';
 
 class Home extends Component {
@@ -21,25 +23,33 @@ class Home extends Component {
       repoList: [],
       feedList: [],
       fetchedFeeds: false,
+      publicFeeds: true,
       isError: false,
     };
+    this.homeRef = null;
     this.getUserRepos = this.getUserRepos.bind(this);
     this.handleChange = this.handleChange.bind(this);
+    this.getPublicFeed = this.getPublicFeed.bind(this);
   }
 
   componentDidMount() {
+    // if user logged in show his feed
     if (this.props.token && !this.props.user) {
       this.props.getInfo();
     }
+
+    // if user not logged in show public feed
+    if (!this.props.token) {
+      this.getPublicFeed();
+    }
   }
 
+
   shouldComponentUpdate(nextProps, nextState) {
-    return (
-      (nextState.fetchedFeeds !== this.state.fetchedFeeds) ||
-            nextState.repoList !== this.state.repoList ||
-            nextProps.token !== this.props.token ||
-            nextProps.user !== this.props.user
-    );
+    const propsChanged = Object.keys(diff(this.props, nextProps)).length > 0;
+    const stateChanged = Object.keys(diff(this.state, nextState)).length > 0;
+
+    return ((propsChanged || stateChanged));
   }
 
   componentWillUpdate(nextProps, nextState) {
@@ -51,6 +61,14 @@ class Home extends Component {
             && nextState.fetchedFeeds === false) {
       this.getUserFeeds(nextProps.user.login);
     }
+
+    if (nextProps.user === null && this.state.publicFeeds === false) {
+      this.getPublicFeed();
+    }
+  }
+
+  componentWillUnmount() {
+    this.homeRef = null;
   }
 
   getUserRepos() {
@@ -71,48 +89,66 @@ class Home extends Component {
       this.setState({
         feedList: res.data,
         fetchedFeeds: true,
+        publicFeeds: false,
         // eslint-disable-next-line no-unused-vars
       });
     }).catch((err) => {
       // Raven.captureException(err, sentryExtra('Error while fetching user feeds'));
       this.setState({
         isError: USER_FEEDS_ERROR,
       });
+    }).catch((err) => {
+      console.log(err);
     });
   }
 
+  getPublicFeed() {
+    if (this.homeRef) {
+      getPublicFeeds().then((res) => {
+        this.setState({
+          feedList: res.data,
+          publicFeeds: true,
+          fetchedFeeds: false,
+        });
+      }).catch((err) => {
+        console.log(err);
+      });
+    }
+  }
   // eslint-disable-next-line class-methods-use-this
   componentDidCatch(error, errorInfo) {
     Raven.captureException(error, { extra: errorInfo });
   }
 
-  handleChange(e) {
-    this.setState({
-      username: e.target.value,
-    });
-  }
+    count = 0;
+
+    handleChange(e) {
+      this.setState({
+        username: e.target.value,
+      });
+    }
 
 
-  render() {
-    const data = this.props.user;
-    const { repoList, feedList } = this.state;
-    const feedError = this.state.isError === USER_FEEDS_ERROR;
-    const repoError = this.state.isError === USER_REPO_ERROR;
+    render() {
+      const data = this.props.user;
+      const { repoList, feedList } = this.state;
+      const feedError = this.state.isError === USER_FEEDS_ERROR;
+      const repoError = this.state.isError === USER_REPO_ERROR;
 
-    return (
-      <div className="row">
-        <div className="col-lg-12">
-          <br />
-          {data && <Profile data={data} />}
+      return (
+        <div className="row">
+          <div className="col-lg-12">
+            <br />
+            {data && <Profile data={data} />}
 
-          <br />
-          { feedError && <div><h1>Please try again.</h1> <p>Can not fetch feeds.</p></div> }
+            <br />
+            { feedError && <div><h1>Please try again.</h1> <p>Can not fetch feeds.</p></div> }
 
-          <FeedList feeds={feedList} />
+            <FeedList feeds={feedList} />
 
-          <br />
+            <br />
 
-          {
+            {
                         data &&
                         <div className="input-group mr-3">
                           <div className="input-group-prepend">
@@ -136,13 +172,13 @@ class Home extends Component {
                         </div>
                     }
 
-          { repoError && <div><h1>Please try again.</h1> <p>Can not repository list.</p></div> }
+            { repoError && <div><h1>Please try again.</h1> <p>Can not repository list.</p></div> }
 
-          <RepoList data={repoList} />
+            <RepoList data={repoList} />
+          </div>
         </div>
-      </div>
-    );
-  }
+      );
+    }
 }
 
 Home.defaultProps = {

src/components/Profile.jsx

@@ -2,21 +2,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export default function Profile(props) {
-  const { data } = props;
-  return (
-    <div className="media card">
-      <br />
-      <img className="mr-3" src={data.avatar_url} height={100} alt={data.login} />
-      <div className="card-body">
-        <h5 className="mt-0">{data.login}</h5>
-        {data.bio}
-      </div>
+const Profile = ({ data }) => (
+  <div className="media card">
+    <br />
+    <img className="mr-3" src={data.avatar_url} height={100} alt={data.login} />
+    <div className="card-body">
+      <h5 className="mt-0">{data.login}</h5>
+      {data.bio}
     </div>
-  );
-}
+  </div>
+);
 
 Profile.propTypes = {
   data: PropTypes.object.isRequired,
 };
 
+export default Profile;

src/containers/Header.jsx

@@ -24,9 +24,13 @@ class HeaderContainer extends React.Component {
 
   onClick() {
     const token = localStorage.getItem('github-token');
-    if (this.props.isSignIn && token !== '' && token !== '') {
-      localStorage.removeItem('github-token');
-      localStorage.removeItem('auth-token');
+    if (this.props.isSignIn && token !== undefined && token !== '') {
+      try {
+        localStorage.removeItem('github-token');
+        localStorage.removeItem('auth-token');
+      } catch (e) {
+        console.error('Couldn\'t delete token from localStorage.');
+      }
       this.props.signOut();
     } else {
       this.goToAuthURL();
@@ -48,7 +52,7 @@ class HeaderContainer extends React.Component {
 }
 
 HeaderContainer.defaultProps = {
-  signOut: () => '',
+  signOut: () => null,
   isSignIn: false,
 };
 

src/reducers/githHub.js

@@ -3,7 +3,7 @@ import { SIGN_OUT, SIGNED_IN, SIGNIN_REQUEST, USER_DATA } from '../actions';
 
 const initialState = fromJS({
   loginRequest: null,
-  token: localStorage.getItem('auth-token'),
+  token: localStorage.getItem('auth-token') || null,
   user: null,
 });