updated thread page

2023-03-22 14:32:09 +07:00
parent 23f85c7e4f
commit cd5aca9042
8 changed files with 251 additions and 28 deletions
--- a/src/components/note/content/extend.tsx
+++ b/src/components/note/content/extend.tsx
@@ -0,0 +1,68 @@
+import NoteMetadata from '@components/note/content/metadata';
+import NotePreview from '@components/note/content/preview';
+import { UserLarge } from '@components/user/large';
+import { UserMention } from '@components/user/mention';
+
+import destr from 'destr';
+import { memo, useMemo } from 'react';
+import reactStringReplace from 'react-string-replace';
+
+export const ContentExtend = memo(function ContentExtend({ data }: { data: any }) {
+  const content = useMemo(() => {
+    let parsedContent;
+    // get data tags
+    const tags = destr(data.tags);
+    // remove all image urls
+    parsedContent = data.content.replace(/(https?:\/\/.*\.(jpg|jpeg|gif|png|webp|mp4|webm)((\?.*)$|$))/gim, '');
+    // handle urls
+    parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => (
+      <a key={match + i} href={match} target="_blank" rel="noreferrer">
+        {match}
+      </a>
+    ));
+    // handle hashtags
+    parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
+      <span key={match + i} className="text-fuchsia-500">
+        #{match}
+      </span>
+    ));
+    // handle mentions
+    if (tags.length > 0) {
+      parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
+        if (tags[match][0] === 'p') {
+          return <UserMention key={match + i} pubkey={tags[match][1]} />;
+        } else {
+          // #TODO: handle mention other note
+          // console.log(tags[match]);
+        }
+      });
+    }
+
+    return parsedContent;
+  }, [data.content, data.tags]);
+
+  return (
+    <div className="relative z-10 flex flex-col">
+      <UserLarge pubkey={data.pubkey} time={data.created_at} />
+      <div className="mt-3">
+        <div className="flex flex-col gap-2">
+          <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1">
+            {content}
+          </div>
+          <NotePreview content={data.content} />
+        </div>
+      </div>
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="mt-5 flex items-center border-t border-b border-zinc-800 py-2"
+      >
+        <NoteMetadata
+          eventID={data.id}
+          eventPubkey={data.pubkey}
+          eventContent={data.content}
+          eventTime={data.created_at}
+        />
+      </div>
+    </div>
+  );
+});
--- a/src/components/note/counter/comments.tsx
+++ b/src/components/note/counter/comments.tsx
@@ -38,10 +38,7 @@ export const CommentsCounter = memo(function CommentsCounter({
  const profile = JSON.parse(currentUser.metadata);

  const openThread = () => {
-    router.push({
-      pathname: '/newsfeed/thread',
-      query: { id: eventID },
-    });
+    router.push(`/newsfeed/${eventID}`);
  };

  const submitEvent = () => {
--- a/src/components/note/form/comment.tsx
+++ b/src/components/note/form/comment.tsx
@@ -3,47 +3,59 @@ import { ImageWithFallback } from '@components/imageWithFallback';

 import { dateToUnix } from '@utils/getDate';

-import { SizeIcon } from '@radix-ui/react-icons';
 import { useLocalStorage } from '@rehooks/local-storage';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext, useState } from 'react';

-export default function FormComment() {
+export default function FormComment({ eventID }: { eventID: any }) {
  const relayPool: any = useContext(RelayContext);

  const [relays]: any = useLocalStorage('relays');
  const [currentUser]: any = useLocalStorage('current-user');

  const [value, setValue] = useState('');
-
-  const pubkey = currentUser.id;
-  const privkey = currentUser.privkey;
  const profile = JSON.parse(currentUser.metadata);

+  const submitEvent = () => {
+    const event: any = {
+      content: value,
+      created_at: dateToUnix(),
+      kind: 1,
+      pubkey: currentUser.id,
+      tags: [['e', eventID]],
+    };
+    event.id = getEventHash(event);
+    event.sig = signEvent(event, currentUser.privkey);
+
+    relayPool.publish(event, relays);
+  };
+
  return (
    <div className="p-3">
      <div className="flex gap-1">
        <div>
          <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-md border border-white/10">
-            <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-md object-cover" />
+            <ImageWithFallback
+              src={profile.picture}
+              alt={currentUser.id}
+              fill={true}
+              className="rounded-md object-cover"
+            />
          </div>
        </div>
-        <div className="relative h-36 w-full flex-1 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
+        <div className="relative h-24 w-full flex-1 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
          <div>
            <textarea
              name="content"
              onChange={(e) => setValue(e.target.value)}
              placeholder="Send your comment"
-              className="relative h-36 w-full resize-none rounded-md border border-black/5 px-3.5 py-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+              className="relative h-24 w-full resize-none rounded-md border border-black/5 px-3.5 py-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
              spellCheck={false}
            />
          </div>
          <div className="absolute bottom-2 w-full px-2">
            <div className="flex w-full items-center justify-between bg-zinc-800">
              <div className="flex items-center gap-2 divide-x divide-zinc-700">
-                <span className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-zinc-700">
-                  <SizeIcon className="h-4 w-4 text-zinc-400" />
-                </span>
                <div className="flex items-center gap-2 pl-2">
                  <span className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-zinc-700">
                    <svg
@@ -80,7 +92,10 @@ export default function FormComment() {
                </div>
              </div>
              <div className="flex items-center gap-2">
-                <button className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-md shadow-fuchsia-900/50 hover:bg-fuchsia-600">
+                <button
+                  onClick={() => submitEvent()}
+                  className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-md shadow-fuchsia-900/50 hover:bg-fuchsia-600"
+                >
                  <span className="text-white drop-shadow">Send</span>
                </button>
              </div>
--- a/src/components/note/root.tsx
+++ b/src/components/note/root.tsx
@@ -44,9 +44,7 @@ export const RootNote = memo(function RootNote({ id }: { id: string }) {
        insertDB(event);
      },
      undefined,
-      (events, relayURL) => {
-        console.log(events, relayURL);
-      },
+      undefined,
      {
        unsubscribeOnEose: true,
      }