[VersionSelector] Add auto version selection derived from user state.

BIDMCDigitalPsychiatry · Aug 19, 2024 · 03707d3 · 03707d3
1 parent 38a9186
commit 03707d3
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app-map-db",
-  "version": "2.1.17",
+  "version": "2.1.18",
   "private": true,
   "homepage": "https://mindapps.org",
   "enableLogRocket": true,

diff --git a/src/components/application/GenericDialog/Login/index.js b/src/components/application/GenericDialog/Login/index.js
@@ -47,7 +47,6 @@ export default function LoginDialog({ id = title }) {
               alert('Successfully updated password.');
               Auth.signIn(email, newPassword)
                 .then(user => {
-                  console.log('Login success!', user);
                   setUser(user);
                   setState(prev => ({ ...prev, open: false, loading: false, errors: {} }));
                 })
@@ -79,7 +78,6 @@ export default function LoginDialog({ id = title }) {
       } else {
         Auth.signIn(email, password)
           .then(user => {
-            console.log('Login success!', user);
             setUser(user);
             setState(prev => ({ ...prev, open: false, loading: false, errors: {} }));
           })

diff --git a/src/components/application/GenericDialog/LoginV2/index.js b/src/components/application/GenericDialog/LoginV2/index.js
@@ -60,7 +60,6 @@ function Content({ fields, values, mapField, fullWidth, setValues, ...props }) {
                 alert('Successfully updated password.');
                 Auth.signIn(email, newPassword)
                   .then(user => {
-                    console.log('Login success!', user);
                     setUser(user);
                     setState(prev => ({ ...prev, open: false, loading: false, errors: {} }));
                   })
@@ -92,7 +91,6 @@ function Content({ fields, values, mapField, fullWidth, setValues, ...props }) {
         } else {
           Auth.signIn(email, password)
             .then(user => {
-              console.log('Login success!', user);
               setUser(user);
               setState(prev => ({ ...prev, open: false, loading: false, errors: {} }));
             })

diff --git a/src/components/application/GenericDialog/Register/index.js b/src/components/application/GenericDialog/Register/index.js
@@ -4,7 +4,7 @@ import { copyToLower, isEmpty as isValEmpty } from '../../../../helpers';
 import { useDialogState } from '../useDialogState';
 import { Auth } from 'aws-amplify';
 import DialogButton from '../DialogButton';
-import { useSetUser } from '../../../layout/store';
+import { useLayout, useSetUser } from '../../../layout/store';
 const passwordValidator = require('password-validator');
 export const title = 'Sign Up';
 
@@ -70,7 +70,7 @@ const EnterConfirmationCode = ({ value = false, onChange }) => {
 export default function RegisterDialog({ id = title }) {
   const [dialogState, setState] = useDialogState(id);
   const { confirm, errors } = dialogState;
-  const dialogStateStr = JSON.stringify(dialogState);
+  const dialogStateStr = JSON.stringify(dialogState);  
 
   const setUser = useSetUser();
 
@@ -106,7 +106,6 @@ export default function RegisterDialog({ id = title }) {
           setState(prev => ({ ...prev, open: false, loading: false, confirm: false }));
           Auth.signIn(email, password)
             .then(user => {
-              console.log('Login success!');
               setUser(user);
             })
             .catch(err => {
@@ -124,10 +123,10 @@ export default function RegisterDialog({ id = title }) {
     [setUser, dialogStateStr, setState, errors]
   );
 
-  const handleSubmit = React.useCallback(({ confirm, ...other }, setValues) => (confirm ? handleConfirm(other, setValues) : handleAdd(other, setValues)), [
-    handleConfirm,
-    handleAdd
-  ]);
+  const handleSubmit = React.useCallback(
+    ({ confirm, ...other }, setValues) => (confirm ? handleConfirm(other, setValues) : handleAdd(other, setValues)),
+    [handleConfirm, handleAdd]
+  );
 
   return (
     <GenericDialog

diff --git a/src/components/application/GenericDialog/RegisterPro/index.js b/src/components/application/GenericDialog/RegisterPro/index.js
@@ -4,7 +4,7 @@ import { copyToLower, isEmpty as isValEmpty } from '../../../../helpers';
 import { useDialogState } from '../useDialogState';
 import { Auth } from 'aws-amplify';
 import DialogButton from '../DialogButton';
-import { useSetUser } from '../../../layout/store';
+import { useLayout, useSetUser } from '../../../layout/store';
 import ProVersion from './ProVersion';
 import { DialogContent, Grid, Typography, Button, Box } from '@mui/material';
 import createStyles from '@mui/styles/createStyles';

diff --git a/src/components/application/GenericDialog/RegisterV2/index.js b/src/components/application/GenericDialog/RegisterV2/index.js
@@ -4,7 +4,7 @@ import { copyToLower, isEmpty as isValEmpty } from '../../../../helpers';
 import { useDialogState } from '../useDialogState';
 import { Auth } from 'aws-amplify';
 import DialogButton from '../DialogButton';
-import { useSetUser } from '../../../layout/store';
+import { useLayout, useSetUser } from '../../../layout/store';
 import RateAnApp from './RateAnApp';
 import { DialogContent, Grid, Typography, Button, Box } from '@mui/material';
 import createStyles from '@mui/styles/createStyles';
@@ -161,7 +161,6 @@ function Content({ fields, values, mapField, fullWidth, setValues, ...props }) {
         setState(prev => ({ ...prev, open: false, loading: false, confirm: false }));
         Auth.signIn(email, password)
           .then(user => {
-            console.log('Login success!');
             setUser(user);
           })
           .catch(err => {

diff --git a/src/components/layout/AppRouter.tsx b/src/components/layout/AppRouter.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
 import Routes from './routes';
 import { ConnectedRouter } from 'connected-react-router';
 import { AppState } from '../../store';
 import { connect } from 'react-redux';
 import Layout from './Layout';
 import useLogRocketUser from './useLogRocketUser';
+import VersionSelector from './VersionSelector';
 
 export interface AppRouterProps {
   history?: any;
@@ -16,9 +16,11 @@ function AppRouter(props: AppRouterProps) {
   return (
     // @ts-ignore
     <ConnectedRouter history={history}>
-      <Layout>
-        <Routes />
-      </Layout>
+      <VersionSelector>
+        <Layout>
+          <Routes />
+        </Layout>
+      </VersionSelector>
     </ConnectedRouter>
   );
 }

diff --git a/src/components/layout/ApplicationBar.tsx b/src/components/layout/ApplicationBar.tsx
@@ -144,9 +144,18 @@ export default function ApplicationBar({ trigger }) {
   const version = useSelector((s: any) => s.layout.version);
   const [, setLayout] = useLayout();
 
-  const handleChangeVersion = React.useCallback(() => {
-    setLayout({ version: version === 'lite' ? 'full' : 'lite' });
-  }, [version, setLayout]);
+  const handleChangeVersion = React.useCallback(
+    ({ version: newVersion }) =>
+      () => {
+        if (!signedIn && newVersion !== 'lite') {
+          // User is not signed in and trying to switch to pro version, show the login dialog
+          setLoginState(prev => ({ ...prev, open: true }));
+        } else {
+          setLayout({ version: newVersion });
+        }
+      },
+    [setLayout, signedIn, setLoginState]
+  );
 
   return (
     <>
@@ -180,7 +189,7 @@ export default function ApplicationBar({ trigger }) {
                           }
                         }}
                         color={version === 'lite' ? 'primary' : 'secondary'}
-                        onClick={handleChangeVersion}
+                        onClick={handleChangeVersion({ version: 'lite' })}
                       >
                         Lite Version
                       </Button>
@@ -191,7 +200,7 @@ export default function ApplicationBar({ trigger }) {
                           }
                         }}
                         color={version !== 'lite' ? 'primary' : 'secondary'}
-                        onClick={handleChangeVersion}
+                        onClick={handleChangeVersion({ version: 'full' })}
                       >
                         <Icons.Lock sx={{ fontSize: 16, mr: 0.5 }} />
                         Pro Version

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -60,7 +60,7 @@ export default function Layout({ children }) {
   const componentsOnPage = [appBarHeight, footerHeight];
   const minHeight = height - appBarHeight - footerHeight - 1;
   var contentHeight = height - componentsOnPage.reduce((t, c) => t + c, 0);
-
+  
   var [scrollElement, setScrollElement] = React.useState(null);
 
   const { pathname } = useLocation();

diff --git a/src/components/layout/VersionSelector.tsx b/src/components/layout/VersionSelector.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { AppState } from '../../store';
+import { useSelector } from 'react-redux';
+import { useLayout } from './store';
+import { isEmpty } from '../../helpers';
+
+const VersionSelector = ({ children }) => {
+  const userId = useSelector((s: AppState) => s?.layout?.user?.username);
+  const [, setLayout] = useLayout();
+
+  React.useEffect(() => {
+    // Auto select user when user is authenticated or logged out
+    const version = isEmpty(userId) ? 'lite' : 'full';
+    console.log(`Auto-selecting version...`, { version, userId });
+    setLayout({ version });
+  }, [userId, setLayout]);
+  return children;
+};
+
+export default VersionSelector;
diff --git a/src/components/layout/store.ts b/src/components/layout/store.ts
@@ -19,6 +19,7 @@ export interface State {
   step?: number | null;
   tourCompleted?: boolean;
   version: 'lite' | 'full';
+  user: any;
 }
 
 const defaultState = {