ui changes

frontend/src/components/ServerSettings.js

@@ -1,9 +1,11 @@
 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 { Button, Typography, Box, IconButton, Switch, Select, MenuItem, FormControl, FormControlLabel, Radio, RadioGroup, TextField, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import UserSettings from './UserSettings';
+import ConfirmDialog from './ConfirmDialog';
 
 const ServerSettings = () => {
   const { guildId } = useParams();
@@ -13,6 +15,25 @@ const ServerSettings = () => {
   const [isBotInServer, setIsBotInServer] = useState(false);
   const [clientId, setClientId] = useState(null);
   const [server, setServer] = useState(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [channels, setChannels] = useState([]);
+  const [welcomeLeaveSettings, setWelcomeLeaveSettings] = useState({
+    welcome: {
+      enabled: false,
+      channel: '',
+      message: 'Welcome to the server, {user}!',
+      customMessage: '',
+    },
+    leave: {
+      enabled: false,
+      channel: '',
+      message: '{user} has left the server.',
+      customMessage: '',
+    },
+  });
+
+  const defaultWelcomeMessages = ["Welcome to the server, {user}!", "Hey {user}, welcome!", "{user} has joined the party!"];
+  const defaultLeaveMessages = ["{user} has left the server.", "Goodbye, {user}.", "We'll miss you, {user}."];
 
   useEffect(() => {
     if (location.state && location.state.guild) {
@@ -43,9 +64,78 @@ const ServerSettings = () => {
       .then(response => {
         setClientId(response.data.clientId);
       });
+    
+    // Fetch channels
+    axios.get(`http://localhost:3002/api/servers/${guildId}/channels`)
+      .then(response => {
+        setChannels(response.data);
+      });
+
+    // Fetch welcome/leave settings
+    axios.get(`http://localhost:3002/api/servers/${guildId}/welcome-leave-settings`)
+      .then(response => {
+        if (response.data) {
+          setWelcomeLeaveSettings(response.data);
+        }
+      });
 
   }, [guildId, location.state]);
 
+  const handleSettingUpdate = (newSettings) => {
+    axios.post(`http://localhost:3002/api/servers/${guildId}/welcome-leave-settings`, newSettings)
+      .then(response => {
+        if (response.data.success) {
+          setWelcomeLeaveSettings(newSettings);
+        }
+      });
+  }
+
+  const handleToggleChange = (type) => (event) => {
+    const newSettings = { ...welcomeLeaveSettings };
+    newSettings[type].enabled = event.target.checked;
+    handleSettingUpdate(newSettings);
+  };
+
+  const handleChannelChange = (type) => (event) => {
+    const newSettings = { ...welcomeLeaveSettings };
+    newSettings[type].channel = event.target.value;
+    handleSettingUpdate(newSettings);
+  };
+
+  const handleMessageOptionChange = (type) => (event) => {
+    const newSettings = { ...welcomeLeaveSettings };
+    if (event.target.value !== 'custom') {
+      newSettings[type].message = event.target.value;
+      handleSettingUpdate(newSettings);
+    } else {
+        const tempSettings = { ...welcomeLeaveSettings };
+        // Set message to custom message to get the radio button to select custom
+        tempSettings[type].message = tempSettings[type].customMessage;
+        setWelcomeLeaveSettings(tempSettings);
+    }
+  };
+
+  const handleCustomMessageChange = (type) => (event) => {
+    const newSettings = { ...welcomeLeaveSettings };
+    newSettings[type].customMessage = event.target.value;
+    setWelcomeLeaveSettings(newSettings);
+  };
+
+  const handleApplyCustomMessage = (type) => () => {
+    const newSettings = { ...welcomeLeaveSettings };
+    newSettings[type].message = newSettings[type].customMessage;
+    handleSettingUpdate(newSettings);
+  };
+
+  const getMessageValue = (type) => {
+    const currentMessage = welcomeLeaveSettings[type].message;
+    const defaultMessages = type === 'welcome' ? defaultWelcomeMessages : defaultLeaveMessages;
+    if (defaultMessages.includes(currentMessage)) {
+      return currentMessage;
+    }
+    return 'custom';
+  }
+
   const togglePingCommand = () => {
     const newSettings = { ...settings, pingCommand: !settings.pingCommand };
     axios.post(`http://localhost:3002/api/servers/${guildId}/settings`, newSettings)
@@ -63,6 +153,20 @@ const ServerSettings = () => {
     window.open(url, '_blank');
   };
 
+  const handleLeaveBot = () => {
+    setDialogOpen(true);
+  };
+
+  const handleConfirmLeave = async () => {
+    try {
+      await axios.post(`http://localhost:3002/api/servers/${guildId}/leave`);
+      setIsBotInServer(false);
+    } catch (error) {
+      console.error('Error leaving server:', error);
+    }
+    setDialogOpen(false);
+  };
+
   const handleBack = () => {
     navigate('/dashboard');
   }
@@ -78,7 +182,9 @@ const ServerSettings = () => {
             {server ? `Server Settings for ${server.name}` : 'Loading...'}
           </Typography>
           {isBotInServer ? (
-            <Typography>The bot is already in this server.</Typography>
+            <Button variant="contained" size="small" color="error" onClick={handleLeaveBot}>
+              Leave Server
+            </Button>
           ) : (
             <Button variant="contained" size="small" onClick={handleInviteBot} disabled={!clientId}>
               Invite Bot
@@ -87,23 +193,125 @@ const ServerSettings = () => {
         </Box>
         <UserSettings />
       </Box>
-      <Card sx={{ borderRadius: '20px', boxShadow: '0 8px 16px 0 rgba(0,0,0,0.2)', marginTop: '20px' }}>
-        <CardContent>
+      <Accordion sx={{ marginTop: '20px', opacity: isBotInServer ? 1 : 0.5 }}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
           <Typography variant="h6">Commands</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          {!isBotInServer && <Typography>Invite the bot to enable commands.</Typography>}
           <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '10px' }}>
             <Typography>Ping Command</Typography>
-            <Button variant="contained" onClick={togglePingCommand}>
+            <Button variant="contained" onClick={togglePingCommand} disabled={!isBotInServer}>
               {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>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion sx={{ marginTop: '20px', opacity: isBotInServer ? 1 : 0.5 }}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography variant="h6">Welcome/Leave</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          {!isBotInServer && <Typography>Invite the bot to enable this feature.</Typography>}
+          <Box sx={{ marginTop: '10px' }}>
+            <Typography variant="subtitle1">Welcome Messages</Typography>
+            <FormControlLabel
+              control={<Switch checked={welcomeLeaveSettings.welcome.enabled} onChange={handleToggleChange('welcome')} disabled={!isBotInServer} />}
+              label="Enable Welcome Messages"
+            />
+            <FormControl fullWidth sx={{ marginTop: '10px' }} disabled={!isBotInServer || !welcomeLeaveSettings.welcome.enabled}>
+              <Select
+                value={welcomeLeaveSettings.welcome.channel}
+                onChange={handleChannelChange('welcome')}
+                displayEmpty
+              >
+                <MenuItem value="" disabled>Select a channel</MenuItem>
+                {channels.map(channel => (
+                  <MenuItem key={channel.id} value={channel.id}>{channel.name}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            <FormControl component="fieldset" sx={{ marginTop: '10px' }} disabled={!isBotInServer || !welcomeLeaveSettings.welcome.enabled}>
+              <RadioGroup
+                value={getMessageValue('welcome')}
+                onChange={handleMessageOptionChange('welcome')}
+              >
+                {defaultWelcomeMessages.map(msg => (
+                  <FormControlLabel key={msg} value={msg} control={<Radio />} label={msg} />
+                ))}
+                <FormControlLabel value="custom" control={<Radio />} label="Custom" />
+              </RadioGroup>
+            </FormControl>
+            <Box sx={{ display: 'flex', alignItems: 'center', marginTop: '10px' }} >
+              <TextField
+                fullWidth
+                variant="outlined"
+                placeholder="Your custom message"
+                value={welcomeLeaveSettings.welcome.customMessage}
+                onChange={handleCustomMessageChange('welcome')}
+                disabled={!isBotInServer || !welcomeLeaveSettings.welcome.enabled || getMessageValue('welcome') !== 'custom'}
+              />
+              <Button onClick={handleApplyCustomMessage('welcome')} disabled={!isBotInServer || !welcomeLeaveSettings.welcome.enabled || getMessageValue('welcome') !== 'custom'}>Apply</Button>
+            </Box>
+          </Box>
+          <Box sx={{ marginTop: '20px' }}>
+            <Typography variant="subtitle1">Leave Messages</Typography>
+            <FormControlLabel
+              control={<Switch checked={welcomeLeaveSettings.leave.enabled} onChange={handleToggleChange('leave')} disabled={!isBotInServer} />}
+              label="Enable Leave Messages"
+            />
+            <FormControl fullWidth sx={{ marginTop: '10px' }} disabled={!isBotInServer || !welcomeLeaveSettings.leave.enabled}>
+              <Select
+                value={welcomeLeaveSettings.leave.channel}
+                onChange={handleChannelChange('leave')}
+                displayEmpty
+              >
+                <MenuItem value="" disabled>Select a channel</MenuItem>
+                {channels.map(channel => (
+                  <MenuItem key={channel.id} value={channel.id}>{channel.name}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            <FormControl component="fieldset" sx={{ marginTop: '10px' }} disabled={!isBotInServer || !welcomeLeaveSettings.leave.enabled}>
+              <RadioGroup
+                value={getMessageValue('leave')}
+                onChange={handleMessageOptionChange('leave')}
+              >
+                {defaultLeaveMessages.map(msg => (
+                  <FormControlLabel key={msg} value={msg} control={<Radio />} label={msg} />
+                ))}
+                <FormControlLabel value="custom" control={<Radio />} label="Custom" />
+              </RadioGroup>
+            </FormControl>
+            <Box sx={{ display: 'flex', alignItems: 'center', marginTop: '10px' }} >
+              <TextField
+                fullWidth
+                variant="outlined"
+                placeholder="Your custom message"
+                value={welcomeLeaveSettings.leave.customMessage}
+                onChange={handleCustomMessageChange('leave')}
+                disabled={!isBotInServer || !welcomeLeaveSettings.leave.enabled || getMessageValue('leave') !== 'custom'}
+              />
+              <Button onClick={handleApplyCustomMessage('leave')} disabled={!isBotInServer || !welcomeLeaveSettings.leave.enabled || getMessageValue('leave') !== 'custom'}>Apply</Button>
+            </Box>
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion sx={{ marginTop: '20px', opacity: isBotInServer ? 1 : 0.5 }}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
           <Typography variant="h6">Admin Commands</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
           <Typography>Coming soon...</Typography>
-        </CardContent>
-      </Card>
+        </AccordionDetails>
+      </Accordion>
+      <ConfirmDialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        onConfirm={handleConfirmLeave}
+        title="Confirm Leave"
+        message={`Are you sure you want the bot to leave ${server?.name}?`}
+      />
     </div>
   );
 };