added notification settigns
This commit is contained in:
Carter
parent
15c3c8b536
commit
091634161f
1 changed files with 173 additions and 11 deletions
|
|
@ -1,5 +1,15 @@
|
|||
import { AccountBox, Close, ExpandLess, ExpandMore, Face, Share as ShareIcon } from "@mui/icons-material";
|
||||
import { AppBar, Box, Button, CircularProgress, Collapse, Divider, FormControl, FormLabel, Grid2, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, TextField, Theme, Toolbar, Tooltip, Typography } from "@mui/material";
|
||||
import {
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue