pass Roles interface to RolesArray and to useCommonUpdate

src/pages/OldCommon/components/CommonListContainer/EditCommonModal/useCases/useCommonUpdate.ts

@@ -61,6 +61,8 @@ const useCommonUpdate = (commonId?: string): Return => {
         return;
       }
 
+      console.log(updatedData);
+
       setIsCommonUpdateLoading(true);
 
       try {

src/pages/OldCommon/interfaces/CreateCommonPayload.ts

@@ -1,5 +1,5 @@
 import { UploadFile } from "@/shared/interfaces";
-import { BaseRule, CommonLink } from "@/shared/models";
+import { BaseRule, CommonLink, Roles } from "@/shared/models";
 import { MemberAdmittanceLimitations } from "@/shared/models/governance/proposals";
 import { TextEditorValue } from "@/shared/ui-kit/TextEditor/types";
 
@@ -58,6 +58,7 @@ export interface IntermediateUpdateCommonData {
   videoUrl?: string;
   gallery?: UploadFile[];
   links?: CommonLink[];
+  roles?: Roles;
 }
 
 export interface UpdateCommonData {

src/pages/commonCreation/components/ProjectCreation/components/ProjectCreationForm/configuration.ts

@@ -1,3 +1,4 @@
+import { Roles } from "@/shared/models";
 import { TextEditorSize } from "@/shared/ui-kit";
 import { CreationFormItem, CreationFormItemType } from "../../../CreationForm";
 import {
@@ -10,7 +11,7 @@ import styles from "./ProjectCreationForm.module.scss";
 
 export const getConfiguration = (
   isProject = true,
-  roles?: string[],
+  roles?: Roles,
   shouldBeUnique?: { existingNames: string[] },
 ): CreationFormItem[] => {
   const type = isProject ? "Space" : "Common";

src/pages/commonCreation/hooks/useCommonForm.ts

@@ -4,7 +4,7 @@ import {
   IntermediateCreateCommonData,
   IntermediateUpdateCommonData,
 } from "@/pages/OldCommon/interfaces";
-import { Common } from "@/shared/models";
+import { Common, Roles } from "@/shared/models";
 import { parseStringToTextEditorValue } from "@/shared/ui-kit";
 import { convertLinksToUploadFiles } from "@/shared/utils";
 import { projectsActions } from "@/store/states";
@@ -17,10 +17,7 @@ interface Return {
   onSubmit: (values: CommonFormValues) => void;
 }
 
-const getInitialValues = (
-  common?: Common,
-  roles?: string[],
-): CommonFormValues => {
+const getInitialValues = (common?: Common, roles?: Roles): CommonFormValues => {
   return {
     projectImages: common?.image
       ? [
@@ -46,7 +43,7 @@ export const useCommonForm = (
     commonData: IntermediateUpdateCommonData | IntermediateCreateCommonData,
   ) => Promise<void>,
   common?: Common,
-  roles?: string[],
+  roles?: Roles,
 ): Return => {
   const dispatch = useDispatch();
   const initialValues: CommonFormValues = useMemo(

src/pages/commonEditing/components/Editing/components/EditingForm/EditingForm.tsx

@@ -10,7 +10,7 @@ import { styles } from "@/pages/commonCreation/components/ProjectCreation/compon
 import { useCommonForm } from "@/pages/commonCreation/hooks";
 import { usePreventReload } from "@/shared/hooks";
 import { useGovernance } from "@/shared/hooks/useCases";
-import { Common } from "@/shared/models";
+import { Common, Roles } from "@/shared/models";
 import { Loader, LoaderVariant } from "@/shared/ui-kit";
 import { removeProjectCircles } from "@/shared/utils";
 
@@ -40,10 +40,14 @@ const EditingForm: FC<EditingFormProps> = (props) => {
     error,
     updateCommon,
   } = useCommonUpdate(common.id);
+  const roles: Roles = governanceCircles.map((circle) => ({
+    circleId: circle.id,
+    circleName: circle.name,
+  }));
   const { initialValues, formItems, onSubmit } = useCommonForm(
     updateCommon,
     common,
-    governanceCircles.map((circle) => circle.name),
+    roles,
   );
 
   useEffect(() => {

src/shared/components/Form/Formik/RolesArray/RolesArray.tsx

@@ -5,6 +5,7 @@ import {
   FormikErrors,
   FormikTouched,
 } from "formik";
+import { Roles } from "@/shared/models";
 import { ErrorText } from "../../ErrorText";
 import { TextField } from "../TextField";
 import styles from "./RolesArray.module.scss";
@@ -13,7 +14,7 @@ type Errors = string | string[] | FormikErrors<string[]> | undefined;
 type Touched = FormikTouched<string>[] | undefined;
 
 export interface RolesArrayProps extends FieldArrayConfig {
-  values: string[];
+  values: Roles;
   errors: Errors;
   touched: Touched;
   title?: string;
@@ -43,18 +44,18 @@ const RolesArray: FC<RolesArrayProps> = (props) => {
       render={() => {
         return (
           <div>
-            {values?.map((value, index) => {
+            {values?.map((role, index) => {
               return (
                 <div className={styles.roleField}>
                   <TextField
                     key={index}
-                    id={`${restProps.name}.${index}`}
-                    name={`${restProps.name}.${index}`}
+                    id={`${restProps.name}.${index}.circleName`}
+                    name={`${restProps.name}.${index}.circleName`}
                     label={index === 0 ? title : ""}
-                    value={value}
+                    value={role.circleName}
                     placeholder="Role title"
                   />
-                  {!value && <ErrorText>Error</ErrorText>}
+                  {!role && <ErrorText>Error</ErrorText>}
                 </div>
               );
             })}

src/shared/components/Form/Formik/RolesArrayWrapper/RolesArrayWrapper.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import { useField, useFormikContext } from "formik";
 import { FormikTouched } from "formik/dist/types";
+import { Roles } from "@/shared/models";
 import { RolesArray, RolesArrayProps } from "../RolesArray";
 
 export type RolesArrayWrapperProps = Omit<
@@ -9,7 +10,7 @@ export type RolesArrayWrapperProps = Omit<
 >;
 
 const RolesArrayWrapper: FC<RolesArrayWrapperProps> = (props) => {
-  const [{ value }, { error }] = useField<string[]>(props.name);
+  const [{ value }, { error }] = useField<Roles>(props.name);
   const formik = useFormikContext();
 
   return (

src/shared/interfaces/CreateProjectPayload.ts

@@ -1,4 +1,4 @@
-import { BaseRule, CommonLink } from "@/shared/models";
+import { BaseRule, CommonLink, Roles } from "@/shared/models";
 import { TextEditorValue } from "@/shared/ui-kit";
 import { UploadFile } from "./UploadFile";
 
@@ -23,6 +23,6 @@ export interface IntermediateCreateProjectPayload {
   videoUrl: string;
   gallery: UploadFile[];
   links?: CommonLink[];
-  roles?: string[];
+  roles?: Roles;
   highestCircleId: string;
 }

src/shared/models/governance/Roles.ts

@@ -0,0 +1,6 @@
+export interface Role {
+  circleId: string;
+  circleName: string;
+}
+
+export type Roles = Role[];

src/shared/models/governance/index.ts

@@ -1,3 +1,4 @@
 export * from "./Circles";
 export * from "./Governance";
 export * from "./UnstructuredRules";
+export * from "./Roles";