Separated user and auth stores

frontend/scenes/Home/Home.js

@@ -2,22 +2,23 @@
 import React from 'react';
 import { observer, inject } from 'mobx-react';
 import { Redirect } from 'react-router';
-
 import { Flex } from 'reflexbox';
+import styled from 'styled-components';
+
+import AuthStore from 'stores/AuthStore';
+
 import Layout from 'components/Layout';
 import CenteredContent from 'components/CenteredContent';
 import SlackAuthLink from 'components/SlackAuthLink';
 import Alert from 'components/Alert';
 
-import styles from './Home.scss';
+type Props = {
+  auth: AuthStore,
+  location: Object,
+};
 
-@inject('user')
-@observer
-export default class Home extends React.Component {
-  static propTypes = {
-    user: React.PropTypes.object.isRequired,
-    location: React.PropTypes.object.isRequired,
-  };
+@observer class Home extends React.Component {
+  props: Props;
 
   get notifications(): React.Element<any>[] {
     const notifications = [];
@@ -40,17 +41,17 @@ export default class Home extends React.Component {
     return (
       <Flex auto>
         <Layout notifications={this.notifications}>
-          {this.props.user.authenticated && <Redirect to="/dashboard" />}
+          {this.props.auth.authenticated && <Redirect to="/dashboard" />}
 
           <CenteredContent>
             {showLandingPageCopy &&
-              <div className={styles.intro}>
-                <h1 className={styles.title}>Simple, fast, markdown.</h1>
-                <p className={styles.copy}>
+              <div>
+                <Title>Simple, fast, markdown.</Title>
+                <Copy>
                   We're building a modern wiki for engineering teams.
-                </p>
+                </Copy>
               </div>}
-            <div className={styles.action}>
+            <div>
               <SlackAuthLink redirectUri={`${BASE_URL}/auth/slack`}>
                 <img
                   alt="Sign in with Slack"
@@ -67,3 +68,15 @@ export default class Home extends React.Component {
     );
   }
 }
+
+const Title = styled.h1`
+  font-size: 36px;
+  margin-bottom: 24px;
+}`;
+
+const Copy = styled.p`
+  font-size: 20px;
+  margin-bottom: 36px;
+}`;
+
+export default inject('auth')(Home);

frontend/scenes/Home/Home.scss

@@ -1,9 +0,0 @@
-.title {
-  font-size: 36px;
-  margin-bottom: 24px;
-}
-
-.copy {
-  font-size: 20px;
-  margin-bottom: 36px;
-}

frontend/scenes/SlackAuth/SlackAuth.js

@@ -5,19 +5,20 @@ import queryString from 'query-string';
 import { observer, inject } from 'mobx-react';
 import { client } from 'utils/ApiClient';
 
-import UserStore from 'stores/UserStore';
+import AuthStore from 'stores/AuthStore';
 
 type Props = {
-  user: UserStore,
+  auth: AuthStore,
   location: Object,
 };
 
-@inject('user')
-@observer
-class SlackAuth extends React.Component {
-  props: Props;
+type State = {
+  redirectTo: string,
+};
 
-  state: { redirectTo?: string };
+@observer class SlackAuth extends React.Component {
+  props: Props;
+  state: State;
   state = {};
 
   // $FlowIssue Flow doesn't like async lifecycle components https://github.com/facebook/flow/issues/1803
@@ -47,7 +48,7 @@ class SlackAuth extends React.Component {
         const redirectTo = sessionStorage.getItem('redirectTo');
         sessionStorage.removeItem('redirectTo');
 
-        const { success } = await this.props.user.authWithSlack(code, state);
+        const { success } = await this.props.auth.authWithSlack(code, state);
         success
           ? this.setState({ redirectTo: redirectTo || '/dashboard' })
           : this.setState({ redirectTo: '/auth/error' });
@@ -64,4 +65,4 @@ class SlackAuth extends React.Component {
   }
 }
 
-export default SlackAuth;
+export default inject('auth')(SlackAuth);