{title}
{
- const portOptions = [
- { label: "Port 1", value: "Port1" },
- { label: "Port 2", value: "Port2" },
- // Add more Ports as needed
- ];
+ const { user } = useSelector((state) => state.auth);
+ const [errors, setErrors] = useState({});
- const frequencyOptions = [
- { label: "1 minute", value: "1" },
- { label: "5 minutes", value: "5" },
- // Add more Ports as needed
- ];
+ //General Settings Form
+ const [generalSettings, setGeneralSettings] = useState({ url: "", name: "" });
+ //Checks Form
+ const [checks, setChecks] = useState({
+ type: "",
+ // port: ""
+ });
+ //Incidents Form
+ // const [notifications, setNotifications] = useState({
+ // viaSms: false,
+ // viaEmail: false,
+ // viaOther: false,
+ // email: "",
+ // });
+ //Advanced Settings Form
+ const [advancedSettings, setAdvancedSettings] = useState({
+ frequency: "",
+ // retries: "",
+ // codes: "",
+ // redirects: "",
+ });
+ //Proxy Settings Form
+ // const [proxy, setProxy] = useState({
+ // enabled: false,
+ // protocol: "",
+ // address: "",
+ // proxy_port: "",
+ // });
- const [incidentEmail, setIncidentEmail] = useState("");
+ const handleChange = (event, id, setState, checkbox) => {
+ const { value } = event.target;
+ setState((prev) => ({
+ ...prev,
+ [id]: checkbox ? true : value,
+ }));
- const [notifyViaSMS, setNotifyViaSMS] = useState(false);
- const [notifyViaEmail, setNotifyViaEmail] = useState(false);
- const [notifyViaCurrentEmail, setNotifyViaCurrentEmail] = useState(false);
+ const validation = createMonitorValidation.validate(
+ { [id]: value },
+ { abortEarly: false }
+ );
- const [maxRetries, setMaxRetries] = useState(0);
- const [acceptCode, setAcceptCode] = useState(0);
- const [maxRedirects, setMaxRedirects] = useState(0);
+ setErrors((prev) => {
+ const updatedErrors = { ...prev };
- const [proxy, setProxy] = useState(false);
+ if (validation.error) {
+ updatedErrors[id] = validation.error.details[0].message;
+ } else {
+ delete updatedErrors[id];
+ }
+ return updatedErrors;
+ });
+ };
+ // const handleCheck = (id, setState) => {
+ // setState((prev) => ({
+ // ...prev,
+ // [id]: !prev[id],
+ // }));
+ // };
- const [proxyAddress, setProxyAddress] = useState("");
- const [proxyPort, setProxyPort] = useState("");
+ const handleCreateNewMonitor = (event) => {
+ event.preventDefault();
+ //obj to submit
+ const monitor = {
+ ...generalSettings,
+ ...advancedSettings,
+ userId: user._id,
+ ...checks,
+ };
- const [selectedMonitorType, setSelectedMonitorType] = useState("");
+ const { error } = createMonitorValidation.validate(monitor, {
+ abortEarly: false,
+ });
- const [urlToMonitor, setUrlToMonitor] = useState("");
- const [friendlyName, setFriendlyName] = useState("");
-
- const [port, setPort] = useState("Select a port to check");
- const [frequncy, setFrequency] = useState("1 minute");
-
- const handlePortOptionChange = (newValue) => {
- setPort(newValue);
+ if (error) {
+ const newErrors = {};
+ error.details.forEach((err) => {
+ newErrors[err.path[0]] = err.message;
+ });
+ setErrors(newErrors);
+ } else {
+ //TODO - submit logic
+ }
};
- const handleFrequencyOptionChange = (newValue) => {
- setPort(newValue);
- };
+ console.log(errors);
- const handleUrlToMonitor = (event) => {
- setUrlToMonitor(event.target.value);
- console.log(urlToMonitor);
- };
-
- const handleFriendlyName = (event) => {
- setFriendlyName(event.target.value);
- console.log(friendlyName);
- };
-
- const handleIncidentEmail = (event) => {
- setIncidentEmail(event.target.value);
- console.log(incidentEmail);
- };
-
- const handleNotifyViaSMS = (event) => {
- setNotifyViaSMS(event.target.checked);
- };
-
- const handleNotifyViaEmail = (event) => {
- setNotifyViaEmail(event.target.checked);
- };
-
- const handleNotifyViaCurrentEmail = (event) => {
- setNotifyViaCurrentEmail(event.target.checked);
- };
-
- const handleSetMaxRetries = (event) => {
- setMaxRetries(event.target.value);
- console.log(maxRetries);
- };
-
- const handleSetAcceptCode = (event) => {
- setAcceptCode(event.target.value);
- console.log(acceptCode);
- };
-
- const handleSetMaxRedirects = (event) => {
- setMaxRedirects(event.target.value);
- console.log(maxRedirects);
- };
-
- const handleEnableProxy = (event) => {
- setProxy(event.target.value);
- console.log(proxy);
- };
-
- const handleproxyAddress = (event) => {
- setProxyAddress(event.target.value);
- console.log(proxyAddress);
- };
-
- const handleproxyPort = (event) => {
- setProxyPort(event.target.value);
- console.log(proxyPort);
- };
-
- const handleMonitorTypeChange = (value) => {
- setSelectedMonitorType(value);
- console.log(value);
- };
-
- const handleCreateNewMonitor = () => {
- console.log("Created");
- };
+ //select values
+ // const ports = ["Port 1", "Port 2", "Port 3"];
+ const frequencies = [1, 2, 3, 4, 5];
return (
-
}
/>
-
+ {/* TODO */}
+ {/*
{
handleCheck("viaSms", setNotifications)}
/>
handleCheck("viaEmail", setNotifications)}
/>
handleCheck("viaOther", setNotifications)}
/>
+ handleChange(event, "email", setNotifications)
+ }
/>
}
- />
+ /> */}