chore: merge from haodong code

2022-06-24 10:32:04 +08:00
parent e53ebd63a7 59593881b2
commit 69b4e7aac2
42 changed files with 714 additions and 382 deletions
@@ -1,10 +1,17 @@
-import { useState, useEffect, memo } from "react";
+import { useState, useEffect, memo, SyntheticEvent, FC } from "react";
 import { getInitials, getInitialsAvatar } from "../utils";

-const Avatar = ({ url = "", name = "unkonw name", type = "user", ...rest }) => {
+interface Props {
+  url?: string;
+  name?: string;
+  type?: "user" | "channel";
+}
+
+const Avatar: FC<Props> = ({ url = "", name = "unknown name", type = "user", ...rest }) => {
  // console.log("avatar url", url);
  const [src, setSrc] = useState("");
-  const handleError = (err) => {
+
+  const handleError = (err: SyntheticEvent<HTMLImageElement>) => {
    console.log("load avatar error", err);
    const tmp = getInitialsAvatar({
      initials: getInitials(name),
@@ -13,6 +20,7 @@ const Avatar = ({ url = "", name = "unkonw name", type = "user", ...rest }) => {
    });
    setSrc(tmp);
  };
+
  useEffect(() => {
    if (!url) {
      const tmp = getInitialsAvatar({
@@ -26,6 +34,7 @@ const Avatar = ({ url = "", name = "unkonw name", type = "user", ...rest }) => {
    }
  }, [url, name]);
  if (!src) return null;
+
  return <img src={src} onError={handleError} {...rest} />;
 };

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { ChangeEvent, FC, useState } from "react";
 import styled from "styled-components";
 import Avatar from "./Avatar";
 import uploadIcon from "../../assets/icons/upload.image.svg?url";
@@ -61,21 +61,31 @@ const StyledWrapper = styled.div`
  }
 `;

-export default function AvatarUploader({
+interface Props {
+  url?: string;
+  name?: string;
+  type?: "user";
+  disabled?: boolean;
+  uploadImage: (file: File) => Promise<any>;
+}
+
+const AvatarUploader: FC<Props> = ({
  url = "",
  name = "",
  type = "user",
  uploadImage,
  disabled = false
-}) {
+}) => {
  const [uploading, setUploading] = useState(false);
-  const handleUpload = async (evt) => {
+  const handleUpload = async (evt: ChangeEvent<HTMLInputElement>) => {
    if (uploading) return;
-    const [file] = evt.target.files;
+    if (!evt.target.files) return;
+    const [file] = Array.from(evt.target.files);
    setUploading(true);
    await uploadImage(file);
    setUploading(false);
  };
+
  return (
    <StyledWrapper>
      <div className="avatar">
@@ -87,6 +97,7 @@ export default function AvatarUploader({
              multiple={false}
              onChange={handleUpload}
              type="file"
+              // todo: xss
              accept="image/*"
              name="avatar"
              id="avatar"
@@ -97,4 +108,6 @@ export default function AvatarUploader({
      {!disabled && <img src={uploadIcon} alt="icon" className="icon" />}
    </StyledWrapper>
  );
-}
+};
+
+export default AvatarUploader;
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { FC, useState } from "react";
 import styled from "styled-components";
 import { NavLink } from "react-router-dom";
 import ChannelModal from "./ChannelModal";
@@ -67,7 +67,11 @@ const Styled = styled.div`
  }
 `;

-export default function BlankPlaceholder({ type = "chat" }) {
+interface Props {
+  type?: "chat";
+}
+
+const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
  const server = useAppSelector((store) => store.server);
  const [inviteModalVisible, setInviteModalVisible] = useState(false);
  const [createChannelVisible, setCreateChannelVisible] = useState(false);
@@ -83,7 +87,8 @@ export default function BlankPlaceholder({ type = "chat" }) {
  };
  const chatTip =
    type == "chat" ? "Create a Channel to Start a Conversation" : "Send a Direct Message";
-  const chatHanlder = type == "chat" ? toggleChannelModalVisible : toggleContactListVisible;
+  const chatHandler = type == "chat" ? toggleChannelModalVisible : toggleContactListVisible;
+
  return (
    <>
      <Styled>
@@ -99,7 +104,7 @@ export default function BlankPlaceholder({ type = "chat" }) {
            <IconInvite className="icon" />
            <div className="txt">Invite your friends or teammates</div>
          </div>
-          <div className="box" onClick={chatHanlder}>
+          <div className="box" onClick={chatHandler}>
            <IconChat className="icon" />
            <div className="txt">{chatTip}</div>
          </div>
@@ -109,7 +114,7 @@ export default function BlankPlaceholder({ type = "chat" }) {
          </a>
          <NavLink to={"#"} className="box">
            <IconAsk className="icon" />
-            <div className="txt">Got quesions? Visit our help center </div>
+            <div className="txt">Got questions? Visit our help center </div>
          </NavLink>
        </div>
      </Styled>
@@ -120,4 +125,6 @@ export default function BlankPlaceholder({ type = "chat" }) {
      {inviteModalVisible && <InviteModal closeModal={toggleInviteModalVisible} />}
    </>
  );
-}
+};
+
+export default BlankPlaceholder;
@@ -14,13 +14,13 @@ import { useCreateChannelMutation } from "../../../app/services/channel";
 import { useAppSelector } from "../../../app/store";

 export default function ChannelModal({ personal = false, closeModal }) {
-  const { conactsData, loginUid } = useAppSelector((store) => {
-    return { conactsData: store.contacts.byId, loginUid: store.authData.uid };
+  const { contactsData, loginUid } = useAppSelector((store) => {
+    return { contactsData: store.contacts.byId, loginUid: store.authData.uid };
  });
  const navigateTo = useNavigate();
  const [data, setData] = useState({
    name: "",
-    dsecription: "",
+    description: "",
    members: [loginUid],
    is_public: !personal
  });
@@ -71,14 +71,12 @@ export default function ChannelModal({ personal = false, closeModal }) {
    const { members } = data;
    const { uid } = currentTarget.dataset;
    let tmp = members.includes(+uid) ? members.filter((m) => m != uid) : [...members, +uid];
-    console.log(uid, currentTarget);
    setData((prev) => {
      return { ...prev, members: tmp };
    });
-    console.log({ data });
  };
-  console.log("contacts", contacts);
-  const loginUser = conactsData[loginUid];
+
+  const loginUser = contactsData[loginUid];
  if (!loginUser) return null;
  const { name, members, is_public } = data;
  return (
@@ -98,7 +96,6 @@ export default function ChannelModal({ personal = false, closeModal }) {
                {contacts.map((u) => {
                  const { uid } = u;
                  const checked = members.includes(uid);
-                  console.log({ checked });
                  return (
                    <li
                      key={uid}
@@ -1,8 +1,18 @@
+import { FC, ReactElement } from "react";
 import Tippy from "@tippyjs/react";
 import useContactOperation from "../../hook/useContactOperation";
 import ContextMenu from "../ContextMenu";

-export default function ContactContextMenu({ enable = false, uid, cid, visible, hide, children }) {
+interface Props {
+  enable?: boolean;
+  uid: number;
+  cid: number;
+  visible: boolean;
+  hide: () => void;
+  children: ReactElement;
+}
+
+const ContactContextMenu: FC<Props> = ({ enable = false, uid, cid, visible, hide, children }) => {
  const {
    canCall,
    call,
@@ -18,48 +28,48 @@ export default function ContactContextMenu({ enable = false, uid, cid, visible,
    cid
  });
  return (
-    <>
-      <Tippy
-        disabled={!enable}
-        visible={visible}
-        followCursor={"initial"}
-        interactive
-        placement="right-start"
-        popperOptions={{ strategy: "fixed" }}
-        onClickOutside={hide}
-        key={uid}
-        content={
-          <ContextMenu
-            hideMenu={hide}
-            items={[
-              {
-                title: "Message",
-                handler: startChat
-              },
-              canCall && {
-                title: "Call",
-                handler: call
-              },
-              canCopyEmail && {
-                title: "Copy Email",
-                handler: copyEmail
-              },
-              canRemoveFromChannel && {
-                danger: true,
-                title: "Remove From Channel",
-                handler: removeFromChannel
-              },
-              canRemove && {
-                danger: true,
-                title: "Remove From Server",
-                handler: removeUser
-              }
-            ]}
-          />
-        }
-      >
-        {children}
-      </Tippy>
-    </>
+    <Tippy
+      disabled={!enable}
+      visible={visible}
+      followCursor={"initial"}
+      interactive
+      placement="right-start"
+      popperOptions={{ strategy: "fixed" }}
+      onClickOutside={hide}
+      key={uid}
+      content={
+        <ContextMenu
+          hideMenu={hide}
+          items={[
+            {
+              title: "Message",
+              handler: startChat
+            },
+            canCall && {
+              title: "Call",
+              handler: call
+            },
+            canCopyEmail && {
+              title: "Copy Email",
+              handler: copyEmail
+            },
+            canRemoveFromChannel && {
+              danger: true,
+              title: "Remove From Channel",
+              handler: removeFromChannel
+            },
+            canRemove && {
+              danger: true,
+              title: "Remove From Server",
+              handler: removeUser
+            }
+          ]}
+        />
+      }
+    >
+      {children}
+    </Tippy>
  );
-}
+};
+
+export default ContactContextMenu;
@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { useNavigate } from "react-router-dom";
 import Tippy from "@tippyjs/react";
 import IconOwner from "../../../assets/icons/owner.svg";
@@ -8,17 +9,29 @@ import StyledWrapper from "./styled";
 import useContextMenu from "../../hook/useContextMenu";
 import { useAppSelector } from "../../../app/store";

-export default function Contact({
-  cid = null,
+interface Props {
+  cid: number;
+  uid: number;
+  owner?: number;
+  dm?: boolean;
+  interactive?: boolean;
+  popover?: boolean;
+  compact?: boolean;
+  avatarSize?: number;
+  enableContextMenu?: boolean;
+}
+
+const Contact: FC<Props> = ({
+  cid,
+  uid,
  owner = false,
  dm = false,
  interactive = true,
-  uid = "",
  popover = false,
  compact = false,
  avatarSize = 32,
  enableContextMenu = false
-}) {
+}) => {
  const navigate = useNavigate();
  const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
  const curr = useAppSelector((store) => store.contacts.byId[uid]);
@@ -43,10 +56,10 @@ export default function Contact({
        content={<Profile uid={uid} type="card" cid={cid} />}
      >
        <StyledWrapper
-          onContextMenu={enableContextMenu ? handleContextMenuEvent : null}
          size={avatarSize}
-          onDoubleClick={dm ? handleDoubleClick : null}
          className={`${interactive ? "interactive" : ""} ${compact ? "compact" : ""}`}
+          onDoubleClick={dm ? handleDoubleClick : undefined}
+          onContextMenu={enableContextMenu ? handleContextMenuEvent : undefined}
        >
          <div className="avatar">
            <Avatar url={curr.avatar} name={curr.name} alt="avatar" />
@@ -58,4 +71,6 @@ export default function Contact({
      </Tippy>
    </ContextMenu>
  );
-}
+};
+
+export default Contact;
@@ -1,7 +1,7 @@
 import { FC, MouseEvent } from "react";
 import StyledMenu from "./styled/Menu";

-interface Item {
+export interface Item {
  title: string;
  icon: string;
  handler: (e: MouseEvent) => void;
@@ -11,8 +11,7 @@ interface Props {
 }

 const DeleteMessageConfirmModal: FC<Props> = ({ closeModal, mids = [] }) => {
-  // const dispatch = useDispatch();
-  const mid_arr = mids ? (Array.isArray(mids) ? mids : [mids]) : [];
+  const mid_arr: number[] = mids ? (Array.isArray(mids) ? mids : [mids]) : [];
  const [ids] = useState(mid_arr);
  const { deleteMessage, isDeleting } = useDeleteMessage();
  const handleDelete = async () => {
@@ -40,7 +39,7 @@ const DeleteMessageConfirmModal: FC<Props> = ({ closeModal, mids = [] }) => {
          ids.length > 1 ? "these messages" : "this message"
        }?`}
      >
-        {ids.length == 1 && <PreviewMessage mid={ids[0]} />}
+        {ids.length === 1 && <PreviewMessage mid={ids[0]} />}
      </StyledModal>
    </Modal>
  );
@@ -9,7 +9,6 @@ const Styled = styled.div`

 export default function FAQ() {
  const { data: serverVersion } = useGetServerVersionQuery();
-  console.log("build time", serverVersion);
  return (
    <Styled>
      <div className="item">Client Version: {process.env.VERSION}</div>
@@ -1,7 +1,6 @@
-// import React from 'react'
+import { FC, ReactElement } from "react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-import { useSelector } from "react-redux";
 import Styled from "./styled";
 import {
  VideoPreview,
@@ -13,13 +12,20 @@ import {
 } from "./preview";
 import { getFileIcon, formatBytes } from "../../utils";
 import IconDownload from "../../../assets/icons/download.svg";
+import { useAppSelector } from "../../../app/store";

-// todo
+// todo: move to root file
 dayjs.extend(relativeTime);

-const renderPreview = (data) => {
+interface Data {
+  file_type: string;
+  name: string;
+  content: string;
+}
+
+const renderPreview = (data: Data) => {
  const { file_type, name, content } = data;
-  let preview = null;
+  let preview: null | ReactElement = null;

  const checks = {
    image: /^image/gi,
@@ -60,20 +66,31 @@ const renderPreview = (data) => {
  }
  return preview;
 };
-export default function FileBox({
-  preview = false,
+
+interface Props {
+  preview?: boolean;
+  flex: boolean;
+  file_type: string;
+  name: string;
+  size: number;
+  created_at: number;
+  from_uid: number;
+  content: string;
+}
+
+const FileBox: FC<Props> = ({
+  preview,
  flex,
-  file_type = "",
+  file_type,
  name,
  size,
  created_at,
  from_uid,
  content
-}) {
-  const fromUser = useSelector((store) => store.contacts.byId[from_uid]);
+}) => {
+  const fromUser = useAppSelector((store) => store.contacts.byId[from_uid]);
  const icon = getFileIcon(file_type, name);
  if (!content || !fromUser || !name) return null;
-  console.log("file content", content, name, flex);
  const previewContent = renderPreview({ file_type, content, name });
  const withPreview = preview && previewContent;
  return (
@@ -101,4 +118,6 @@ export default function FileBox({
      {withPreview && <div className="preview">{previewContent}</div>}
    </Styled>
  );
-}
+};
+
+export default FileBox;
@@ -1,4 +1,4 @@
-import { ReactEventHandler, useState } from "react";
+import { FC, ReactEventHandler, useState } from "react";
 import styled from "styled-components";

 const Styled = styled.div`
@@ -17,7 +17,11 @@ const Styled = styled.div`
  }
 `;

-export default function Audio({ url = "" }) {
+interface Props {
+  url: string;
+}
+
+const Audio: FC<Props> = ({ url }) => {
  const [err, setErr] = useState(false);

  const handleError: ReactEventHandler<HTMLAudioElement> = (err) => {
@@ -35,4 +39,6 @@ export default function Audio({ url = "" }) {
      )}
    </Styled>
  );
-}
+};
+
+export default Audio;
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, FC } from "react";
 import styled from "styled-components";

 const Styled = styled.div`
@@ -12,7 +12,11 @@ const Styled = styled.div`
  color: #eee;
 `;

-export default function Code({ url = "" }) {
+interface Props {
+  url: string;
+}
+
+const Code: FC<Props> = ({ url }) => {
  const [content, setContent] = useState("");
  useEffect(() => {
    const getContent = async (url: string) => {
@@ -26,4 +30,6 @@ export default function Code({ url = "" }) {
  if (!content) return null;

  return <Styled>{content}</Styled>;
-}
+};
+
+export default Code;
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, FC } from "react";
 import styled from "styled-components";

 const Styled = styled.div`
@@ -11,7 +11,11 @@ const Styled = styled.div`
  word-break: break-all;
 `;

-export default function Doc({ url = "" }) {
+interface Props {
+  url: string;
+}
+
+const Doc: FC<Props> = ({ url }) => {
  const [content, setContent] = useState("");
  useEffect(() => {
    const getContent = async (url: string) => {
@@ -25,4 +29,6 @@ export default function Doc({ url = "" }) {
  if (!content) return null;

  return <Styled>{content}</Styled>;
-}
+};
+
+export default Doc;
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { FC } from "react";
 import styled from "styled-components";

 const Styled = styled.div`
@@ -11,11 +11,18 @@ const Styled = styled.div`
  }
 `;

-export default function Image({ url = "" }) {
+interface Props {
+  url: string;
+  alt?: string;
+}
+
+const Image: FC<Props> = ({ url, alt }) => {
  if (!url) return null;
  return (
    <Styled>
-      <img src={url} />
+      <img src={url} alt={alt} />
    </Styled>
  );
-}
+};
+
+export default Image;
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { FC } from "react";

 const Styled = styled.div`
  padding: 8px;
@@ -10,14 +11,17 @@ const Styled = styled.div`
  }
 `;

-export default function Pdf({ url = "" }) {
+interface Props {
+  url: string;
+}
+
+const Pdf: FC<Props> = ({ url }) => {
  // const [content, setContent] = useState("");
  // const [pageNumber, setPageNumber] = useState(1);
  // const [numPages, setNumPages] = useState(null);
  // const onDocumentLoadSuccess = ({ numPages }) => {
  //   setNumPages(numPages);
  // };
-  if (!url) return null;
  return (
    <Styled>
      <embed src={url} type="application/pdf" />
@@ -26,4 +30,6 @@ export default function Pdf({ url = "" }) {
      </Document> */}
    </Styled>
  );
-}
+};
+
+export default Pdf;
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { FC } from "react";
 import styled from "styled-components";

 const Styled = styled.div`
@@ -10,11 +10,16 @@ const Styled = styled.div`
  }
 `;

-export default function Video({ url = "" }) {
-  if (!url) return null;
+interface Props {
+  url: string;
+}
+
+const Video: FC<Props> = ({ url }) => {
  return (
    <Styled>
      <video controls src={url} />
    </Styled>
  );
-}
+};
+
+export default Video;
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, FC } from "react";
 import styled from "styled-components";
 import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
 import "react-circular-progressbar/dist/styles.css";
@@ -33,17 +33,25 @@ const Styled = styled.div`
  }
 `;

-export default function ImageMessage({
+interface Props {
+  uploading: boolean;
+  progress: number;
+  thumbnail: string;
+  download: string;
+  content: string;
+  properties: { width: number; height: number };
+}
+
+const ImageMessage: FC<Props> = ({
  uploading,
  progress,
  thumbnail,
  download,
  content,
-  properties = {}
-}) {
+  properties
+}) => {
  const [url, setUrl] = useState(thumbnail);
  const { width = 0, height = 0 } = getDefaultSize(properties);
-  console.log("image props", properties, width, height);
  useEffect(() => {
    const newUrl = thumbnail;
    const img = new Image();
@@ -64,10 +72,7 @@ export default function ImageMessage({
            <CircularProgressbar
              value={progress}
              strokeWidth={50}
-              styles={buildStyles({
-                storke: "#000",
-                strokeLinecap: "butt"
-              })}
+              styles={buildStyles({ strokeLinecap: "butt" })}
            />
          </div>
        </div>
@@ -85,4 +90,6 @@ export default function ImageMessage({
      />
    </Styled>
  );
-}
+};
+
+export default ImageMessage;
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, FC } from "react";
 import IconGithub from "../../assets/icons/github.svg";
 import styled from "styled-components";
 import { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config";
@@ -17,6 +17,7 @@ const StyledSocialButton = styled(Button)`
  color: #344054;
  border: 1px solid #d0d5dd;
  background: none !important;
+
  .icon {
    width: 24px;
    height: 24px;
@@ -28,7 +29,7 @@ type Props = {
  type?: "login" | "register";
 };

-export default function GithubLoginButton({ type = "login", client_id }: Props) {
+const GithubLoginButton: FC<Props> = ({ type = "login", client_id }) => {
  //拿本地存的magic token
  const magic_token = localStorage.getItem(KEY_LOCAL_MAGIC_TOKEN);
  const [login, { isLoading, isSuccess, error }] = useLoginMutation();
@@ -66,7 +67,7 @@ export default function GithubLoginButton({ type = "login", client_id }: Props)
    }
  }, [error]);
  const handleGithubLogin = () => {
-    location.href = `http://github.com/login/oauth/authorize?client_id=${client_id}`;
+    location.href = `https://github.com/login/oauth/authorize?client_id=${client_id}`;
    // console.log("github login");
  };
  // console.log("google login ", loaded);
@@ -76,4 +77,5 @@ export default function GithubLoginButton({ type = "login", client_id }: Props)
      {` ${type === "login" ? "Sign in" : "Sign up"} with Github`}
    </StyledSocialButton>
  );
-}
+};
+export default GithubLoginButton;
@@ -1,16 +1,16 @@
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, FC } from "react";
 import styled, { keyframes } from "styled-components";
 import { useOutsideClick, useKey } from "rooks";
 import { Ring } from "@uiball/loaders";
 import Modal from "./Modal";

 const AniFadeIn = keyframes`
-from{
-background: transparent;
-}
-to{
-  background: rgba(1, 1, 1, 0.9);
-}
+  from {
+    background: transparent;
+  }
+  to {
+    background: rgba(1, 1, 1, 0.9);
+  }
 `;

 const StyledWrapper = styled.div`
@@ -23,6 +23,7 @@ const StyledWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
+
  .box {
    position: relative;
    transition: all 0.2s ease;
@@ -30,14 +31,17 @@ const StyledWrapper = styled.div`
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
+
    > .loading {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translateX(-50%);
    }
+
    > .image {
      overflow: auto;
+
      img {
        max-width: 70vw;
        max-height: 80vh;
@@ -46,13 +50,16 @@ const StyledWrapper = styled.div`
        object-fit: contain; */
      }
    }
+
    &.loading .image img {
      filter: blur(2px);
    }
+
    .origin {
      font-weight: bold;
      font-size: 14px;
      color: #aaa;
+
      &:hover {
        text-decoration: underline;
        color: #fff;
@@ -61,11 +68,26 @@ const StyledWrapper = styled.div`
  }
 `;

-export default function ImagePreviewModal({ download = true, data, closeModal }) {
+export interface PreviewImageData {
+  originUrl: string;
+  thumbnail: string;
+  downloadLink: string;
+  name: string;
+  type: string;
+}
+
+interface Props {
+  download?: boolean;
+  data?: PreviewImageData;
+  closeModal: () => void;
+}
+
+const ImagePreviewModal: FC<Props> = ({ download = true, data, closeModal }) => {
  const [url, setUrl] = useState(data?.thumbnail);
  const [loading, setLoading] = useState(true);
-  const wrapperRef = useRef();
+  const wrapperRef = useRef<HTMLDivElement>(null);
  useOutsideClick(wrapperRef, closeModal);
+
  useKey(
    "Escape",
    () => {
@@ -74,6 +96,7 @@ export default function ImagePreviewModal({ download = true, data, closeModal })
    },
    { eventTypes: ["keyup"] }
  );
+
  useEffect(() => {
    if (data) {
      const { originUrl } = data;
@@ -126,4 +149,6 @@ export default function ImagePreviewModal({ download = true, data, closeModal })
      </StyledWrapper>
    </Modal>
  );
-}
+};
+
+export default ImagePreviewModal;
@@ -1,16 +1,16 @@
-// import { useState, useEffect } from "react";
+import { FC } from "react";
 import styled, { keyframes } from "styled-components";
 import { Ring } from "@uiball/loaders";
 import Button from "./styled/Button";
 import useLogout from "../hook/useLogout";

 const DelayVisible = keyframes`
-from{
-opacity: 0;
-}
-to{
-opacity: 1;
-}
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 `;

 const StyledWrapper = styled.div`
@@ -21,17 +21,15 @@ const StyledWrapper = styled.div`
  gap: 15px;
  align-items: center;
  justify-content: center;
+
  &.fullscreen {
    width: 100vw;
    height: 100vh;
  }
-  .loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+
  .reload {
    opacity: 0;
+
    &.visible {
      animation: ${DelayVisible} 1s forwards;
      animation-delay: 30s;
@@ -39,20 +37,26 @@ const StyledWrapper = styled.div`
  }
 `;

-export default function Loading({ reload = false, fullscreen = false }) {
+interface Props {
+  reload?: boolean;
+  fullscreen?: boolean;
+}
+
+const Loading: FC<Props> = ({ reload = false, fullscreen = false }) => {
  const { clearLocalData } = useLogout();
  const handleReload = () => {
    clearLocalData();
-    // todo: only firefox has argument
-    location.reload(true);
+    location.reload();
  };

  return (
    <StyledWrapper className={fullscreen ? "fullscreen" : ""}>
-      <Ring className="loading" size={40} lineWeight={5} speed={2} color="black" />
+      <Ring size={40} lineWeight={5} speed={2} color="black" />
      <Button className={`reload danger ${reload ? "visible" : ""}`} onClick={handleReload}>
        Reload
      </Button>
    </StyledWrapper>
  );
-}
+};
+
+export default Loading;
@@ -1,11 +1,19 @@
-import { useEffect, useState } from "react";
+import { FC, ReactNode, useEffect, useState } from "react";
 import { createPortal } from "react-dom";

-export default function Modal({ id = "root-modal", mask = true, children }) {
-  const [wrapper, setWrapper] = useState(null);
-  // let eleRef = useRef(null);
+interface Props {
+  id?: string;
+  mask?: boolean;
+  children?: ReactNode;
+}
+
+// todo: check memory leak
+const Modal: FC<Props> = ({ id = "root-modal", mask = true, children }) => {
+  const [wrapper, setWrapper] = useState<HTMLDivElement | null>(null);
+
  useEffect(() => {
    const modalRoot = document.getElementById(id);
+    if (!modalRoot) return;
    if (mask) {
      modalRoot.classList.add("mask");
    }
@@ -17,7 +25,9 @@ export default function Modal({ id = "root-modal", mask = true, children }) {
      modalRoot.removeChild(wrapper);
    };
  }, [id, mask]);
+
  if (!wrapper) return null;
-  console.log("create portal");
  return createPortal(children, wrapper);
-}
+};
+
+export default Modal;
@@ -1,3 +1,4 @@
+import { FC, ReactElement } from "react";
 import EmojiThumbUp from "../../assets/icons/emoji.thumb.up.svg";
 import EmojiThumbDown from "../../assets/icons/emoji.thumb.down.svg";
 import EmojiSmile from "../../assets/icons/emoji.smile.svg";
@@ -7,7 +8,18 @@ import EmojiHeart from "../../assets/icons/emoji.heart.svg";
 import EmojiRocket from "../../assets/icons/emoji.rocket.svg";
 import EmojiLook from "../../assets/icons/emoji.look.svg";

-const Emojis = {
+interface Emojis {
+  "👍": ReactElement;
+  "👎": ReactElement;
+  "😄": ReactElement;
+  "👀": ReactElement;
+  "🚀": ReactElement;
+  "❤️": ReactElement;
+  "🙁": ReactElement;
+  "🎉": ReactElement;
+}
+
+const emojis: Emojis = {
  "👍": <EmojiThumbUp className="emoji" />,
  "👎": <EmojiThumbDown className="emoji" />,
  "😄": <EmojiSmile className="emoji" />,
@@ -18,8 +30,13 @@ const Emojis = {
  "🎉": <EmojiCelebrate className="emoji" />
 };

-export default function ReactionItem({ native = "" }) {
-  if (!native || !Emojis[native]) return null;
-
-  return Emojis[native];
+interface Props {
+  native?: keyof Emojis;
 }
+
+const ReactionItem: FC<Props> = ({ native }) => {
+  if (!native) return null;
+  return emojis[native] ?? null;
+};
+
+export default ReactionItem;
@@ -14,7 +14,7 @@ const StyledWrapper = styled.div`
  background: #fff;
  /* gap: 20px; */
  border: 1px solid #e5e7eb;
-  box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+  box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
  border-radius: 25px;
  .txt {
    padding: 8px;
@@ -37,7 +37,7 @@ const StyledWrapper = styled.div`
      background: #1fe1f9;
      border: 1px solid #1fe1f9;
      box-sizing: border-box;
-      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+      box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
      border-radius: 25px;
      &.reset {
        background: none;
@@ -34,11 +34,10 @@ const StyledWrapper = styled.div`
 `;

 export default function Search() {
-  console.log("searching");
  return (
    <StyledWrapper>
      <div className="search">
-        <img src={searchIcon} />
+        <img src={searchIcon} alt="search icon" />
        <input placeholder="Search..." className="input" />
      </div>
      <Tooltip tip="More" placement="bottom">
@@ -68,7 +68,7 @@ export default function Server() {
      <NavLink to={`/setting?f=${pathname}`}>
        <div className="server">
          <div className="logo">
-            <img src={logo} />
+            <img alt="logo" src={logo} />
          </div>
          <div className="info">
            <h3 className="name" title={description}>
@@ -1,10 +1,11 @@
+import { FC, ReactElement } from "react";
 import styled, { createGlobalStyle } from "styled-components";
 import Tippy from "@tippyjs/react";
-import { roundArrow } from "tippy.js";
+import { Placement, roundArrow } from "tippy.js";
 import "tippy.js/dist/svg-arrow.css";
 import { updateUserGuide } from "../../../app/slices/ui";
 import steps from "./steps";
-import { useAppDispatch, useAppSelector } from "../../../app/store";
+import { useAppDispatch } from "../../../app/store";

 const Styled = styled.div`
  display: flex;
@@ -57,15 +58,21 @@ const OverrideTippyArrowColor = createGlobalStyle`
 }
 `;

-export default function UserGuide({ step = 1, placement = "right-start", delay = null, children }) {
+interface Props {
+  step?: number;
+  placement: Placement;
+  delay?: number | [number | null, number | null];
+  children: ReactElement;
+}
+
+const UserGuide: FC<Props> = ({ step = 1, placement = "right-start", delay, children }) => {
  const dispatch = useAppDispatch();
-  const { visible, step: reduxStep } = useAppSelector((store) => store.ui.userGuide);
  const currStep = steps[step - 1];
  const isLastStep = steps.length == step;
  //   if (!visible) return children;
  if (!currStep) return null;
  const { title, description } = currStep;
-  const defaultDuration = [300, 250];
+  const defaultDuration: [number, number] = [300, 250];
  const handleSkip = () => {
    // to do
    dispatch(updateUserGuide({ visible: false }));
@@ -104,4 +111,6 @@ export default function UserGuide({ step = 1, placement = "right-start", delay =
      </Tippy>
    </>
  );
-}
+};
+
+export default UserGuide;
@@ -1,4 +1,4 @@
-import { FC, ReactElement } from "react";
+import { FC, ReactNode } from "react";
 import styled from "styled-components";

 const Styled = styled.div`
@@ -43,18 +43,12 @@ const Styled = styled.div`
 interface Props {
  title?: string;
  description?: string;
-  buttons: ReactElement[] | ReactElement;
-  children?: ReactElement;
+  buttons?: ReactNode;
+  children?: ReactNode;
  className?: string;
 }

-const StyledModal: FC<Props> = ({
-  title = "",
-  description = "",
-  buttons = null,
-  children,
-  ...props
-}) => {
+const StyledModal: FC<Props> = ({ title = "", description = "", buttons, children, ...props }) => {
  return (
    <Styled {...props}>
      {title && <h3 className="title">{title}</h3>}
@@ -1,9 +1,8 @@
 import { useRef, useEffect } from "react";
 // import { useDebounce } from "rooks";

-function useChatScroll(deps = []) {
-  // todo: ref should be initialized to null
-  const ref = useRef();
+function useChatScroll<T extends HTMLElement>() {
+  const ref = useRef<T>(null);
  // useEffect(() => {
  //   console.log("chat scroll", ref);
  //   if (ref.current) {
@@ -1,14 +1,19 @@
-import { useState } from "react";
+import { useState, MouseEvent, ReactElement } from "react";
 import { hideAll } from "tippy.js";
 import Tippy from "@tippyjs/react";
-import Menu from "../component/ContextMenu";
+import Menu, { Item } from "../component/ContextMenu";
+
+interface ContextMenuProps {
+  key: string | number;
+  children: ReactElement;
+  items: Item[];
+}

 export default function useContextMenu(placement = "right-start") {
  const [visible, setVisible] = useState(false);
  // for tippy.js
  const [offset, setOffset] = useState({ x: 0, y: 0 });
-  const handleContextMenuEvent = (evt) => {
-    // console.log("context menu event", evt, evt.currentTarget);
+  const handleContextMenuEvent = (evt: MouseEvent) => {
    hideAll();
    evt.preventDefault();
    const { currentTarget, clientX, clientY } = evt;
@@ -22,14 +27,14 @@ export default function useContextMenu(placement = "right-start") {
      y = top - clientY;
    }
    setOffset({ x, y });
-
    setVisible(true);
-    console.log("offset", x, y);
  };
+
  const hideContextMenu = () => {
    setVisible(false);
  };
-  const ContextMenu = ({ key, items, children }) => {
+
+  const ContextMenu = ({ key, items, children }: ContextMenuProps) => {
    return (
      <Tippy
        visible={visible}
@@ -45,6 +50,7 @@ export default function useContextMenu(placement = "right-start") {
      </Tippy>
    );
  };
+
  return {
    ContextMenu,
    offset,
@@ -1,14 +1,20 @@
-// import second from 'first'
-import { useDispatch } from "react-redux";
 import { removeMessage } from "../../app/slices/message";
 import { removeChannelMsg } from "../../app/slices/message.channel";
 import { removeUserMsg } from "../../app/slices/message.user";
-export default function useRemoveLocalMessage({ context = "user", id = 0 }) {
-  const dispatch = useDispatch();
+import { useAppDispatch } from "../../app/store";
+
+// todo: check usage
+interface Props {
+  context: "user" | "channel";
+  id: number;
+}
+
+export default function useRemoveLocalMessage({ context = "user", id = 0 }: Props) {
+  const dispatch = useAppDispatch();
  const removeContextMessage = context == "channel" ? removeChannelMsg : removeUserMsg;
-  const removeLocalMessage = (mid) => {
+
+  return (mid: number) => {
    dispatch(removeContextMessage({ id, mid }));
    dispatch(removeMessage(mid));
  };
-  return removeLocalMessage;
 }
@@ -1,14 +1,34 @@
-// import second from 'first'
+import toast from "react-hot-toast";
 import { removeReplyingMessage, addReplyingMessage } from "../../app/slices/message";
 import { useSendChannelMsgMutation } from "../../app/services/channel";
 import { useSendMsgMutation } from "../../app/services/contact";
 import { useReplyMessageMutation } from "../../app/services/message";
-import { useDispatch, useSelector } from "react-redux";
-import toast from "react-hot-toast";
-export default function useSendMessage(props) {
+import { useAppDispatch, useAppSelector } from "../../app/store";
+
+interface Props {
+  context: "user" | "channel";
+  from: number;
+  to: number;
+}
+
+interface SendMessagesDTO {
+  type: "text";
+  content: string;
+  users: number[];
+  channels: number[];
+}
+
+interface SendMessageDTO {
+  type: "text";
+  content: string;
+  properties: object;
+  reply_mid?: number;
+}
+
+export default function useSendMessage(props?: Props) {
  const { context = "user", from = null, to = null } = props || {};
-  const dispatch = useDispatch();
-  const stageFiles = useSelector((store) => store.ui.uploadFiles[`${context}_${to}`] || []);
+  const dispatch = useAppDispatch();
+  const stageFiles = useAppSelector((store) => store.ui.uploadFiles[`${context}_${to}`] || []);
  const [replyMessage, { isError: replyErr, isLoading: replying, isSuccess: replySuccess }] =
    useReplyMessageMutation();
  const [
@@ -18,7 +38,12 @@ export default function useSendMessage(props) {
  const [sendUserMsg, { isLoading: userSending, isSuccess: userSuccess, isError: userError }] =
    useSendMsgMutation();
  const sendFn = context == "user" ? sendUserMsg : sendChannelMsg;
-  const sendMessages = async ({ type = "text", content, users = [], channels = [] }) => {
+  const sendMessages = async ({
+    type = "text",
+    content,
+    users = [],
+    channels = []
+  }: SendMessagesDTO) => {
    if (users.length) {
      for await (const uid of users) {
        await sendUserMsg({
@@ -42,9 +67,9 @@ export default function useSendMessage(props) {
    type = "text",
    content,
    properties = {},
-    reply_mid = null,
+    reply_mid,
    ...rest
-  }) => {
+  }: SendMessageDTO) => {
    if (reply_mid) {
      removeReplying();
      await replyMessage({
@@ -66,7 +91,7 @@ export default function useSendMessage(props) {
      });
    }
  };
-  const setReplying = (mid) => {
+  const setReplying = (mid: number) => {
    if (stageFiles.length !== 0) {
      toast.error("Only text is supported when replying a message");
      return;