User.darkTheme, store.currentUser.darkTheme async-labs#19

api/server/api/team-member.ts

@@ -251,4 +251,16 @@ router.post('/user/update-profile', async (req, res, next) => {
   }
 });
 
+router.post('/user/toggle-theme', async (req, res, next) => {
+  try {
+    const { darkTheme } = req.body;
+
+    await User.toggleTheme({ userId: req.user.id, darkTheme });
+
+    res.json({ done: 1 });
+  } catch (err) {
+    next(err);
+  }
+});
+
 export default router;

api/server/models/User.ts

@@ -98,6 +98,7 @@ const mongoSchema = new mongoose.Schema({
       },
     ],
   },
+  darkTheme: Boolean,
 });
 
 export interface IUserDocument extends mongoose.Document {
@@ -151,6 +152,7 @@ export interface IUserDocument extends mongoose.Document {
       }
     ]
   };
+  darkTheme: boolean;
 }
 
 interface IUserModel extends mongoose.Model<IUserDocument> {
@@ -198,13 +200,9 @@ interface IUserModel extends mongoose.Model<IUserDocument> {
   stripeToken: object;
   }): Promise<IUserDocument>;
   getListOfInvoicesForCustomer({ userId }: { userId: string }): Promise<IUserDocument>;
+  toggleTheme({ userId, darkTheme }: { userId: string; darkTheme: boolean }): Promise<void>;
 }
 
-// mongoSchema.pre('save', function(next) {
-//   if (!this.createdAt) this.createdAt = new Date();
-//   next();
-// });
-
 class UserClass extends mongoose.Model {
   public static async updateProfile({ userId, name, avatarUrl }) {
     // TODO: If avatarUrl is changed and old is uploaded to our S3, delete it from S3
@@ -384,6 +382,7 @@ class UserClass extends mongoose.Model {
       'stripeCustomer',
       'stripeCard',
       'stripeListOfInvoices',
+      'darkTheme',
     ];
   }
 
@@ -402,6 +401,10 @@ class UserClass extends mongoose.Model {
 
     return team;
   }
+
+  public static toggleTheme({ userId, darkTheme }) {
+    return this.updateOne({ _id: userId }, { darkTheme: !!darkTheme });
+  }
 }
 
 mongoSchema.loadClass(UserClass);

app/components/discussions/DiscussionListItem.tsx

@@ -21,13 +21,19 @@ class DiscussionListItem extends React.Component<Props> {
     const selectedDiscussion =
       store.currentUrl === `/team/${team.slug}/discussions/${discussion.slug}`;
 
+    const isThemeDark = store.currentUser.darkTheme === true;
+
+    const selectedItemBorder = isThemeDark
+      ? '1px rgba(255, 255, 255, 0.75) solid'
+      : '1px rgba(0, 0, 0, 0.75) solid';
+
     return (
       <Paper
         key={discussion._id}
         style={{
           margin: '10px 10px 5px 0px',
           padding: '8px',
-          border: selectedDiscussion ? '1px rgba(255,255,255,0.5) solid' : 'none',
+          border: selectedDiscussion ? selectedItemBorder : 'none',
         }}
         elevation={selectedDiscussion ? 24 : 1}
       >
@@ -50,7 +56,7 @@ class DiscussionListItem extends React.Component<Props> {
               marginRight: '-12px',
             }}
           >
-            <DiscussionActionMenu discussion={discussion} isMobile={isMobile}/>
+            <DiscussionActionMenu discussion={discussion} isMobile={isMobile} />
           </div>
         </li>
       </Paper>

app/components/layout/index.tsx

@@ -92,6 +92,8 @@ class Layout extends React.Component<MyProps> {
     const { store, firstGridItem, children, teamRequired, isMobile } = this.props;
     const { currentTeam, currentUser } = store;
 
+    const isThemeDark = currentUser.darkTheme === true;
+
     if (store.isLoggingIn) {
       return (
         <ThemeWrapper firstGridItem={firstGridItem} isMobile={isMobile}>
@@ -190,7 +192,7 @@ class Layout extends React.Component<MyProps> {
                       // tslint:disable-next-line
                       d="M22.6251 11.928V24H20.7051V21.816C20.3531 22.568 19.8171 23.152 19.0971 23.568C18.3931 23.968 17.5691 24.168 16.6251 24.168C15.5531 24.168 14.6091 23.912 13.7931 23.4C12.9931 22.888 12.3691 22.168 11.9211 21.24C11.4891 20.296 11.2731 19.2 11.2731 17.952C11.2731 16.704 11.4971 15.608 11.9451 14.664C12.3931 13.704 13.0171 12.96 13.8171 12.432C14.6331 11.904 15.5691 11.64 16.6251 11.64C17.5691 11.64 18.3931 11.848 19.0971 12.264C19.8011 12.68 20.3371 13.264 20.7051 14.016V11.928H22.6251ZM17.0091 22.56C18.1931 22.56 19.1051 22.16 19.7451 21.36C20.3851 20.544 20.7051 19.392 20.7051 17.904C20.7051 16.416 20.3851 15.272 19.7451 14.472C19.1051 13.672 18.1931 13.272 17.0091 13.272C15.8251 13.272 14.8971 13.688 14.2251 14.52C13.5691 15.336 13.2411 16.48 13.2411 17.952C13.2411 19.424 13.5691 20.56 14.2251 21.36C14.8811 22.16 15.8091 22.56 17.0091 22.56ZM30.4637 24.168C28.4317 24.168 26.8237 23.648 25.6397 22.608L26.2877 21.168C26.9437 21.68 27.6077 22.048 28.2797 22.272C28.9517 22.496 29.7037 22.608 30.5357 22.608C31.4477 22.608 32.1357 22.456 32.5997 22.152C33.0797 21.832 33.3197 21.376 33.3197 20.784C33.3197 20.304 33.1597 19.92 32.8397 19.632C32.5197 19.344 31.9917 19.12 31.2557 18.96L29.2157 18.48C28.2077 18.256 27.4237 17.856 26.8637 17.28C26.3197 16.704 26.0477 16.016 26.0477 15.216C26.0477 14.16 26.4717 13.304 27.3197 12.648C28.1677 11.976 29.2877 11.64 30.6797 11.64C31.5277 11.64 32.3277 11.776 33.0797 12.048C33.8317 12.32 34.4637 12.712 34.9757 13.224L34.3277 14.64C33.1917 13.696 31.9757 13.224 30.6797 13.224C29.8157 13.224 29.1437 13.392 28.6637 13.728C28.1997 14.048 27.9677 14.504 27.9677 15.096C27.9677 15.592 28.1117 15.984 28.3997 16.272C28.7037 16.56 29.1837 16.784 29.8397 16.944L31.8797 17.448C32.9997 17.704 33.8317 18.104 34.3757 18.648C34.9197 19.176 35.1917 19.872 35.1917 20.736C35.1917 21.776 34.7677 22.608 33.9197 23.232C33.0717 23.856 31.9197 24.168 30.4637 24.168ZM48.687 11.928L43.047 25.104C42.455 26.48 41.711 27.488 40.815 28.128C39.919 28.768 38.815 29.208 37.503 29.448L37.095 27.936C38.231 27.68 39.087 27.336 39.663 26.904C40.255 26.488 40.743 25.84 41.127 24.96L41.607 23.88L36.495 11.928H38.535L42.615 21.888L46.743 11.928H48.687ZM56.853 11.64C59.749 11.64 61.197 13.232 61.197 16.416V24H59.253V16.512C59.253 15.392 59.029 14.576 58.581 14.064C58.133 13.536 57.429 13.272 56.469 13.272C55.349 13.272 54.453 13.616 53.781 14.304C53.109 14.992 52.773 15.92 52.773 17.088V24H50.829V15.312C50.829 14.064 50.765 12.936 50.637 11.928H52.485L52.677 14.088C53.045 13.304 53.597 12.704 54.333 12.288C55.069 11.856 55.909 11.64 56.853 11.64ZM69.9321 24.168C68.7641 24.168 67.7401 23.912 66.8601 23.4C65.9961 22.888 65.3241 22.168 64.8441 21.24C64.3801 20.296 64.1481 19.2 64.1481 17.952C64.1481 16.704 64.3881 15.608 64.8681 14.664C65.3481 13.704 66.0281 12.96 66.9081 12.432C67.8041 11.904 68.8441 11.64 70.0281 11.64C70.8441 11.64 71.6281 11.784 72.3801 12.072C73.1481 12.344 73.7801 12.728 74.2761 13.224L73.6281 14.664C73.0201 14.184 72.4281 13.832 71.8521 13.608C71.2921 13.384 70.7161 13.272 70.1241 13.272C68.8921 13.272 67.9241 13.688 67.2201 14.52C66.5161 15.336 66.1641 16.48 66.1641 17.952C66.1641 19.408 66.5081 20.544 67.1961 21.36C67.9001 22.16 68.8761 22.56 70.1241 22.56C70.7161 22.56 71.2921 22.448 71.8521 22.224C72.4281 22 73.0201 21.648 73.6281 21.168L74.2761 22.608C73.7641 23.088 73.1161 23.472 72.3321 23.76C71.5641 24.032 70.7641 24.168 69.9321 24.168Z"
                       transform="translate(39 4)"
-                      fill="white"
+                      fill={isThemeDark ? 'white' : 'black'}
                     />
                   </g>
                 </svg>
@@ -219,10 +221,33 @@ class Layout extends React.Component<MyProps> {
               <hr />
               <p />
               <p />
-              <DiscussionList store={store} team={currentTeam} />
+              <DiscussionList store={store} team={currentTeam} isMobile={isMobile} />
             </Grid>
           ) : null}
           <Grid item sm={10} xs={12}>
+          <div>
+              {isMobile || store.currentUrl.includes('create-team') ? null : (
+                <React.Fragment>
+                  <i
+                    style={{
+                      float: 'left',
+                      margin: '15px 0px 10px 25px',
+                      opacity: 0.8,
+                      fontSize: '18px',
+                      cursor: 'pointer',
+                      verticalAlign: 'top',
+                    }}
+                    className="material-icons"
+                    onClick={async () => {
+                      await store.currentUser.toggleTheme(!store.currentUser.darkTheme);
+                    }}
+                  >
+                    lens
+                  </i>
+                </React.Fragment>
+              )}
+              <div style={{ clear: 'both' }} />
+            </div>
             {children}
           </Grid>
         </Grid>

app/components/posts/PostEditor.tsx

@@ -71,6 +71,9 @@ class PostEditor extends React.Component<MyProps, MyState> {
 
     const membersMinusCurrentUser = members.filter(member => member._id !== currentUser._id);
 
+    const isThemeDark = store.currentUser.darkTheme === true;
+    const textareaBackgroundColor = isThemeDark ? '#303030' : '#fff';
+
     return (
       <div style={{ marginTop: '20px' }}>
         <div style={{ display: 'inline-flex' }}>
@@ -119,8 +122,9 @@ class PostEditor extends React.Component<MyProps, MyState> {
             width: '100%',
             height: '100%',
             padding: '10px 15px',
-            border: '1px solid rgba(255, 255, 255, 0.5)',
-            overflow: 'auto',
+            border: isThemeDark
+              ? '1px solid rgba(255, 255, 255, 0.5)'
+              : '1px solid rgba(0, 0, 0, 0.5)',
           }}
         >
           {htmlContent ? (
@@ -132,10 +136,11 @@ class PostEditor extends React.Component<MyProps, MyState> {
                   border: 'none',
                   outline: 'none',
                   font: '16px Roboto',
-                  color: '#fff',
+                  color: isThemeDark ? '#fff' : '#000',
                   fontWeight: 300,
                   height: '100vh', // TODO: check on Mobile
                   lineHeight: '1.5em',
+                  backgroundColor: content ? textareaBackgroundColor : 'transparent',
                 },
                 suggestions: {
                   list: {

app/lib/api/team-member.ts

@@ -92,3 +92,8 @@ export const updateProfile = data =>
   sendRequestAndGetResponse(`${BASE_PATH}/user/update-profile`, {
     body: JSON.stringify(data),
   });
+
+export const toggleTheme = data =>
+  sendRequestAndGetResponse(`${BASE_PATH}/user/toggle-theme`, {
+    body: JSON.stringify(data),
+  });

app/lib/context.ts

@@ -2,34 +2,45 @@ import grey from '@material-ui/core/colors/grey';
 import { createGenerateClassName, createMuiTheme } from '@material-ui/core/styles';
 import { SheetsRegistry } from 'react-jss';
 
-const theme = createMuiTheme({
+const themeDark = createMuiTheme({
   palette: {
-    primary: { main: grey[300] },
-    secondary: { main: grey[500] },
+    primary: { main: grey[200] },
+    secondary: { main: grey[400] },
     type: 'dark',
   },
   typography: {
     useNextVariants: true,
   },
 });
 
-function createPageContext() {
+const themeLight = createMuiTheme({
+  palette: {
+    primary: { main: grey[800] },
+    secondary: { main: grey[900] },
+    type: 'light',
+  },
+  typography: {
+    useNextVariants: true,
+  },
+});
+
+function createPageContext({ store }) {
   return {
-    theme,
+    theme: store.currentUser && store.currentUser.darkTheme ? themeDark : themeLight,
     sheetsManager: new Map(),
     sheetsRegistry: new SheetsRegistry(),
     generateClassName: createGenerateClassName(),
   };
 }
 
-export default function getContext() {
-  if (!process.browser) {
-    return createPageContext();
+export default function getContext({ store }) {
+  if (!(process as any).browser) {
+    return createPageContext({ store });
   }
 
-  if (!global.INIT_MATERIAL_UI) {
-    global.INIT_MATERIAL_UI = createPageContext();
+  if (!(global as any).INIT_MATERIAL_UI) {
+    (global as any).INIT_MATERIAL_UI = createPageContext({ store });
   }
 
-  return global.INIT_MATERIAL_UI;
+  return (global as any).INIT_MATERIAL_UI;
 }

app/lib/store/user.ts

@@ -5,7 +5,7 @@ import {
   createNewCardAndUpdateCustomerApiMethod,
   getListOfInvoices,
 } from '../api/team-leader';
-import { updateProfile } from '../api/team-member';
+import { toggleTheme, updateProfile } from '../api/team-member';
 import { Store } from './index';
 
 class User {
@@ -36,10 +36,12 @@ class User {
         date: number;
         hosted_invoice_url: string;
       }
-    ],
+    ];
     has_more: boolean;
   };
 
+  public darkTheme: boolean = true;
+
   constructor(params) {
     this.store = params.store;
 
@@ -54,6 +56,7 @@ class User {
     this.hasCardInformation = params.hasCardInformation;
     this.stripeCard = params.stripeCard;
     this.stripeListOfInvoices = params.stripeListOfInvoices;
+    this.darkTheme = !!params.darkTheme;
   }
 
   public async updateProfile({ name, avatarUrl }: { name: string; avatarUrl: string }) {
@@ -111,6 +114,12 @@ class User {
       throw error;
     }
   }
+
+  public async toggleTheme(darkTheme: boolean) {
+    this.darkTheme = darkTheme;
+    await toggleTheme({ darkTheme });
+    window.location.reload();
+  }
 }
 
 decorate(User, {
@@ -125,6 +134,7 @@ decorate(User, {
   stripeListOfInvoices: observable,
 
   updateProfile: action,
+  toggleTheme: action,
 });
 
 export { User };

app/pages/_app.tsx

@@ -25,7 +25,7 @@ class MyApp extends App<{ mobxStore: Store, isMobile: boolean }> {
 
   constructor(props) {
     super(props);
-    this.pageContext = getContext();
+    this.pageContext = getContext({ store: props.mobxStore });
   }
 
   public componentDidMount() {