refactor: session list

src/routes/chat/SessionList/Session.js

@@ -95,7 +95,9 @@ export default function Session({
               <span className="name">
                 {name} {!is_public && <IconLock />}
               </span>
-              <span className="time">{dayjs(previewMsg.created_at).fromNow()}</span>
+              <span className="time">
+                {previewMsg.created_at ? dayjs(previewMsg.created_at).fromNow() : null}
+              </span>
             </div>
             <div className="down">
               <span className="msg">{renderPreviewMessage(previewMsg)}</span>

src/routes/chat/SessionList/styled.js

@@ -54,6 +54,10 @@ const Styled = styled.ul`
             font-size: 12px;
             line-height: 18px;
             color: #78787c;
+            white-space: nowrap;
+            overflow: hidden;
+            max-width: 80px;
+            text-overflow: ellipsis;
           }
         }
         .down {

src/routes/chat/index.js

@@ -1,8 +1,6 @@
 // import React from 'react';
 import { useState } from "react";
 import { useParams } from "react-router-dom";
-import { useSelector } from "react-redux";
-
 import StyledWrapper from "./styled";
 import BlankPlaceholder from "../../common/component/BlankPlaceholder";
 import Server from "../../common/component/Server";
@@ -15,13 +13,6 @@ import ContactsModal from "../../common/component/ContactsModal";
 import ChannelModal from "../../common/component/ChannelModal";
 import SessionList from "./SessionList";
 export default function ChatPage() {
-  const [channelDropFiles, setChannelDropFiles] = useState([]);
-  const [userDropFiles, setUserDropFiles] = useState([]);
-  const { sessionUids } = useSelector((store) => {
-    return {
-      sessionUids: store.userMessage.ids
-    };
-  });
   const [channelModalVisible, setChannelModalVisible] = useState(false);
   const [contactsModalVisible, setContactsModalVisible] = useState(false);
   const { channel_id, user_id } = useParams();
@@ -31,7 +22,6 @@ export default function ChatPage() {
   const toggleChannelModalVisible = () => {
     setChannelModalVisible((prev) => !prev);
   };
-  const tmpUid = sessionUids.findIndex((i) => i == user_id) > -1 ? null : user_id;
   // console.log("temp uid", tmpUid);
   const placeholderVisible = !channel_id && !user_id;
   return (
@@ -48,8 +38,8 @@ export default function ChatPage() {
         </div>
         <div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
           {placeholderVisible && <BlankPlaceholder />}
-          {channel_id && <ChannelChat cid={channel_id} dropFiles={channelDropFiles} />}
-          {user_id && <DMChat uid={user_id} dropFiles={userDropFiles} />}
+          {channel_id && <ChannelChat cid={channel_id} />}
+          {user_id && <DMChat uid={user_id} />}
         </div>
       </StyledWrapper>
     </>

src/routes/chat/index.team.js

@@ -0,0 +1,97 @@
+// import React from 'react';
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import { useSelector } from "react-redux";
+
+import { AiOutlineCaretDown } from "react-icons/ai";
+
+import StyledWrapper from "./styled";
+import AddIcon from "../../assets/icons/add.svg";
+import BlankPlaceholder from "../../common/component/BlankPlaceholder";
+import Server from "../../common/component/Server";
+import Tooltip from "../../common/component/Tooltip";
+// import Contact from "../../common/component/Contact";
+// import CurrentUser from "../../common/component/CurrentUser";
+import ChannelChat from "./ChannelChat";
+import DMChat from "./DMChat";
+import ChannelList from "./ChannelList";
+import ContactsModal from "../../common/component/ContactsModal";
+import ChannelModal from "../../common/component/ChannelModal";
+import DMList from "./DMList";
+
+export default function ChatPage() {
+  const [channelDropFiles, setChannelDropFiles] = useState([]);
+  const [userDropFiles, setUserDropFiles] = useState([]);
+  const { sessionUids } = useSelector((store) => {
+    return {
+      sessionUids: store.userMessage.ids
+    };
+  });
+  const [channelModalVisible, setChannelModalVisible] = useState(false);
+  const [contactsModalVisible, setContactsModalVisible] = useState(false);
+  const { channel_id, user_id } = useParams();
+  const toggleContactsModalVisible = () => {
+    setContactsModalVisible((prev) => !prev);
+  };
+  const toggleChannelModalVisible = () => {
+    setChannelModalVisible((prev) => !prev);
+  };
+  const handleToggleExpand = (evt) => {
+    const { currentTarget } = evt;
+    const listEle = currentTarget.parentElement.parentElement;
+    listEle.classList.toggle("collapse");
+  };
+  const tmpUid = sessionUids.findIndex((i) => i == user_id) > -1 ? null : user_id;
+  // console.log("temp uid", tmpUid);
+  const placeholderVisible = !channel_id && !user_id;
+  return (
+    <>
+      {channelModalVisible && (
+        <ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
+      )}
+      {contactsModalVisible && <ContactsModal closeModal={toggleContactsModalVisible} />}
+      <StyledWrapper>
+        <div className="left">
+          <Server />
+          <div className="list channels">
+            <h3 className="title">
+              <span className="txt" onClick={handleToggleExpand}>
+                <AiOutlineCaretDown className="icon" size={18} color="#78787C" />
+                CHANNELS
+              </span>
+              <Tooltip tip="New Channel" placement="bottom">
+                <AddIcon className="add_icon" onClick={toggleChannelModalVisible} />
+              </Tooltip>
+            </h3>
+            <nav className="nav">
+              <ChannelList setDropFiles={setChannelDropFiles} />
+            </nav>
+          </div>
+          <div className="list dms">
+            <h3 className="title">
+              <span className="txt" onClick={handleToggleExpand}>
+                <AiOutlineCaretDown className="icon" size={18} color="#78787C" />
+                DIRECT MESSAGE
+              </span>
+              <Tooltip tip="New DM" placement="bottom">
+                <AddIcon className="add_icon" onClick={toggleContactsModalVisible} />
+              </Tooltip>
+            </h3>
+            <nav className="nav">
+              <DMList
+                uids={tmpUid ? [...sessionUids, tmpUid] : sessionUids}
+                setDropFiles={setUserDropFiles}
+              />
+            </nav>
+          </div>
+          {/* <CurrentUser /> */}
+        </div>
+        <div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
+          {placeholderVisible && <BlankPlaceholder />}
+          {channel_id && <ChannelChat cid={channel_id} dropFiles={channelDropFiles} />}
+          {user_id && <DMChat uid={user_id} dropFiles={userDropFiles} />}
+        </div>
+      </StyledWrapper>
+    </>
+  );
+}

src/routes/index.js

@@ -4,14 +4,14 @@ import { Provider, useSelector } from "react-redux";
 import toast from "react-hot-toast";
 // import Welcome from './Welcome'
 import NotFoundPage from "./404";
-const HomePage = lazy(() => import("./home"));
+// const HomePage = lazy(() => import("./home"));
 const RegBasePage = lazy(() => import("./reg"));
+const ChatPage = lazy(() => import("./chat"));
 const RegWithUsernamePage = lazy(() => import("./reg/RegWithUsername"));
 const SendMagicLinkPage = lazy(() => import("./sendMagicLink"));
 const RegPage = lazy(() => import("./reg/Register"));
 const LoginPage = lazy(() => import("./login"));
 const OAuthPage = lazy(() => import("./oauth"));
-const ChatPage = lazy(() => import("./chat"));
 const ContactsPage = lazy(() => import("./contacts"));
 const FavoritesPage = lazy(() => import("./favs"));
 const OnboardingPage = lazy(() => import("./onboarding"));
@@ -22,6 +22,8 @@ const ResourceManagement = lazy(() => import("./resources"));
 import RequireAuth from "../common/component/RequireAuth";
 import RequireNoAuth from "../common/component/RequireNoAuth";
 import Meta from "../common/component/Meta";
+import HomePage from "./home";
+// import ChatPage from "./chat";
 import Loading from "../common/component/Loading";
 
 import store from "../app/store";
@@ -91,9 +93,11 @@ const PageRoutes = () => {
           <Route
             path="/"
             element={
+              // <Suspense fallback={<Loading />}>
               <RequireAuth>
                 <HomePage />
               </RequireAuth>
+              // </Suspense>
             }
           >
             <Route path="setting">