Merge pull request #77 from v0l/profile-loading

fix: rerender user timeline on pubkey change

src/element/NoteReaction.tsx

@@ -15,7 +15,7 @@ export interface NoteReactionProps {
     root?: TaggedRawEvent
 }
 export default function NoteReaction(props: NoteReactionProps) {
-    const ev = props["data-ev"] || new NEvent(props.data);
+    const ev = useMemo(() => props["data-ev"] || new NEvent(props.data), [props.data, props["data-ev"]])
 
     const refEvent = useMemo(() => {
         if (ev) {
@@ -71,6 +71,7 @@ export default function NoteReaction(props: NoteReactionProps) {
         showHeader: ev?.Kind === EventKind.Repost,
         showFooter: ev?.Kind === EventKind.Repost,
     };
+
     return (
         <div className="reaction">
             <div className="header flex">

src/element/Timeline.tsx

@@ -14,15 +14,15 @@ export interface TimelineProps {
  * A list of notes by pubkeys
  */
 export default function Timeline({ global, pubkeys }: TimelineProps) {
-    const feed = useTimelineFeed(pubkeys, global);
+    const { main, others } = useTimelineFeed(pubkeys, global);
 
     function reaction(id: u256, kind = EventKind.Reaction) {
-        return feed?.others?.filter(a => a.kind === kind && a.tags.some(b => b[0] === "e" && b[1] === id));
+        return others?.filter(a => a.kind === kind && a.tags.some(b => b[0] === "e" && b[1] === id));
     }
 
     const mainFeed = useMemo(() => {
-        return feed.main?.sort((a, b) => b.created_at - a.created_at);
+        return main?.sort((a, b) => b.created_at - a.created_at);
-    }, [feed]);
+    }, [main]);
 
     function eventElement(e: TaggedRawEvent) {
         switch (e.kind) {

src/pages/ProfilePage.tsx

@@ -83,7 +83,8 @@ export default function ProfilePage() {
 
     function tabContent() {
         switch (tab) {
-            case ProfileTab.Notes: return <Timeline pubkeys={[id]} global={false} />;
+            case ProfileTab.Notes:
+              return <Timeline key={id} pubkeys={[id]} global={false} />;
             case ProfileTab.Follows: {
                 if (isMe) {
                     return (