fix: passing initial data to mobx store

Author: tima101

saas/api/server/models/User.ts

@@ -302,6 +302,7 @@ class UserClass extends mongoose.Model {
       slug,
       isSignedupViaGoogle: true,
       defaultTeamSlug: '',
+      darkTheme: false,
     });
 
     const emailTemplate = await getEmailTemplate('welcome', { userName: displayName });

saas/app/components/layout/index.tsx

@@ -35,14 +35,14 @@ function LayoutWrapper({
   isMobile,
   firstGridItem,
   store,
-  isThemeDark,
 }: {
   children: React.ReactNode;
   isMobile: boolean;
   firstGridItem: boolean;
   store: Store;
-  isThemeDark: boolean;
 }) {
+  const isThemeDark = store.currentUser ? store.currentUser.darkTheme : true;
+
   return (
     <React.Fragment>
       <Grid
@@ -162,9 +162,9 @@ function LayoutWrapper({
 
 type Props = {
   children: React.ReactNode;
+  store?: Store;
   isMobile?: boolean;
   firstGridItem?: boolean;
-  store?: Store;
   teamRequired?: boolean;
 };
 
@@ -174,8 +174,6 @@ class Layout extends React.Component<Props> {
 
     const { currentUser, currentTeam } = store;
 
-    const isThemeDark = currentUser && currentUser.darkTheme === true;
-
     // console.log(this.props.store.currentUser.darkTheme);
 
     // const isThemeDark = false;
@@ -186,12 +184,7 @@ class Layout extends React.Component<Props> {
 
     if (!currentUser) {
       return (
-        <LayoutWrapper
-          firstGridItem={firstGridItem}
-          isMobile={isMobile}
-          isThemeDark={isThemeDark}
-          store={store}
-        >
+        <LayoutWrapper firstGridItem={firstGridItem} isMobile={isMobile} store={store}>
           <Grid item sm={12} xs={12}>
             {children}
           </Grid>
@@ -202,12 +195,7 @@ class Layout extends React.Component<Props> {
     if (!currentTeam) {
       if (teamRequired) {
         return (
-          <LayoutWrapper
-            firstGridItem={firstGridItem}
-            isMobile={isMobile}
-            isThemeDark={isThemeDark}
-            store={store}
-          >
+          <LayoutWrapper firstGridItem={firstGridItem} isMobile={isMobile} store={store}>
             <Grid item sm={10} xs={12}>
               <div style={{ padding: '20px' }}>
                 Select existing team or create a new team.
@@ -224,12 +212,7 @@ class Layout extends React.Component<Props> {
       } else {
         // console.log('team not required');
         return (
-          <LayoutWrapper
-            firstGridItem={firstGridItem}
-            isMobile={isMobile}
-            isThemeDark={isThemeDark}
-            store={store}
-          >
+          <LayoutWrapper firstGridItem={firstGridItem} isMobile={isMobile} store={store}>
             <Grid item sm={10} xs={12}>
               {children}
             </Grid>
@@ -239,12 +222,7 @@ class Layout extends React.Component<Props> {
     }
 
     return (
-      <LayoutWrapper
-        firstGridItem={firstGridItem}
-        isMobile={isMobile}
-        isThemeDark={isThemeDark}
-        store={store}
-      >
+      <LayoutWrapper firstGridItem={firstGridItem} isMobile={isMobile} store={store}>
         <Grid item sm={firstGridItem ? 10 : 12} xs={12}>
           <div>
             {isMobile || store.currentUrl.includes('create-team') ? null : (

saas/app/lib/store/index.ts

@@ -47,6 +47,8 @@ class Store {
 
     this.isServer = !!isServer;
 
+    // console.log('initialState.user', initialState.user);
+
     this.setCurrentUser(initialState.user);
 
     this.currentUrl = initialState.currentUrl || '';

saas/app/pages/_app.tsx

@@ -12,11 +12,22 @@ import { getInitialDataApiMethod } from '../lib/api/team-member';
 import { isMobile } from '../lib/isMobile';
 import { getStore, initializeStore, Store } from '../lib/store';
 
-import type { AppProps } from 'next/app';
+// import type { AppProps } from 'next/app';
 import { NextPage, NextPageContext } from 'next';
 
-function MyApp({ Component, pageProps }: AppProps) {
-  const store: Store = initializeStore(pageProps.initialState);
+// add types
+type Props = {
+  Component: NextPage;
+  pageProps: any;
+  initialState: any;
+};
+
+function MyApp({ Component, pageProps, initialState }: Props) {
+  // console.log('initialState', initialState);
+
+  const store: Store = initializeStore(initialState);
+
+  // console.log('store.currentUser.email', store.currentUser);
 
   const isThemeDark = store.currentUser ? store.currentUser.darkTheme : true;
 
@@ -133,6 +144,8 @@ MyApp.getInitialProps = async ({
   const team =
     initialData && initialData.teams && initialData.teams.find((t) => t.slug === selectedTeamSlug);
 
+  // console.log('userObj', userObj);
+
   return {
     ...appProps,
     initialState: { user: userObj, currentUrl: ctx.asPath, team, teamSlug, ...initialData },

saas/app/yarn.lock

@@ -1332,9 +1332,9 @@ camelcase@^6.2.0:
   integrity sha512-tVI4q5jjFV5CavAU8DXfza/TJcZutVKo/5Foskmsqcm0MsL91moHvwiGNnqaa2o6PF/7yT5ikDRcVcl8Rj6LCA==
 
 caniuse-lite@^1.0.30001202, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001228, caniuse-lite@^1.0.30001280:
-  version "1.0.30001282"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001282.tgz#38c781ee0a90ccfe1fe7fefd00e43f5ffdcb96fd"
-  integrity sha512-YhF/hG6nqBEllymSIjLtR2iWDDnChvhnVJqp+vloyt2tEHFG1yBR+ac2B/rOw0qOK0m0lEXU2dv4E/sMk5P9Kg==
+  version "1.0.30001342"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001342.tgz"
+  integrity sha512-bn6sOCu7L7jcbBbyNhLg0qzXdJ/PMbybZTH/BA6Roet9wxYRm6Tr9D0s0uhLkOZ6MSG+QU6txUgdpr3MXIVqjA==
 
 [email protected], chalk@^2.0.0:
   version "2.4.2"