Merge pull request #61 from FrostCord/FROS-Role-Assignment

Role Assignment and Other Optimizations

Author: multimokia

components/forms/MiniProfile.tsx

@@ -1,66 +1,175 @@
 import { useSideBarOptionSetter } from '@/context/SideBarOptionCtx';
 import { getOrCreateDMChannel } from '@/lib/DMChannelHelper';
-import { useDMChannels, useSetChannel } from '@/lib/store';
+import {
+  useChannel,
+  useDMChannels,
+  useGetAllServerUserProfiles,
+  useServerRoles,
+  useServerUserProfileHighestRolePosition,
+  useServerUserProfilePermissions,
+  useSetChannel
+} from '@/lib/store';
 import { createMessage } from '@/services/message.service';
-import { Role, ServerUser, User } from '@/types/dbtypes';
+import { ServerUserProfile } from '@/types/dbtypes';
 import { useSupabaseClient, useUser } from '@supabase/auth-helpers-react';
-import { memo, } from 'react';
 import UserIcon from '../icons/UserIcon';
 import { SearchBar } from './Styles';
+import { ServerPermissions } from '@/types/permissions';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { grantRoleToUser, revokeRoleFromUser } from '@/services/roles.service';
+import { toast } from 'react-toastify';
+import { XIcon } from '@/components/icons/XIcon';
 
-// TODO: Once DMs are implemented, this component will need to be updated to handle DMs as well.
-function WrappedComponent({
-  profile,
-  server_user,
-  roles,
-}: {
-  profile: User;
-  server_user: ServerUser;
-  roles: Role[];
-}) {
+
+export function MiniProfile({ server_user_profile }: { server_user_profile: ServerUserProfile }) {
   const user = useUser();
   const supabase = useSupabaseClient();
   const dmChannels = useDMChannels();
   const setChannel = useSetChannel();
   const setSideBarOption = useSideBarOptionSetter();
+  const channel = useChannel();
+
+  const serverRoles = useServerRoles(channel!.server_id!);
+  const userHighestRole = useServerUserProfileHighestRolePosition(
+    server_user_profile.server_user.server_id,
+    user!.id
+  );
+  const currentUserPerms = useServerUserProfilePermissions(
+    server_user_profile.server_user.server_id,
+    user!.id
+  );
+
+  const getAllServerProfiles = useGetAllServerUserProfiles();
+
+  const filteredRoles = serverRoles
+    .filter(
+      role => (
+        role.position > userHighestRole
+        && role.position !== serverRoles.length - 1
+        && !server_user_profile.roles.some(r => r.id === role.id)
+      )
+    );
 
   return (
     <div className="flex flex-col space-y-2 items-center p-3">
-      <UserIcon user={profile} className="!w-9 !h-9" />
-      {server_user.nickname && (
-        <h2 className="text-lg">{server_user.nickname}</h2>
+      <UserIcon user={server_user_profile} className="!w-9 !h-9" />
+      {server_user_profile.server_user.nickname && (
+        <h2 className="text-lg">{server_user_profile.server_user.nickname}</h2>
       )}
-      <h2 className={server_user.nickname ? 'text-base' : 'text-lg'}>
-        {profile.username}
+      <h2 className={server_user_profile.server_user.nickname ? 'text-base' : 'text-lg'}>
+        {server_user_profile.username}
       </h2>
       <hr />
       <h2 className="text-sm text-gray-400 text-left w-full">Roles</h2>
+
       <div className="flex flex-col w-full items-center space-y-1">
-        {roles.map((role) => (
+        {server_user_profile.roles.map((role) => (
           <span
             key={role.id}
-            className="text-sm text-gray-400 py-1 px-2 border-2 border-solid w-full rounded-sm"
+            className="text-sm text-gray-400 py-1 px-2 border-2 border-solid w-full rounded-sm flex flex-row items-center"
             style={{
               border: `1px solid #${!!role.color ? role.color : 'cacacacc'}`,
               color: `#${!!role.color ? role.color : 'cacacacc'}`,
             }}
           >
-            {role.name}
+            <p className="flex-grow">{role.name}</p>
+            {(
+              (currentUserPerms & ServerPermissions.MANAGE_ROLES) === ServerPermissions.MANAGE_ROLES
+              && role.position > userHighestRole
+              && role.position !== serverRoles.length - 1
+            ) && (
+              <button
+                type="button"
+                className="align-middle self-end"
+                style={{
+                  fill: `#${!!role.color ? role.color : 'cacacacc'}`,
+                }}
+                onClick={async () => {
+                  const { error } = await revokeRoleFromUser(
+                    supabase,
+                    role.id,
+                    server_user_profile.server_user.id,
+                  );
+
+                  if (error) {
+                    console.error(error);
+                    toast.error('Failed to revoke role from user');
+                    return;
+                  }
+
+                  toast.success('Role revoked from user');
+                }}
+              >
+                <XIcon className="w-4 h-4" />
+              </button>
+            )}
           </span>
         ))}
+
+        {(
+          (currentUserPerms & ServerPermissions.MANAGE_ROLES) === ServerPermissions.MANAGE_ROLES
+          && filteredRoles.length > 0
+        ) && (
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger
+              asChild
+            >
+              <button
+                type="button"
+                className="text-sm text-gray-400 py-1 px-2 border-2 border-solid w-full rounded-sm text-center"
+                style={{
+                  border: '1px solid #cacacacc'
+                }}
+              >
+                +
+              </button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              side="right"
+              className="ContextMenuContent"
+            >
+              {filteredRoles.map((role) => (
+                <DropdownMenu.Item
+                  key={role.id}
+                  className="ContextMenuItem"
+                  style={{
+                    color: `#${!!role.color ? role.color : 'cacacacc'}`,
+                  }}
+                  onSelect={async () => {
+                    const { error } = await grantRoleToUser(
+                      supabase,
+                      role.id,
+                      server_user_profile.server_user.id,
+                    );
+
+                    if (error) {
+                      console.error(error);
+                      toast.error('Failed to grant role to user');
+                      return;
+                    }
+
+                    toast.success('Role granted to user');
+                  }}
+                >
+                  {role.name}
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        )}
       </div>
       <hr />
-      {profile.id !== user?.id && (<form>
+      {server_user_profile.id !== user?.id && (<form>
         <input
           type="text"
           className={`${SearchBar('bg-grey-900')}`}
-          placeholder={`Message ${profile.username}`}
+          placeholder={`Message ${server_user_profile.username}`}
           onKeyDown={async (e) => {
             if (e.key === 'Enter') {
               e.preventDefault();
               const dmChannel = await getOrCreateDMChannel(
                 supabase,
-                profile,
+                server_user_profile,
                 dmChannels
               );
 
@@ -74,6 +183,7 @@ function WrappedComponent({
                   }
                 );
 
+                getAllServerProfiles(supabase, dmChannel.server_id);
                 setSideBarOption('friends');
                 setChannel(dmChannel);
               }
@@ -84,5 +194,3 @@ function WrappedComponent({
     </div>
   );
 }
-
-export const MiniProfile = memo(WrappedComponent);

components/forms/RoleEditForm.tsx

@@ -1,8 +1,8 @@
-import { useUserHighestRolePosition, useUserServerPerms } from '@/lib/store';
+import { useServerUserProfilePermissions } from '@/lib/store';
 import { decrementRolePosition, deleteRole, incrementRolePosition, updateRole } from '@/services/roles.service';
 import { Role } from '@/types/dbtypes';
 import { ServerPermissions } from '@/types/permissions';
-import { useSupabaseClient } from '@supabase/auth-helpers-react';
+import { useSupabaseClient, useUser } from '@supabase/auth-helpers-react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'react-toastify';
 
@@ -28,10 +28,9 @@ type RoleEditFormResult = {
 export function RoleEditForm({role, roles_length, max_role_position }: {role: Role, roles_length: number, max_role_position: number }) {
   const { register, handleSubmit, formState: { errors } } = useForm<RoleEditFormResult>();
   const supabase = useSupabaseClient();
-  const userPerms = useUserServerPerms();
-  const userHighestRolePosition = max_role_position; // useUserHighestRolePosition();
-
-  const isFormDisabled = role.is_system || role.position <= userHighestRolePosition;
+  const user = useUser();
+  const userPerms = useServerUserProfilePermissions(role.server_id, user?.id!);
+  const isFormDisabled = role.is_system || role.position <= max_role_position;
   const serverPermissions = Object.entries(ServerPermissions).filter(
     ([key, value]) => typeof value === 'number' && key !== 'NONE' && key !== 'OWNER'
   );
@@ -96,7 +95,7 @@ export function RoleEditForm({role, roles_length, max_role_position }: {role: Ro
             console.log('up');
             await incrementRolePosition(supabase, role.id);
           }}
-          disabled={isFormDisabled || role.position === 1 || role.position - 1 <= userHighestRolePosition}
+          disabled={isFormDisabled || role.position === 1 || role.position - 1 <= max_role_position}
         >
           Up
         </button>

components/home/Chat.tsx

@@ -9,10 +9,10 @@ import type {
 } from '@/types/dbtypes';
 import { createMessage } from '@/services/message.service';
 import Message from '@/components/home/Message';
-import { useChannel, useMessages, useUserPerms } from '@/lib/store';
+import { useChannel, useMessages, useServerUserProfilePermissions, useUserPerms } from '@/lib/store';
 import { Channel } from '@/types/dbtypes';
 import { ChannelMediaIcon } from '@/components/icons/ChannelMediaIcon';
-import { ChannelPermissions } from '@/types/permissions';
+import { ChannelPermissions, ServerPermissions } from '@/types/permissions';
 import MobileCallControls from './mobile/MobileCallControls';
 import { useConnectionState } from '@livekit/components-react';
 import { ConnectionState } from 'livekit-client';
@@ -24,6 +24,7 @@ export default function Chat() {
   const messages = useMessages();
   const channel = useChannel();
   const userPerms = useUserPerms();
+  const serverPermissions = useServerUserProfilePermissions(channel?.server_id!, user?.id!);
   const connectionState = useConnectionState();
 
   useEffect(() => {
@@ -60,7 +61,7 @@ export default function Chat() {
           {messages &&
             messages.map((value, index: number, array) => {
               // Get the previous message, if the authors are the same, we don't need to repeat the header (profile picture, name, etc.)
-              const previousMessage: MessageWithServerProfile | null =
+              const previousMessage: MessageType | null =
                 index > 0 ? array[index - 1] : null;
 
               return (
@@ -69,10 +70,10 @@ export default function Chat() {
                   message={value}
                   collapse_user={
                     !!previousMessage &&
-                    previousMessage.profile.id === value.profile.id
+                    previousMessage.profile_id === value.profile_id
                   }
                   hasDeletePerms={
-                    (userPerms & ChannelPermissions.MANAGE_MESSAGES) !== 0
+                    (serverPermissions & ServerPermissions.MANAGE_MESSAGES) !== 0
                   }
                 />
               );

components/home/DMessageList.tsx

@@ -1,15 +1,20 @@
 import { Channel, DMChannelWithRecipient } from '@/types/dbtypes';
 import UserIcon from '../icons/UserIcon';
 import styles from '@/styles/Chat.module.css';
-import { useChannel, useConnectionRef, useDMChannels, useSetChannel } from '@/lib/store';
+import { useChannel, useConnectionRef, useDMChannels, useSetChannel, useGetAllServerUserProfiles } from '@/lib/store';
 import SidebarCallControl from '@/components/home/SidebarCallControl';
 import { SearchBar } from '@/components/forms/Styles';
 import { useState } from 'react';
+import { Database } from '@/types/database.supabase';
+import { SupabaseClient } from '@supabase/supabase-js';
+import { useSupabaseClient } from '@supabase/auth-helpers-react';
 
 function mapToComponentArray(
   _map: Map<string, DMChannelWithRecipient>,
   setChannel: (channel: Channel) => void,
-  channel: Channel | null
+  channel: Channel | null,
+  getAllServerUserProfiles: (supabase: SupabaseClient<Database>, server_id: number) => void,
+  supabase: SupabaseClient<Database>,
 ) {
   const rv = [];
 
@@ -23,6 +28,7 @@ function mapToComponentArray(
             : 'hover:bg-grey-700'
         } flex items-center p-2 w-full rounded-md transition-colors hover:cursor-pointer mt-2`}
         onClick={() => {
+          getAllServerUserProfiles(supabase, value.server_id);
           setChannel({
             channel_id: value.channel_id,
             server_id: value.server_id,
@@ -42,10 +48,12 @@ function mapToComponentArray(
   return rv;
 }
 export default function DMessageList() {
+  const supabase = useSupabaseClient();
   const setChannel = useSetChannel();
   const dmChannels = useDMChannels();
   const channel = useChannel();
   const isInVoice = useConnectionRef();
+  const getAllServerProfiles = useGetAllServerUserProfiles();
   const [ filteredDMs, setFilteredDMs ] = useState(dmChannels);
 
   return (
@@ -78,7 +86,13 @@ export default function DMessageList() {
             }}
           />
         </div>
-        { mapToComponentArray(dmChannels, setChannel, channel) }
+        { mapToComponentArray(
+          filteredDMs,
+          setChannel,
+          channel,
+          getAllServerProfiles,
+          supabase,
+        )}
       </div>
       { isInVoice && (
         <div className="w-full self-end p-4 mb-7">

components/home/DeleteMsgModal.tsx

@@ -6,16 +6,18 @@ import { useSupabaseClient } from '@supabase/auth-helpers-react';
 import styles from '@/styles/Components.module.css';
 import { useEffect } from 'react';
 import Modal from '@/components/home/modals/Modal';
-import { MessageWithServerProfile } from '@/types/dbtypes';
+import { Message, MessageWithServerProfile, ServerUserProfile } from '@/types/dbtypes';
 
 export default function DeleteMsgModal({
   showModal,
   message,
+  server_user_profile,
   displayTime,
   setMessageOptions,
 }: {
   showModal: boolean;
-  message: MessageWithServerProfile;
+  message: Message;
+  server_user_profile: ServerUserProfile;
   displayTime: string;
   setMessageOptions: Dispatch<SetStateAction<'delete' | 'edit' | null>>;
 }) {
@@ -54,10 +56,10 @@ export default function DeleteMsgModal({
     >
       <>
         <div className="flex-grow flex flex-row">
-          <UserIcon user={message.profile} />
+          <UserIcon user={server_user_profile} />
           <div className="flex-grow flex items-center">
             <div className="text-xl font-semibold tracking-wider mr-2">
-              {message.profile.username}
+              {server_user_profile.username}
             </div>
             <div className="text-xs tracking-wider text-grey-300 mt-1">
               {displayTime}{' '}