Workspace settings deprec; improvements to 2-end

etsangsplk · Dec 21, 2019 · 0175b83 · 0175b83
1 parent a69d184
commit 0175b83
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 65 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -18,13 +18,9 @@
   "editor.formatOnSave": true,
   "eslint.enable": true,
   "eslint.alwaysShowStatus": true,
-  "eslint.autoFixOnSave": true,
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    { "language": "typescript", "autoFix": true },
-    { "language": "typescriptreact", "autoFix": true }
-  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
   "eslint.workingDirectories": [
     { "directory": "./app", "changeProcessCWD": true },
     { "directory": "./api", "changeProcessCWD": true },

diff --git a/book/2-end/app/components/common/MenuWithLinks.tsx b/book/2-end/app/components/common/MenuWithLinks.tsx
@@ -1,14 +1,10 @@
-import Avatar from '@material-ui/core/Avatar';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import { NextRouter, withRouter } from 'next/router';
 import Router from 'next/router';
 import React from 'react';
 
 class MenuWithLinks extends React.PureComponent<{
-  src?: string;
-  alt?: string;
-  // eslint-disable-next-line
   options: any[];
   router: NextRouter;
 }> {
@@ -17,43 +13,33 @@ class MenuWithLinks extends React.PureComponent<{
   };
 
   public render() {
-    const { options, src, alt, children, router } = this.props;
+    const { options, children, router } = this.props;
     const { anchorEl } = this.state;
 
     return (
       <div style={{ textAlign: 'center' }}>
         <div
-          aria-owns={anchorEl ? 'simple-menu' : null}
+          aria-controls={anchorEl ? 'simple-menu' : null}
           aria-haspopup="true"
           onClick={this.handleClick}
           onKeyPress={this.handleClick}
         >
-          {children || (
-            <Avatar
-              role="presentation"
-              src={src}
-              alt={alt}
-              style={{ margin: '0px 20px 0px auto', cursor: 'pointer' }}
-            />
-          )}
+          {children}
         </div>
         <Menu
           id="simple-menu"
           anchorEl={anchorEl}
           open={Boolean(anchorEl)}
           onClose={this.handleClose}
+          keepMounted
         >
           {options.map((option, i) =>
             option.separator ? (
               <hr style={{ width: '85%', margin: '10px auto' }} key={`separated-${i}`} />
             ) : (
               <MenuItem
                 onClick={() => {
-                  if (option.external) {
-                    window.location.href = option.href;
-                  } else {
-                    Router.push(option.href, option.as || option.href);
-                  }
+                  Router.push(option.href, option.as || option.href);
                   this.handleClose();
                 }}
                 key={option.href}
@@ -62,22 +48,6 @@ class MenuWithLinks extends React.PureComponent<{
                   fontSize: '14px',
                 }}
               >
-                {option.avatarUrl ? (
-                  <Avatar
-                    src={`${option.avatarUrl ||
-                      'https://storage.googleapis.com/async-await/async-logo-40.svg'}`}
-                    alt="Team logo"
-                    style={{
-                      margin: '0px 10px 0px 0px',
-                      cursor: 'pointer',
-                      display: 'inline-flex',
-                      height: '32px',
-                      width: '32px',
-                      verticalAlign: 'middle',
-                    }}
-                  />
-                ) : null}
-
                 {option.text}
               </MenuItem>
             ),

diff --git a/book/2-end/app/components/common/Notifier.tsx b/book/2-end/app/components/common/Notifier.tsx
@@ -1,7 +1,7 @@
 import Snackbar from '@material-ui/core/Snackbar';
 import React from 'react';
 
-let openSnackbarFn;
+export let openSnackbarFn;
 
 class Notifier extends React.PureComponent {
   public state = {
@@ -45,10 +45,56 @@ class Notifier extends React.PureComponent {
   };
 }
 
-export function openSnackbar({ message }) {
-  if (openSnackbarFn) {
-    openSnackbarFn({ message });
-  }
-}
-
 export default Notifier;
+
+// import Button from '@material-ui/core/Button';
+// import Snackbar from '@material-ui/core/Snackbar';
+// import React from 'react';
+
+// class Notifier extends React.PureComponent {
+//   public state = {
+//     open: false,
+//     message: '',
+//   };
+
+//   public render() {
+//     const message = (
+//       <span id="snackbar-message-id" dangerouslySetInnerHTML={{ __html: this.state.message }} />
+//     );
+
+//     return (
+//       <React.Fragment>
+//         <Button
+//           onClick={() => {
+//             this.openSnackbar({ message: 'test' });
+//           }}
+//         >
+//           Open Notifier
+//         </Button>
+//         <Snackbar
+//           anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+//           message={message}
+//           autoHideDuration={5000}
+//           onClose={this.handleSnackbarClose}
+//           open={this.state.open}
+//           ContentProps={{
+//             'aria-describedby': 'message-id',
+//           }}
+//         />
+//       </React.Fragment>
+//     );
+//   }
+
+//   public handleSnackbarClose = () => {
+//     this.setState({
+//       open: false,
+//       message: '',
+//     });
+//   };
+
+//   public openSnackbar = ({ message }) => {
+//     this.setState({ open: true, message });
+//   };
+// }
+
+// export default Notifier;
diff --git a/book/2-end/app/components/layout/index.tsx b/book/2-end/app/components/layout/index.tsx
@@ -1,8 +1,8 @@
-// import Avatar from '@material-ui/core/Avatar';
+import Avatar from '@material-ui/core/Avatar';
 import Grid from '@material-ui/core/Grid';
 import React from 'react';
-// import MenuWithLinks from '../common/MenuWithLinks';
-import Confirm from '../common/Confirm';
+import MenuWithLinks from '../common/MenuWithLinks';
+// import Confirm from '../common/Confirm';
 import Notifier from '../common/Notifier';
 
 const styleGrid = {
@@ -78,23 +78,30 @@ class Layout extends React.Component<MyProps> {
                   />
                 </g>
               </svg>
-              <p>Clickable Avatar</p>
-              {/* <MenuWithLinks
+              <MenuWithLinks
                 options={[
+                  {
+                    text: 'Index page',
+                    href: '/',
+                    highlighterSlug: '/',
+                  },
                   {
                     text: 'Your Settings',
                     href: '/your-settings',
-                    simple: true,
+                    highlighterSlug: '/your-settings',
                   },
                   {
                     separator: true,
                   },
+                  {
+                    text: 'Log out',
+                    href: '/logout',
+                  },
                 ]}
               >
                 <Avatar
                   src={'https://storage.googleapis.com/async-await/default-user.png'}
-                  // 6
-                  // alt={`Logo of ${currentUser.displayName}`}
+                  alt="Add username here later in the book"
                   style={{
                     margin: '20px auto',
                     cursor: 'pointer',
@@ -107,18 +114,17 @@ class Layout extends React.Component<MyProps> {
                 <i className="material-icons" color="action" style={{ verticalAlign: 'super' }}>
                   arrow_drop_down
                 </i>
-              </MenuWithLinks> */}
+              </MenuWithLinks>
             </div>
             <hr />
             <p />
             <p />
+            <Notifier />
           </Grid>
         ) : null}
         <Grid item sm={10} xs={12}>
           {children}
         </Grid>
-        <Notifier />
-        <Confirm />
       </Grid>
     );
   }

diff --git a/book/2-end/app/lib/notify.ts b/book/2-end/app/lib/notify.ts
@@ -1,5 +1,5 @@
-import { openSnackbar } from '../components/common/Notifier';
+// import { openSnackbar } from '../components/common/Notifier';
 
-export default function notify(obj) {
-  openSnackbar({ message: obj.message || obj.toString() });
-}
+// export default function notify(obj) {
+//   openSnackbar({ message: obj.message || obj.toString() });
+// }
diff --git a/book/2-end/app/pages/index.tsx b/book/2-end/app/pages/index.tsx
@@ -1,9 +1,12 @@
+import Button from '@material-ui/core/Button';
 import React from 'react';
 import Head from 'next/head';
 
 import Link from 'next/link';
 
 import Layout from '../components/layout';
+import { openSnackbarFn } from '../components/common/Notifier';
+// import notify from 'lib/notify';
 
 const Index = () => (
   <Layout firstGridItem={true}>
@@ -17,7 +20,9 @@ const Index = () => (
         <a>Go to CSR page</a>
       </Link>
       <p />
-      <i className="material-icons">menu</i>
+      <Button variant="contained" onClick={() => openSnackbarFn({ message: 'some text' })}>
+        Open Notifier
+      </Button>
     </div>
   </Layout>
 );