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

refactor: favorite error tip

Browse Source
This commit is contained in:
zerosoul
2022-05-07 09:55:18 +08:00
parent 60fab189ad
commit 1902c2f891
9 changed files with 348 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/Message/Commands.js
+8 -4
View File
@@ -69,9 +69,9 @@ export default function Commands({
from_uid = 0, from_uid = 0,
toggleEditMessage, toggleEditMessage,
}) { }) {
const { addFavorite, isFavorited } = useFavMessage( const { addFavorite, isFavorited } = useFavMessage({
context == "channel" ? contextId : null cid: context == "channel" ? contextId : null,
); });
const [mids, setMids] = useState([]); const [mids, setMids] = useState([]);
const dispatch = useDispatch(); const dispatch = useDispatch();
const [pinModalVisible, setPinModalVisible] = useState(false); const [pinModalVisible, setPinModalVisible] = useState(false);
@@ -122,8 +122,12 @@ export default function Commands({
toast.success("Favorited!"); toast.success("Favorited!");
return; return;
} }
await addFavorite(mid); const added = await addFavorite(mid);
if (added) {
toast.success("Added Favorites!"); toast.success("Added Favorites!");
} else {
toast.error("Added Favorites Failed!");
}
}; };
useEffect(() => { useEffect(() => {
if (isUnpinSuccess) { if (isUnpinSuccess) {
src/common/component/Message/SavedMessage.js
+1 -1
View File
@@ -14,7 +14,7 @@ const StyledSaved = styled.div`
padding: 8px; padding: 8px;
`; `;
const SavedMessage = ({ cid, id }) => { const SavedMessage = ({ cid, id }) => {
const { favorites } = useFavMessage(cid); const { favorites } = useFavMessage({ cid });
const [fav, setFav] = useState(null); const [fav, setFav] = useState(null);
const [messages, setMessages] = useState(null); const [messages, setMessages] = useState(null);
useEffect(() => { useEffect(() => {
src/common/hook/useFavMessage.js
+14 -8
View File
@@ -4,21 +4,20 @@ import {
useLazyRemoveFavoriteQuery, useLazyRemoveFavoriteQuery,
useFavoriteMessageMutation, useFavoriteMessageMutation,
} from "../../app/services/message"; } from "../../app/services/message";
export default function useFavMessage(cid = null) { export default function useFavMessage({ cid = null, uid = null }) {
const [removeFav] = useLazyRemoveFavoriteQuery(); const [removeFav] = useLazyRemoveFavoriteQuery();
const [addFav] = useFavoriteMessageMutation(); const [addFav] = useFavoriteMessageMutation();
const [favorites, setFavorites] = useState([]); const [favorites, setFavorites] = useState([]);
const { favs = [] } = useSelector((store) => { const { favs = [] } = useSelector((store) => {
return { return {
// mids: store.channelMessage.byId[cid],
favs: store.favorites, favs: store.favorites,
// loginUser: store.contacts.byId[store.authData.uid],
}; };
}); });
const addFavorite = async (mid = []) => { const addFavorite = async (mid = []) => {
const mids = Array.isArray(mid) ? mid.map((i) => +i) : [+mid]; const mids = Array.isArray(mid) ? mid.map((i) => +i) : [+mid];
if (mids.length == 0) return; if (mids.length == 0) return;
await addFav(mids); const { error = null } = await addFav(mids);
return !error;
}; };
const removeFavorite = (id) => { const removeFavorite = (id) => {
if (!id) return; if (!id) return;
@@ -36,16 +35,23 @@ export default function useFavMessage(cid = null) {
return mids.findIndex((i) => i == mid) > -1; return mids.findIndex((i) => i == mid) > -1;
}; };
useEffect(() => { useEffect(() => {
const filtereds = cid let filtereds = [];
filtereds = cid
? favs.filter((f) => { ? favs.filter((f) => {
if (!f.messages) return false; if (!f.messages) return false;
return f.messages.every((m) => m.source.gid == cid); return f.messages.every((m) => m.source.gid == cid);
}) })
: favs; : favs;
console.log("filtered", filtereds); filtereds = uid
setFavorites(filtereds); ? filtereds.filter((f) => {
}, [cid, favs]); if (!f.messages) return false;
return f.messages.every((m) => m.source.uid == uid);
})
: filtereds;
setFavorites(filtereds);
}, [cid, uid, favs]);
console.log("filtered", cid, uid, favs);
return { return {
isFavorited, isFavorited,
addFavorite, addFavorite,
src/routes/chat/ChannelChat/index.js
+73 -45
View File
@@ -1,45 +1,53 @@
import { useState } from 'react'; import { useState } from "react";
import { useDebounce } from 'rooks'; import { useDebounce } from "rooks";
import { useSelector } from 'react-redux'; import { useSelector } from "react-redux";
import PinList from './PinList'; import PinList from "./PinList";
import FavList from './FavList'; import FavList from "../FavList";
import { useReadMessageMutation } from '../../../app/services/message'; import { useReadMessageMutation } from "../../../app/services/message";
import useChatScroll from '../../../common/hook/useChatScroll'; import useChatScroll from "../../../common/hook/useChatScroll";
import ChannelIcon from '../../../common/component/ChannelIcon'; import ChannelIcon from "../../../common/component/ChannelIcon";
import Tooltip from '../../../common/component/Tooltip'; import Tooltip from "../../../common/component/Tooltip";
import Contact from '../../../common/component/Contact'; import Contact from "../../../common/component/Contact";
import Layout from '../Layout'; import Layout from "../Layout";
import { renderMessageFragment } from '../utils'; import { renderMessageFragment } from "../utils";
import EditIcon from '../../../assets/icons/edit.svg'; import EditIcon from "../../../assets/icons/edit.svg";
// import alertIcon from "../../../assets/icons/alert.svg?url"; // import alertIcon from "../../../assets/icons/alert.svg?url";
import IconFav from '../../../assets/icons/bookmark.svg'; import IconFav from "../../../assets/icons/bookmark.svg";
import IconPeople from '../../../assets/icons/people.svg'; import IconPeople from "../../../assets/icons/people.svg";
import IconPin from '../../../assets/icons/pin.svg'; import IconPin from "../../../assets/icons/pin.svg";
// import searchIcon from "../../../assets/icons/search.svg?url"; // import searchIcon from "../../../assets/icons/search.svg?url";
import IconHeadphone from '../../../assets/icons/headphone.svg'; import IconHeadphone from "../../../assets/icons/headphone.svg";
import boardosIcon from '../../../assets/icons/app.boardos.svg?url'; import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
import webrowseIcon from '../../../assets/icons/app.webrowse.svg?url'; import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
import addIcon from '../../../assets/icons/add.svg?url'; import addIcon from "../../../assets/icons/add.svg?url";
import { import {
// StyledNotification, // StyledNotification,
StyledContacts, StyledContacts,
StyledChannelChat, StyledChannelChat,
StyledHeader StyledHeader,
} from './styled'; } from "./styled";
import ChannelInviteModal from '../../../common/component/ChannelInviteModal'; import ChannelInviteModal from "../../../common/component/ChannelInviteModal";
import { NavLink, useLocation } from 'react-router-dom'; import { NavLink, useLocation } from "react-router-dom";
import Tippy from '@tippyjs/react'; import Tippy from "@tippyjs/react";
export default function ChannelChat({ cid = '', dropFiles = [] }) { export default function ChannelChat({ cid = "", dropFiles = [] }) {
const [toolVisible, setToolVisible] = useState(''); const [toolVisible, setToolVisible] = useState("");
const { pathname } = useLocation(); const { pathname } = useLocation();
const [updateReadIndex] = useReadMessageMutation(); const [updateReadIndex] = useReadMessageMutation();
const updateReadDebounced = useDebounce(updateReadIndex, 300); const updateReadDebounced = useDebounce(updateReadIndex, 300);
const [membersVisible, setMembersVisible] = useState(true); const [membersVisible, setMembersVisible] = useState(true);
const [addMemberModalVisible, setAddMemberModalVisible] = useState(false); const [addMemberModalVisible, setAddMemberModalVisible] = useState(false);
// const dispatch = useDispatch(); // const dispatch = useDispatch();
const { selects, msgIds, userIds, data, messageData, loginUid, loginUser, footprint } = const {
useSelector((store) => { selects,
msgIds,
userIds,
data,
messageData,
loginUid,
loginUser,
footprint,
} = useSelector((store) => {
return { return {
selects: store.ui.selectMessages[`channel_${cid}`], selects: store.ui.selectMessages[`channel_${cid}`],
footprint: store.footprint, footprint: store.footprint,
@@ -48,7 +56,7 @@ export default function ChannelChat({ cid = '', dropFiles = [] }) {
msgIds: store.channelMessage[cid] || [], msgIds: store.channelMessage[cid] || [],
userIds: store.contacts.ids, userIds: store.contacts.ids,
data: store.channels.byId[cid] || {}, data: store.channels.byId[cid] || {},
messageData: store.message || {} messageData: store.message || {},
}; };
}); });
const ref = useChatScroll(msgIds); const ref = useChatScroll(msgIds);
@@ -65,12 +73,14 @@ export default function ChannelChat({ cid = '', dropFiles = [] }) {
const { name, description, is_public, members = [], owner } = data; const { name, description, is_public, members = [], owner } = data;
const memberIds = is_public ? userIds : members; const memberIds = is_public ? userIds : members;
const addVisible = loginUser?.is_admin || owner == loginUid; const addVisible = loginUser?.is_admin || owner == loginUid;
console.log('channel message list', msgIds); console.log("channel message list", msgIds);
const readIndex = footprint.readChannels[cid]; const readIndex = footprint.readChannels[cid];
const pinCount = data?.pinned_messages?.length || 0; const pinCount = data?.pinned_messages?.length || 0;
return ( return (
<> <>
{addMemberModalVisible && <ChannelInviteModal cid={cid} closeModal={toggleAddVisible} />} {addMemberModalVisible && (
<ChannelInviteModal cid={cid} closeModal={toggleAddVisible} />
)}
<Layout <Layout
to={cid} to={cid}
context="channel" context="channel"
@@ -94,57 +104,72 @@ export default function ChannelChat({ cid = '', dropFiles = [] }) {
<img src={alertIcon} alt="opt icon" /> <img src={alertIcon} alt="opt icon" />
</Tooltip> </Tooltip>
</li> */} </li> */}
<Tooltip tip="Pin" placement="left" disabled={toolVisible == 'pin'}> <Tooltip
tip="Pin"
placement="left"
disabled={toolVisible == "pin"}
>
<Tippy <Tippy
onShow={() => { onShow={() => {
setToolVisible('pin'); setToolVisible("pin");
}} }}
onHide={() => { onHide={() => {
setToolVisible(''); setToolVisible("");
}} }}
delay={[0, 0]} delay={[0, 0]}
duration={0} duration={0}
placement="left-start" placement="left-start"
popperOptions={{ strategy: 'fixed' }} popperOptions={{ strategy: "fixed" }}
offset={[0, 80]} offset={[0, 80]}
interactive interactive
trigger="click" trigger="click"
content={<PinList id={cid} />} content={<PinList id={cid} />}
> >
<li <li
className={`tool ${pinCount > 0 ? 'badge' : ''} ${toolVisible == 'pin' ? 'active' : ''} `} className={`tool ${pinCount > 0 ? "badge" : ""} ${
toolVisible == "pin" ? "active" : ""
} `}
data-count={pinCount} data-count={pinCount}
> >
<IconPin /> <IconPin />
</li> </li>
</Tippy> </Tippy>
</Tooltip> </Tooltip>
<Tooltip tip="Favorite" placement="left" disabled={toolVisible == 'favorite'}> <Tooltip
tip="Favorite"
placement="left"
disabled={toolVisible == "favorite"}
>
<Tippy <Tippy
onShow={() => { onShow={() => {
setToolVisible('favorite'); setToolVisible("favorite");
}} }}
onHide={() => { onHide={() => {
setToolVisible(''); setToolVisible("");
}} }}
delay={[0, 0]} delay={[0, 0]}
duration={0} duration={0}
placement="left-start" placement="left-start"
popperOptions={{ strategy: 'fixed' }} popperOptions={{ strategy: "fixed" }}
offset={[0, 180]} offset={[0, 180]}
interactive interactive
trigger="click" trigger="click"
content={<FavList cid={cid} />} content={<FavList cid={cid} />}
> >
<li <li
className={`tool fav ${toolVisible == 'favorite' ? 'active' : ''} `} className={`tool fav ${
toolVisible == "favorite" ? "active" : ""
} `}
data-count={pinCount} data-count={pinCount}
> >
<IconFav /> <IconFav />
</li> </li>
</Tippy> </Tippy>
</Tooltip> </Tooltip>
<li className={`tool ${membersVisible ? 'active' : ''}`} onClick={toggleMembersVisible}> <li
className={`tool ${membersVisible ? "active" : ""}`}
onClick={toggleMembersVisible}
>
<Tooltip tip="Channel Members" placement="left"> <Tooltip tip="Channel Members" placement="left">
<IconPeople /> <IconPeople />
</Tooltip> </Tooltip>
@@ -196,7 +221,10 @@ export default function ChannelChat({ cid = '', dropFiles = [] }) {
<div className="info"> <div className="info">
<h2 className="title">Welcome to #{name} !</h2> <h2 className="title">Welcome to #{name} !</h2>
<p className="desc">This is the start of the #{name} channel. </p> <p className="desc">This is the start of the #{name} channel. </p>
<NavLink to={`/setting/channel/${cid}?f=${pathname}`} className="edit"> <NavLink
to={`/setting/channel/${cid}?f=${pathname}`}
className="edit"
>
<EditIcon className="icon" /> <EditIcon className="icon" />
Edit Channel Edit Channel
</NavLink> </NavLink>
@@ -220,7 +248,7 @@ export default function ChannelChat({ cid = '', dropFiles = [] }) {
prev, prev,
curr, curr,
contextId: cid, contextId: cid,
context: 'channel' context: "channel",
}); });
})} })}
</div> </div>
src/routes/chat/DMChat/index.js
+34 -8
View File
@@ -1,10 +1,14 @@
// import { useState, useEffect } from "react"; // import { useState, useEffect } from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { useDebounce } from "rooks"; import { useDebounce } from "rooks";
import Tippy from "@tippyjs/react";
import FavList from "../FavList";
import Tooltip from "../../../common/component/Tooltip"; import Tooltip from "../../../common/component/Tooltip";
import alertIcon from "../../../assets/icons/alert.svg?url"; import FavIcon from "../../../assets/icons/bookmark.svg";
import pinIcon from "../../../assets/icons/pin.svg?url";
// import searchIcon from "../../../assets/icons/search.svg?url"; // import searchIcon from "../../../assets/icons/search.svg?url";
import IconHeadphone from "../../../assets/icons/headphone.svg";
import boardosIcon from "../../../assets/icons/app.boardos.svg?url"; import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url"; import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
import useChatScroll from "../../../common/hook/useChatScroll"; import useChatScroll from "../../../common/hook/useChatScroll";
@@ -48,15 +52,37 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
aside={ aside={
<> <>
<ul className="tools"> <ul className="tools">
<li className="tool">
<IconHeadphone />
</li>
{/* <li className="tool"> {/* <li className="tool">
<img src={searchIcon} alt="opt icon" />
</li> */}
<li className="tool">
<img src={alertIcon} alt="opt icon" /> <img src={alertIcon} alt="opt icon" />
</li> */}
<Tooltip tip="Favorite" placement="left">
<Tippy
// onShow={() => {
// setToolVisible('favorite');
// }}
// onHide={() => {
// setToolVisible('');
// }}
delay={[0, 0]}
duration={0}
placement="left-start"
popperOptions={{ strategy: "fixed" }}
offset={[0, 180]}
interactive
trigger="click"
content={<FavList uid={uid} />}
>
<li className={`tool fav`}>
<FavIcon />
</li> </li>
<li className="tool"> </Tippy>
<img src={pinIcon} alt="opt icon" /> </Tooltip>
</li> {/* <li className="tool fav">
<FavIcon />
</li> */}
</ul> </ul>
<hr className="divider" /> <hr className="divider" />
<ul className="apps"> <ul className="apps">
src/routes/chat/ChannelChat/FavList.js → src/routes/chat/FavList.js
+6 -6
View File
@@ -1,11 +1,11 @@
// import React from "react"; // import React from "react";
// import { useSelector } from "react-redux"; // import { useSelector } from "react-redux";
import styled from "styled-components"; import styled from "styled-components";
import SavedMessage from "../../../common/component/Message/SavedMessage"; import SavedMessage from "../../common/component/Message/SavedMessage";
import IconSurprise from "../../../assets/icons/emoji.suprise.svg"; import IconSurprise from "../../assets/icons/emoji.suprise.svg";
// import IconForward from "../../../assets/icons/forward.svg"; // import IconForward from "../../../assets/icons/forward.svg";
import IconBookmark from "../../../assets/icons/bookmark.svg"; import IconBookmark from "../../assets/icons/bookmark.svg";
import useFavMessage from "../../../common/hook/useFavMessage"; import useFavMessage from "../../common/hook/useFavMessage";
const Styled = styled.div` const Styled = styled.div`
padding: 16px; padding: 16px;
background: #f9fafb; background: #f9fafb;
@@ -82,8 +82,8 @@ const Styled = styled.div`
} }
} }
`; `;
export default function FavList({ cid = null }) { export default function FavList({ cid = null, uid = null }) {
const { favorites, removeFavorite } = useFavMessage(cid); const { favorites, removeFavorite } = useFavMessage({ cid, uid });
const handleRemove = (evt) => { const handleRemove = (evt) => {
const { id } = evt.currentTarget.dataset; const { id } = evt.currentTarget.dataset;
console.log("remove fav", id); console.log("remove fav", id);
src/routes/chat/Layout/Operations.js
+7 -2
View File
@@ -40,7 +40,7 @@ const Styled = styled.div`
export default function Operations({ context, id }) { export default function Operations({ context, id }) {
const [deleteModalVisible, setDeleteModalVisible] = useState(false); const [deleteModalVisible, setDeleteModalVisible] = useState(false);
const { canDelete } = useDeleteMessage(); const { canDelete } = useDeleteMessage();
const { addFavorite } = useFavMessage(id); const { addFavorite } = useFavMessage({});
const mids = useSelector( const mids = useSelector(
(store) => store.ui.selectMessages[`${context}_${id}`] (store) => store.ui.selectMessages[`${context}_${id}`]
); );
@@ -50,9 +50,14 @@ export default function Operations({ context, id }) {
dispatch(updateSelectMessages({ context, id, operation: "reset" })); dispatch(updateSelectMessages({ context, id, operation: "reset" }));
}; };
const handleFav = async () => { const handleFav = async () => {
await addFavorite(mids); const added = await addFavorite(mids);
if (added) {
console.log("added", added);
dispatch(updateSelectMessages({ context, id, operation: "reset" })); dispatch(updateSelectMessages({ context, id, operation: "reset" }));
toast.success("Messages Saved!"); toast.success("Messages Saved!");
} else {
toast.error("Operation Failed!");
}
}; };
const toggleDeleteModal = (isSuccess = false) => { const toggleDeleteModal = (isSuccess = false) => {
setDeleteModalVisible((prev) => !prev); setDeleteModalVisible((prev) => !prev);
src/routes/favs/index.js
+18 -9
View File
@@ -2,17 +2,12 @@
import Styled from "./styled"; import Styled from "./styled";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import SavedMessage from "../../common/component/Message/SavedMessage"; import SavedMessage from "../../common/component/Message/SavedMessage";
// import Masonry from "masonry-layout"; import dayjs from "dayjs";
// import waterfall from "waterfall.js/src/waterfall";
// import { Views } from "../../app/config";
// import View from "./View";
// import Search from "./Search";
// import Filter from "./Filter";
// import FileBox from "../../common/component/FileBox";
function FavsPage() { function FavsPage() {
// const listContainerRef = useRef(null); // const listContainerRef = useRef(null);
// const [filter, setFilter] = useState({}); // const [filter, setFilter] = useState({});
const { favorites } = useSelector((store) => { const { favorites } = useSelector((store) => {
console.log("favs", store.favorites);
return { return {
favorites: store.favorites, favorites: store.favorites,
// channelMessage: store.channelMessage, // channelMessage: store.channelMessage,
@@ -21,8 +16,22 @@ function FavsPage() {
}); });
return ( return (
<Styled> <Styled>
{favorites.map(({ id, created_at }) => { {favorites.map(({ id, created_at, messages }) => {
return <SavedMessage key={id} id={id} />; const [
{
source: { gid, uid },
},
] = messages;
return (
<div className="fav" key={id}>
<h4 className="tip">
{gid ? `gid:${gid}` : `uid:${uid}`}{" "}
{dayjs(created_at).format("YYYY-MM-DD")}
</h4>
<SavedMessage key={id} id={id} />
</div>
);
})} })}
</Styled> </Styled>
); );
src/routes/favs/styled.js
+11
View File
@@ -10,6 +10,17 @@ const Styled = styled.div`
margin: 8px 24px 10px 0; margin: 8px 24px 10px 0;
border-radius: 16px; border-radius: 16px;
padding: 16px; padding: 16px;
.fav {
display: flex;
flex-direction: column;
.tip {
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: #bfbfbf;
}
}
`; `;
export default Styled; export default Styled;