Skip to content

Commit

Permalink
Add voice activity toggle to manage server page
Browse files Browse the repository at this point in the history
  • Loading branch information
@chimpdev
chimpdev committed Apr 6, 2024
1 parent fe23735 commit 6eb5061
Showing 1 changed file with 47 additions and 22 deletions.
69 changes: 47 additions & 22 deletions client/app/(servers)/servers/[id]/manage/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,15 @@ import editServer from '@/lib/request/servers/editServer';
import { RiErrorWarningFill } from 'react-icons/ri';
import deleteServer from '@/lib/request/servers/deleteServer';
import { useRouter } from 'next-nprogress-bar';
import { FaCheck } from 'react-icons/fa';

export default function Content({ server }) {
const [currentServer] = useState(server);
const [newDescription, setNewDescription] = useState(server.description);
const [newInviteLink, setNewInviteLink] = useState(server.invite_code.type === 'Deleted' ? 'Invite link was deleted.' : (server.invite_code.type === 'Vanity' ? server.vanity_url : `https://discord.com/invite/${server.invite_code.code}`));
const [newCategory, setNewCategory] = useState(server.category);
const [newKeywords, setNewKeywords] = useState(server.keywords);
const [currentServer, setCurrentServer] = useState(server);
const [newDescription, setNewDescription] = useState(currentServer.description);
const [newInviteLink, setNewInviteLink] = useState(currentServer.invite_code.type === 'Deleted' ? 'Invite link was deleted.' : (currentServer.invite_code.type === 'Vanity' ? currentServer.vanity_url : `https://discord.com/invite/${currentServer.invite_code.code}`));
const [newCategory, setNewCategory] = useState(currentServer.category);
const [newKeywords, setNewKeywords] = useState(currentServer.keywords);
const [newVoiceActivityEnabled, setNewVoiceActivityEnabled] = useState(currentServer.voice_activity_enabled);

const [categoriesDrawerIsOpen, setCategoriesDrawerIsOpen] = useState(false);
const [keywordsInputValue, setKeywordsInputValue] = useState('');
Expand All @@ -30,25 +32,27 @@ export default function Content({ server }) {

useEffect(() => {
setAnyChangesMade(
newDescription !== server.description ||
newInviteLink !== (server.invite_code.type === 'Deleted' ? 'Invite link was deleted.' : (server.invite_code.type === 'Vanity' ? server.vanity_url : `https://discord.com/invite/${server.invite_code.code}`)) ||
newCategory !== server.category ||
newKeywords.join(' ') !== server.keywords.join(' ')
newDescription !== currentServer.description ||
newInviteLink !== (currentServer.invite_code.type === 'Deleted' ? 'Invite link was deleted.' : (currentServer.invite_code.type === 'Vanity' ? currentServer.vanity_url : `https://discord.com/invite/${currentServer.invite_code.code}`)) ||
newCategory !== currentServer.category ||
newKeywords.join(' ') !== currentServer.keywords.join(' ') ||
newVoiceActivityEnabled !== currentServer.voice_activity_enabled
);

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [newDescription, newInviteLink, newCategory, newKeywords]);
}, [newDescription, newInviteLink, newCategory, newKeywords, newVoiceActivityEnabled]);

async function save() {
if (!anyChangesMade) return toast.error('No changes were made.');

setLoading(true);

toast.promise(editServer(currentServer.id, { newDescription, newInviteLink, newCategory, newKeywords }), {
toast.promise(editServer(currentServer.id, { newDescription, newInviteLink, newCategory, newKeywords, newVoiceActivityEnabled }), {
loading: 'Saving changes..',
success: () => {
success: newServer => {
setLoading(false);
setAnyChangesMade(false);
setCurrentServer(oldServer => ({ ...oldServer, ...newServer }));

return 'Successfully saved changes!';
},
Expand Down Expand Up @@ -100,14 +104,14 @@ export default function Content({ server }) {
</h2>

<p className='text-sm sm:text-base text-tertiary'>
This is the description that will be shown to everyone who visits your server on discord.place.<br/>Make sure to include important information about your server.
This is the description that will be shown to everyone who visits your server on discord.place.<br/>Make sure to include important information about your currentServer.
</p>

<span contentEditable suppressContentEditableWarning className='block w-full h-[150px] p-2 mt-4 overflow-y-auto border-2 border-transparent rounded-lg outline-none bg-secondary text-placeholder focus-visible:text-primary focus-visible:border-purple-500 whitespace-pre-wrap' onKeyUp={event => {
if (event.target.textContent.length > config.serverDescriptionMaxCharacters) return toast.error(`Description can only contain ${config.serverDescriptionMaxCharacters} characters.`);
setNewDescription(event.target.innerText);
}}>
{server.description}
{currentServer.description}
</span>
</div>
</div>
Expand All @@ -117,7 +121,7 @@ export default function Content({ server }) {
</h2>

<p className='text-sm sm:text-base text-tertiary'>
Add an invite link to your server. This will be helpful for people who want to join your server.<br/>Make sure to set the invite link to never expire.
Add an invite link to your currentServer. This will be helpful for people who want to join your currentServer.<br/>Make sure to set the invite link to never expire.
</p>

<input
Expand All @@ -136,7 +140,7 @@ export default function Content({ server }) {
</h2>

<p className='text-sm text-tertiary'>
Select a base category for your server. This will help people find your server on discord.place.
Select a base category for your currentServer. This will help people find your server on discord.place.
</p>

<button className='flex items-center justify-center w-full h-[40px] mt-4 text-sm font-medium rounded-lg gap-x-2 bg-secondary hover:bg-tertiary text-primary' onClick={() => setCategoriesDrawerIsOpen(true)}>
Expand All @@ -153,7 +157,7 @@ export default function Content({ server }) {
</h2>

<p className='text-sm text-tertiary'>
Add keywords to your server. This will help people find your server on discord.place.
Add keywords to your currentServer. This will help people find your server on discord.place.
</p>

<div className='relative'>
Expand Down Expand Up @@ -202,6 +206,26 @@ export default function Content({ server }) {
</>
)}

<h2 className='mt-8 text-lg font-semibold'>
Voice Activity
</h2>

<p className='text-sm sm:text-base text-tertiary'>
Check this box if you want to enable voice activity tracking for your currentServer. This will help people see how voice active your server is.
</p>

<div
className='flex items-center mt-4 cursor-pointer gap-x-2 group'
onClick={() => setNewVoiceActivityEnabled(!newVoiceActivityEnabled)}
>
<button className='p-1 bg-quaternary rounded-md group-hover:bg-white group-hover:text-black min-w-[18px] min-h-[18px]'>
{newVoiceActivityEnabled ? <FaCheck size={10} /> : null}
</button>
<span className='text-sm font-medium select-none text-tertiary'>
Enable Tracking
</span>
</div>

<h2 className='mt-8 text-lg font-semibold'>
Are you ready?
</h2>
Expand All @@ -228,18 +252,19 @@ export default function Content({ server }) {
</button>
<button className='flex items-center justify-center w-full py-2 text-sm font-medium rounded-lg hover:bg-secondary disabled:pointer-events-none disabled:opacity-70'
onClick={() => {
setNewDescription(server.description);
setNewInviteLink(server.invite_code.type === 'Deleted' ? 'Invite link was deleted.' : (server.invite_code.type === 'Vanity' ? server.vanity_url : `https://discord.com/invite/${server.invite_code.code}`));
setNewCategory(server.category);
setNewKeywords(server.keywords);
setNewDescription(currentServer.description);
setNewInviteLink(currentServer.invite_code.type === 'Deleted' ? 'Invite link was deleted.' : (currentServer.invite_code.type === 'Vanity' ? currentServer.vanity_url : `https://discord.com/invite/${currentServer.invite_code.code}`));
setNewCategory(currentServer.category);
setNewKeywords(currentServer.keywords);
setNewVoiceActivityEnabled(currentServer.voice_activity_enabled);
}}
disabled={!anyChangesMade || loading}
>
Cancel
</button>
</div>

{server.permissions.canDelete && (
{currentServer.permissions.canDelete && (
<div className='flex flex-col p-4 mt-8 border border-red-500 gap-y-2 bg-red-500/10 rounded-xl'>
<h1 className='text-lg text-primary flex items-center font-semibold gap-x-1.5'>
<RiErrorWarningFill />
Expand Down

0 comments on commit 6eb5061

Please sign in to comment.