add reaction

2023-07-16 15:46:01 +07:00
parent abc53a0d9a
commit 5ce9fa515a
6 changed files with 373 additions and 209 deletions
--- a/src/shared/notes/actions.tsx
+++ b/src/shared/notes/actions.tsx
@@ -30,18 +30,31 @@ export function NoteActions({ id, pubkey }: { id: string; pubkey: string }) {
      <div className="-ml-1 mt-4 inline-flex w-full items-center">
        <div className="inline-flex items-center gap-2">
          <NoteReply id={id} pubkey={pubkey} />
+          <NoteReaction id={id} pubkey={pubkey} />
          <NoteRepost id={id} pubkey={pubkey} />
-          <NoteReaction />
          <NoteZap />
        </div>
        <div className="mx-2 block h-4 w-px bg-zinc-800" />
-        <button
-          type="button"
-          onClick={() => openThread(id)}
-          className="group inline-flex h-7 w-7 items-center justify-center"
-        >
-          <ThreadIcon className="h-5 w-5 text-zinc-300 group-hover:text-fuchsia-400" />
-        </button>
+        <Tooltip.Root delayDuration={150}>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              onClick={() => openThread(id)}
+              className="group inline-flex h-7 w-7 items-center justify-center"
+            >
+              <ThreadIcon className="h-5 w-5 text-zinc-300 group-hover:text-fuchsia-400" />
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content
+              className="-left-10 select-none rounded-md bg-zinc-800/80 px-3.5 py-1.5 text-sm leading-none text-zinc-100 backdrop-blur-lg will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
+              sideOffset={5}
+            >
+              Open thread
+              <Tooltip.Arrow className="fill-zinc-800/80 backdrop-blur-lg" />
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
      </div>
    </Tooltip.Provider>
  );
--- a/src/shared/notes/actions/reaction.tsx
+++ b/src/shared/notes/actions/reaction.tsx
@@ -1,32 +1,141 @@
-import * as Tooltip from '@radix-ui/react-tooltip';
+import * as Popover from '@radix-ui/react-popover';
+import { useCallback, useEffect, useState } from 'react';

 import { ReactionIcon } from '@shared/icons';

-export function NoteReaction() {
-  const submit = async () => {
-    console.log('todo');
+import { usePublish } from '@utils/hooks/usePublish';
+
+const REACTIONS = [
+  {
+    content: '👏',
+    img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Clapping%20Hands.png',
+  },
+  {
+    content: '🤪',
+    img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20with%20Tongue.png',
+  },
+  {
+    content: '😮',
+    img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20with%20Open%20Mouth.png',
+  },
+  {
+    content: '😢',
+    img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Crying%20Face.png',
+  },
+  {
+    content: '🤡',
+    img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Clown%20Face.png',
+  },
+];
+
+export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
+  const [open, setOpen] = useState(false);
+  const [reaction, setReaction] = useState<string | null>(null);
+
+  const publish = usePublish();
+
+  const getReactionImage = (content: string) => {
+    const reaction: { img: string } = REACTIONS.find((el) => el.content === content);
+    return reaction.img;
+  };
+
+  const react = async (content: string) => {
+    setReaction(content);
+
+    const event = await publish({
+      content: content,
+      kind: 7,
+      tags: [
+        ['e', id],
+        ['p', pubkey],
+      ],
+    });
+
+    if (event) {
+      setOpen(false);
+    }
  };

  return (
-    <Tooltip.Root delayDuration={150}>
-      <Tooltip.Trigger asChild>
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
        <button
          type="button"
-          onClick={() => submit()}
          className="group inline-flex h-7 w-7 items-center justify-center"
        >
-          <ReactionIcon className="h-5 w-5 text-zinc-300 group-hover:text-red-400" />
+          {reaction ? (
+            <img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" />
+          ) : (
+            <ReactionIcon className="h-5 w-5 text-zinc-300 group-hover:text-red-400" />
+          )}
        </button>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content
-          className="-left-10 select-none rounded-md bg-zinc-800/80 px-3.5 py-1.5 text-sm leading-none text-zinc-100 backdrop-blur-lg will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          className="select-none rounded-md bg-zinc-800/80 px-1 py-1 text-sm leading-none text-zinc-100 backdrop-blur-lg will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
          sideOffset={5}
+          side="top"
        >
-          Reaction
-          <Tooltip.Arrow className="fill-zinc-800/80 backdrop-blur-lg" />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => react('👏')}
+              className="inline-flex h-8 w-8 items-center justify-center rounded hover:bg-zinc-600"
+            >
+              <img
+                src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Clapping%20Hands.png"
+                alt="Clapping Hands"
+                className="h-6 w-6"
+              />
+            </button>
+            <button
+              type="button"
+              onClick={() => react('🤪')}
+              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-600"
+            >
+              <img
+                src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20with%20Tongue.png"
+                alt="Face with Tongue"
+                className="h-6 w-6"
+              />
+            </button>
+            <button
+              type="button"
+              onClick={() => react('😮')}
+              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-600"
+            >
+              <img
+                src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20with%20Open%20Mouth.png"
+                alt="Face with Open Mouth"
+                className="h-6 w-6"
+              />
+            </button>
+            <button
+              type="button"
+              onClick={() => react('😢')}
+              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-600"
+            >
+              <img
+                src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Crying%20Face.png"
+                alt="Crying Face"
+                className="h-6 w-6"
+              />
+            </button>
+            <button
+              type="button"
+              onClick={() => react('🤡')}
+              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-600"
+            >
+              <img
+                src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Clown%20Face.png"
+                alt="Clown Face"
+                className="h-6 w-6"
+              />
+            </button>
+          </div>
+          <Popover.Arrow className="fill-zinc-800" />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
  );
 }
--- a/src/shared/notes/content.tsx
+++ b/src/shared/notes/content.tsx
@@ -34,7 +34,7 @@ export function NoteContent({
              return (
                <button
                  type="button"
-                  className="rounded bg-zinc-800 px-2 py-px text-sm font-normal text-orange-400 no-underline hover:bg-orange-100 hover:text-orange-500"
+                  className="rounded bg-zinc-800 px-2 py-px text-sm font-normal text-orange-400 no-underline hover:bg-zinc-700 hover:text-orange-500"
                >
                  {key.slice(3)}
                </button>
--- a/src/shared/notes/mentions/user.tsx
+++ b/src/shared/notes/mentions/user.tsx
@@ -7,7 +7,7 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
  return (
    <button
      type="button"
-      className="break-words rounded bg-zinc-800 px-2 py-px text-sm font-normal text-blue-400 no-underline hover:bg-blue-100 hover:text-blue-500"
+      className="break-words rounded bg-zinc-800 px-2 py-px text-sm font-normal text-blue-400 no-underline hover:bg-zinc-700 hover:text-blue-500"
    >
      @{user?.name || user?.displayName || shortenKey(pubkey)}
    </button>