[feature] Add logout button to sidebar (#48)

This one should probably be scrutinized a little more than my previous two.

For example, I don't know why I needed to do this: 1a1f48ceaa/app/javascript/flavours/glitch/features/ui/index.jsx (L152)

~~But, it appears to work.~~ It's live at https://masto-fe.compostintraining.club if you want to test it out.

~~Edit: it breaks stuff. Images don't load anymore...~~ Maybe that was just a network glitch...

Fixes #21.

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/48
Co-authored-by: prplecake <me@prplecake.com>
Co-committed-by: prplecake <me@prplecake.com>

app/javascript/flavours/glitch/features/ui/components/columns_area.jsx

@@ -55,6 +55,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
     singleColumn: PropTypes.bool,
     children: PropTypes.node,
     openSettings: PropTypes.func,
+    onLogout: PropTypes.func,
   };
 
   // Corresponds to (max-width: $no-gap-breakpoint + 285px - 1px) in SCSS
@@ -139,7 +140,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
   };
 
   render () {
-    const { columns, children, singleColumn, openSettings } = this.props;
+    const { columns, children, singleColumn, openSettings, onLogout } = this.props;
     const { renderComposePanel } = this.state;
 
     if (singleColumn) {
@@ -158,7 +159,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
 
           <div className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational'>
             <div className='columns-area__panels__pane__inner'>
-              <NavigationPanel onOpenSettings={openSettings} />
+              <NavigationPanel onOpenSettings={openSettings} onLogout={onLogout} />
             </div>
           </div>
         </div>

app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx

@@ -30,6 +30,7 @@ const messages = defineMessages({
   advancedInterface: { id: 'navigation_bar.advanced_interface', defaultMessage: 'Open in advanced web interface' },
   openedInClassicInterface: { id: 'navigation_bar.opened_in_classic_interface', defaultMessage: 'Posts, accounts, and other specific pages are opened by default in the classic web interface.' },
   app_settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' },
+  logout: { id: 'navigation_bar.logout', defaultMessage: 'Log out' },
 });
 
 class NavigationPanel extends Component {
@@ -42,6 +43,7 @@ class NavigationPanel extends Component {
   static propTypes = {
     intl: PropTypes.object.isRequired,
     onOpenSettings: PropTypes.func,
+    onLogout: PropTypes.func,
   };
 
   isFirehoseActive = (match, location) => {
@@ -49,7 +51,7 @@ class NavigationPanel extends Component {
   };
 
   render() {
-    const { intl, onOpenSettings } = this.props;
+    const { intl, onOpenSettings, onLogout } = this.props;
     const { signedIn, disabledAccountId } = this.context.identity;
 
     return (
@@ -104,6 +106,7 @@ class NavigationPanel extends Component {
             <hr />
 
             <ColumnLink transparent onClick={onOpenSettings} icon='cogs' text={intl.formatMessage(messages.app_settings)} />
+            <ColumnLink transparent onClick={onLogout} icon='sign-out' text={intl.formatMessage(messages.logout)} />
           </>
         )}
 
@@ -112,6 +115,7 @@ class NavigationPanel extends Component {
           <ColumnLink transparent to='/about' icon='ellipsis-h' text={intl.formatMessage(messages.about)} />
         </div>
 
+
         <NavigationPortal />
       </div>
     );

app/javascript/flavours/glitch/features/ui/containers/columns_area_container.js

@@ -1,14 +1,22 @@
+import { defineMessages, injectIntl } from 'react-intl';
+
 import { connect } from 'react-redux';
 
 import { openModal } from 'flavours/glitch/actions/modal';
+import { logOut } from 'flavours/glitch/utils/log_out';
 
 import ColumnsArea from '../components/columns_area';
 
+const messages = defineMessages({
+  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
+  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
+});
+
 const mapStateToProps = state => ({
   columns: state.getIn(['settings', 'columns']),
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch, { intl }) => ({
   openSettings (e) {
     e.preventDefault();
     e.stopPropagation();
@@ -17,6 +25,17 @@ const mapDispatchToProps = dispatch => ({
       modalProps: {},
     }));
   },
+  onLogout () {
+    dispatch(openModal({
+      modalType: 'CONFIRM',
+      modalProps: {
+        message: intl.formatMessage(messages.logoutMessage),
+        confirm: intl.formatMessage(messages.logoutConfirm),
+        closeWhenConfirm: false,
+        onConfirm: () => logOut(),
+      },
+    }));
+  },
 });
 
-export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(ColumnsArea);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(ColumnsArea));

app/javascript/flavours/glitch/features/ui/index.jsx

@@ -149,8 +149,10 @@ class SwitchingColumnsArea extends PureComponent {
 
   componentDidUpdate (prevProps) {
     if (![this.props.location.pathname, '/'].includes(prevProps.location.pathname)) {
+      if (this.node && this.node.handleChildrenContentChange === 'function') {
         this.node.handleChildrenContentChange();
       }
+    }
 
     if (prevProps.singleColumn !== this.props.singleColumn) {
       document.body.classList.toggle('layout-single-column', this.props.singleColumn);