ui changes

frontend/src/components/Dashboard.js

@@ -4,14 +4,19 @@ import { Grid, Card, CardContent, Typography, Box, CardMedia, IconButton, Snackb
 import { UserContext } from '../contexts/UserContext';
 import UserSettings from './UserSettings';
 import PersonAddIcon from '@mui/icons-material/PersonAdd';
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import axios from 'axios';
 
+import ConfirmDialog from './ConfirmDialog';
+
 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 [dialogOpen, setDialogOpen] = useState(false);
+  const [selectedGuild, setSelectedGuild] = useState(null);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -77,18 +82,34 @@ const Dashboard = () => {
 
   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 handleLeaveBot = (e, guild) => {
+    e.stopPropagation();
+    setSelectedGuild(guild);
+    setDialogOpen(true);
+  };
+
+  const handleConfirmLeave = async () => {
+    if (!selectedGuild) return;
+    try {
+      await axios.post(`http://localhost:3002/api/servers/${selectedGuild.id}/leave`);
+      setBotStatus(prevStatus => ({ ...prevStatus, [selectedGuild.id]: false }));
+      setSnackbarMessage('Bot has left the server.');
+      setSnackbarOpen(true);
+    } catch (error) {
+      console.error('Error leaving server:', error);
+      setSnackbarMessage('Failed to make the bot leave the server.');
+      setSnackbarOpen(true);
+    }
+    setDialogOpen(false);
+    setSelectedGuild(null);
+  };
+
   const handleSnackbarClose = (event, reason) => {
     if (reason === 'clickaway') {
       return;
@@ -158,14 +179,23 @@ const Dashboard = () => {
                       {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>
+                  {botStatus[guild.id] ? (
+                    <IconButton
+                      aria-label={`Make bot leave ${guild.name}`}
+                      size="small"
+                      onClick={(e) => handleLeaveBot(e, guild)}
+                    >
+                      <RemoveCircleOutlineIcon />
+                    </IconButton>
+                  ) : (
+                    <IconButton
+                      aria-label={`Invite bot to ${guild.name}`}
+                      size="small"
+                      onClick={(e) => handleInviteBot(e, guild)}
+                    >
+                      <PersonAddIcon />
+                    </IconButton>
+                  )}
                 </Box>
               </CardContent>
             </Card>
@@ -177,6 +207,13 @@ const Dashboard = () => {
           {snackbarMessage}
         </Alert>
       </Snackbar>
+      <ConfirmDialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        onConfirm={handleConfirmLeave}
+        title="Confirm Leave"
+        message={`Are you sure you want the bot to leave ${selectedGuild?.name}?`}
+      />
     </div>
   );
 };