Program Commit

2025-10-02 17:31:49 -04:00
parent fd73be0efd
commit 1341b325ee
39 changed files with 21396 additions and 0 deletions
--- a/frontend/src/components/Dashboard.js
+++ b/frontend/src/components/Dashboard.js
@@ -0,0 +1,184 @@
+import React, { useState, useEffect, useLayoutEffect, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Grid, Card, CardContent, Typography, Box, CardMedia, IconButton, Snackbar, Alert } from '@mui/material';
+import { UserContext } from '../contexts/UserContext';
+import UserSettings from './UserSettings';
+import PersonAddIcon from '@mui/icons-material/PersonAdd';
+import axios from 'axios';
+
+const Dashboard = () => {
+  const { user, setUser } = useContext(UserContext);
+  const [guilds, setGuilds] = useState([]);
+  const [botStatus, setBotStatus] = useState({});
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState('');
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const userParam = urlParams.get('user');
+    const guildsParam = urlParams.get('guilds');
+
+    if (userParam && guildsParam) {
+      const parsedUser = JSON.parse(decodeURIComponent(userParam));
+      const parsedGuilds = JSON.parse(decodeURIComponent(guildsParam));
+      localStorage.setItem('user', JSON.stringify(parsedUser));
+      localStorage.setItem('guilds', JSON.stringify(parsedGuilds));
+      setUser(parsedUser);
+      setGuilds(parsedGuilds);
+      // Clean the URL
+      window.history.replaceState({}, document.title, "/dashboard");
+    } else {
+      const storedUser = localStorage.getItem('user');
+      const storedGuilds = localStorage.getItem('guilds');
+      if (storedUser && storedGuilds) {
+        setUser(JSON.parse(storedUser));
+        setGuilds(JSON.parse(storedGuilds));
+      }
+    }
+  }, [setUser]);
+
+  useEffect(() => {
+    const fetchBotStatus = async () => {
+      const statusPromises = guilds.map(async (guild) => {
+        try {
+          const response = await axios.get(`http://localhost:3002/api/servers/${guild.id}/bot-status`);
+          return { guildId: guild.id, isBotInServer: response.data.isBotInServer };
+        } catch (error) {
+          console.error(`Error fetching bot status for guild ${guild.id}:`, error);
+          return { guildId: guild.id, isBotInServer: false };
+        }
+      });
+      const results = await Promise.all(statusPromises);
+      const newBotStatus = results.reduce((acc, curr) => {
+        acc[curr.guildId] = curr.isBotInServer;
+        return acc;
+      }, {});
+      setBotStatus(newBotStatus);
+    };
+
+    if (guilds.length > 0) {
+      fetchBotStatus();
+    }
+  }, [guilds]);
+
+  useLayoutEffect(() => {
+    const scrollPosition = sessionStorage.getItem('scrollPosition');
+    if (scrollPosition) {
+      window.scrollTo(0, parseInt(scrollPosition));
+      sessionStorage.removeItem('scrollPosition');
+    }
+  }, []);
+
+  const handleCardClick = (guild) => {
+    sessionStorage.setItem('scrollPosition', window.scrollY);
+    navigate(`/server/${guild.id}`, { state: { guild } });
+  };
+
+  const handleInviteBot = async (e, guild) => {
+    e.stopPropagation();
+    if (botStatus[guild.id]) {
+      setSnackbarMessage('Bot already added to this server.');
+      setSnackbarOpen(true);
+      return;
+    }
+
+    const clientId = '1423377662055026840'; // Hardcoded client ID from user request
+    const permissions = 8; // Administrator
+    const inviteUrl = `https://discord.com/api/oauth2/authorize?client_id=${clientId}&permissions=${permissions}&scope=bot%20applications.commands&guild_id=${guild.id}&disable_guild_select=true`;
+    window.open(inviteUrl, '_blank', 'noopener,noreferrer');
+  };
+
+  const handleSnackbarClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setSnackbarOpen(false);
+  };
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <UserSettings />
+      </Box>
+      <Typography variant="h4" gutterBottom>
+        Dashboard
+      </Typography>
+      {user && (
+        <Typography variant="h5" gutterBottom>
+          Welcome, {user.username}
+        </Typography>
+      )}
+      <Typography variant="h6" gutterBottom>
+        Your Admin Servers:
+      </Typography>
+      <Grid container spacing={3}>
+        {guilds.map(guild => (
+          <Grid item xs={12} sm={6} md={4} lg={3} key={guild.id}>
+            <Card 
+              onClick={() => handleCardClick(guild)} 
+              sx={{
+                cursor: 'pointer',
+                borderRadius: '20px',
+                boxShadow: '0 8px 16px 0 rgba(0,0,0,0.2)',
+                transition: 'transform 0.3s',
+                height: '250px',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                '&:hover': {
+                  transform: 'scale(1.05)'
+                }
+              }}
+            >
+              <CardMedia
+                component="img"
+                sx={{ height: '60%', objectFit: 'cover' }}
+                image={guild.icon ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png` : 'https://cdn.discordapp.com/embed/avatars/0.png'}
+                alt={guild.name}
+              />
+              <CardContent>
+                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1, flexDirection: { xs: 'column', sm: 'row' } }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, width: '100%', justifyContent: { xs: 'center', sm: 'flex-start' } }}>
+                    <Box
+                      title={guild.name}
+                      sx={{
+                        px: 2,
+                        py: 0.5,
+                        borderRadius: '999px',
+                        fontWeight: 'bold',
+                        bgcolor: 'rgba(0,0,0,0.06)',
+                        maxWidth: '100%',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        textAlign: { xs: 'center', sm: 'left' }
+                      }}
+                    >
+                      {guild.name}
+                    </Box>
+                  </Box>
+                  <IconButton
+                    aria-label={`Invite bot to ${guild.name}`}
+                    size="small"
+                    onClick={(e) => handleInviteBot(e, guild)}
+                    disabled={botStatus[guild.id]}
+                  >
+                    <PersonAddIcon />
+                  </IconButton>
+                </Box>
+              </CardContent>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+      <Snackbar open={snackbarOpen} autoHideDuration={6000} onClose={handleSnackbarClose}>
+        <Alert onClose={handleSnackbarClose} severity="info" sx={{ width: '100%' }}>
+          {snackbarMessage}
+        </Alert>
+      </Snackbar>
+    </div>
+  );
+};
+
+export default Dashboard;
--- a/frontend/src/components/Login.js
+++ b/frontend/src/components/Login.js
@@ -0,0 +1,26 @@
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const Login = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const storedUser = localStorage.getItem('user');
+    if (storedUser) {
+      navigate('/dashboard');
+    }
+  }, [navigate]);
+
+  const handleLogin = () => {
+    window.location.href = 'http://localhost:3002/auth/discord';
+  };
+
+  return (
+    <div>
+      <h2>Login</h2>
+      <button onClick={handleLogin}>Login with Discord</button>
+    </div>
+  );
+};
+
+export default Login;
--- a/frontend/src/components/ServerSettings.js
+++ b/frontend/src/components/ServerSettings.js
@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import axios from 'axios';
+import { Button, Typography, Card, CardContent, Box, IconButton } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import UserSettings from './UserSettings';
+
+const ServerSettings = () => {
+  const { guildId } = useParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [settings, setSettings] = useState({ pingCommand: false });
+  const [isBotInServer, setIsBotInServer] = useState(false);
+  const [clientId, setClientId] = useState(null);
+  const [server, setServer] = useState(null);
+
+  useEffect(() => {
+    if (location.state && location.state.guild) {
+      setServer(location.state.guild);
+    } else {
+      // Fallback if guild data is not passed in state
+      const storedGuilds = localStorage.getItem('guilds');
+      if (storedGuilds) {
+        const guild = JSON.parse(storedGuilds).find(g => g.id === guildId);
+        setServer(guild);
+      }
+    }
+
+    // Fetch settings
+    axios.get(`http://localhost:3002/api/servers/${guildId}/settings`)
+      .then(response => {
+        setSettings(response.data);
+      });
+
+    // Check if bot is in server
+    axios.get(`http://localhost:3002/api/servers/${guildId}/bot-status`)
+      .then(response => {
+        setIsBotInServer(response.data.isBotInServer);
+      });
+
+    // Fetch client ID
+    axios.get('http://localhost:3002/api/client-id')
+      .then(response => {
+        setClientId(response.data.clientId);
+      });
+
+  }, [guildId, location.state]);
+
+  const togglePingCommand = () => {
+    const newSettings = { ...settings, pingCommand: !settings.pingCommand };
+    axios.post(`http://localhost:3002/api/servers/${guildId}/settings`, newSettings)
+      .then(response => {
+        if (response.data.success) {
+          setSettings(newSettings);
+        }
+      });
+  };
+
+  const handleInviteBot = () => {
+    if (!clientId) return;
+    const permissions = 8; // Administrator
+    const url = `https://discord.com/api/oauth2/authorize?client_id=${clientId}&permissions=${permissions}&scope=bot%20applications.commands&guild_id=${guildId}&disable_guild_select=true`;
+    window.open(url, '_blank');
+  };
+
+  const handleBack = () => {
+    navigate('/dashboard');
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <IconButton onClick={handleBack} sx={{ borderRadius: '50%', boxShadow: '0 8px 16px 0 rgba(0,0,0,0.2)' }}>
+          <ArrowBackIcon />
+        </IconButton>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+          <Typography variant="h4" component="h1" sx={{ margin: 0 }}>
+            {server ? `Server Settings for ${server.name}` : 'Loading...'}
+          </Typography>
+          {isBotInServer ? (
+            <Typography>The bot is already in this server.</Typography>
+          ) : (
+            <Button variant="contained" size="small" onClick={handleInviteBot} disabled={!clientId}>
+              Invite Bot
+            </Button>
+          )}
+        </Box>
+        <UserSettings />
+      </Box>
+      <Card sx={{ borderRadius: '20px', boxShadow: '0 8px 16px 0 rgba(0,0,0,0.2)', marginTop: '20px' }}>
+        <CardContent>
+          <Typography variant="h6">Commands</Typography>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '10px' }}>
+            <Typography>Ping Command</Typography>
+            <Button variant="contained" onClick={togglePingCommand}>
+              {settings.pingCommand ? 'Disable' : 'Enable'}
+            </Button>
+          </Box>
+        </CardContent>
+      </Card>
+      <Card sx={{ borderRadius: '20px', boxShadow: '0 8px 16px 0 rgba(0,0,0,0.2)', marginTop: '20px' }}>
+        <CardContent>
+          <Typography variant="h6">Admin Commands</Typography>
+          <Typography>Coming soon...</Typography>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default ServerSettings;
--- a/frontend/src/components/UserSettings.js
+++ b/frontend/src/components/UserSettings.js
@@ -0,0 +1,92 @@
+import React, { useState, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Avatar, Menu, MenuItem, Button, Typography } from '@mui/material';
+import { UserContext } from '../contexts/UserContext';
+import { ThemeContext } from '../contexts/ThemeContext';
+
+const UserSettings = () => {
+  const { user, setUser } = useContext(UserContext);
+  const { themeName, changeTheme } = useContext(ThemeContext);
+  const navigate = useNavigate();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [themeMenuAnchorEl, setThemeMenuAnchorEl] = useState(null);
+
+  const handleMenu = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleThemeMenu = (event) => {
+    setThemeMenuAnchorEl(event.currentTarget);
+  };
+
+  const handleThemeMenuClose = () => {
+    setThemeMenuAnchorEl(null);
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('user');
+    localStorage.removeItem('guilds');
+    setUser(null);
+    navigate('/');
+  };
+
+  const handleThemeChange = (name) => {
+    changeTheme(name);
+    handleThemeMenuClose();
+  };
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <div>
+      <Button onClick={handleMenu}>
+        <Avatar sx={{ width: 48, height: 48 }} src={`https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`} />
+      </Button>
+      <Menu
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        keepMounted
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <MenuItem disabled>
+          <Typography>{user.username}</Typography>
+        </MenuItem>
+        <MenuItem onClick={handleThemeMenu}>Themes</MenuItem>
+        <MenuItem onClick={handleLogout}>Logout</MenuItem>
+      </Menu>
+      <Menu
+        anchorEl={themeMenuAnchorEl}
+        open={Boolean(themeMenuAnchorEl)}
+        onClose={handleThemeMenuClose}
+        anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+        }}
+        transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+        }}
+      >
+        <MenuItem onClick={() => handleThemeChange('light')} disabled={themeName === 'light'}>Light</MenuItem>
+        <MenuItem onClick={() => handleThemeChange('dark')} disabled={themeName === 'dark'}>Dark</MenuItem>
+        <MenuItem onClick={() => handleThemeChange('discord')} disabled={themeName === 'discord'}>Discord</MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
+export default UserSettings;