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,70 @@
+import { FC } from "react";
+import { useEffect } from "react";
+import styled from "styled-components";
+import toast from "react-hot-toast";
+import usePinMessage from "../../hook/usePinMessage";
+import StyledModal from "../styled/Modal";
+import Button from "../styled/Button";
+import Modal from "../Modal";
+import PreviewMessage from "./PreviewMessage";
+
+const StyledPinModal = styled(StyledModal)`
+  min-width: 406px;
+  .title,
+  .desc {
+    text-align: left;
+  }
+  .preview {
+    border: 1px solid #f2f4f7;
+    max-height: 256px;
+    overflow: auto;
+    background: none;
+    overflow-x: hidden;
+  }
+`;
+
+interface Props {
+  closeModal: () => void;
+  mid: number;
+  gid: number;
+}
+
+const PinMessageModal: FC<Props> = ({ closeModal, mid = 0, gid = 0 }) => {
+  const { channel, pinMessage, isPining, isSuccess } = usePinMessage(gid);
+  const handlePin = () => {
+    pinMessage(mid);
+  };
+
+  useEffect(() => {
+    if (isSuccess) {
+      closeModal();
+      toast.success("Pin Message Successfully");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSuccess]);
+
+  if (!mid) return null;
+  return (
+    <Modal>
+      <StyledPinModal
+        // className="animate__animated animate__fadeInDown animate__faster"
+        buttons={
+          <>
+            <Button onClick={closeModal} className="cancel">
+              Cancel
+            </Button>
+            <Button disabled={isPining} onClick={handlePin} className="main">
+              {isPining ? "Pining" : `Pin It`}
+            </Button>
+          </>
+        }
+        title="Pin It"
+        description={`Do you want to pin this message to #${channel?.name}`}
+      >
+        <PreviewMessage mid={mid} />
+      </StyledPinModal>
+    </Modal>
+  );
+};
+
+export default PinMessageModal;