Jannis Braun
5ef502f2e3
Phase 1 - Feature Repair: - Fix member kick/leave: add missing db.delete() call in servers.ts - Stabilize invite codes: return existing code instead of regenerating - Fix user search: use LIKE instead of exact match in social.ts - Wire DM button on FriendsPage to create/navigate to DM channels - Add cancel outgoing friend request (DELETE endpoint + frontend) - Add accept/decline friend request actions with WS real-time events - Fix replyToId persistence in message creation - Hydrate reactions and replyTo in message queries - Add joinByCode to API client and serverStore - Add friend_request_received/accepted WebSocket events Phase 2 - Discord UI Overhaul: - Remove stray borders between layout columns - Replace shadow-sm with shadow-header on content headers - Replace all bg-gray-*/text-gray-* with Discord color tokens - Ensure flat color contrast (#1E1F22, #2B2D31, #313338) Testing: - Set up vitest + @testing-library/react + jsdom - Add 17 tests across InviteModal, JoinServer, FriendsPage (all passing) - Fix vite resolve.extensions to prefer .tsx over stale .js files
50 lines
2.6 KiB
JavaScript
50 lines
2.6 KiB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { useState, useEffect } from 'react';
|
|
import { Modal } from '../ui/Modal';
|
|
import { useUIStore } from '../../stores/uiStore';
|
|
import { useServerStore } from '../../stores/serverStore';
|
|
export function InviteModal() {
|
|
const [inviteCode, setInviteCode] = useState('');
|
|
const [copied, setCopied] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const activeModal = useUIStore((s) => s.activeModal);
|
|
const closeModal = useUIStore((s) => s.closeModal);
|
|
const generateInvite = useServerStore((s) => s.generateInvite);
|
|
const currentServerId = useServerStore((s) => s.currentServerId);
|
|
const isOpen = activeModal === 'invite';
|
|
const inviteUrl = inviteCode ? `${window.location.origin}/join/${inviteCode}` : '';
|
|
useEffect(() => {
|
|
if (isOpen && currentServerId) {
|
|
setIsLoading(true);
|
|
generateInvite(currentServerId)
|
|
.then(code => {
|
|
setInviteCode(code);
|
|
setIsLoading(false);
|
|
})
|
|
.catch(() => setIsLoading(false));
|
|
}
|
|
}, [isOpen, currentServerId, generateInvite]);
|
|
const handleCopy = async () => {
|
|
if (!inviteUrl)
|
|
return;
|
|
try {
|
|
await navigator.clipboard.writeText(inviteUrl);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
}
|
|
catch {
|
|
// Fallback: select the text
|
|
const input = document.querySelector('.invite-code-input');
|
|
if (input) {
|
|
input.select();
|
|
document.execCommand('copy');
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
}
|
|
}
|
|
};
|
|
return (_jsxs(Modal, { isOpen: isOpen, onClose: closeModal, title: "Invite Friends", children: [_jsx("p", { className: "text-discord-text-secondary text-sm mb-4", children: "Share this invite link with friends to let them join your server." }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", value: isLoading ? 'Generating...' : inviteUrl, readOnly: true, className: "invite-code-input flex-1 px-3 py-2 bg-discord-bg-tertiary rounded text-discord-text-primary outline-none font-mono text-xs" }), _jsx("button", { onClick: handleCopy, disabled: isLoading || !inviteUrl, className: `px-4 py-2 text-sm font-medium rounded transition-colors ${copied
|
|
? 'bg-discord-green text-white'
|
|
: 'bg-discord-blurple hover:bg-discord-blurple-hover text-white'}`, children: copied ? 'Copied!' : 'Copy' })] })] }));
|
|
}
|