feat(app): appbar ui improvement

sws2apps · May 21, 2022 · 1aaf572 · 1aaf572
1 parent 485844e
commit 1aaf572
Show file tree

Hide file tree

Showing 12 changed files with 195 additions and 69 deletions.
diff --git a/src/App.js b/src/App.js
@@ -62,13 +62,13 @@ const App = ({ updatePwa }) => {
 				appUrl === 'dev-lmm-oa-sws.firebaseapp.com'
 			) {
 				setApiHost('https://dev-sws2apps.herokuapp.com/');
-				setAppStage('ALPHA Environment');
+				setAppStage('ALPHA Release');
 			} else if (
 				appUrl === 'staging-lmm-oa-sws.web.app' ||
 				appUrl === 'staging-lmm-oa-sws.firebaseapp.com'
 			) {
 				setApiHost('https://staging-sws2apps.herokuapp.com/');
-				setAppStage('BETA Environment');
+				setAppStage('BETA Release');
 			} else if (
 				appUrl === 'lmm-oa-sws.web.app' ||
 				appUrl === 'lmm-oa-sws.firebaseapp.com'

diff --git a/src/appStates/appCongregation.js b/src/appStates/appCongregation.js
@@ -1,4 +1,4 @@
-import { atom } from 'recoil';
+import { atom, selector } from 'recoil';
 
 export const congNameState = atom({
 	key: 'congName',
@@ -44,3 +44,23 @@ export const liveClassState = atom({
 	key: 'liveClass',
 	default: false,
 });
+
+export const usernameState = atom({
+	key: 'username',
+	default: '',
+});
+
+export const congInfoFormattedState = selector({
+	key: 'congInforFormattedState',
+	get: ({ get }) => {
+		const congName = get(congNameState);
+		const congNumber = get(congNumberState);
+
+		let formatted = '';
+		if (congName !== '' && congNumber !== '') {
+			formatted = `${congName} (${congNumber})`;
+		}
+
+		return formatted;
+	},
+});
diff --git a/src/components/root/AppLanguage.js b/src/components/root/AppLanguage.js
@@ -91,7 +91,7 @@ const AppLanguage = (props) => {
 				>
 					<TranslateIcon />
 					{largeView && (
-						<Typography sx={{ marginLeft: '5px' }} variant='body1'>
+						<Typography sx={{ marginLeft: '5px', fontSize: '14px' }}>
 							{t('global.changeLanguage')}
 						</Typography>
 					)}

diff --git a/src/components/root/AppMenus.js b/src/components/root/AppMenus.js
@@ -6,18 +6,27 @@ import styled from '@emotion/styled';
 import { useTheme } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import CssBaseline from '@mui/material/CssBaseline';
+import AccountCircle from '@mui/icons-material/AccountCircle';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
 import GetApp from '@mui/icons-material/GetApp';
 import IconButton from '@mui/material/IconButton';
 import InfoIcon from '@mui/icons-material/Info';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Menu from '@mui/material/Menu';
 import MenuIcon from '@mui/icons-material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import AppDrawer from './AppDrawer';
 import AppLanguage from './AppLanguage';
+import {
+	congInfoFormattedState,
+	usernameState,
+} from '../../appStates/appCongregation';
 import {
 	appStageState,
 	isAboutOpenState,
@@ -42,12 +51,17 @@ const AppMenus = (props) => {
 	const location = useLocation();
 	const [mobileOpen, setMobileOpen] = useState(false);
 	const [appBarTitle, setAppBarTitle] = useState('');
+	const [anchorEl, setAnchorEl] = useState(null);
 	const { enabledInstall, isLoading, installPwa } = props;
 
+	const open = Boolean(anchorEl);
+
 	const setIsAboutOpen = useSetRecoilState(isAboutOpenState);
 	const setIsAppClosing = useSetRecoilState(isAppClosingState);
 
 	const appStage = useRecoilValue(appStageState);
+	const congInfo = useRecoilValue(congInfoFormattedState);
+	const username = useRecoilValue(usernameState);
 
 	const { t } = useTranslation();
 
@@ -60,6 +74,14 @@ const AppMenus = (props) => {
 		noSsr: true,
 	});
 
+	const handleMenu = (e) => {
+		setAnchorEl(e.currentTarget);
+	};
+
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
 	const handleInstallPwa = () => {
 		installPwa();
 	};
@@ -69,10 +91,12 @@ const AppMenus = (props) => {
 	};
 
 	const handleAbout = () => {
+		handleClose();
 		setIsAboutOpen(true);
 	};
 
 	const handleLogout = async () => {
+		handleClose();
 		setIsAppClosing(true);
 	};
 
@@ -176,15 +200,15 @@ const AppMenus = (props) => {
 					sx={{
 						minWidth: '30px',
 						display: 'flex',
+						alignItems: 'center',
 					}}
 				>
 					{appStage !== 'LIVE' && (
 						<Typography
 							sx={{
 								display: 'flex',
 								alignItems: 'center',
-								marginTop: '8px',
-								marginRight: '20px',
+								marginRight: '40px',
 								backgroundColor: '#F5EEF8',
 								padding: '2px 10px 2px 10px',
 								height: '25px',
@@ -202,7 +226,10 @@ const AppMenus = (props) => {
 						<IconButton
 							color='inherit'
 							edge='start'
-							sx={sharedStyles.menuIcon}
+							sx={{
+								...sharedStyles.menuIcon,
+								marginLeft: miniView ? '5px' : null,
+							}}
 							onClick={() => handleInstallPwa()}
 						>
 							<GetApp />
@@ -216,32 +243,98 @@ const AppMenus = (props) => {
 					<AppLanguage />
 
 					<IconButton
-						edge='start'
 						color='inherit'
-						sx={sharedStyles.menuIcon}
-						onClick={() => handleAbout()}
+						edge='start'
+						sx={{
+							...sharedStyles.menuIcon,
+							marginLeft: miniView ? '5px' : null,
+						}}
+						onClick={handleMenu}
+						id='button-account'
+						aria-controls={open ? 'menu-account' : undefined}
+						aria-haspopup='true'
+						aria-expanded={open ? 'true' : undefined}
 					>
-						<InfoIcon />
 						{largeView && (
-							<Typography sx={{ marginLeft: '5px' }} variant='body1'>
-								{t('global.about')}
-							</Typography>
+							<Box sx={{ marginRight: '5px' }}>
+								<Typography
+									sx={{
+										marginLeft: '5px',
+										textAlign: 'right',
+										fontSize: '12px',
+									}}
+								>
+									{username}
+								</Typography>
+								<Typography
+									sx={{
+										marginLeft: '5px',
+										textAlign: 'right',
+										fontSize: '12px',
+									}}
+								>
+									{congInfo}
+								</Typography>
+							</Box>
 						)}
+						<AccountCircle sx={{ fontSize: '40px' }} />
 					</IconButton>
-
-					<IconButton
-						color='inherit'
-						edge='start'
-						sx={sharedStyles.menuIcon}
-						onClick={handleLogout}
+					<Menu
+						sx={{ marginTop: '40px' }}
+						id='menu-account'
+						MenuListProps={{
+							'aria-labelledby': 'button-account',
+						}}
+						anchorEl={anchorEl}
+						anchorOrigin={{
+							vertical: 'top',
+							horizontal: 'right',
+						}}
+						keepMounted
+						transformOrigin={{
+							vertical: 'top',
+							horizontal: 'right',
+						}}
+						open={Boolean(anchorEl)}
+						onClose={handleClose}
 					>
-						<PowerSettingsNewIcon />
-						{largeView && (
-							<Typography sx={{ marginLeft: '5px' }} variant='body1'>
-								{t('global.quit')}
-							</Typography>
+						<MenuItem onClick={handleAbout}>
+							<ListItemIcon>
+								<InfoIcon fontSize='medium' />
+							</ListItemIcon>
+							<ListItemText>{t('global.about')}</ListItemText>
+						</MenuItem>
+						<MenuItem onClick={handleLogout}>
+							<ListItemIcon>
+								<PowerSettingsNewIcon fontSize='medium' />
+							</ListItemIcon>
+							<ListItemText>{t('global.quit')}</ListItemText>
+						</MenuItem>
+						{!largeView && (
+							<MenuItem disabled={true} sx={{ opacity: '1 !important' }}>
+								<Box sx={{ borderTop: '1px outset', paddingTop: '5px' }}>
+									<Typography
+										sx={{
+											marginLeft: '5px',
+											textAlign: 'right',
+											fontSize: '12px',
+										}}
+									>
+										{username}
+									</Typography>
+									<Typography
+										sx={{
+											marginLeft: '5px',
+											textAlign: 'right',
+											fontSize: '12px',
+										}}
+									>
+										{congInfo}
+									</Typography>
+								</Box>
+							</MenuItem>
 						)}
-					</IconButton>
+					</Menu>
 				</Box>
 			</AppBar>
 

diff --git a/src/components/root/Layout.js b/src/components/root/Layout.js
@@ -3,38 +3,37 @@ import Box from '@mui/material/Box';
 import About from './About';
 import AppMenus from './AppMenus';
 import Login from './Login';
-import { isAboutOpenState, isLoginOpenState } from '../../appStates/appSettings';
+import {
+	isAboutOpenState,
+	isLoginOpenState,
+} from '../../appStates/appSettings';
 
 const Layout = (props) => {
-    const { enabledInstall, isLoading, installPwa } = props;
+	const { enabledInstall, isLoading, installPwa } = props;
 
-    const isOpenAbout = useRecoilValue(isAboutOpenState);
-    const isOpenLogin = useRecoilValue(isLoginOpenState);
+	const isOpenAbout = useRecoilValue(isAboutOpenState);
+	const isOpenLogin = useRecoilValue(isLoginOpenState);
 
-    return ( 
-        <Box sx={{display: 'flex'}}>
-            {isOpenAbout && (
-                <About />
-            )}
-            {isOpenLogin && (
-                <Login />
-            )}
-            <AppMenus 
-                enabledInstall={enabledInstall}
-                isLoading={isLoading}
-                installPwa={installPwa}
-            />
-            <Box
-                sx={{
-                    flexGrow: 1,
-                    paddingTop: '60px',
-                    paddingLeft: '5px',
-                }}
-            >
-                {props.children}
-            </Box>
-        </Box>
-     );
-}
-
-export default Layout;
+	return (
+		<Box sx={{ display: 'flex' }}>
+			{isOpenAbout && <About />}
+			{isOpenLogin && <Login />}
+			<AppMenus
+				enabledInstall={enabledInstall}
+				isLoading={isLoading}
+				installPwa={installPwa}
+			/>
+			<Box
+				sx={{
+					flexGrow: 1,
+					paddingTop: '60px',
+					paddingLeft: '5px',
+				}}
+			>
+				{props.children}
+			</Box>
+		</Box>
+	);
+};
+
+export default Layout;
diff --git a/src/components/startup/UserMfaSetup.js b/src/components/startup/UserMfaSetup.js
@@ -111,6 +111,7 @@ const UserMfaSetup = () => {
 
 									// save congregation update if any
 									let obj = {};
+									obj.username = data.username;
 									obj.isCongVerified = true;
 									obj.cong_name = data.congregation.cong_name;
 									obj.cong_number = data.congregation.cong_number;

diff --git a/src/components/startup/UserMfaVerify.js b/src/components/startup/UserMfaVerify.js
@@ -89,6 +89,7 @@ const UserMfaVerify = () => {
 
 									// save congregation update if any
 									let obj = {};
+									obj.username = data.username;
 									obj.isCongVerified = true;
 									obj.cong_name = data.congregation.cong_name;
 									obj.cong_number = data.congregation.cong_number;

diff --git a/src/components/startup/UserSignIn.js b/src/components/startup/UserSignIn.js
@@ -212,8 +212,8 @@ const UserSignIn = () => {
 
 	useEffect(() => {
 		const checkDbs = async () => {
-			const { userPass } = await dbGetAppSettings();
-			if (!userPass) {
+			const { username, userPass } = await dbGetAppSettings();
+			if (!username || !userPass) {
 				setIsInternetNeeded(true);
 			} else {
 				setIsInternetNeeded(false);

diff --git a/src/indexedDb/mainDb.js b/src/indexedDb/mainDb.js
@@ -115,6 +115,10 @@ appDb.version(23).stores({
 	app_settings:
 		'++id, cong_number, cong_name, class_count, meeting_day, userPass, isLoggedOut, isScheduleConverted, isCongVerified',
 });
+appDb.version(24).stores({
+	app_settings:
+		'++id, username, cong_number, cong_name, class_count, meeting_day, userPass, isLoggedOut, isScheduleConverted, isCongVerified',
+});
 
 appDb.on('populate', function () {
 	appDb.app_settings.add({

diff --git a/src/locales/e.json b/src/locales/e.json
@@ -9,7 +9,7 @@
     "global.administration": "Administration",
     "global.login": "Login",
     "global.logout": "Logout",
-    "global.changeLanguage": "Change language",
+    "global.changeLanguage": "Language",
     "global.edit": "Edit",
     "global.delete": "Delete",
     "global.save": "Save",