smal fixes and update article layout

src/utils/hooks/useEvent.ts

@@ -1,18 +1,19 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
+import { nip19 } from 'nostr-tools';
 import { AddressPointer } from 'nostr-tools/lib/types/nip19';
 
 import { useNDK } from '@libs/ndk/provider';
 
-export function useEvent(
-  id: undefined | string,
-  naddr?: undefined | AddressPointer,
-  embed?: undefined | string
-) {
+export function useEvent(id: undefined | string, embed?: undefined | string) {
   const { ndk } = useNDK();
   const { status, data } = useQuery({
     queryKey: ['event', id],
     queryFn: async () => {
+      const naddr = id.startsWith('naddr')
+        ? (nip19.decode(id).data as AddressPointer)
+        : null;
+
       // return event refer from naddr
       if (naddr) {
         const rEvents = await ndk.fetchEvents({
@@ -20,8 +21,10 @@ export function useEvent(
           '#d': [naddr.identifier],
           authors: [naddr.pubkey],
         });
+
         const rEvent = [...rEvents].slice(-1)[0];
         if (!rEvent) return Promise.reject(new Error('event not found'));
+
         return rEvent;
       }
 

src/utils/hooks/useRichContent.tsx

@@ -1,3 +1,4 @@
+import { nanoid } from 'nanoid';
 import { nip19 } from 'nostr-tools';
 import { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
@@ -43,13 +44,13 @@ const VIDEOS = [
 ];
 
 export function useRichContent(content: string, textmode: boolean = false) {
-  let parsedContent: string | ReactNode[] = content;
+  let parsedContent: string | ReactNode[] = content.replace(/\n+/g, '\n');
   let linkPreview: string;
   let images: string[] = [];
   let videos: string[] = [];
   let events: string[] = [];
 
-  const text = content.replace(/\n+/g, '\n');
+  const text = parsedContent;
   const words = text.split(/( |\n)/);
 
   if (!textmode) {
@@ -151,8 +152,8 @@ export function useRichContent(content: string, textmode: boolean = false) {
       );
     });
 
-    parsedContent = reactStringReplace(parsedContent, '\n', (match, i) => {
-      return <div key={'n-' + i} className="h-2" />;
+    parsedContent = reactStringReplace(parsedContent, '\n', () => {
+      return <div key={nanoid()} className="h-3" />;
     });
 
     if (typeof parsedContent[0] === 'string') {