added notification settigns

src/user/UserSettings.tsx

@@ -1,5 +1,15 @@
-import { AccountBox, Close, ExpandLess, ExpandMore, Face, Share as ShareIcon } from "@mui/icons-material";
+import { 
-import { AppBar, Box, Button, CircularProgress, Collapse, Divider, FormControl, FormLabel, Grid2, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, TextField, Theme, Toolbar, Tooltip, Typography } from "@mui/material";
+  AccountBox, 
+  Close, 
+  ExpandLess, 
+  ExpandMore, 
+  Face, 
+  Share as ShareIcon, 
+  Notifications as NotificationsIcon, 
+  Email as EmailIcon,
+  Textsms as TextIcon,
+} from "@mui/icons-material";
+import { AppBar, Box, Button, Checkbox, CircularProgress, Collapse, Divider, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid2, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Radio, RadioGroup, TextField, Theme, Toolbar, Tooltip, Typography } from "@mui/material";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import UserAvatar from "./UserAvatar";
 import { useGlobalState, useUserAPI } from "providers";
@@ -61,18 +71,17 @@ export default function UserSettings(props: Props) {
   const [user, setUser] = useState<User>(globalState.user);
   const [profileExpanded, setProfileExpanded] = useState<boolean>(false);
   const [avatarExpanded, setAvatarExpanded] = useState<boolean>(false);
+  const [notificationsExpanded, setNotificationsExpanded] = useState<boolean>(false);
   const [avatarUrl, setAvatarUrl] = useState<string>("");
 
-  console.log(user.settings.avatar)
-
   useEffect(() => {
     function changeIcon(icon: string | undefined) {
       let updatedUser = User.clone(user);
-      updatedUser.settings.avatar = icon ? icon : user.settings.name;
+      updatedUser.settings.avatar = icon ? icon : user.settings.avatar;
       setUser(updatedUser);
     }
     if (avatarUrl === "") {
-      // changeIcon(user.settings.name);
+      changeIcon(undefined);
     } else {
       changeIcon(avatarUrl);
     }
@@ -99,8 +108,13 @@ export default function UserSettings(props: Props) {
       });
   };
 
+  const setDefaultState = () => {
+    setIsLoading(false);
+    setUser(globalState.user);
+  };
+
   const closeDialog = () => {
-    // setDefaultState();
+    setDefaultState();
     closeDialogCallback();
   };
 
@@ -186,6 +200,154 @@ export default function UserSettings(props: Props) {
     );
   };
 
+  const handleChangeNotifyByDefault = (notifyByDefault: boolean) => {
+    let updatedUser = User.clone(user);
+    updatedUser.settings.notifyByDefault = notifyByDefault;
+    setUser(updatedUser);
+  };
+
+  const handleNotificationMethod = (
+    checked: boolean,
+    notificationMethod: pond.NotificationMethod
+  ) => {
+    let updatedUser = User.clone(user);
+    let notificationMethods = updatedUser.settings.notificationMethods;
+    if (checked) {
+      if (!notificationMethods.includes(notificationMethod)) {
+        notificationMethods.push(notificationMethod);
+      }
+    } else {
+      notificationMethods = notificationMethods.filter(element => element !== notificationMethod);
+    }
+    updatedUser.settings.notificationMethods = notificationMethods;
+    setUser(updatedUser);
+  };
+
+  const notificationsSettings = () => {
+    const { notifyByDefault, notificationMethods } = user.settings;
+
+    return (
+      <Grid2 container direction="column" spacing={4} justifyContent="flex-start" alignItems="flex-start">
+        <Grid2>
+          <FormControl component="fieldset">
+            <FormLabel component="legend">Notification Preference</FormLabel>
+            <RadioGroup
+              aria-label="notification-default"
+              name="notificationDefault"
+              value={notifyByDefault}
+              onChange={event => handleChangeNotifyByDefault(event.target.value === "true")}>
+              <FormControlLabel value={true} control={<Radio />} label="Opt-in" />
+              <FormControlLabel value={false} control={<Radio />} label="Opt-out" />
+            </RadioGroup>
+            <FormHelperText>
+              {notifyByDefault
+                ? "Notifications are enabled by default"
+                : "Notifications are disabled by default"}
+            </FormHelperText>
+          </FormControl>
+        </Grid2>
+        <Grid2>
+          <FormControl component="fieldset">
+            <FormLabel component="legend">Notification Methods</FormLabel>
+            <FormGroup>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={(_event, checked) =>
+                      handleNotificationMethod(
+                        checked,
+                        pond.NotificationMethod.NOTIFICATION_METHOD_EMAIL
+                      )
+                    }
+                    checked={
+                      notificationMethods
+                        ? notificationMethods.includes(
+                            pond.NotificationMethod.NOTIFICATION_METHOD_EMAIL
+                          )
+                        : false
+                    }
+                  />
+                }
+                label={
+                  <ListItem dense disableGutters>
+                    <ListItemIcon className={classes.checkboxIcon}>
+                      <EmailIcon />
+                    </ListItemIcon>
+                    <ListItemText primary="Email" />
+                  </ListItem>
+                }
+              />
+
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={(_event, checked) =>
+                      handleNotificationMethod(
+                        checked,
+                        pond.NotificationMethod.NOTIFICATION_METHOD_TEXT
+                      )
+                    }
+                    checked={
+                      notificationMethods
+                        ? notificationMethods.includes(
+                            pond.NotificationMethod.NOTIFICATION_METHOD_TEXT
+                          )
+                        : false
+                    }
+                  />
+                }
+                label={
+                  <ListItem dense disableGutters>
+                    <ListItemIcon className={classes.checkboxIcon}>
+                      <TextIcon />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Text Message (SMS)"
+                      secondary="Requires a valid phone number"
+                      secondaryTypographyProps={{ variant: "caption" }}
+                    />
+                  </ListItem>
+                }
+              />
+
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={(_event, checked) =>
+                      handleNotificationMethod(
+                        checked,
+                        pond.NotificationMethod.NOTIFICATION_METHOD_APP
+                      )
+                    }
+                    checked={
+                      notificationMethods
+                        ? notificationMethods.includes(
+                            pond.NotificationMethod.NOTIFICATION_METHOD_APP
+                          )
+                        : false
+                    }
+                  />
+                }
+                label={
+                  <ListItem dense disableGutters>
+                    <ListItemIcon className={classes.checkboxIcon}>
+                      <TextIcon />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="In-App Notifications"
+                      secondary="No email or phone number required"
+                      secondaryTypographyProps={{ variant: "caption" }}
+                    />
+                  </ListItem>
+                }
+              />
+            </FormGroup>
+          </FormControl>
+        </Grid2>
+      </Grid2>
+    );
+  };
+
   const avatarSettings = () => {
     return <IconPicker url={user.settings.avatar} setUrl={setAvatarUrl} id={user.settings.id} />;
   };
@@ -230,15 +392,15 @@ export default function UserSettings(props: Props) {
           </List>
         </Collapse>
 
-        {/* <Divider />
+        <Divider />
 
-        <ListItem button onClick={() => setNotificationsExpanded(!notificationsExpanded)}>
+        <ListItemButton onClick={() => setNotificationsExpanded(!notificationsExpanded)}>
           <ListItemIcon>
             <NotificationsIcon />
           </ListItemIcon>
           <ListItemText primary="Notifications" />
           {notificationsExpanded ? <ExpandLess /> : <ExpandMore />}
-        </ListItem>
+        </ListItemButton>
         <Collapse in={notificationsExpanded} timeout="auto" unmountOnExit>
           <List component="div">
             <ListItem>
@@ -249,7 +411,7 @@ export default function UserSettings(props: Props) {
           </List>
         </Collapse>
 
-        <Divider />
+        {/* <Divider />
 
         <ListItem button onClick={() => setUnitsExpanded(!unitsExpanded)}>
           <ListItemIcon>