fix: edit segment card changes #2081
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 2 Ignored Deployments
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/actions.tsConsider abstracting the authorization check into a separate function. This will improve code readability and maintainability. async function checkUserAccess(session, surveyId) {
if (!session) throw new AuthorizationError("Not authorized");
const environmentAccess = await canUserAccessSurvey(session.user.id, surveyId);
if (!environmentAccess) throw new AuthorizationError("Not authorized");
}packages/ee/advancedTargeting/lib/actions.tsConsider abstracting the authorization check into a separate function. This will improve code readability and maintainability. async function checkUserAccess(session, surveyId) {
if (!session) throw new AuthorizationError("Not authorized");
const environmentAccess = await canUserAccessSurvey(session.user.id, surveyId);
if (!environmentAccess) throw new AuthorizationError("Not authorized");
}packages/ee/advancedTargeting/components/AdvancedTargetingCard.tsxConsider breaking down the large component into smaller, more manageable components. This will make the code easier to read and maintain. // Break down the large component into smaller components
const SegmentEditorComponent = ({...props}) => {
// Segment editor related code
}
const FilterModalComponent = ({...props}) => {
// Filter modal related code
}
const SegmentDetailComponent = ({...props}) => {
// Segment detail related code
}
// Use the smaller components in the main component
const AdvancedTargetingCard = ({...props}) => {
return (
<>
<SegmentEditorComponent {...props} />
<FilterModalComponent {...props} />
<SegmentDetailComponent {...props} />
</>
)
}Consider using the useCallback hook for the handleSaveSegment function. This will prevent unnecessary re-renders and improve performance. // Use useCallback for handleSaveSegment
const handleSaveSegment = useCallback(async (data: TSegmentUpdateInput) => {
try {
if (!segment) throw new Error("Invalid segment");
await updateSegmentAction(environmentId, segment?.id, data);
toast.success("Segment saved successfully");
setIsSegmentEditorOpen(false);
setSegmentEditorViewOnly(true);
} catch (err: any) {
toast.error(err.message ?? "Error Saving Segment");
}
}, [environmentId, segment]); |
There was a problem hiding this comment.
@pandeymangg thanks for the PR 😊 Works great! 👍
Can we also solve this by showing a field validation message instead of disabling the save button (I think we are doing this in other places that way) or also changing the green check mark as it might be hard for a user to find where the problem is if they have e.g. collapsed the card?
https://files.slack.com/files-pri/T051W9BL93J-F06JZ61RK0T/screenshot_2024-02-15_at_13.48.13.png
What does this PR do?
Fixes multiple issues with the edit segment card:
save changesbutton that saves the segment changes, and the survey save button is disabled. This happens only if the segment is not private.Fixes # (issue)
Screen.Recording.2024-02-15.at.12.57.49.PM.mov
How should this be tested?
Checklist
Required
pnpm buildconsole.logsgit pull origin mainAppreciated