From 91910504713dead38fb91e1f96f48904966988e9 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 5 Sep 2024 14:09:50 -0700
Subject: [PATCH 1/2] Refactor create pagespeed

---
 .../Pages/PageSpeed/CreatePageSpeed/index.jsx | 456 +++++++++++-------
 1 file changed, 276 insertions(+), 180 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
index 4c8204153..7deeb492d 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
@@ -1,28 +1,136 @@
-import { Box, Stack, Typography } from "@mui/material";
-import LoadingButton from "@mui/lab/LoadingButton";
-
 import { useState } from "react";
+import { Box, Button, ButtonGroup, Stack, Typography } from "@mui/material";
+import { useSelector, useDispatch } from "react-redux";
+import { monitorValidation } from "../../../Validation/validation";
+import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
-import { useDispatch, useSelector } from "react-redux";
-import { useNavigate } from "react-router";
+import { createPageSpeed } from "../../../Features/PageSpeedMonitor/pageSpeedMonitorSlice";
+import { createToast } from "../../../Utils/toastUtils";
+import { logger } from "../../../Utils/Logger";
+import { ConfigBox } from "../../Monitors/styled";
+import Radio from "../../../Components/Inputs/Radio";
 import Field from "../../../Components/Inputs/Field";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
-import { monitorValidation } from "../../../Validation/validation";
-import { createToast } from "../../../Utils/toastUtils";
-import { createPageSpeed } from "../../../Features/PageSpeedMonitor/pageSpeedMonitorSlice";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import "./index.css";
-import { logger } from "../../../Utils/Logger";
-const CreatePageSpeed = () => {
-  const theme = useTheme();
-  const navigate = useNavigate();
-  const dispatch = useDispatch();
-  const { isLoading } = useSelector((state) => state.pageSpeedMonitors);
 
+const CreatePageSpeed = () => {
   const MS_PER_MINUTE = 60000;
   const { user, authToken } = useSelector((state) => state.auth);
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const theme = useTheme();
 
+  const idMap = {
+    "monitor-url": "url",
+    "monitor-name": "name",
+    "monitor-checks-http": "type",
+    "monitor-checks-ping": "type",
+    "notify-email-default": "notification-email",
+  };
+
+  const [monitor, setMonitor] = useState({
+    url: "",
+    name: "",
+    type: "pagespeed",
+    notifications: [],
+    interval: 3,
+  });
+  const [https, setHttps] = useState(true);
+  const [errors, setErrors] = useState({});
+
+  const handleChange = (event, name) => {
+    const { value, id } = event.target;
+    if (!name) name = idMap[id];
+
+    if (name.includes("notification-")) {
+      name = name.replace("notification-", "");
+      let hasNotif = monitor.notifications.some(
+        (notification) => notification.type === name
+      );
+      setMonitor((prev) => {
+        const notifs = [...prev.notifications];
+        if (hasNotif) {
+          return {
+            ...prev,
+            notifications: notifs.filter((notif) => notif.type !== name),
+          };
+        } else {
+          return {
+            ...prev,
+            notifications: [
+              ...notifs,
+              name === "email"
+                ? { type: name, address: value }
+                : // TODO - phone number
+                  { type: name, phone: value },
+            ],
+          };
+        }
+      });
+    } else {
+      setMonitor((prev) => ({
+        ...prev,
+        [name]: value,
+      }));
+
+      const { error } = monitorValidation.validate(
+        { [name]: value },
+        { abortEarly: false }
+      );
+
+      setErrors((prev) => {
+        const updatedErrors = { ...prev };
+        if (error) updatedErrors[name] = error.details[0].message;
+        else delete updatedErrors[name];
+        return updatedErrors;
+      });
+    }
+  };
+
+  const handleCreateMonitor = async (event) => {
+    event.preventDefault();
+    //obj to submit
+    let form = {
+      url: `http${https ? "s" : ""}://` + monitor.url,
+      name: monitor.name === "" ? monitor.url : monitor.name,
+      type: monitor.type,
+      interval: monitor.interval * MS_PER_MINUTE,
+    };
+
+    const { error } = monitorValidation.validate(form, {
+      abortEarly: false,
+    });
+
+    if (error) {
+      const newErrors = {};
+      error.details.forEach((err) => {
+        newErrors[err.path[0]] = err.message;
+      });
+      setErrors(newErrors);
+      createToast({ body: "Error validation data." });
+    } else {
+      form = {
+        ...form,
+        description: form.name,
+        teamId: user.teamId,
+        userId: user._id,
+        notifications: monitor.notifications,
+      };
+      const action = await dispatch(
+        createPageSpeed({ authToken, monitor: form })
+      );
+      if (action.meta.requestStatus === "fulfilled") {
+        createToast({ body: "Monitor created successfully!" });
+        navigate("/pagespeed");
+      } else {
+        createToast({ body: "Failed to create monitor." });
+      }
+    }
+  };
+
+  //select values
   const frequencies = [
     { _id: 3, name: "3 minutes" },
     { _id: 5, name: "5 minutes" },
@@ -32,95 +140,31 @@ const CreatePageSpeed = () => {
     { _id: 1440, name: "1 day" },
     { _id: 10080, name: "1 week" },
   ];
-
-  const [form, setForm] = useState({
-    name: "",
-    url: "",
-    interval: 3,
-  });
-  const [errors, setErrors] = useState({});
-
-  const handleChange = (event, id) => {
-    const { value } = event.target;
-    setForm((prev) => ({ ...prev, [id]: value }));
-
-    const { error } = monitorValidation.validate(
-      { [id]: value },
-      { abortEarly: false }
-    );
-
-    setErrors((prev) => {
-      const newErrors = { ...prev };
-      if (error) newErrors[id] = error.details[0].message;
-      else delete newErrors[id];
-      return newErrors;
-    });
-  };
-
-  const handleCreate = async (event) => {
-    event.preventDefault();
-
-    let monitor = {
-      url: "http://" + form.url,
-      name: form.name === "" ? form.url : form.name,
-    };
-
-    const { error } = monitorValidation.validate(form, { abortEarly: false });
-
-    if (error) {
-      const newErrors = {};
-      error.details.forEach((err) => {
-        newErrors[err.path[0]] = err.message;
-      });
-      setErrors(newErrors);
-      createToast({ body: "Error validating data." });
-    } else {
-      monitor = {
-        ...monitor,
-        description: monitor.name,
-        userId: user._id,
-        teamId: user.teamId,
-        interval: form.interval * MS_PER_MINUTE,
-        type: "pagespeed",
-      };
-      try {
-        const action = await dispatch(createPageSpeed({ authToken, monitor }));
-        if (action.meta.requestStatus === "fulfilled") {
-          navigate("/pagespeed");
-        }
-      } catch (error) {
-        createToast({
-          body:
-            error.details && error.details.length > 0
-              ? error.details[0].message
-              : "Unknown error.",
-        });
-      }
-    }
-  };
-
   return (
-    <Stack className="create-page-speed" gap={theme.spacing(6)}>
+    <Box
+      className="create-monitor"
+      sx={{
+        "& h1": {
+          color: theme.palette.text.primary,
+        },
+      }}
+    >
       <Breadcrumbs
         list={[
-          { name: "pagespeed", path: "/pagespeed" },
-          { name: "create", path: `/pagespeed/create` },
+          { name: "monitors", path: "/monitors" },
+          { name: "create", path: `/monitors/create` },
         ]}
       />
       <Stack
         component="form"
+        className="create-monitor-form"
+        onSubmit={handleCreateMonitor}
         noValidate
         spellCheck="false"
-        onSubmit={handleCreate}
         gap={theme.spacing(12)}
-        flex={1}
+        mt={theme.spacing(6)}
       >
-        <Typography
-          component="h1"
-          lineHeight={1}
-          fontSize={21}
-          color={theme.palette.text.primary}
-        >
+        <Typography component="h1">
           <Typography
             component="span"
             fontSize="inherit"
@@ -129,118 +173,170 @@ const CreatePageSpeed = () => {
             Create your{" "}
           </Typography>
           <Typography component="span" fontSize="inherit" fontWeight="inherit">
-            pagespeed{" "}
-          </Typography>
-          <Typography
-            component="span"
-            fontSize="inherit"
-            color={theme.palette.text.secondary}
-          >
-            monitor
+            Pagespeed monitor
           </Typography>
         </Typography>
-        <Stack
-          border={1}
-          borderColor={theme.palette.border.light}
-          borderRadius={theme.shape.borderRadius}
-          backgroundColor={theme.palette.background.main}
-          p={theme.spacing(20)}
-          pl={theme.spacing(15)}
-          gap={theme.spacing(20)}
-          sx={{
-            "& h3, & p": {
-              color: theme.palette.text.secondary,
-            },
-          }}
-        >
-          <Stack direction="row">
-            <Typography component="h3">Monitor display name</Typography>
+        <ConfigBox>
+          <Box>
+            <Typography component="h2">General settings</Typography>
+            <Typography component="p">
+              Here you can select the URL of the host, together with the type of
+              monitor.
+            </Typography>
+          </Box>
+          <Stack gap={theme.spacing(15)}>
+            <Field
+              type={"url"}
+              id="monitor-url"
+              label="URL to monitor"
+              https={https}
+              placeholder="google.com"
+              value={monitor.url}
+              onChange={handleChange}
+              error={errors["url"]}
+            />
             <Field
               type="text"
               id="monitor-name"
-              placeholder="Example monitor"
-              value={form.name}
-              onChange={(event) => handleChange(event, "name")}
-              error={errors.name}
+              label="Display name"
+              isOptional={true}
+              placeholder="Google"
+              value={monitor.name}
+              onChange={handleChange}
+              error={errors["name"]}
             />
           </Stack>
-          <Stack direction="row">
-            <Typography component="h3">URL</Typography>
-            <Field
-              type="url"
-              id="monitor-url"
-              placeholder="random.website.com"
-              value={form.url}
-              onChange={(event) => handleChange(event, "url")}
-              error={errors.url}
-            />
-          </Stack>
-          <Stack direction="row">
-            <Typography component="h3">Check frequency</Typography>
-            <Select
-              id="monitor-frequency"
-              items={frequencies}
-              value={form.interval}
-              onChange={(event) => handleChange(event, "interval")}
-            />
-          </Stack>
-          <Stack direction="row">
-            <Typography component="h3">
-              Incidents notifications{" "}
-              <Typography component="span">(coming soon)</Typography>
+        </ConfigBox>
+        <ConfigBox>
+          <Box>
+            <Typography component="h2">Checks to perform</Typography>
+            <Typography component="p">
+              You can always add or remove checks after adding your site.
             </Typography>
-            <Stack
-              className="section-disabled"
-              backgroundColor={theme.palette.background.fill}
-            >
-              <Typography mb={theme.spacing(4)}>
-                When there is a new incident,
-              </Typography>
-              <Checkbox
-                id="notify-sms"
-                label="Notify via SMS (coming soon)"
-                isChecked={false}
-                isDisabled={true}
-              />
-              <Checkbox
-                id="notify-email"
-                label="Notify via email (to gorkem.cetin@bluewavelabs.ca)"
-                isChecked={false}
-              />
-              <Checkbox
-                id="notify-emails"
-                label="Notify via email to following emails"
-                isChecked={false}
+          </Box>
+          <Stack gap={theme.spacing(12)}>
+            <Stack gap={theme.spacing(6)}>
+              <Radio
+                id="monitor-checks-http"
+                title="Website monitoring"
+                desc="Use HTTP(s) to monitor your website or API endpoint."
+                size="small"
+                value="http"
+                checked={monitor.type === "pagespeed"}
+                onChange={(event) => handleChange(event)}
               />
+              <ButtonGroup sx={{ ml: "32px" }}>
+                <Button
+                  variant="group"
+                  filled={https.toString()}
+                  onClick={() => setHttps(true)}
+                >
+                  HTTPS
+                </Button>
+                <Button
+                  variant="group"
+                  filled={(!https).toString()}
+                  onClick={() => setHttps(false)}
+                >
+                  HTTP
+                </Button>
+              </ButtonGroup>
+            </Stack>
+            {errors["type"] ? (
+              <Box className="error-container">
+                <Typography
+                  component="p"
+                  className="input-error"
+                  color={theme.palette.error.text}
+                >
+                  {errors["type"]}
+                </Typography>
+              </Box>
+            ) : (
+              ""
+            )}
+          </Stack>
+        </ConfigBox>
+        <ConfigBox>
+          <Box>
+            <Typography component="h2">Incident notifications</Typography>
+            <Typography component="p">
+              When there is an incident, notify users.
+            </Typography>
+          </Box>
+          <Stack gap={theme.spacing(6)}>
+            <Typography component="p">When there is a new incident,</Typography>
+            <Checkbox
+              id="notify-sms"
+              label="Notify via SMS (coming soon)"
+              isChecked={false}
+              value=""
+              onChange={() => logger.warn("disabled")}
+              isDisabled={true}
+            />
+            <Checkbox
+              id="notify-email-default"
+              label={`Notify via email (to ${user.email})`}
+              isChecked={monitor.notifications.some(
+                (notification) => notification.type === "email"
+              )}
+              value={user?.email}
+              onChange={(event) => handleChange(event)}
+            />
+            <Checkbox
+              id="notify-email"
+              label="Also notify via email to multiple addresses (coming soon)"
+              isChecked={false}
+              value=""
+              onChange={() => logger.warn("disabled")}
+              isDisabled={true}
+            />
+            {monitor.notifications.some(
+              (notification) => notification.type === "emails"
+            ) ? (
               <Box mx={theme.spacing(16)}>
                 <Field
-                  id="notify-emails-list"
-                  placeholder="notifications@gmail.com"
+                  id="notify-email-list"
+                  type="text"
+                  placeholder="name@gmail.com"
                   value=""
                   onChange={() => logger.warn("disabled")}
-                  error=""
                 />
                 <Typography mt={theme.spacing(4)}>
                   You can separate multiple emails with a comma
                 </Typography>
               </Box>
-            </Stack>
+            ) : (
+              ""
+            )}
           </Stack>
-        </Stack>
-        <Stack direction="row" justifyContent="flex-end" mt="auto">
-          <LoadingButton
-            loading={isLoading}
-            type="submit"
+        </ConfigBox>
+        <ConfigBox>
+          <Box>
+            <Typography component="h2">Advanced settings</Typography>
+          </Box>
+          <Stack gap={theme.spacing(12)}>
+            <Select
+              id="monitor-interval"
+              label="Check frequency"
+              value={monitor.interval || 3}
+              onChange={(event) => handleChange(event, "interval")}
+              items={frequencies}
+            />
+          </Stack>
+        </ConfigBox>
+        <Stack direction="row" justifyContent="flex-end">
+          <Button
             variant="contained"
             color="primary"
-            onClick={handleCreate}
-            sx={{ px: theme.spacing(12), mt: theme.spacing(12) }}
+            onClick={handleCreateMonitor}
+            disabled={Object.keys(errors).length !== 0 && true}
           >
-            Create
-          </LoadingButton>
+            Create monitor
+          </Button>
         </Stack>
       </Stack>
-    </Stack>
+    </Box>
   );
 };
 

From 734116f38ab1ff3f25386f279893fb83faadcb37 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 5 Sep 2024 14:35:55 -0700
Subject: [PATCH 2/2] Fix breadcrumbs

---
 Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
index 7deeb492d..ecf7a2eb5 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
@@ -151,8 +151,8 @@ const CreatePageSpeed = () => {
     >
       <Breadcrumbs
         list={[
-          { name: "monitors", path: "/monitors" },
-          { name: "create", path: `/monitors/create` },
+          { name: "pagespeed", path: "/pagespeed" },
+          { name: "create", path: `/pagespeed/create` },
         ]}
       />
       <Stack