feat: lots updates

src/common/component/ChannelModal/index.js

@@ -3,6 +3,7 @@ import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import Modal from "../Modal";
+import Button from "../StyledButton";
 import ChannelIcon from "../ChannelIcon";
 import Contact from "../Contact";
 import StyledWrapper from "./styled";
@@ -151,16 +152,16 @@ export default function ChannelModal({ personal = false, closeModal }) {
             </div>
           }
           <div className="btns">
-            <button onClick={closeModal} className="btn normal cancel">
+            <Button onClick={closeModal} className="normal cancel">
               Cancel
-            </button>
-            <button
+            </Button>
+            <Button
               disabled={isLoading}
               onClick={handleCreate}
-              className="btn normal create"
+              className="normal main"
             >
               Create
-            </button>
+            </Button>
           </div>
         </div>
       </StyledWrapper>

src/common/component/ChannelModal/styled.js

@@ -128,21 +128,6 @@ const StyledWrapper = styled.div`
       align-items: center;
       justify-content: flex-end;
       gap: 16px;
-      .btn {
-        cursor: pointer;
-        padding: 8px 16px;
-        background: none;
-        border: 1px solid #e5e7eb;
-        box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
-        border-radius: 4px;
-        font-weight: 500;
-        color: #374151;
-        &.create {
-          border: none;
-          background: #1fe1f9;
-          color: #fff;
-        }
-      }
     }
     .normal {
       font-size: 14px;

src/common/component/ChannelSetting/DeleteConfirmModal.js

@@ -0,0 +1,73 @@
+// import React from "react";
+import { useEffect } from "react";
+import styled from "styled-components";
+import toast from "react-hot-toast";
+import { useNavigate, useMatch } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { toggleChannelSetting } from "../../../app/slices/ui";
+import { deleteChannel } from "../../../app/slices/channels";
+import Modal from "../Modal";
+// import BASE_URL from "../../app/config";
+import { useLazyRemoveChannelQuery } from "../../../app/services/channel";
+import Button from "../StyledButton";
+const StyledConfirm = styled.div`
+  padding: 32px;
+  filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
+  border-radius: 8px;
+  background-color: #fff;
+  .title {
+    font-weight: 600;
+    font-size: 20px;
+    color: #374151;
+    margin-bottom: 16px;
+  }
+  .desc {
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+    color: #6b7280;
+    margin-bottom: 64px;
+  }
+  .btns {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    gap: 16px;
+    align-items: center;
+  }
+`;
+
+export default function DeleteConfirmModal({ id, closeModal }) {
+  const navigateTo = useNavigate();
+  const dispatch = useDispatch();
+  const pathMatched = useMatch(`/chat/channel/${id}`);
+  const [removeChannel, { isLoading, isSuccess }] = useLazyRemoveChannelQuery();
+  const handleDelete = () => {
+    removeChannel(id);
+  };
+  useEffect(() => {
+    if (isSuccess) {
+      toast.success("delete channel successfully!");
+      dispatch(deleteChannel(id));
+      dispatch(toggleChannelSetting());
+      if (pathMatched) {
+        navigateTo("/chat");
+      }
+    }
+  }, [isSuccess, id, pathMatched]);
+  if (!id) return null;
+  return (
+    <Modal id="modal-modal">
+      <StyledConfirm className="animate__animated animate__fadeInDown animate__faster">
+        <h3 className="title">Delete Channel</h3>
+        <p className="desc">Are you sure want to delete this channel?</p>
+        <div className="btns">
+          <Button onClick={closeModal}>Cancel</Button>
+          <Button onClick={handleDelete} className="danger">
+            {isLoading ? "Deleting" : `Delete`}
+          </Button>
+        </div>
+      </StyledConfirm>
+    </Modal>
+  );
+}

src/common/component/ChannelSetting/index.js

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { toggleChannelSetting } from "../../../app/slices/ui";
+import StyledSettingContainer from "../StyledSettingContainer";
+import DeleteConfirmModal from "./DeleteConfirmModal";
+import navs from "./navs";
+export default function ChannelSetting({ id = 0 }) {
+  const [deleteConfirm, setDeleteConfirm] = useState(false);
+  const dispatch = useDispatch();
+  const close = () => {
+    dispatch(toggleChannelSetting());
+  };
+  const toggleDeleteConfrim = () => {
+    setDeleteConfirm((prev) => !prev);
+  };
+  if (!id) return null;
+  return (
+    <>
+      <StyledSettingContainer
+        closeModal={close}
+        title="Channel Setting"
+        navs={navs}
+        dangers={[
+          {
+            title: "Delete Channel",
+            handler: toggleDeleteConfrim,
+          },
+        ]}
+      >
+        right block
+      </StyledSettingContainer>
+      {deleteConfirm && (
+        <DeleteConfirmModal closeModal={toggleDeleteConfrim} id={id} />
+      )}
+    </>
+  );
+}

src/common/component/ChannelSetting/navs.js

@@ -0,0 +1,25 @@
+const navs = [
+  {
+    title: "General",
+    items: [
+      {
+        name: "overview",
+        title: "Overview",
+      },
+      {
+        name: "permissions",
+        title: "Permissions",
+      },
+      {
+        name: "invites",
+        title: "Invites",
+      },
+      {
+        name: "integrations",
+        title: "Integrations",
+      },
+    ],
+  },
+];
+
+export default navs;

src/common/component/Contact.js

@@ -14,6 +14,9 @@ const StyledWrapper = styled.div`
   padding: 8px;
   border-radius: 4px;
   user-select: none;
+  &.compact {
+    padding: 0;
+  }
   &.interactive {
     &:hover,
     &.active {
@@ -60,12 +63,17 @@ export default function Contact({
   interactive = true,
   uid = "",
   popover = false,
+  compact = false,
 }) {
   const contacts = useSelector((store) => store.contacts);
   if (!contacts) return null;
   const currUser = contacts.find((c) => c.uid == uid);
   return (
-    <StyledWrapper className={`${interactive ? "interactive" : ""}`}>
+    <StyledWrapper
+      className={`${interactive ? "interactive" : ""} ${
+        compact ? "compact" : ""
+      }`}
+    >
       <Tippy
         inertia={true}
         animation="scale"
@@ -82,7 +90,7 @@ export default function Contact({
           ></div>
         </div>
       </Tippy>
-      <span className="name">{currUser?.name}</span>
+      {!compact && <span className="name">{currUser?.name}</span>}
     </StyledWrapper>
   );
 }

src/common/component/ContextMenu.js

@@ -0,0 +1,66 @@
+import { useRef } from "react";
+import styled from "styled-components";
+import { useOutsideClick } from "rooks";
+const StyledWrapper = styled.ul`
+  z-index: 999;
+  position: fixed;
+  left: ${({ x }) => `${x}px`};
+  top: ${({ y }) => `${y}px`};
+  display: flex;
+  flex-direction: column;
+  padding: 4px 12px;
+  background-color: #fff;
+  box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1),
+    0px 10px 10px rgba(31, 41, 55, 0.04);
+  border-radius: 6px;
+  .item {
+    padding: 8px 0;
+    /* margin: 0 12px; */
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    color: #616161;
+    &.underline {
+      border-bottom: 1px solid #e5e5e5;
+    }
+    &.danger {
+      color: #a11043;
+    }
+  }
+`;
+export default function ContextMenu({
+  posX = 0,
+  posY = 0,
+  items = [],
+  hideMenu,
+}) {
+  const wrapperRef = useRef(null);
+  useOutsideClick(wrapperRef, hideMenu);
+  return (
+    <StyledWrapper ref={wrapperRef} x={posX} y={posY}>
+      {items.map(
+        ({
+          title,
+          handler = (evt) => {
+            evt.preventDefault();
+            hideMenu();
+          },
+          underline = false,
+          danger = false,
+        }) => {
+          return (
+            <li
+              className={`item ${underline ? "underline" : ""} ${
+                danger ? "danger" : ""
+              }`}
+              key={title}
+              onClick={handler}
+            >
+              {title}
+            </li>
+          );
+        }
+      )}
+    </StyledWrapper>
+  );
+}

src/common/component/CurrentUser.js

@@ -1,11 +1,6 @@
-import { useEffect } from "react";
+// import { useEffect } from "react";
 import styled from "styled-components";
-import { useSelector, useDispatch } from "react-redux";
-import { useNavigate } from "react-router-dom";
-
-import { clearAuthData } from "../../app/slices/auth.data";
-// import BASE_URL from "../../app/config";
-import { useLazyLogoutQuery } from "../../app/services/auth";
+import { useSelector } from "react-redux";
 import Avatar from "./Avatar";
 const StyledWrapper = styled.div`
   background-color: #e5e5e5;
@@ -62,32 +57,14 @@ const StyledWrapper = styled.div`
   }
 `;
 export default function CurrentUser({ expand = true }) {
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-  const [logout, { isSuccess }] = useLazyLogoutQuery();
   const { user } = useSelector((store) => store.authData);
-  const handleLogout = () => {
-    logout();
-  };
-  useEffect(() => {
-    if (isSuccess) {
-      dispatch(clearAuthData());
-      navigate("/login");
-    }
-  }, [isSuccess]);
 
   if (!user) return null;
   const { uid, name, avatar } = user;
   return (
     <StyledWrapper>
       <div className="profile">
-        <Avatar
-          onDoubleClick={handleLogout}
-          url={avatar}
-          name={name}
-          alt="user avatar"
-          className="avatar"
-        />
+        <Avatar url={avatar} name={name} alt="user avatar" className="avatar" />
         <div className="info">
           <span className="name">{name}</span>
           <span className="id">#{uid}</span>

src/common/component/Modal.js

@@ -1,19 +1,20 @@
-import { useEffect } from 'react';
-import { createPortal } from 'react-dom';
-const modalRoot = document.getElementById('root-modal');
-const wrapper = document.createElement('div');
-wrapper.classList.add('wrapper');
-export default function Modal({ children }) {
-    // let eleRef = useRef(null);
-    useEffect(() => {
-        // const wrapper = document.createElement('div');
-        // eleRef.current = wrapper;
-        modalRoot.appendChild(wrapper);
-        return () => {
-            modalRoot.removeChild(wrapper);
-        };
-    }, []);
-    if (!wrapper) return null;
-    console.log("create portal");
-    return createPortal(children, wrapper);
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+export default function Modal({ id = "root-modal", children }) {
+  const [wrapper, setWrapper] = useState(null);
+  // let eleRef = useRef(null);
+  useEffect(() => {
+    const modalRoot = document.getElementById(id);
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("wrapper");
+    modalRoot.appendChild(wrapper);
+    setWrapper(wrapper);
+    return () => {
+      modalRoot.removeChild(wrapper);
+    };
+  }, [id]);
+  if (!wrapper) return null;
+  console.log("create portal");
+  return createPortal(children, wrapper);
 }

src/common/component/NotificationHub.js

@@ -2,9 +2,10 @@ import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
 
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import BASE_URL from "../../app/config";
+import { useRenewMutation } from "../../app/services/auth";
 import {
   setChannels,
   addChannel,
@@ -12,6 +13,7 @@ import {
 } from "../../app/slices/channels";
 import { updateUsersStatus } from "../../app/slices/contacts";
 import {
+  updateToken,
   clearAuthData,
   setUsersVersion,
   setAfterMid,
@@ -28,9 +30,16 @@ const getQueryString = (params = {}) => {
   });
   return sp.toString();
 };
-const NotificationHub = ({ token, usersVersion = 0, afterMid = 0 }) => {
+const NotificationHub = ({ usersVersion = 0, afterMid = 0 }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
+  const { token, refreshToken, user: currUser } = useSelector(
+    (store) => store.authData
+  );
+  const [
+    renewToken,
+    { data, isSuccess: refreshTokenSuccess },
+  ] = useRenewMutation();
   useEffect(() => {
     let sse = null;
     if (token) {
@@ -45,7 +54,18 @@ const NotificationHub = ({ token, usersVersion = 0, afterMid = 0 }) => {
         console.info("sse opened");
       };
       sse.onerror = (err) => {
-        console.error("sse error", err);
+        switch (err.eventPhase) {
+          case EventSource.CLOSED:
+          case EventSource.CONNECTING:
+            console.log("sse error renew");
+            renewToken({ token, refreshToken });
+            break;
+
+          default:
+            console.error("sse error", err);
+            // renewToken({ token, refreshToken });
+            break;
+        }
       };
       sse.onmessage = (evt) => {
         handleSSEMessage(JSON.parse(evt.data));
@@ -57,7 +77,14 @@ const NotificationHub = ({ token, usersVersion = 0, afterMid = 0 }) => {
         sse.close();
       }
     };
-  }, [token, usersVersion, afterMid]);
+  }, [token, refreshToken, usersVersion, afterMid]);
+  useEffect(() => {
+    if (refreshTokenSuccess) {
+      const { token, refresh_token } = data;
+      dispatch(updateToken({ token, refresh_token }));
+    }
+  }, [refreshTokenSuccess, data]);
+
   const handleSSEMessage = (data) => {
     const { type } = data;
 
@@ -116,10 +143,24 @@ const NotificationHub = ({ token, usersVersion = 0, afterMid = 0 }) => {
         if (data.gid) {
           // channel msg
           const { gid, ...rest } = data;
-          dispatch(addChannelMsg({ id: gid, ...rest }));
+          console.log("compare", rest, currUser, rest.from_uid != currUser.uid);
+          dispatch(
+            addChannelMsg({
+              id: gid,
+              // 自己发的 就不用标记未读
+              unread: rest.from_uid != currUser.uid,
+              ...rest,
+            })
+          );
         } else {
           // user msg
-          dispatch(addUserMsg({ id: data.from_uid, ...data }));
+          dispatch(
+            addUserMsg({
+              id: data.from_uid,
+              unread: data.from_uid != currUser.uid,
+              ...data,
+            })
+          );
         }
         // 更新after_mid
         dispatch(setAfterMid({ mid: data.mid }));
@@ -132,7 +173,7 @@ const NotificationHub = ({ token, usersVersion = 0, afterMid = 0 }) => {
   };
   return null;
 };
-function compareToken(prevHub, nextHub) {
-  return prevHub.token === nextHub.token;
-}
-export default React.memo(NotificationHub, compareToken);
+// function compareToken(prevHub, nextHub) {
+//   return prevHub.token === nextHub.token;
+// }
+export default React.memo(NotificationHub);

src/common/component/Search.js

@@ -9,7 +9,7 @@ import ContactsModal from "./ContactsModal";
 
 const StyledWrapper = styled.div`
   position: relative;
-  height: 56px;
+  min-height: 56px;
   padding: 0 10px 0 16px;
   display: flex;
   align-items: center;

src/common/component/Send/EmojiPicker.js

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { Picker } from "emoji-mart";
+import "emoji-mart/css/emoji-mart.css";
+
+export default function EmojiPicker({ selectEmoji }) {
+  const [emojiPickerVisible, setEmojiPickerVisible] = useState(false);
+  const toggleEmojiPicker = () => {
+    setEmojiPickerVisible((prev) => !prev);
+  };
+  const handleSelect = (emoji) => {
+    selectEmoji(emoji.native);
+    setEmojiPickerVisible(false);
+  };
+  return (
+    <>
+      <button className="toggle" onClick={toggleEmojiPicker}>
+        😄
+      </button>
+      {emojiPickerVisible && (
+        <div className="picker">
+          <Picker
+            onSelect={handleSelect}
+            showPreview={false}
+            showSkinTones={false}
+          />
+        </div>
+      )}
+    </>
+  );
+}

src/common/component/Send/UploadModal/index.js

@@ -8,6 +8,7 @@ import { useSendMsgMutation } from "../../../../app/services/contact";
 import { addChannelMsg } from "../../../../app/slices/message.channel";
 import { addUserMsg } from "../../../../app/slices/message.user";
 import Modal from "../../Modal";
+import Button from "../../StyledButton";
 import StyledWrapper from "./styled";
 
 export default function UploadModal({
@@ -102,16 +103,16 @@ export default function UploadModal({
           })}
         </ul>
         <div className="btns">
-          <button className="btn cancel" onClick={closeModal}>
+          <Button className="cancel" onClick={closeModal}>
             Cancel
-          </button>
-          <button
-            className="btn upload"
+          </Button>
+          <Button
+            className="upload main"
             disabled={channelSending || userSending}
             onClick={handleUpload}
           >
             {channelSending || userSending ? "Uploading" : `Upload`}
-          </button>
+          </Button>
         </div>
       </StyledWrapper>
     </Modal>

src/common/component/Send/UploadModal/styled.js

@@ -77,20 +77,6 @@ const StyledWrapper = styled.div`
     justify-content: flex-end;
     gap: 16px;
     width: 100%;
-    .btn {
-      color: #fff;
-      padding: 8px 16px;
-      background: #1fe1f9;
-      /* shadow-base */
-
-      box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
-      border-radius: 4px;
-      &.cancel {
-        color: #333;
-        border: 1px solid #e5e7eb;
-        background-color: #fff;
-      }
-    }
   }
 `;
 export default StyledWrapper;

src/common/component/Send/index.js

@@ -1,16 +1,15 @@
 import { useState, useEffect, useRef } from "react";
 import { MdAdd } from "react-icons/md";
 import TextareaAutosize from "react-textarea-autosize";
-import { useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
 import { useKey } from "rooks";
-import "emoji-mart/css/emoji-mart.css";
-import { Picker } from "emoji-mart";
+
 import { useSendChannelMsgMutation } from "../../../app/services/channel";
 import { useSendMsgMutation } from "../../../app/services/contact";
-import { addChannelMsg } from "../../../app/slices/message.channel";
-import { addUserMsg } from "../../../app/slices/message.user";
 import StyledSend from "./styled";
+import useFiles from "./useFiles";
 import UploadModal from "./UploadModal";
+import EmojiPicker from "./EmojiPicker";
 
 const Types = {
   channel: "#",
@@ -19,38 +18,31 @@ const Types = {
 export default function Send({
   name,
   type = "channel",
+  // 发给谁，或者是channel，或者是user
   id = "",
   dragFiles = [],
 }) {
-  const [files, setFiles] = useState([]);
+  const { files, setFiles, resetFiles } = useFiles([]);
   const inputRef = useRef();
-  const [emojiPicker, setEmojiPicker] = useState(false);
   const [shift, setShift] = useState(false);
   const [enter, setEnter] = useState(false);
   const [msg, setMsg] = useState("");
-  const dispatch = useDispatch();
-  console.log("send drag files", dragFiles);
+  // const dispatch = useDispatch();
+  // 谁发的
+  const from_uid = useSelector((store) => store.authData.user.uid);
   useEffect(() => {
     if (dragFiles.length) {
       setFiles((prev) => [...prev, ...dragFiles]);
     }
   }, [dragFiles]);
 
-  const toggleEmojiPicker = () => {
-    setEmojiPicker((prev) => !prev);
-  };
-  const [
-    sendMsg,
-    { isLoading: sending, isSuccess: sendSuccess, data: sendData },
-  ] = useSendMsgMutation();
+  const [sendMsg, { isLoading: userSending }] = useSendMsgMutation();
   const [
     sendChannelMsg,
-    {
-      isLoading: channelSending,
-      isSuccess: sendChannelSuccess,
-      data: sendChannelData,
-    },
+    { isLoading: channelSending },
   ] = useSendChannelMsgMutation();
+  const sendMessage = type == "channel" ? sendChannelMsg : sendMsg;
+  const sendingMessage = userSending || channelSending;
   useKey(
     "Shift",
     (e) => {
@@ -64,54 +56,25 @@ export default function Send({
       handleSendMessage();
     } else {
       setMsg(evt.target.value);
-      // inputRef.current.focus();
     }
   };
   const handleInputKeydown = (e) => {
+    console.log("keydown event", e);
     setEnter(e.key === "Enter");
   };
-  const handleEmojiSelect = (emoji) => {
-    console.log(emoji);
-    setMsg((prev) => `${prev}${emoji.native}`);
-    // inputRef.current.focus();
-    toggleEmojiPicker();
+  const selectEmoji = (emoji) => {
+    setMsg((prev) => `${prev}${emoji}`);
   };
-  useEffect(() => {
-    if (sendSuccess) {
-      dispatch(addUserMsg({ id, ...sendData, unread: false }));
-      setMsg("");
-    }
-  }, [sendSuccess, sendData]);
-
-  useEffect(() => {
-    if (sendChannelSuccess) {
-      const { gid, ...rest } = sendChannelData;
-      dispatch(addChannelMsg({ id: gid, ...rest, unread: false }));
-      setMsg("");
-    }
-  }, [sendChannelSuccess, sendChannelData]);
   useEffect(() => {
     inputRef.current.focus();
   }, [msg]);
   const handleUpload = (evt) => {
     setFiles([...evt.target.files]);
   };
-  const resetFiles = () => {
-    setFiles([]);
-  };
   const handleSendMessage = () => {
-    if (!msg || !type || !id) return;
-    switch (type) {
-      case "channel":
-        sendChannelMsg({ id, content: msg });
-        break;
-      case "user":
-        sendMsg({ id, content: msg });
-        break;
-
-      default:
-        break;
-    }
+    if (!msg || !id || sendingMessage) return;
+    sendMessage({ id, content: msg, from_uid });
+    setMsg("");
   };
   return (
     <>
@@ -140,18 +103,7 @@ export default function Send({
           />
         </div>
         <div className="emoji">
-          <button className="toggle" onClick={toggleEmojiPicker}>
-            😄
-          </button>
-          {emojiPicker && (
-            <div className="picker">
-              <Picker
-                onSelect={handleEmojiSelect}
-                showPreview={false}
-                showSkinTones={false}
-              />
-            </div>
-          )}
+          <EmojiPicker selectEmoji={selectEmoji} />
         </div>
       </StyledSend>
       {files.length !== 0 && (

src/common/component/Send/styled.js

@@ -5,7 +5,7 @@ const StyledSend = styled.div`
   bottom: 15px;
   left: 50%;
   transform: translateX(-50%);
-  background: #f5f6f7;
+  background: #e5e7eb;
   border-radius: 8px;
   width: calc(100% - 32px);
   min-height: 54px;

src/common/component/Send/useFiles.js

@@ -0,0 +1,13 @@
+import { useState } from "react";
+
+export default function useFiles(initialFiles = []) {
+  const [files, setFiles] = useState(initialFiles);
+  const resetFiles = () => {
+    setFiles([]);
+  };
+  return {
+    files,
+    setFiles,
+    resetFiles,
+  };
+}

src/common/component/Setting/LogoutConfirmModal.js

@@ -0,0 +1,67 @@
+// import React from "react";
+import { useEffect } from "react";
+import styled from "styled-components";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+
+import { clearAuthData } from "../../../app/slices/auth.data";
+import { toggleSetting } from "../../../app/slices/ui";
+// import BASE_URL from "../../app/config";
+import { useLazyLogoutQuery } from "../../../app/services/auth";
+import Button from "../StyledButton";
+const StyledConfirm = styled.div`
+  padding: 32px;
+  filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
+  border-radius: 8px;
+  background-color: #fff;
+  .title {
+    font-weight: 600;
+    font-size: 20px;
+    color: #374151;
+    margin-bottom: 16px;
+  }
+  .desc {
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+    color: #6b7280;
+    margin-bottom: 64px;
+  }
+  .btns {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    gap: 16px;
+    align-items: center;
+  }
+`;
+import Modal from "../Modal";
+export default function LogoutConfirmModal({ closeModal }) {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const [logout, { isLoading, isSuccess }] = useLazyLogoutQuery();
+  const handleLogout = () => {
+    logout();
+  };
+  useEffect(() => {
+    if (isSuccess) {
+      dispatch(toggleSetting());
+      dispatch(clearAuthData());
+      navigate("/login");
+    }
+  }, [isSuccess]);
+  return (
+    <Modal id="modal-modal">
+      <StyledConfirm className="animate__animated animate__fadeInDown animate__faster">
+        <h3 className="title">Log Out</h3>
+        <p className="desc">Are you sure want to log out this account?</p>
+        <div className="btns">
+          <Button onClick={closeModal}>Cancel</Button>
+          <Button onClick={handleLogout} className="danger">
+            {isLoading ? "Logouting" : `Log Out`}
+          </Button>
+        </div>
+      </StyledConfirm>
+    </Modal>
+  );
+}

src/common/component/Setting/MyAccount.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function MyAccount() {
+  return <div>MyAccount</div>;
+}

src/common/component/Setting/index.js

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { toggleSetting } from "../../../app/slices/ui";
+import StyledSettingContainer from "../StyledSettingContainer";
+import navs from "./navs";
+import LogoutConfirmModal from "./LogoutConfirmModal";
+const flatenNavs = navs
+  .map(({ items }) => {
+    return items;
+  })
+  .flat();
+export default function Setting() {
+  const [currNav, setCurrNav] = useState(flatenNavs[0]);
+  const [logoutConfirm, setLogoutConfirm] = useState(false);
+  const dispatch = useDispatch();
+  const close = () => {
+    dispatch(toggleSetting());
+  };
+  const toggleLogoutConfrim = () => {
+    setLogoutConfirm((prev) => !prev);
+  };
+  const updateNav = (name) => {
+    const tmp = flatenNavs.find((n) => n.name == name);
+    if (tmp) {
+      setCurrNav(tmp);
+    }
+  };
+  return (
+    <>
+      <StyledSettingContainer
+        updateNav={updateNav}
+        nav={currNav}
+        closeModal={close}
+        title="Setting"
+        navs={navs}
+        dangers={[{ title: "Log Out", handler: toggleLogoutConfrim }]}
+      >
+        right block
+      </StyledSettingContainer>
+      {logoutConfirm && <LogoutConfirmModal closeModal={toggleLogoutConfrim} />}
+    </>
+  );
+}

src/common/component/Setting/navs.js

@@ -0,0 +1,30 @@
+const navs = [
+  {
+    title: "User",
+    items: [
+      {
+        name: "my_account",
+        title: "My Account",
+      },
+      {
+        name: "auth_apps",
+        title: "Authorized Apps",
+      },
+    ],
+  },
+  {
+    title: "App",
+    items: [
+      {
+        name: "appearance",
+        title: "Appearance",
+      },
+      {
+        name: "lang",
+        title: "Language",
+      },
+    ],
+  },
+];
+
+export default navs;

src/common/component/StyledButton.js

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+const StyledButton = styled.button`
+  cursor: pointer;
+  padding: 8px 16px;
+  background: none;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
+  border-radius: 4px;
+  font-weight: 500;
+  color: #374151;
+  &.main {
+    border: none;
+    background: #1fe1f9;
+    color: #fff;
+  }
+  &.danger {
+    border: none;
+    background: #ef4444;
+    color: #fff;
+  }
+`;
+
+export default StyledButton;

src/common/component/StyledSettingContainer.js

@@ -0,0 +1,130 @@
+// import React from 'react'
+import styled from "styled-components";
+import Modal from "./Modal";
+
+const StyledWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  .left {
+    padding: 32px 16px;
+    min-width: 212px;
+    background-color: #f5f6f7;
+    > .title {
+      cursor: pointer;
+      font-weight: bold;
+      font-size: 16px;
+      line-height: 24px;
+      color: #1c1c1e;
+      margin-bottom: 32px;
+      padding-left: 24px;
+      background: url(https://static.nicegoodthings.com/project/rustchat/icon.arrow.left.svg);
+      background-size: 16px;
+      background-repeat: no-repeat;
+      background-position: left;
+    }
+    > .items {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      margin-bottom: 36px;
+      &:before {
+        padding-left: 12px;
+        content: attr(data-title);
+        font-weight: bold;
+        font-size: 12px;
+        line-height: 18px;
+        color: #6b7280;
+        margin-bottom: -2px;
+      }
+      .item {
+        cursor: pointer;
+        padding: 4px 12px;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        color: #44494f;
+        border-radius: 4px;
+        &:hover,
+        &.curr {
+          background: #e7e5e4;
+        }
+      }
+      &.danger .item {
+        color: #ef4444;
+        &:hover {
+          background: none;
+        }
+      }
+    }
+  }
+  .right {
+    background-color: #fff;
+    width: 100%;
+    padding: 32px;
+    > .title {
+      font-weight: bold;
+      font-size: 20px;
+      line-height: 30px;
+      color: #374151;
+      margin-bottom: 32px;
+    }
+  }
+`;
+export default function StyledSettingContainer({
+  closeModal,
+  title = "Setting",
+  navs = [],
+  dangers = [],
+  nav,
+  updateNav,
+  children,
+}) {
+  const handleNavClick = (name) => {
+    updateNav(name);
+  };
+  return (
+    <Modal>
+      <StyledWrapper className="animate__animated animate__fadeInUp animate__faster">
+        <div className="left">
+          <h2 onClick={closeModal} className="title">
+            {title}
+          </h2>
+          {navs.map(({ title, items }) => {
+            return (
+              <ul key={title} data-title={title} className="items">
+                {items.map(({ name, title }) => {
+                  return (
+                    <li
+                      key={name}
+                      onClick={handleNavClick.bind(null, name)}
+                      className={`item ${name == nav?.name ? "curr" : ""}`}
+                    >
+                      {title}
+                    </li>
+                  );
+                })}
+              </ul>
+            );
+          })}
+          {dangers.length ? (
+            <ul className="items danger">
+              {dangers.map((d) => {
+                const { title, handler } = d;
+                return (
+                  <li key={title} onClick={handler} className="item">
+                    {title}
+                  </li>
+                );
+              })}
+            </ul>
+          ) : null}
+        </div>
+        <div className="right">
+          {nav && <h4 className="title">{nav.title}</h4>}
+          {children}
+        </div>
+      </StyledWrapper>
+    </Modal>
+  );
+}

src/common/hook/useContextMenu.js

@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+export default function useContextMenu() {
+  const [visible, setVisible] = useState(false);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const handleContextMenuEvent = (evt) => {
+    console.log("context menu event", evt);
+    evt.preventDefault();
+    setVisible(true);
+    setPos({ x: evt.clientX, y: evt.clientY });
+  };
+  const hideContextMenu = () => {
+    setVisible(false);
+  };
+  return {
+    posX: pos.x,
+    posY: pos.y,
+    visible,
+    hideContextMenu,
+    handleContextMenuEvent,
+  };
+}