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

refactor: rename contact with user

Browse Source
This commit is contained in:
Tristan Yang
2022-07-04 16:12:23 +08:00
parent 6083040e2b
commit 101dbdb5ee
76 changed files with 319 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/AddEntriesMenu.tsx
+3 -3
View File
@@ -6,7 +6,7 @@ import IconInvite from "../../assets/icons/add.person.svg";
import IconMention from "../../assets/icons/mention.svg";
import ChannelIcon from "./ChannelIcon";
import ChannelModal from "./ChannelModal";
import ContactsModal from "./ContactsModal";
import ContactsModal from "./UsersModal";
import InviteModal from "./InviteModal";
const Styled = styled.ul`
@@ -47,7 +47,7 @@ export default function AddEntriesMenu() {
const [inviteModalVisible, setInviteModalVisible] = useState(false);
const [channelModalVisible, setChannelModalVisible] = useState(false);
const [contactsModalVisible, setContactsModalVisible] = useState(false);
const [usersModalVisible, setContactsModalVisible] = useState(false);
const toggleInviteModalVisible = () => {
setInviteModalVisible((prev) => {
if (!prev) {
@@ -96,7 +96,7 @@ export default function AddEntriesMenu() {
</li>
</Styled>
{channelModalVisible && <ChannelModal personal={isPrivate} closeModal={handleCloseModal} />}
{contactsModalVisible && <ContactsModal closeModal={toggleContactsModalVisible} />}
{usersModalVisible && <ContactsModal closeModal={toggleContactsModalVisible} />}
{inviteModalVisible && <InviteModal closeModal={toggleInviteModalVisible} />}
</>
);
src/common/component/BlankPlaceholder.tsx
+3 -3
View File
@@ -7,7 +7,7 @@ import IconChat from "../../assets/icons/placeholder.chat.svg";
import IconAsk from "../../assets/icons/placeholder.question.svg";
import IconInvite from "../../assets/icons/placeholder.invite.svg";
import IconDownload from "../../assets/icons/placeholder.download.svg";
import ContactsModal from "./ContactsModal";
import ContactsModal from "./UsersModal";
import { useAppSelector } from "../../app/store";
const Styled = styled.div`
@@ -75,7 +75,7 @@ const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
const server = useAppSelector((store) => store.server);
const [inviteModalVisible, setInviteModalVisible] = useState(false);
const [createChannelVisible, setCreateChannelVisible] = useState(false);
const [contactListVisible, setContactListVisible] = useState(false);
const [userListVisible, setContactListVisible] = useState(false);
const toggleChannelModalVisible = () => {
setCreateChannelVisible((prev) => !prev);
};
@@ -121,7 +121,7 @@ const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
{createChannelVisible && (
<ChannelModal personal={true} closeModal={toggleChannelModalVisible} />
)}
{contactListVisible && <ContactsModal closeModal={toggleContactListVisible} />}
{userListVisible && <ContactsModal closeModal={toggleContactListVisible} />}
{inviteModalVisible && <InviteModal closeModal={toggleInviteModalVisible} />}
</>
);
src/common/component/Channel.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ const Channel: FC<Props> = ({ interactive = true, id, compact = false, avatarSiz
const { channel, totalMemberCount } = useAppSelector((store) => {
return {
channel: store.channels.byId[id],
totalMemberCount: store.contacts.ids.length
totalMemberCount: store.users.ids.length
};
});
src/common/component/ChannelModal/index.tsx
+8 -8
View File
@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
import Modal from "../Modal";
import Button from "../styled/Button";
import ChannelIcon from "../ChannelIcon";
import Contact from "../Contact";
import User from "../User";
import StyledWrapper from "./styled";
import StyledCheckbox from "../styled/Checkbox";
import StyledToggle from "../../component/styled/Toggle";
@@ -19,8 +19,8 @@ interface Props {
}
const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
const { contactsData, loginUid } = useAppSelector((store) => {
return { contactsData: store.contacts.byId, loginUid: store.authData.user?.uid };
const { usersData, loginUid } = useAppSelector((store) => {
return { usersData: store.users.byId, loginUid: store.authData.user?.uid };
});
const navigateTo = useNavigate();
const [data, setData] = useState<CreateChannelDTO>({
@@ -30,7 +30,7 @@ const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
is_public: !personal
});
const { contacts, input, updateInput } = useFilteredUsers();
const { users, input, updateInput } = useFilteredUsers();
const [createChannel, { isSuccess, isError, isLoading, data: newChannelId }] =
useCreateChannelMutation();
@@ -85,7 +85,7 @@ const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
};
if (!loginUid) return null;
const loginUser = contactsData[Number(loginUid)];
const loginUser = usersData[Number(loginUid)];
if (!loginUser) return null;
const { name, members, is_public } = data;
@@ -101,9 +101,9 @@ const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
placeholder="Type Username to search"
/>
</div>
{contacts && (
{users && (
<ul className="users">
{contacts.map((u) => {
{users.map((u) => {
const { uid } = u;
const checked = members ? members.includes(uid) : false;
return (
@@ -120,7 +120,7 @@ const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
name="cb"
id="cb"
/>
<Contact uid={uid} interactive={false} />
<User uid={uid} interactive={false} />
</li>
);
})}
src/common/component/FileBox/index.tsx
+1 -1
View File
@@ -84,7 +84,7 @@ const FileBox: FC<Props> = ({
from_uid,
content
}) => {
const fromUser = useAppSelector((store) => store.contacts.byId[from_uid]);
const fromUser = useAppSelector((store) => store.users.byId[from_uid]);
const icon = getFileIcon(file_type, name);
if (!content || !fromUser || !name) return null;
const previewContent = renderPreview({ file_type, content, name });
src/common/component/FileMessage/index.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ const FileMessage: FC<Props> = ({
to
});
const { stopUploading, data, uploadFile, progress, isSuccess: uploadSuccess } = useUploadFile();
const fromUser = useAppSelector((store) => store.contacts.byId[from_uid]);
const fromUser = useAppSelector((store) => store.users.byId[from_uid]);
const { size, name, content_type } = properties ?? {};
useEffect(() => {
const handleUpSend = async ({
src/common/component/ForwardModal/index.tsx
+6 -6
View File
@@ -4,7 +4,7 @@ import Modal from "../Modal";
import Button from "../styled/Button";
import Input from "../styled/Input";
import Channel from "../Channel";
import Contact from "../Contact";
import User from "../User";
// import Channel from "../Channel";
import Reply from "../Message/Reply";
import StyledWrapper from "./styled";
@@ -27,7 +27,7 @@ export default function ForwardModal({ mids, closeModal }) {
// input: channelInput,
updateInput: updateChannelInput
} = useFilteredChannels();
const { contacts, input, updateInput } = useFilteredUsers();
const { users, input, updateInput } = useFilteredUsers();
const toggleCheck = ({ currentTarget }: MouseEvent<HTMLLIElement>) => {
const { id, type = "user" } = currentTarget.dataset;
const ids = type == "user" ? selectedMembers : selectedChannels;
@@ -100,8 +100,8 @@ export default function ForwardModal({ mids, closeModal }) {
</li>
);
})}
{contacts &&
contacts.map((u) => {
{users &&
users.map((u) => {
const { uid } = u;
const checked = selectedMembers.includes(uid);
console.log({ checked });
@@ -114,7 +114,7 @@ export default function ForwardModal({ mids, closeModal }) {
onClick={toggleCheck}
>
<StyledCheckbox readOnly checked={checked} name="cb" id="cb" />
<Contact uid={uid} interactive={false} />
<User uid={uid} interactive={false} />
</li>
);
})}
@@ -142,7 +142,7 @@ export default function ForwardModal({ mids, closeModal }) {
{selectedMembers.map((uid) => {
return (
<li key={uid} className="item">
<Contact
<User
key={uid}
uid={uid}
interactive={false}
src/common/component/GithubLoginButton.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ const GithubLoginButton: FC<Props> = ({ type = "login", client_id }) => {
switch (error.status) {
case 410:
toast.error(
"No associated account found, please contact admin for an invitation link to join."
"No associated account found, please user admin for an invitation link to join."
);
break;
default:
src/common/component/GoogleLoginButton.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ const GoogleLoginInner: FC<Props> = ({ type = "login", loaded, loadError }) => {
switch (error.status) {
case 410:
toast.error(
"No associated account found, please contact admin for an invitation link to join."
"No associated account found, please user admin for an invitation link to join."
);
break;
default:
src/common/component/InviteModal/AddMembers.tsx
+8 -8
View File
@@ -3,7 +3,7 @@ import styled from "styled-components";
import toast from "react-hot-toast";
import Button from "../styled/Button";
import Input from "../styled/Input";
import Contact from "../Contact";
import User from "../User";
import StyledCheckbox from "../styled/Checkbox";
import { useAddMembersMutation } from "../../../app/services/channel";
import CloseIcon from "../../../assets/icons/close.svg";
@@ -105,10 +105,10 @@ interface Props {
const AddMembers: FC<Props> = ({ cid, closeModal }) => {
const [addMembers, { isLoading: isAdding, isSuccess }] = useAddMembersMutation();
const [selects, setSelects] = useState([]);
const { channel, contactData } = useAppSelector((store) => {
const { channel, userData } = useAppSelector((store) => {
return {
channel: store.channels.byId[cid],
contactData: store.contacts.byId
userData: store.users.byId
};
});
useEffect(() => {
@@ -121,7 +121,7 @@ const AddMembers: FC<Props> = ({ cid, closeModal }) => {
const handleAddMembers = () => {
addMembers({ id: cid, members: selects });
};
const { input, updateInput, contacts = [] } = useFilteredUsers();
const { input, updateInput, users = [] } = useFilteredUsers();
const toggleCheckMember = ({ currentTarget }: MouseEvent<SVGSVGElement | HTMLLIElement>) => {
const { uid } = currentTarget.dataset;
@@ -140,7 +140,7 @@ const AddMembers: FC<Props> = ({ cid, closeModal }) => {
if (!channel) return null;
const { members: uids } = channel;
const contactIds = contacts.map(({ uid }) => uid);
const userIds = users.map(({ uid }) => uid);
return (
<Styled>
@@ -150,7 +150,7 @@ const AddMembers: FC<Props> = ({ cid, closeModal }) => {
{selects.map((uid) => {
return (
<li className="select" key={uid}>
{contactData[uid].name}
{userData[uid].name}
<CloseIcon data-uid={uid} onClick={toggleCheckMember} className="close" />
</li>
);
@@ -166,7 +166,7 @@ const AddMembers: FC<Props> = ({ cid, closeModal }) => {
{/* )} */}
</div>
<ul className="users">
{contactIds.map((uid) => {
{userIds.map((uid) => {
const added = uids.includes(uid);
return (
<li
@@ -182,7 +182,7 @@ const AddMembers: FC<Props> = ({ cid, closeModal }) => {
name="cb"
id="cb"
/>
<Contact uid={uid} interactive={false} />
<User uid={uid} interactive={false} />
</li>
);
})}
src/common/component/LeaveChannel/TransferOwnerModal.tsx
+2 -2
View File
@@ -6,7 +6,7 @@ import Modal from "../Modal";
import useLeaveChannel from "../../hook/useLeaveChannel";
import StyledModal from "../styled/Modal";
import Button from "../styled/Button";
import Contact from "../Contact";
import User from "../User";
const UserList = styled.ul`
display: flex;
@@ -97,7 +97,7 @@ const TransferOwnerModal: FC<Props> = ({ id, closeModal, withLeave = true }) =>
className={`user ${uid == id ? "selected" : ""}`}
onClick={handleSelectUser.bind(null, id)}
>
<Contact uid={id} interactive={false} />
<User uid={id} interactive={false} />
</li>
);
})}
src/common/component/ManageMembers.tsx
+7 -7
View File
@@ -3,8 +3,8 @@ import styled from "styled-components";
import Tippy from "@tippyjs/react";
import { hideAll } from "tippy.js";
import toast from "react-hot-toast";
import { useUpdateContactMutation } from "../../app/services/contact";
import Contact from "./Contact";
import { useUpdateContactMutation } from "../../app/services/user";
import User from "./User";
import StyledMenu from "./styled/Menu";
import InviteLink from "./InviteLink";
import moreIcon from "../../assets/icons/more.svg?url";
@@ -119,9 +119,9 @@ interface Props {
cid?: number;
}
const ManageMembers: FC<Props> = ({ cid }) => {
const { contacts, channels, loginUser } = useAppSelector((store) => {
const { users, channels, loginUser } = useAppSelector((store) => {
return {
contacts: store.contacts,
users: store.users,
channels: store.channels,
loginUser: store.authData.user
};
@@ -141,7 +141,7 @@ const ManageMembers: FC<Props> = ({ cid }) => {
updateContact({ id: uid, is_admin: isAdmin });
};
const channel = channels.byId[cid] ?? null;
const uids = channel ? (channel.is_public ? contacts.ids : channel.members) : contacts.ids;
const uids = channel ? (channel.is_public ? users.ids : channel.members) : users.ids;
return (
<StyledWrapper>
@@ -154,7 +154,7 @@ const ManageMembers: FC<Props> = ({ cid }) => {
</div>
<ul className="members">
{uids.map((uid) => {
const { name, email, is_admin } = contacts.byId[uid];
const { name, email, is_admin } = users.byId[uid];
const owner = channel && channel.owner == uid;
const switchRoleVisible = loginUser.is_admin && loginUser.uid !== uid;
const dotsVisible = email || loginUser?.is_admin;
@@ -164,7 +164,7 @@ const ManageMembers: FC<Props> = ({ cid }) => {
return (
<li key={uid} className="member">
<div className="left">
<Contact compact uid={uid} interactive={false} />
<User compact uid={uid} interactive={false} />
<div className="info">
<span className="name">
{name} {owner && <IconOwner />}
src/common/component/Message/Mention.tsx
+2 -2
View File
@@ -20,8 +20,8 @@ interface Props {
}
const Mention: FC<Props> = ({ uid, popover = true, cid, textOnly = false }) => {
const contactsData = useAppSelector((store) => store.contacts.byId);
const user = contactsData[uid];
const usersData = useAppSelector((store) => store.users.byId);
const user = usersData[uid];
if (!user) return null;
if (textOnly) return `@${user.name}`;
return (
src/common/component/Message/PreviewMessage.tsx
+3 -3
View File
@@ -10,12 +10,12 @@ interface Props {
}
const PreviewMessage: FC<Props> = ({ mid = 0 }) => {
const { msg, contactsData } = useAppSelector((store) => {
return { msg: store.message[mid], contactsData: store.contacts.byId };
const { msg, usersData } = useAppSelector((store) => {
return { msg: store.message[mid], usersData: store.users.byId };
});
if (!msg) return null;
const { from_uid, created_at, content_type, content, thumbnail, properties } = msg;
const { name, avatar } = contactsData[from_uid];
const { name, avatar } = usersData[from_uid];
return (
<StyledWrapper className={`preview`}>
<div className="avatar">
src/common/component/Message/Reaction.tsx
+2 -2
View File
@@ -106,9 +106,9 @@ const StyledDetails = styled.div`
}
`;
const ReactionDetails = ({ uids = [], emoji, index }) => {
const contactsData = useSelector((store) => store.contacts.byId);
const usersData = useSelector((store) => store.users.byId);
const names = uids.map((id) => {
return contactsData[id]?.name;
return usersData[id]?.name;
});
const emojiData = getEmojiDataFromNative(emoji, "apple", AppleEmojiData);
const prefixDesc =
src/common/component/Message/Reply.tsx
+1 -1
View File
@@ -156,7 +156,7 @@ interface ReplyProps {
const Reply: FC<ReplyProps> = ({ mid, interactive = true }) => {
const { data, users } = useAppSelector((store) => {
return { data: store.message[mid], users: store.contacts.byId };
return { data: store.message[mid], users: store.users.byId };
});
const handleClick = (evt: MouseEvent<HTMLDivElement>) => {
const { mid } = evt.currentTarget.dataset;
src/common/component/Message/index.tsx
+4 -7
View File
@@ -38,12 +38,12 @@ function Message({
const {
message = {},
reactionMessageData,
contactsData
usersData
} = useSelector((store) => {
return {
reactionMessageData: store.reactionMessage,
message: store.message[mid] || {},
contactsData: store.contacts.byId
usersData: store.users.byId
};
});
@@ -75,7 +75,7 @@ function Message({
}, [mid, read]);
const reactions = reactionMessageData[mid];
const currUser = contactsData[fromUid] || {};
const currUser = usersData[fromUid] || {};
// if (!message) return null;
let timePrefix = null;
const dayjsTime = dayjs(time);
@@ -115,10 +115,7 @@ function Message({
visible={contextMenuVisible}
hide={hideContextMenu}
>
<div
className="details"
data-pin-tip={`pinned by ${contactsData[pinInfo?.created_by]?.name}`}
>
<div className="details" data-pin-tip={`pinned by ${usersData[pinInfo?.created_by]?.name}`}>
<div className="up">
<span className="name">{currUser.name}</span>
<Tooltip
src/common/component/MixedInput/index.tsx
+5 -5
View File
@@ -30,7 +30,7 @@ import { ReactEditor } from "slate-react";
import useUploadFile from "../../hook/useUploadFile";
import Styled from "./styled";
import { CONFIG } from "./config";
import Contact from "../Contact";
import User from "../User";
export const TEXT_EDITOR_PREFIX = "_text_editor";
let components = createPlateUI({
@@ -50,7 +50,7 @@ const Plugins = ({
const [context, to] = id.split("_");
const { addStageFile } = useUploadFile({ context, id: to });
const enableMentions = members.length > 0;
const contactData = useSelector((store) => store.contacts.byId);
const userData = useSelector((store) => store.users.byId);
const [msgs, setMsgs] = useState([]);
const [cmdKey, setCmdKey] = useState(false);
const editableRef = useRef(null);
@@ -220,12 +220,12 @@ const Plugins = ({
onRenderItem={({ item }) => {
console.log("wtf", item);
if (!item || !item.data) return null;
return <Contact key={item.data.uid} uid={item.data.uid} interactive={false} />;
return <User key={item.data.uid} uid={item.data.uid} interactive={false} />;
}}
items={members.map((id) => {
const data = contactData[id];
const data = userData[id];
if (!data) {
// console.log("wtffe", id, contactData);
// console.log("wtffe", id, userData);
return { key: id };
}
const { uid, name, ...rest } = data;
src/common/component/Profile/index.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ const Profile: FC<Props> = ({ uid, type = "embed", cid }) => {
const { data } = useAppSelector((store) => {
return {
data: store.contacts.byId[uid]
data: store.users.byId[uid]
};
});
src/common/component/Send/Replying.tsx
+3 -3
View File
@@ -122,15 +122,15 @@ const renderContent = (data) => {
export default function Replying({ context, id, mid }) {
const { removeReplying } = useSendMessage({ to: id, context });
const { msg, contactsData } = useAppSelector((store) => {
return { contactsData: store.contacts.byId, msg: store.message[mid] };
const { msg, usersData } = useAppSelector((store) => {
return { usersData: store.users.byId, msg: store.message[mid] };
});
const removeReply = () => {
removeReplying();
};
if (!msg) return null;
const { from_uid } = msg;
const user = contactsData[from_uid];
const user = usersData[from_uid];
return (
<Styled className="reply">
<div className="prefix">
src/common/component/Send/index.tsx
+4 -4
View File
@@ -39,13 +39,13 @@ function Send({
mode,
uploadFiles,
channelsData,
contactsData,
usersData,
uids
} = useAppSelector((store) => {
return {
channelsData: store.channels.byId,
uids: store.contacts.ids,
contactsData: store.contacts.byId,
uids: store.users.ids,
usersData: store.users.byId,
mode: store.ui.inputMode,
from_uid: store.authData.user?.uid,
replying_mid: store.message.replying[`${context}_${id}`],
@@ -127,7 +127,7 @@ function Send({
const toggleMarkdownFullscreen = () => {
setMarkdownFullscreen((prev) => !prev);
};
const name = context == "channel" ? channelsData[id]?.name : contactsData[id]?.name;
const name = context == "channel" ? channelsData[id]?.name : usersData[id]?.name;
const placeholder = `Send to ${ChatPrefixs[context]}${name} `;
const members =
context == "channel" ? (channelsData[id]?.is_public ? uids : channelsData[id]?.members) : [];
src/common/component/Server.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ export default function Server() {
const { pathname } = useLocation();
const { server, userCount } = useAppSelector((store) => {
return {
userCount: store.contacts.ids.length,
userCount: store.users.ids.length,
server: store.server
};
});
src/common/component/Contact/ContextMenu.tsx → src/common/component/User/ContextMenu.tsx
View File
src/common/component/Contact/index.tsx → src/common/component/User/index.tsx
+3 -3
View File
@@ -21,7 +21,7 @@ interface Props {
enableContextMenu?: boolean;
}
const Contact: FC<Props> = ({
const User: FC<Props> = ({
cid,
uid,
owner = false,
@@ -34,7 +34,7 @@ const Contact: FC<Props> = ({
}) => {
const navigate = useNavigate();
const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
const curr = useAppSelector((store) => store.contacts.byId[uid]);
const curr = useAppSelector((store) => store.users.byId[uid]);
const handleDoubleClick = () => {
navigate(`/chat/dm/${uid}`);
};
@@ -73,4 +73,4 @@ const Contact: FC<Props> = ({
);
};
export default Contact;
export default User;
src/common/component/Contact/styled.tsx → src/common/component/User/styled.tsx
View File
src/common/component/ContactsModal.tsx → src/common/component/UsersModal.tsx
+5 -6
View File
@@ -4,7 +4,7 @@ import { NavLink } from "react-router-dom";
import { useOutsideClick } from "rooks";
import useFilteredUsers from "../hook/useFilteredUsers";
import Contact from "./Contact";
import User from "./User";
import Modal from "./Modal";
const StyledWrapper = styled.div`
@@ -16,7 +16,6 @@ const StyledWrapper = styled.div`
box-shadow: 0 25px 50px rgba(31, 41, 55, 0.25);
border-radius: 8px;
transition: all 0.5s ease;
/* overflow-y: scroll; */
.search {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
padding: 8px;
@@ -58,7 +57,7 @@ interface Props {
const ContactsModal: FC<Props> = ({ closeModal }) => {
const wrapperRef = useRef<HTMLDivElement>(null);
const { contacts, updateInput, input } = useFilteredUsers();
const { users, updateInput, input } = useFilteredUsers();
useOutsideClick(wrapperRef, closeModal);
const handleSearch = (evt: ChangeEvent<HTMLInputElement>) => {
@@ -71,14 +70,14 @@ const ContactsModal: FC<Props> = ({ closeModal }) => {
<div className="search">
<input value={input} onChange={handleSearch} placeholder="Type Username to search" />
</div>
{contacts && (
{users && (
<ul className="users">
{contacts.map((u) => {
{users.map((u) => {
const { uid } = u;
return (
<li key={uid} className="user">
<NavLink onClick={closeModal} to={`/chat/dm/${uid}`}>
<Contact uid={uid} interactive={false} />
<User uid={uid} interactive={false} />
</NavLink>
</li>
);