mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-09 16:53:36 -05:00
Link to profiles from message / member sidebar.
This commit is contained in:
parent
bf1eb2c6d1
commit
7982489ab6
4 changed files with 30 additions and 19 deletions
|
@ -14,6 +14,7 @@ import { useContext } from "preact/hooks";
|
|||
import { AppContext } from "../../../context/revoltjs/RevoltClient";
|
||||
import { memo } from "preact/compat";
|
||||
import { MessageReply } from "./attachments/MessageReply";
|
||||
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
||||
|
||||
interface Props {
|
||||
attachContext?: boolean
|
||||
|
@ -29,10 +30,13 @@ function Message({ attachContext, message, contrast, content: replacement, head:
|
|||
// TODO: of dependencies. We only need to update on u/avatar.
|
||||
const user = useUser(message.author);
|
||||
const client = useContext(AppContext);
|
||||
const { openScreen } = useIntermediate();
|
||||
|
||||
const content = message.content as string;
|
||||
const head = preferHead || (message.replies && message.replies.length > 0);
|
||||
|
||||
const userContext = attachContext ? attachContextMenu('Menu', { user: message.author, contextualChannel: message.channel }) : undefined as any; // ! FIXME: tell fatal to make this type generic
|
||||
const openProfile = () => openScreen({ id: 'profile', user_id: message.author });
|
||||
|
||||
return (
|
||||
<div id={message._id}>
|
||||
|
@ -46,13 +50,13 @@ function Message({ attachContext, message, contrast, content: replacement, head:
|
|||
onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel, queued }) : undefined}>
|
||||
<MessageInfo>
|
||||
{ head ?
|
||||
<UserIcon target={user} size={36} onContextMenu={userContext} /> :
|
||||
<UserIcon target={user} size={36} onContextMenu={userContext} onClick={openProfile} /> :
|
||||
<MessageDetail message={message} position="left" /> }
|
||||
</MessageInfo>
|
||||
<MessageContent>
|
||||
{ head && <span className="detail">
|
||||
<span className="author">
|
||||
<Username user={user} onContextMenu={userContext} />
|
||||
<Username user={user} onContextMenu={userContext} onClick={openProfile} />
|
||||
</span>
|
||||
<MessageDetail message={message} position="top" />
|
||||
</span> }
|
||||
|
|
|
@ -14,7 +14,7 @@ import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
|
|||
import { useIntermediate } from '../../../context/intermediate/Intermediate';
|
||||
import { stopPropagation } from '../../../lib/stopPropagation';
|
||||
|
||||
interface CommonProps {
|
||||
type CommonProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
|
||||
active?: boolean
|
||||
alert?: 'unread' | 'mention'
|
||||
alertCount?: number
|
||||
|
@ -26,11 +26,12 @@ type UserProps = CommonProps & {
|
|||
channel?: Channels.DirectMessageChannel
|
||||
}
|
||||
|
||||
export function UserButton({ active, alert, alertCount, user, context, channel }: UserProps) {
|
||||
export function UserButton(props: UserProps) {
|
||||
const { active, alert, alertCount, user, context, channel, ...divProps } = props;
|
||||
const { openScreen } = useIntermediate();
|
||||
|
||||
return (
|
||||
<div
|
||||
<div {...divProps}
|
||||
className={classNames(styles.item, styles.user)}
|
||||
data-active={active}
|
||||
data-alert={typeof alert === 'string'}
|
||||
|
@ -85,7 +86,9 @@ type ChannelProps = CommonProps & {
|
|||
compact?: boolean
|
||||
}
|
||||
|
||||
export function ChannelButton({ active, alert, alertCount, channel, user, compact }: ChannelProps) {
|
||||
export function ChannelButton(props: ChannelProps) {
|
||||
const { active, alert, alertCount, channel, user, compact, ...divProps } = props;
|
||||
|
||||
if (channel.channel_type === 'SavedMessages') throw "Invalid channel type.";
|
||||
if (channel.channel_type === 'DirectMessage') {
|
||||
if (typeof user === 'undefined') throw "No user provided.";
|
||||
|
@ -95,9 +98,10 @@ export function ChannelButton({ active, alert, alertCount, channel, user, compac
|
|||
const { openScreen } = useIntermediate();
|
||||
|
||||
return (
|
||||
<div data-active={active}
|
||||
<div {...divProps}
|
||||
data-active={active}
|
||||
data-alert={typeof alert === 'string'}
|
||||
aria-label={{}} /*TOFIX: ADD ARIA LABEL*/
|
||||
aria-label={{}} /*FIXME: ADD ARIA LABEL*/
|
||||
className={classNames(styles.item, { [styles.compact]: compact })}
|
||||
onContextMenu={attachContextMenu('Menu', { channel: channel._id, unread: typeof channel.unread !== 'undefined' })}>
|
||||
<ChannelIcon className={styles.avatar} target={channel} size={compact ? 24 : 32} />
|
||||
|
@ -138,9 +142,12 @@ type ButtonProps = CommonProps & {
|
|||
compact?: boolean
|
||||
}
|
||||
|
||||
export default function ButtonItem({ active, alert, alertCount, onClick, className, children, compact }: ButtonProps) {
|
||||
export default function ButtonItem(props: ButtonProps) {
|
||||
const { active, alert, alertCount, onClick, className, children, compact, ...divProps } = props;
|
||||
|
||||
return (
|
||||
<div className={classNames(styles.item, { [styles.compact]: compact, [styles.normal]: !compact }, className)}
|
||||
<div {...divProps}
|
||||
className={classNames(styles.item, { [styles.compact]: compact, [styles.normal]: !compact }, className)}
|
||||
onClick={onClick}
|
||||
data-active={active}
|
||||
data-alert={typeof alert === 'string'}>
|
||||
|
|
|
@ -8,11 +8,12 @@ import { UserButton } from "../items/ButtonItem";
|
|||
import { ChannelDebugInfo } from "./ChannelDebugInfo";
|
||||
import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
|
||||
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
|
||||
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
||||
import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
|
||||
import { AppContext, ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
|
||||
import { HookContext, useChannel, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
|
||||
|
||||
import placeholderSVG from "../items/placeholder.svg";
|
||||
import { AppContext, ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
|
||||
|
||||
interface Props {
|
||||
ctx: HookContext
|
||||
|
@ -31,6 +32,7 @@ export default function MemberSidebar(props: { channel?: Channels.Channel }) {
|
|||
}
|
||||
|
||||
export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels.GroupChannel }) {
|
||||
const { openScreen } = useIntermediate();
|
||||
const users = useUsers(undefined, ctx);
|
||||
let members = channel.recipients
|
||||
.map(x => users.find(y => y?._id === x))
|
||||
|
@ -112,13 +114,11 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels
|
|||
{members.map(
|
||||
user =>
|
||||
user && (
|
||||
// <LinkProfile user_id={user._id}>
|
||||
<UserButton
|
||||
key={user._id}
|
||||
user={user}
|
||||
context={channel}
|
||||
/>
|
||||
// </LinkProfile>
|
||||
<UserButton
|
||||
key={user._id}
|
||||
user={user}
|
||||
context={channel}
|
||||
onClick={() => openScreen({ id: 'profile', user_id: user._id })} />
|
||||
)
|
||||
)}
|
||||
</GenericSidebarList>
|
||||
|
|
|
@ -98,7 +98,7 @@ export default function Intermediate(props: Props) {
|
|||
const navigate = (path: string) => history.push(path);
|
||||
|
||||
const subs = [
|
||||
internalSubscribe("Intermediate", "open_profile", openProfile),
|
||||
internalSubscribe("Intermediate", "openProfile", openProfile),
|
||||
internalSubscribe("Intermediate", "navigate", navigate)
|
||||
]
|
||||
|
||||
|
|
Loading…
Reference in a new issue