@defikitdotnet/x-ai-combat
Version:
XCombatAI - Social Media Engagement Template for the Agent Framework
123 lines • 9.48 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const AuthContext_1 = require("../contexts/AuthContext");
/**
* PostPanel component
*
* Displays a list of posts the current user has interacted with
*/
const PostPanel = () => {
const { user } = (0, AuthContext_1.useAuth)();
const [posts, setPosts] = (0, react_1.useState)([]);
const [loading, setLoading] = (0, react_1.useState)(true);
const [error, setError] = (0, react_1.useState)(null);
const [pagination, setPagination] = (0, react_1.useState)({
page: 1,
limit: 5,
total: 0,
totalPages: 0
});
console.log('PostPanel - user:', user);
const fetchPosts = async (page = 1) => {
if (!user) {
setLoading(false);
return;
}
try {
const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:3005';
setLoading(true);
// Fetch current user's posts using the new endpoint with pagination
const response = await fetch(`${backendUrl}/xaicombat/api/posts/my-posts?page=${page}&limit=${pagination.limit}`, {
credentials: 'include' // Include cookies for JWT authentication
});
if (!response.ok) {
throw new Error('Failed to fetch posts');
}
const responseData = await response.json();
const userPosts = responseData.data;
// Update pagination information
if (responseData.pagination) {
setPagination(responseData.pagination);
}
setPosts(userPosts);
}
catch (err) {
setError(err.message);
console.error('Error fetching posts:', err);
}
finally {
setLoading(false);
}
};
// useEffect(() => {
// fetchPosts(1);
// }, [user]);
const handlePageChange = (newPage) => {
if (newPage >= 1 && newPage <= pagination.totalPages) {
fetchPosts(newPage);
}
};
if (loading) {
return (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center py-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "animate-pulse space-y-4 w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-20 bg-gray-200 dark:bg-gray-700 rounded w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "h-20 bg-gray-200 dark:bg-gray-700 rounded w-full" })] }) });
}
if (error) {
return (0, jsx_runtime_1.jsxs)("div", { className: "text-red-500 dark:text-red-400 py-2", children: ["Error: ", error] });
}
if (posts.length === 0) {
return (0, jsx_runtime_1.jsx)("div", { className: "text-gray-500 dark:text-gray-400 py-2", children: "No posts found. Try tagging our bot in your tweets!" });
}
// Function to create Twitter URL from tweet ID
const getTwitterUrl = (tweetId) => {
return `https://twitter.com/i/web/status/${tweetId}`;
};
// Generate an array of page numbers to display
const getPageNumbers = () => {
const maxPagesToShow = 5;
const pageNumbers = [];
const currentPage = pagination.page;
const totalPages = pagination.totalPages;
if (totalPages <= maxPagesToShow) {
// If we have fewer pages than our max, show all pages
for (let i = 1; i <= totalPages; i++) {
pageNumbers.push(i);
}
}
else {
// Always include the first page
pageNumbers.push(1);
// Calculate start and end, keeping the current page in the middle when possible
let start = Math.max(2, currentPage - Math.floor((maxPagesToShow - 3) / 2));
let end = Math.min(totalPages - 1, start + maxPagesToShow - 4);
// Adjust start if end is too small
start = Math.max(2, Math.min(start, totalPages - maxPagesToShow + 2));
// Add ellipsis if needed
if (start > 2) {
pageNumbers.push('...');
}
// Add middle pages
for (let i = start; i <= end; i++) {
pageNumbers.push(i);
}
// Add ellipsis if needed
if (end < totalPages - 1) {
pageNumbers.push('...');
}
// Always include the last page
pageNumbers.push(totalPages);
}
return pageNumbers;
};
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "space-y-4 mb-6", children: posts.map((post) => ((0, jsx_runtime_1.jsx)("div", { className: "border dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition duration-150", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-start", children: [(0, jsx_runtime_1.jsx)("p", { className: "font-medium dark:text-gray-200", children: post.content }), (0, jsx_runtime_1.jsxs)("a", { href: getTwitterUrl(post.tweetId), target: "_blank", rel: "noopener noreferrer", className: "ml-2 flex-shrink-0 text-brand-500 hover:text-brand-600 dark:text-brand-400 dark:hover:text-brand-300 text-sm inline-flex items-center", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) }), "View on X"] })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", children: ["Posted on ", new Date(post.createdAt).toLocaleString()] })] }), post.stats && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-3 pt-2 mt-2 border-t border-gray-100 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-300", children: [(0, jsx_runtime_1.jsxs)("div", { title: "Likes", className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("span", { role: "img", "aria-label": "Likes", className: "mr-1", children: "\u2764\uFE0F" }), " ", post.stats.likes] }), (0, jsx_runtime_1.jsxs)("div", { title: "Retweets", className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("span", { role: "img", "aria-label": "Retweets", className: "mr-1", children: "\uD83D\uDD04" }), " ", post.stats.retweets] }), (0, jsx_runtime_1.jsxs)("div", { title: "Quotes", className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("span", { role: "img", "aria-label": "Quotes", className: "mr-1", children: "\uD83D\uDCAC" }), " ", post.stats.quotes] }), (0, jsx_runtime_1.jsxs)("div", { title: "Replies", className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("span", { role: "img", "aria-label": "Replies", className: "mr-1", children: "\u21A9\uFE0F" }), " ", post.stats.replies] }), (0, jsx_runtime_1.jsxs)("div", { title: "Total Interactions", className: "flex items-center text-brand-600 dark:text-brand-400 font-semibold", children: [(0, jsx_runtime_1.jsx)("span", { role: "img", "aria-label": "Total", className: "mr-1", children: "\uD83D\uDCCA" }), " ", post.stats.total] }), (0, jsx_runtime_1.jsxs)("div", { title: "Fame Points", className: "flex items-center text-brand-600 dark:text-brand-400 font-bold", children: [(0, jsx_runtime_1.jsx)("span", { role: "img", "aria-label": "Fame", className: "mr-1", children: "\u2B50" }), " ", post.stats.famePoints.toFixed(1)] })] }))] }) }, post.id))) }), pagination.totalPages > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center my-4", children: (0, jsx_runtime_1.jsxs)("nav", { className: "flex items-center space-x-1", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => handlePageChange(pagination.page - 1), disabled: pagination.page === 1, className: `px-2 py-1 rounded ${pagination.page === 1
? 'text-gray-400 dark:text-gray-600 cursor-not-allowed'
: 'text-brand-600 dark:text-brand-400 hover:bg-brand-50 dark:hover:bg-brand-900/30'}`, children: "<" }), getPageNumbers().map((pageNum, index) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => typeof pageNum === 'number' ? handlePageChange(pageNum) : null, disabled: pageNum === '...', className: `px-3 py-1 rounded ${pageNum === pagination.page
? 'bg-brand-600 dark:bg-brand-600 text-white font-medium'
: pageNum === '...'
? 'text-gray-400 dark:text-gray-500 cursor-default'
: 'text-gray-700 dark:text-gray-300 hover:bg-brand-50 dark:hover:bg-brand-900/30'}`, children: pageNum }, index))), (0, jsx_runtime_1.jsx)("button", { onClick: () => handlePageChange(pagination.page + 1), disabled: pagination.page === pagination.totalPages, className: `px-2 py-1 rounded ${pagination.page === pagination.totalPages
? 'text-gray-400 dark:text-gray-600 cursor-not-allowed'
: 'text-brand-600 dark:text-brand-400 hover:bg-brand-50 dark:hover:bg-brand-900/30'}`, children: ">" })] }) }))] }));
};
exports.default = PostPanel;
//# sourceMappingURL=PostPanel.js.map