2022-12-27 23:46:13 +00:00
|
|
|
import "./ProfilePage.css";
|
2023-01-09 11:00:23 +00:00
|
|
|
import Nostrich from "../nostrich.jpg";
|
|
|
|
|
|
|
|
import { useState } from "react";
|
|
|
|
import { useSelector } from "react-redux";
|
2022-12-29 22:23:41 +00:00
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
2023-01-10 11:27:28 +00:00
|
|
|
import { faQrcode, faGear } from "@fortawesome/free-solid-svg-icons";
|
2023-01-09 11:00:23 +00:00
|
|
|
import { useNavigate, useParams } from "react-router-dom";
|
2022-12-29 22:23:41 +00:00
|
|
|
|
|
|
|
import useProfile from "../feed/ProfileFeed";
|
2023-01-01 20:31:09 +00:00
|
|
|
import FollowButton from "../element/FollowButton";
|
2023-01-09 11:00:23 +00:00
|
|
|
import { extractLnAddress, parseId } from "../Util";
|
2023-01-04 13:23:05 +00:00
|
|
|
import Timeline from "../element/Timeline";
|
2023-01-06 11:05:27 +00:00
|
|
|
import { extractLinks } from '../Text'
|
2023-01-07 20:54:12 +00:00
|
|
|
import LNURLTip from "../element/LNURLTip";
|
2023-01-09 18:33:46 +00:00
|
|
|
import Nip05 from "../element/Nip05";
|
2023-01-09 11:00:23 +00:00
|
|
|
import Copy from "../element/Copy";
|
2022-12-18 14:51:32 +00:00
|
|
|
|
|
|
|
export default function ProfilePage() {
|
|
|
|
const params = useParams();
|
2023-01-09 11:00:23 +00:00
|
|
|
const navigate = useNavigate();
|
2023-01-06 14:36:13 +00:00
|
|
|
const id = parseId(params.id);
|
2022-12-27 23:46:13 +00:00
|
|
|
const user = useProfile(id);
|
|
|
|
const loginPubKey = useSelector(s => s.login.publicKey);
|
|
|
|
const isMe = loginPubKey === id;
|
2022-12-29 22:23:41 +00:00
|
|
|
const [showLnQr, setShowLnQr] = useState(false);
|
2022-12-28 14:51:33 +00:00
|
|
|
|
2022-12-28 23:28:28 +00:00
|
|
|
function details() {
|
2023-01-09 11:00:23 +00:00
|
|
|
const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
|
2022-12-28 23:28:28 +00:00
|
|
|
return (
|
|
|
|
<>
|
2023-01-06 15:22:02 +00:00
|
|
|
<div className="flex name">
|
|
|
|
<div className="f-grow">
|
2023-01-09 18:33:46 +00:00
|
|
|
<h2>{user?.display_name || user?.name}</h2>
|
2023-01-09 11:00:23 +00:00
|
|
|
<Copy text={params.id} />
|
2023-01-10 10:06:51 +00:00
|
|
|
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
2023-01-06 15:22:02 +00:00
|
|
|
</div>
|
2023-01-01 20:31:09 +00:00
|
|
|
<div>
|
2023-01-10 11:27:28 +00:00
|
|
|
{isMe ? (
|
|
|
|
<div className="btn btn-icon" onClick={() => navigate("/settings")}>
|
|
|
|
<FontAwesomeIcon icon={faGear} size="sm" />
|
|
|
|
</div>
|
|
|
|
) : <FollowButton pubkey={id} />
|
|
|
|
}
|
2023-01-01 20:31:09 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2023-01-09 11:00:23 +00:00
|
|
|
<p>{extractLinks([user?.about])}</p>
|
2023-01-10 07:09:09 +00:00
|
|
|
|
|
|
|
{user?.website && (
|
2023-01-10 11:27:28 +00:00
|
|
|
<div className="website f-ellipsis">
|
2023-01-10 07:09:09 +00:00
|
|
|
<a href={user.website} target="_blank" rel="noreferrer">{user.website}</a>
|
|
|
|
</div>
|
|
|
|
)}
|
2023-01-01 20:31:09 +00:00
|
|
|
|
2023-01-10 11:27:28 +00:00
|
|
|
{lnurl ? <div className="lnurl f-ellipsis">
|
|
|
|
{lnurl}
|
|
|
|
<div className="btn btn-icon" onClick={(e) => setShowLnQr(true)}>
|
|
|
|
<FontAwesomeIcon icon={faQrcode} size="sm" />
|
2022-12-28 23:28:28 +00:00
|
|
|
</div>
|
2022-12-29 22:23:41 +00:00
|
|
|
</div> : null}
|
2023-01-09 11:00:23 +00:00
|
|
|
<LNURLTip svc={lnurl} show={showLnQr} onClose={() => setShowLnQr(false)} />
|
2022-12-28 23:28:28 +00:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-12-18 14:51:32 +00:00
|
|
|
return (
|
2022-12-28 23:28:28 +00:00
|
|
|
<>
|
2023-01-03 16:55:51 +00:00
|
|
|
<div className="profile flex">
|
2023-01-10 07:09:09 +00:00
|
|
|
<div className="avatar-wrapper">
|
2023-01-09 16:38:39 +00:00
|
|
|
<div style={{ backgroundImage: `url(${(user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture})` }} className="avatar">
|
2022-12-29 22:23:41 +00:00
|
|
|
</div>
|
2022-12-28 14:51:33 +00:00
|
|
|
</div>
|
2023-01-10 07:09:09 +00:00
|
|
|
<div className="f-grow details">
|
|
|
|
{details()}
|
2022-12-28 23:28:28 +00:00
|
|
|
</div>
|
2022-12-27 23:46:13 +00:00
|
|
|
</div>
|
2022-12-30 14:01:51 +00:00
|
|
|
<div className="tabs">
|
2023-01-10 11:27:28 +00:00
|
|
|
<div className="tab f-1 active">Notes</div>
|
|
|
|
<div className="tab f-1">Reactions</div>
|
|
|
|
<div className="tab f-1">Followers</div>
|
|
|
|
<div className="tab f-1">Follows</div>
|
2022-12-30 14:01:51 +00:00
|
|
|
</div>
|
2023-01-04 13:23:05 +00:00
|
|
|
<Timeline pubkeys={id} />
|
2022-12-28 23:28:28 +00:00
|
|
|
</>
|
2022-12-18 14:51:32 +00:00
|
|
|
)
|
2023-01-10 09:18:46 +00:00
|
|
|
}
|