aboutsummaryrefslogtreecommitdiff
path: root/web/src/app/guilds/page.js
diff options
context:
space:
mode:
Diffstat (limited to 'web/src/app/guilds/page.js')
-rw-r--r--web/src/app/guilds/page.js314
1 files changed, 314 insertions, 0 deletions
diff --git a/web/src/app/guilds/page.js b/web/src/app/guilds/page.js
new file mode 100644
index 0000000..23ec00d
--- /dev/null
+++ b/web/src/app/guilds/page.js
@@ -0,0 +1,314 @@
+'use client';
+import { useState, useEffect } from "react";
+import { fetchWithAuth } from "@/utils/api";
+import Link from "next/link";
+import Card from "@/app/components/Card";
+import Navbar from "@/app/components/Navbar";
+
+export default function Guilds() {
+ const [guilds, setGuilds] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [clientId, setClientId] = useState(null);
+ const [selectedGuild, setSelectedGuild] = useState(null);
+ const [showModal, setShowModal] = useState(false);
+ const [formData, setFormData] = useState({
+ guildID: '',
+ logChannelID: '',
+ suggestionsChannelID: '',
+ qotdChannelID: '',
+ qotdToggle: false,
+ ollamaEnabled: false
+ });
+ const [formMessage, setFormMessage] = useState(null);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ // Fetch guilds
+ const guildsResponse = await fetchWithAuth('/api/servers');
+ if (!guildsResponse.ok) {
+ throw new Error('Failed to fetch guilds');
+ }
+ const guildsData = await guildsResponse.json();
+ setGuilds(guildsData);
+
+ // Fetch client ID
+ const apiUrl = localStorage.getItem('apiUrl') || '';
+ const versionResponse = await fetch(`${apiUrl}/api/version`);
+ if (!versionResponse.ok) {
+ throw new Error('Failed to fetch version data');
+ }
+ const versionData = await versionResponse.json();
+ setClientId(versionData.client_id);
+ } catch (err) {
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchData();
+ }, []);
+
+ const handleLeaveServer = async (serverId) => {
+ if (window.confirm('Are you sure you want to leave this server?')) {
+ try {
+ const response = await fetchWithAuth(`/api/leave`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ id: serverId
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error('Failed to leave server');
+ }
+
+ // Remove server from list
+ setGuilds(guilds.filter(guild => guild.id !== serverId));
+
+ // Close modal if the guild was selected
+ if (selectedGuild === serverId) {
+ closeModal();
+ }
+ } catch (err) {
+ setError(err.message);
+ }
+ }
+ };
+
+ const handleGuildSelect = async (guildId) => {
+ try {
+ setSelectedGuild(guildId);
+ const response = await fetchWithAuth(`/api/settings/guilds/${guildId}`);
+
+ if (!response.ok) {
+ throw new Error('Failed to fetch guild settings');
+ }
+
+ const data = await response.json();
+ setFormData({
+ guildID: data.settings.guildID || '',
+ logChannelID: data.settings.logChannelID || '',
+ suggestionsChannelID: data.settings.suggestionsChannelID || '',
+ qotdChannelID: data.settings.qotdChannelID || '',
+ qotdToggle: data.settings.qotdToggle || false,
+ ollamaEnabled: data.settings.ollamaEnabled || false
+ });
+ setShowModal(true);
+ } catch (err) {
+ setError(err.message);
+ setFormData({
+ guildID: guildId,
+ logChannelID: '',
+ suggestionsChannelID: '',
+ qotdChannelID: '',
+ qotdToggle: false,
+ ollamaEnabled: false
+ });
+ setShowModal(true);
+ }
+ };
+
+ const handleInputChange = (e) => {
+ const { name, value, type, checked } = e.target;
+ setFormData({
+ ...formData,
+ [name]: type === 'checkbox' ? checked : value
+ });
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setFormMessage(null);
+
+ try {
+ const response = await fetchWithAuth(`/api/settings/guilds/${selectedGuild}`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(formData)
+ });
+
+ if (!response.ok) {
+ throw new Error('Failed to update guild settings');
+ }
+
+ setFormMessage({
+ type: 'success',
+ text: 'Settings updated successfully'
+ });
+
+ // Clear message after 3 seconds
+ setTimeout(() => {
+ setFormMessage(null);
+ }, 3000);
+ } catch (err) {
+ setFormMessage({
+ type: 'error',
+ text: err.message
+ });
+ }
+ };
+
+ const closeModal = () => {
+ setShowModal(false);
+ setSelectedGuild(null);
+ setFormMessage(null);
+ };
+
+ return (
+ <>
+ <Navbar />
+ <div className="flex flex-col gap-4 p-12">
+ <h1 className="text-3xl">Guilds</h1>
+
+ {loading && <p>Loading guilds...</p>}
+ {error && <p className="text-red-500">Error: {error}</p>}
+
+ {!loading && guilds.length === 0 && (
+ <p>No guilds found. Invite AleeBot to your server.</p>
+ )}
+
+ <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+ {guilds.map(guild => (
+ <Card key={guild.id}>
+ <h2 className="text-lg font-medium">{guild.name}</h2>
+ <p>ID: {guild.id} - Members: {guild.members || 'N/A'}</p>
+ <div className="flex justify-between mt-2"> <button
+ onClick={() => handleGuildSelect(guild.id)}
+ className="text-blue-500 hover:text-blue-700 cursor-pointer"
+ >
+ Settings
+ </button>
+ <button
+ onClick={() => handleLeaveServer(guild.id)}
+ className="text-red-500 hover:text-red-700 cursor-pointer"
+ >
+ Leave
+ </button>
+ </div>
+ </Card>
+ ))}
+ </div>
+
+ <div className="flex gap-4 mt-4">
+ <Link
+ href={clientId ? `https://discord.com/oauth2/authorize?client_id=${clientId}&integration_type=0&scope=bot+applications.commands` : "#"}
+ className={`py-2 px-4 rounded-md text-md ${clientId ? 'bg-blue-600 hover:bg-blue-500' : 'bg-gray-400 cursor-not-allowed'}`}
+ >
+ Invite
+ </Link>
+ </div>
+ </div>
+
+ {/* Settings Modal */}
+ {showModal && (
+ <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+ <div className="bg-gray-800 p-6 rounded-lg w-full max-w-md mx-4">
+ <div className="flex justify-between items-center mb-4">
+ <h2 className="text-xl font-semibold">
+ Guild Settings: {guilds.find(g => g.id === selectedGuild)?.name}
+ </h2>
+ <button
+ onClick={closeModal}
+ className="text-gray-400 hover:text-white"
+ >
+ ✕
+ </button>
+ </div>
+
+ <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+ <div className="mb-2">
+ <label className="block text-sm text-gray-400 mb-1">Log Channel ID</label>
+ <input
+ name="logChannelID"
+ type="text"
+ placeholder="Enter channel ID"
+ value={formData.logChannelID}
+ onChange={handleInputChange}
+ className="w-full bg-gray-700 rounded p-2"
+ />
+ </div>
+
+ <div className="mb-2">
+ <label className="block text-sm text-gray-400 mb-1">Suggestions Channel ID</label>
+ <input
+ name="suggestionsChannelID"
+ type="text"
+ placeholder="Enter channel ID"
+ value={formData.suggestionsChannelID}
+ onChange={handleInputChange}
+ className="w-full bg-gray-700 rounded p-2"
+ />
+ </div>
+
+ <div className="mb-2">
+ <label className="block text-sm text-gray-400 mb-1">QOTD Channel ID</label>
+ <input
+ name="qotdChannelID"
+ type="text"
+ placeholder="Enter channel ID"
+ value={formData.qotdChannelID}
+ onChange={handleInputChange}
+ className="w-full bg-gray-700 rounded p-2"
+ />
+ </div>
+
+ <div className="flex items-center mb-2">
+ <input
+ id="qotdToggle"
+ name="qotdToggle"
+ type="checkbox"
+ checked={formData.qotdToggle}
+ onChange={handleInputChange}
+ className="mr-2"
+ />
+ <label htmlFor="qotdToggle">QOTD Toggle</label>
+ </div>
+
+ <div className="flex items-center mb-4">
+ <input
+ id="ollamaEnabled"
+ name="ollamaEnabled"
+ type="checkbox"
+ checked={formData.ollamaEnabled}
+ onChange={handleInputChange}
+ className="mr-2"
+ />
+ <label htmlFor="ollamaEnabled">Ollama Toggle</label>
+ </div>
+
+ {formMessage && (
+ <div className={`p-2 mb-4 rounded ${formMessage.type === 'success' ? 'bg-green-800 text-green-200' : 'bg-red-800 text-red-200'}`}>
+ {formMessage.text}
+ </div>
+ )}
+
+ <div className="flex justify-end gap-2">
+ <button
+ type="button"
+ onClick={closeModal}
+ className="bg-gray-600 hover:bg-gray-500 text-white py-2 px-4 rounded"
+ >
+ Cancel
+ </button>
+ <button
+ type="submit"
+ className="bg-blue-600 hover:bg-blue-500 text-white py-2 px-4 rounded"
+ >
+ Save
+ </button>
+ </div>
+ </form>
+ </div>
+ </div>
+ )}
+ </>
+ );
+}
generated by cgit v1.2.3 (git 2.46.0) at 2026-06-04 05:57:12 +0000