Use setState updater to access state (#32)

Author: morganfree

client/src/auth/Provider.spec.tsx

@@ -1,6 +1,7 @@
 import { mount } from 'enzyme'
 import React, { SFC } from 'react'
-import context, { Status } from './context'
+import { Status } from '~interfaces'
+import context from './context'
 import Provider from './Provider'
 
 describe('<Provider />', () => {
@@ -61,16 +62,13 @@ describe('<Provider />', () => {
 
       expectInitialValue(value)
 
-      value
-        .signIn(email, password)
-        .then(() => callback(wrapper))
+      value.signIn(email, password).then(() => callback(wrapper))
 
       value = getValue(wrapper)
 
       expect(value.signedIn).toBe(false)
       expect(value.user).toBeNull()
       expect(value.status).toBe(Status.Pending)
-
     }
 
     it('when signIn() succeeds', done => {

client/src/auth/Provider.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
-import context, { defaultValue, SignIn, SignOut, Status, Value } from './context'
+import { Status } from '~interfaces'
+import context, { defaultValue, SignIn, SignOut, Value } from './context'
 import { signIn } from './service'
 
 export default class Provider extends Component<{}, ProviderState> {
@@ -21,17 +22,19 @@ export default class Provider extends Component<{}, ProviderState> {
     )
   }
 
-  private signIn: SignIn = async (email, password) => {
-    this.setState({
-      status: Status.Pending
-    })
-
-    const maybeUser = await signIn(email, password)
-
-    this.setState({
-      signedIn: Boolean(maybeUser),
-      status: maybeUser ? Status.Success : Status.Failure,
-      user: maybeUser
+  private signIn: SignIn = (email, password) => {
+    return new Promise(resolve => {
+      this.setState({
+        status: Status.Pending
+      }, async () => {
+        const maybeUser = await signIn(email, password)
+
+        this.setState({
+          signedIn: Boolean(maybeUser),
+          status: maybeUser ? Status.Success : Status.Failure,
+          user: maybeUser
+        }, () => resolve())
+      })
     })
   }
 

client/src/auth/context.ts

@@ -1,5 +1,5 @@
 import { Context, createContext } from 'react'
-import { User } from '~interfaces'
+import { Status, User } from '~interfaces'
 
 export const defaultValue: Value = {
   signIn: () => new Promise<void>(resolve => resolve()),
@@ -17,12 +17,6 @@ export type SignIn = (email: string, password: string) => Promise<void>
 export type SignOut = () => void
 export type MaybeUser = User | null
 
-export enum Status {
-  Success = 'success',
-  Failure = 'failure',
-  Pending = 'pending'
-}
-
 export interface Value {
   signedIn: boolean,
   status: Status | undefined,

client/src/auth/index.ts

@@ -1,5 +1,4 @@
-import { Status } from './context'
 import Provider from './Provider'
 import withAuth, { WithAuth } from './withAuth'
 
-export { Provider, withAuth, Status, WithAuth }
+export { Provider, withAuth, WithAuth }

client/src/generic/Header/Header.tsx

@@ -100,9 +100,7 @@ class Header extends Component<HeaderProps, HeaderState> {
   }
 
   private closeMenu: () => void = () => {
-    this.setState({
-      anchorElement: undefined
-    })
+    this.setState({ anchorElement: undefined })
   }
 
   private onSignOut: () => void = () => {

client/src/generic/Header/SearchBar.tsx

@@ -14,6 +14,6 @@ const styles = createStyles({
   }
 })
 
-export default withStyles(styles)(SearchBar)
+interface SearchBarProps extends WithStyles<typeof styles> {}
 
-interface SearchBarProps extends WithStyles <typeof styles> {}
+export default withStyles(styles)(SearchBar)

client/src/generic/SelectCategory.tsx

@@ -3,26 +3,6 @@ import { createStyles, StyleRules, withStyles, WithStyles } from '@material-ui/c
 import React, { SFC } from 'react'
 import { Category, CategoryList } from '~interfaces'
 
-const styles: StyleRules = createStyles({
-  container: {
-    height: '100%',
-    overflow: 'auto'
-  },
-  item: {
-    display: 'block',
-    textAlign: 'center'
-  },
-  list: {
-    height: 0
-  }
-})
-
-export interface SelectCategoryProps extends WithStyles<typeof styles> {
-  categories: CategoryList,
-  onClick: (id: Category['id']) => void,
-  value: Category['id']
-}
-
 const SelectCategory: SFC<SelectCategoryProps> = ({
   categories,
   classes: { container, item, list },
@@ -49,4 +29,24 @@ const SelectCategory: SFC<SelectCategoryProps> = ({
   </div>
 )
 
+const styles: StyleRules = createStyles({
+  container: {
+    height: '100%',
+    overflow: 'auto'
+  },
+  item: {
+    display: 'block',
+    textAlign: 'center'
+  },
+  list: {
+    height: 0
+  }
+})
+
+export interface SelectCategoryProps extends WithStyles<typeof styles> {
+  categories: CategoryList,
+  onClick: (id: Category['id']) => void,
+  value: Category['id']
+}
+
 export default withStyles(styles)(SelectCategory)

client/src/generic/SelectTags.tsx

@@ -2,6 +2,24 @@ import { Chip } from '@material-ui/core'
 import { createStyles, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles'
 import React, { SFC } from 'react'
 
+const SelectTags: SFC<SelectTagsProps> = ({
+  tags,
+  classes: { container, item, selected, clickable },
+  onClick
+}) => (
+  <div className={container}>
+    {tags.map((tag, i) => (
+      <Chip
+        clickable
+        key={i}
+        label={tag.name}
+        className={`${item} ${clickable} ${tag.selected ? selected : ''}`}
+        onClick={onClick.bind(null, tag.name)}
+      />
+    ))}
+  </div>
+)
+
 const styles: StyleRulesCallback = ({
   spacing,
   palette: { primary: { light } }
@@ -38,22 +56,4 @@ export interface SelectTagsProps extends WithStyles<typeof styles> {
   onClick: (name: Tag['name']) => void
 }
 
-const SelectTags: SFC<SelectTagsProps> = ({
-  tags,
-  classes: { container, item, selected, clickable },
-  onClick
-}) => (
-  <div className={container}>
-    {tags.map((tag, i) => (
-      <Chip
-        clickable
-        key={i}
-        label={tag.name}
-        className={`${item} ${clickable} ${tag.selected ? selected : ''}`}
-        onClick={onClick.bind(null, tag.name)}
-      />
-    ))}
-  </div>
-)
-
 export default withStyles(styles)(SelectTags)

client/src/generic/TaskList/TaskList.tsx

@@ -3,32 +3,11 @@ import React from 'react'
 import { Task } from '~interfaces'
 import TaskListElement from './TaskListElement'
 
-const styles: StyleRulesCallback = () => createStyles({
-  container: {
-    height: '100%',
-    margin: 0,
-    overflow: 'auto'
-  },
-  grid: {
-    height: 0,
-    margin: 0,
-    width: '100%'
-  },
-  gridItem: {
-    // height: '250px'
-  }
-})
-
-interface TaskListProps extends WithStyles<typeof styles> {
-  tasks: Task[]
-}
-
 const TaskList = ({ classes, tasks }: TaskListProps) => (
   <div className={classes.container}>
     <Grid classes={{ container: classes.grid }} spacing={8} container>
     {tasks.map((task, i) => (
       <Grid
-        className={classes.gridItem}
         item
         xs={12}
         sm={6}
@@ -42,4 +21,21 @@ const TaskList = ({ classes, tasks }: TaskListProps) => (
   </div>
 )
 
+const styles: StyleRulesCallback = () => createStyles({
+  container: {
+    height: '100%',
+    margin: 0,
+    overflow: 'auto'
+  },
+  grid: {
+    height: 0,
+    margin: 0,
+    width: '100%'
+  }
+})
+
+interface TaskListProps extends WithStyles<typeof styles> {
+  tasks: Task[]
+}
+
 export default withStyles(styles)(TaskList)

client/src/interfaces/index.ts

@@ -20,9 +20,16 @@ interface User {
   email: string
 }
 
+enum Status {
+  Success = 'success',
+  Failure = 'failure',
+  Pending = 'pending'
+}
+
 export {
   Category,
   CategoryList,
+  Status,
   Task,
   TagList,
   User

client/src/pages/AddTask/components/AddTask.tsx

@@ -5,40 +5,6 @@ import { SelectCategory, SelectCategoryProps, SelectTags, SelectTagsProps } from
 import CapturePhoto, { CapturePhotoProps } from './CapturePhoto'
 import Description, { DescriptionProps } from './Description'
 
-const styles: StyleRulesCallback = () => createStyles({
-  addTaskContainer: {
-    display: 'grid',
-    gridTemplateRows: 'auto max-content'
-  },
-  container: {
-    display: 'grid',
-    gridTemplateRows: 'max-content auto'
-  },
-  content: {
-    display: 'grid',
-    gridTemplateRows: '50% 50%'
-  },
-  item: {
-    justifyContent: 'center',
-    maxWidth: '100%'
-  }
-})
-
-export interface AddTaskProps extends WithStyles<typeof styles> {
-  categories: SelectCategoryProps['categories'],
-  onClickCategory: SelectCategoryProps['onClick'],
-  onClickTag: SelectTagsProps['onClick'],
-  onSubmit: MouseEventHandler,
-  onCapturePhoto: CapturePhotoProps['onCapture'],
-  onChangeDescription: DescriptionProps['onChange'],
-  onChangeTab: (e: ChangeEvent<{}>, value: number) => void,
-  categoryValue: SelectCategoryProps['value'],
-  descriptionValue: DescriptionProps['value'],
-  image: CapturePhotoProps['imgSrc'],
-  tags: SelectTagsProps['tags'],
-  tabValue: boolean | number
-}
-
 const AddTask: SFC<AddTaskProps> = ({
   classes: { addTaskContainer, container, content, item },
   categories, onClickCategory, onChangeDescription, onChangeTab, onCapturePhoto,
@@ -74,4 +40,38 @@ const AddTask: SFC<AddTaskProps> = ({
     </div>
 )
 
+const styles: StyleRulesCallback = () => createStyles({
+  addTaskContainer: {
+    display: 'grid',
+    gridTemplateRows: 'auto max-content'
+  },
+  container: {
+    display: 'grid',
+    gridTemplateRows: 'max-content auto'
+  },
+  content: {
+    display: 'grid',
+    gridTemplateRows: '50% 50%'
+  },
+  item: {
+    justifyContent: 'center',
+    maxWidth: '100%'
+  }
+})
+
+export interface AddTaskProps extends WithStyles<typeof styles> {
+  categories: SelectCategoryProps['categories'],
+  onClickCategory: SelectCategoryProps['onClick'],
+  onClickTag: SelectTagsProps['onClick'],
+  onSubmit: MouseEventHandler,
+  onCapturePhoto: CapturePhotoProps['onCapture'],
+  onChangeDescription: DescriptionProps['onChange'],
+  onChangeTab: (e: ChangeEvent<{}>, value: number) => void,
+  categoryValue: SelectCategoryProps['value'],
+  descriptionValue: DescriptionProps['value'],
+  image: CapturePhotoProps['imgSrc'],
+  tags: SelectTagsProps['tags'],
+  tabValue: boolean | number
+}
+
 export default withStyles(styles)(AddTask)