Page MenuHomePhabricator
Differential D8260

[web] Add `removeUserAvatar` to `EditUserAvatarMenu`
ClosedPublic
Actions

Authored by atul on Jun 20 2023, 10:24 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 15, 4:36 PM
Unknown Object (File)
Fri, Mar 14, 5:47 AM
Unknown Object (File)
Mar 8 2025, 12:42 PM
Unknown Object (File)
Mar 8 2025, 12:42 PM
Unknown Object (File)
Mar 8 2025, 12:42 PM
Unknown Object (File)
Mar 8 2025, 12:42 PM
Unknown Object (File)
Mar 8 2025, 12:42 PM
Unknown Object (File)
Mar 8 2025, 12:39 PM
View All Files
Subscribers
tomek

Details

Reviewers
ashoat
ginsu
rohan
kamil
inka
michal
Commits
rCOMM964adba37cf9: [web] Add `removeUserAvatar` to `EditUserAvatarMenu`
Summary

Sets "Reset to default" menu item onClick to removeUserAvatar which removes the user's avatar.

Test Plan

Works as expected. User had image avatar, now they have default emoji avatar:

46dbcb.png (994×996 px, 91 KB)

Diff Detail

Repository
rCOMM Comm
Branch
master
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

atul created this revision.Jun 20 2023, 10:24 AM
Herald added a subscriber: tomek. · View Herald TranscriptJun 20 2023, 10:24 AM
atul edited the test plan for this revision. (Show Details)Jun 20 2023, 10:25 AM
Harbormaster completed remote builds in B20358: Diff 27903.Jun 20 2023, 10:42 AM
atul requested review of this revision.Jun 20 2023, 10:42 AM
atul added a child revision: D8261: [web] Display `loadingSpinner` over `EditUserAvatar` when change in progress.Jun 20 2023, 10:49 AM
atul added reviewers: rohan, kamil, inka, michal.Jun 21 2023, 9:45 AM
rohan accepted this revision.Jun 21 2023, 10:27 AM
rohan added inline comments.
web/avatars/edit-user-avatar-menu.react.js
20–23

You could probably use shorthand here

This revision is now accepted and ready to land.Jun 21 2023, 10:27 AM
atul added inline comments.Jun 21 2023, 11:21 AM
web/avatars/edit-user-avatar-menu.react.js
20–23

Thanks for catching that, will update.

atul updated this revision to Diff 27973.Jun 21 2023, 11:23 AM

rebase before addressing feedback

atul updated this revision to Diff 27974.Jun 21 2023, 11:24 AM

rebase before landing

This revision was landed with ongoing or failed builds.Jun 21 2023, 11:30 AM
Closed by commit rCOMM964adba37cf9: [web] Add `removeUserAvatar` to `EditUserAvatarMenu` (authored by atul). · Explain Why
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMM964adba37cf9: [web] Add `removeUserAvatar` to `EditUserAvatarMenu`.
Harbormaster completed remote builds in B20402: Diff 27973.Jun 21 2023, 11:41 AM
Harbormaster completed remote builds in B20403: Diff 27974.

Revision Contents
Changeset List

PathSize
web/
avatars/
22 lines

Diff 27903

View Options

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

// @flow // @flow
import _memoize from 'lodash/memoize.js';
import * as React from 'react'; import * as React from 'react';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { createSelector } from 'reselect';
import { bindCookieAndUtilsIntoCallServerEndpoint } from './action-utils.js'; import { bindCookieAndUtilsIntoCallServerEndpoint } from './action-utils.js';
import type { CallServerEndpointOptions } from './call-server-endpoint.js'; import type { BindServerCallsParams } from './action-utils.js';
import type { CallServerEndpointOptions } from './call-server-endpoint';
import { useSelector } from './redux-utils.js'; import { useSelector } from './redux-utils.js';
import type { PlatformDetails } from '../types/device-types.js';
import type { Endpoint } from '../types/endpoints.js'; import type { Endpoint } from '../types/endpoints.js';
import type { KeyserverInfo } from '../types/keyserver-types.js'; import type { KeyserverInfo } from '../types/keyserver-types.js';
import type { Dispatch } from '../types/redux-types.js'; import type { Dispatch } from '../types/redux-types.js';
import type { ConnectionStatus } from '../types/socket-types.js';
import type { CurrentUserInfo } from '../types/user-types.js'; import type { CurrentUserInfo } from '../types/user-types.js';
export type CallKeyserverEndpoint<Args: $ReadOnlyArray<mixed>> = ( export type CallKeyserverEndpoint<Args: $ReadOnlyArray<mixed>> = (
endpoint: Endpoint, endpoint: Endpoint,
input: any, input: any,
args: Args, args: Args,
options?: ?CallServerEndpointOptions, options?: ?CallServerEndpointOptions,
) => Promise<any>; ) => Promise<any>;
Show All 9 Lines | {
+keyserverIDExtractor: (...Args) => string, +keyserverIDExtractor: (...Args) => string,
}; };
export type KeyserverCall<Args: $ReadOnlyArray<mixed>, Return> = { export type KeyserverCall<Args: $ReadOnlyArray<mixed>, Return> = {
+actionFunc: ActionFunc<Args, Return>, +actionFunc: ActionFunc<Args, Return>,
+config: KeyserverCallConfig<Args>, +config: KeyserverCallConfig<Args>,
}; };
export type ExtractAndBindCookieAndUtilsParams< const boundCallServerEndpointSelector = createSelector(
Args: $ReadOnlyArray<mixed>, (state: BindServerCallsParams) => state.dispatch,
Return, (state: BindServerCallsParams) => state.cookie,
> = { (state: BindServerCallsParams) => state.urlPrefix,
(state: BindServerCallsParams) => state.sessionID,
(state: BindServerCallsParams) => state.currentUserInfo,
(state: BindServerCallsParams) => state.connectionStatus,
(state: BindServerCallsParams) => state.lastCommunicatedPlatformDetails,
(
dispatch: Dispatch,
cookie: ?string,
urlPrefix: string,
sessionID: ?string,
currentUserInfo: ?CurrentUserInfo,
connectionStatus: ConnectionStatus,
lastCommunicatedPlatformDetails: ?PlatformDetails,
) => {
return bindCookieAndUtilsIntoCallServerEndpoint({
dispatch,
cookie,
urlPrefix,
sessionID,
currentUserInfo,
connectionStatus,
lastCommunicatedPlatformDetails,
});
},
ashoatUnsubmitted
Not Done
Inline Actions
lastCommunicatedPlatformDetails: ?PlatformDetails,
- ) => {
- return bindCookieAndUtilsIntoCallServerEndpoint({
- dispatch,
- cookie,
- urlPrefix,
- sessionID,
- currentUserInfo,
- connectionStatus,
- lastCommunicatedPlatformDetails,
- });
- },
+ ) => bindCookieAndUtilsIntoCallServerEndpoint({
+ dispatch,
+ cookie,
+ urlPrefix,
+ sessionID,
+ currentUserInfo,
+ connectionStatus,
+ lastCommunicatedPlatformDetails,
+ }),
);
export type BindKeyserverCallParams = {

Nit: shorthand

ashoat: Nit: shorthand
);
export type BindKeyserverCallParams = {
+dispatch: Dispatch, +dispatch: Dispatch,
+currentUserInfo: ?CurrentUserInfo, +currentUserInfo: ?CurrentUserInfo,
+keyserverInfos: { +[keyserverID: string]: KeyserverInfo }, +keyserverInfos: { +[keyserverID: string]: KeyserverInfo },
+keyserverCall: KeyserverCall<Args, Return>,
}; };
function getCallKeyserverEndpoint<Args: $ReadOnlyArray<mixed>, Return>( export type GetCallKeyserverEndpointParams<Args: $ReadOnlyArray<mixed>> = {
params: ExtractAndBindCookieAndUtilsParams<Args, Return>, ...BindKeyserverCallParams,
): CallKeyserverEndpoint<Args> { +keyserverCallConfig: KeyserverCallConfig<Args>,
const { dispatch, keyserverInfos, currentUserInfo, keyserverCall } = params; };
const { config: serverCallConfig } = keyserverCall; function getCallKeyserverEndpoint<Args: $ReadOnlyArray<mixed>>(
params: GetCallKeyserverEndpointParams<Args>,
): CallKeyserverEndpoint<Args> {
const { dispatch, keyserverInfos, currentUserInfo, keyserverCallConfig } =
params;
return ( return (
endpoint: Endpoint, endpoint: Endpoint,
data: Object, data: Object,
args: Args, args: Args,
options?: ?CallServerEndpointOptions, options?: ?CallServerEndpointOptions,
) => { ) => {
// TODO // TODO
if (serverCallConfig.keyserverSelection === 'fanout') { if (keyserverCallConfig.keyserverSelection === 'fanout') {
return Promise.all([]); return Promise.all([]);
} }
const keyserverID = serverCallConfig.keyserverIDExtractor(...args); const keyserverID = keyserverCallConfig.keyserverIDExtractor(...args);
const { const {
cookie, cookie,
urlPrefix, urlPrefix,
sessionID, sessionID,
connection, connection,
lastCommunicatedPlatformDetails, lastCommunicatedPlatformDetails,
} = keyserverInfos[keyserverID]; } = keyserverInfos[keyserverID];
const boundCallServerEndpoint = bindCookieAndUtilsIntoCallServerEndpoint({ const boundCallServerEndpoint = boundCallServerEndpointSelector({
dispatch, dispatch,
currentUserInfo, currentUserInfo,
cookie, cookie,
urlPrefix, urlPrefix,
sessionID, sessionID,
connectionStatus: connection.status, connectionStatus: connection.status,
lastCommunicatedPlatformDetails, lastCommunicatedPlatformDetails,
}); });
return boundCallServerEndpoint(endpoint, data, options); return boundCallServerEndpoint(endpoint, data, options);
}; };
} }
const baseCreateBoundKeyserverCallActionSelector = <
Args: $ReadOnlyArray<mixed>,
Return,
>(
keyserverCall: KeyserverCall<Args, Return>,
): (BindKeyserverCallParams => (...Args) => Promise<Return>) =>
createSelector(
(state: BindKeyserverCallParams) => state.dispatch,
(state: BindKeyserverCallParams) => state.currentUserInfo,
(state: BindKeyserverCallParams) => state.keyserverInfos,
(
dispatch: Dispatch,
currentUserInfo: ?CurrentUserInfo,
keyserverInfos: { +[keyserverID: string]: KeyserverInfo },
) => {
const callKeyserverEndpoint = getCallKeyserverEndpoint({
dispatch,
currentUserInfo,
keyserverInfos,
keyserverCallConfig: keyserverCall.config,
});
return keyserverCall.actionFunc(callKeyserverEndpoint);
},
);
type CreateBoundKeyserverCallActionSelectorType = <
Args: $ReadOnlyArray<mixed>,
Return,
>(
keyserverCall: KeyserverCall<Args, Return>,
) => BindKeyserverCallParams => (...Args) => Promise<Return>;
const createBoundKeyserverCallActionSelector: CreateBoundKeyserverCallActionSelectorType =
_memoize(baseCreateBoundKeyserverCallActionSelector);
function useKeyserverCall<Args: $ReadOnlyArray<mixed>, Return>( function useKeyserverCall<Args: $ReadOnlyArray<mixed>, Return>(
keyserverCall: KeyserverCall<Args, Return>, keyserverCall: KeyserverCall<Args, Return>,
paramOverride?: ?$Shape<ExtractAndBindCookieAndUtilsParams<Args, Return>>, paramOverride?: ?$Shape<BindKeyserverCallParams>,
): (...Args) => Promise<Return> { ): (...Args) => Promise<Return> {
const dispatch = useDispatch(); const dispatch = useDispatch();
const keyserverInfos = useSelector( const keyserverInfos = useSelector(
state => state.keyserverStore.keyserverInfos, state => state.keyserverStore.keyserverInfos,
); );
const currentUserInfo = useSelector(state => state.currentUserInfo); const currentUserInfo = useSelector(state => state.currentUserInfo);
return React.useMemo(() => { return React.useMemo(
const callKeyserverEndpoint = getCallKeyserverEndpoint({ () =>
createBoundKeyserverCallActionSelector(keyserverCall)({
dispatch, dispatch,
currentUserInfo, currentUserInfo,
keyserverInfos, keyserverInfos,
keyserverCall,
...paramOverride, ...paramOverride,
}); }),
return keyserverCall.actionFunc(callKeyserverEndpoint);
}, [dispatch, currentUserInfo, keyserverInfos, keyserverCall, paramOverride]); [dispatch, currentUserInfo, keyserverInfos, keyserverCall, paramOverride],
);
} }
export { useKeyserverCall }; export { useKeyserverCall };