From 292f758ac9dc7d0227f296d9b1344f2d1f156b75 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 15 May 2017 12:17:30 -0300
Subject: [PATCH] Comment history relies on authtokens

---
 client/coral-framework/actions/auth.js        |  4 +-
 client/coral-framework/helpers/storage.js     | 22 ++++-
 client/coral-framework/services/transport.js  |  9 +-
 .../containers/ProfileContainer.js            | 90 ++++++++++---------
 4 files changed, 73 insertions(+), 52 deletions(-)

diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js
index aa0d7faaa..0a95bab07 100644
--- a/client/coral-framework/actions/auth.js
+++ b/client/coral-framework/actions/auth.js
@@ -290,8 +290,8 @@ export const fetchForgotPassword = email => dispatch => {
 //==============================================================================
 
 export const logout = () => dispatch => {
-  Storage.clear();
   dispatch({type: actions.LOGOUT});
+  Storage.removeItem('token');
 };
 
 //==============================================================================
@@ -312,6 +312,7 @@ export const checkLogin = () => dispatch => {
   coralApi('/auth')
     .then(result => {
       if (!result.user) {
+        Storage.removeItem('token');
         throw new Error('Not logged in');
       }
 
@@ -323,6 +324,7 @@ export const checkLogin = () => dispatch => {
       dispatch(checkLoginFailure(`${error.translation_key}`));
     });
 };
+
 export const validForm = () => ({type: actions.VALID_FORM});
 export const invalidForm = error => ({type: actions.INVALID_FORM, error});
 
diff --git a/client/coral-framework/helpers/storage.js b/client/coral-framework/helpers/storage.js
index 9a5997193..2b23d6440 100644
--- a/client/coral-framework/helpers/storage.js
+++ b/client/coral-framework/helpers/storage.js
@@ -32,10 +32,14 @@ function storageAvailable(type) {
   }
 }
 
-export function getItem(item = '') {
+function lazyCheckStorage() {
   if (typeof available === 'undefined') {
     available = storageAvailable('localStorage');
   }
+}
+
+export function getItem(item = '') {
+  lazyCheckStorage();
 
   if (available) {
     return localStorage.getItem(item);
@@ -45,9 +49,7 @@ export function getItem(item = '') {
 }
 
 export function setItem(item = '', value) {
-  if (typeof available === 'undefined') {
-    available = storageAvailable('localStorage');
-  }
+  lazyCheckStorage();
 
   if (available) {
     return localStorage.setItem(item, value);
@@ -56,7 +58,19 @@ export function setItem(item = '', value) {
   }
 }
 
+export function removeItem(item = '') {
+  lazyCheckStorage();
+
+  if (available) {
+    return localStorage.removeItem(item);
+  } else {
+    console.error(`Cannot remove item from localStorage. localStorage is not available. ${error}`);
+  }
+}
+
 export function clear() {
+  lazyCheckStorage();
+
   if (available) {
     return localStorage.clear();
   } else {
diff --git a/client/coral-framework/services/transport.js b/client/coral-framework/services/transport.js
index 923d28e86..0ea69cb96 100644
--- a/client/coral-framework/services/transport.js
+++ b/client/coral-framework/services/transport.js
@@ -1,7 +1,10 @@
 import {createNetworkInterface} from 'apollo-client';
 import * as Storage from '../helpers/storage';
 
-export default function getNetworkInterface(apiUrl = '/api/v1/graph/ql', headers = {}) {
+export default function getNetworkInterface(
+  apiUrl = '/api/v1/graph/ql',
+  headers = {}
+) {
   return new createNetworkInterface({
     uri: apiUrl,
     opts: {
@@ -9,7 +12,7 @@ export default function getNetworkInterface(apiUrl = '/api/v1/graph/ql', headers
       headers: {
         Authorization: `Bearer ${Storage.getItem('token')}`,
         ...headers
-      },
-    },
+      }
+    }
   });
 }
diff --git a/client/coral-settings/containers/ProfileContainer.js b/client/coral-settings/containers/ProfileContainer.js
index f9c8d892f..1c6be1ee9 100644
--- a/client/coral-settings/containers/ProfileContainer.js
+++ b/client/coral-settings/containers/ProfileContainer.js
@@ -17,71 +17,68 @@ import translations from '../translations';
 const lang = new I18n(translations);
 
 class ProfileContainer extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      activeTab: 0,
-    };
+  constructor() {
+    super();
 
-    this.handleTabChange = this.handleTabChange.bind(this);
+    this.state = {
+      activeTab: 0
+    };
   }
 
-  handleTabChange(tab) {
+  handleTabChange = tab => {
     this.setState({
       activeTab: tab
     });
-  }
+  };
 
   render() {
-    const {asset, data, showSignInDialog, myIgnoredUsersData, stopIgnoringUser} = this.props;
-    const {me} = this.props.data;
+    const {
+      auth,
+      data,
+      asset,
+      showSignInDialog,
+      stopIgnoringUser,
+      myIgnoredUsersData
+    } = this.props;
 
-    if (data.loading) {
-      return <Spinner/>;
-    }
+    const {me} = data;
 
-    if (!me) {
+    if (!auth.loggedIn) {
       return <NotLoggedIn showSignInDialog={showSignInDialog} />;
     }
 
-    const localProfile = this.props.user.profiles.find(p => p.provider === 'local');
+    if (data.loading) {
+      return <Spinner />;
+    }
+
+    const localProfile = this.props.user.profiles.find(
+      p => p.provider === 'local'
+    );
+
     const emailAddress = localProfile && localProfile.id;
 
     return (
       <div>
         <h2>{this.props.user.username}</h2>
-        { emailAddress
-          ? <p>{ emailAddress }</p>
-          : null
-        }
+        {emailAddress ? <p>{emailAddress}</p> : null}
 
-        {
-          myIgnoredUsersData.myIgnoredUsers && myIgnoredUsersData.myIgnoredUsers.length
-          ? (
-            <div>
+        {myIgnoredUsersData.myIgnoredUsers &&
+          myIgnoredUsersData.myIgnoredUsers.length
+          ? <div>
               <h3>Ignored users</h3>
               <IgnoredUsers
                 users={myIgnoredUsersData.myIgnoredUsers}
                 stopIgnoring={stopIgnoringUser}
               />
             </div>
-          )
-          : null
-        }
+          : null}
 
         <hr />
 
         <h3>My comments</h3>
-        {
-          me.comments.length ?
-            <CommentHistory
-              comments={me.comments}
-              asset={asset}
-              link={link}
-            />
-          :
-            <p>{lang.t('userNoComment')}</p>
-        }
+        {me.comments.length
+          ? <CommentHistory comments={me.comments} asset={asset} link={link} />
+          : <p>{lang.t('userNoComment')}</p>}
       </div>
     );
   }
@@ -89,21 +86,25 @@ class ProfileContainer extends Component {
 
 // TODO: These currently relies on refetching (see ignoreUser and stopIgnoringUser mutations).
 //
-const withMyIgnoredUsersQuery = graphql(gql`
+const withMyIgnoredUsersQuery = graphql(
+  gql`
   query myIgnoredUsers {
     myIgnoredUsers {
       id,
       username,
     }
-  }`, {
+  }`,
+  {
     props: ({data}) => {
-      return ({
+      return {
         myIgnoredUsersData: data
-      });
+      };
     }
-  });
+  }
+);
 
-const withMyCommentHistoryQuery = graphql(gql`
+const withMyCommentHistoryQuery = graphql(
+  gql`
   query myCommentHistory {
     me {
       comments {
@@ -117,7 +118,8 @@ const withMyCommentHistoryQuery = graphql(gql`
           created_at
       }
     }
-  }`);
+  }`
+);
 
 const mapStateToProps = state => ({
   user: state.user.toJS(),
@@ -132,5 +134,5 @@ export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   withMyCommentHistoryQuery,
   withMyIgnoredUsersQuery,
-  withStopIgnoringUser,
+  withStopIgnoringUser
 )(ProfileContainer);