wip: refactor

src/shared/notes/mentions/note.tsx

@@ -1,9 +1,10 @@
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
 import { useStorage } from '@libs/storage/provider';
 
+import { Image } from '@shared/image';
 import { MentionUser, NoteSkeleton } from '@shared/notes';
 import { User } from '@shared/user';
 
@@ -11,6 +12,7 @@ import { widgetKinds } from '@stores/constants';
 import { useWidgets } from '@stores/widgets';
 
 import { useEvent } from '@utils/hooks/useEvent';
+import { isImage } from '@utils/isImage';
 
 export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
   const { db } = useStorage();
@@ -27,10 +29,59 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
     }
   };
 
-  if (!id) {
+  const renderItem = useCallback(() => {
+    switch (data.event.kind) {
+      case 1: {
+        return (
+          <ReactMarkdown
+            className="markdown"
+            remarkPlugins={[remarkGfm]}
+            components={{
+              del: ({ children }) => {
+                const key = children[0] as string;
+                if (key.startsWith('pub')) return <MentionUser pubkey={key.slice(3)} />;
+                if (key.startsWith('tag'))
+                  return (
+                    <button
+                      type="button"
+                      className="font-normal text-orange-400 no-underline hover:text-orange-500"
+                    >
+                      {key.slice(3)}
+                    </button>
+                  );
+              },
+            }}
+          >
+            {data.richContent.parsed.length > 160
+              ? data.richContent.parsed.substring(0, 160) + '...'
+              : data.richContent.parsed}
+          </ReactMarkdown>
+        );
+      }
+      case 1063: {
+        const url = data.event.tags.find((el) => el[0] === 'url')[1];
+        return (
+          <div>
+            {isImage(url) && (
+              <Image
+                src={url}
+                fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
+                alt="image"
+                className="h-auto w-full rounded-lg object-cover"
+              />
+            )}
+          </div>
+        );
+      }
+      default:
+        break;
+    }
+  }, [data]);
+
+  if (status === 'loading') {
     return (
       <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
-        <p className="break-all">Failed to get event with id: {id}</p>
+        <NoteSkeleton />
       </div>
     );
   }
@@ -43,40 +94,8 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
       tabIndex={0}
       className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3"
     >
-      {status === 'loading' ? (
-        <NoteSkeleton />
-      ) : status === 'success' ? (
-        <>
-          <User pubkey={data.pubkey} time={data.created_at} size="small" />
-          <div className="mt-2">
-            <ReactMarkdown
-              className="markdown"
-              remarkPlugins={[remarkGfm]}
-              components={{
-                del: ({ children }) => {
-                  const key = children[0] as string;
-                  if (key.startsWith('pub')) return <MentionUser pubkey={key.slice(3)} />;
-                  if (key.startsWith('tag'))
-                    return (
-                      <button
-                        type="button"
-                        className="font-normal text-orange-400 no-underline hover:text-orange-500"
-                      >
-                        {key.slice(3)}
-                      </button>
-                    );
-                },
-              }}
-            >
-              {data?.content.length > 160
-                ? data.content.substring(0, 160) + '...'
-                : data.content}
-            </ReactMarkdown>
-          </div>
-        </>
-      ) : (
-        <p className="break-all">Failed to get event with id: {id}</p>
-      )}
+      <User pubkey={data.event.pubkey} time={data.event.created_at} size="small" />
+      <div className="mt-2">{renderItem()}</div>
     </div>
   );
 });