ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: session list

Browse Source
This commit is contained in:
zerosoul
2022-06-14 18:12:57 +08:00
parent bff68d6c8e
commit 405824d582
7 changed files with 399 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/chat/SessionList/Session.js
+3 -1
View File
@@ -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
+4
View File
@@ -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
+2 -12
View File
@@ -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
+97
View File
@@ -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>
</>
);
}