Invite Management

frontend/src/components/modals/guild-settings/guild-settings-invites.tsx

@@ -0,0 +1,40 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router';
+import { getGuildInvites } from '../../../store/guilds';
+import { deleteInvite } from '../../../store/invites';
+import { openSaveChanges } from '../../../store/ui';
+import CircleButton from '../../utils/buttons/circle-button';
+
+const GuildSettingsInvites: React.FunctionComponent = () => {
+  const dispatch = useDispatch();
+  const { guildId }: any = useParams();
+  const invites = useSelector(getGuildInvites(guildId));
+  
+  const Invites = () => (<>
+    {invites.map(i => (
+      <div className="w-full">
+        <strong>{i.id}</strong>
+        <span className="float-right">
+          <CircleButton
+            onClick={() => dispatch(deleteInvite(i.id))}
+            style={{ color: 'var(--danger)' }}>x</CircleButton>
+        </span>
+      </div>
+    ))}
+    {!invites.length && <span>No invites created.</span>}
+  </>);
+  
+  return (
+    <form
+      onChange={() => dispatch(openSaveChanges(true))}
+      className="flex flex-col pt-14 px-10 pb-20 h-full mt-1">
+      <header>
+        <h1 className="text-xl font-bold inline">Invites</h1>
+      </header>
+    
+      <Invites />
+    </form>    
+  );
+}
+ 
+export default GuildSettingsInvites;

frontend/src/components/modals/guild-settings/guild-settings.tsx

@@ -7,12 +7,21 @@ import GuildSettingsRoles from './guild-settings-roles';
 import TabLink from '../../utils/tab-link';
 import EscButton from '../../utils/buttons/esc-button';
 import usePerms from '../../../hooks/use-perms';
+import GuildSettingsInvites from './guild-settings-invites';
+import { PermissionTypes } from '../../../services/perm-service';
 
 const GuildSettings: React.FunctionComponent = () => {
   const guild = useSelector((s: Store.AppState) => s.ui.activeGuild)!;
   const [tab, setTab] = useState('overview');
   const perms = usePerms();
 
+  type Tab = { perm: PermissionTypes.PermissionString, name: string, id: string };
+  const tabs: Tab[] = [
+    { perm: 'MANAGE_GUILD', name: 'Overview', id: 'overview' },
+    { perm: 'MANAGE_ROLES', name: 'Roles', id: 'roles' },
+    { perm: 'MANAGE_INVITES', name: 'Invites', id: 'invites' },
+  ];
+
   return (guild) ? (
     <Modal type={GuildSettings} size="full">
       <div className="grid grid-cols-12 h-full">
@@ -21,22 +30,19 @@ const GuildSettings: React.FunctionComponent = () => {
             <Category
               className="muted px-2.5 pb-1.5"
               title={guild.name} />
-            <TabLink
-              tab={tab}
-              setTab={setTab}
-              id="overview">Overview</TabLink>
-            {perms.can('MANAGE_GUILD', guild.id) && (
+            {tabs.map(t => perms.can(t.perm, guild.id) && (
               <TabLink
                 tab={tab}
                 setTab={setTab}
-                id="roles">Roles</TabLink>
-            )}
+                id={t.id}>{t.name}</TabLink>
+            ))}
           </nav>
         </div>
 
         <div className="col-span-6 h-full">
           {tab === 'overview' && <GuildSettingsOverview />}
           {tab === 'roles' && <GuildSettingsRoles />}
+          {tab === 'invites' && <GuildSettingsInvites />}
         </div>
 
         <div className="col-span-2 h-full">

frontend/src/components/user/username.tsx

@@ -24,7 +24,7 @@ const Username: React.FunctionComponent<UsernameProps> = ({ guild, user }) => {
         <span className="rounded-full absolute flex -right-0.5 -bottom-0.5">
           <span
             style={{ border: '2px solid var(--bg-secondary)' }}
-            className={`relative inline-flex rounded-full px-1 h-3.5 w-3.5 ${isOnline ? 'bg-success' : 'bg-gray-500'}`}></span>
+            className={`relative inline-flex rounded-full px-1 h-3.5 w-3.5 ${isOnline ? 'bg-success' : 'bg-gray-500'}`} />
         </span>
         <img
           className="select-none rounded-full w-8 h-8"

frontend/src/components/utils/buttons/esc-button.tsx

@@ -18,7 +18,7 @@ const EscButton = () => {
       className="rounded-full ring ring-gray-500 cursor-pointer border-white rounded-full px-2 w-16 mt-14"
       onClick={onClick}>
       <FontAwesomeIcon icon={faTimes} color="var(--muted)" />
-      <span className="pl-2 muted">ESC</span>
+      <span className="pl-0.5 muted">ESC</span>
     </div>
   );
 }

frontend/src/services/perm-service.ts

@@ -1,9 +1,10 @@
 import { getGuild, getGuildRoles } from '../store/guilds';
 import { getMember, getSelfMember } from '../store/members';
 
-// FIXME: import this namespace somehow
+// FIXME: import this namespace from types
 export namespace PermissionTypes {
   export enum General {
+    MANAGE_INVITES = 2048,
     VIEW_CHANNELS = 1024,
     // MANAGE_NICKNAMES = 512,
     // CHANGE_NICKNAME = 256,

frontend/src/store/invites.ts

@@ -27,6 +27,13 @@ export default slice.reducer;
 export const createInvite = (guildId: string) => (dispatch) => {
   dispatch(api.wsCallBegan({
     event: 'INVITE_CREATE',
-    data: { guildId },
+    data: { guildId } as WS.Params.InviteCreate,
+  }));
+}
+
+export const deleteInvite = (inviteCode: string) => (dispatch) => {
+  dispatch(api.wsCallBegan({
+    event: 'INVITE_DELETE',
+    data: { inviteCode } as WS.Params.InviteDelete,
   }));
 }

types/permission-types.ts

@@ -2,6 +2,7 @@
 
 export namespace PermissionTypes {
   export enum General {
+    MANAGE_INVITES = 2048,
     VIEW_CHANNELS = 1024,
     // MANAGE_NICKNAMES = 512,
     // CHANGE_NICKNAME = 256,