feat: Pagination for other values in multi choice

[Dhruwang]

What does this PR do?

Fixes 1466

Screen.Recording.2023-11-02.at.6.25.41.PM.mov

Type of change

• Bug fix (non-breaking change which fixes an issue)
• Chore (refactoring code, technical debt, workflow improvements)
• Enhancement (small improvements)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change adds a new database migration
• This change requires a documentation update

How should this be tested?

Check summary for multi choice with other enabled

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	Comments	Updated (UTC)
formbricks-cloud	⬜️ Ignored (Inspect)	Visit Preview		Nov 6, 2023 9:01am
formbricks-com	⬜️ Ignored (Inspect)	Visit Preview		Nov 6, 2023 9:01am

[github-actions]

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

[review-agent-prime]

Multiple files

The new constant name 'TEXT_RESPONSES_PER_PAGE' is more generic and improves the readability of the code. However, it's important to ensure that this change doesn't affect the functionality of the code, especially if there are other types of responses that should not be affected by this constant.
Create Issue

    // No changes are needed as the new constant name improves readability

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/OpenTextSummary.tsx

It's recommended to use the 'useReducer' hook instead of 'useState' when the new state depends on the previous one. This is because 'useState' may not immediately update the state and this could lead to stale state issues. 'useReducer' provides a more predictable state transition.
Create Issue

    const [displayCount, setDisplayCount] = useReducer((prevCount, newCount) => prevCount + newCount, responsesPerPage);

MultipleChoiceSummary.tsx

Instead of using the filter method to remove empty values and then using slice to limit the number of displayed responses, you can use the reduce method to achieve the same result in a single iteration. This will improve the performance of your code, especially when dealing with large arrays.
Create Issue

    result.otherValues.reduce((acc, otherValue, idx) => {
      if (otherValue !== "" && acc.length < otherDisplayCount) {
        acc.push(otherValue);
      }
      return acc;
    }, [])

Instead of using an if-else statement to determine the text to display based on the count, you can use a ternary operator. This will make your code more concise and easier to read.
Create Issue

    <p className="flex w-full pt-1 text-slate-600 sm:items-end sm:justify-end sm:pt-0">
      {result.count} {result.count === 1 ? "response" : "responses"}
    </p>

packages/lib/constants.ts

Instead of calculating the file size limits each time they are accessed, you can calculate them once and store the results in constants. This will slightly improve the performance of your code.
Create Issue

    const MB = 1024 * 1024;
    const GB = MB * 1024;

    export const MAX_SIZES = {
      public: MB * 10, // 10MB
      free: MB * 10, // 10MB
      pro: GB, // 1GB
    } as const;

Consider renaming the constant TEXT_RESPONSES_PER_PAGE to TEXT_RESPONSES_LIMIT_PER_PAGE or MAX_TEXT_RESPONSES_PER_PAGE to make it more descriptive and improve code readability.
Create Issue

    export const MAX_TEXT_RESPONSES_PER_PAGE = 5;

[mattinannt]

🚀