hack workaround for now

Author: multimokia

components/forms/RoleEditForm.tsx

@@ -24,20 +24,18 @@ type RoleEditFormResult = {
   color: string;
 }
 
-export function RoleEditForm({role, server, roles_length }: {role: Role, server: Server, roles_length: number }) {
+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 userHighestRolePosition = useUserHighestRolePosition();
   const supabase = useSupabaseClient();
-  const isFormDisabled = role.is_system || role.position <= userHighestRolePosition;
   const userPerms = useUserServerPerms();
+  const userHighestRolePosition = max_role_position; // useUserHighestRolePosition();
 
-  console.log(userHighestRolePosition);
+  const isFormDisabled = role.is_system || role.position <= userHighestRolePosition;
   const serverPermissions = Object.entries(ServerPermissions).filter(
     ([key, value]) => typeof value === 'number' && key !== 'NONE' && key !== 'OWNER'
   );
 
   const onSubmit = async (formData: RoleEditFormResult) => {
-    console.log(formData);
     if (typeof formData.permissions === 'string') {
       formData.permissions = [ formData.permissions ];
     }
@@ -48,15 +46,8 @@ export function RoleEditForm({role, server, roles_length }: {role: Role, server:
 
     const perms = formData.permissions.reduce((acc, cur) => acc | parseInt(cur), 0);
 
-    console.log({
-      ...formData,
-      name: formData.name,
-      permissions: perms,
-      id: role.id
-    });
-
     // If a role is being edited, update it
-    const { data, error } = await updateRole(
+    const { error } = await updateRole(
       supabase,
       role.id,
       formData.name,
@@ -76,7 +67,7 @@ export function RoleEditForm({role, server, roles_length }: {role: Role, server:
       <div className="w-full space-x-2 mb-2 flex flex-row">
         <input
           type="text"
-          className="text-xl rounded-md h-7 p-2"
+          className="text-xl rounded-md h-7 p-2 bg-grey-900 w-full"
           disabled={isFormDisabled}
           defaultValue={role.name}
           placeholder='Role Name'

components/home/modals/ServerSettingsModal.tsx

@@ -9,7 +9,7 @@ import {
   addServerIcon,
   getServer,
 } from '@/services/server.service';
-import { useSupabaseClient } from '@supabase/auth-helpers-react';
+import { useSupabaseClient, useUser } from '@supabase/auth-helpers-react';
 import { PostgrestError } from '@supabase/supabase-js';
 import { Role, ServersForUser } from '@/types/dbtypes';
 import { ServerPermissions } from '@/types/permissions';
@@ -18,7 +18,7 @@ import 'styles/TabNav.module.css';
 import { RoleEditForm } from '@/components/forms/RoleEditForm';
 import { useServerRoles, useUserServerPerms } from '@/lib/store';
 import PlusIcon from '@/components/icons/PlusIcon';
-import { createRole } from '@/services/roles.service';
+import { createRole, getHighestRolePositionForUser } from '@/services/roles.service';
 
 
 const tabRootClass = 'flex flex-row';
@@ -39,7 +39,25 @@ export default function ServerSettingsModal({
   const userServerPerms = useUserServerPerms();
   const supabase = useSupabaseClient();
   const roles = useServerRoles(server?.server_id!);
+  const user = useUser();
+  // HACK: Workaround for the weird state bug where the user's max role is not correct
+  const [maxRole, setMaxRole] = useState<number>(30676);
 
+  useEffect(() => {
+    async function handleAsync() {
+      const { data, error } = await getHighestRolePositionForUser(supabase, server!.server_id, user?.id!);
+      if (error) {
+        console.log(error);
+        return;
+      }
+
+      else {
+        setMaxRole(data);
+      }
+    }
+
+    handleAsync();
+  }, [server?.server_id, supabase, user?.id, maxRole, server]);
   return (
     <Modal
       modalRef={modalRef}
@@ -83,7 +101,7 @@ export default function ServerSettingsModal({
               <button
                 className=""
                 onClick={async () => {
-                  const { data, error } = await createRole(
+                  await createRole(
                     supabase,
                     server?.server_id!,
                     'New Role',
@@ -118,7 +136,7 @@ export default function ServerSettingsModal({
                   value={role.id.toString()}
                   className={`${tabContentClass} p-2`}
                 >
-                  <RoleEditForm role={role} server={server?.servers!} roles_length={roles.length}/>
+                  <RoleEditForm role={role} roles_length={roles.length} max_role_position={maxRole}/>
                 </Tabs.Content>
               ))}
             </Tabs.Root>