0.0.6

- Fix hitting dashboard when logged out
- Clean up app.js

.gitlab-ci.yml

@@ -3,7 +3,7 @@ stages:
  - bundle
 
 variables:
-  VERSION: 0.0.5
+  VERSION: 0.0.6
 
 build-go:
   image: golang:1.16.2

docs/changelog.md

@@ -1,3 +1,7 @@
+# 0.0.6
+- Fix hitting dashboard when logged out
+- Clean up app.js
+
 # 0.0.5
 - Only allow ItemType:Audio from Jellyfin
 - Fix NavBar for Mobile (Ugly hack but.. TO REWORK)

web/src/Actions/auth.js

@@ -3,11 +3,13 @@ import {
     REGISTER_FAIL,
     LOGIN_SUCCESS,
     LOGIN_FAIL,
+    LOGOUT,
 } from "./types";
 
   import { toast } from 'react-toastify';
   import jwt from 'jwt-decode'
   import AuthService from "../Services/auth.service";
+  import eventBus from "./eventBus";
 
   export const register = (username, email, password) => (dispatch) => {
     return AuthService.register(username, email, password).then(
@@ -85,12 +87,19 @@ import {
     );
   };
 
-  export const logout = () => (dispatch) => {
-    AuthService.logout();
+  export const logout = (dispatch) => {
+      // Clear local data
+      AuthService.logout()
 
+      // window.location.pathname("/")
+      window.location.reload()
+
+      // TODO; Clear Redux - ENABLE THIS WHEN I FIGURE OUT HOW 2 DISPATCH
       // dispatch({
       //   type: LOGOUT,
+      //   payload: {},
       // });
 
-    window.location.reload();
+      // // Issue to all listeners to reload
+      eventBus.dispatch(LOGOUT);
   };

web/src/App.js

@@ -12,52 +12,23 @@ import Navigation from './Components/Navigation';
 
 // import { logout } from './Actions/auth';
 import { Route, Switch, withRouter } from 'react-router-dom';
-import { connect } from 'react-redux';
 import { Component } from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-function mapStateToProps(state) {
-  const { user } = state.auth;
-  return {
-    user,
-  };
-}
-
 class App extends Component {
   constructor(props) {
     super(props);
-    // this.logOut = this.logOut.bind(this);
-
     this.state = {
-      // showAdminBoard: false,
-      // currentUser: undefined,
-      // Don't even ask.. apparently you can't pass
-      // exact="true".. it has to be a bool :|
       true: true,
     };
   }
 
-
-  // componentDidMount() {
-  //   const user = this.props.user;
-
-  //   if (user) {
-  //     this.setState({
-  //       currentUser: user,
-  //     });
-  //   }
-  // }
-
-  // logOut() {
-  //   this.props.dispatch(logout());
-  // }
-
   render() {
     return (
       <div>
         <Navigation />
         <Switch>
-          <Route exact={this.state.true} path="/" component={Home} />
+          <Route exact={this.state.true} path={["/", "/home"]} component={Home} />
           <Route path="/about" component={About} />
 
           <Route path="/dashboard" component={Dashboard} />
@@ -68,9 +39,11 @@ class App extends Component {
 
           <Route path="/login" component={Login} />
           <Route path="/register" component={Register} />
+
         </Switch>
       </div>
     );
   }
 }
-export default withRouter(connect(mapStateToProps)(App));
+
+export default withRouter(App);

web/src/Components/Navigation.js

@@ -30,6 +30,7 @@ class Navigation extends Component {
   constructor(props) {
     super(props);
     this.toggleNavbar = this.toggleNavbar.bind(this);
+    this.handleLogout = this.handleLogout.bind(this);
 
     // Yeah I know you might not hit home.. but I can't get the
     // path based finder thing working on initial load :sweatsmile:
@@ -55,13 +56,16 @@ class Navigation extends Component {
 
   componentWillUnmount() {
     eventBus.remove(LOGIN_SUCCESS);
-    eventBus.remove(LOGOUT);
   }
 
   _handleClick(menuItem) {
     this.setState({ active: menuItem, collapsed: !this.state.collapsed });
   }
 
+  handleLogout() {
+    this.dispatch(logout());
+  }
+
   toggleNavbar() {
     this.setState({ collapsed: !this.state.collapsed });
   }
@@ -94,7 +98,7 @@ class Navigation extends Component {
               onClick={this._handleClick.bind(this, "profile")}
               className="navLinkMobile"
               >Profile</Link>
-            <Link to="/" className="navLink" onClick={logout()}>Logout</Link>
+            <Link to="/" className="navLink" onClick={this.handleLogout}>Logout</Link>
           </Nav>
         : <Nav className="navLinkLoginMobile" navbar>
                 {menuItems.map(menuItem =>
@@ -172,7 +176,7 @@ class Navigation extends Component {
                 onClick={this._handleClick.bind(this, "profile")}
                 className="navLink"
               >Profile</Link>
-              <Link to="/" className="navLink" onClick={logout()}>Logout</Link>
+              <Link to="/" className="navLink" onClick={this.handleLogout}>Logout</Link>
             </div>
         :
         <div className="navLinkLogin">
@@ -209,8 +213,9 @@ class Navigation extends Component {
 
 function mapStateToProps(state) {
   const { isLoggedIn } = state.auth;
+
   return {
-    isLoggedIn,
+    isLoggedIn
   };
 }
 

web/src/Pages/Dashboard.js

@@ -55,7 +55,10 @@ class Dashboard extends React.Component {
 
 function mapStateToProps(state) {
   const { isLoggedIn } = state.auth;
-  const { uuid } = state.auth.user;
+  let uuid = null;
+  if (isLoggedIn) {
+    uuid = state.auth.user.uuid
+  }
 
   return {
     isLoggedIn,

web/src/Services/auth.service.js

@@ -20,7 +20,7 @@ class AuthService {
       });
   }
 
-  logout() {
+  async logout() {
     localStorage.removeItem("user");
   }