fix: rename oldAvatarPath to avatarPath for clarity

ts/components/dialog/DisplayPictureModal.tsx

@@ -61,7 +61,7 @@ const uploadProfileAvatar = async (scaledAvatarUrl: string | null) => {
 };
 
 export type DisplayPictureModalProps = {
-  oldAvatarPath: string | null;
+  avatarPath: string | null;
   profileName: string | undefined;
   ourId: string;
 };
@@ -73,9 +73,9 @@ export const DisplayPictureModal = (props: DisplayPictureModalProps) => {
     return null;
   }
 
-  const { oldAvatarPath, profileName, ourId } = props;
+  const { avatarPath, profileName, ourId } = props;
 
-  const [newAvatarObjectUrl, setNewAvatarObjectUrl] = useState<string | null>(oldAvatarPath);
+  const [newAvatarObjectUrl, setNewAvatarObjectUrl] = useState<string | null>(avatarPath);
   const [loading, setLoading] = useState(false);
 
   const closeDialog = () => {
@@ -92,7 +92,7 @@ export const DisplayPictureModal = (props: DisplayPictureModalProps) => {
 
   const handleUpload = async () => {
     setLoading(true);
-    if (newAvatarObjectUrl === oldAvatarPath) {
+    if (newAvatarObjectUrl === avatarPath) {
       window.log.debug(`Avatar Object URL has not changed!`);
       return;
     }
@@ -119,10 +119,10 @@ export const DisplayPictureModal = (props: DisplayPictureModalProps) => {
     >
       <div className="avatar-center" onClick={handleAvatarClick}>
         <StyledAvatarContainer className="avatar-center-inner">
-          {newAvatarObjectUrl || oldAvatarPath ? (
+          {newAvatarObjectUrl || avatarPath ? (
             <ProfileAvatar
               newAvatarObjectUrl={newAvatarObjectUrl}
-              oldAvatarPath={oldAvatarPath}
+              avatarPath={avatarPath}
               profileName={profileName}
               ourId={ourId}
             />
@@ -132,24 +132,28 @@ export const DisplayPictureModal = (props: DisplayPictureModalProps) => {
         </StyledAvatarContainer>
       </div>
 
-      <SpacerLG />
-      <SessionSpinner loading={loading} />
-
-      <div className="session-modal__button-group">
-        <SessionButton
-          text={window.i18n('save')}
-          buttonType={SessionButtonType.Simple}
-          onClick={handleUpload}
-          disabled={loading || newAvatarObjectUrl === oldAvatarPath}
-        />
-        <SessionButton
-          text={window.i18n('remove')}
-          buttonColor={SessionButtonColor.Danger}
-          buttonType={SessionButtonType.Simple}
-          onClick={handleRemove}
-          disabled={loading || !oldAvatarPath}
-        />
-      </div>
+      {loading ? (
+        <SessionSpinner loading={loading} />
+      ) : (
+        <>
+          <SpacerLG />
+          <div className="session-modal__button-group">
+            <SessionButton
+              text={window.i18n('save')}
+              buttonType={SessionButtonType.Simple}
+              onClick={handleUpload}
+              disabled={newAvatarObjectUrl === avatarPath}
+            />
+            <SessionButton
+              text={window.i18n('remove')}
+              buttonColor={SessionButtonColor.Danger}
+              buttonType={SessionButtonType.Simple}
+              onClick={handleRemove}
+              disabled={!avatarPath}
+            />
+          </div>
+        </>
+      )}
     </SessionWrapperModal>
   );
 };

ts/components/dialog/EditProfileDialog.tsx

@@ -64,17 +64,17 @@ const updateDisplayName = async (newName: string) => {
 };
 
 type ProfileAvatarProps = {
+  avatarPath: string | null;
   newAvatarObjectUrl?: string | null;
-  oldAvatarPath: string | null;
   profileName: string | undefined;
   ourId: string;
 };
 
 export const ProfileAvatar = (props: ProfileAvatarProps): ReactElement => {
-  const { newAvatarObjectUrl, oldAvatarPath, profileName, ourId } = props;
+  const { newAvatarObjectUrl, avatarPath, profileName, ourId } = props;
   return (
     <Avatar
-      forcedAvatarPath={newAvatarObjectUrl || oldAvatarPath}
+      forcedAvatarPath={newAvatarObjectUrl || avatarPath}
       forcedName={profileName || ourId}
       size={AvatarSize.XL}
       pubkey={ourId}
@@ -88,12 +88,12 @@ type ProfileHeaderProps = ProfileAvatarProps & {
 };
 
 const ProfileHeader = (props: ProfileHeaderProps): ReactElement => {
-  const { oldAvatarPath, profileName, ourId, onClick, setMode } = props;
+  const { avatarPath, profileName, ourId, onClick, setMode } = props;
 
   return (
     <div className="avatar-center">
       <div className="avatar-center-inner">
-        <ProfileAvatar oldAvatarPath={oldAvatarPath} profileName={profileName} ourId={ourId} />
+        <ProfileAvatar avatarPath={avatarPath} profileName={profileName} ourId={ourId} />
         <div
           className="image-upload-section"
           role="button"
@@ -122,13 +122,12 @@ export const EditProfileDialog = (): ReactElement => {
   const _profileName = useOurConversationUsername() || '';
   const [profileName, setProfileName] = useState(_profileName);
   const [updatedProfileName, setUpdateProfileName] = useState(profileName);
-  const oldAvatarPath = useOurAvatarPath() || '';
+  const avatarPath = useOurAvatarPath() || '';
+  const ourId = UserUtils.getOurPubKeyStrFromCache();
 
   const [mode, setMode] = useState<ProfileDialogModes>('default');
   const [loading, setLoading] = useState(false);
 
-  const ourId = UserUtils.getOurPubKeyStrFromCache();
-
   const closeDialog = () => {
     window.removeEventListener('keyup', handleOnKeyUp);
     window.inboxStore?.dispatch(editProfileModal(null));
@@ -193,7 +192,7 @@ export const EditProfileDialog = (): ReactElement => {
     closeDialog();
     dispatch(
       updateDisplayPictureModel({
-        oldAvatarPath,
+        avatarPath,
         profileName,
         ourId,
       })
@@ -223,7 +222,7 @@ export const EditProfileDialog = (): ReactElement => {
         {mode === 'default' && (
           <>
             <ProfileHeader
-              oldAvatarPath={oldAvatarPath}
+              avatarPath={avatarPath}
               profileName={profileName}
               ourId={ourId}
               onClick={handleProfileHeaderClick}
@@ -245,7 +244,7 @@ export const EditProfileDialog = (): ReactElement => {
         {mode === 'edit' && (
           <>
             <ProfileHeader
-              oldAvatarPath={oldAvatarPath}
+              avatarPath={avatarPath}
               profileName={profileName}
               ourId={ourId}
               onClick={handleProfileHeaderClick}