clean up the system component

src/Components/Private/Edit/EditSystem.js

@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+
+import { useForm } from "react-hook-form";
+import * as BS from "react-bootstrap";
+import moment from "moment";
+import "moment-timezone";
+
+import API_URL from "../../../Constants/constants.js";
+
+const EditSystem = ({
+  name,
+  tag,
+  timezone,
+  avatar,
+  editDesc,
+  setEditMode,
+  setErrorAlert,
+  setUser,
+  user,
+}) => {
+  const [invalidTimezone, setInvalidTimezone] = useState(false);
+
+  const { register: registerEdit, handleSubmit: handleSubmitEdit } = useForm();
+
+  const submitEdit = (data) => {
+    if (data.tz) {
+      if (!moment.tz.zone(data.tz)) {
+        setInvalidTimezone(true);
+        return;
+      }
+    }
+    fetch(`${API_URL}s`, {
+      method: "PATCH",
+      body: JSON.stringify(data),
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: JSON.stringify(localStorage.getItem("token")).slice(
+          1,
+          -1
+        ),
+      },
+    })
+      .then((res) => res.json())
+      .then(() => {
+        setUser((prevState) => {
+          return { ...prevState, ...data };
+        });
+        localStorage.setItem("user", JSON.stringify(user));
+        setEditMode(false);
+      })
+      .catch((error) => {
+        console.error(error);
+        setErrorAlert(true);
+      });
+  };
+
+  return (
+    <BS.Form onSubmit={handleSubmitEdit(submitEdit)}>
+      <BS.Form.Text className="mb-4">
+        <b>Note:</b> if you refresh the page, the old data might show up again,
+        this is due to the bot caching data.
+        <br />
+        Try editing a member to clear the cache, or wait a few minutes before
+        refreshing.
+      </BS.Form.Text>
+      <BS.Form.Row>
+        <BS.Col className="mb-lg-2" xs={12} lg={3}>
+          <BS.Form.Label>Name:</BS.Form.Label>
+          <BS.Form.Control
+            name="name"
+            {...registerEdit("name")}
+            defaultValue={name}
+          />
+        </BS.Col>
+        <BS.Col className="mb-lg-2" xs={12} lg={3}>
+          <BS.Form.Label>Tag:</BS.Form.Label>
+          <BS.Form.Control
+            name="tag"
+            {...registerEdit("tag")}
+            defaultValue={tag}
+          />
+        </BS.Col>
+        <BS.Col className="mb-lg-2" xs={12} lg={3}>
+          <BS.Form.Label>Timezone:</BS.Form.Label>
+          <BS.Form.Control
+            name="tz"
+            {...registerEdit("tz")}
+            defaultValue={timezone}
+            required
+          />
+          {invalidTimezone ? (
+            <BS.Form.Text>
+              Please enter a valid
+              <a
+                href="https://xske.github.io/tz/"
+                rel="noreferrer"
+                target="_blank"
+              >
+                timezone
+              </a>
+            </BS.Form.Text>
+          ) : (
+            ""
+          )}
+        </BS.Col>
+        <BS.Col className="mb-lg-2" xs={12} lg={3}>
+          <BS.Form.Label>Avatar url:</BS.Form.Label>
+          <BS.Form.Control
+            name="avatar_url"
+            {...registerEdit("avatar_url")}
+            defaultValue={avatar}
+          />
+        </BS.Col>
+      </BS.Form.Row>
+      <BS.Form.Group className="mt-3">
+        <BS.Form.Label>Description:</BS.Form.Label>
+        <BS.Form.Control
+          maxLength="1000"
+          as="textarea"
+          name="description"
+          {...registerEdit("description")}
+          defaultValue={editDesc}
+        />
+      </BS.Form.Group>
+      <BS.Button variant="light" onClick={() => setEditMode(false)}>
+        Cancel
+      </BS.Button>{" "}
+      <BS.Button variant="primary" type="submit">
+        Submit
+      </BS.Button>
+    </BS.Form>
+  );
+};
+
+export default EditSystem;