common & discussion components changes to book chapters

JaymesKat · Oct 10, 2019 · 1d75ef8 · 1d75ef8
1 parent e99d3b7
commit 1d75ef8
Show file tree

Hide file tree

Showing 137 changed files with 1,443 additions and 1,186 deletions.
diff --git a/book/10-begin/app/components/common/ActiveLink.tsx b/book/10-begin/app/components/common/ActiveLink.tsx
@@ -1,9 +1,24 @@
 // 12
 // import { inject, observer } from 'mobx-react';
 // import Link from 'next/link';
-// import { withRouter } from 'next/router';
 
-// const ActiveLink = ({ linkText, href, as, hasIcon, highlighterSlug, store }) => {
+// import { Store } from '../../lib/store';
+
+// const ActiveLink = ({
+//   linkText,
+//   href,
+//   as,
+//   hasIcon,
+//   highlighterSlug,
+//   store,
+// }: {
+//   store?: Store;
+//   linkText: string;
+//   href: string;
+//   as: string;
+//   hasIcon: boolean;
+//   highlighterSlug: string;
+// }) => {
 //   const selectedElement = store.currentUrl.includes(highlighterSlug);
 
 //   const styleAnchor = {
@@ -20,9 +35,8 @@
 
 //   const trimmingLength = 20;
 
-//   // TODO: solve TS warning
 //   return (
-//     <Link prefetch href={href} as={as}>
+//     <Link href={href} as={as}>
 //       <a
 //         // onClick={handleClick}
 //         style={hasIcon && selectedElement ? styleAnchorSelectedWithIcon : styleAnchor}
@@ -47,11 +61,4 @@
 //   );
 // };
 
-// export default withRouter<{
-//   linkText?: string;
-//   href?: string;
-//   as?: string;
-//   teamLogo?: string;
-//   hasIcon?: boolean;
-//   highlighterSlug?: string;
-// }>(inject('store')(observer(ActiveLink)));
+// export default inject('store')(observer(ActiveLink));
diff --git a/book/10-begin/app/components/common/AutoComplete.tsx b/book/10-begin/app/components/common/AutoComplete.tsx
@@ -73,8 +73,8 @@
 // class DownshiftMultiple extends React.Component<{
 //   classes: any;
 //   onChange: (selectedItems) => void;
-//   suggestions: [{ label: string; value: string }];
-//   selectedItems: [{ label: string; value: string }];
+//   suggestions: Array<{ label: string; value: string }>;
+//   selectedItems: Array<{ label: string; value: string }>;
 //   helperText: string;
 //   label: string;
 // }> {
@@ -209,20 +209,20 @@
 //   },
 //   container: {
 //     flexGrow: 1,
-//     position: 'relative',
+//     position: 'relative' as 'relative',
 //   },
 //   paper: {
-//     position: 'absolute',
+//     position: 'absolute' as 'absolute',
 //     zIndex: 1,
 //     marginTop: theme.spacing.unit,
 //     left: 0,
 //     right: 0,
 //   },
 //   chip: {
-//     margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`,
+//     margin: `${theme.spacing(0.5)}px ${theme.spacing(0.25)}px`,
 //   },
 //   inputRoot: {
-//     flexWrap: 'wrap',
+//     flexWrap: 'wrap' as 'wrap',
 //   },
 // });
 

diff --git a/book/10-begin/app/components/discussions/CreateDiscussionForm.tsx b/book/10-begin/app/components/discussions/CreateDiscussionForm.tsx
@@ -103,7 +103,7 @@
 //                 <InputLabel>Notification type</InputLabel>
 //                 <Select
 //                   value={this.state.notificationType}
-//                   onChange={event => {
+//                   onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
 //                     this.setState({ notificationType: event.target.value });
 //                   }}
 //                   required
@@ -219,22 +219,19 @@
 //         notificationType,
 //       });
 
-//       await discussion.addPost(content);
+//       const post = await discussion.addPost(content);
 
-//       // 14
-//       // const post = await discussion.addPost(content);
-
-//       // if (discussion.notificationType === 'email') {
-//       //   const userIdsForLambda = discussion.memberIds.filter(m => m !== discussion.createdUserId);
-//       //   console.log(discussion.notificationType, userIdsForLambda);
-//       //   await discussion.sendDataToLambdaApiMethod({
-//       //     discussionName: discussion.name,
-//       //     discussionLink: `${URL_APP}/team/${discussion.team.slug}/discussions/${discussion.slug}`,
-//       //     postContent: post.content,
-//       //     authorName: post.user.displayName,
-//       //     userIds: userIdsForLambda,
-//       //   });
-//       // }
+//       if (discussion.notificationType === 'email') {
+//         const userIdsForLambda = discussion.memberIds.filter(m => m !== discussion.createdUserId);
+//         console.log(discussion.notificationType, userIdsForLambda);
+//         await discussion.sendDataToLambdaApiMethod({
+//           discussionName: discussion.name,
+//           discussionLink: `${URL_APP}/team/${discussion.team.slug}/discussions/${discussion.slug}`,
+//           postContent: post.content,
+//           authorName: post.user.displayName,
+//           userIds: userIdsForLambda,
+//         });
+//       }
 
 //       this.setState({ name: '', memberIds: [], content: '' });
 //       notify('You successfully added new Discussion.');

diff --git a/book/10-begin/app/components/discussions/DiscussionListItem.tsx b/book/10-begin/app/components/discussions/DiscussionListItem.tsx
@@ -40,7 +40,6 @@
 //       >
 //         <li key={discussion._id} style={{ whiteSpace: 'nowrap', paddingRight: '10px' }}>
 //           <Link
-//             prefetch
 //             scroll={false}
 //             href={`/discussion?teamSlug=${team.slug}&discussionSlug=${discussion.slug}`}
 //             as={`/team/${team.slug}/discussions/${discussion.slug}`}

diff --git a/book/10-begin/app/components/discussions/EditDiscussionForm.tsx b/book/10-begin/app/components/discussions/EditDiscussionForm.tsx
@@ -86,7 +86,7 @@
 //               <InputLabel>Notification type</InputLabel>
 //               <Select
 //                 value={this.state.notificationType}
-//                 onChange={event => {
+//                 onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
 //                   this.setState({ notificationType: event.target.value });
 //                 }}
 //                 required

diff --git a/book/10-end/app/components/common/ActiveLink.tsx b/book/10-end/app/components/common/ActiveLink.tsx
@@ -1,9 +1,24 @@
 // 12
 // import { inject, observer } from 'mobx-react';
 // import Link from 'next/link';
-// import { withRouter } from 'next/router';
 
-// const ActiveLink = ({ linkText, href, as, hasIcon, highlighterSlug, store }) => {
+// import { Store } from '../../lib/store';
+
+// const ActiveLink = ({
+//   linkText,
+//   href,
+//   as,
+//   hasIcon,
+//   highlighterSlug,
+//   store,
+// }: {
+//   store?: Store;
+//   linkText: string;
+//   href: string;
+//   as: string;
+//   hasIcon: boolean;
+//   highlighterSlug: string;
+// }) => {
 //   const selectedElement = store.currentUrl.includes(highlighterSlug);
 
 //   const styleAnchor = {
@@ -20,9 +35,8 @@
 
 //   const trimmingLength = 20;
 
-//   // TODO: solve TS warning
 //   return (
-//     <Link prefetch href={href} as={as}>
+//     <Link href={href} as={as}>
 //       <a
 //         // onClick={handleClick}
 //         style={hasIcon && selectedElement ? styleAnchorSelectedWithIcon : styleAnchor}
@@ -47,11 +61,4 @@
 //   );
 // };
 
-// export default withRouter<{
-//   linkText?: string;
-//   href?: string;
-//   as?: string;
-//   teamLogo?: string;
-//   hasIcon?: boolean;
-//   highlighterSlug?: string;
-// }>(inject('store')(observer(ActiveLink)));
+// export default inject('store')(observer(ActiveLink));
diff --git a/book/10-end/app/components/common/AutoComplete.tsx b/book/10-end/app/components/common/AutoComplete.tsx
@@ -73,8 +73,8 @@
 // class DownshiftMultiple extends React.Component<{
 //   classes: any;
 //   onChange: (selectedItems) => void;
-//   suggestions: [{ label: string; value: string }];
-//   selectedItems: [{ label: string; value: string }];
+//   suggestions: Array<{ label: string; value: string }>;
+//   selectedItems: Array<{ label: string; value: string }>;
 //   helperText: string;
 //   label: string;
 // }> {
@@ -209,20 +209,20 @@
 //   },
 //   container: {
 //     flexGrow: 1,
-//     position: 'relative',
+//     position: 'relative' as 'relative',
 //   },
 //   paper: {
-//     position: 'absolute',
+//     position: 'absolute' as 'absolute',
 //     zIndex: 1,
 //     marginTop: theme.spacing.unit,
 //     left: 0,
 //     right: 0,
 //   },
 //   chip: {
-//     margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`,
+//     margin: `${theme.spacing(0.5)}px ${theme.spacing(0.25)}px`,
 //   },
 //   inputRoot: {
-//     flexWrap: 'wrap',
+//     flexWrap: 'wrap' as 'wrap',
 //   },
 // });
 

diff --git a/book/10-end/app/components/discussions/CreateDiscussionForm.tsx b/book/10-end/app/components/discussions/CreateDiscussionForm.tsx
@@ -103,7 +103,7 @@
 //                 <InputLabel>Notification type</InputLabel>
 //                 <Select
 //                   value={this.state.notificationType}
-//                   onChange={event => {
+//                   onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
 //                     this.setState({ notificationType: event.target.value });
 //                   }}
 //                   required
@@ -219,22 +219,19 @@
 //         notificationType,
 //       });
 
-//       await discussion.addPost(content);
+//       const post = await discussion.addPost(content);
 
-//       // 14
-//       // const post = await discussion.addPost(content);
-
-//       // if (discussion.notificationType === 'email') {
-//       //   const userIdsForLambda = discussion.memberIds.filter(m => m !== discussion.createdUserId);
-//       //   console.log(discussion.notificationType, userIdsForLambda);
-//       //   await discussion.sendDataToLambdaApiMethod({
-//       //     discussionName: discussion.name,
-//       //     discussionLink: `${URL_APP}/team/${discussion.team.slug}/discussions/${discussion.slug}`,
-//       //     postContent: post.content,
-//       //     authorName: post.user.displayName,
-//       //     userIds: userIdsForLambda,
-//       //   });
-//       // }
+//       if (discussion.notificationType === 'email') {
+//         const userIdsForLambda = discussion.memberIds.filter(m => m !== discussion.createdUserId);
+//         console.log(discussion.notificationType, userIdsForLambda);
+//         await discussion.sendDataToLambdaApiMethod({
+//           discussionName: discussion.name,
+//           discussionLink: `${URL_APP}/team/${discussion.team.slug}/discussions/${discussion.slug}`,
+//           postContent: post.content,
+//           authorName: post.user.displayName,
+//           userIds: userIdsForLambda,
+//         });
+//       }
 
 //       this.setState({ name: '', memberIds: [], content: '' });
 //       notify('You successfully added new Discussion.');

diff --git a/book/10-end/app/components/discussions/DiscussionListItem.tsx b/book/10-end/app/components/discussions/DiscussionListItem.tsx
@@ -40,7 +40,6 @@
 //       >
 //         <li key={discussion._id} style={{ whiteSpace: 'nowrap', paddingRight: '10px' }}>
 //           <Link
-//             prefetch
 //             scroll={false}
 //             href={`/discussion?teamSlug=${team.slug}&discussionSlug=${discussion.slug}`}
 //             as={`/team/${team.slug}/discussions/${discussion.slug}`}

diff --git a/book/10-end/app/components/discussions/EditDiscussionForm.tsx b/book/10-end/app/components/discussions/EditDiscussionForm.tsx
@@ -86,7 +86,7 @@
 //               <InputLabel>Notification type</InputLabel>
 //               <Select
 //                 value={this.state.notificationType}
-//                 onChange={event => {
+//                 onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
 //                   this.setState({ notificationType: event.target.value });
 //                 }}
 //                 required

diff --git a/book/11-begin/app/components/common/ActiveLink.tsx b/book/11-begin/app/components/common/ActiveLink.tsx
@@ -1,9 +1,24 @@
 // 12
 // import { inject, observer } from 'mobx-react';
 // import Link from 'next/link';
-// import { withRouter } from 'next/router';
 
-// const ActiveLink = ({ linkText, href, as, hasIcon, highlighterSlug, store }) => {
+// import { Store } from '../../lib/store';
+
+// const ActiveLink = ({
+//   linkText,
+//   href,
+//   as,
+//   hasIcon,
+//   highlighterSlug,
+//   store,
+// }: {
+//   store?: Store;
+//   linkText: string;
+//   href: string;
+//   as: string;
+//   hasIcon: boolean;
+//   highlighterSlug: string;
+// }) => {
 //   const selectedElement = store.currentUrl.includes(highlighterSlug);
 
 //   const styleAnchor = {
@@ -20,9 +35,8 @@
 
 //   const trimmingLength = 20;
 
-//   // TODO: solve TS warning
 //   return (
-//     <Link prefetch href={href} as={as}>
+//     <Link href={href} as={as}>
 //       <a
 //         // onClick={handleClick}
 //         style={hasIcon && selectedElement ? styleAnchorSelectedWithIcon : styleAnchor}
@@ -47,11 +61,4 @@
 //   );
 // };
 
-// export default withRouter<{
-//   linkText?: string;
-//   href?: string;
-//   as?: string;
-//   teamLogo?: string;
-//   hasIcon?: boolean;
-//   highlighterSlug?: string;
-// }>(inject('store')(observer(ActiveLink)));
+// export default inject('store')(observer(ActiveLink));
diff --git a/book/11-begin/app/components/common/AutoComplete.tsx b/book/11-begin/app/components/common/AutoComplete.tsx
@@ -73,8 +73,8 @@
 // class DownshiftMultiple extends React.Component<{
 //   classes: any;
 //   onChange: (selectedItems) => void;
-//   suggestions: [{ label: string; value: string }];
-//   selectedItems: [{ label: string; value: string }];
+//   suggestions: Array<{ label: string; value: string }>;
+//   selectedItems: Array<{ label: string; value: string }>;
 //   helperText: string;
 //   label: string;
 // }> {
@@ -209,20 +209,20 @@
 //   },
 //   container: {
 //     flexGrow: 1,
-//     position: 'relative',
+//     position: 'relative' as 'relative',
 //   },
 //   paper: {
-//     position: 'absolute',
+//     position: 'absolute' as 'absolute',
 //     zIndex: 1,
 //     marginTop: theme.spacing.unit,
 //     left: 0,
 //     right: 0,
 //   },
 //   chip: {
-//     margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`,
+//     margin: `${theme.spacing(0.5)}px ${theme.spacing(0.25)}px`,
 //   },
 //   inputRoot: {
-//     flexWrap: 'wrap',
+//     flexWrap: 'wrap' as 'wrap',
 //   },
 // });