How to avoid Flow-type error on ES6 arrow function

Question

I am having trouble resolving a Flow-type warning

When this code block is checked

export const login = (email: string, password: string) => ({
  type: types.LOGIN,
  responseTypes: [types.LOGIN_SUCCESS, types.LOGIN_FAILURE],
  promise: (client: Client) => client.post('/auth/sign_in', { email, password }),
});

I receive the warning

error Unexpected parentheses around single function argument having a body with no curly braces arrow-parens

However, when I remove the parenthesis around (client: Client) , I receive the error

Module build failed: SyntaxError: Unexpected token

at the colon after client .

Changing the function to the following

export const login = (email: string, password: string) => ({
  type: types.LOGIN,
  responseTypes: [types.LOGIN_SUCCESS, types.LOGIN_FAILURE],
  promise: (client: Client) => { return client.post('/auth/sign_in', { email, password }); },
});

the returns the following warning:

error Unexpected block statement surrounding arrow body arrow-body-style

I'm a little confused at to what the correct syntax would be to fix this warning. Thanks.

Answer 1

The error you get is from eslint arrow-parens rule, not from flow.

You can resolve it by changing your eslint config or trying the ES6 method syntax :

promise(client: Client) {
  return client.post('/auth/sign_in', { email, password })
},

Answer 2

I think the issue is in your first function, you are wrapping the body in parenthesis when it should be braces.

export const login = (email: string, password: string) => { 
  type: types.LOGIN, 
  responseTypes: [
    types.LOGIN_SUCCESS, types.LOGIN_FAILURE
  ], 
  promise: (client: Client) => client.post('/auth/sign_in', { email, password }), 
};

You can also write it this way (without using the single expression shorthand.

export const login = (email: string, password: string) => { 
  type: types.LOGIN, 
  responseTypes: [
    types.LOGIN_SUCCESS, types.LOGIN_FAILURE
  ], 
  promise: (client: Client) => { return client.post('/auth/sign_in', { email, password }); }, 
};