keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

fix: moved all avatar logic from editProfileDialog to DisplayPictureModal

Browse Source
pull/2765/head
William Grant 2 years ago
parent 3a0b7d1c72
commit 49b4a28ef5
2 changed files with 31 additions and 75 deletions
Show Stats Download Patch File Download Diff File

49
ts/components/dialog/DisplayPictureModal.tsx
Unescape Escape View File

@ -3,13 +3,14 @@ import { SessionWrapperModal } from '../SessionWrapperModal';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SpacerLG } from '../basic/Text';
import { useDispatch } from 'react-redux';
import { updateDisplayPictureModel } from '../../state/ducks/modalDialog';
import { ProfileAvatar, ProfileAvatarProps } from './EditProfileDialog';
import { editProfileModal, updateDisplayPictureModel } from '../../state/ducks/modalDialog';
import { ProfileAvatar } from './EditProfileDialog';
import styled from 'styled-components';
import { clearOurAvatar, uploadOurAvatar } from '../../interactions/conversationInteractions';
import { ToastUtils } from '../../session/utils';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionIconButton } from '../icon';
import { pickFileForAvatar } from '../../types/attachments/VisualAttachment';
const StyledAvatarContainer = styled.div`
cursor: pointer;
@ -59,8 +60,10 @@ const uploadProfileAvatar = async (scaledAvatarUrl: string | null) => {
}
};
export type DisplayPictureModalProps = ProfileAvatarProps & {
avatarAction: () => Promise<string | null>;
export type DisplayPictureModalProps = {
oldAvatarPath: string | null;
profileName: string | undefined;
ourId: string;
};
export const DisplayPictureModal = (props: DisplayPictureModalProps) => {
@ -70,41 +73,41 @@ export const DisplayPictureModal = (props: DisplayPictureModalProps) => {
return null;
}
const {
newAvatarObjectUrl: _newAvatarObjectUrl,
oldAvatarPath: _oldAvatarPath,
profileName,
ourId,
avatarAction,
} = props;
const { oldAvatarPath, profileName, ourId } = props;
const [newAvatarObjectUrl, setNewAvatarObjectUrl] = useState<string | null>(_newAvatarObjectUrl);
const [oldAvatarPath, setOldAvatarPath] = useState<string | null>(_oldAvatarPath);
const [newAvatarObjectUrl, setNewAvatarObjectUrl] = useState<string | null>(oldAvatarPath);
const [loading, setLoading] = useState(false);
const closeDialog = () => {
dispatch(updateDisplayPictureModel(null));
dispatch(editProfileModal({}));
};
const handleAvatarClick = async () => {
const updatedAvatarObjectUrl = await pickFileForAvatar();
if (updatedAvatarObjectUrl) {
setNewAvatarObjectUrl(updatedAvatarObjectUrl);
}
};
const handleUpload = async () => {
setLoading(true);
if (newAvatarObjectUrl === _newAvatarObjectUrl) {
if (newAvatarObjectUrl === oldAvatarPath) {
window.log.debug(`Avatar Object URL has not changed!`);
return;
}
await uploadProfileAvatar(newAvatarObjectUrl);
setLoading(false);
closeDialog();
dispatch(updateDisplayPictureModel(null));
};
const handleRemove = async () => {
setLoading(true);
await clearOurAvatar();
setNewAvatarObjectUrl(null);
setOldAvatarPath(null);
setLoading(false);
closeDialog();
dispatch(updateDisplayPictureModel(null));
};
return (
@ -114,15 +117,7 @@ export const DisplayPictureModal = (props: DisplayPictureModalProps) => {
showHeader={true}
showExitIcon={true}
>
<div
className="avatar-center"
onClick={async () => {
const updatedAvatarObjectUrl = await avatarAction();
if (updatedAvatarObjectUrl) {
setNewAvatarObjectUrl(updatedAvatarObjectUrl);
}
}}
>
<div className="avatar-center" onClick={handleAvatarClick}>
<StyledAvatarContainer className="avatar-center-inner">
{newAvatarObjectUrl || oldAvatarPath ? (
<ProfileAvatar
@ -145,7 +140,7 @@ export const DisplayPictureModal = (props: DisplayPictureModalProps) => {
text={window.i18n('save')}
buttonType={SessionButtonType.Simple}
onClick={handleUpload}
disabled={loading || _newAvatarObjectUrl === newAvatarObjectUrl}
disabled={loading || newAvatarObjectUrl === oldAvatarPath}
/>
<SessionButton
text={window.i18n('remove')}

57
ts/components/dialog/EditProfileDialog.tsx
Unescape Escape View File

@ -5,11 +5,9 @@ import { Avatar, AvatarSize } from '../avatar/Avatar';
import { SyncUtils, ToastUtils, UserUtils } from '../../session/utils';
import { YourSessionIDPill, YourSessionIDSelectable } from '../basic/YourSessionIDPill';
import { SyncUtils, ToastUtils, UserUtils } from '../../session/utils';
import { getConversationController } from '../../session/conversations';
import { editProfileModal, updateDisplayPictureModel } from '../../state/ducks/modalDialog';
import { pickFileForAvatar } from '../../types/attachments/VisualAttachment';
import { saveQRCode } from '../../util/saveQRCode';
import { setLastProfileUpdateTimestamp } from '../../util/storage';
import { SessionWrapperModal } from '../SessionWrapperModal';
@ -20,6 +18,9 @@ import { sanitizeSessionUsername } from '../../session/utils/String';
import { useOurConversationUsername } from '../../hooks/useParamSelector';
import { useOurAvatarPath } from '../../hooks/useParamSelector';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import { ConversationTypeEnum } from '../../models/conversationAttributes';
import { MAX_USERNAME_BYTES } from '../../session/constants';
const handleSaveQRCode = (event: MouseEvent) => {
event.preventDefault();
@ -48,32 +49,12 @@ const QRView = ({ sessionID }: { sessionID: string }) => {
);
};
const commitProfileEdits = async (newName: string, scaledAvatarUrl: string | null) => {
const updateDisplayName = async (newName: string) => {
const ourNumber = UserUtils.getOurPubKeyStrFromCache();
const conversation = await getConversationController().getOrCreateAndWait(
ourNumber,
ConversationTypeEnum.PRIVATE
);
if (scaledAvatarUrl?.length) {
try {
const blobContent = await (await fetch(scaledAvatarUrl)).blob();
if (!blobContent || !blobContent.size) {
throw new Error('Failed to fetch blob content from scaled avatar');
}
await uploadOurAvatar(await blobContent.arrayBuffer());
} catch (error) {
if (error.message && error.message.length) {
ToastUtils.pushToastError('edit-profile', error.message);
}
window.log.error(
'showEditProfileDialog Error ensuring that image is properly sized:',
error && error.stack ? error.stack : error
);
}
return;
}
// do not update the avatar if it did not change
conversation.setSessionDisplayNameNoCommit(newName);
// might be good to not trigger a sync if the name did not change
@ -82,8 +63,8 @@ const commitProfileEdits = async (newName: string, scaledAvatarUrl: string | nul
await SyncUtils.forceSyncConfigurationNowIfNeeded(true);
};
export type ProfileAvatarProps = {
newAvatarObjectUrl: string | null;
type ProfileAvatarProps = {
newAvatarObjectUrl?: string | null;
oldAvatarPath: string | null;
profileName: string | undefined;
ourId: string;
@ -107,17 +88,12 @@ type ProfileHeaderProps = ProfileAvatarProps & {
};
const ProfileHeader = (props: ProfileHeaderProps): ReactElement => {
const { newAvatarObjectUrl, oldAvatarPath, profileName, ourId, onClick, setMode } = props;
const { oldAvatarPath, profileName, ourId, onClick, setMode } = props;
return (
<div className="avatar-center">
<div className="avatar-center-inner">
<ProfileAvatar
newAvatarObjectUrl={newAvatarObjectUrl}
oldAvatarPath={oldAvatarPath}
profileName={profileName}
ourId={ourId}
/>
<ProfileAvatar oldAvatarPath={oldAvatarPath} profileName={profileName} ourId={ourId} />
<div
className="image-upload-section"
role="button"
@ -147,7 +123,6 @@ export const EditProfileDialog = (): ReactElement => {
const [profileName, setProfileName] = useState(_profileName);
const [updatedProfileName, setUpdateProfileName] = useState(profileName);
const oldAvatarPath = useOurAvatarPath() || '';
const [newAvatarObjectUrl, setNewAvatarObjectUrl] = useState<string | null>(null);
const [mode, setMode] = useState<ProfileDialogModes>('default');
const [loading, setLoading] = useState(false);
@ -190,7 +165,7 @@ export const EditProfileDialog = (): ReactElement => {
setUpdateProfileName(trimName);
setLoading(true);
await commitProfileEdits(newName, newAvatarObjectUrl);
await updateDisplayName(newName);
setMode('default');
setUpdateProfileName(profileName);
setLoading(false);
@ -214,25 +189,13 @@ export const EditProfileDialog = (): ReactElement => {
}
};
const fireInputEvent = async () => {
const scaledAvatarUrl = await pickFileForAvatar();
if (scaledAvatarUrl) {
setNewAvatarObjectUrl(scaledAvatarUrl);
setMode('edit');
}
return scaledAvatarUrl;
};
const handleProfileHeaderClick = () => {
closeDialog();
dispatch(
updateDisplayPictureModel({
newAvatarObjectUrl,
oldAvatarPath,
profileName,
ourId,
avatarAction: fireInputEvent,
})
);
};
@ -260,7 +223,6 @@ export const EditProfileDialog = (): ReactElement => {
{mode === 'default' && (
<>
<ProfileHeader
newAvatarObjectUrl={newAvatarObjectUrl}
oldAvatarPath={oldAvatarPath}
profileName={profileName}
ourId={ourId}
@ -283,7 +245,6 @@ export const EditProfileDialog = (): ReactElement => {
{mode === 'edit' && (
<>
<ProfileHeader
newAvatarObjectUrl={newAvatarObjectUrl}
oldAvatarPath={oldAvatarPath}
profileName={profileName}
ourId={ourId}

Write Preview
Loading…
Cancel
Save