refactor: rename contact with user

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
+4 -4
View File
@@ -11,7 +11,7 @@ import useMessageFeed from "../../../common/hook/useMessageFeed";
import useConfig from "../../../common/hook/useConfig";
import ChannelIcon from "../../../common/component/ChannelIcon";
import Tooltip from "../../../common/component/Tooltip";
import Contact from "../../../common/component/Contact";
import User from "../../../common/component/User";
import Layout from "../Layout";
import { renderMessageFragment } from "../utils";
import EditIcon from "../../../assets/icons/edit.svg";
@@ -66,7 +66,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
footprint: store.footprint,
loginUser: store.authData.user,
// msgIds: store.channelMessage[cid] || [],
userIds: store.contacts.ids,
userIds: store.users.ids,
data: store.channels.byId[cid] || {},
messageData: store.message || {}
};
@@ -183,7 +183,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
</div>
</StyledHeader>
}
contacts={
users={
membersVisible ? (
<>
<StyledContacts>
@@ -195,7 +195,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
)}
{memberIds.map((uid) => {
return (
<Contact
<User
enableContextMenu={true}
cid={cid}
owner={owner == uid}
+1 -1
View File
@@ -11,7 +11,7 @@ import Tooltip from "../../../common/component/Tooltip";
import IconSetting from "../../../assets/icons/setting.svg";
import IconInvite from "../../../assets/icons/invite.from.channel.svg";
import { useReadMessageMutation } from "../../../app/services/message";
import { useUpdateMuteSettingMutation } from "../../../app/services/contact";
import { useUpdateMuteSettingMutation } from "../../../app/services/user";
import StyledLink from "./styled";
import ChannelIcon from "../../../common/component/ChannelIcon";
import { getUnreadCount } from "../utils";
+3 -3
View File
@@ -8,7 +8,7 @@ import FavIcon from "../../../assets/icons/bookmark.svg";
// import IconHeadphone from "../../../assets/icons/headphone.svg";
// import useChatScroll from "../../../common/hook/useChatScroll";
import { useReadMessageMutation } from "../../../app/services/message";
import Contact from "../../../common/component/Contact";
import User from "../../../common/component/User";
import Layout from "../Layout";
import { StyledHeader, StyledDMChat } from "./styled";
import LoadMore from "../LoadMore";
@@ -34,7 +34,7 @@ export default function DMChat({ uid = 0, dropFiles = [] }) {
selects: store.ui.selectMessages[`user_${uid}`],
loginUid: store.authData.user?.uid,
footprint: store.footprint,
currUser: store.contacts.byId[uid],
currUser: store.users.byId[uid],
messageData: store.message
};
});
@@ -81,7 +81,7 @@ export default function DMChat({ uid = 0, dropFiles = [] }) {
}
header={
<StyledHeader className="head">
<Contact interactive={false} uid={currUser.uid} />
<User interactive={false} uid={currUser.uid} />
</StyledHeader>
}
>
+3 -3
View File
@@ -14,7 +14,7 @@ import useContextMenu from "../../../common/hook/useContextMenu";
import ContextMenu from "../../../common/component/ContextMenu";
dayjs.extend(relativeTime);
import { renderPreviewMessage } from "../utils";
import Contact from "../../../common/component/Contact";
import User from "../../../common/component/User";
import { ContentTypes } from "../../../app/config";
const NavItem = ({ uid, mid, unreads, setFiles }) => {
const [previewMsg, setPreviewMsg] = useState(null);
@@ -24,7 +24,7 @@ const NavItem = ({ uid, mid, unreads, setFiles }) => {
const [updateReadIndex] = useReadMessageMutation();
const { currMsg, currUser } = useSelector((store) => {
return {
currUser: store.contacts.byId[uid],
currUser: store.users.byId[uid],
currMsg: store.message[mid]
};
});
@@ -107,7 +107,7 @@ const NavItem = ({ uid, mid, unreads, setFiles }) => {
to={`/chat/dm/${uid}`}
onContextMenu={handleContextMenuEvent}
>
<Contact compact interactive={false} className="avatar" uid={uid} />
<User compact interactive={false} className="avatar" uid={uid} />
<div className="details">
<div className="up">
<span className="name">{currUser.name}</span>
+1 -1
View File
@@ -13,7 +13,7 @@ const DMList: FC<Props> = ({ uids, setDropFiles }) => {
return {
loginUid: store.authData.user?.uid,
readUsers: store.footprint.readUsers,
contactData: store.contacts.byId,
userData: store.users.byId,
userMessage: store.userMessage.byId,
messageData: store.message
};
+6 -6
View File
@@ -13,7 +13,7 @@ interface Props {
children: ReactElement;
header: ReactElement;
aside: ReactElement | null;
contacts: ReactElement | null;
users: ReactElement | null;
dropFiles: [];
context: string;
to: number | null;
@@ -23,7 +23,7 @@ const Layout: FC<Props> = ({
children,
header,
aside = null,
contacts = null,
users = null,
dropFiles = [],
context = "channel",
to = null
@@ -31,11 +31,11 @@ const Layout: FC<Props> = ({
const { addStageFile } = useUploadFile({ context, id: to });
const messagesContainer = useRef<HTMLDivElement>(null);
const [previewImage, setPreviewImage] = useState(null);
const { selects, channelsData, contactsData } = useAppSelector((store) => {
const { selects, channelsData, usersData } = useAppSelector((store) => {
return {
selects: store.ui.selectMessages[`${context}_${to}`],
channelsData: store.channels.byId,
contactsData: store.contacts.byId
usersData: store.users.byId
};
});
const [{ isActive }, drop] = useDrop(
@@ -95,7 +95,7 @@ const Layout: FC<Props> = ({
);
}
}, []);
const name = context == "channel" ? channelsData[to]?.name : contactsData[to]?.name;
const name = context == "channel" ? channelsData[to]?.name : usersData[to]?.name;
return (
<>
@@ -110,7 +110,7 @@ const Layout: FC<Props> = ({
{selects && <Operations context={context} id={to} />}
</div>
</div>
{contacts && <div className="members">{contacts}</div>}
{users && <div className="members">{users}</div>}
{aside && <div className="aside">{aside}</div>}
</main>
<div className={`drag_tip ${isActive ? "visible animate__animated animate__fadeIn" : ""}`}>
+1 -1
View File
@@ -1,7 +1,7 @@
import Tippy from "@tippyjs/react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate, useLocation, useMatch } from "react-router-dom";
import { useUpdateMuteSettingMutation } from "../../../app/services/contact";
import { useUpdateMuteSettingMutation } from "../../../app/services/user";
import { useReadMessageMutation } from "../../../app/services/message";
import { removeUserSession } from "../../../app/slices/message.user";
import ContextMenu from "../../../common/component/ContextMenu";
+6 -6
View File
@@ -6,7 +6,7 @@ import { NativeTypes } from "react-dnd-html5-backend";
import relativeTime from "dayjs/plugin/relativeTime";
import ContextMenu from "./ContextMenu";
import getUnreadCount, { renderPreviewMessage } from "../utils";
import Contact from "../../../common/component/Contact";
import User from "../../../common/component/User";
import Avatar from "../../../common/component/Avatar";
import iconChannel from "../../../assets/icons/channel.svg?url";
import IconLock from "../../../assets/icons/lock.svg";
@@ -51,7 +51,7 @@ export default function Session({
const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
const [data, setData] = useState(null);
const { messageData, contactData, channelData, readIndex, loginUid, mids, muted } = useSelector(
const { messageData, userData, channelData, readIndex, loginUid, mids, muted } = useSelector(
(store) => {
return {
mids: type == "user" ? store.userMessage.byId[id] : store.channelMessage[id],
@@ -59,7 +59,7 @@ export default function Session({
readIndex:
type == "user" ? store.footprint.readUsers[id] : store.footprint.readChannels[id],
messageData: store.message,
contactData: store.contacts.byId,
userData: store.users.byId,
channelData: store.channels.byId,
muted: type == "user" ? store.footprint.muteUsers[id] : store.footprint.muteChannels[id]
};
@@ -72,13 +72,13 @@ export default function Session({
};
useEffect(() => {
const tmp = type == "user" ? contactData[id] : channelData[id];
const tmp = type == "user" ? userData[id] : channelData[id];
if (!tmp) return;
const { name, icon, avatar, is_public = true } = tmp;
const session =
type == "user" ? { name, icon: avatar, mid, is_public } : { name, icon, mid, is_public };
setData(session);
}, [id, mid, type, contactData, channelData]);
}, [id, mid, type, userData, channelData]);
if (!data) return null;
const previewMsg = messageData[mid] || {};
const { name, icon, is_public } = data;
@@ -108,7 +108,7 @@ export default function Session({
>
<div className="icon">
{type == "user" ? (
<Contact avatarSize={40} compact interactive={false} className="avatar" uid={id} />
<User avatarSize={40} compact interactive={false} className="avatar" uid={id} />
) : (
<Avatar className="icon" type="channel" name={name} url={icon} />
// <img
+4 -4
View File
@@ -10,12 +10,12 @@ 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 User from "../../common/component/User";
// 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 ContactsModal from "../../common/component/UsersModal";
import ChannelModal from "../../common/component/ChannelModal";
import DMList from "./DMList";
@@ -28,7 +28,7 @@ export default function ChatPage() {
};
});
const [channelModalVisible, setChannelModalVisible] = useState(false);
const [contactsModalVisible, setContactsModalVisible] = useState(false);
const [usersModalVisible, setContactsModalVisible] = useState(false);
const { channel_id, user_id } = useParams();
const toggleContactsModalVisible = () => {
setContactsModalVisible((prev) => !prev);
@@ -49,7 +49,7 @@ export default function ChatPage() {
{channelModalVisible && (
<ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
)}
{contactsModalVisible && <ContactsModal closeModal={toggleContactsModalVisible} />}
{usersModalVisible && <ContactsModal closeModal={toggleContactsModalVisible} />}
<StyledWrapper>
<div className="left">
<Server />
+3 -3
View File
@@ -9,12 +9,12 @@ import Server from "../../common/component/Server";
import CurrentUser from "../../common/component/CurrentUser";
import ChannelChat from "./ChannelChat";
import DMChat from "./DMChat";
import ContactsModal from "../../common/component/ContactsModal";
import ContactsModal from "../../common/component/UsersModal";
import ChannelModal from "../../common/component/ChannelModal";
import SessionList from "./SessionList";
export default function ChatPage() {
const [channelModalVisible, setChannelModalVisible] = useState(false);
const [contactsModalVisible, setContactsModalVisible] = useState(false);
const [usersModalVisible, setContactsModalVisible] = useState(false);
const { channel_id, user_id } = useParams();
const { sessionUids } = useSelector((store) => {
return {
@@ -38,7 +38,7 @@ export default function ChatPage() {
{channelModalVisible && (
<ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
)}
{contactsModalVisible && <ContactsModal closeModal={toggleContactsModalVisible} />}
{usersModalVisible && <ContactsModal closeModal={toggleContactsModalVisible} />}
<StyledWrapper>
<div className="left">
<Server />
+3 -3
View File
@@ -1,6 +1,6 @@
import { useState } from "react";
// import { useUpdateChannelMutation } from "../../app/services/channel";
import { useUpdateMuteSettingMutation } from "../../app/services/contact";
import { useUpdateMuteSettingMutation } from "../../app/services/user";
import { useReadMessageMutation } from "../../app/services/message";
import { useAppSelector } from "../../app/store";
@@ -8,10 +8,10 @@ export default function useSession({ type, id }) {
const [inviteModalVisible, setInviteModalVisible] = useState(false);
const [muteChannel] = useUpdateMuteSettingMutation();
const [updateReadIndex] = useReadMessageMutation();
const { messageData, contactData, channelData } = useAppSelector((store) => {
const { messageData, userData, channelData } = useAppSelector((store) => {
return {
messageData: store.message,
contactData: store.contacts.byId,
userData: store.users.byId,
channelData: store.channels.byId
};
});
+1 -1
View File
@@ -44,7 +44,7 @@ function FavsPage() {
console.log("favs", store.favorites);
return {
favorites: store.favorites,
userData: store.contacts.byId,
userData: store.users.byId,
channelData: store.channels.byId
};
});
+1 -1
View File
@@ -24,7 +24,7 @@ interface Props {
const User: FC<Props> = ({ uid }) => {
const { pathname } = useLocation();
const user = useAppSelector((store) => store.contacts.byId[uid]);
const user = useAppSelector((store) => store.users.byId[uid]);
if (!user) return null;
return (
+4 -4
View File
@@ -13,7 +13,7 @@ import Notification from "../../common/component/Notification";
import Manifest from "../../common/component/Manifest";
import ChatIcon from "../../assets/icons/chat.svg";
import ContactIcon from "../../assets/icons/contact.svg";
import ContactIcon from "../../assets/icons/user.svg";
import FavIcon from "../../assets/icons/bookmark.svg";
import FolderIcon from "../../assets/icons/folder.svg";
import { useAppSelector } from "../../app/store";
@@ -27,7 +27,7 @@ export default function HomePage() {
loginUid,
ui: {
ready,
remeberedNavs: { chat: chatPath, contact: contactPath }
remeberedNavs: { chat: chatPath, user: userPath }
}
} = useAppSelector((store) => {
return {
@@ -52,7 +52,7 @@ export default function HomePage() {
}
// 有点绕
const chatNav = isChatHomePath ? "/chat" : chatPath || "/chat";
const contactNav = contactPath || "/contacts";
const userNav = userPath || "/users";
return (
<>
@@ -72,7 +72,7 @@ export default function HomePage() {
<ChatIcon />
</Tooltip>
</NavLink>
<NavLink className="link" to={contactNav}>
<NavLink className="link" to={userNav}>
<Tooltip tip="Members">
<ContactIcon />
</Tooltip>
+6 -11
View File
@@ -1,7 +1,7 @@
import { useEffect } from "react";
import initCache, { useRehydrate } from "../../app/cache";
import { useLazyGetFavoritesQuery } from "../../app/services/message";
import { useLazyGetContactsQuery } from "../../app/services/contact";
import { useLazyGetContactsQuery } from "../../app/services/user";
import { useLazyGetServerQuery } from "../../app/services/server";
import useStreaming from "../../common/hook/useStreaming";
import { useAppSelector } from "../../app/store";
@@ -27,12 +27,7 @@ export default function usePreload() {
] = useLazyGetFavoritesQuery();
const [
getContacts,
{
isLoading: contactsLoading,
isSuccess: contactsSuccess,
isError: contactsError,
data: contacts
}
{ isLoading: usersLoading, isSuccess: usersSuccess, isError: usersError, data: users }
] = useLazyGetContactsQuery();
const [
getServer,
@@ -61,11 +56,11 @@ export default function usePreload() {
}, [canStreaming]);
return {
loading: contactsLoading || serverLoading || favoritesLoading || !rehydrated,
error: contactsError && serverError && favoritesError,
success: contactsSuccess && serverSuccess && favoritesSuccess,
loading: usersLoading || serverLoading || favoritesLoading || !rehydrated,
error: usersError && serverError && favoritesError,
success: usersSuccess && serverSuccess && favoritesSuccess,
data: {
contacts,
users,
server,
favorites
}
+2 -2
View File
@@ -12,7 +12,7 @@ const SendMagicLinkPage = lazy(() => import("./sendMagicLink"));
const RegPage = lazy(() => import("./reg/Register"));
const LoginPage = lazy(() => import("./login"));
const OAuthPage = lazy(() => import("./oauth"));
const ContactsPage = lazy(() => import("./contacts"));
const ContactsPage = lazy(() => import("./users"));
const FavoritesPage = lazy(() => import("./favs"));
const OnboardingPage = lazy(() => import("./onboarding"));
const InvitePage = lazy(() => import("./invite"));
@@ -138,7 +138,7 @@ const PageRoutes = () => {
}
/>
</Route>
<Route path="contacts">
<Route path="users">
<Route
index
element={
+1 -1
View File
@@ -77,7 +77,7 @@ export default function LoginPage() {
break;
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:
+4 -4
View File
@@ -58,11 +58,11 @@ export const Dates = {
};
export default function Date({ select = "", updateFilter }) {
// const { input, updateInput, contacts } = useFilteredUsers();
// const contacts=useSelector(store=>store.contacts);
// const { input, updateInput, users } = useFilteredUsers();
// const users=useSelector(store=>store.users);
// const uid=contacts.ids;
// const dataMap=contacts.byId;
// const uid=users.ids;
// const dataMap=users.byId;
const handleClick = (dur) => {
updateFilter({ date: dur });
};
+10 -10
View File
@@ -1,7 +1,7 @@
import styled from "styled-components";
import Search from "../Search";
import CheckSign from "../../../assets/icons/check.sign.svg";
import Contact from "../../../common/component/Contact";
import User from "../../../common/component/User";
import useFilteredUsers from "../../../common/hook/useFilteredUsers";
const Styled = styled.div`
@@ -28,7 +28,7 @@ const Styled = styled.div`
width: 100%;
display: flex;
flex-direction: column;
.contact {
.user {
position: relative;
cursor: pointer;
&.none {
@@ -49,11 +49,11 @@ const Styled = styled.div`
`;
export default function From({ select = "", updateFilter }) {
const { input, updateInput, contacts } = useFilteredUsers();
// const contacts=useSelector(store=>store.contacts);
const { input, updateInput, users } = useFilteredUsers();
// const users=useSelector(store=>store.users);
// const uid=contacts.ids;
// const dataMap=contacts.byId;
// const uid=users.ids;
// const dataMap=users.byId;
const handleClick = (uid) => {
updateFilter({ from: uid });
};
@@ -64,14 +64,14 @@ export default function From({ select = "", updateFilter }) {
<Search embed={true} value={input} updateSearchValue={updateInput} />
</div>
<ul className="list">
<li className="contact none" onClick={handleClick.bind(null, undefined)}>
<li className="user none" onClick={handleClick.bind(null, undefined)}>
Anyone
{!select && <CheckSign className="check" />}
</li>
{contacts.map(({ uid }) => {
{users.map(({ uid }) => {
return (
<li key={uid} className="contact" onClick={handleClick.bind(null, uid)}>
<Contact uid={uid} interactive={true} />
<li key={uid} className="user" onClick={handleClick.bind(null, uid)}>
<User uid={uid} interactive={true} />
{select == uid && <CheckSign className="check" />}
</li>
);
+4 -4
View File
@@ -78,11 +78,11 @@ export const FileTypes = {
}
};
export default function Type({ select = "", updateFilter }) {
// const { input, updateInput, contacts } = useFilteredUsers();
// const contacts=useSelector(store=>store.contacts);
// const { input, updateInput, users } = useFilteredUsers();
// const users=useSelector(store=>store.users);
// const uid=contacts.ids;
// const dataMap=contacts.byId;
// const uid=users.ids;
// const dataMap=users.byId;
const handleClick = (type) => {
updateFilter({ type });
};
+4 -4
View File
@@ -65,8 +65,8 @@ export default function Filter({ filter, updateFilter }) {
};
toggleFilterVisible(tmp);
};
const { contactMap, channelMap } = useAppSelector((store) => {
return { contactMap: store.contacts.byId, channelMap: store.channels.byId };
const { userMap, channelMap } = useAppSelector((store) => {
return { userMap: store.users.byId, channelMap: store.channels.byId };
});
const { from, channel, type, date } = filter;
@@ -91,9 +91,9 @@ export default function Filter({ filter, updateFilter }) {
onClick={toggleFilterVisible.bind(null, { from: true })}
>
{from && (
<Avatar className="avatar" name={contactMap[from].name} url={contactMap[from].avatar} />
<Avatar className="avatar" name={userMap[from].name} url={userMap[from].avatar} />
)}
<span className="txt">From {from && contactMap[from].name}</span>
<span className="txt">From {from && userMap[from].name}</span>
<ArrowDown className="arrow" />
</div>
</Tippy>
+1 -1
View File
@@ -1,7 +1,7 @@
import { useEffect, useState, MouseEvent } from "react";
import styled from "styled-components";
import toast from "react-hot-toast";
import { useUpdateAvatarMutation } from "../../app/services/contact";
import { useUpdateAvatarMutation } from "../../app/services/user";
import AvatarUploader from "../../common/component/AvatarUploader";
import ProfileBasicEditModal from "./ProfileBasicEditModal";
import UpdatePasswordModal from "./UpdatePasswordModal";
+1 -1
View File
@@ -2,7 +2,7 @@ import { ChangeEvent, FC, useEffect, useState } from "react";
import styled from "styled-components";
import toast from "react-hot-toast";
import Input from "../../common/component/styled/Input";
import { useUpdateInfoMutation } from "../../app/services/contact";
import { useUpdateInfoMutation } from "../../app/services/user";
import StyledModal from "../../common/component/styled/Modal";
import Button from "../../common/component/styled/Button";
import Modal from "../../common/component/Modal";
@@ -3,7 +3,7 @@ import { NavLink, useParams, useLocation } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { updateRemeberedNavs } from "../../app/slices/ui";
import Search from "../../common/component/Search";
import Contact from "../../common/component/Contact";
import User from "../../common/component/User";
import Profile from "../../common/component/Profile";
import StyledWrapper from "./styled";
@@ -14,26 +14,26 @@ export default function ContactsPage() {
const { pathname } = useLocation();
const { user_id } = useParams();
const contactIds = useSelector((store) => store.contacts.ids);
const userIds = useSelector((store) => store.users.ids);
useEffect(() => {
dispatch(updateRemeberedNavs({ key: "contact" }));
dispatch(updateRemeberedNavs({ key: "user" }));
return () => {
dispatch(updateRemeberedNavs({ key: "contact", path: pathname }));
dispatch(updateRemeberedNavs({ key: "user", path: pathname }));
};
}, [pathname]);
console.log({ contactIds, user_id });
if (!contactIds) return null;
console.log({ userIds, user_id });
if (!userIds) return null;
return (
<StyledWrapper>
<div className="left">
<Search />
<div className="list">
<nav className="nav">
{contactIds.map((uid) => {
{userIds.map((uid) => {
return (
<NavLink key={uid} className="session" to={`/contacts/${uid}`}>
<Contact uid={uid} enableContextMenu={true} />
<NavLink key={uid} className="session" to={`/users/${uid}`}>
<User uid={uid} enableContextMenu={true} />
</NavLink>
);
})}
@@ -47,7 +47,7 @@ export default function ContactsPage() {
</div>
) : (
<div className="right placeholder">
<BlankPlaceholder type="contact" />
<BlankPlaceholder type="user" />
</div>
)}
</StyledWrapper>