fix: confirm modal on back button

[Dhruwang]

What does this PR do?

Fixes 1972

When back button is clicked we check the equality of localsurvey and survey

But there occurs a mismatch due to field updatedAt

When changes are made to a survey and then saved, survey is updated, which further runs this useEffect

But due to the check if (localSurvey) return; , localsurvey is not updated with the latest survey
And due to this there occurs a time difference between the time when survey was saved (localsurvey.updatedAt) and the actual time at which it was saved in database (survey.updatedAt)

How should this be tested?

1. Save a survey
2. Click on back button on survey menubar

Checklist

Required

• Filled out the "How to test" section in this PR
• Read How we Code at Formbricks
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Updated (UTC)
formbricks-cloud	⬜️ Ignored (Inspect)		Mar 5, 2024 11:57am
formbricks-com	⬜️ Ignored (Inspect)		Mar 5, 2024 11:57am

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[review-agent-prime]

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx

Currently, the useEffect hook that fetches the latest product is triggered every time the localProduct.id changes. This could lead to unnecessary API calls if the id changes frequently. Instead, consider using a ref to store the id and only fetch the latest product when the document visibility changes.
Create Issue
See the diff
Checkout the fix

    const productIdRef = useRef(localProduct.id);

    useEffect(() => {
      const listener = () => {
        if (document.visibilityState === "visible") {
          const fetchLatestProduct = async () => {
            const latestProduct = await refetchProduct(productIdRef.current);
            if (latestProduct) {
              setLocalProduct(latestProduct);
            }
          };
          fetchLatestProduct();
        }
      };
      document.addEventListener("visibilitychange", listener);
      return () => {
        document.removeEventListener("visibilitychange", listener);
      };
    }, []);

git fetch origin && git checkout -b ReviewBot/Impro-e4e9k4u origin/ReviewBot/Impro-e4e9k4u

Currently, if an error occurs while creating a new segment, a generic error message is thrown. It would be more helpful to include the actual error message in the thrown error to aid in debugging.
Create Issue
See the diff
Checkout the fix

    if (!localSurvey.segment?.id) {
      try {
        createSegment();
      } catch (err) {
        throw new Error(`Error creating segment: ${err.message}`);
      }
    }

git fetch origin && git checkout -b ReviewBot/Impro-zv1eiqa origin/ReviewBot/Impro-zv1eiqa