diff --git a/package.json b/package.json index 0abe86cb..400a6003 100644 --- a/package.json +++ b/package.json @@ -97,7 +97,7 @@ "react-router-dom": "^5.2.0", "react-scroll": "^1.8.2", "redux": "^4.1.0", - "revolt.js": "5.0.0-alpha.12", + "revolt.js": "5.0.0-alpha.14", "rimraf": "^3.0.2", "sass": "^1.35.1", "shade-blend-color": "^1.0.0", diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index 78a1b1a7..bd35492f 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -1,5 +1,6 @@ import { Send, ShieldX } from "@styled-icons/boxicons-solid"; import Axios, { CancelTokenSource } from "axios"; +import { observer } from "mobx-react-lite"; import { ChannelPermission } from "revolt.js/dist/api/permissions"; import { Channel } from "revolt.js/dist/maps/Channels"; import styled from "styled-components"; @@ -108,7 +109,7 @@ const Action = styled.div` // ! FIXME: add to app config and load from app config export const CAN_UPLOAD_AT_ONCE = 4; -export default function MessageBox({ channel }: Props) { +export default observer(({ channel }: Props) => { const [draft, setDraft] = useState(getState().drafts[channel._id] ?? ""); const [uploadState, setUploadState] = useState({ @@ -506,4 +507,4 @@ export default function MessageBox({ channel }: Props) { ); -} +}); diff --git a/src/context/intermediate/popovers/UserProfile.tsx b/src/context/intermediate/popovers/UserProfile.tsx index c0d4bb46..8c7ffc1c 100644 --- a/src/context/intermediate/popovers/UserProfile.tsx +++ b/src/context/intermediate/popovers/UserProfile.tsx @@ -1,5 +1,6 @@ import { Money } from "@styled-icons/boxicons-regular"; import { Envelope, Edit, UserPlus, Shield } from "@styled-icons/boxicons-solid"; +import { observer } from "mobx-react-lite"; import { Link, useHistory } from "react-router-dom"; import { Profile, RelationshipStatus } from "revolt-api/types/Users"; import { UserPermission } from "revolt.js/dist/api/permissions"; @@ -41,297 +42,314 @@ enum Badges { EarlyAdopter = 256, } -export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) { - const { openScreen, writeClipboard } = useIntermediate(); +export const UserProfile = observer( + ({ user_id, onClose, dummy, dummyProfile }: Props) => { + const { openScreen, writeClipboard } = useIntermediate(); - const [profile, setProfile] = useState( - undefined, - ); - const [mutual, setMutual] = useState< - undefined | null | Route<"GET", "/users/id/mutual">["response"] - >(undefined); + const [profile, setProfile] = useState( + undefined, + ); + const [mutual, setMutual] = useState< + undefined | null | Route<"GET", "/users/id/mutual">["response"] + >(undefined); - const history = useHistory(); - const client = useClient(); - const status = useContext(StatusContext); - const [tab, setTab] = useState("profile"); + const history = useHistory(); + const client = useClient(); + const status = useContext(StatusContext); + const [tab, setTab] = useState("profile"); - const user = client.users.get(user_id); - if (!user) { - useEffect(onClose, []); - return null; - } + const user = client.users.get(user_id); + if (!user) { + useEffect(onClose, []); + return null; + } - const users = mutual?.users.map((id) => client.users.get(id)); + const users = mutual?.users.map((id) => client.users.get(id)); - const mutualGroups = [...client.channels.values()].filter( - (channel) => - channel?.channel_type === "Group" && - channel.recipient_ids!.includes(user_id), - ); + const mutualGroups = [...client.channels.values()].filter( + (channel) => + channel?.channel_type === "Group" && + channel.recipient_ids!.includes(user_id), + ); - useLayoutEffect(() => { - if (!user_id) return; - if (typeof profile !== "undefined") setProfile(undefined); - if (typeof mutual !== "undefined") setMutual(undefined); - }, [user_id]); - - if (dummy) { useLayoutEffect(() => { - setProfile(dummyProfile); - }, [dummyProfile]); - } + if (!user_id) return; + if (typeof profile !== "undefined") setProfile(undefined); + if (typeof mutual !== "undefined") setMutual(undefined); + }, [user_id]); - useEffect(() => { - if (dummy) return; - if (status === ClientStatus.ONLINE && typeof mutual === "undefined") { - setMutual(null); - user.fetchMutual().then(setMutual); + if (dummy) { + useLayoutEffect(() => { + setProfile(dummyProfile); + }, [dummyProfile]); } - }, [mutual, status]); - useEffect(() => { - if (dummy) return; - if (status === ClientStatus.ONLINE && typeof profile === "undefined") { - setProfile(null); - - if (user.permission & UserPermission.ViewProfile) { - user.fetchProfile() - .then(setProfile) - .catch(() => {}); + useEffect(() => { + if (dummy) return; + if ( + status === ClientStatus.ONLINE && + typeof mutual === "undefined" + ) { + setMutual(null); + user.fetchMutual().then(setMutual); } - } - }, [profile, status]); + }, [mutual, status]); - const backgroundURL = - profile && - client.generateFileURL(profile.background, { width: 1000 }, true); - const badges = user.badges ?? 0; + useEffect(() => { + if (dummy) return; + if ( + status === ClientStatus.ONLINE && + typeof profile === "undefined" + ) { + setProfile(null); - return ( - -
-
- -
- - writeClipboard(user.username)}> - @{user.username} - - - {user.status?.text && ( - - - + if (user.permission & UserPermission.ViewProfile) { + user.fetchProfile() + .then(setProfile) + .catch(() => {}); + } + } + }, [profile, status]); + + const backgroundURL = + profile && + client.generateFileURL(profile.background, { width: 1000 }, true); + const badges = user.badges ?? 0; + + return ( + +
+
+ +
+ + + writeClipboard(user.username) + }> + @{user.username} + + + {user.status?.text && ( + + + + )} +
+ {user.relationship === RelationshipStatus.Friend && ( + + + }> + { + onClose(); + history.push(`/open/${user_id}`); + }}> + + + + + )} + {user.relationship === RelationshipStatus.User && ( + { + onClose(); + if (dummy) return; + history.push(`/settings/profile`); + }}> + + + )} + {(user.relationship === RelationshipStatus.Incoming || + user.relationship === RelationshipStatus.None) && ( + user.addFriend()}> + + + )} +
+
+
setTab("profile")}> + +
+ {user.relationship !== RelationshipStatus.User && ( + <> +
setTab("friends")}> + +
+
setTab("groups")}> + +
+ )}
- {user.relationship === RelationshipStatus.Friend && ( - - - }> - { - onClose(); - history.push(`/open/${user_id}`); - }}> - - - - - )} - {user.relationship === RelationshipStatus.User && ( - { - onClose(); - if (dummy) return; - history.push(`/settings/profile`); - }}> - - - )} - {(user.relationship === RelationshipStatus.Incoming || - user.relationship === RelationshipStatus.None) && ( - user.addFriend()}> - - - )}
-
-
setTab("profile")}> - -
- {user.relationship !== RelationshipStatus.User && ( - <> -
setTab("friends")}> - -
-
setTab("groups")}> - -
- - )} -
-
-
- {tab === "profile" && ( -
- {!(profile?.content || badges > 0) && ( -
- -
- )} - {badges > 0 && ( -
- -
- )} - {badges > 0 && ( -
- - {badges & Badges.Developer ? ( - - }> - - - ) : ( - <> - )} - {badges & Badges.Translator ? ( - - }> - - - ) : ( - <> - )} - {badges & Badges.EarlyAdopter ? ( - - }> - - - ) : ( - <> - )} - {badges & Badges.Supporter ? ( - - }> - - - ) : ( - <> - )} - {badges & Badges.ResponsibleDisclosure ? ( - - }> - - - ) : ( - <> - )} - -
- )} - {profile?.content && ( -
- -
- )} - - {/*
*/} -
- )} - {tab === "friends" && - (users ? ( -
- {users.length === 0 ? ( +
+ {tab === "profile" && ( +
+ {!(profile?.content || badges > 0) && (
- + +
+ )} + {badges > 0 && ( +
+ +
+ )} + {badges > 0 && ( +
+ + {badges & Badges.Developer ? ( + + }> + + + ) : ( + <> + )} + {badges & Badges.Translator ? ( + + }> + + + ) : ( + <> + )} + {badges & Badges.EarlyAdopter ? ( + + }> + + + ) : ( + <> + )} + {badges & Badges.Supporter ? ( + + }> + + + ) : ( + <> + )} + {badges & + Badges.ResponsibleDisclosure ? ( + + }> + + + ) : ( + <> + )} + +
+ )} + {profile?.content && ( +
+ +
+ )} + + {/*
*/} +
+ )} + {tab === "friends" && + (users ? ( +
+ {users.length === 0 ? ( +
+ +
+ ) : ( + users.map( + (x) => + x && ( +
+ openScreen({ + id: "profile", + user_id: x._id, + }) + } + className={styles.entry} + key={x._id}> + + {x.username} +
+ ), + ) + )} +
+ ) : ( + + ))} + {tab === "groups" && ( +
+ {mutualGroups.length === 0 ? ( +
+
) : ( - users.map( + mutualGroups.map( (x) => - x && ( -
- openScreen({ - id: "profile", - user_id: x._id, - }) - } - className={styles.entry} - key={x._id}> - - {x.username} -
+ x?.channel_type === "Group" && ( + +
+ + {x.name} +
+ ), ) )}
- ) : ( - - ))} - {tab === "groups" && ( -
- {mutualGroups.length === 0 ? ( -
- -
- ) : ( - mutualGroups.map( - (x) => - x?.channel_type === "Group" && ( - -
- - {x.name} -
- - ), - ) - )} -
- )} -
- - ); -} + )} +
+ + ); + }, +); diff --git a/src/pages/settings/ChannelSettings.tsx b/src/pages/settings/ChannelSettings.tsx index 1cd7fecc..80765655 100644 --- a/src/pages/settings/ChannelSettings.tsx +++ b/src/pages/settings/ChannelSettings.tsx @@ -30,7 +30,7 @@ export default function ChannelSettings() { switch (channel?.channel_type) { case "TextChannel": case "VoiceChannel": - base_url = `/server/${channel.server}/channel/${cid}/settings`; + base_url = `/server/${channel.server_id}/channel/${cid}/settings`; break; default: base_url = `/channel/${cid}/settings`; diff --git a/src/pages/settings/server/Members.tsx b/src/pages/settings/server/Members.tsx index c7b0c799..bdae55a1 100644 --- a/src/pages/settings/server/Members.tsx +++ b/src/pages/settings/server/Members.tsx @@ -27,8 +27,6 @@ export const Members = observer(({ server }: Props) => { { members: Member[]; users: User[] } | undefined >(undefined); - const client = useClient(); - useEffect(() => { server.fetchMembers().then(setData); }, []); @@ -50,10 +48,12 @@ export const Members = observer(({ server }: Props) => { {data && data.members.length > 0 && data.members - .map((member, index) => { + .map((member) => { return { member, - user: data.users[index], + user: data.users.find( + (x) => x._id === member._id.user, + ), }; }) .map(({ member, user }) => ( diff --git a/yarn.lock b/yarn.lock index f95d6a07..b3d77048 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3570,10 +3570,10 @@ revolt-api@0.5.1-alpha.10-patch.0: resolved "https://registry.yarnpkg.com/revolt-api/-/revolt-api-0.5.1-alpha.10-patch.0.tgz#97d31bec7dfa4573567097443acb059c4feaac20" integrity sha512-UyM890HkGlYNQOxpHuEpUsJHLt8Ujnjg9/zPEDGpbvS4iy0jmHX23Hh8tOCfb/ewxbNrtT3G1HpSWKOneW/vYg== -revolt.js@5.0.0-alpha.12: - version "5.0.0-alpha.12" - resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-5.0.0-alpha.12.tgz#06777f74f6a79161b18e02938a8d60d465395066" - integrity sha512-QqgawsSjrFTKhMA5JBKii6MgOJ4VO2u1GBmjTiKzPR2krnoWHdPSbD7VvD2scMGMPXIaIxU3zA++tyN8mfzIFg== +revolt.js@5.0.0-alpha.14: + version "5.0.0-alpha.14" + resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-5.0.0-alpha.14.tgz#13b1d350a89467eb2ad6905a290ee1fada4150c1" + integrity sha512-kZBIx9PX8Y8Esu51Y6OgeFwlpajtaRv/ap3YKlWEELlAcDAEDoSZj+iL4ilkxIxvh4RDJMlVlAforwSvXvy9DQ== dependencies: axios "^0.19.2" eventemitter3 "^4.0.7"