diff --git a/src/Element/ProxyImg.tsx b/src/Element/ProxyImg.tsx index 75b31ca9..27965dee 100644 --- a/src/Element/ProxyImg.tsx +++ b/src/Element/ProxyImg.tsx @@ -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(); const { proxy } = useImgProxy(); useEffect(() => { if (src) { - proxy(src) + proxy(src, size) .then(a => setUrl(a)) .catch(console.warn); } diff --git a/src/Pages/ProfilePage.tsx b/src/Pages/ProfilePage.tsx index 437134c1..d6d6b564 100644 --- a/src/Pages/ProfilePage.tsx +++ b/src/Pages/ProfilePage.tsx @@ -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(s => s.login.loggedOut); - const loginPubKey = useSelector(s => s.login.publicKey); - const follows = useSelector(s => s.login.follows); - const isMe = loginPubKey === id; - const [showLnQr, setShowLnQr] = useState(false); - const [tab, setTab] = useState(ProfileTab.Notes); - const [showProfileQr, setShowProfileQr] = useState(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(s => s.login.loggedOut); + const loginPubKey = useSelector(s => s.login.publicKey); + const follows = useSelector(s => s.login.follows); + const isMe = loginPubKey === id; + const [showLnQr, setShowLnQr] = useState(false); + const [tab, setTab] = useState(ProfileTab.Notes); + const [showProfileQr, setShowProfileQr] = useState(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 ( -
-

- {user?.display_name || user?.name || 'Nostrich'} - -

- {user?.nip05 && } - - {links()} + function username() { + return ( +
+

+ {user?.display_name || user?.name || 'Nostrich'} + +

+ {user?.nip05 && } + + {links()} +
+ ) + } + + function links() { + return ( +
+ {user?.website && ( +
+ + + + {user.website} +
+ )} + + setShowLnQr(false)} /> +
+ ) + } + + function bio() { + return aboutText.length > 0 && ( + <> +

Bio

+
+ {about} +
+ + ) + } + + function tabContent() { + switch (tab) { + case ProfileTab.Notes: + return ; + case ProfileTab.Follows: { + if (isMe) { + return ( +
+

Following {follows.length}

+ {follows.map(a => )}
- ) - } - - function links() { - return ( -
- {user?.website && ( -
- - - - {user.website} -
- )} - - setShowLnQr(false)} /> -
- ) - } - - function bio() { - return aboutText.length > 0 && ( - <> -

Bio

-
- {about} -
- - ) - } - - function tabContent() { - switch (tab) { - case ProfileTab.Notes: - return ; - case ProfileTab.Follows: { - if (isMe) { - return ( -
-

Following {follows.length}

- {follows.map(a => )} -
- ); - } else { - return ; - } - } - case ProfileTab.Followers: { - return - } - case ProfileTab.Muted: { - return isMe ? : - } - case ProfileTab.Blocked: { - return isMe ? : null - } + ); + } else { + return ; } + } + case ProfileTab.Followers: { + return + } + case ProfileTab.Muted: { + return isMe ? : + } + case ProfileTab.Blocked: { + return isMe ? : null + } } + } - function avatar() { - return ( -
- -
- ) - } + function avatar() { + return ( +
+ +
+ ) + } function renderIcons() { return ( @@ -146,7 +146,7 @@ export default function ProfilePage() { {showProfileQr && ( setShowProfileQr(false)}> - + )} {isMe ? ( @@ -164,7 +164,7 @@ export default function ProfilePage() { {!loggedOut && ( <> navigate(`/messages/${hexToBech32("npub", id)}`)}> - + )} @@ -174,37 +174,38 @@ export default function ProfilePage() { ) } - function userDetails() { - return ( -
- {username()} -
- {renderIcons()} - {!isMe && } -
- {bio()} -
- ) - } - - function renderTab(v: ProfileTab) { - return
setTab(v)}>{v}
- } - + function userDetails() { return ( - <> -
- {user?.banner && } -
- {avatar()} - {userDetails()} -
-
-
- {[ProfileTab.Notes, ProfileTab.Followers, ProfileTab.Follows, ProfileTab.Muted].map(renderTab)} - {isMe && renderTab(ProfileTab.Blocked)} -
- {tabContent()} - +
+ {username()} +
+ {renderIcons()} + {!isMe && } +
+ {bio()} +
) + } + + function renderTab(v: ProfileTab) { + return
setTab(v)}>{v}
+ } + + const w = window.document.querySelector(".page")?.clientWidth; + return ( + <> +
+ {user?.banner && } +
+ {avatar()} + {userDetails()} +
+
+
+ {[ProfileTab.Notes, ProfileTab.Followers, ProfileTab.Follows, ProfileTab.Muted].map(renderTab)} + {isMe && renderTab(ProfileTab.Blocked)} +
+ {tabContent()} + + ) }