profile: refactor

each view has it's own DOMMap to reference its own elements this
can us non-unique keys, i.e. each view can have a header key.

changed:
- use getViewElem instead of querying the dom
- access button.dataset.id directly before traversing the dom
pull/84/head
OFF0 10 months ago
parent 636c4610de
commit 208ea6363a
Signed by: offbyn
GPG Key ID: 94A2F643C51F37FA

@ -198,12 +198,12 @@ const handleRecommendServer = (evt: Event, relay: string) => {
};
const onEventDetails = (evt: Event, relay: string) => {
if (getViewElem(`detail-${evt.id}`)) {
if (getViewElem(evt.id)) {
return;
}
const art = renderEventDetails(evt, relay);
getViewContent().append(art);
setViewElem(`detail-${evt.id}`, art);
const article = renderEventDetails(evt, relay);
getViewContent().append(article);
setViewElem(evt.id, article);
};
const onEvent = (evt: Event, relay: string) => {
@ -307,7 +307,7 @@ const handleButton = (button: HTMLButtonElement) => {
closePublishView();
return;
}
const id = (button.closest('[data-id]') as HTMLElement)?.dataset.id;
const id = button.dataset.id || (button.closest('[data-id]') as HTMLElement)?.dataset.id;
if (id) {
switch(button.name) {
case 'reply':

@ -1,7 +1,7 @@
import {Event} from 'nostr-tools';
import {elem, elemCanvas, parseTextContent} from './utils/dom';
import {getNoxyUrl} from './utils/url';
import {getViewContent, getViewElem} from './view';
import {getViewElem} from './view';
import {parseJSON} from './media';
import {sortByCreatedAt} from './events';
@ -104,10 +104,9 @@ export const getMetadata = (pubkey: string) => {
};
export const renderProfile = (pubkey: string) => {
const content = getViewContent();
const header = getViewElem(pubkey);
const header = getViewElem('header');
const metadata = profileMap[pubkey];
if (!content || !header || !metadata) {
if (!header || !metadata) {
return;
}
if (metadata.name) {
@ -119,8 +118,8 @@ export const renderProfile = (pubkey: string) => {
header.append(elem('h1', {}, metadata.name));
}
}
const detail = getViewElem('detail');
if (metadata.about) {
const detail = getViewElem(`detail-${pubkey}`);
if (!detail.children.length) {
const [content] = parseTextContent(metadata.about);
detail?.append(...content);

@ -25,18 +25,20 @@ export const renderViewTemplate = (options: ViewTemplateOptions) => {
switch (options.type) {
case 'profile':
const pubkey = options.id;
const detail = elem('p', {data: {'profileDetails': pubkey}});
dom[`detail-${pubkey}`] = detail;
const header = elem('header', {className: 'hero'}, [
elem('small', {}, nip19.npubEncode(pubkey)),
elem('h1', {}, pubkey),
const detail = elem('p');
const following = elem('span');
const profileHeader = elem('header', {className: 'hero'}, [
elem('small', {className: 'hero-npub'}, nip19.npubEncode(pubkey)),
elem('div', {className: 'hero-title'}, [
elem('h1', {}, pubkey),
]),
detail,
elem('footer', {}, [
elem('span', {data:{following: pubkey}})
])
elem('footer', {}, following),
]);
dom[pubkey] = header;
content.append(header);
dom.header = profileHeader;
dom.detail = detail;
dom.following = following;
content.append(profileHeader);
document.title = pubkey;
break;
case 'note':
@ -45,14 +47,14 @@ export const renderViewTemplate = (options: ViewTemplateOptions) => {
break;
case 'event':
const id = options.id;
const eventHeader = elem('header', {className: 'hero'}, [
elem('h1', {}, id),
]);
dom[id] = eventHeader;
content.append(eventHeader);
content.append(
elem('header', {className: 'hero'}, [
elem('h1', {}, id),
])
);
document.title = id;
break;
}
const view = elem('section', {className: 'view'}, [content]);
return {content, dom, view};
};
};

Loading…
Cancel
Save