async-labs#6 render pages with mobile-friendly styles on server

msahin12 · Oct 23, 2018 · 9de0b06 · 9de0b06
1 parent f094975
commit 9de0b06
Show file tree

Hide file tree

Showing 13 changed files with 109 additions and 43 deletions.
diff --git a/app/components/discussions/CreateDiscussionForm.tsx b/app/components/discussions/CreateDiscussionForm.tsx
@@ -80,6 +80,7 @@ class CreateDiscussionForm extends React.Component<Props, State> {
                 >
                   Cancel
                 </Button>{' '}
+                <p />
                 <Button
                   type="submit"
                   variant="contained"

diff --git a/app/components/posts/PostContent.tsx b/app/components/posts/PostContent.tsx
@@ -79,7 +79,7 @@ class PostContent extends React.Component<{ html: string }> {
     return (
       <div
         ref={elm => (this.postBodyElm = elm)}
-        style={{ fontSize: '15px', lineHeight: '2em', fontWeight: 300 }}
+        style={{ fontSize: '15px', lineHeight: '2em', fontWeight: 300, wordBreak: 'break-all' }}
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{ __html: html }}
       />

diff --git a/app/components/posts/PostDetail.tsx b/app/components/posts/PostDetail.tsx
@@ -47,6 +47,7 @@ class PostDetail extends React.Component<{
   post: Post;
   store?: Store;
   onEditClick: (post) => void;
+  isMobile: boolean;
 }> {
   public editPost = () => {
     const { post, onEditClick } = this.props;
@@ -71,9 +72,9 @@ class PostDetail extends React.Component<{
   };
 
   public render() {
-    const { post } = this.props;
+    const { post, isMobile } = this.props;
 
-    return <Paper style={stylePaper}>{this.renderPostDetail(post)}</Paper>;
+    return <Paper style={stylePaper}>{this.renderPostDetail(post, isMobile)}</Paper>;
   }
 
   public renderMenu() {
@@ -92,7 +93,7 @@ class PostDetail extends React.Component<{
     );
   }
 
-  public renderPostDetail(post: Post) {
+  public renderPostDetail(post: Post, isMobile) {
     const createdDate = moment(post.createdAt).format('MMM Do YYYY');
     const lastEditedDate = moment(post.lastUpdatedAt).fromNow();
     return (
@@ -108,8 +109,8 @@ class PostDetail extends React.Component<{
               src={post.user.avatarUrl}
               alt={post.user.displayName}
               style={{
-                width: '50px',
-                height: '50px',
+                width: '40px',
+                height: '40px',
                 margin: '0px 10px 0px 5px',
                 cursor: 'pointer',
                 float: 'left',
@@ -128,7 +129,7 @@ class PostDetail extends React.Component<{
         </div>
         <div
           style={{
-            margin: '0px 20px 0px 70px',
+            margin: isMobile ? '0px' : '0px 20px 0px 70px',
             fontWeight: 300,
             lineHeight: '1em',
           }}

diff --git a/app/components/posts/PostEditor.tsx b/app/components/posts/PostEditor.tsx
@@ -81,7 +81,7 @@ class PostEditor extends React.Component<MyProps, MyState> {
           </Button>
         </div>
 
-        <div style={{ display: 'inline', float: 'right' }}>
+        <div style={{ display: 'inline', float: 'left' }}>
           <input
             accept="image/*"
             name="upload-file"
@@ -92,7 +92,9 @@ class PostEditor extends React.Component<MyProps, MyState> {
           />
           <label htmlFor="upload-file">
             <Button color="primary" component="span">
-              Upload file
+              <i className="material-icons" style={{ fontSize: '22px' }}>
+                insert_photo
+              </i>
             </Button>
           </label>
         </div>

diff --git a/app/components/posts/PostForm.tsx b/app/components/posts/PostForm.tsx
@@ -80,7 +80,12 @@ class PostForm extends React.Component<MyProps, MyState> {
               <Button variant="outlined" onClick={this.closeDrawer} disabled={this.state.disabled}>
                 Cancel
               </Button>{' '}
-              <Button type="submit" variant="contained" color="primary" disabled={this.state.disabled}>
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                disabled={this.state.disabled}
+              >
                 {isEditing ? 'Save changes' : 'Publish'}
               </Button>
             </div>
@@ -115,14 +120,13 @@ class PostForm extends React.Component<MyProps, MyState> {
       NProgress.start();
       try {
         await post.edit({ content, htmlContent });
-        NProgress.done();
-        this.setState({ disabled: false });
         notify('You successfully edited Post');
       } catch (error) {
         console.log(error);
         notify(error);
-        NProgress.done();
+      } finally {
         this.setState({ disabled: false });
+        NProgress.done();
       }
 
       if (onFinished) {
@@ -143,16 +147,14 @@ class PostForm extends React.Component<MyProps, MyState> {
 
     try {
       await discussion.addPost(content);
-
       this.setState({ content: '' });
-      NProgress.done();
-      this.setState({ disabled: false });
       notify('You successfully published Post.');
     } catch (error) {
       console.log(error);
       notify(error);
-      NProgress.done();
+    } finally {
       this.setState({ disabled: false });
+      NProgress.done();
     }
 
     if (onFinished) {

diff --git a/app/lib/isMobile.ts b/app/lib/isMobile.ts
@@ -0,0 +1,24 @@
+// tslint:disable-next-line:max-line-length
+const mobileRE = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i;
+
+function isMobile(opts) {
+  if (!opts) {
+    opts = {};
+  }
+
+  let ua = opts.ua;
+  if (!ua && typeof navigator !== 'undefined') {
+    ua = navigator.userAgent;
+  }
+  if (!ua && opts.req && opts.req.headers && typeof opts.req.headers['user-agent'] === 'string') {
+    ua = opts.req.headers['user-agent'];
+  }
+
+  if (typeof ua !== 'string') {
+    return false;
+  }
+
+  return mobileRE.test(ua);
+}
+
+export { isMobile };
diff --git a/app/pages/_app.tsx b/app/pages/_app.tsx
@@ -6,10 +6,21 @@ import React from 'react';
 import JssProvider from 'react-jss/lib/JssProvider';
 
 import getContext from '../lib/context';
+import { isMobile } from '../lib/isMobile';
 import { Store } from '../lib/store';
 import withStore from '../lib/withStore';
 
-class MyApp extends App<{ mobxStore: Store }> {
+class MyApp extends App<{ mobxStore: Store, isMobile: boolean }> {
+  public static async getInitialProps({ Component, ctx }) {
+    const pageProps = { isMobile: isMobile({ req: ctx.req }) };
+
+    if (Component.getInitialProps) {
+      Object.assign(pageProps, await Component.getInitialProps(ctx));
+    }
+
+    return { pageProps };
+  }
+
   public pageContext: any;
 
   constructor(props) {

diff --git a/app/pages/create-team.tsx b/app/pages/create-team.tsx
@@ -135,7 +135,6 @@ class CreateTeam extends React.Component<MyProps> {
                   }}
                 />
                 <p />
-                <br />
                 <h4 style={{ marginTop: '40px' }}>Team logo (optional)</h4>
                 <Avatar
                   src={newAvatarUrl}
@@ -160,7 +159,7 @@ class CreateTeam extends React.Component<MyProps> {
                   style={{ display: 'none' }}
                   onChange={this.previewAvatar}
                 />
-                <br />
+                <p />
                 <br />
                 <br />
                 <Button
@@ -174,6 +173,7 @@ class CreateTeam extends React.Component<MyProps> {
               </form>
             </Grid>
           </Grid>
+          <br />
         </div>
       </Layout>
     );

diff --git a/app/pages/discussion.tsx b/app/pages/discussion.tsx
@@ -23,6 +23,7 @@ type Props = {
   teamSlug: string;
   discussionSlug: string;
   isServer: boolean;
+  isMobile: boolean;
 };
 
 class DiscussionComp extends React.Component<Props> {
@@ -111,7 +112,12 @@ class DiscussionComp extends React.Component<Props> {
       <React.Fragment>
         {discussion
           ? discussion.posts.map(p => (
-              <PostDetail key={p._id} post={p} onEditClick={this.onEditClickCallback} />
+              <PostDetail
+                key={p._id}
+                post={p}
+                onEditClick={this.onEditClickCallback}
+                isMobile={this.props.isMobile}
+              />
             ))
           : null}
 
@@ -226,7 +232,13 @@ class DiscussionComp extends React.Component<Props> {
             open={drawerState}
             members={discussion.members}
             onFinished={() => {
-              this.setState({ drawerState: false, selectedPost: null });
+              this.setState({ drawerState: false });
+
+              setTimeout(() => {
+                this.setState({
+                  selectedPost: null,
+                });
+              }, 500);
             }}
           />
         </div>

diff --git a/app/pages/settings/team-billing.tsx b/app/pages/settings/team-billing.tsx
@@ -157,6 +157,7 @@ class TeamBilling extends React.Component<Props, State> {
               <br />
             </Grid>
           </Grid>
+          <br />
         </div>
       </Layout>
     );

diff --git a/app/pages/settings/team-members.tsx b/app/pages/settings/team-members.tsx
@@ -1,6 +1,7 @@
 import Avatar from '@material-ui/core/Avatar';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
+import Hidden from '@material-ui/core/Hidden';
 import Paper from '@material-ui/core/Paper';
 import { observer } from 'mobx-react';
 import Head from 'next/head';
@@ -30,6 +31,10 @@ const styleGridItem = {
   borderRight: '0.5px #aaa solid',
 };
 
+const styleTableCell = {
+  padding: '15px 56px 15px 15px',
+};
+
 const getMenuOptions = member => ({
   dataId: member._id,
   id: `post-menu-${member._id}`,
@@ -167,6 +172,7 @@ class TeamMembers extends React.Component<MyProps, MyState> {
               <h4 style={{ marginRight: 20, display: 'inline' }}>
                 Current Team ( {Array.from(currentTeam.members.values()).length} / 20 )
               </h4>
+              <p />
               <Button
                 onClick={this.inviteMember}
                 variant="outlined"
@@ -180,31 +186,33 @@ class TeamMembers extends React.Component<MyProps, MyState> {
                 <Table>
                   <TableHead>
                     <TableRow>
-                      <TableCell>Team member</TableCell>
-                      <TableCell>Status</TableCell>
+                      <TableCell style={styleTableCell}>Person</TableCell>
+                      <TableCell style={styleTableCell}>Role</TableCell>
                     </TableRow>
                   </TableHead>
 
                   <TableBody>
                     {Array.from(currentTeam.members.values()).map(m => (
                       <TableRow key={m._id}>
-                        <TableCell component="th" scope="row">
-                          <Avatar
-                            role="presentation"
-                            src={m.avatarUrl}
-                            alt={m.avatarUrl}
-                            key={m._id}
-                            style={{
-                              margin: '0px 5px',
-                              display: 'inline-flex',
-                              width: '30px',
-                              height: '30px',
-                              verticalAlign: 'middle',
-                            }}
-                          />{' '}
+                        <TableCell style={styleTableCell} component="th" scope="row">
+                          <Hidden smDown>
+                            <Avatar
+                              role="presentation"
+                              src={m.avatarUrl}
+                              alt={m.avatarUrl}
+                              key={m._id}
+                              style={{
+                                margin: '0px 5px',
+                                display: 'inline-flex',
+                                width: '30px',
+                                height: '30px',
+                                verticalAlign: 'middle',
+                              }}
+                            />{' '}
+                          </Hidden>
                           {m.displayName}
                         </TableCell>
-                        <TableCell>
+                        <TableCell style={styleTableCell}>
                           {isTL && m._id !== currentUser._id ? (
                             <div style={{ display: 'inline-flex' }}>
                               <div style={{ paddingRight: 10 }}>Team Member</div>{' '}
@@ -234,18 +242,18 @@ class TeamMembers extends React.Component<MyProps, MyState> {
                     <Table>
                       <TableHead>
                         <TableRow>
-                          <TableCell>Email</TableCell>
-                          <TableCell>Status</TableCell>
+                          <TableCell style={styleTableCell}>Email</TableCell>
+                          <TableCell style={styleTableCell}>Status</TableCell>
                         </TableRow>
                       </TableHead>
 
                       <TableBody>
                         {Array.from(currentTeam.invitedUsers.values()).map(i => (
                           <TableRow key={i._id}>
-                            <TableCell component="th" scope="row">
+                            <TableCell style={styleTableCell} component="th" scope="row">
                               {i.email}{' '}
                             </TableCell>
-                            <TableCell>Email sent</TableCell>
+                            <TableCell style={styleTableCell}>Sent</TableCell>
                           </TableRow>
                         ))}
                       </TableBody>
@@ -261,8 +269,10 @@ class TeamMembers extends React.Component<MyProps, MyState> {
             <InviteMember
               open={this.state.inviteMemberOpen}
               onClose={this.handleInviteMemberClose}
+              store={this.props.store}
             />
           </Grid>
+          <br />
         </div>
       </Layout>
     );

diff --git a/app/pages/settings/team-profile.tsx b/app/pages/settings/team-profile.tsx
@@ -224,6 +224,7 @@ class TeamProfile extends React.Component<MyProps, MyState> {
               <br />
             </Grid>
           </Grid>
+          <br />
         </div>
       </Layout>
     );

diff --git a/app/pages/settings/your-profile.tsx b/app/pages/settings/your-profile.tsx
@@ -140,6 +140,7 @@ class YourProfile extends React.Component<MyProps, MyState> {
               <br />
             </Grid>
           </Grid>
+          <br />
         </div>
       </Layout>
     );
-Original file line number
+Diff line change
@@ Expand Up @@
                     >
                       Cancel
                     </Button>{' '}
+                    <p />
                     <Button
                       type="submit"
                       variant="contained"
@@ Expand Down @@