Page MenuHomePhabricator
Differential D8261

[web] Display `loadingSpinner` over `EditUserAvatar` when change in progress
ClosedPublic
Actions

Authored by atul on Jun 20 2023, 10:49 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 22, 3:35 PM
Unknown Object (File)
Sat, Mar 15, 4:36 PM
Unknown Object (File)
Sat, Mar 8, 12:42 PM
Unknown Object (File)
Sat, Mar 8, 12:42 PM
Unknown Object (File)
Sat, Mar 8, 12:42 PM
Unknown Object (File)
Sat, Mar 8, 12:42 PM
Unknown Object (File)
Sat, Mar 8, 12:42 PM
Unknown Object (File)
Sat, Mar 8, 12:39 PM
View All Files
Subscribers
tomek

Details

Reviewers
ashoat
ginsu
rohan
inka
kamil
michal
Commits
rCOMMb6e7da51ff11: [web] Display `loadingSpinner` over `EditUserAvatar` when change in progress
Summary

Show a loading spinner over EditUserAvatar when a save is in progress. Pretty straightforward. In next diff I'll quickly "disable" the edit button as well.

Depends on D8260

Test Plan

Looks as expected:

21c58a.png (1×996 px, 92 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

atul created this revision.Jun 20 2023, 10:49 AM
Herald added a subscriber: tomek. · View Herald TranscriptJun 20 2023, 10:49 AM
atul published this revision for review.Jun 20 2023, 10:49 AM
atul edited the test plan for this revision. (Show Details)
atul added inline comments.
web/avatars/edit-user-avatar.react.js
25–28 ↗(On Diff #27905)

Ah, let me pull this out.

atul updated this revision to Diff 27906.Jun 20 2023, 10:57 AM

pull out loadingSpinner from component

Harbormaster completed remote builds in B20360: Diff 27905.Jun 20 2023, 11:06 AM
Harbormaster completed remote builds in B20361: Diff 27906.Jun 20 2023, 11:14 AM
atul added a child revision: D8263: [web] Move `editAvatarBadge` div to `EditUserAvatarMenu`.Jun 20 2023, 11:55 AM
atul added reviewers: rohan, inka, kamil, michal.Jun 21 2023, 9:45 AM
kamil accepted this revision.Jun 22 2023, 4:41 AM
This revision is now accepted and ready to land.Jun 22 2023, 4:41 AM
atul updated this revision to Diff 28007.Jun 22 2023, 10:53 AM

undefined -> null

This revision was landed with ongoing or failed builds.Jun 22 2023, 10:56 AM
Closed by commit rCOMMb6e7da51ff11: [web] Display `loadingSpinner` over `EditUserAvatar` when change in progress (authored by atul). · Explain Why
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMMb6e7da51ff11: [web] Display `loadingSpinner` over `EditUserAvatar` when change in progress.
Harbormaster failed remote builds in B20433: Diff 28007!Jun 22 2023, 11:15 AM

Revision Contents
Changeset List

PathSize
web/
avatars/
7 lines
14 lines

Diff 28009

View Options

web/avatars/edit-user-avatar.css

// @flow // @flow
import reduceConnectionInfo from './connection-reducer.js';
import { reduceDeviceToken } from './device-token-reducer.js'; import { reduceDeviceToken } from './device-token-reducer.js';
import { unsupervisedBackgroundActionType } from './lifecycle-state-reducer.js'; import { unsupervisedBackgroundActionType } from './lifecycle-state-reducer.js';
import { updateActivityActionTypes } from '../actions/activity-actions.js'; import { updateActivityActionTypes } from '../actions/activity-actions.js';
import { updateLastCommunicatedPlatformDetailsActionType } from '../actions/device-actions.js'; import { updateLastCommunicatedPlatformDetailsActionType } from '../actions/device-actions.js';
import { import {
addKeyserverActionType, addKeyserverActionType,
removeKeyserverActionType, removeKeyserverActionType,
} from '../actions/keyserver-actions.js'; } from '../actions/keyserver-actions.js';
import { siweAuthActionTypes } from '../actions/siwe-actions.js'; import { siweAuthActionTypes } from '../actions/siwe-actions.js';
import { import {
logInActionTypes,
resetUserStateActionType,
logOutActionTypes, logOutActionTypes,
deleteAccountActionTypes, deleteAccountActionTypes,
registerActionTypes, registerActionTypes,
logInActionTypes,
resetUserStateActionType,
} from '../actions/user-actions.js'; } from '../actions/user-actions.js';
import { queueActivityUpdatesActionType } from '../types/activity-types.js'; import { queueActivityUpdatesActionType } from '../types/activity-types.js';
import type { KeyserverStore } from '../types/keyserver-types'; import type { KeyserverStore } from '../types/keyserver-types';
import type { BaseAction } from '../types/redux-types.js'; import type { BaseAction } from '../types/redux-types.js';
import { import {
fullStateSyncActionType, fullStateSyncActionType,
incrementalStateSyncActionType, incrementalStateSyncActionType,
updateConnectionStatusActionType, updateConnectionStatusActionType,
setLateResponseActionType,
updateDisconnectedBarActionType,
} from '../types/socket-types.js'; } from '../types/socket-types.js';
import { processUpdatesActionType } from '../types/update-types.js'; import { processUpdatesActionType } from '../types/update-types.js';
import { setNewSessionActionType } from '../utils/action-utils.js'; import { setNewSessionActionType } from '../utils/action-utils.js';
import { getConfig } from '../utils/config.js'; import { getConfig } from '../utils/config.js';
import { setURLPrefix } from '../utils/url-utils.js'; import { setURLPrefix } from '../utils/url-utils.js';
import { ashoatKeyserverID } from '../utils/validation-utils.js'; import { ashoatKeyserverID } from '../utils/validation-utils.js';
export default function reduceKeyserverStore( export default function reduceKeyserverStore(
state: KeyserverStore, state: KeyserverStore,
action: BaseAction, action: BaseAction,
): KeyserverStore { ): KeyserverStore {
if ( if (action.type === addKeyserverActionType) {
action.type === logOutActionTypes.success ||
action.type === deleteAccountActionTypes.success
) {
state = {
keyserverInfos: {
[ashoatKeyserverID]: {
...state.keyserverInfos[ashoatKeyserverID],
},
},
};
} else if (action.type === addKeyserverActionType) {
return { return {
...state, ...state,
keyserverInfos: { keyserverInfos: {
...state.keyserverInfos, ...state.keyserverInfos,
[action.payload.keyserverAdminUserID]: { [action.payload.keyserverAdminUserID]: {
...action.payload.newKeyserverInfo, ...action.payload.newKeyserverInfo,
}, },
}, },
Show All 31 Lines if (action.payload.sessionChange.cookie !== undefined) {
...state.keyserverInfos, ...state.keyserverInfos,
[keyserverID]: { [keyserverID]: {
...state.keyserverInfos[keyserverID], ...state.keyserverInfos[keyserverID],
cookie: action.payload.sessionChange.cookie, cookie: action.payload.sessionChange.cookie,
}, },
}, },
}; };
} }
if (action.payload.sessionChange.cookieInvalidated) {
state = {
...state,
keyserverInfos: {
...state.keyserverInfos,
[keyserverID]: {
...state.keyserverInfos[keyserverID],
connection: {
...state.keyserverInfos[keyserverID].connection,
queuedActivityUpdates: [],
},
},
},
};
}
} else if ( } else if (
action.type === logInActionTypes.success || action.type === logInActionTypes.success ||
action.type === siweAuthActionTypes.success action.type === siweAuthActionTypes.success
) { ) {
const { updatesCurrentAsOf } = action.payload; const { updatesCurrentAsOf } = action.payload;
for (const keyserverID in updatesCurrentAsOf) { for (const keyserverID in updatesCurrentAsOf) {
state = { state = {
...state, ...state,
▲ Show 20 Lines • Show All 163 Lines • ▼ Show 20 Lines for (const keyserverID in activityUpdates) {
connection: { ...oldConnection, queuedActivityUpdates }, connection: { ...oldConnection, queuedActivityUpdates },
}, },
}; };
} }
state = { state = {
...state, ...state,
keyserverInfos, keyserverInfos,
}; };
} } else if (
action.type === logOutActionTypes.success ||
action.type === deleteAccountActionTypes.success
) {
// We want to remove all keyservers but Ashoat's keyserver
const oldConnection = state.keyserverInfos[ashoatKeyserverID].connection;
const connection = reduceConnectionInfo( const keyserverInfos = {
state.keyserverInfos[ashoatKeyserverID].connection, [ashoatKeyserverID]: {
action, ...state.keyserverInfos[ashoatKeyserverID],
connection: { ...oldConnection, queuedActivityUpdates: [] },
},
};
state = {
...state,
keyserverInfos,
};
} else if (action.type === setLateResponseActionType) {
const { messageID, isLate, keyserverID } = action.payload;
const lateResponsesSet = new Set<number>(
state.keyserverInfos[keyserverID].connection.lateResponses,
); );
if (isLate) {
lateResponsesSet.add(messageID);
} else {
lateResponsesSet.delete(messageID);
}
state = {
...state,
keyserverInfos: {
...state.keyserverInfos,
[keyserverID]: {
...state.keyserverInfos[keyserverID],
connection: {
...state.keyserverInfos[keyserverID].connection,
lateResponses: [...lateResponsesSet],
},
},
},
};
} else if (action.type === updateDisconnectedBarActionType) {
const { keyserverID } = action.payload;
state = {
...state,
keyserverInfos: {
...state.keyserverInfos,
[keyserverID]: {
...state.keyserverInfos[keyserverID],
connection: {
...state.keyserverInfos[keyserverID].connection,
showDisconnectedBar: action.payload.visible,
},
},
},
};
}
const deviceToken = reduceDeviceToken( const deviceToken = reduceDeviceToken(
state.keyserverInfos[ashoatKeyserverID].deviceToken, state.keyserverInfos[ashoatKeyserverID].deviceToken,
action, action,
); );
if ( if (deviceToken !== state.keyserverInfos[ashoatKeyserverID].deviceToken) {
connection !== state.keyserverInfos[ashoatKeyserverID].connection ||
deviceToken !== state.keyserverInfos[ashoatKeyserverID].deviceToken
) {
state = { state = {
...state, ...state,
keyserverInfos: { keyserverInfos: {
...state.keyserverInfos, ...state.keyserverInfos,
[ashoatKeyserverID]: { [ashoatKeyserverID]: {
...state.keyserverInfos[ashoatKeyserverID], ...state.keyserverInfos[ashoatKeyserverID],
connection,
deviceToken, deviceToken,
}, },
}, },
}; };
} }
return state; return state;
} }
View Options

web/avatars/edit-user-avatar.react.js

// @flow // @flow
import reduceConnectionInfo from './connection-reducer.js';
import { reduceDeviceToken } from './device-token-reducer.js'; import { reduceDeviceToken } from './device-token-reducer.js';
import { unsupervisedBackgroundActionType } from './lifecycle-state-reducer.js'; import { unsupervisedBackgroundActionType } from './lifecycle-state-reducer.js';
import { updateActivityActionTypes } from '../actions/activity-actions.js'; import { updateActivityActionTypes } from '../actions/activity-actions.js';
import { updateLastCommunicatedPlatformDetailsActionType } from '../actions/device-actions.js'; import { updateLastCommunicatedPlatformDetailsActionType } from '../actions/device-actions.js';
import { import {
addKeyserverActionType, addKeyserverActionType,
removeKeyserverActionType, removeKeyserverActionType,
} from '../actions/keyserver-actions.js'; } from '../actions/keyserver-actions.js';
import { siweAuthActionTypes } from '../actions/siwe-actions.js'; import { siweAuthActionTypes } from '../actions/siwe-actions.js';
import { import {
logInActionTypes,
resetUserStateActionType,
logOutActionTypes, logOutActionTypes,
deleteAccountActionTypes, deleteAccountActionTypes,
registerActionTypes, registerActionTypes,
logInActionTypes,
resetUserStateActionType,
} from '../actions/user-actions.js'; } from '../actions/user-actions.js';
import { queueActivityUpdatesActionType } from '../types/activity-types.js'; import { queueActivityUpdatesActionType } from '../types/activity-types.js';
import type { KeyserverStore } from '../types/keyserver-types'; import type { KeyserverStore } from '../types/keyserver-types';
import type { BaseAction } from '../types/redux-types.js'; import type { BaseAction } from '../types/redux-types.js';
import { import {
fullStateSyncActionType, fullStateSyncActionType,
incrementalStateSyncActionType, incrementalStateSyncActionType,
updateConnectionStatusActionType, updateConnectionStatusActionType,
setLateResponseActionType,
updateDisconnectedBarActionType,
} from '../types/socket-types.js'; } from '../types/socket-types.js';
import { processUpdatesActionType } from '../types/update-types.js'; import { processUpdatesActionType } from '../types/update-types.js';
import { setNewSessionActionType } from '../utils/action-utils.js'; import { setNewSessionActionType } from '../utils/action-utils.js';
import { getConfig } from '../utils/config.js'; import { getConfig } from '../utils/config.js';
import { setURLPrefix } from '../utils/url-utils.js'; import { setURLPrefix } from '../utils/url-utils.js';
import { ashoatKeyserverID } from '../utils/validation-utils.js'; import { ashoatKeyserverID } from '../utils/validation-utils.js';
export default function reduceKeyserverStore( export default function reduceKeyserverStore(
state: KeyserverStore, state: KeyserverStore,
action: BaseAction, action: BaseAction,
): KeyserverStore { ): KeyserverStore {
if ( if (action.type === addKeyserverActionType) {
action.type === logOutActionTypes.success ||
action.type === deleteAccountActionTypes.success
) {
state = {
keyserverInfos: {
[ashoatKeyserverID]: {
...state.keyserverInfos[ashoatKeyserverID],
},
},
};
} else if (action.type === addKeyserverActionType) {
return { return {
...state, ...state,
keyserverInfos: { keyserverInfos: {
...state.keyserverInfos, ...state.keyserverInfos,
[action.payload.keyserverAdminUserID]: { [action.payload.keyserverAdminUserID]: {
...action.payload.newKeyserverInfo, ...action.payload.newKeyserverInfo,
}, },
}, },
Show All 31 Lines if (action.payload.sessionChange.cookie !== undefined) {
...state.keyserverInfos, ...state.keyserverInfos,
[keyserverID]: { [keyserverID]: {
...state.keyserverInfos[keyserverID], ...state.keyserverInfos[keyserverID],
cookie: action.payload.sessionChange.cookie, cookie: action.payload.sessionChange.cookie,
}, },
}, },
}; };
} }
if (action.payload.sessionChange.cookieInvalidated) {
state = {
...state,
keyserverInfos: {
...state.keyserverInfos,
[keyserverID]: {
...state.keyserverInfos[keyserverID],
connection: {
...state.keyserverInfos[keyserverID].connection,
queuedActivityUpdates: [],
},
},
},
};
}
} else if ( } else if (
action.type === logInActionTypes.success || action.type === logInActionTypes.success ||
action.type === siweAuthActionTypes.success action.type === siweAuthActionTypes.success
) { ) {
const { updatesCurrentAsOf } = action.payload; const { updatesCurrentAsOf } = action.payload;
for (const keyserverID in updatesCurrentAsOf) { for (const keyserverID in updatesCurrentAsOf) {
state = { state = {
...state, ...state,
▲ Show 20 Lines • Show All 163 Lines • ▼ Show 20 Lines for (const keyserverID in activityUpdates) {
connection: { ...oldConnection, queuedActivityUpdates }, connection: { ...oldConnection, queuedActivityUpdates },
}, },
}; };
} }
state = { state = {
...state, ...state,
keyserverInfos, keyserverInfos,
}; };
} } else if (
action.type === logOutActionTypes.success ||
action.type === deleteAccountActionTypes.success
) {
// We want to remove all keyservers but Ashoat's keyserver
const oldConnection = state.keyserverInfos[ashoatKeyserverID].connection;
const connection = reduceConnectionInfo( const keyserverInfos = {
state.keyserverInfos[ashoatKeyserverID].connection, [ashoatKeyserverID]: {
action, ...state.keyserverInfos[ashoatKeyserverID],
connection: { ...oldConnection, queuedActivityUpdates: [] },
},
};
state = {
...state,
keyserverInfos,
};
} else if (action.type === setLateResponseActionType) {
const { messageID, isLate, keyserverID } = action.payload;
const lateResponsesSet = new Set<number>(
state.keyserverInfos[keyserverID].connection.lateResponses,
); );
if (isLate) {
lateResponsesSet.add(messageID);
} else {
lateResponsesSet.delete(messageID);
}
state = {
...state,
keyserverInfos: {
...state.keyserverInfos,
[keyserverID]: {
...state.keyserverInfos[keyserverID],
connection: {
...state.keyserverInfos[keyserverID].connection,
lateResponses: [...lateResponsesSet],
},
},
},
};
} else if (action.type === updateDisconnectedBarActionType) {
const { keyserverID } = action.payload;
state = {
...state,
keyserverInfos: {
...state.keyserverInfos,
[keyserverID]: {
...state.keyserverInfos[keyserverID],
connection: {
...state.keyserverInfos[keyserverID].connection,
showDisconnectedBar: action.payload.visible,
},
},
},
};
}
const deviceToken = reduceDeviceToken( const deviceToken = reduceDeviceToken(
state.keyserverInfos[ashoatKeyserverID].deviceToken, state.keyserverInfos[ashoatKeyserverID].deviceToken,
action, action,
); );
if ( if (deviceToken !== state.keyserverInfos[ashoatKeyserverID].deviceToken) {
connection !== state.keyserverInfos[ashoatKeyserverID].connection ||
deviceToken !== state.keyserverInfos[ashoatKeyserverID].deviceToken
) {
state = { state = {
...state, ...state,
keyserverInfos: { keyserverInfos: {
...state.keyserverInfos, ...state.keyserverInfos,
[ashoatKeyserverID]: { [ashoatKeyserverID]: {
...state.keyserverInfos[ashoatKeyserverID], ...state.keyserverInfos[ashoatKeyserverID],
connection,
deviceToken, deviceToken,
}, },
}, },
}; };
} }
return state; return state;
} }