feat: avatar upload

[pandeymangg]

What does this PR do?

Screen.Recording.2023-11-01.at.3.10.17.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?

• Test A
• Test B

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

[github-actions]

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

[review-agent-prime]

1. In Navigation.tsx, the handleEnvironmentChange, handleEnvironmentChangeByProduct, and handleEnvironmentChangeByTeam functions are pushing new routes to the router but not checking if the new route is different from the current one. This could lead to unnecessary re-renders. Consider adding a check to prevent this:

const handleEnvironmentChange = (environmentType: "production" | "development") => {
  const newEnvironmentId = environments.find((e) => e.type === environmentType)?.id;
  if (newEnvironmentId && newEnvironmentId !== environment.id) {
    router.push(`/environments/${newEnvironmentId}/`);
  }
};

const handleEnvironmentChangeByProduct = (productId: string) => {
  if (productId !== product.id) {
    router.push(`/products/${productId}/`);
  }
};

const handleEnvironmentChangeByTeam = (teamId: string) => {
  if (teamId !== team.id) {
    router.push(`/teams/${teamId}/`);
  }
};

2. In EditAvatar.tsx, the handleFileUpload function is checking the file size after making a request to get the signed URL. Consider moving the file size check before the request to save unnecessary network calls:

const handleFileUpload = async (file: File) => {
  if (!file) return;
  if (!file.type.startsWith("image/")) {
    toast.error("Please upload an image file.");
    return;
  }
  if (file.size > 10 * 1024 * 1024) {
    toast.error("File size must be less than 10MB.");
    return;
  }
  // rest of the code...
};

3. In authOptions.ts, the jwt and session functions are adding user attributes to the token and session objects respectively. However, these functions are not checking if the user object exists before accessing its properties. Consider adding a check to prevent potential errors:

async jwt({ token }) {
  const existingUser = await getProfileByEmail(token?.email!);
  if (existingUser) {
    const additionalAttributs = {
      id: existingUser.id,
      createdAt: existingUser.createdAt,
      onboardingCompleted: existingUser.onboardingCompleted,
      name: existingUser.name,
      image: existingUser.image,
    };
    return {
      ...token,
      ...additionalAttributs,
    };
  }
  return token;
},

async session({ session, token }) {
  if (token) {
    // @ts-ignore
    session.user.id = token?.id;
    // @ts-ignore
    session.user.createdAt = token?.createdAt ? new Date(token?.createdAt).toISOString() : undefined;
    // @ts-ignore
    session.user.onboardingCompleted = token?.onboardingCompleted;
    // @ts-ignore

[mattinannt]

@pandeymangg Thank you very much for this :-) Looks great!
I only have a few small things I would like to change :-)

[mattinannt]

💪🙏