Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fix buggy member management modal state #191

Merged
merged 1 commit into from
Jan 8, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 47 additions & 33 deletions components/groups/modals/memberManagementModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@
.noProfanity('Profanity is not allowed')
.required('Required')
.max(25, 'Maximum 25 characters'),
weight: Yup.number().required('Weight is required').min(0, 'Weight must be at least 0'),
})
),
});
Expand All @@ -75,53 +74,64 @@
}))
);

useEffect(() => {
setMembers(
initialMembers.map(member => ({
...member,
isNew: false,
markedForDeletion: false,
weight: member.weight || '1',
}))
);
}, [initialMembers]);

const handleMemberToggleDeletion = (index: number) => {
setMembers(
members
.map((member, idx) =>
idx === index
? member.isNew
? undefined
: { ...member, markedForDeletion: !member.markedForDeletion }
: member
)
.filter(Boolean) as ExtendedMember[]
);
const formValues = formikRef.current?.values?.members || [];

setMembers(prevMembers => {
const newMembers = [...prevMembers];
const member = newMembers[index];

if (member.isNew) {
// Remove just this new member
newMembers.splice(index, 1);
} else {
// Toggle deletion for existing member
newMembers[index] = {
...member,
markedForDeletion: !member.markedForDeletion,
};
}

// Preserve form values for all members
return newMembers.map((m, idx) => ({
...m,
metadata: formValues[idx]?.metadata || m.metadata,
address: formValues[idx]?.address || m.address,
}));

Check warning on line 100 in components/groups/modals/memberManagementModal.tsx

View check run for this annotation

Codecov / codecov/patch

components/groups/modals/memberManagementModal.tsx#L78-L100

Added lines #L78 - L100 were not covered by tests
});
};

const handleAddMember = () => {
setMembers([
...members,
{
const formValues = formikRef.current?.values?.members || [];

setMembers(prevMembers => {
const newMember: ExtendedMember = {

Check warning on line 108 in components/groups/modals/memberManagementModal.tsx

View check run for this annotation

Codecov / codecov/patch

components/groups/modals/memberManagementModal.tsx#L105-L108

Added lines #L105 - L108 were not covered by tests
address: '',
metadata: '',
weight: '1',
isNew: true,
added_at: new Date(),

Check warning on line 113 in components/groups/modals/memberManagementModal.tsx

View check run for this annotation

Codecov / codecov/patch

components/groups/modals/memberManagementModal.tsx#L113

Added line #L113 was not covered by tests
markedForDeletion: false,
} as ExtendedMember,
]);
};

const newMembers = [...prevMembers, newMember];

// Preserve form values for all existing members
return newMembers.map((m, idx) => ({
...m,
metadata: formValues[idx]?.metadata || m.metadata,
address: formValues[idx]?.address || m.address,
}));

Check warning on line 124 in components/groups/modals/memberManagementModal.tsx

View check run for this annotation

Codecov / codecov/patch

components/groups/modals/memberManagementModal.tsx#L115-L124

Added lines #L115 - L124 were not covered by tests
});
};

const buildMessages = (formMembers: ExtendedMember[]) => {
const messages: Any[] = [];
const { updateGroupMembers } = cosmos.group.v1.MessageComposer.withTypeUrl;

// Filter out new members with empty fields

Check warning on line 132 in components/groups/modals/memberManagementModal.tsx

View check run for this annotation

Codecov / codecov/patch

components/groups/modals/memberManagementModal.tsx#L132

Added line #L132 was not covered by tests
const memberUpdates = formMembers
.filter(member => {
const hasRequiredFields = member.address && member.metadata;
return hasRequiredFields || member.markedForDeletion || !member.isNew;
})
.filter(member => !member.isNew || (member.address && member.metadata))

Check warning on line 134 in components/groups/modals/memberManagementModal.tsx

View check run for this annotation

Codecov / codecov/patch

components/groups/modals/memberManagementModal.tsx#L134

Added line #L134 was not covered by tests
.map(member => ({
address: member.address,
metadata: member.metadata,
Expand All @@ -133,6 +143,7 @@
groupId: BigInt(groupId),
memberUpdates,
});

Check warning on line 146 in components/groups/modals/memberManagementModal.tsx

View check run for this annotation

Codecov / codecov/patch

components/groups/modals/memberManagementModal.tsx#L146

Added line #L146 was not covered by tests
messages.push(
Any.fromPartial({
typeUrl: cosmos.group.v1.MsgUpdateGroupMembers.typeUrl,
Expand Down Expand Up @@ -183,6 +194,7 @@
};

const submitFormRef = useRef<(() => void) | null>(null);
const formikRef = useRef<any>(null);

const modalContent = (
<dialog
Expand Down Expand Up @@ -225,13 +237,15 @@
</div>

<Formik
innerRef={formikRef}
initialValues={{ members }}
validationSchema={validationSchema}
onSubmit={handleConfirm}
enableReinitialize
enableReinitialize={true}
>
{({ values, isValid, setFieldValue, handleSubmit, touched }) => {
submitFormRef.current = handleSubmit;

return (
<>
<div className="z-[9999]">
Expand Down
Loading