131 lines
4.6 KiB
TypeScript
131 lines
4.6 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useDiscord } from '@/contexts/DiscordContext';
|
|
import LoadingScreen from '@/components/LoadingScreen';
|
|
|
|
interface DiscordSDK {
|
|
ready: () => Promise<void>;
|
|
user: {
|
|
getMe: () => Promise<any>;
|
|
};
|
|
commands: {
|
|
authorize: (options: any) => Promise<any>;
|
|
};
|
|
}
|
|
|
|
export default function DiscordActivity() {
|
|
const { isDiscordActivity, discordUser } = useDiscord();
|
|
const [sdkReady, setSdkReady] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const initDiscordSDK = async () => {
|
|
try {
|
|
// Discord SDK should be loaded by the script in index.html
|
|
if (!(window as any).DiscordSDK) {
|
|
throw new Error('Discord SDK not loaded');
|
|
}
|
|
|
|
const discord = (window as any).DiscordSDK as DiscordSDK;
|
|
|
|
// Ready the SDK
|
|
await discord.ready();
|
|
setSdkReady(true);
|
|
|
|
// Subscribe to close events
|
|
if (discord.subscribe) {
|
|
discord.subscribe('ACTIVITY_INSTANCE_PARTICIPANTS_UPDATE', (data: any) => {
|
|
console.log('Discord participants updated:', data);
|
|
});
|
|
}
|
|
} catch (err) {
|
|
const errorMessage = err instanceof Error ? err.message : String(err);
|
|
console.error('Failed to initialize Discord SDK:', err);
|
|
setError(errorMessage);
|
|
}
|
|
};
|
|
|
|
if (!sdkReady) {
|
|
initDiscordSDK();
|
|
}
|
|
}, []);
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-background">
|
|
<div className="text-center space-y-4">
|
|
<h1 className="text-2xl font-bold text-foreground">Discord Activity Error</h1>
|
|
<p className="text-muted-foreground">{error}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Make sure you're running this as a Discord Activity within a Discord server.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!isDiscordActivity || !sdkReady) {
|
|
return (
|
|
<LoadingScreen
|
|
message="Initializing Discord Activity..."
|
|
showProgress
|
|
duration={1000}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (!discordUser) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-background">
|
|
<div className="text-center space-y-4">
|
|
<h1 className="text-2xl font-bold text-foreground">Welcome to AeThex</h1>
|
|
<p className="text-muted-foreground">Discord user information unavailable</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Activity is ready and user is authenticated via Discord
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<div className="p-4 text-sm text-muted-foreground border-b border-border/50">
|
|
<p>👋 Welcome <strong>{discordUser.username}</strong> to AeThex Discord Activity</p>
|
|
</div>
|
|
<div className="container mx-auto py-8">
|
|
<div className="text-center space-y-4">
|
|
<h1 className="text-3xl font-bold text-foreground">AeThex Community</h1>
|
|
<p className="text-muted-foreground">Full platform access from Discord</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto mt-8">
|
|
<a
|
|
href="/feed"
|
|
className="p-4 rounded-lg border border-border/50 hover:border-aethex-400/50 transition text-left"
|
|
>
|
|
<div className="font-semibold">Community Feed</div>
|
|
<p className="text-sm text-muted-foreground mt-1">View posts and engage with creators</p>
|
|
</a>
|
|
<a
|
|
href="/community"
|
|
className="p-4 rounded-lg border border-border/50 hover:border-aethex-400/50 transition text-left"
|
|
>
|
|
<div className="font-semibold">Community Hub</div>
|
|
<p className="text-sm text-muted-foreground mt-1">Connect with mentors and developers</p>
|
|
</a>
|
|
<a
|
|
href="/dashboard"
|
|
className="p-4 rounded-lg border border-border/50 hover:border-aethex-400/50 transition text-left"
|
|
>
|
|
<div className="font-semibold">Dashboard</div>
|
|
<p className="text-sm text-muted-foreground mt-1">Manage your projects and profile</p>
|
|
</a>
|
|
<a
|
|
href="/roadmap"
|
|
className="p-4 rounded-lg border border-border/50 hover:border-aethex-400/50 transition text-left"
|
|
>
|
|
<div className="font-semibold">Roadmap</div>
|
|
<p className="text-sm text-muted-foreground mt-1">Vote on upcoming features</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|