fix: template breaking issue

[Dhruwang]

Apparently Next.js is not comfortable having a button tag wrapping your div, sections, etc., so it will yell "Hydration failed because the initial UI does not match what was rendered on the server".

What does this PR do?

Fixes 1694

How should this be tested?

This error occurs when user has completed onboarding and have selected an objective (not "other")
Then when on survey stater, shift reload the page

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
• First PR at Formbricks? Please sign the CLA! Without it we wont be able to merge it 🙏

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)		Jan 24, 2024 6:48am
formbricks-com	⬜️ Ignored (Inspect)		Jan 24, 2024 6:48am

[github-actions]

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

[review-agent-prime]

apps/web/app/(app)/environments/[environmentId]/surveys/templates/TemplateList.tsx

Currently, the logic for determining the category color is embedded directly within the JSX. This makes the code harder to read and maintain. By extracting this logic into a separate function, we can improve the readability and maintainability of the code.
Create Issue
See the diff
Checkout the fix

    const getCategoryColor = (category) => {
      switch (category) {
        case "Product Experience":
          return "border-blue-300 bg-blue-50 text-blue-500";
        case "Exploration":
          return "border-pink-300 bg-pink-50 text-pink-500";
        case "Growth":
          return "border-orange-300 bg-orange-50 text-orange-500";
        case "Increase Revenue":
          return "border-emerald-300 bg-emerald-50 text-emerald-500";
        case "Customer Success":
          return "border-violet-300 bg-violet-50 text-violet-500";
        default:
          return "border-slate-300 bg-slate-50 text-slate-500";
      }
    };

    // Then in the JSX
    <div className={`rounded border px-1.5 py-0.5 text-xs ${getCategoryColor(template.category)}`}>
      {template.category}
    </div>

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

Currently, the filteredTemplates are recalculated every time the component re-renders. This can be inefficient, especially if the templates array is large. By using the useMemo hook, we can memoize the filteredTemplates and only recalculate them when the dependencies change.
Create Issue
See the diff
Checkout the fix

    const filteredTemplates = useMemo(() => {
      return templates.filter((template) => {
        // existing filter logic
      });
    }, [templates, selectedFilter, templateSearch, user.objective]);

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

[mattinannt]

@Dhruwang thanks a lot for the fix for this issue 😊🚀