types for State (#156 in progress)

Author: tima101

saas/app/components/common/Confirmer.tsx

@@ -8,16 +8,24 @@ import React from 'react';
 
 export let openConfirmDialogExternal;
 
-class Confirmer extends React.Component {
- public state = {
- open: false,
- title: 'Are you sure?',
- message: '',
- onAnswer: null,
- };
+type State = {
+ open: boolean;
+ title: string;
+ message: string;
+ onAnswer: (answer) => void;
+};
 
+class Confirmer extends React.Component<any, State> {
  constructor(props) {
  super(props);
+
+ this.state = {
+ open: false,
+ title: 'Are you sure?',
+ message: '',
+ onAnswer: null,
+ };
+
  openConfirmDialogExternal = this.openConfirmDialog;
  }
 
@@ -34,10 +42,10 @@ class Confirmer extends React.Component {
  <DialogContentText id="alert-dialog-description">{this.state.message}</DialogContentText>
  </DialogContent>
  <DialogActions style={{ padding: '10px' }}>
- <Button onClick={this.handleClose} variant="outlined" color="primary" autoFocus>
+ <Button onClick={this.handleClose} variant="contained" color="primary" autoFocus>
  Cancel
  </Button>
- <Button onClick={this.handleYes} variant="contained" color="primary">
+ <Button onClick={this.handleYes} variant="contained" color="secondary">
  OK
  </Button>
  </DialogActions>

saas/app/components/common/LoginButton.tsx

@@ -12,7 +12,11 @@ type Props = { invitationToken?: string };
 type State = { email: string };
 
 class LoginButton extends React.PureComponent<Props, State> {
- public state = { email: '' };
+ constructor(props) {
+ super(props);
+
+ this.state = { email: '' };
+ }
 
  public render() {
  const { invitationToken } = this.props;

saas/app/components/common/MemberChooser.tsx

@@ -13,11 +13,11 @@ type Props = {
  helperText?: string;
 };
 
-class MemberChooser extends React.Component<Props> {
- public state = {
- selectedItems: [],
- };
+type State = {
+ selectedItems: { label: string; id: string }[];
+};
 
+class MemberChooser extends React.Component<Props, State> {
  constructor(props) {
  super(props);
 

saas/app/components/common/MenuWithLinks.tsx

@@ -4,13 +4,23 @@ import Link from 'next/link';
 import { NextRouter, withRouter } from 'next/router';
 import React from 'react';
 
-class MenuWithLinks extends React.PureComponent<{
+type Props = {
  options: any[];
  router: NextRouter;
-}> {
- public state = {
- anchorEl: null,
- };
+};
+
+type State = {
+ anchorEl: Element | ((element: Element) => Element);
+};
+
+class MenuWithLinks extends React.PureComponent<Props, State> {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ anchorEl: null,
+ };
+ }
 
  public render() {
  const { options, children, router } = this.props;

saas/app/components/common/MenuWithMenuItems.tsx

@@ -3,22 +3,32 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
 import MenuItem from '@material-ui/core/MenuItem';
 import React from 'react';
 
-class MenuWithMenuItems extends React.PureComponent<{
+type Props = {
  menuOptions: any;
  itemOptions: any[];
-}> {
- public state = {
- menuElm: null,
- };
+};
+
+type State = {
+ menuElem: Element | ((element: Element) => Element);
+};
+
+class MenuWithMenuItems extends React.PureComponent<Props, State> {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ menuElem: null,
+ };
+ }
 
  public render() {
  const { menuOptions, itemOptions } = this.props;
- const { menuElm } = this.state;
+ const { menuElem } = this.state;
 
  return (
  <div style={{ verticalAlign: 'middle' }}>
  <MoreVertIcon
- aria-controls={menuElm ? menuOptions.id : null}
+ aria-controls={menuElem ? menuOptions.id : null}
  data-id={menuOptions.dataId}
  aria-haspopup="true"
  style={{ fontSize: '14px', opacity: 0.7, cursor: 'pointer' }}
@@ -27,8 +37,8 @@ class MenuWithMenuItems extends React.PureComponent<{
 
  <Menu
  id={menuOptions.id}
- anchorEl={menuElm}
- open={Boolean(menuElm)}
+ anchorEl={menuElem}
+ open={Boolean(menuElem)}
  onClose={this.handleClose}
  >
  {itemOptions.map((option, i) => (
@@ -37,7 +47,7 @@ class MenuWithMenuItems extends React.PureComponent<{
  data-id={option.dataId}
  data-more-id={option.dataMoreId}
  onClick={(e) => {
- this.setState({ menuElm: null });
+ this.setState({ menuElem: null });
  option.onClick(e);
  }}
  >
@@ -51,11 +61,11 @@ class MenuWithMenuItems extends React.PureComponent<{
 
  public handleClick = (event) => {
  event.preventDefault();
- this.setState({ menuElm: event.currentTarget });
+ this.setState({ menuElem: event.currentTarget });
  };
 
  public handleClose = () => {
- this.setState({ menuElm: null });
+ this.setState({ menuElem: null });
  };
 }
 

saas/app/components/common/Notifier.tsx

@@ -3,15 +3,20 @@ import React from 'react';
 
 export let openSnackbarExternal;
 
-class Notifier extends React.PureComponent {
- public state = {
- open: false,
- message: '',
- };
+type State = {
+ open: boolean;
+ message: string;
+};
 
+class Notifier extends React.PureComponent<any, State> {
  constructor(props) {
  super(props);
  openSnackbarExternal = this.openSnackbar;
+
+ this.state = {
+ open: false,
+ message: '',
+ };
  }
 
  public render() {

saas/app/components/discussions/CreateDiscussionForm.tsx

@@ -35,13 +35,17 @@ type State = {
 };
 
 class CreateDiscussionForm extends React.Component<Props, State> {
- public state = {
- name: '',
- memberIds: [],
- disabled: false,
- content: '',
- notificationType: 'default',
- };
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ name: '',
+ memberIds: [],
+ disabled: false,
+ content: '',
+ notificationType: 'default',
+ };
+ }
 
  public render() {
  const { open, isMobile, store } = this.props;
@@ -121,7 +125,7 @@ class CreateDiscussionForm extends React.Component<Props, State> {
  </Button>
  {isMobile ? <p /> : null}
  <Button
- variant="outlined"
+ variant="contained"
  onClick={this.handleClose}
  disabled={this.state.disabled}
  style={{ marginLeft: isMobile ? '0px' : '20px' }}
@@ -148,7 +152,7 @@ class CreateDiscussionForm extends React.Component<Props, State> {
  </Button>
  {isMobile ? <p /> : null}
  <Button
- variant="outlined"
+ variant="contained"
  onClick={this.handleClose}
  disabled={this.state.disabled}
  style={{ marginLeft: isMobile ? '0px' : '20px' }}

saas/app/components/discussions/DiscussionActionMenu.tsx

@@ -55,10 +55,14 @@ type State = {
 };
 
 class DiscussionActionMenu extends React.Component<Props, State> {
- public state = {
- discussionFormOpen: false,
- selectedDiscussion: null,
- };
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ discussionFormOpen: false,
+ selectedDiscussion: null,
+ };
+ }
 
  public render() {
  const { discussion, store } = this.props;

saas/app/components/discussions/DiscussionList.tsx

@@ -13,10 +13,16 @@ import notify from '../../lib/notify';
 
 type Props = { store: Store; team: Team; isMobile: boolean };
 
-class DiscussionList extends React.Component<Props> {
- public state = {
- discussionFormOpen: false,
- };
+type State = { discussionFormOpen: boolean };
+
+class DiscussionList extends React.Component<Props, State> {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ discussionFormOpen: false,
+ };
+ }
 
  public componentDidMount() {
  this.props.team.loadDiscussions().catch((err) => notify(err));

saas/app/components/discussions/EditDiscussionForm.tsx

@@ -36,13 +36,17 @@ type State = {
 };
 
 class EditDiscussionForm extends React.Component<Props, State> {
- public state = {
- name: '',
- memberIds: [],
- disabled: false,
- discussionId: '',
- notificationType: 'default',
- };
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ name: '',
+ memberIds: [],
+ disabled: false,
+ discussionId: '',
+ notificationType: 'default',
+ };
+ }
 
  public static getDerivedStateFromProps(props: Props, state: State) {
  const { discussion } = props;
@@ -117,7 +121,7 @@ class EditDiscussionForm extends React.Component<Props, State> {
  <DialogActions>
  <Button
  color="primary"
- variant="outlined"
+ variant="contained"
  onClick={this.handleClose}
  disabled={this.state.disabled}
  >