draft: user-profile-setting-page

src/components/Header/components/NavButtonsRightCorner/index.js

@@ -76,6 +76,10 @@ const GordonNavButtonsRightCorner = ({ onClose, openDialogBox, open, anchorEl })
     />
   );
 
+  const settingsButton = (
+    <GordonNavButton onLinkClick={onClose} linkName={'Settings'} linkPath={'/settings'} />
+  );
+
   const adminButton =
     isAuthenticated && isSiteAdmin ? (
       <GordonNavButton
@@ -117,6 +121,7 @@ const GordonNavButtonsRightCorner = ({ onClose, openDialogBox, open, anchorEl })
             {aboutButton}
             {feedbackButton}
             {adminButton}
+            {settingsButton}
             {signOutButton}
           </List>
         </Popover>

src/components/Nav/components/NavLinks/index.js

@@ -162,6 +162,15 @@ const GordonNavLinks = ({ onLinkClick }) => {
     />
   );
 
+  const settingButton = (
+    <GordonNavButton
+      unavailable={isOnline ? null : 'offline'}
+      linkName={'Settings'}
+      linkPath={'/settings'}
+      divider={false}
+    />
+  );
+
   const adminButton =
     isAuthenticated && isSiteAdmin ? (
       <GordonNavButton
@@ -197,6 +206,7 @@ const GordonNavLinks = ({ onLinkClick }) => {
         {aboutButton}
         {feedbackButton}
         {adminButton}
+        {settingButton}
         {signOutButton}
       </List>
 

src/components/Settings/components/ProfileOptions/index.js

@@ -0,0 +1,73 @@
+import {
+  Grid,
+  Card,
+  List,
+  CardHeader,
+  CardContent,
+  Typography,
+  FormControlLabel,
+  Switch,
+} from '@material-ui/core';
+import { useEffect, useState } from 'react';
+import userService from 'services/user';
+import styles from './ProfileOptions.module.css';
+import SettingsListItem from '../SettingsListItem';
+
+const ProfileOptions = ({ isOnline, settings, createSnackbar }) => {
+  const [isMobilePhonePrivate, setIsMobilePhonePrivate] = useState(settings);
+
+  const handleChangeMobilePhonePrivacy = async () => {
+    try {
+      await userService.setMobilePhonePrivacy(!isMobilePhonePrivate);
+      setIsMobilePhonePrivate(!isMobilePhonePrivate);
+
+      createSnackbar(
+        isMobilePhonePrivate ? 'Mobile Phone Visible' : 'Mobile Phone Hidden',
+        'success',
+      );
+    } catch {
+      createSnackbar('Privacy Change Failed', 'error');
+    }
+  };
+
+  const MobilePhone = (
+    <SettingsListItem
+      title="Mobile Phone"
+      ContentIcon={
+        <FormControlLabel
+          control={
+            <Switch onChange={handleChangeMobilePhonePrivacy} checked={!isMobilePhonePrivate} />
+          }
+          label={isMobilePhonePrivate ? 'Private' : 'Public'}
+          labelPlacement="bottom"
+          disabled={!isOnline}
+        />
+      }
+      // privateInfo={profile.CliftonStrengths.Private}
+    />
+  );
+
+  return (
+    <Grid container justifyContent="center">
+      <Grid item xs={12} lg={8}>
+        <Card className={styles.settings}>
+          <CardHeader
+            className={styles.settings_title}
+            title="Gordon 360 Settings"
+            titleTypographyProps={{ variant: 'h4' }}
+          />
+          <CardContent>
+            <Card className={styles.settings_section}>
+              <CardHeader className={styles.settings_header} title="Profile Options" />
+              <CardContent>
+                <List>{MobilePhone}</List>
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default ProfileOptions;

src/components/Settings/components/SettingsListItem/index.js

@@ -0,0 +1,41 @@
+import { Divider, ListItem, Grid, Typography } from '@material-ui/core';
+import styles from './SettingsListItem.module.css';
+
+const SettingsListItem = ({
+  title,
+  ContentText,
+  ContentIcon = null,
+  privateInfo = false,
+  myProf = false,
+}) => {
+  const gridSizeProps = ContentIcon ? { xs: 4, md: 3, lg: 4 } : { xs: 7 };
+
+  return (
+    <>
+      <ListItem className={styles.settings_list_item}>
+        <Grid container alignItems="center">
+          <Grid
+            container
+            item
+            xs={5}
+            alignItems="center"
+            className={privateInfo ? (myProf ? styles.private : styles.privateNotMine) : null}
+          >
+            <Typography>{title}</Typography>
+          </Grid>
+          <Grid container item {...gridSizeProps} alignItems="center">
+            {ContentText}
+          </Grid>
+          {ContentIcon && (
+            <Grid container item xs={3} md={4} lg={3} justifyContent="center">
+              {ContentIcon}
+            </Grid>
+          )}
+        </Grid>
+      </ListItem>
+      <Divider />
+    </>
+  );
+};
+
+export default SettingsListItem;

src/components/Settings/components/index.js

@@ -0,0 +1 @@
+export { default as ProfileOptions } from './ProfileOptions';

src/components/Settings/index.js

@@ -0,0 +1,35 @@
+import { Grid } from '@material-ui/core';
+import Profile from 'components/Profile';
+import GordonSnackbar from 'components/Snackbar';
+import { useAuthGroups } from 'hooks';
+import useNetworkStatus from 'hooks/useNetworkStatus';
+import { useCallback, useEffect, useState } from 'react';
+import { AuthGroup } from 'services/auth';
+import { ProfileOptions } from './components';
+
+const Settings = ({ setting, myProf }) => {
+  const [snackbar, setSnackbar] = useState({ message: '', severity: null, open: false });
+  const isOnline = useNetworkStatus();
+
+  const createSnakbar = useCallback((message, severity) => {
+    setSnackbar({ message, severity, open: true });
+  }, []);
+
+  return (
+    <Grid container justifyContent="center" spacing={2}>
+      <Grid item xs={12} md={myProf ? 16 : 24} lg={myProf ? 12 : 20}>
+        <ProfileOptions isOnline={isOnline} createSnackbar={createSnakbar} myProf={myProf} />
+      </Grid>
+
+      <GordonSnackbar
+        open={snackbar.open}
+        text={snackbar.message}
+        severity={snackbar.severity}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        onClose={() => setSnackbar((s) => ({ ...s, open: false }))}
+      />
+    </Grid>
+  );
+};
+
+export default Settings;

src/routes.js

@@ -18,6 +18,7 @@ import Page404 from './views/Page404';
 import PeopleSearch from './views/PeopleSearch';
 import ProfileNotFound from './views/ProfileNotFound';
 import PublicProfile from './views/PublicProfile';
+import MySettings from './views/MySettings';
 import Timesheets from './views/Timesheets';
 import WellnessCheck from './views/WellnessCheck';
 
@@ -129,6 +130,11 @@ const routes = [
     path: '/news',
     component: News,
   },
+  {
+    name: 'Settings',
+    path: '/settings',
+    component: MySettings,
+  },
   {
     name: 'Page Not Found',
     path: '*',

src/views/MySettings/index.js

@@ -0,0 +1,26 @@
+import { useIsAuthenticated } from '@azure/msal-react';
+import GordonUnauthorized from 'components/GordonUnauthorized';
+import GordonLoader from 'components/Loader';
+import Settings from 'components/Settings';
+import { useNetworkStatus, useUser } from 'hooks';
+import { useEffect, useRef, useState } from 'react';
+
+const MySettings = () => {
+  const [settings, setSettings] = useState([]);
+  const [error, setError] = useState(null);
+  const isAuthenticated = useIsAuthenticated();
+
+  const { profile, loading } = useUser();
+
+  if (loading) {
+    return <GordonLoader />;
+  }
+
+  if (Settings) {
+    return <Settings setting={profile.IsMobilePhonePrivate} myProf />;
+  }
+
+  return <GordonUnauthorized feature={'your settings'} />;
+};
+
+export default MySettings;