feat(edit-profile): allow switch gravar / Google avatar picture by moshfeu · Pull Request #1001 · Coding-Coach/find-a-mentor

moshfeu · 2026-01-28T22:54:27Z

Changes

This pull request introduces a new feature that allows users to toggle between using their Google profile picture and a Gravatar image as their avatar.

Backend changes:

Added a new API endpoint /users/current/avatar (POST) to allow users to switch between their Google profile picture and Gravatar avatar. The endpoint updates the user's avatar URL in the database and returns the updated user object. [1] [2] [3]
Updated the current user handler to prefer the stored avatar, falling back to the Auth0 picture if not set, and to return both avatar and auth0Picture fields.
Improved error handling in user update endpoints for better type safety.

Frontend changes:

Added UI components (AvatarField and updates to Avatar.tsx and EditProfile.js) to let users toggle between Gravatar and Google profile avatars, including a switch and contextual help links. [1] [2] [3] [4] [5] [6] [7]
Integrated the new API endpoint into the frontend's API service and updated user context after avatar changes. [1] [2] [3]
Removed all usage of the legacy getAvatarUrl helper, updating all avatar references to use the direct avatar URL from the user object. [1] [2] [3] [4] [5] [6]

UI consistency and fallback improvements:

Updated avatar display logic throughout the app to consistently use the stored avatar URL, with fallback to Auth0 picture if needed, and improved error handling for broken avatar images. [1] [2] [3] [4]

Demo

Screen.Recording.2026-01-29.at.0.52.52.mov

Copilot

Pull request overview

This PR adds a feature allowing users with Google OAuth accounts to toggle between using their Google profile picture and a Gravatar avatar as their profile image.

Changes:

Added backend API endpoint /users/current/avatar (POST) to handle avatar switching with appropriate user lookup and URL generation
Added frontend UI components (AvatarField) to display avatar selection toggle with contextual help links
Updated avatar display logic throughout the application to use stored avatar URL with auth0Picture fallback, and removed the legacy getAvatarUrl helper function

Reviewed changes

Copilot reviewed 15 out of 16 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/types/models.d.ts	Added `auth0Picture` and `auth0Id` optional fields to User type
src/helpers/avatar.js	Removed legacy `getAvatarUrl` helper function
src/helpers/authProvider.ts	Added new helper to detect auth provider from auth0Id
src/components/MemberArea/model.js	Reorganized avatar field configuration, removed validation
src/components/MemberArea/PendingApplications.js	Updated to use avatar URL directly instead of helper function
src/components/MemberArea/MemberArea.js	Added avatar error handling with fallback to auth0Picture
src/components/MemberArea/EditProfile.js	Integrated avatar toggle functionality with new AvatarField component
src/components/MemberArea/AvatarField.tsx	New component providing avatar toggle UI for Google OAuth users
src/components/Card/Card.tsx	Removed getAvatarUrl usage, minor whitespace cleanup
src/api/index.ts	Added toggleAvatar API method
src/Me/Routes/Home/Avatar/Avatar.tsx	Integrated avatar toggle with Switch component and user feedback
src/Me/MentorshipRequests/UsersList.tsx	Updated to use avatar URL directly
netlify/functions-src/functions/users.ts	Added route for avatar toggle endpoint
netlify/functions-src/functions/modules/users/userInfo.ts	Improved error handling type safety
netlify/functions-src/functions/modules/users/toggleAvatar.ts	New handler implementing avatar toggle logic
netlify/functions-src/functions/modules/users/current.ts	Updated to return auth0Picture and prefer stored avatar

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-28T22:58:22Z

    user: fromMtoVM(this.context.currentUser),
    errors: [],
    agree: false,
+    isUsingGravatar: this.context.currentUser?.avatar?.includes('gravatar.com') || false,


The logic for determining whether a user is using Gravatar relies on checking if the avatar URL contains 'gravatar.com'. However, this approach may not work correctly if the avatar URL is undefined or if a user switches from Google to Gravatar and the URL hasn't been updated yet. Consider checking the avatar URL against both the auth0Picture to determine which one is currently active, or storing the avatar preference explicitly in the database.

Copilot · 2026-01-28T22:58:22Z

    return null;
  }

+  const isUsingGravatar = currentUser.avatar?.includes('gravatar.com') || false;


The logic for determining whether a user is using Gravatar relies on checking if the avatar URL contains 'gravatar.com'. However, this approach may not work correctly if the avatar URL is undefined or if a user switches from Google to Gravatar and the URL hasn't been updated yet. Consider checking the avatar URL against both the auth0Picture to determine which one is currently active, or storing the avatar preference explicitly in the database.

Suggested change

const isUsingGravatar = currentUser.avatar?.includes('gravatar.com') || false;

const isUsingGravatar =

!!currentUser.avatar &&

!!(currentUser as User).auth0Picture &&

currentUser.avatar !== (currentUser as User).auth0Picture;

Copilot · 2026-01-28T22:58:22Z

+      return error('User not found', 404);
+    }
+
+    const avatarUrl = useGravatar ? getGravatarUrl(currentUser.email) : context.user?.picture;


When useGravatar is false, the avatar URL is set to context.user?.picture, which could potentially be undefined. This could result in setting the avatar to undefined in the database. Consider adding validation to ensure context.user?.picture exists before allowing the switch, or falling back to generating a Gravatar URL if it's missing.

Suggested change

const avatarUrl = useGravatar ? getGravatarUrl(currentUser.email) : context.user?.picture;

const avatarUrl =

useGravatar || !context.user?.picture

? getGravatarUrl(currentUser.email)

: context.user.picture;

Copilot

Pull request overview

Copilot reviewed 15 out of 16 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-28T05:57:45Z

+  const avatarUrl = avatarError && currentUser?.auth0Picture
+    ? currentUser.auth0Picture
+    : currentUser?.avatar || currentUser?.auth0Picture;
+


avatarUrl selection is based on avatarError, but avatarError is never reset. Once an image load fails, the component will keep preferring auth0Picture even after currentUser.avatar changes (e.g., user switches back to Gravatar), which can make the UI appear stuck. Consider resetting avatarError to false when the avatar source changes (e.g., via useEffect on currentUser.avatar) or on successful image load (onLoad).

Copilot · 2026-02-28T05:57:45Z

+  handleToggleGravatar = async (newValue) => {
+    const { updateCurrentUser } = this.context;
+    const { api } = this.props;
+
+    this.setState({ disabled: true });
+    try {
+      report('Avatar', newValue ? 'use gravatar' : 'use google profile picture');
+      const updatedUser = await api.toggleAvatar(newValue);
+      if (updatedUser) {


handleToggleGravatar can be triggered repeatedly while a previous request is in-flight (the disabled state is set, but the Switch component isn’t disabled and there’s no early return). This can send concurrent /users/current/avatar requests and leave isUsingGravatar out of sync with the server. Add a guard at the start (e.g., if this.state.disabled return) and/or wire the disabled state into the UI so the toggle can’t be spammed while saving.

Copilot · 2026-02-28T05:57:45Z

+    const avatarUrl = useGravatar ? getGravatarUrl(currentUser.email) : context.user?.picture;
+
+    const userDto: UserDto = new UserDto({
+      _id: currentUser._id,
+      avatar: avatarUrl,
+    });


avatarUrl can become undefined when useGravatar is false and context.user.picture is missing. That would overwrite the stored avatar with an empty value and may cause clients to render a broken/blank avatar. Handle the no-picture case explicitly (e.g., return 400, fall back to the current stored avatar, or fall back to a Gravatar URL) before calling upsertUser.

Copilot · 2026-02-28T05:57:45Z

 import styled from 'styled-components/macro';
 import { useUser } from '../../../../context/userContext/UserContext';
+import type { User } from '../../../../types/models';
 import Camera from '../../../../assets/me/camera.svg';


There are unused imports here (useEffect and User). In a TS build with noUnusedLocals/noUnusedParameters enabled, this will fail the build/lint. Remove the unused imports or use them.

Suggested change

import Camera from '../../../../assets/me/camera.svg';

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

moshfeu added 6 commits December 7, 2025 22:50

feat(edit-profile): allow custom avatar

699f8f0

switch to gravatar

dd64a52

toggle avatar provider

80146ab

final fixes

0f7a6a8

add tooltip to switch under become a mentor view

f15e990

adjust switch text

45c3644

moshfeu requested a review from Copilot January 28, 2026 22:54

Copilot started reviewing on behalf of moshfeu January 28, 2026 22:54 View session

Copilot AI reviewed Jan 28, 2026

View reviewed changes

moshfeu requested a review from Copilot February 28, 2026 05:52

Copilot started reviewing on behalf of moshfeu February 28, 2026 05:53 View session

Copilot AI reviewed Feb 28, 2026

View reviewed changes

Apply suggestions from code review

9136b93

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

moshfeu merged commit 5312d8c into master Feb 28, 2026
5 checks passed

moshfeu deleted the gravatar-switch branch February 28, 2026 06:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(edit-profile): allow switch gravar / Google avatar picture#1001

feat(edit-profile): allow switch gravar / Google avatar picture#1001
moshfeu merged 7 commits into
masterfrom
gravatar-switch

moshfeu commented Jan 28, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 28, 2026

Uh oh!

Copilot AI Jan 28, 2026

Uh oh!

Uh oh!

Copilot AI Jan 28, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 28, 2026

Uh oh!

Copilot AI Feb 28, 2026

Uh oh!

Copilot AI Feb 28, 2026

Uh oh!

Copilot AI Feb 28, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-  const isUsingGravatar = currentUser.avatar?.includes('gravatar.com') || false;
+  const isUsingGravatar =
+    !!currentUser.avatar &&
+    !!(currentUser as User).auth0Picture &&
+    currentUser.avatar !== (currentUser as User).auth0Picture;

Uh oh!

Conversation

moshfeu commented Jan 28, 2026

Changes

Demo

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants