Kieran
/
snort
5
14
Fork 14
Code Issues 53 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

UI improvements #4

Merged
verbiricha merged 2 commits from ui-improvements into main 2023-01-06 11:11:48 +00:00
Conversation 0 Commits 2 Files Changed 5 +108 -92
5 changed files with 108 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/Text.js Normal file
View File

@ -0,0 +1,88 @@
import { Link } from "react-router-dom";
import Invoice from "./element/Invoice";
import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex } from "./Const";
export function extractLinks(fragments) {
return fragments.map(f => {
if (typeof f === "string") {
return f.split(UrlRegex).map(a => {
if (a.startsWith("http")) {
try {
let url = new URL(a);
let ext = url.pathname.toLowerCase().match(FileExtensionRegex);
if (ext) {
switch (ext[1]) {
case "gif":
case "jpg":
case "jpeg":
case "png":
case "bmp":
case "webp": {
return <img key={url} src={url} />;
}
case "mp4":
case "mkv":
case "avi":
case "m4v": {
return <video key={url} src={url} controls />
}
}
} else {
return <a href={url}>{url.toString()}</a>
}
} catch (e) {
console.warn(`Not a valid url: ${a}`);
}
}
return a;
});
}
return f;
}).flat();
}
export function extractMentions(fragments, tags, users) {
return fragments.map(f => {
if (typeof f === "string") {
return f.split(MentionRegex).map((match) => {
let matchTag = match.match(/#\[(\d+)\]/);
if (matchTag && matchTag.length === 2) {
let idx = parseInt(matchTag[1]);
let ref = tags.find(a => a.Index === idx);
if (ref) {
switch (ref.Key) {
case "p": {
let pUser = users[ref.PubKey]?.name ?? ref.PubKey.substring(0, 8);
return <Link key={ref.PubKey} to={`/p/${ref.PubKey}`}>@{pUser}</Link>;
}
case "e": {
let eText = ref.Event.substring(0, 8);
return <Link key={ref.Event} to={`/e/${ref.Event}`}>#{eText}</Link>;
}
}
}
return <b style={{ color: "red" }}>{matchTag[0]}?</b>;
} else {
return match;
}
});
}
return f;
}).flat();
}
export function extractInvoices(fragments) {
return fragments.map(f => {
if (typeof f === "string") {
return f.split(InvoiceRegex).map(i => {
if (i.toLowerCase().startsWith("lnbc")) {
return <Invoice key={i} invoice={i} />
} else {
return i;
}
});
}
return f;
}).flat();
}

88
src/element/Note.js
View File

@ -11,7 +11,7 @@ import ProfileImage from "./ProfileImage";
import useEventPublisher from "../feed/EventPublisher";
import { NoteCreator } from "./NoteCreator";
import Invoice from "./Invoice";
import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex } from "../Const";
import { extractLinks, extractMentions, extractInvoices } from "../Text";
export default function Note(props) {
const navigate = useNavigate();
@ -38,7 +38,7 @@ export default function Note(props) {
let body = ev?.Content ?? "";
let fragments = extractLinks([body]);
fragments = extractMentions(fragments);
fragments = extractMentions(fragments, ev.Tags, users);
fragments = extractInvoices(fragments);
if (deletion?.length > 0) {
return (
@ -72,90 +72,6 @@ export default function Note(props) {
)
}
function extractInvoices(fragments) {
return fragments.map(f => {
if (typeof f === "string") {
return f.split(InvoiceRegex).map(i => {
if (i.toLowerCase().startsWith("lnbc")) {
return <Invoice key={i} invoice={i} />
} else {
return i;
}
});
}
return f;
}).flat();
}
function extractMentions(fragments) {
return fragments.map(f => {
if (typeof f === "string") {
return f.split(MentionRegex).map((match) => {
let matchTag = match.match(/#\[(\d+)\]/);
if (matchTag && matchTag.length === 2) {
let idx = parseInt(matchTag[1]);
let ref = ev.Tags.find(a => a.Index === idx);
if (ref) {
switch (ref.Key) {
case "p": {
let pUser = users[ref.PubKey]?.name ?? ref.PubKey.substring(0, 8);
return <Link key={ref.PubKey} to={`/p/${ref.PubKey}`}>@{pUser}</Link>;
}
case "e": {
let eText = ref.Event.substring(0, 8);
return <Link key={ref.Event} to={`/e/${ref.Event}`}>#{eText}</Link>;
}
}
}
return <b style={{ color: "red" }}>{matchTag[0]}?</b>;
} else {
return match;
}
});
}
return f;
}).flat();
}
function extractLinks(fragments) {
return fragments.map(f => {
if (typeof f === "string") {
return f.split(UrlRegex).map(a => {
if (a.startsWith("http")) {
try {
let url = new URL(a);
let ext = url.pathname.toLowerCase().match(FileExtensionRegex);
if (ext) {
switch (ext[1]) {
case "gif":
case "jpg":
case "jpeg":
case "png":
case "bmp":
case "webp": {
return <img key={url} src={url} />;
}
case "mp4":
case "mkv":
case "avi":
case "m4v": {
return <video key={url} src={url} controls />
}
}
} else {
return <a href={url}>{url.toString()}</a>
}
} catch (e) {
console.warn(`Not a valid url: ${a}`);
}
}
return a;
});
}
return f;
}).flat();
}
async function like() {
let evLike = await publisher.like(ev);
publisher.broadcast(evLike);

10
src/element/ProfileImage.css
View File

@ -9,4 +9,12 @@
margin-right: 20px;
border-radius: 10px;
cursor: pointer;
}
}
.pfp a {
text-decoration: none;
}
.pfp a:hover {
text-decoration: underline;
}

11
src/element/ProfileImage.js
View File

@ -1,8 +1,11 @@
import "./ProfileImage.css";
import { useNavigate } from "react-router-dom";
import { useMemo } from "react";
import { Link, useNavigate } from "react-router-dom";
import useProfile from "../feed/ProfileFeed";
import Nostrich from "../nostrich.jpg";
import { useMemo } from "react";
import "./ProfileImage.css";
export default function ProfileImage(props) {
const pubkey = props.pubkey;
@ -24,7 +27,7 @@ export default function ProfileImage(props) {
<div className="pfp">
<img src={hasImage ? user.picture : Nostrich} onClick={() => navigate(`/p/${pubkey}`)} />
<div>
{name}
<Link key={pubkey} to={`/p/${pubkey}`}>{name}</Link>
{subHeader ? <div>{subHeader}</div> : null}
</div>
</div>

3
src/pages/ProfilePage.js
View File

@ -17,6 +17,7 @@ import FollowButton from "../element/FollowButton";
import VoidUpload from "../feed/VoidUpload";
import { openFile } from "../Util";
import Timeline from "../element/Timeline";
import { extractLinks } from '../Text'
export default function ProfilePage() {
const dispatch = useDispatch();
@ -177,7 +178,7 @@ export default function ProfilePage() {
<FollowButton pubkey={id} />
</div>
</div>
<p>{about}</p>
<p>{extractLinks([about])}</p>
{website ? <a href={website} target="_blank" rel="noreferrer">{website}</a> : null}
{lud16 ? <div className="flex">