|
|
|
|
@ -1,20 +1,10 @@
|
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
|
|
|
import EmojiPicker, { EmojiClickData } from 'emoji-picker-react';
|
|
|
|
|
import browser from 'webextension-polyfill';
|
|
|
|
|
|
|
|
|
|
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
|
|
|
|
|
import { fetchReactionsForIssue, getAnonymousUserId, toggleReactionApi } from '../api';
|
|
|
|
|
|
|
|
|
|
type CommentReactions = { [emoji: string]: string[] };
|
|
|
|
|
interface ReactionsProps { issueId: number; commentId: string; }
|
|
|
|
|
|
|
|
|
|
async function getAnonymousUserId(): Promise<string> {
|
|
|
|
|
const data = await browser.storage.local.get('userId');
|
|
|
|
|
if (data.userId) return data.userId;
|
|
|
|
|
const newUserId = crypto.randomUUID();
|
|
|
|
|
await browser.storage.local.set({ userId: newUserId });
|
|
|
|
|
return newUserId;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const Reactions: React.FC<ReactionsProps> = ({ issueId, commentId }) => {
|
|
|
|
|
const [reactions, setReactions] = useState<CommentReactions>({});
|
|
|
|
|
const [myUserId, setMyUserId] = useState<string | null>(null);
|
|
|
|
|
@ -25,16 +15,17 @@ const Reactions: React.FC<ReactionsProps> = ({ issueId, commentId }) => {
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const fetchData = async () => {
|
|
|
|
|
try {
|
|
|
|
|
const userId = await getAnonymousUserId();
|
|
|
|
|
const [userId, allReactions] = await Promise.all([
|
|
|
|
|
getAnonymousUserId(),
|
|
|
|
|
fetchReactionsForIssue(issueId)
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
setMyUserId(userId);
|
|
|
|
|
const response = await fetch(`${API_BASE_URL}/api/reactions/${issueId}`);
|
|
|
|
|
if (!response.ok) throw new Error('Network response was not ok');
|
|
|
|
|
const data = await response.json();
|
|
|
|
|
if (data && data[commentId]) {
|
|
|
|
|
setReactions(data[commentId]);
|
|
|
|
|
if (allReactions && allReactions[commentId]) {
|
|
|
|
|
setReactions(allReactions[commentId]);
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error("Failed to fetch reactions:", error);
|
|
|
|
|
console.error("Failed to fetch data:", error);
|
|
|
|
|
} finally {
|
|
|
|
|
setIsLoading(false);
|
|
|
|
|
}
|
|
|
|
|
@ -52,22 +43,22 @@ const Reactions: React.FC<ReactionsProps> = ({ issueId, commentId }) => {
|
|
|
|
|
|
|
|
|
|
const handleReactionClick = async (emoji: string) => {
|
|
|
|
|
if (!myUserId) return;
|
|
|
|
|
const currentReactions = reactions[emoji] || [];
|
|
|
|
|
const hasReacted = currentReactions.includes(myUserId);
|
|
|
|
|
const hasReacted = (reactions[emoji] || []).includes(myUserId);
|
|
|
|
|
const method = hasReacted ? 'DELETE' : 'POST';
|
|
|
|
|
const previousReactions = { ...reactions };
|
|
|
|
|
|
|
|
|
|
setReactions(prev => {
|
|
|
|
|
const newUsers = hasReacted ? (prev[emoji] || []).filter(id => id !== myUserId) : [...(prev[emoji] || []), myUserId];
|
|
|
|
|
const users = prev[emoji] || [];
|
|
|
|
|
const newUsers = hasReacted ? users.filter(id => id !== myUserId) : [...users, myUserId];
|
|
|
|
|
const newReactionsForComment = { ...prev, [emoji]: newUsers };
|
|
|
|
|
if (newReactionsForComment[emoji].length === 0) delete newReactionsForComment[emoji];
|
|
|
|
|
if (newReactionsForComment[emoji].length === 0) {
|
|
|
|
|
delete newReactionsForComment[emoji];
|
|
|
|
|
}
|
|
|
|
|
return newReactionsForComment;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const response = await fetch(`${API_BASE_URL}/api/reactions`, {
|
|
|
|
|
method,
|
|
|
|
|
headers: { 'Content-Type': 'application/json', 'X-User-ID': myUserId },
|
|
|
|
|
body: JSON.stringify({ issueId, commentId, emoji }),
|
|
|
|
|
});
|
|
|
|
|
const response = await toggleReactionApi(issueId, commentId, emoji, myUserId, method);
|
|
|
|
|
if (!response.ok) throw new Error('Server returned an error');
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error("Failed to update reaction:", error);
|
|
|
|
|
@ -80,7 +71,17 @@ const Reactions: React.FC<ReactionsProps> = ({ issueId, commentId }) => {
|
|
|
|
|
handleReactionClick(emojiData.emoji);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (isLoading || !myUserId) return null;
|
|
|
|
|
if (isLoading) {
|
|
|
|
|
return (
|
|
|
|
|
<div style={styles.container}>
|
|
|
|
|
<div style={{ ...styles.skeleton, width: '50px' }}></div>
|
|
|
|
|
<div style={{ ...styles.skeleton, width: '45px' }}></div>
|
|
|
|
|
<div style={styles.addButtonSkeleton}></div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!myUserId) return null;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div style={styles.container}>
|
|
|
|
|
@ -109,7 +110,7 @@ const Reactions: React.FC<ReactionsProps> = ({ issueId, commentId }) => {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const styles: { [key: string]: React.CSSProperties } = {
|
|
|
|
|
container: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '6px', marginTop: '8px', marginBottom: '8px', paddingLeft: '10px', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif', fontSize: '13px' },
|
|
|
|
|
container: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '6px', marginTop: '8px', marginBottom: '8px', paddingLeft: '10px', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif', fontSize: '13px', minHeight: '36px' },
|
|
|
|
|
badge: { display: 'flex', alignItems: 'center', padding: '2px 8px', border: '1px solid #dcdcdc', borderRadius: '12px', cursor: 'pointer', transition: 'background-color 0.2s', backgroundColor: '#f7f7f7' },
|
|
|
|
|
badgeSelected: { backgroundColor: '#e6f2ff', borderColor: '#99ccff' },
|
|
|
|
|
emoji: { marginRight: '4px', fontSize: '15px', lineHeight: '1' },
|
|
|
|
|
@ -117,6 +118,7 @@ const styles: { [key: string]: React.CSSProperties } = {
|
|
|
|
|
countSelected: { color: '#005cc5' },
|
|
|
|
|
addButton: { display: 'flex', alignItems: 'center', padding: '2px 8px', border: '1px dashed #ccc', borderRadius: '12px', backgroundColor: 'transparent', cursor: 'pointer', color: '#555', fontFamily: 'inherit', fontSize: '13px' },
|
|
|
|
|
pickerWrapper: { position: 'absolute', bottom: '100%', left: 0, marginBottom: '10px', zIndex: 1000 },
|
|
|
|
|
skeleton: { height: '26px', backgroundColor: '#eef0f2', borderRadius: '12px', animation: 'reactions-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite' },
|
|
|
|
|
addButtonSkeleton: { height: '26px', width: '42px', backgroundColor: 'transparent', border: '1px dashed #e0e0e0', borderRadius: '12px' },
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default Reactions;
|
|
|
|
|
|
Sergey Marinkevich
Сергей Маринкевич