Merge pull request #34 from socialappslab/fix/no-ticket/typing-errors

(fix): Roles typing errors

src/components/dialog/CreateCityDialog.tsx

@@ -9,13 +9,13 @@ import CancelIcon from '@mui/icons-material/Cancel';
 import { zodResolver } from '@hookform/resolvers/zod';
 import useCreateMutation from '@/hooks/useCreateMutation';
 import useStateContext from '@/hooks/useStateContext';
+import { City } from '@/schemas';
 import { CreateCity, CreateCityInputType, createCitySchema } from '@/schemas/create';
 import { IUser } from '../../schemas/auth';
 import { Button } from '../../themed/button/Button';
 import { FormInput } from '../../themed/form-input/FormInput';
 import { Title } from '../../themed/title/Title';
 import { extractAxiosErrorData } from '../../util';
-import { City } from '@/schemas';
 
 export interface EditUserProps {
   user: IUser;

src/components/dialog/CreateRoleDialog.tsx

@@ -3,14 +3,13 @@ import { Box, Grid } from '@mui/material';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
-import { zodResolver } from '@hookform/resolvers/zod';
 import { useSnackbar } from 'notistack';
 
 import useAxios from 'axios-hooks';
 import { useEffect, useState } from 'react';
 import useCreateMutation from '@/hooks/useCreateMutation';
 import { FormSelectOption } from '@/schemas';
-import { CreateRole, CreateRoleInputType, createRoleSchema } from '@/schemas/create';
+import { CreateRole, CreateRoleInputType } from '@/schemas/create';
 import { Permission, Role } from '@/schemas/entities';
 import FormMultipleSelect from '@/themed/form-multiple-select/FormMultipleSelect';
 import { IUser } from '../../schemas/auth';
@@ -31,19 +30,19 @@ interface CreateRoleDialogProps {
 export function CreateRoleDialog({ handleClose, updateTable }: CreateRoleDialogProps) {
   const { t } = useTranslation(['register', 'errorCodes', 'permissions', 'admin']);
   const { createMutation: createRoleMutation } = useCreateMutation<CreateRole, Role>('roles');
-  const [permissionsOptions, setPermissionsOptions] = useState([]);
+  const [permissionsOptions, setPermissionsOptions] = useState<FormSelectOption[]>([]);
 
   const { enqueueSnackbar } = useSnackbar();
 
-  const [{ data, loading, error }, refetch] = useAxios({
+  const [{ data, loading }] = useAxios({
     url: `/permissions`,
   });
 
-  const normalizePermissions = (rows: Permission[]) => {
+  const normalizePermissions = (rows: Permission[]): FormSelectOption[] => {
     if (!rows) return [];
     return rows.map((row: Permission) => {
       const attr = row.attributes;
-      return { label: `${attr.resource}.${attr.name}`, value: attr.id };
+      return { label: `${attr.resource}.${attr.name}`, value: String(attr.id) };
     }, []);
   };
 
@@ -68,11 +67,11 @@ export function CreateRoleDialog({ handleClose, updateTable }: CreateRoleDialogP
 
   const onSubmitHandler: SubmitHandler<CreateRoleInputType> = async (values) => {
     try {
-      const { name, permissions } = values;
+      const { name, permissionIds } = values;
 
       const payload: CreateRole = {
         name,
-        permissionIds: permissions.map((permission) => parseInt(permission.value, 10)),
+        permissionIds: permissionIds.map((permission) => parseInt(permission.value, 10)),
       };
 
       await createRoleMutation(payload);
@@ -135,11 +134,12 @@ export function CreateRoleDialog({ handleClose, updateTable }: CreateRoleDialogP
             </Grid>
             <Grid item xs={12} sm={12}>
               <FormMultipleSelect
-                name="permissions"
+                name="permissionIds"
                 loading={loading}
                 label={t('roles')}
                 placeholder={t('edit.roles_placeholder')}
                 options={permissionsOptions}
+                //  @ts-expect-error option.label is a dynamic value that does not match with our resources.ts
                 renderOption={(option: FormSelectOption) => t(`permissions:${option.label}`)}
               />
             </Grid>

src/components/dialog/EditRoleDialog.tsx

@@ -7,16 +7,17 @@ import { useSnackbar } from 'notistack';
 
 import useAxios from 'axios-hooks';
 import { useEffect, useState } from 'react';
+import useUpdateMutation from '@/hooks/useUpdateMutation';
 import { FormSelectOption } from '@/schemas';
-import { CreateRole, CreateRoleInputType } from '@/schemas/create';
+import { CreateRoleInputType } from '@/schemas/create';
 import { Permission, Role } from '@/schemas/entities';
+import { UpdateRole } from '@/schemas/update';
 import FormMultipleSelect from '@/themed/form-multiple-select/FormMultipleSelect';
 import { IUser } from '../../schemas/auth';
 import { Button } from '../../themed/button/Button';
 import { FormInput } from '../../themed/form-input/FormInput';
 import { Title } from '../../themed/title/Title';
 import { extractAxiosErrorData } from '../../util';
-import useUpdateMutation from '@/hooks/useUpdateMutation';
 
 export interface EditUserProps {
   user: IUser;
@@ -30,13 +31,13 @@ interface CreateRoleDialogProps {
 
 export function EditRoleDialog({ role, handleClose, updateTable }: CreateRoleDialogProps) {
   const { t } = useTranslation(['register', 'errorCodes', 'permissions', 'admin']);
-  const { udpateMutation: updateRoleMutation } = useUpdateMutation<CreateRole, Role>(`roles/${role?.id}`);
+  const { udpateMutation: updateRoleMutation } = useUpdateMutation<UpdateRole, Role>(`roles/${role?.id}`);
 
   const [permissionsOptions, setPermissionsOptions] = useState<FormSelectOption[]>([]);
 
   const { enqueueSnackbar } = useSnackbar();
 
-  const [{ data, loading, fetchError }, refetch] = useAxios({
+  const [{ data, loading }] = useAxios({
     url: `/permissions`,
   });
 
@@ -53,7 +54,7 @@ export function EditRoleDialog({ role, handleClose, updateTable }: CreateRoleDia
       const normalizedPermissions = normalizePermissions(data.data);
       setPermissionsOptions(normalizedPermissions);
     }
-  }, [data, loading, fetchError]);
+  }, [data, loading]);
 
   const methods = useForm<CreateRoleInputType>({
     defaultValues: {
@@ -73,13 +74,14 @@ export function EditRoleDialog({ role, handleClose, updateTable }: CreateRoleDia
     // formState: { isValid, errors },
   } = methods;
 
+  //  @ts-expect-error option.label is a dynamic value that does not match with our resources.ts
   const renderOption = (option: FormSelectOption): string => t(`permissions:${option.label}`);
 
   const onSubmitHandler: SubmitHandler<CreateRoleInputType> = async (values) => {
     try {
       const { name, permissionIds } = values;
 
-      const payload: CreateRole = {
+      const payload: UpdateRole = {
         role: {
           name,
           permissionIds: permissionIds.map((permission: FormSelectOption) => parseInt(permission.value, 10)),

src/schemas/update.ts

@@ -1,5 +1,6 @@
 import { TypeOf, array, object, record, string } from 'zod';
 import i18nInstance from '../i18n/config';
+import { CreateRole } from './create';
 
 const t = (key: string, args?: { [key: string]: string | number }) => i18nInstance.t(key, args);
 
@@ -24,3 +25,7 @@ export interface CityUpdate {
     name?: string;
   }[];
 }
+
+export interface UpdateRole {
+  role: CreateRole;
+}