remove unused
This commit is contained in:
Alex Holliday committed
1 parent
2dca5ccb67
commit
a0aee182de
7 files changed
+1
-1219
No files matched your search
@@ -1,320 +0,0 @@
|
||||
// Components
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
|
||||
import Button from "@mui/material/Button";
|
||||
import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
|
||||
import Box from "@mui/material/Box";
|
||||
import Select from "@/Components/v1/Inputs/Select/index.jsx";
|
||||
import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
|
||||
import Dialog from "@/Components/v1/Dialog/index.jsx";
|
||||
|
||||
// Utils
|
||||
import { useState } from "react";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import {
|
||||
useCreateNotification,
|
||||
useGetNotificationById,
|
||||
useEditNotification,
|
||||
useTestNotification,
|
||||
useDeleteNotification,
|
||||
} from "../../../Hooks/useNotifications.js";
|
||||
import { notificationValidation } from "../../../Validation/validation.js";
|
||||
import { createToast } from "../../../Utils/toastUtils.jsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
NOTIFICATION_TYPES,
|
||||
TITLE_MAP,
|
||||
DESCRIPTION_MAP,
|
||||
LABEL_MAP,
|
||||
PLACEHOLDER_MAP,
|
||||
} from "../utils.js";
|
||||
|
||||
// Setup
|
||||
|
||||
const CreateNotifications = () => {
|
||||
const { notificationId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
const [createNotification, isCreating] = useCreateNotification();
|
||||
const [editNotification, isEditing] = useEditNotification();
|
||||
const [testNotification, isTesting] = useTestNotification();
|
||||
const [deleteNotification, isDeleting] = useDeleteNotification();
|
||||
|
||||
const BREADCRUMBS = [
|
||||
{ name: "notifications", path: "/notifications" },
|
||||
{
|
||||
name: notificationId ? "edit" : "create",
|
||||
path: notificationId ? `/notifications/${notificationId}` : "/notifications/create",
|
||||
},
|
||||
];
|
||||
|
||||
// Redux state
|
||||
|
||||
// local state
|
||||
const [notification, setNotification] = useState({
|
||||
notificationName: "",
|
||||
address: "",
|
||||
type: NOTIFICATION_TYPES[0].id,
|
||||
});
|
||||
const [errors, setErrors] = useState({});
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [notificationIsLoading] = useGetNotificationById(notificationId, setNotification);
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const getNotificationTypeValue = (typeId) => {
|
||||
return NOTIFICATION_TYPES.find((type) => type.id === typeId)?.value || "email";
|
||||
};
|
||||
|
||||
const extractError = (error, field) =>
|
||||
error?.details.find((d) => d.path.includes(field))?.message;
|
||||
|
||||
// handlers
|
||||
const onSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const form = {
|
||||
...notification,
|
||||
type: getNotificationTypeValue(notification.type),
|
||||
};
|
||||
|
||||
let error = null;
|
||||
|
||||
error = notificationValidation.validate(form, { abortEarly: false }).error;
|
||||
|
||||
if (error) {
|
||||
const newErrors = {};
|
||||
error.details.forEach((err) => {
|
||||
newErrors[err.path[0]] = err.message;
|
||||
});
|
||||
createToast({ body: Object.values(newErrors)[0] });
|
||||
setErrors(newErrors);
|
||||
return;
|
||||
}
|
||||
|
||||
if (notificationId) {
|
||||
editNotification(notificationId, form);
|
||||
} else {
|
||||
createNotification(form);
|
||||
}
|
||||
};
|
||||
|
||||
const onChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
let rawNotification = { ...notification, [name]: value };
|
||||
let newNotification = {
|
||||
...rawNotification,
|
||||
type: getNotificationTypeValue(rawNotification.type),
|
||||
};
|
||||
|
||||
const { error } = notificationValidation.validate(newNotification, {
|
||||
abortEarly: false,
|
||||
});
|
||||
let validationError = { ...errors };
|
||||
|
||||
if (name === "type") {
|
||||
validationError["type"] = extractError(error, "type");
|
||||
validationError["address"] = extractError(error, "address");
|
||||
} else {
|
||||
validationError[name] = extractError(error, name);
|
||||
}
|
||||
|
||||
setNotification(rawNotification);
|
||||
setErrors(validationError);
|
||||
};
|
||||
|
||||
const onTestNotification = () => {
|
||||
const form = {
|
||||
...notification,
|
||||
type: getNotificationTypeValue(notification.type),
|
||||
};
|
||||
|
||||
let error = null;
|
||||
|
||||
error = notificationValidation.validate(form, { abortEarly: false }).error;
|
||||
|
||||
if (error) {
|
||||
const newErrors = {};
|
||||
error.details.forEach((err) => {
|
||||
newErrors[err.path[0]] = err.message;
|
||||
});
|
||||
createToast({ body: Object.values(newErrors)[0] });
|
||||
setErrors(newErrors);
|
||||
return;
|
||||
}
|
||||
|
||||
testNotification(form);
|
||||
};
|
||||
|
||||
const onDelete = () => {
|
||||
if (notificationId) {
|
||||
deleteNotification(notificationId, () => navigate("/notifications"));
|
||||
}
|
||||
};
|
||||
|
||||
const type = getNotificationTypeValue(notification.type);
|
||||
return (
|
||||
<Stack gap={theme.spacing(10)}>
|
||||
<Breadcrumbs list={BREADCRUMBS} />
|
||||
<Typography variant="h1">{t("createNotifications.title")}</Typography>
|
||||
<Stack
|
||||
component="form"
|
||||
onSubmit={onSubmit}
|
||||
noValidate
|
||||
gap={theme.spacing(12)}
|
||||
mt={theme.spacing(6)}
|
||||
>
|
||||
<ConfigBox>
|
||||
<Box>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h2"
|
||||
>
|
||||
{t("createNotifications.nameSettings.title")}
|
||||
</Typography>
|
||||
<Typography component="p">
|
||||
{t("createNotifications.nameSettings.description")}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.spacing(12)}>
|
||||
<TextInput
|
||||
label={t("createNotifications.nameSettings.nameLabel")}
|
||||
name="notificationName"
|
||||
placeholder={t("createNotifications.nameSettings.namePlaceholder")}
|
||||
value={notification.notificationName}
|
||||
onChange={onChange}
|
||||
error={Boolean(errors.notificationName)}
|
||||
helperText={errors["notificationName"]}
|
||||
/>
|
||||
</Stack>
|
||||
</ConfigBox>
|
||||
<ConfigBox>
|
||||
<Box>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h2"
|
||||
>
|
||||
{t("createNotifications.typeSettings.title")}
|
||||
</Typography>
|
||||
<Typography component="p">
|
||||
{t("createNotifications.typeSettings.description")}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.spacing(12)}>
|
||||
<Select
|
||||
items={NOTIFICATION_TYPES}
|
||||
label="Type"
|
||||
name="type"
|
||||
value={notification.type}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</Stack>
|
||||
</ConfigBox>
|
||||
<ConfigBox>
|
||||
<Box>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h2"
|
||||
>
|
||||
{t(TITLE_MAP[type])}
|
||||
</Typography>
|
||||
<Typography component="p">{t(DESCRIPTION_MAP[type])}</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.spacing(12)}>
|
||||
{type === "matrix" ? (
|
||||
<>
|
||||
<TextInput
|
||||
label={t("createNotifications.matrixSettings.homeserverLabel")}
|
||||
name="homeserverUrl"
|
||||
placeholder={t(
|
||||
"createNotifications.matrixSettings.homeserverPlaceholder"
|
||||
)}
|
||||
value={notification.homeserverUrl || ""}
|
||||
onChange={onChange}
|
||||
error={Boolean(errors.homeserverUrl)}
|
||||
helperText={errors["homeserverUrl"]}
|
||||
/>
|
||||
<TextInput
|
||||
label={t("createNotifications.matrixSettings.roomIdLabel")}
|
||||
name="roomId"
|
||||
placeholder={t("createNotifications.matrixSettings.roomIdPlaceholder")}
|
||||
value={notification.roomId || ""}
|
||||
onChange={onChange}
|
||||
error={Boolean(errors.roomId)}
|
||||
helperText={errors["roomId"]}
|
||||
/>
|
||||
<TextInput
|
||||
label={t("createNotifications.matrixSettings.accessTokenLabel")}
|
||||
name="accessToken"
|
||||
type="password"
|
||||
placeholder={t(
|
||||
"createNotifications.matrixSettings.accessTokenPlaceholder"
|
||||
)}
|
||||
value={notification.accessToken || ""}
|
||||
onChange={onChange}
|
||||
error={Boolean(errors.accessToken)}
|
||||
helperText={errors["accessToken"]}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<TextInput
|
||||
label={t(LABEL_MAP[type])}
|
||||
name="address"
|
||||
placeholder={t(PLACEHOLDER_MAP[type])}
|
||||
value={notification.address}
|
||||
onChange={onChange}
|
||||
error={Boolean(errors.address)}
|
||||
helperText={errors["address"]}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
</ConfigBox>{" "}
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-end"
|
||||
spacing={theme.spacing(2)}
|
||||
>
|
||||
<Button
|
||||
loading={isTesting}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
onClick={onTestNotification}
|
||||
>
|
||||
{t("createNotifications.testNotification")}
|
||||
</Button>
|
||||
{notificationId && (
|
||||
<Button
|
||||
loading={isDeleting}
|
||||
variant="contained"
|
||||
color="error"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
{t("delete")}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
loading={isCreating || isEditing || notificationIsLoading}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="accent"
|
||||
>
|
||||
{t("submit")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
onClose={() => setIsOpen(false)}
|
||||
onCancel={() => setIsOpen(false)}
|
||||
title={t("createNotifications.dialogDeleteTitle")}
|
||||
confirmationButtonLabel={t("createNotifications.dialogDeleteConfirm")}
|
||||
onConfirm={onDelete}
|
||||
isLoading={isDeleting}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateNotifications;
|
||||
Reference in new issue
Block a user