Program Commit
This commit is contained in:
184
frontend/src/components/Dashboard.js
Normal file
184
frontend/src/components/Dashboard.js
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user