feat: lots updates

src/routes/chat/ChannelChat/index.js

@@ -6,10 +6,7 @@ import dayjs from "dayjs";
 import Message from "../../../common/component/Message";
 import ChannelIcon from "../../../common/component/ChannelIcon";
 import Send from "../../../common/component/Send";
-import {
-  clearChannelMsgUnread,
-  setLastAccessTime,
-} from "../../../app/slices/message.channel";
+import { clearChannelMsgUnread } from "../../../app/slices/message.channel";
 import Contact from "../../../common/component/Contact";
 import Layout from "../Layout";
 import {
@@ -28,8 +25,12 @@ export default function ChannelChat({
   // const containerRef = useRef(null);
   const [dragFiles, setDragFiles] = useState([]);
   const dispatch = useDispatch();
-  const { msgs, users } = useSelector((store) => {
-    return { msgs: store.channelMsg[cid] || {}, users: store.contacts };
+  const { msgs, users, pendingMsgs } = useSelector((store) => {
+    return {
+      msgs: store.channelMsg[cid] || {},
+      users: store.contacts,
+      pendingMsgs: store.pendingMsg.channel[cid] || {},
+    };
   });
   const handleClearUnreads = () => {
     dispatch(clearChannelMsgUnread(cid));
@@ -39,12 +40,6 @@ export default function ChannelChat({
       setDragFiles(dropFiles);
     }
   }, [dropFiles]);
-  useEffect(() => {
-    console.log({ cid });
-    return () => {
-      dispatch(setLastAccessTime(cid));
-    };
-  }, [cid]);
   const { name, description, is_public, members = [] } = data;
   const filteredUsers =
     members.length == 0
@@ -88,8 +83,8 @@ export default function ChannelChat({
       }
       contacts={
         <StyledContacts>
-          {filteredUsers.map(({ name, status, uid }) => {
-            return <Contact key={name} uid={uid} status={status} popover />;
+          {filteredUsers.map(({ name, uid }) => {
+            return <Contact key={name} uid={uid} popover />;
           })}
         </StyledContacts>
       }
@@ -102,28 +97,34 @@ export default function ChannelChat({
             {/* <button className="edit">Edit Channel</button> */}
           </div>
           <div className="chat">
-            {Object.entries(msgs).map(([mid, msg]) => {
-              if (!msg) return null;
-              const {
-                from_uid,
-                content,
-                content_type,
-                created_at,
-                unread,
-              } = msg;
-              return (
-                <Message
-                  content_type={content_type}
-                  unread={unread}
-                  gid={cid}
-                  mid={mid}
-                  key={mid}
-                  time={created_at}
-                  fromUid={from_uid}
-                  content={content}
-                />
-              );
-            })}
+            {[...Object.entries(msgs), ...Object.entries(pendingMsgs)]
+              .sort(([, msg1], [, msg2]) => {
+                return msg1.created_at - msg2.created_at;
+              })
+              .map(([mid, msg]) => {
+                if (!msg) return null;
+                const {
+                  pending = false,
+                  from_uid,
+                  content,
+                  content_type,
+                  created_at,
+                  unread,
+                } = msg;
+                return (
+                  <Message
+                    pending={pending}
+                    content_type={content_type}
+                    unread={unread}
+                    gid={cid}
+                    mid={mid}
+                    key={mid}
+                    time={created_at}
+                    fromUid={from_uid}
+                    content={content}
+                  />
+                );
+              })}
           </div>
         </div>
 

src/routes/chat/ChannelChat/styled.js

@@ -81,6 +81,7 @@ export const StyledChannelChat = styled.article`
     display: flex;
     flex-direction: column;
     padding: 0 16px;
+    padding-bottom: 25px;
     height: calc(100vh - 56px - 80px);
     overflow-y: scroll;
     overflow-x: visible;

src/routes/chat/ChannelList.js

@@ -2,9 +2,20 @@
 import { NavLink, useNavigate } from "react-router-dom";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
+import { useDispatch } from "react-redux";
+import useContextMenu from "../../common/hook/useContextMenu";
+import ContextMenu from "../../common/component/ContextMenu";
+import { toggleChannelSetting } from "../../app/slices/ui";
 import ChannelIcon from "../../common/component/ChannelIcon";
-const NavItem = ({ data, setFiles }) => {
+const NavItem = ({ data, setFiles, contextMenuEventHandler }) => {
+  const dispatch = useDispatch();
   const navigate = useNavigate();
+
+  const handleChannelSetting = (evt) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+    dispatch(toggleChannelSetting(data.id));
+  };
   const [{ isActive }, drop] = useDrop(() => ({
     accept: [NativeTypes.FILE],
     drop({ dataTransfer }) {
@@ -25,6 +36,7 @@ const NavItem = ({ data, setFiles }) => {
   const { id, is_public, name, unreads } = data;
   return (
     <NavLink
+      onContextMenu={contextMenuEventHandler}
       ref={drop}
       key={id}
       className={`link ${isActive ? "drop_over" : ""}`}
@@ -35,7 +47,7 @@ const NavItem = ({ data, setFiles }) => {
         {name}
       </span>
       <div className="icons">
-        <i className="setting"></i>
+        <i className="setting" onClick={handleChannelSetting}></i>
         {unreads > 0 && (
           <i className={`badge ${unreads > 99 ? "dot" : ""}`}>
             {unreads > 99 ? null : unreads}
@@ -46,13 +58,56 @@ const NavItem = ({ data, setFiles }) => {
   );
 };
 export default function ChannelList({ channels, setDropFiles }) {
-  return channels.map(({ id, is_public, name, description, unreads }) => {
-    return (
-      <NavItem
-        key={id}
-        data={{ id, is_public, name, description, unreads }}
-        setFiles={setDropFiles}
-      />
-    );
-  });
+  const {
+    visible: contextMenuVisible,
+    posX,
+    posY,
+    hideContextMenu,
+    handleContextMenuEvent,
+  } = useContextMenu();
+  return (
+    <>
+      {channels.map(({ id, is_public, name, description, unreads }) => {
+        return (
+          <NavItem
+            contextMenuEventHandler={handleContextMenuEvent}
+            key={id}
+            data={{ id, is_public, name, description, unreads }}
+            setFiles={setDropFiles}
+          />
+        );
+      })}
+      {contextMenuVisible ? (
+        <ContextMenu
+          hideMenu={hideContextMenu}
+          posX={posX}
+          posY={posY}
+          items={[
+            {
+              title: "Mark As Read",
+              underline: true,
+            },
+            {
+              title: "Mute",
+            },
+            {
+              title: "Notification Settings",
+              underline: true,
+            },
+            {
+              title: "Edit Channel",
+              underline: true,
+            },
+            {
+              title: "Invite People",
+            },
+            {
+              title: "Delete Channel",
+              danger: true,
+            },
+          ]}
+        />
+      ) : null}
+    </>
+  );
 }

src/routes/chat/DMChat/index.js

@@ -11,8 +11,11 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
   console.log("dm files", dropFiles);
   const [dragFiles, setDragFiles] = useState([]);
   const contacts = useSelector((store) => store.contacts);
-  const msgs = useSelector((store) => {
-    return store.userMsg[uid] || {};
+  const { msgs, pendingMsgs } = useSelector((store) => {
+    return {
+      msgs: store.userMsg[uid] || {},
+      pendingMsgs: store.pendingMsg.user[uid] || {},
+    };
   });
   const [currUser, setCurrUser] = useState(null);
   useEffect(() => {
@@ -66,23 +69,35 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
     >
       <StyledDMChat>
         <div className="chat">
-          {Object.entries(msgs).map(([mid, msg]) => {
-            if (!msg) return null;
-            console.log("user msg", msg);
-            const { from_uid, content, content_type, created_at, unread } = msg;
-            return (
-              <Message
-                content_type={content_type}
-                unread={unread}
-                fromUid={from_uid}
-                mid={mid}
-                key={mid}
-                time={created_at}
-                uid={uid}
-                content={content}
-              />
-            );
-          })}
+          {[...Object.entries(msgs), ...Object.entries(pendingMsgs)]
+            .sort(([, msg1], [, msg2]) => {
+              return msg1.created_at - msg2.created_at;
+            })
+            .map(([mid, msg]) => {
+              if (!msg) return null;
+              console.log("user msg", msg);
+              const {
+                from_uid,
+                content,
+                content_type,
+                created_at,
+                unread,
+                pending = false,
+              } = msg;
+              return (
+                <Message
+                  pending={pending}
+                  content_type={content_type}
+                  unread={unread}
+                  fromUid={from_uid}
+                  mid={mid}
+                  key={mid}
+                  time={created_at}
+                  uid={uid}
+                  content={content}
+                />
+              );
+            })}
         </div>
       </StyledDMChat>
       <div className="placeholder"></div>

src/routes/chat/DMChat/styled.js

@@ -52,6 +52,7 @@ export const StyledDMChat = styled.article`
     flex-direction: column;
     padding: 0 16px;
     padding-top: 10px;
+    padding-bottom: 25px;
     height: calc(100vh - 56px - 80px);
     overflow-y: scroll;
     overflow-x: visible;

src/routes/chat/DMList.js

@@ -3,7 +3,7 @@ import { NavLink, useNavigate } from "react-router-dom";
 import dayjs from "dayjs";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
-import Avatar from "../../common/component/Avatar";
+import Contact from "../../common/component/Contact";
 const NavItem = ({ data, setFiles }) => {
   const navigate = useNavigate();
   const [{ isActive }, drop] = useDrop(() => ({
@@ -31,7 +31,7 @@ const NavItem = ({ data, setFiles }) => {
       className={`session ${isActive ? "drop_over" : ""}`}
       to={`/chat/dm/${uid}`}
     >
-      <Avatar className="avatar" url={user.avatar} name={user.name} />
+      <Contact compact interactive={false} className="avatar" uid={user.uid} />
       <div className="details">
         <div className="up">
           <span className="name">{user.name}</span>

src/routes/chat/index.js

@@ -8,7 +8,7 @@ import { AiOutlineCaretDown } from "react-icons/ai";
 
 import StyledWrapper from "./styled";
 import Search from "../../common/component/Search";
-import Avatar from "../../common/component/Avatar";
+import Contact from "../../common/component/Contact";
 import CurrentUser from "../../common/component/CurrentUser";
 import ChannelChat from "./ChannelChat";
 import DMChat from "./DMChat";
@@ -117,10 +117,11 @@ export default function ChatPage() {
               <DMList sessions={sessions} setDropFiles={setUserDropFiles} />
               {user_id && !Object.keys(UserMsgData).includes(user_id) && (
                 <NavLink className="session" to={`/chat/dm/${user_id}`}>
-                  <Avatar
+                  <Contact
+                    compact
+                    interactive={false}
                     className="avatar"
-                    url={tmpSessionUser.avatar}
-                    name={tmpSessionUser.name}
+                    uid={user_id}
                   />
                   <div className="details">
                     <div className="up">

src/routes/chat/styled.js

@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
     position: relative;
     display: flex;
     flex-direction: column;
-    width: 260px;
+    min-width: 260px;
     box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
     .list {
       margin: 12px 8px;
@@ -40,6 +40,7 @@ const StyledWrapper = styled.div`
           text-decoration: none;
         }
         .link {
+          position: relative;
           display: flex;
           align-items: center;
           justify-content: space-between;
@@ -52,7 +53,7 @@ const StyledWrapper = styled.div`
           > .txt {
             display: flex;
             align-items: center;
-            gap: 5px;
+            gap: 8px;
             color: #1c1c1e;
             font-weight: 600;
             font-size: 14px;
@@ -106,12 +107,7 @@ const StyledWrapper = styled.div`
           }
 
           .avatar {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            /* img{
-              width: 100%;
-            } */
+            /* todo */
           }
           .details {
             display: flex;

src/routes/contacts/styled.js

@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
     position: relative;
     display: flex;
     flex-direction: column;
-    width: 260px;
+    min-width: 260px;
     box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
     .list {
       margin: 12px 8px;

src/routes/home/Menu.js

@@ -1,4 +1,6 @@
 // import React from 'react'
+import { useDispatch } from "react-redux";
+import { toggleSetting } from "../../app/slices/ui";
 import styled from "styled-components";
 const StyledMenus = styled.ul`
   display: flex;
@@ -29,9 +31,13 @@ const StyledMenus = styled.ul`
   }
 `;
 export default function Menu({ toggle, expand = true }) {
+  const dispatch = useDispatch();
+  const handleSetting = () => {
+    dispatch(toggleSetting());
+  };
   return (
     <StyledMenus>
-      <li className="menu">
+      <li className="menu" onClick={handleSetting}>
         <img
           src="https://static.nicegoodthings.com/project/rustchat/menu.setting.png"
           alt="setting icon"

src/routes/home/ServerDropList.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 // import { HiChevronDoubleLeft } from "react-icons/hi";
 
 const StyledWrapper = styled.div`
-  height: 56px;
+  min-height: 56px;
   padding: 0 20px;
   padding-right: 5px;
   display: flex;

src/routes/home/index.js

@@ -3,14 +3,13 @@
 import { Outlet, NavLink } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { toggleMenuExpand } from "../../app/slices/ui";
-// import { setAuthData } from "../../app/slices/auth.data";
 import StyledWrapper from "./styled";
 import ServerDropList from "./ServerDropList";
 import Tools from "./Tools";
 import Menu from "./Menu";
 import usePreload from "./usePreload";
-
-// import CurrentUser from "./CurrentUser";
+import SettingModal from "../../common/component/Setting";
+import ChannelSettingModal from "../../common/component/ChannelSetting";
 
 import ChatIcon from "../../assets/icons/chat.svg";
 import ContactIcon from "../../assets/icons/contact.svg";
@@ -19,12 +18,12 @@ import NotificationHub from "../../common/component/NotificationHub";
 export default function HomePage() {
   const dispatch = useDispatch();
   const {
-    menuExpand,
-    authData: { token, usersVersion, afterMid },
+    ui: { menuExpand, setting, channelSetting },
+    authData: { usersVersion, afterMid },
   } = useSelector((store) => {
     return {
       authData: store.authData,
-      menuExpand: store.ui.menuExpand,
+      ui: store.ui,
     };
   });
   const { data, loading, error, success } = usePreload();
@@ -44,21 +43,24 @@ export default function HomePage() {
   }
   return (
     <>
-      <NotificationHub
-        token={token}
-        usersVersion={usersVersion}
-        afterMid={afterMid}
-      />
+      <NotificationHub usersVersion={usersVersion} afterMid={afterMid} />
       <StyledWrapper>
         <div className={`col left ${menuExpand ? "expand" : ""}`}>
           <ServerDropList data={data?.server} expand={menuExpand} />
           <nav className="nav">
             <NavLink className="link" to={"/chat"}>
-              <img src={ChatIcon} alt="chat icon" /> {menuExpand && `Chat`}
+              <img src={ChatIcon} alt="chat icon" />{" "}
+              {menuExpand && (
+                <span className="animate__animated animate__fadeIn">Chat</span>
+              )}
             </NavLink>
             <NavLink className="link" to={"/contacts"}>
               <img src={ContactIcon} alt="contact icon" />{" "}
-              {menuExpand && `Contacts`}
+              {menuExpand && (
+                <span className="animate__animated animate__fadeIn">
+                  Contacts
+                </span>
+              )}
             </NavLink>
           </nav>
           <div className="divider"></div>
@@ -70,6 +72,8 @@ export default function HomePage() {
           <Outlet />
         </div>
       </StyledWrapper>
+      {setting && <SettingModal />}
+      {channelSetting && <ChannelSettingModal id={channelSetting} />}
     </>
   );
 }

src/routes/home/styled.js

@@ -10,7 +10,7 @@ const StyledWrapper = styled.div`
     flex-direction: column;
     &.left {
       position: relative;
-      /* background: #0891B2; */
+      background: #e5e7eb;
       width: 64px;
       box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
       transition: all 0.5s ease-in;

src/routes/home/usePreload.js

@@ -30,16 +30,11 @@ export default function usePreload() {
     isError: serverError,
     data: server,
   } = useGetServerQuery(undefined, querySetting);
-  // const {
-  //   isLoading: groupsLoading,
-  //   isSuccess: groupsSuccess,
-  //   isError: groupsError,
-  //   data: groups,
-  // } = useGetChannelsQuery(undefined, querySetting);
   useEffect(() => {
     if (contacts) {
       const matchedUser = contacts.find((c) => c.uid == loginedUser.uid);
       if (!matchedUser) {
+        console.log("no matched user, redirect to login");
         dispatch(clearAuthData());
         navigate("/login");
       } else {
@@ -51,7 +46,6 @@ export default function usePreload() {
       }
     }
   }, [contacts]);
-
   return {
     loading: contactsLoading || serverLoading || !checked,
     error: contactsError && serverError,

src/routes/login/index.js

@@ -1,115 +1,115 @@
 /* eslint-disable no-undef */
-import { useState, useEffect } from 'react';
-import StyledWrapper from './styled';
-import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
-import toast from 'react-hot-toast';
+import { useState, useEffect } from "react";
+import StyledWrapper from "./styled";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import toast from "react-hot-toast";
 
 // import web3 from "web3";
-import MetamaskLoginButton from './MetamaskLoginButton';
+import MetamaskLoginButton from "./MetamaskLoginButton";
 
-import GoogleLoginButton from './GoogleLoginButton';
-import { useLoginMutation } from '../../app/services/auth';
-import { setAuthData } from '../../app/slices/auth.data';
+import GoogleLoginButton from "./GoogleLoginButton";
+import { useLoginMutation } from "../../app/services/auth";
+import { setAuthData } from "../../app/slices/auth.data";
 
 export default function LoginPage() {
- const [login, { data, isSuccess, isLoading, error }] = useLoginMutation();
+  const [login, { data, isSuccess, isLoading, error }] = useLoginMutation();
 
- // const { token } = useSelector((store) => store.authData);
- const navigateTo = useNavigate();
- const dispatch = useDispatch();
- const [input, setInput] = useState({
-  email: '',
-  password: ''
- });
-
- useEffect(() => {
-  if (error) {
-   console.log(error);
-   switch (error.status) {
-    case 'PARSING_ERROR':
-     toast.error(error.data);
-     break;
-    case 401:
-     toast.error('username or password incorrect');
-     break;
-    case 404:
-     toast.error('account not exsit');
-     break;
-
-    default:
-     toast.error('something error');
-     break;
-   }
-   return;
-  }
- }, [error]);
- useEffect(() => {
-  if (isSuccess && data) {
-   // 更新本地认证信息
-   toast.success('login success');
-   dispatch(setAuthData(data));
-   navigateTo('/');
-  }
- }, [isSuccess, data]);
-
- const handleLogin = (evt) => {
-  evt.preventDefault();
-  console.log('wtf', input);
-  login({
-   ...input,
-   type: 'password'
+  // const { token } = useSelector((store) => store.authData);
+  const navigateTo = useNavigate();
+  const dispatch = useDispatch();
+  const [input, setInput] = useState({
+    email: "",
+    password: "",
   });
- };
 
- const handleInput = (evt) => {
-  const { type } = evt.target.dataset;
-  const { value } = evt.target;
-  console.log(type, value);
-  setInput((prev) => {
-   prev[type] = value;
-   return { ...prev };
-  });
- };
- const { email, password } = input;
- return (
-  <StyledWrapper>
-   <div className="form">
-    <div className="tips">
-     <img
-      src="https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
-      alt="logo"
-      className="logo"
-     />
-     <h2 className="title">Login to Rustchat</h2>
-     <span className="desc">Please enter your details.</span>
-    </div>
-    <form onSubmit={handleLogin}>
-     <input
-      name="email"
-      value={email}
-      required
-      placeholder="Enter your email"
-      data-type="email"
-      onChange={handleInput}
-     />
-     <input
-      type="password"
-      value={password}
-      name="password"
-      required
-      data-type="password"
-      onChange={handleInput}
-      placeholder="Enter your password"
-     />
-     <button className="btn" type="submit" disabled={isLoading}>
-      Sign in
-     </button>
-    </form>
-    <hr className="or" />
-    <GoogleLoginButton login={login} />
-    <MetamaskLoginButton login={login} />
-   </div>
-  </StyledWrapper>
- );
+  useEffect(() => {
+    if (error) {
+      console.log(error);
+      switch (error.status) {
+        case "PARSING_ERROR":
+          toast.error(error.data);
+          break;
+        case 401:
+          toast.error("username or password incorrect");
+          break;
+        case 404:
+          toast.error("account not exsit");
+          break;
+
+        default:
+          toast.error("something error");
+          break;
+      }
+      return;
+    }
+  }, [error]);
+  useEffect(() => {
+    if (isSuccess && data) {
+      // 更新本地认证信息
+      toast.success("login success");
+      dispatch(setAuthData(data));
+      navigateTo("/");
+    }
+  }, [isSuccess, data]);
+
+  const handleLogin = (evt) => {
+    evt.preventDefault();
+    console.log("wtf", input);
+    login({
+      ...input,
+      type: "password",
+    });
+  };
+
+  const handleInput = (evt) => {
+    const { type } = evt.target.dataset;
+    const { value } = evt.target;
+    console.log(type, value);
+    setInput((prev) => {
+      prev[type] = value;
+      return { ...prev };
+    });
+  };
+  const { email, password } = input;
+  return (
+    <StyledWrapper>
+      <div className="form">
+        <div className="tips">
+          <img
+            src="https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
+            alt="logo"
+            className="logo"
+          />
+          <h2 className="title">Login to Rustchat</h2>
+          <span className="desc">Please enter your details.</span>
+        </div>
+        <form onSubmit={handleLogin}>
+          <input
+            name="email"
+            value={email}
+            required
+            placeholder="Enter your email"
+            data-type="email"
+            onChange={handleInput}
+          />
+          <input
+            type="password"
+            value={password}
+            name="password"
+            required
+            data-type="password"
+            onChange={handleInput}
+            placeholder="Enter your password"
+          />
+          <button className="btn" type="submit" disabled={isLoading}>
+            {isLoading ? "Signing" : `Sign in`}
+          </button>
+        </form>
+        <hr className="or" />
+        <GoogleLoginButton login={login} />
+        <MetamaskLoginButton login={login} />
+      </div>
+    </StyledWrapper>
+  );
 }