w3irdrobot/snort
1
0
Fork 0
forked from Kieran/snort
Code Pull Requests Activity

Fix dm navigation

Browse Source
This commit is contained in:
Kieran 2023-06-27 11:25:21 +01:00
parent 9f114ffb44
commit 7d6fed6da7
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
1 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
packages/app/src/Pages/MessagesPage.tsx
View File

@ -1,4 +1,4 @@
import React, { useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { NostrPrefix } from "@snort/system"; import { NostrPrefix } from "@snort/system";
@ -30,27 +30,34 @@ export default function MessagesPage() {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const navigate = useNavigate(); const navigate = useNavigate();
const { id } = useParams(); const { id } = useParams();
const parsedId = parseId(id ?? ""); const [chat, setChat] = useState<string>();
const [chat, setChat] = useState(id ? parsedId : undefined);
const pageWidth = usePageWidth(); const pageWidth = usePageWidth();
useEffect(() => {
const parsedId = parseId(id ?? "");
setChat(id ? parsedId : undefined);
}, [id]);
const chats = useChatSystem(); const chats = useChatSystem();
const unreadCount = useMemo(() => chats.reduce((p, c) => p + c.unread, 0), [chats]); const unreadCount = useMemo(() => chats.reduce((p, c) => p + c.unread, 0), [chats]);
function openChat(e: React.MouseEvent<HTMLDivElement>, pubkey: string) { function openChat(e: React.MouseEvent<HTMLDivElement>, type: ChatType, id: string) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
if (pageWidth < TwoCol) { if (type === ChatType.DirectMessage) {
navigate(`/messages/${hexToBech32(NostrPrefix.PublicKey, pubkey)}`); navigate(`/messages/${hexToBech32(NostrPrefix.PublicKey, id)}`, {
replace: true,
});
} else { } else {
setChat(pubkey); navigate(`/messages/${encodeURIComponent(id)}`, {
replace: true,
});
} }
} }
function noteToSelf(chat: Chat) { function noteToSelf(chat: Chat) {
return ( return (
<div className="flex mb10" key={chat.id} onClick={e => openChat(e, chat.id)}> <div className="flex mb10" key={chat.id} onClick={e => openChat(e, chat.type, chat.id)}>
<NoteToSelf clickable={true} className="f-grow" link="" pubkey={chat.id} /> <NoteToSelf clickable={true} className="f-grow" link="" pubkey={chat.id} />
</div> </div>
); );
@ -60,7 +67,7 @@ export default function MessagesPage() {
if (!login.publicKey) return null; if (!login.publicKey) return null;
if (chat.id === login.publicKey) return noteToSelf(chat); if (chat.id === login.publicKey) return noteToSelf(chat);
return ( return (
<div className="flex mb10" key={chat.id} onClick={e => openChat(e, chat.id)}> <div className="flex mb10" key={chat.id} onClick={e => openChat(e, chat.type, chat.id)}>
{chat.type === ChatType.DirectMessage ? ( {chat.type === ChatType.DirectMessage ? (
<ProfileImage pubkey={chat.id} className="f-grow" link="" /> <ProfileImage pubkey={chat.id} className="f-grow" link="" />
) : ( ) : (
@ -78,22 +85,24 @@ export default function MessagesPage() {
return ( return (
<div className="dm-page"> <div className="dm-page">
<div> {(pageWidth >= TwoCol || !chat) && (
<div className="flex"> <div>
<h3 className="f-grow"> <div className="flex">
<FormattedMessage {...messages.Messages} /> <h3 className="f-grow">
</h3> <FormattedMessage {...messages.Messages} />
<button disabled={unreadCount <= 0} type="button"> </h3>
<FormattedMessage {...messages.MarkAllRead} /> <button disabled={unreadCount <= 0} type="button">
</button> <FormattedMessage {...messages.MarkAllRead} />
</button>
</div>
{chats
.sort((a, b) => {
return a.id === login.publicKey ? -1 : b.id === login.publicKey ? 1 : b.lastMessage - a.lastMessage;
})
.map(person)}
</div> </div>
{chats )}
.sort((a, b) => { {chat && <DmWindow id={chat} />}
return a.id === login.publicKey ? -1 : b.id === login.publicKey ? 1 : b.lastMessage - a.lastMessage;
})
.map(person)}
</div>
{pageWidth >= TwoCol && chat && <DmWindow id={chat} />}
{pageWidth >= ThreeCol && chat && ( {pageWidth >= ThreeCol && chat && (
<div> <div>
<ProfileDmActions pubkey={chat} /> <ProfileDmActions pubkey={chat} />