TripCreator front code style

1. Order in files:

• imports
• constants
• styled components
• react component

Define interfaces above components that use them

2. Use upper case for constants:

// bad
const buttonHeight = 30;

const footerConstants = {
  height: 50,
  ...
}

// good
const BUTTON_HEIGHT = 30;

const FOOTER_CONSTANTS = {
  height: 50
  ...
}

3. Always pass named variables mapStateToProps and mapDispatchToProps to connect() method:

// bad
export const AccommodationGroups = connect(
  ({ accommodationGroups }: RootState): OwnProps => ({
    groups: accommodationGroups.groups,
  }),
  (dispatch: Dispatch<m.Actions>) => ({
    dispatch
  }))(Component);

// good
const mapStateToProps = ({ accommodationGroups }: RootState): OwnProps => ({
  groups: accommodationGroups.groups,
});

const mapDispatchToProps = (dispatch: Dispatch<m.Actions>) => ({
  dispatch
});

export const AccommodationGroups = connect(mapStateToProps, mapDispatchToProps)(Component);

4. Use dispatch instead of bindActionCreators:

// bad
const mapDispatchToProps = (dispatch: Dispatch<m.Actions>) => ({
  actions: bindActionCreators(accommodationGroupsActions, dispatch)
});

...

const { actions } = this.props;
actions.loadGroups();

// good
const mapDispatchToProps = (dispatch: Dispatch<m.Actions>) => ({
  dispatch
});

...

this.props.dispatch(accommodationGroupsActions.loadGroups());

5. Add spaces between curly brackets and object properties:

// bad
const {actions} = this.props;

// good
const { actions } = this.props;

6. Do not use method.bind(this) or method = () => {} when () => method() is possible to use:

// bad
<Link onClick={ this.toggle.bind(this) }>Select</Link>


// good
<Link onClick={ () => this.toggle() }>Select</Link>

7. Do not use default exports:

// bad
class Textarea extends React.Component<{}> {}
export default Textarea;

// good
export class Textarea extends React.Component<{}> {}

8. Do not use unscoped naming for exported variables:

// bad
export const reducer = ...
export type Action = GetActionTypes<typeof actions>;

// good
export const cartInfoReducer = ...
export type CartInfoAction = GetActionTypes<typeof actions>;

9. For private variables, use common naming:

// bad
interface TimePickerContainerProps {}

const TimePickerContainer => styled.div``;

interface TimePickerProps {}

export class TimePicker extends React.Component<TimePickerProps> {}


// good
interface ContainerProps {}

const Container => styled.div``;

interface Props {}

export class TimePicker extends React.Component<Props> {}

10. Define method return type for complex methods or which return other method:

// bad
export const displayDateTime = (time) => {
  return moment.utc(time).format('MMM DD, YYYY, HH:mm');
};

// good
export const displayDateTime = (time): string => {
  return moment.utc(time).format('MMM DD, YYYY, HH:mm');
};

11. Methods names, that return JSX.Elements, should start with "render":

// bad
bookingNo() {
  return (
    <BookingNo>
      Number
    </BookingNo>
  );
}

// good
renderBookingNo() {
  return (
    <BookingNo>
      Number
    </BookingNo>
  );
}

12. If element's opening tag has more than one attribute, write them in separate lines, as well as closing tag (both for elements with children and without). If element has only one attribute, write it in single line:

// bad
<Group
  inventorized={ true }
  address={ locationTitle }>
  Group name
</Group>

<Group
  inventorized={ true }
  address={ locationTitle } />

// good
<Group
  inventorized={ true }
  address={ locationTitle }
/>

<Group
  inventorized={ true }
  address={ locationTitle }
>
  Group name
</Group>

<Group inventorized={ true }>Group name</Group>

13. Use same indentation everywhere:

// bad
return failingItems
        .map(i => `'${i}'`)
        .filter((v, i, a) => a.indexOf(v) === i)
        .join(', ') || fallback;

// good
return failingItems
  .map(i => `'${i}'`)
  .filter((v, i, a) => a.indexOf(v) === i)
  .join(', ') || fallback;