types for State (#156 in progress)

async-labs · May 18, 2021 · 8681666 · 8681666
1 parent 72f1d36
commit 8681666
Show file tree

Hide file tree

Showing 19 changed files with 187 additions and 97 deletions.
diff --git a/saas/app/components/common/Confirmer.tsx b/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>

diff --git a/saas/app/components/common/LoginButton.tsx b/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;

diff --git a/saas/app/components/common/MemberChooser.tsx b/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);
 

diff --git a/saas/app/components/common/MenuWithLinks.tsx b/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;

diff --git a/saas/app/components/common/MenuWithMenuItems.tsx b/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 });
   };
 }
 

diff --git a/saas/app/components/common/Notifier.tsx b/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() {

diff --git a/saas/app/components/discussions/CreateDiscussionForm.tsx b/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' }}

diff --git a/saas/app/components/discussions/DiscussionActionMenu.tsx b/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;

diff --git a/saas/app/components/discussions/DiscussionList.tsx b/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));

diff --git a/saas/app/components/discussions/EditDiscussionForm.tsx b/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}
               >

diff --git a/saas/app/components/layout/index.tsx b/saas/app/components/layout/index.tsx
@@ -207,7 +207,7 @@ class Layout extends React.Component<Props> {
                 Select existing team or create a new team.
                 <p />
                 <Link href="/create-team" as="/create-team">
-                  <Button variant="outlined" color="primary">
+                  <Button variant="contained" color="primary">
                     Create new team
                   </Button>
                 </Link>

diff --git a/saas/app/components/posts/PostEditor.tsx b/saas/app/components/posts/PostEditor.tsx
@@ -48,9 +48,13 @@ type Props = {
 type State = { htmlContent: string };
 
 class PostEditor extends React.Component<Props, State> {
-  public state = {
-    htmlContent: '',
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      htmlContent: '',
+    };
+  }
 
   public render() {
     const { htmlContent } = this.state;

diff --git a/saas/app/components/posts/PostForm.tsx b/saas/app/components/posts/PostForm.tsx
@@ -32,11 +32,15 @@ type State = {
 };
 
 class PostForm extends React.Component<Props, State> {
-  public state = {
-    postId: null,
-    content: '',
-    disabled: false,
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      postId: null,
+      content: '',
+      disabled: false,
+    };
+  }
 
   public static getDerivedStateFromProps(props: Props, state: State) {
     const { post } = props;
@@ -90,7 +94,7 @@ class PostForm extends React.Component<Props, State> {
             )}
             {isEditingPost ? (
               <Button
-                variant="outlined"
+                variant="contained"
                 onClick={this.closeForm}
                 disabled={this.state.disabled}
                 style={{ marginLeft: '10px' }}
@@ -112,7 +116,7 @@ class PostForm extends React.Component<Props, State> {
           <div style={{ margin: '20px 0px' }}>
             {isEditingPost ? (
               <Button
-                variant="outlined"
+                variant="contained"
                 onClick={this.closeForm}
                 disabled={this.state.disabled}
                 style={{ marginLeft: '10px' }}