Revert "feat(edit-profile): allow custom avatar (#995)"

This reverts commit 55e7f1a.

Author: moshfeu

netlify/functions-src/functions/modules/users/current.ts

@@ -57,16 +57,12 @@ const getCurrentUserHandler: ApiHandler = async (_event: HandlerEvent, context:
   if (!auth0Id) {
     return error('Unauthorized: user not found', 401)
   }
-  const currentUser = await getCurrentUser(auth0Id);
-
-  // Use stored avatar if exists, otherwise fallback to Auth0 picture
-  const avatarUrl = currentUser.avatar || context.user?.picture;
-
   const applicationUser = {
-    ...currentUser,
+    ...await getCurrentUser(auth0Id),
     email_verified: context.user?.email_verified,
-    avatar: avatarUrl,
+    avatar: context.user?.picture,
   };
+  // TODO: remove avatar from the database
   return success({ data: applicationUser })
 }
 

netlify/functions-src/functions/modules/users/toggleAvatar.ts

@@ -41,6 +41,6 @@ export const updateUserInfoHandler: ApiHandler<User> = async (event, context) =>
       data: upsertedUser,
     });
   } catch (e) {
-    return error((e as Error).message, 400);
+    return error(e.message, 400);
   }
 }

netlify/functions-src/functions/modules/users/userInfo.ts

@@ -3,7 +3,6 @@ import { handler as usersCurrentHandler } from './modules/users/current'
 import { handler as getUserInfoHandler, updateUserInfoHandler } from './modules/users/userInfo'
 import { handler as deleteUser } from './modules/users/delete'
 import { handler as verifyUserHandler } from './modules/users/verify'
-import { toggleAvatarHandler } from './modules/users/toggleAvatar'
 import { withRouter } from './hof/withRouter';
 import { withDB } from './hof/withDB';
 import { withAuth } from './utils/auth';
@@ -15,7 +14,6 @@ export const handler: ApiHandler = withDB(
       includeFullUser: true,
     })],
     ['/current', 'GET', usersCurrentHandler],
-    ['/current/avatar', 'POST', withAuth(toggleAvatarHandler)],
     ['/verify', 'POST', withAuth(verifyUserHandler, {
       emailVerificationRequired: false,
       includeFullUser: true,

netlify/functions-src/functions/users.ts

@@ -1,3 +1,4 @@
+import { getAvatarUrl } from '../../helpers/avatar';
 import ReqContent from './ReqContent';
 import { Status } from '../../helpers/mentorship';
 import { formatTimeAgo } from '../../helpers/time';
@@ -95,7 +96,7 @@ const renderList = ({
           <RichItem
             id={_id}
             userId={user._id}
-            avatar={user.avatar}
+            avatar={getAvatarUrl(user.avatar)}
             title={user.name}
             subtitle={user.title}
             onClick={() => {

src/Me/MentorshipRequests/UsersList.tsx

@@ -1,16 +1,14 @@
-import React, { FC, useState } from 'react';
+import React, { FC } from 'react';
 import styled from 'styled-components/macro';
 import { useUser } from '../../../../context/userContext/UserContext';
 import Camera from '../../../../assets/me/camera.svg';
 import CardContainer from '../../../components/Card/index';
-import { isGoogleOAuthUser } from '../../../../helpers/authProvider';
+import { getAvatarUrl } from '../../../../helpers/avatar';
 import { IconButton } from '../../../components/Button/IconButton';
 import { Tooltip } from 'react-tippy';
 import { toast } from 'react-toastify';
 import { report } from '../../../../ga';
-import { useApi } from '../../../../context/apiContext/ApiContext';
-import messages from '../../../../messages';
-import Switch from '../../../../components/Switch/Switch';
+import { RedirectToGravatar } from '../../../Modals/RedirectToGravatar';
 
 const ShareProfile = ({ url }: { url: string }) => {
   const [showInput, setShowInput] = React.useState(false);
@@ -53,105 +51,41 @@ const ShareProfile = ({ url }: { url: string }) => {
 };
 
 const Avatar: FC = () => {
-  const { currentUser, updateCurrentUser } = useUser<true>();
-  const api = useApi();
-  const [isSaving, setIsSaving] = useState(false);
+  const { currentUser } = useUser<true>();
 
   if (!currentUser) {
     return null;
   }
 
-  const isUsingGravatar = currentUser.avatar?.includes('gravatar.com') || false;
-
-  const handleToggleGravatar = async (newValue: boolean) => {
-    setIsSaving(true);
-    try {
-      report('Avatar', newValue ? 'use gravatar' : 'use google profile picture');
-      const updatedUser = await api.toggleAvatar(newValue);
-      if (updatedUser) {
-        api.clearCurrentUser();
-        updateCurrentUser(updatedUser);
-        toast.success('Avatar updated successfully', { toastId: 'avatar-updated' });
-      } else {
-        toast.error(messages.GENERIC_ERROR);
-      }
-    } catch (error) {
-      toast.error(messages.GENERIC_ERROR);
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const isGoogleUser = isGoogleOAuthUser(currentUser.auth0Id);
-
   return (
     <CardContainer>
       <Container>
         <ShareProfile
           url={`${process.env.NEXT_PUBLIC_AUTH_CALLBACK}/u/${currentUser._id}`}
         />
-        <AvatarContainer>
-          <AvatarWrapper>
-            {currentUser.avatar ? (
-              <UserImage
-                alt={currentUser.email}
-                src={currentUser.avatar}
-              />
-            ) : (
-              <AvatarPlaceHolder alt="No profile picture" src={Camera} />
-            )}
-          </AvatarWrapper>
-        </AvatarContainer>
-
-        {isGoogleUser && (
-          <>
-            <Tooltip
-              title="Use Gravatar for a different avatar from your Google photo"
-              size="regular"
-              arrow={true}
-              position="bottom"
-            >
-              <i className="fa fa-info-circle"></i>
-            </Tooltip>{" "}
-            <ToggleLabel>
-              <Switch
-                label="Use Gravatar"
-                isChecked={isUsingGravatar}
-                onToggle={handleToggleGravatar}
-                size="small"
-              />
-            </ToggleLabel>
-            <ToggleDescription>
-              Update your avatar picture at{" "}
-              {isUsingGravatar
-                ? <a href="https://gravatar.com/profile/avatars" target="_blank" rel="noopener noreferrer">Gravatar</a>
-                : <a href="https://myaccount.google.com/profile" target="_blank" rel="noopener noreferrer">Google Profile</a>
-              }
-            </ToggleDescription>
-          </>
-        )}
+        <div>
+          {currentUser && currentUser.avatar ? (
+            <UserImage
+              alt={currentUser.email}
+              src={getAvatarUrl(currentUser.avatar)}
+            />
+          ) : (
+            <AvatarPlaceHolder alt="No profile picture" src={Camera} />
+          )}
+          <ChangeAvatarSection>
+            Change your avatar on <RedirectToGravatar />
+          </ChangeAvatarSection>
+        </div>
         <h1>{currentUser ? currentUser.name : ''}</h1>
         <p>{currentUser ? currentUser.title : ''}</p>
       </Container>
     </CardContainer>
   );
 };
 
-// Styled components
-const AvatarContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-`;
-
-const AvatarWrapper = styled.div`
-  position: relative;
-  display: inline-block;
-
-  &:hover img {
-    opacity: 0.9;
-  }
+// Styled components for the updated UI elements
+const ChangeAvatarSection = styled.div`
+  margin: auto auto 10px;
 `;
 
 const AvatarPlaceHolder = styled.img`
@@ -165,24 +99,8 @@ const AvatarPlaceHolder = styled.img`
 const UserImage = styled.img`
   width: 100px;
   height: 100px;
-  display: block;
   object-fit: cover;
   border-radius: 8px;
-  border: 2px solid #e0e0e0;
-  transition: opacity 0.2s ease;
-`;
-
-const ToggleLabel = styled.div`
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-`;
-
-const ToggleDescription = styled.div`
-  font-size: 13px;
-  color: #666;
-  margin: 0 0 12px 0;
-  line-height: 1.5;
 `;
 
 const Container = styled.div`

src/Me/Routes/Home/Avatar/Avatar.tsx

@@ -206,18 +206,6 @@ export default class ApiService {
     return !!response?.success;
   }
 
-  toggleAvatar = async (useGravatar: boolean) => {
-    const response = await this.makeApiCall<User>(
-      `${paths.USERS}/current/avatar`,
-      { useGravatar },
-      'POST'
-    );
-    if (response?.success) {
-      return response.data;
-    }
-    return null;
-  }
-
   // no need. we're using gravatar now
   // updateMentorAvatar = async (mentor: Mentor, value: FormData) => {
   //   const response = await this.makeApiCall(

src/api/index.ts

@@ -12,6 +12,7 @@ import { useDeviceType } from '../../hooks/useDeviceType';
 import { report } from '../../ga';
 import messages from '../../messages';
 import { UnstyledList } from '../common';
+import { getAvatarUrl } from '../../helpers/avatar';
 import { languageName } from '../../helpers/languages';
 import { getChannelInfo } from '../../channelProvider';
 import { CardProps, CTAButtonProps } from './Card.types';
@@ -113,7 +114,7 @@ const Avatar = ({ mentor, id }: { mentor: Mentor; id: string }) => {
     <Link href={urls.user.get(mentor)} className="avatar">
       <i className="fa fa-user-circle" />
       <img
-        src={mentor.avatar}
+        src={getAvatarUrl(mentor.avatar)}
         aria-labelledby={`${id}`}
         alt={`${mentor.name}`}
         onError={(e) => e.currentTarget.classList.add('broken')}
@@ -335,14 +336,14 @@ const Card = ({ mentor, onFavMentor, isFav, appearance }: CardProps) => {
       data-testid="mentor-card"
       appearance={appearance}
     >
-      <CardHeader
+      <CardHeader 
         mentor={mentor}
         onFavMentor={onFavMentor}
         isFav={isFav}
       />
       <MentorInfo />
       <SkillsTags />
-      <CardFooter
+      <CardFooter 
         mentor={mentor}
         availability={availability}
         appearance={appearance}