minor tweaks to usability

ckoukoutchos · May 25, 2019 · a9bd0a3 · a9bd0a3
1 parent 61156e7
commit a9bd0a3
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 28 deletions.
diff --git a/src/containers/auth/profile/Profile.tsx b/src/containers/auth/profile/Profile.tsx
@@ -67,7 +67,7 @@ class Profile extends Component<ProfileProps, ProfileState> {
       email: false,
       password: false
     },
-    displayName: this.props.user ? this.props.user.displayName || '' : '',
+    displayName: this.props.user ? this.props.user.displayName : '',
     error: null,
     email: this.props.user ? this.props.user.email : '',
     password: '',

diff --git a/src/containers/auth/signup/Signup.tsx b/src/containers/auth/signup/Signup.tsx
@@ -39,8 +39,8 @@ interface SignupState {
 }
 
 /*
-* Sign up container widget
-*/
+ * Sign up container widget
+ */
 class Signup extends Component<SignupProps, SignupState> {
   state = {
     email: '',
@@ -88,7 +88,7 @@ class Signup extends Component<SignupProps, SignupState> {
     // redirect if already signed in
     let authRedirect = null;
     if (this.props.user) {
-      authRedirect = <Redirect to="/dashboard" />;
+      authRedirect = <Redirect to='/dashboard' />;
     }
 
     let signup = <Spinner />;
@@ -98,7 +98,7 @@ class Signup extends Component<SignupProps, SignupState> {
         <form onSubmit={this.signup}>
           {authRedirect}
 
-          <TitleCard title="Sign Up">
+          <TitleCard title='Sign Up'>
             {this.state.error ? (
               <p className={classes.Error}>{this.state.error}</p>
             ) : null}
@@ -108,32 +108,32 @@ class Signup extends Component<SignupProps, SignupState> {
 
             <Input
               editing
-              label="Email"
+              label='Email'
               long
-              type="email"
+              type='email'
               value={email}
               onChange={this.onInputChange('email')}
             />
 
             <Input
               editing
-              label="Password"
+              label='Password'
               long
-              type="password"
+              type='password'
               value={password}
               onChange={this.onInputChange('password')}
             />
 
             <Input
               editing
-              label="Password Check"
+              label='Re-type Password'
               long
-              type="password"
+              type='password'
               value={passwordCheck}
               onChange={this.onInputChange('passwordCheck')}
             />
 
-            <Button btnType="Raised" color="Primary">
+            <Button btnType='Raised' color='Primary'>
               Sign Up
             </Button>
           </TitleCard>

diff --git a/src/containers/create/Create.tsx b/src/containers/create/Create.tsx
@@ -19,6 +19,7 @@ import { User } from '../../models/User';
 
 interface CreateProps {
   history: History;
+  heroes: Hero[];
   user: User | null;
   createHero: (hero: Hero, route: any, uid: string) => HeroActionTypes;
 }
@@ -32,7 +33,8 @@ class Create extends Component<CreateProps> {
    * @description triggers action to create new hero and redirect to track page
    */
   onCreateClicked = () => {
-    if (this.props.user) {
+    // TODO: add error if user tries to create another hero when they already have 5 made
+    if (this.props.user && this.props.heroes.length <= 5) {
       this.props.createHero(
         new Hero(),
         this.props.history,
@@ -43,17 +45,17 @@ class Create extends Component<CreateProps> {
 
   render() {
     return (
-      <TitleCard subTitle="So begins a new legend..." title="Create">
+      <TitleCard subTitle='So begins a new legend...' title='Create'>
         <SecondaryCard
           btnText={['', 'Create']}
-          label="Traditional"
+          label='Traditional'
           onEdit={this.onCreateClicked}
           wide
         >
           <p>Just a clean new hero sheet</p>
         </SecondaryCard>
 
-        <SecondaryCard btnText={['', 'Create']} label="Hero Builder" wide>
+        <SecondaryCard btnText={['', 'Create']} label='Hero Builder' wide>
           <p>
             Step-by-step guide to creating your next hero! Coming in phase 3.
           </p>
@@ -64,6 +66,7 @@ class Create extends Component<CreateProps> {
 }
 
 const mapStatetoProps = (state: AppState) => ({
+  heroes: state.hero.heroes,
   user: state.auth.user
 });
 

diff --git a/src/containers/home/Home.module.css b/src/containers/home/Home.module.css
@@ -1,3 +1,4 @@
 .Center {
+  margin: auto;
   text-align: center;
 }
diff --git a/src/containers/home/Home.tsx b/src/containers/home/Home.tsx
@@ -11,6 +11,7 @@ import Button from '../../components/button/Button';
 import classes from './Home.module.css';
 import Jumbotron from '../../components/jumbotron/Jumbotron';
 import SideCard from '../../components/card/side-card/SideCard';
+import BasicCard from '../../components/card/basic-card/BasicCard';
 
 // shared
 import { User } from '../../models/User';
@@ -38,17 +39,17 @@ class Home extends Component<HomeProps> {
     // redirect if already signed in
     let authRedirect = null;
     if (user) {
-      authRedirect = <Redirect to="/dashboard" />;
+      authRedirect = <Redirect to='/dashboard' />;
     }
 
     return (
       <>
         {authRedirect}
 
-        <Jumbotron header="Dragonborn" subHeader="Adventure awaits!" />
+        <Jumbotron header='Dragonborn' subHeader='Adventure awaits!' />
 
         <div className={classes.Center}>
-          <SideCard align="Left" title="Create">
+          <SideCard align='Left' title='Create'>
             <h3 className={classes.Center}>
               Create a hero for the ages with the hero builder:
             </h3>
@@ -59,9 +60,9 @@ class Home extends Component<HomeProps> {
             </p>
           </SideCard>
 
-          <SideCard align="Right" title="Track">
+          <SideCard align='Right' title='Track'>
             <h3 className={classes.Center}>
-              Track your heroes as they play thru epic adventures:
+              Track your heroes as they play through epic adventures:
             </h3>
 
             <p className={classes.Center}>
@@ -70,20 +71,24 @@ class Home extends Component<HomeProps> {
             </p>
           </SideCard>
 
-          <SideCard align="Left" title="Guide">
+          <SideCard align='Left' title='Guide'>
             <h3 className={classes.Center}>
-              Guide your friends on a whorlwind campaign:
+              Guide your friends on a whirlwind campaign:
             </h3>
 
             <p className={classes.Center}>
-              Track the state of your adventure and adventurers in real-time!
+              See the state of your adventure and adventurers in real-time!
             </p>
           </SideCard>
         </div>
 
-        <Button btnType="Raised" color="Primary" clicked={this.onSignup}>
-          Sign Up
-        </Button>
+        <BasicCard title='Begin Your Journey'>
+          <div className={classes.Center}>
+            <Button btnType='Raised' color='Primary' clicked={this.onSignup}>
+              Sign Up
+            </Button>
+          </div>
+        </BasicCard>
       </>
     );
   }

diff --git a/src/store/auth/authSagas.ts b/src/store/auth/authSagas.ts
@@ -158,7 +158,8 @@ function* updateDisplayName({ displayName }: { displayName: string }): IterableI
 
     // check if there is a valid user
     if (user != null) {
-      yield user.updateProfile(displayName);
+      yield user.updateProfile({ displayName });
+
       yield put(updateDisplayNameSuccess(displayName));
     }