issue #21 - adds auth HoCs to for redirecting with or without an orga…

…nization

- [x] adds hasOrgRedirect to go to /main if on /enroll and has an org already
- [x] adds withOrg to send back to /enroll if on /main and you don't have an org yet
- [x] wraps /enroll and /main components in protection
- [x] updates redux hydration to make sure correct data is sent back and not null errors occur

src/components/Main/Main.js

@@ -7,6 +7,7 @@ import { Switch, Route } from 'react-router-dom';
 // component dependencies
 import withLogin from '../../containers/Auth/withLogin';
 import withActivation from '../../containers/Auth/withActivation';
+import withOrg from '../../containers/Auth/withOrg';
 import Freelancer from '../Freelancer/Freelancer';
 import Project from '../Project/Project';
 import NavBar from '../NavBar/NavBar';
@@ -24,4 +25,4 @@ const Main = () => (
     </main>
 )
 
-export default withLogin(withActivation(Main));
+export default withLogin(withActivation(withOrg(Main)));

src/containers/Auth/hasOrgRedirect/index.js

@@ -0,0 +1,37 @@
+// react
+import React, { Component } from 'react';
+
+// library dependencies
+import { Redirect } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+//debug 
+import Debug from '../../../utils/Debug';
+
+
+const hasOrgRedirect = (WrappedComponent) => {
+
+  @connect(
+    state => (
+      {
+        Login: state.Login
+      }
+    ),
+    null
+  )
+  class hasOrgRedirector extends Component {
+    render() {
+      Debug.log('[render] of <hasOrgRedirect>: ', this.props);
+      const { Login } = this.props;
+      if ( Login.user.userOrg ) {
+        return (<Redirect to='/main' />);
+      } else {
+        return (<WrappedComponent {...this.props} />);
+      }
+    }
+  }
+
+  return hasOrgRedirector;
+}
+
+export default hasOrgRedirect;

src/containers/Auth/withOrg/index.js

@@ -0,0 +1,37 @@
+// react
+import React, { Component } from 'react';
+
+// library dependencies
+import { Redirect } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+//debug 
+import Debug from '../../../utils/Debug';
+
+
+const withOrg = (ProtectedComponent) => {
+
+  @connect(
+    state => (
+      {
+        Login: state.Login,
+      }
+    ),
+    null
+  )
+  class HasOrg extends Component {
+    render() {
+      Debug.log('[render] of <withOrg>: ', this.props);
+      const { Login } = this.props;
+      if ( Login.user.userOrg ) {
+        return (<ProtectedComponent {...this.props} />);
+      } else {
+        return (<Redirect to='/enroll' />);
+      }
+    }
+  }
+
+  return HasOrg;
+}
+
+export default withOrg;

src/containers/OrgEnrolment/component.js

@@ -9,6 +9,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 // component dependencies 
+import hasOrgRedirect from '../Auth/hasOrgRedirect';
 import EnrollmentForms from '../../components/EnrollmentForms';
 import FormText from '../../components/FormText';
 import Loader from '../../components/Loader';
@@ -157,4 +158,4 @@ class OrgEnrolment extends Component {
   }
 }
 
-export default withRouter(OrgEnrolment);
+export default hasOrgRedirect(withRouter(OrgEnrolment));

src/utils/Api/index.js

@@ -7,8 +7,7 @@ import Debug from '../Debug';
 
 class API {
   static async isLoggedIn(jwt) {
-    const query = this.generateThisUserQuery();
-    return await this.Axios('POST', '/graphql', query, jwt)
+    return await this.Axios('POST', '/graphql', this.generateThisUserQuery(), jwt)
     .then ( response => ( response.thisUser ) ) 
     .catch ( err => {
       Debug.log(err);

src/utils/Redux/index.js

@@ -77,7 +77,7 @@ const hydrateState = async () => {
   const userDetails = user.userDetails === null ? null : user.userDetails.userAccId !== null ? user.userDetails : null; // this helps check to see if expired or invalid JWT is being used
   const org = userDetails && !userDetails.userOrg ? await checkOrg(userDetails.userAccId) : null;
   Debug.log('API.hydrateState() result: ', userDetails !== null ? userDetails : 'NOT LOGGGED IN');
-  let partialState = {};
+  let partialState = { Login: null, Org: null };
 
 
   if ( !userDetails ) {
@@ -118,10 +118,7 @@ export const configureStore = async () => {
     },
     Org: {
       ...initialState.Org,
-      enrolment: {
-        ...initialState.Org.enrolment,
-        ...hydratedState.Org.enrolment
-      }
+      ...hydratedState.Org
     }
   }
   const logicMiddleware = createLogicMiddleware(rootLogic, deps); // create logic middleware