FIX: No manual refresh should be necessary on log in/out (#77).

TODO: Still needs more refactoring to use React automatic update instead
of ad hoc `_updateContent` method.

src/sidebar/jsx/Authenticated.jsx

@@ -69,15 +69,19 @@ class Authenticated extends Component {
       password: this.password.value
     })
       .then(() => {
-        this.setState({user})
+        this.setState({user});
+        this.props.onLogin({user});
       });
   }
 
   _closeSession() {
     browser.runtime.sendMessage({
       aim:'closeSession'
     })
-      .then(() => this.setState({user: ''}));
+      .then(() => {
+        this.setState({user: ''});
+        this.props.onLogin({user: ''});
+      });
   }
 
   componentDidMount() {

src/sidebar/jsx/Display.jsx

@@ -1,24 +1,35 @@
 /*global browser */
 import React from 'react';
+import Authenticated from './Authenticated.jsx';
 import Viewpoint from './Viewpoint.jsx';
 import Topic from './Topic.jsx';
 import ViewpointModel from '../../backgroundScripts/Viewpoint.js'
 
 export default class Display extends React.Component {
 
-	constructor(props) {
-		super(props);
-		this.state = {selectedViewpoint: null, viewpointName:''};
-		browser.contextMenus.removeAll();
-		this._deleteFrag=this._deleteFrag.bind(this);
-		this._createFrag=this._createFrag.bind(this);
-		this._moveFrag=this._moveFrag.bind(this);
-		this._contextMenuListener=this._contextMenuListener.bind(this);
-		this._handleBack = this._handleBack.bind(this);
-		this._handleCreateViewpoint = this._handleCreateViewpoint.bind(this);
-		this._handleViewpointName = this._handleViewpointName.bind(this);
-		this._renameTopic=this._renameTopic.bind(this);
-	}
+  constructor() {
+    super();
+    this.state = {
+      selectedViewpoint: null, 
+      viewpointName: '',
+      user: ''
+    };
+    browser.contextMenus.removeAll();
+    this._deleteFrag = this._deleteFrag.bind(this);
+    this._createFrag = this._createFrag.bind(this);
+    this._moveFrag = this._moveFrag.bind(this);
+    this._contextMenuListener = this._contextMenuListener.bind(this);
+    this._handleBack = this._handleBack.bind(this);
+    this._handleCreateViewpoint = this._handleCreateViewpoint.bind(this);
+    this._handleViewpointName = this._handleViewpointName.bind(this);
+    this._renameTopic = this._renameTopic.bind(this);
+    this._loginListener = this._loginListener.bind(this);
+  }
+
+  _loginListener(user) {
+    this.setState({user});
+    this.props.update(this.props.tabId, true);
+  }
 
 	_contextMenuListener(info,tab) {
 		if (info.menuItemId=="highlightnew" && this.state.selectedViewpoint) {
@@ -43,6 +54,7 @@ export default class Display extends React.Component {
       let topics = this._getTopics(labels);
       return (
         <div>
+          <Authenticated onLogin={this._loginListener} />
           <h1>{vp.name}</h1>
           <button className="btn btn-back" onClick={this._handleBack}>
             Retour aux points de vue
@@ -54,6 +66,7 @@ export default class Display extends React.Component {
     let viewpoints = this._getViewpoints(labels);
     return (
       <div>
+        <Authenticated onLogin={this._loginListener} />
         <h1>Points de vue</h1>
         {viewpoints}
         <form onChange={this._handleViewpointName} onSubmit={this._handleCreateViewpoint}>

src/sidebar/sidebar.jsx

@@ -5,7 +5,6 @@ import ReactDOM from 'react-dom';
 import Whitelist from './jsx/Whitelist.jsx';
 import Display from './jsx/Display.jsx';
 import Error from './jsx/Error.jsx';
-import Authenticated from './jsx/Authenticated.jsx';
 
 import Resource from '../backgroundScripts/Resource.js';
 
@@ -16,6 +15,10 @@ class Sidebar extends React.Component {
 			uri: '',
 			status: 'waiting'
 		};
+		this._deleteFrag = this._deleteFrag.bind(this);
+		this._moveFrag = this._moveFrag.bind(this);
+		this._createFrag = this._createFrag.bind(this);
+		this._updateContent = this._updateContent.bind(this);
 	}
 
 	componentDidMount() {
@@ -37,17 +40,11 @@ class Sidebar extends React.Component {
 				this._updateContent(tabId);
 			}
 		});
-
-		this._deleteFrag=this._deleteFrag.bind(this);
-		this._moveFrag=this._moveFrag.bind(this);
-		this._createFrag=this._createFrag.bind(this);
-
 	}
 
   render() {
     return (
       <div>
-        <Authenticated />
         {this.getContent(this.state.status)}
       </div>
     );
@@ -60,7 +57,8 @@ class Sidebar extends React.Component {
 		} else if (status === 'display') {
 			// Show the highlights
 			return <Display uri={this.state.uri} res={this.res} tabId={this.state.tabId}
-				createFrag={this._createFrag} deleteFrag={this._deleteFrag} moveFrag={this._moveFrag} />;
+				createFrag={this._createFrag} deleteFrag={this._deleteFrag} moveFrag={this._moveFrag}
+				update={this._updateContent} />;
 		} else if (status === 'error') {
 			return <Error err={this.state.error} uri={this.state.uri} />;
 		}