This commit is contained in:
Shusui MOYATANI
2023-05-14 15:06:40 +09:00
parent 88cc1c9bc8
commit 9ed589dcd2
2 changed files with 38 additions and 13 deletions

View File

@@ -112,6 +112,7 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
reactions,
reactionsGroupedByContent,
isReactedBy,
isReactedByWithEmoji,
invalidateReactions,
query: reactionsQuery,
} = useReactions(() => ({
@@ -220,6 +221,10 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
const p = pubkey();
return (p != null && isReactedBy(p)) || reacted();
});
const isReactedByMeWithEmoji = createMemo(() => {
const p = pubkey();
return p != null && isReactedByWithEmoji(p);
});
const isRepostedByMe = createMemo(() => {
const p = pubkey();
return (p != null && isRepostedBy(p)) || reposted();
@@ -429,8 +434,10 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
<div
class="flex shrink-0 items-center gap-1"
classList={{
'text-zinc-400': !isReactedByMe(),
'text-rose-400': isReactedByMe() || publishReactionMutation.isLoading,
'text-zinc-400': !isReactedByMe() || isReactedByMeWithEmoji(),
'text-rose-400':
(isReactedByMe() && !isReactedByMeWithEmoji()) ||
publishReactionMutation.isLoading,
}}
>
<button
@@ -438,7 +445,10 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
onClick={handleReaction}
disabled={publishReactionMutation.isLoading}
>
<Show when={isReactedByMe()} fallback={<HeartOutlined />}>
<Show
when={isReactedByMe() && !isReactedByMeWithEmoji()}
fallback={<HeartOutlined />}
>
<HeartSolid />
</Show>
</button>
@@ -451,7 +461,15 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
</Show>
</div>
<Show when={config().useEmojiReaction}>
<div class="shrink-0">
<div
class="flex shrink-0 items-center gap-1"
classList={{
'text-zinc-400': !isReactedByMe() || !isReactedByMeWithEmoji(),
'text-rose-400':
(isReactedByMe() && isReactedByMeWithEmoji()) ||
publishReactionMutation.isLoading,
}}
>
<EmojiPicker onEmojiSelect={(emoji) => doReaction(emoji)}>
<span class="inline-block h-4 w-4">
<Plus />

View File

@@ -1,11 +1,4 @@
import {
createSignal,
createMemo,
createRoot,
observable,
type Accessor,
type Signal,
} from 'solid-js';
import { createSignal, createMemo, observable, type Accessor, type Signal } from 'solid-js';
import { createQuery, useQueryClient, type CreateQueryResult } from '@tanstack/solid-query';
import { type Event as NostrEvent, type Filter, Kind } from 'nostr-tools';
@@ -82,6 +75,7 @@ export type UseReactions = {
reactions: () => NostrEvent[];
reactionsGroupedByContent: () => Map<string, NostrEvent[]>;
isReactedBy: (pubkey: string) => boolean;
isReactedByWithEmoji: (pubkey: string) => boolean;
invalidateReactions: () => Promise<void>;
query: CreateQueryResult<NostrEvent[]>;
};
@@ -116,6 +110,8 @@ export type UseFollowings = {
query: CreateQueryResult<NostrEvent | null>;
};
const EmojiRegex = /\p{Emoji_Presentation}/u;
let count = 0;
const { setActiveBatchSubscriptions } = useStats();
@@ -408,9 +404,20 @@ export const useReactions = (propsProvider: () => UseReactionsProps | null): Use
const isReactedBy = (pubkey: string): boolean =>
reactions().findIndex((event) => event.pubkey === pubkey) !== -1;
const isReactedByWithEmoji = (pubkey: string): boolean =>
reactions().findIndex((event) => event.pubkey === pubkey && EmojiRegex.test(event.content)) !==
-1;
const invalidateReactions = (): Promise<void> => queryClient.invalidateQueries(genQueryKey());
return { reactions, reactionsGroupedByContent, isReactedBy, invalidateReactions, query };
return {
reactions,
reactionsGroupedByContent,
isReactedBy,
isReactedByWithEmoji,
invalidateReactions,
query,
};
};
export const useReposts = (propsProvider: () => UseRepostsProps): UseReposts => {