refactor: add typescript support to project

2022-06-21 15:08:35 +08:00
parent 88ec2b742a
commit bd799ebea8
259 changed files with 1042 additions and 458 deletions
@@ -0,0 +1,126 @@
+import { ChangeEvent, useEffect, useState, FC } from "react";
+import styled from "styled-components";
+import toast from "react-hot-toast";
+import Input from "../../common/component/styled/Input";
+import { useUpdatePasswordMutation, useGetCredentialsQuery } from "../../app/services/auth";
+import StyledModal from "../../common/component/styled/Modal";
+import Button from "../../common/component/styled/Button";
+import Modal from "../../common/component/Modal";
+
+const StyledEdit = styled(StyledModal)`
+  .input {
+    margin: 16px 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    label {
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 20px;
+      color: #6b7280;
+    }
+  }
+`;
+
+interface Props {
+  closeModal: () => void;
+}
+
+const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
+  const { data } = useGetCredentialsQuery();
+  const [input, setInput] = useState({
+    current: "",
+    newPassword: "",
+    confirmPassword: ""
+  });
+  // const dispatch = useDispatch();
+  const [updatePassword, { isLoading, isSuccess }] = useUpdatePasswordMutation();
+  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
+    const { type } = evt.target.dataset;
+    setInput((prev) => {
+      return { ...prev, [type]: evt.target.value };
+    });
+  };
+  const handleUpdate = () => {
+    console.log("pwd", input);
+    const { current, newPassword } = input;
+    updatePassword({ old_password: current, new_password: newPassword });
+    // update({ [valueKey]: input });
+  };
+  const handleCompare = () => {
+    const { newPassword, confirmPassword } = input;
+    if (newPassword !== confirmPassword) {
+      toast.error("Not same with new password");
+    }
+  };
+  useEffect(() => {
+    if (isSuccess) {
+      // todo
+      toast.success("update password successfully");
+      closeModal();
+    }
+  }, [isSuccess]);
+  const { current, newPassword, confirmPassword } = input;
+  const disableBtn =
+    (data?.password && !current) ||
+    !newPassword ||
+    !confirmPassword ||
+    newPassword !== confirmPassword ||
+    isLoading;
+  return (
+    <Modal id="modal-modal">
+      <StyledEdit
+        title={"Change your password"}
+        description={"Enter current password and new password."}
+        buttons={
+          <>
+            <Button className="cancel" onClick={closeModal}>
+              Cancel
+            </Button>
+            <Button disabled={disableBtn} onClick={handleUpdate}>
+              {isLoading ? "Updating" : `Update`}
+            </Button>
+          </>
+        }
+      >
+        {data?.password && (
+          <div className="input">
+            <label htmlFor={"current"}>Current Password</label>
+            <Input
+              type="password"
+              id="current"
+              name="current"
+              value={current}
+              data-type="current"
+              onChange={handleChange}
+            ></Input>
+          </div>
+        )}
+        <div className="input">
+          <label htmlFor={"newPassword"}>New Password</label>
+          <Input
+            type="password"
+            name={"newPassword"}
+            value={newPassword}
+            data-type="newPassword"
+            onChange={handleChange}
+          ></Input>
+        </div>
+        <div className="input">
+          <label htmlFor={"confirmPassword"}>Confirm New Password</label>
+          <Input
+            onBlur={handleCompare}
+            type="password"
+            name={"confirmPassword"}
+            value={confirmPassword}
+            data-type="confirmPassword"
+            onChange={handleChange}
+          ></Input>
+        </div>
+      </StyledEdit>
+    </Modal>
+  );
+};
+
+export default ProfileBasicEditModal;