book/ changes (#156 in progress)

async-labs · May 21, 2021 · d859a19 · d859a19
1 parent 354b944
commit d859a19
Show file tree

Hide file tree

Showing 217 changed files with 16,558 additions and 11,026 deletions.
diff --git a/book/10-begin/api/nodemon.json b/book/10-begin/api/nodemon.json
@@ -0,0 +1,5 @@
+{
+  "watch": ["server"],
+  "exec": "ts-node --project tsconfig.server.json",
+  "ext": "ts"
+}
diff --git a/book/10-begin/api/package.json b/book/10-begin/api/package.json
@@ -3,7 +3,7 @@
   "version": "1",
   "license": "MIT",
   "scripts": {
-    "dev": "ts-node-dev --respawn --transpile-only --project tsconfig.server.json server/server.ts",
+    "dev": "nodemon server/server.ts",
     "lint": "eslint . --ext .ts,.tsx",
     "test": "jest"
   },
@@ -57,8 +57,9 @@
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "jest": "^26.4.2",
+    "nodemon": "^2.0.7",
     "prettier": "^2.2.1",
     "ts-jest": "^26.4.4",
-    "ts-node-dev": "^1.0.0-pre.44"
+    "ts-node": "^9.1.1"
   }
 }
diff --git a/book/10-begin/api/yarn.lock b/book/10-begin/api/yarn.lock
diff --git a/book/10-begin/app/components/common/Confirmer.tsx b/book/10-begin/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;
   }
 

diff --git a/book/10-begin/app/components/common/LoginButton.tsx b/book/10-begin/app/components/common/LoginButton.tsx
@@ -10,7 +10,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/book/10-begin/app/components/common/MemberChooser.tsx b/book/10-begin/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/book/10-begin/app/components/common/MenuWithLinks.tsx b/book/10-begin/app/components/common/MenuWithLinks.tsx
@@ -1,16 +1,26 @@
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
+import Link from 'next/link';
 import { NextRouter, withRouter } from 'next/router';
-import Router 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;
@@ -35,25 +45,30 @@ class MenuWithLinks extends React.PureComponent<{
         >
           {options.map((option, i) =>
             option.separator ? (
-              <hr style={{ width: '85%', margin: '10px auto' }} key={`separated-${i}`} />
-            ) : (
+              <hr style={{ width: '95%', margin: '10px auto' }} key={`separated-${i}`} />
+            ) : option.externalServer ? (
               <MenuItem
-                onClick={() => {
-                  if (option.externalServer) {
-                    window.location.href = option.href;
-                  } else {
-                    Router.push(option.href, option.as || option.href);
-                  }
+                onClick={(event) => {
+                  event.preventDefault();
+                  window.location.href = option.href;
                   this.handleClose();
                 }}
-                key={option.href}
-                style={{
-                  fontWeight: router.asPath.includes(option.highlighterSlug) ? 600 : 300,
-                  fontSize: '14px',
-                }}
+                key={option.href || option.text}
               >
                 {option.text}
               </MenuItem>
+            ) : (
+              <Link key={option.href} href={option.href} as={option.as} passHref>
+                <MenuItem
+                  key={option.href}
+                  style={{
+                    fontWeight: router.asPath.includes(option.highlighterSlug) ? 600 : 300,
+                    fontSize: '14px',
+                  }}
+                >
+                  {option.text}
+                </MenuItem>
+              </Link>
             ),
           )}
         </Menu>

diff --git a/book/10-begin/app/components/common/MenuWithMenuItems.tsx b/book/10-begin/app/components/common/MenuWithMenuItems.tsx
@@ -2,13 +2,23 @@ import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import React from 'react';
 
-class MenuWithMenuItems extends React.PureComponent<{
+type Props = {
   menuOptions: any;
   itemOptions: any[];
-}> {
-  public state = {
-    menuElem: 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;

diff --git a/book/10-begin/app/components/common/Notifier.tsx b/book/10-begin/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/book/10-begin/app/components/discussions/CreateDiscussionForm.tsx b/book/10-begin/app/components/discussions/CreateDiscussionForm.tsx
@@ -35,14 +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;
     const { currentTeam, currentUser } = store;

diff --git a/book/10-begin/app/components/discussions/DiscussionActionMenu.tsx b/book/10-begin/app/components/discussions/DiscussionActionMenu.tsx
@@ -53,10 +53,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/book/10-begin/app/components/discussions/DiscussionList.tsx b/book/10-begin/app/components/discussions/DiscussionList.tsx
@@ -12,10 +12,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/book/10-begin/app/components/discussions/EditDiscussionForm.tsx b/book/10-begin/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;

diff --git a/book/10-begin/app/components/posts/PostEditor.tsx b/book/10-begin/app/components/posts/PostEditor.tsx
@@ -47,9 +47,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/book/10-begin/app/components/posts/PostForm.tsx b/book/10-begin/app/components/posts/PostForm.tsx
@@ -30,11 +30,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;

diff --git a/book/10-begin/app/components/teams/InviteMember.tsx b/book/10-begin/app/components/teams/InviteMember.tsx
@@ -22,10 +22,14 @@ type State = {
 };
 
 class InviteMember extends React.Component<Props, State> {
-  public state = {
-    email: '',
-    disabled: false,
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      email: '',
+      disabled: false,
+    };
+  }
 
   public render() {
     const { open } = this.props;

diff --git a/book/10-begin/app/nodemon.json b/book/10-begin/app/nodemon.json
@@ -0,0 +1,5 @@
+{
+  "watch": ["server"],
+  "exec": "ts-node --project tsconfig.server.json",
+  "ext": "ts"
+}
diff --git a/book/10-begin/app/package.json b/book/10-begin/app/package.json
@@ -3,7 +3,7 @@
   "version": "1",
   "license": "MIT",
   "scripts": {
-    "dev": "ts-node-dev --respawn --transpile-only --project tsconfig.server.json --ignore-watch .next --ignore-watch components --ignore-watch lib --ignore-watch pages server/server.ts",
+    "dev": "nodemon server/server.ts",
     "build": "next build",
     "lint": "eslint . --ext .ts,.tsx"
   },
@@ -45,7 +45,8 @@
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.21.5",
+    "nodemon": "^2.0.7",
     "prettier": "^2.2.1",
-    "ts-node-dev": "^1.0.0-pre.44"
+    "ts-node": "^9.1.1"
   }
 }