279 lines
9.6 KiB
TypeScript
279 lines
9.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
||
import { useDiscordActivity } from "@/contexts/DiscordActivityContext";
|
||
import LoadingScreen from "@/components/LoadingScreen";
|
||
|
||
export default function Activity() {
|
||
const { isActivity, isLoading, user, error } = useDiscordActivity();
|
||
const [showContent, setShowContent] = useState(false);
|
||
|
||
useEffect(() => {
|
||
// Only show content if we're actually in a Discord Activity
|
||
// This is a one-time check - we don't navigate away
|
||
if (isActivity && !isLoading) {
|
||
setShowContent(true);
|
||
}
|
||
}, [isActivity, isLoading]);
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<LoadingScreen
|
||
message="Initializing Discord Activity..."
|
||
showProgress={true}
|
||
duration={5000}
|
||
/>
|
||
);
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="flex items-center justify-center min-h-screen bg-gray-900">
|
||
<div className="text-center max-w-md">
|
||
<h1 className="text-3xl font-bold text-red-500 mb-4">
|
||
❌ Activity Error
|
||
</h1>
|
||
<p className="text-gray-300 mb-8 text-sm">{error}</p>
|
||
|
||
<div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mb-6 text-left">
|
||
<h3 className="text-white font-semibold mb-3">
|
||
Troubleshooting Steps:
|
||
</h3>
|
||
<ol className="text-gray-400 text-sm space-y-2 list-decimal list-inside">
|
||
<li>Clear your browser cache (Ctrl+Shift+Delete)</li>
|
||
<li>Close Discord completely</li>
|
||
<li>Reopen Discord</li>
|
||
<li>Try opening the Activity again</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div className="bg-blue-900/20 border border-blue-700 rounded-lg p-3 mb-6">
|
||
<p className="text-blue-300 text-xs">
|
||
💡 Open browser console (F12) and look for messages starting with{" "}
|
||
<code className="bg-blue-950 px-1 rounded">
|
||
[Discord Activity]
|
||
</code>
|
||
</p>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => window.location.reload()}
|
||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors text-sm"
|
||
>
|
||
Retry
|
||
</button>
|
||
|
||
<p className="text-gray-500 text-xs mt-4">
|
||
Still having issues? Check the{" "}
|
||
<a
|
||
href="/docs/troubleshooting"
|
||
className="text-blue-400 hover:text-blue-300"
|
||
>
|
||
troubleshooting guide
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Not in Discord Activity - show informational message
|
||
if (!isActivity && !isLoading) {
|
||
return (
|
||
<div className="flex items-center justify-center min-h-screen bg-gray-900">
|
||
<div className="text-center max-w-md">
|
||
<h1 className="text-3xl font-bold text-white mb-4">
|
||
🎮 Discord Activity
|
||
</h1>
|
||
<p className="text-gray-300 mb-8">
|
||
This page is designed to run as a Discord Activity. Open it within
|
||
Discord to get started!
|
||
</p>
|
||
<p className="text-gray-500 text-sm">
|
||
Not in Discord? Visit the main app at{" "}
|
||
<a
|
||
href="https://aethex.dev"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-blue-400 hover:text-blue-300 underline"
|
||
>
|
||
aethex.dev
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<LoadingScreen
|
||
message="Initializing Discord Activity..."
|
||
showProgress={true}
|
||
duration={5000}
|
||
/>
|
||
);
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="flex items-center justify-center min-h-screen bg-gray-900">
|
||
<div className="text-center max-w-md">
|
||
<h1 className="text-3xl font-bold text-red-500 mb-4">
|
||
❌ Activity Error
|
||
</h1>
|
||
<p className="text-gray-300 mb-8 text-sm">{error}</p>
|
||
|
||
<div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mb-6 text-left">
|
||
<h3 className="text-white font-semibold mb-3">
|
||
Troubleshooting Steps:
|
||
</h3>
|
||
<ol className="text-gray-400 text-sm space-y-2 list-decimal list-inside">
|
||
<li>Clear your browser cache (Ctrl+Shift+Delete)</li>
|
||
<li>Close Discord completely</li>
|
||
<li>Reopen Discord</li>
|
||
<li>Try opening the Activity again</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div className="bg-blue-900/20 border border-blue-700 rounded-lg p-3 mb-6">
|
||
<p className="text-blue-300 text-xs">
|
||
💡 Open Discord DevTools (Ctrl+Shift+I) and check the console for
|
||
messages starting with{" "}
|
||
<code className="bg-blue-950 px-1 rounded">
|
||
[Discord Activity]
|
||
</code>
|
||
</p>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => window.location.reload()}
|
||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors text-sm"
|
||
>
|
||
Retry
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (user && showContent) {
|
||
const appBaseUrl = "https://aethex.dev";
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-900">
|
||
<div className="max-w-2xl mx-auto px-4 py-8">
|
||
<div className="text-center mb-8">
|
||
<h1 className="text-3xl font-bold text-white">
|
||
Welcome to AeThex, {user.full_name || user.username}! 🎉
|
||
</h1>
|
||
<p className="text-gray-400 mt-2">Discord Activity</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
|
||
<h2 className="text-xl font-bold text-white mb-4">
|
||
👤 Your Profile
|
||
</h2>
|
||
{user.avatar_url && (
|
||
<img
|
||
src={user.avatar_url}
|
||
alt={user.full_name || user.username}
|
||
className="w-16 h-16 rounded-full mb-4"
|
||
/>
|
||
)}
|
||
<p className="text-gray-300">
|
||
<strong>Name:</strong> {user.full_name || "Not set"}
|
||
</p>
|
||
<p className="text-gray-300">
|
||
<strong>Username:</strong> {user.username || "Not set"}
|
||
</p>
|
||
<p className="text-gray-300">
|
||
<strong>Type:</strong> {user.user_type || "community_member"}
|
||
</p>
|
||
{user.bio && (
|
||
<p className="text-gray-400 mt-2 italic">"{user.bio}"</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
|
||
<h2 className="text-xl font-bold text-white mb-4">
|
||
⚔️ Your Realm
|
||
</h2>
|
||
<p className="text-2xl font-bold text-purple-400 mb-4">
|
||
{user.primary_arm?.toUpperCase() || "LABS"}
|
||
</p>
|
||
<p className="text-gray-400">
|
||
Your primary realm determines your Discord role and access to
|
||
realm-specific features.
|
||
</p>
|
||
<button
|
||
onClick={() =>
|
||
window.open(`${appBaseUrl}/profile/settings`, "_blank")
|
||
}
|
||
className="mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors"
|
||
>
|
||
Change Realm
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700 mb-8">
|
||
<h2 className="text-xl font-bold text-white mb-4">
|
||
🚀 Quick Actions
|
||
</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<button
|
||
onClick={() => window.open(`${appBaseUrl}/creators`, "_blank")}
|
||
className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors font-medium"
|
||
>
|
||
🎨 Browse Creators
|
||
</button>
|
||
<button
|
||
onClick={() =>
|
||
window.open(`${appBaseUrl}/opportunities`, "_blank")
|
||
}
|
||
className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors font-medium"
|
||
>
|
||
💼 Find Opportunities
|
||
</button>
|
||
<button
|
||
onClick={() =>
|
||
window.open(`${appBaseUrl}/profile/settings`, "_blank")
|
||
}
|
||
className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors font-medium"
|
||
>
|
||
⚙️ Settings
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-blue-900/20 border border-blue-700 rounded-lg p-4">
|
||
<p className="text-blue-100 text-sm">
|
||
💡 <strong>Discord Commands:</strong> Use{" "}
|
||
<code className="bg-blue-950 px-2 py-1 rounded text-xs">
|
||
/profile
|
||
</code>
|
||
,{" "}
|
||
<code className="bg-blue-950 px-2 py-1 rounded text-xs">
|
||
/set-realm
|
||
</code>
|
||
, and{" "}
|
||
<code className="bg-blue-950 px-2 py-1 rounded text-xs">
|
||
/verify-role
|
||
</code>{" "}
|
||
to manage your account directly in Discord.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Still loading
|
||
return (
|
||
<LoadingScreen
|
||
message="Loading your profile..."
|
||
showProgress={true}
|
||
duration={5000}
|
||
/>
|
||
);
|
||
}
|