bug: use page width for banner
This commit is contained in:
parent
08acab4831
commit
14769f8f33
GPG Key ID:
DE71CEB3925BE941
|
|
@ -2,13 +2,13 @@ import useImgProxy from "Feed/ImgProxy";
|
|||
import { useEffect, useState } from "react";
|
||||
|
||||
export const ProxyImg = (props: any) => {
|
||||
const { src, ...rest } = props;
|
||||
const { src, size, ...rest } = props;
|
||||
const [url, setUrl] = useState<string>();
|
||||
const { proxy } = useImgProxy();
|
||||
|
||||
useEffect(() => {
|
||||
if (src) {
|
||||
proxy(src)
|
||||
proxy(src, size)
|
||||
.then(a => setUrl(a))
|
||||
.catch(console.warn);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,111 +32,111 @@ import Modal from "Element/Modal";
|
|||
import { ProxyImg } from "Element/ProxyImg"
|
||||
|
||||
enum ProfileTab {
|
||||
Notes = "Notes",
|
||||
Reactions = "Reactions",
|
||||
Followers = "Followers",
|
||||
Follows = "Follows",
|
||||
Muted = "Muted",
|
||||
Blocked = "Blocked"
|
||||
Notes = "Notes",
|
||||
Reactions = "Reactions",
|
||||
Followers = "Followers",
|
||||
Follows = "Follows",
|
||||
Muted = "Muted",
|
||||
Blocked = "Blocked"
|
||||
};
|
||||
|
||||
export default function ProfilePage() {
|
||||
const params = useParams();
|
||||
const navigate = useNavigate();
|
||||
const id = useMemo(() => parseId(params.id!), [params]);
|
||||
const user = useUserProfile(id);
|
||||
const loggedOut = useSelector<RootState, boolean | undefined>(s => s.login.loggedOut);
|
||||
const loginPubKey = useSelector<RootState, HexKey | undefined>(s => s.login.publicKey);
|
||||
const follows = useSelector<RootState, HexKey[]>(s => s.login.follows);
|
||||
const isMe = loginPubKey === id;
|
||||
const [showLnQr, setShowLnQr] = useState<boolean>(false);
|
||||
const [tab, setTab] = useState(ProfileTab.Notes);
|
||||
const [showProfileQr, setShowProfileQr] = useState<boolean>(false);
|
||||
const aboutText = user?.about || ''
|
||||
const about = Text({ content: aboutText, tags: [], users: new Map() })
|
||||
const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
|
||||
const params = useParams();
|
||||
const navigate = useNavigate();
|
||||
const id = useMemo(() => parseId(params.id!), [params]);
|
||||
const user = useUserProfile(id);
|
||||
const loggedOut = useSelector<RootState, boolean | undefined>(s => s.login.loggedOut);
|
||||
const loginPubKey = useSelector<RootState, HexKey | undefined>(s => s.login.publicKey);
|
||||
const follows = useSelector<RootState, HexKey[]>(s => s.login.follows);
|
||||
const isMe = loginPubKey === id;
|
||||
const [showLnQr, setShowLnQr] = useState<boolean>(false);
|
||||
const [tab, setTab] = useState(ProfileTab.Notes);
|
||||
const [showProfileQr, setShowProfileQr] = useState<boolean>(false);
|
||||
const aboutText = user?.about || ''
|
||||
const about = Text({ content: aboutText, tags: [], users: new Map() })
|
||||
const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
|
||||
|
||||
useEffect(() => {
|
||||
setTab(ProfileTab.Notes);
|
||||
}, [params]);
|
||||
useEffect(() => {
|
||||
setTab(ProfileTab.Notes);
|
||||
}, [params]);
|
||||
|
||||
function username() {
|
||||
return (
|
||||
<div className="name">
|
||||
<h2>
|
||||
{user?.display_name || user?.name || 'Nostrich'}
|
||||
<FollowsYou pubkey={id} />
|
||||
</h2>
|
||||
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
||||
<Copy text={params.id || ""} />
|
||||
{links()}
|
||||
function username() {
|
||||
return (
|
||||
<div className="name">
|
||||
<h2>
|
||||
{user?.display_name || user?.name || 'Nostrich'}
|
||||
<FollowsYou pubkey={id} />
|
||||
</h2>
|
||||
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
||||
<Copy text={params.id || ""} />
|
||||
{links()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function links() {
|
||||
return (
|
||||
<div className="links">
|
||||
{user?.website && (
|
||||
<div className="website f-ellipsis">
|
||||
<span className="link-icon">
|
||||
<Link />
|
||||
</span>
|
||||
<a href={user.website} target="_blank" rel="noreferrer">{user.website}</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<LNURLTip svc={lnurl} show={showLnQr} onClose={() => setShowLnQr(false)} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function bio() {
|
||||
return aboutText.length > 0 && (
|
||||
<>
|
||||
<h3>Bio</h3>
|
||||
<div className="details">
|
||||
{about}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function tabContent() {
|
||||
switch (tab) {
|
||||
case ProfileTab.Notes:
|
||||
return <Timeline key={id} subject={{ type: "pubkey", items: [id] }} postsOnly={false} method={"LIMIT_UNTIL"} ignoreModeration={true} />;
|
||||
case ProfileTab.Follows: {
|
||||
if (isMe) {
|
||||
return (
|
||||
<div className="main-content">
|
||||
<h4>Following {follows.length}</h4>
|
||||
{follows.map(a => <ProfilePreview key={a} pubkey={a.toLowerCase()} options={{ about: false }} />)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function links() {
|
||||
return (
|
||||
<div className="links">
|
||||
{user?.website && (
|
||||
<div className="website f-ellipsis">
|
||||
<span className="link-icon">
|
||||
<Link />
|
||||
</span>
|
||||
<a href={user.website} target="_blank" rel="noreferrer">{user.website}</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<LNURLTip svc={lnurl} show={showLnQr} onClose={() => setShowLnQr(false)} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function bio() {
|
||||
return aboutText.length > 0 && (
|
||||
<>
|
||||
<h3>Bio</h3>
|
||||
<div className="details">
|
||||
{about}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function tabContent() {
|
||||
switch (tab) {
|
||||
case ProfileTab.Notes:
|
||||
return <Timeline key={id} subject={{ type: "pubkey", items: [id] }} postsOnly={false} method={"LIMIT_UNTIL"} ignoreModeration={true} />;
|
||||
case ProfileTab.Follows: {
|
||||
if (isMe) {
|
||||
return (
|
||||
<div className="main-content">
|
||||
<h4>Following {follows.length}</h4>
|
||||
{follows.map(a => <ProfilePreview key={a} pubkey={a.toLowerCase()} options={{ about: false }} />)}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return <FollowsList pubkey={id} />;
|
||||
}
|
||||
}
|
||||
case ProfileTab.Followers: {
|
||||
return <FollowersList pubkey={id} />
|
||||
}
|
||||
case ProfileTab.Muted: {
|
||||
return isMe ? <BlockList variant="muted" /> : <MutedList pubkey={id} />
|
||||
}
|
||||
case ProfileTab.Blocked: {
|
||||
return isMe ? <BlockList variant="blocked" /> : null
|
||||
}
|
||||
);
|
||||
} else {
|
||||
return <FollowsList pubkey={id} />;
|
||||
}
|
||||
}
|
||||
case ProfileTab.Followers: {
|
||||
return <FollowersList pubkey={id} />
|
||||
}
|
||||
case ProfileTab.Muted: {
|
||||
return isMe ? <BlockList variant="muted" /> : <MutedList pubkey={id} />
|
||||
}
|
||||
case ProfileTab.Blocked: {
|
||||
return isMe ? <BlockList variant="blocked" /> : null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function avatar() {
|
||||
return (
|
||||
<div className="avatar-wrapper">
|
||||
<Avatar user={user} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
function avatar() {
|
||||
return (
|
||||
<div className="avatar-wrapper">
|
||||
<Avatar user={user} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function renderIcons() {
|
||||
return (
|
||||
|
|
@ -146,7 +146,7 @@ export default function ProfilePage() {
|
|||
</IconButton>
|
||||
{showProfileQr && (
|
||||
<Modal className="qr-modal" onClose={() => setShowProfileQr(false)}>
|
||||
<QrCode data={`nostr:${hexToBech32("npub", id)}`} link={undefined} className="m10"/>
|
||||
<QrCode data={`nostr:${hexToBech32("npub", id)}`} link={undefined} className="m10" />
|
||||
</Modal>
|
||||
)}
|
||||
{isMe ? (
|
||||
|
|
@ -164,7 +164,7 @@ export default function ProfilePage() {
|
|||
{!loggedOut && (
|
||||
<>
|
||||
<IconButton onClick={() => navigate(`/messages/${hexToBech32("npub", id)}`)}>
|
||||
<Envelope width={16} height={13} />
|
||||
<Envelope width={16} height={13} />
|
||||
</IconButton>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -174,37 +174,38 @@ export default function ProfilePage() {
|
|||
)
|
||||
}
|
||||
|
||||
function userDetails() {
|
||||
return (
|
||||
<div className="details-wrapper">
|
||||
{username()}
|
||||
<div className="profile-actions">
|
||||
{renderIcons()}
|
||||
{!isMe && <FollowButton pubkey={id} />}
|
||||
</div>
|
||||
{bio()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function renderTab(v: ProfileTab) {
|
||||
return <div className={`tab f-1${tab === v ? " active" : ""}`} key={v} onClick={() => setTab(v)}>{v}</div>
|
||||
}
|
||||
|
||||
function userDetails() {
|
||||
return (
|
||||
<>
|
||||
<div className="profile flex">
|
||||
{user?.banner && <ProxyImg alt="banner" className="banner" src={user.banner} />}
|
||||
<div className="profile-wrapper flex">
|
||||
{avatar()}
|
||||
{userDetails()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="tabs">
|
||||
{[ProfileTab.Notes, ProfileTab.Followers, ProfileTab.Follows, ProfileTab.Muted].map(renderTab)}
|
||||
{isMe && renderTab(ProfileTab.Blocked)}
|
||||
</div>
|
||||
{tabContent()}
|
||||
</>
|
||||
<div className="details-wrapper">
|
||||
{username()}
|
||||
<div className="profile-actions">
|
||||
{renderIcons()}
|
||||
{!isMe && <FollowButton pubkey={id} />}
|
||||
</div>
|
||||
{bio()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function renderTab(v: ProfileTab) {
|
||||
return <div className={`tab f-1${tab === v ? " active" : ""}`} key={v} onClick={() => setTab(v)}>{v}</div>
|
||||
}
|
||||
|
||||
const w = window.document.querySelector(".page")?.clientWidth;
|
||||
return (
|
||||
<>
|
||||
<div className="profile flex">
|
||||
{user?.banner && <ProxyImg alt="banner" className="banner" src={user.banner} size={w}/>}
|
||||
<div className="profile-wrapper flex">
|
||||
{avatar()}
|
||||
{userDetails()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="tabs">
|
||||
{[ProfileTab.Notes, ProfileTab.Followers, ProfileTab.Follows, ProfileTab.Muted].map(renderTab)}
|
||||
{isMe && renderTab(ProfileTab.Blocked)}
|
||||
</div>
|
||||
{tabContent()}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue