[web] Introduce user list modal
ClosedPublic
Actions

Authored by tomek on Apr 8 2022, 7:23 AM.

Details

Reviewers

• benschac
atul
• jacek
ashoat

Commits

rCOMMf233d38cc6d3: [web] Introduce user list modal

Summary

This is a modal that can render both friend and block list.

Depends on D3674

Test Plan

Render the modal by providing functions and component and check if it looks ok.

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

tomek created this revision.Apr 8 2022, 7:23 AM

Herald added subscribers: • abosh, • karol, • adrian, ashoat. · View Herald TranscriptApr 8 2022, 7:23 AM

tomek added a child revision: D3676: [web] Introduce friend list modal row.Apr 8 2022, 7:25 AM

Harbormaster completed remote builds in B8029: Diff 11242.Apr 8 2022, 7:27 AM

tomek requested review of this revision.Apr 8 2022, 7:27 AM

Not super familiar with this sort of approach, so adding @ashoat as blocking reviewer to take another look

web/settings/relationship/user-list-modal.react.js

36–43 ↗

(On Diff #11242)

Would it make sense to pull this out of the JSX and use a callback?

Something like:

const searchModalChildGenerator = React.useCallback(
  (searchText: string) => {
    return (
      <UserList
        userRowComponent={userRowComponent}
        filterUser={filterUser}
        usersCompareFunction={usersCompareFunction}
        searchText={searchText}
      />
    );
  },
  [filterUser, userRowComponent, usersCompareFunction],
);

return (
  <SearchModal
    name={name}
    size="large"
    searchPlaceholder="Search by name"
    onClose={onClose}
  >
    {searchModalChildGenerator}
  </SearchModal>
);

atul requested changes to this revision.Apr 10 2022, 4:15 PM

atul added a reviewer: ashoat.

This revision now requires changes to proceed.Apr 10 2022, 4:15 PM

atul accepted this revision.Apr 10 2022, 6:05 PM

This revision now requires review to proceed.Apr 10 2022, 6:05 PM

Overall looks good, but agree we should memoize the render prop

web/settings/relationship/user-list-modal.react.js
36–43 ↗	(On Diff #11242)	Agree with this

This revision now requires changes to proceed.Apr 10 2022, 7:26 PM

Memoize render prop

Harbormaster completed remote builds in B8205: Diff 11476.Apr 14 2022, 7:29 AM

ashoat accepted this revision.Apr 14 2022, 2:26 PM

This revision is now accepted and ready to land.Apr 14 2022, 2:26 PM

Closed by commit rCOMMf233d38cc6d3: [web] Introduce user list modal (authored by tomek). · Explain WhyApr 15 2022, 2:16 AM

This revision was automatically updated to reflect the committed changes.

tomek added a commit: rCOMMf233d38cc6d3: [web] Introduce user list modal.

Revision Contents
Changeset List

Path

Size

web/

settings/

relationship/

user-list-modal.react.js

50 lines

Diff 11501

View Options

web/settings/relationship/user-list-modal.react.js

// @flow		// @flow

import invariant from 'invariant';		import invariant from 'invariant';
import _groupBy from 'lodash/fp/groupBy.js';		import _groupBy from 'lodash/fp/groupBy.js';
import _keyBy from 'lodash/fp/keyBy.js';		import _keyBy from 'lodash/fp/keyBy.js';
import _omit from 'lodash/fp/omit.js';		import _omit from 'lodash/fp/omit.js';
import _partition from 'lodash/fp/partition.js';		import _partition from 'lodash/fp/partition.js';
import _sortBy from 'lodash/fp/sortBy.js';		import _sortBy from 'lodash/fp/sortBy.js';
import _memoize from 'lodash/memoize.js';		import _memoize from 'lodash/memoize.js';
import _throttle from 'lodash/throttle.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 { createSelector } from 'reselect';
import uuid from 'uuid';

import {		import {
createLocalMessageActionType,		createLocalMessageActionType,
sendMultimediaMessageActionTypes,		sendMultimediaMessageActionTypes,
legacySendMultimediaMessage,		legacySendMultimediaMessage,
sendTextMessageActionTypes,		sendTextMessageActionTypes,
sendTextMessage,		sendTextMessage,
} from 'lib/actions/message-actions.js';		} from 'lib/actions/message-actions.js';
import { queueReportsActionType } from 'lib/actions/report-actions.js';		import { queueReportsActionType } from 'lib/actions/report-actions.js';
import { newThread } from 'lib/actions/thread-actions.js';		import { newThread } from 'lib/actions/thread-actions.js';
import {		import {
uploadMultimedia,		uploadMultimedia,
uploadMediaMetadata,		uploadMediaMetadata,
updateMultimediaMessageMediaActionType,		updateMultimediaMessageMediaActionType,
deleteUpload,		deleteUpload,
		blobServiceUpload,
type MultimediaUploadCallbacks,		type MultimediaUploadCallbacks,
type MultimediaUploadExtras,		type MultimediaUploadExtras,
		type BlobServiceUploadAction,
} from 'lib/actions/upload-actions.js';		} from 'lib/actions/upload-actions.js';
import {		import {
useModalContext,		useModalContext,
type PushModal,		type PushModal,
} from 'lib/components/modal-provider.react.js';		} from 'lib/components/modal-provider.react.js';
import blobService from 'lib/facts/blob-service.js';		import blobService from 'lib/facts/blob-service.js';
import commStaffCommunity from 'lib/facts/comm-staff-community.js';		import commStaffCommunity from 'lib/facts/comm-staff-community.js';
import { getNextLocalUploadID } from 'lib/media/media-utils.js';		import { getNextLocalUploadID } from 'lib/media/media-utils.js';
Show All 15 Lines
import type { CalendarQuery } from 'lib/types/entry-types.js';		import type { CalendarQuery } from 'lib/types/entry-types.js';
import type {		import type {
UploadMultimediaResult,		UploadMultimediaResult,
UploadMediaMetadataRequest,		UploadMediaMetadataRequest,
MediaMissionStep,		MediaMissionStep,
MediaMissionFailure,		MediaMissionFailure,
MediaMissionResult,		MediaMissionResult,
MediaMission,		MediaMission,
Dimensions,
} from 'lib/types/media-types.js';		} from 'lib/types/media-types.js';
import { messageTypes } from 'lib/types/message-types-enum.js';		import { messageTypes } from 'lib/types/message-types-enum.js';
import {		import {
type RawMessageInfo,		type RawMessageInfo,
type RawMultimediaMessageInfo,		type RawMultimediaMessageInfo,
type SendMessageResult,		type SendMessageResult,
type SendMessagePayload,		type SendMessagePayload,
} from 'lib/types/message-types.js';		} from 'lib/types/message-types.js';
Show All 9 Lines	import {
type ThreadInfo,		type ThreadInfo,
type RawThreadInfo,		type RawThreadInfo,
} from 'lib/types/thread-types.js';		} from 'lib/types/thread-types.js';
import {		import {
type DispatchActionPromise,		type DispatchActionPromise,
useServerCall,		useServerCall,
useDispatchActionPromise,		useDispatchActionPromise,
} from 'lib/utils/action-utils.js';		} from 'lib/utils/action-utils.js';
import { toBase64URL } from 'lib/utils/base64.js';
import {		import {
makeBlobServiceEndpointURL,		makeBlobServiceEndpointURL,
isBlobServiceURI,		isBlobServiceURI,
blobHashFromBlobServiceURI,		blobHashFromBlobServiceURI,
} from 'lib/utils/blob-service.js';		} from 'lib/utils/blob-service.js';
import type { CallServerEndpointOptions } from 'lib/utils/call-server-endpoint.js';
import { getConfig } from 'lib/utils/config.js';		import { getConfig } from 'lib/utils/config.js';
import { getMessageForException, cloneError } from 'lib/utils/errors.js';		import { getMessageForException, cloneError } from 'lib/utils/errors.js';
import { generateReportID } from 'lib/utils/report-utils.js';		import { generateReportID } from 'lib/utils/report-utils.js';
import { handleHTTPResponseError } from 'lib/utils/services-utils.js';

import {		import {
type PendingMultimediaUpload,		type PendingMultimediaUpload,
type TypeaheadState,		type TypeaheadState,
InputStateContext,		InputStateContext,
} from './input-state.js';		} from './input-state.js';
import { encryptFile } from '../media/encryption-utils.js';		import { encryptFile } from '../media/encryption-utils.js';
import { generateThumbHash } from '../media/image-utils.js';		import { generateThumbHash } from '../media/image-utils.js';
Show All 21 Lines	type Props = {
+dispatch: Dispatch,		+dispatch: Dispatch,
+dispatchActionPromise: DispatchActionPromise,		+dispatchActionPromise: DispatchActionPromise,
+calendarQuery: () => CalendarQuery,		+calendarQuery: () => CalendarQuery,
+uploadMultimedia: (		+uploadMultimedia: (
multimedia: Object,		multimedia: Object,
extras: MultimediaUploadExtras,		extras: MultimediaUploadExtras,
callbacks: MultimediaUploadCallbacks,		callbacks: MultimediaUploadCallbacks,
) => Promise<UploadMultimediaResult>,		) => Promise<UploadMultimediaResult>,
		+blobServiceUpload: BlobServiceUploadAction,
+uploadMediaMetadata: (		+uploadMediaMetadata: (
input: UploadMediaMetadataRequest,		input: UploadMediaMetadataRequest,
) => Promise<UploadMultimediaResult>,		) => Promise<UploadMultimediaResult>,
+deleteUpload: (id: string) => Promise<void>,		+deleteUpload: (id: string) => Promise<void>,
+sendMultimediaMessage: (		+sendMultimediaMessage: (
threadID: string,		threadID: string,
localID: string,		localID: string,
mediaIDs: $ReadOnlyArray<string>,		mediaIDs: $ReadOnlyArray<string>,
▲ Show 20 Lines • Show All 729 Lines • ▼ Show 20 Lines	try {
(upload.mediaType === 'encrypted_photo' \|\|		(upload.mediaType === 'encrypted_photo' \|\|
upload.mediaType === 'encrypted_video')		upload.mediaType === 'encrypted_video')
) {		) {
const { blobHash, dimensions, thumbHash } = upload;		const { blobHash, dimensions, thumbHash } = upload;
invariant(		invariant(
encryptionKey && blobHash && dimensions,		encryptionKey && blobHash && dimensions,
'incomplete encrypted upload',		'incomplete encrypted upload',
);		);
uploadResult = await this.blobServiceUpload(		uploadResult = await this.props.blobServiceUpload({
{		input: {
		blobInput: {
		type: 'file',
file: upload.file,		file: upload.file,
		},
blobHash,		blobHash,
encryptionKey,		encryptionKey,
dimensions,		dimensions,
loop: false,		loop: false,
...(thumbHash ? { thumbHash } : undefined),		thumbHash,
},		},
{ ...callbacks },		callbacks,
);		});
} else {		} else {
let uploadExtras = {		let uploadExtras = {
...upload.dimensions,		...upload.dimensions,
loop: false,		loop: false,
thumbHash: upload.thumbHash,		thumbHash: upload.thumbHash,
};		};
if (encryptionKey) {		if (encryptionKey) {
uploadExtras = { ...uploadExtras, encryptionKey };		uploadExtras = { ...uploadExtras, encryptionKey };
▲ Show 20 Lines • Show All 159 Lines • ▼ Show 20 Lines	this.setState(prevState => {
loop: result.loop,		loop: result.loop,
},		},
},		},
},		},
};		};
});		});
}		}

async blobServiceUpload(
input: {
+file: File,
+blobHash: string,
+encryptionKey: string,
+dimensions: Dimensions,
+loop?: boolean,
+thumbHash?: string,
},
options?: ?CallServerEndpointOptions,
): Promise<{
...UploadMultimediaResult,
+blobHolder: string,
}> {
const blobHolder = uuid.v4();
const blobHash = toBase64URL(input.blobHash);

// 1. Assign new holder for blob with given blobHash
let blobAlreadyExists: boolean;
try {
const assignHolderEndpoint = blobService.httpEndpoints.ASSIGN_HOLDER;
const assignHolderResponse = await fetch(
makeBlobServiceEndpointURL(assignHolderEndpoint),
{
method: assignHolderEndpoint.method,
body: JSON.stringify({
holder: blobHolder,
blob_hash: blobHash,
}),
headers: {
'content-type': 'application/json',
},
},
);

handleHTTPResponseError(assignHolderResponse);

const { data_exists: dataExistsResponse } =
await assignHolderResponse.json();
blobAlreadyExists = dataExistsResponse;
} catch (e) {
throw new Error(
`Failed to assign holder: ${
getMessageForException(e) ?? 'unknown error'
}`,
);
}

// 2. Upload blob contents if blob doesn't exist
if (!blobAlreadyExists) {
const formData = new FormData();
formData.append('blob_hash', blobHash);
formData.append('blob_data', input.file);

const xhr = new XMLHttpRequest();
const uploadEndpoint = blobService.httpEndpoints.UPLOAD_BLOB;
xhr.open(
uploadEndpoint.method,
makeBlobServiceEndpointURL(uploadEndpoint),
);
if (options?.timeout) {
xhr.timeout = options.timeout;
}
if (options && options.onProgress) {
const { onProgress } = options;
xhr.upload.onprogress = _throttle(
({ loaded, total }) => onProgress(loaded / total),
50,
);
}

let failed = false;
const responsePromise = new Promise((resolve, reject) => {
xhr.onload = () => {
if (failed) {
return;
}
resolve();
};
xhr.onabort = () => {
failed = true;
reject(new Error('request aborted'));
};
xhr.onerror = event => {
failed = true;
reject(event);
};
if (options && options.timeout) {
xhr.ontimeout = event => {
failed = true;
reject(event);
};
}
if (options && options.abortHandler) {
options.abortHandler(() => {
failed = true;
reject(new Error('request aborted'));
xhr.abort();
});
}
});

if (!failed) {
xhr.send(formData);
}
await responsePromise;
}

// 3. Send upload metadata to the keyserver, return response
const result = await this.props.uploadMediaMetadata({
...input.dimensions,
loop: input.loop ?? false,
blobHolder,
blobHash,
encryptionKey: input.encryptionKey,
mimeType: input.file.type,
filename: input.file.name,
thumbHash: input.thumbHash,
});
return { ...result, blobHolder };
}

handleAbortCallback(		handleAbortCallback(
threadID: string,		threadID: string,
localUploadID: string,		localUploadID: string,
abort: () => void,		abort: () => void,
) {		) {
this.setState(prevState => {		this.setState(prevState => {
const newThreadID = this.getRealizedOrPendingThreadID(threadID);		const newThreadID = this.getRealizedOrPendingThreadID(threadID);
const uploads = prevState.pendingUploads[newThreadID];		const uploads = prevState.pendingUploads[newThreadID];
▲ Show 20 Lines • Show All 533 Lines • ▼ Show 20 Lines	React.memo<BaseProps>(function ConnectedInputStateContainer(props) {
const threadStoreThreadInfos = useSelector(		const threadStoreThreadInfos = useSelector(
state => state.threadStore.threadInfos,		state => state.threadStore.threadInfos,
);		);
const pendingToRealizedThreadIDs = useSelector(state =>		const pendingToRealizedThreadIDs = useSelector(state =>
pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos),		pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos),
);		);
const calendarQuery = useSelector(nonThreadCalendarQuery);		const calendarQuery = useSelector(nonThreadCalendarQuery);
const callUploadMultimedia = useServerCall(uploadMultimedia);		const callUploadMultimedia = useServerCall(uploadMultimedia);
		const callBlobServiceUpload = useServerCall(blobServiceUpload);
const callUploadMediaMetadata = useServerCall(uploadMediaMetadata);		const callUploadMediaMetadata = useServerCall(uploadMediaMetadata);
const callDeleteUpload = useServerCall(deleteUpload);		const callDeleteUpload = useServerCall(deleteUpload);
const callSendMultimediaMessage = useServerCall(		const callSendMultimediaMessage = useServerCall(
legacySendMultimediaMessage,		legacySendMultimediaMessage,
);		);
const callSendTextMessage = useServerCall(sendTextMessage);		const callSendTextMessage = useServerCall(sendTextMessage);
const callNewThread = useServerCall(newThread);		const callNewThread = useServerCall(newThread);
const dispatch = useDispatch();		const dispatch = useDispatch();
Show All 24 Lines	return (
drafts={drafts}		drafts={drafts}
viewerID={viewerID}		viewerID={viewerID}
messageStoreMessages={messageStoreMessages}		messageStoreMessages={messageStoreMessages}
threadStoreThreadInfos={threadStoreThreadInfos}		threadStoreThreadInfos={threadStoreThreadInfos}
pendingRealizedThreadIDs={pendingToRealizedThreadIDs}		pendingRealizedThreadIDs={pendingToRealizedThreadIDs}
calendarQuery={calendarQuery}		calendarQuery={calendarQuery}
uploadMultimedia={callUploadMultimedia}		uploadMultimedia={callUploadMultimedia}
uploadMediaMetadata={callUploadMediaMetadata}		uploadMediaMetadata={callUploadMediaMetadata}
		blobServiceUpload={callBlobServiceUpload}
deleteUpload={callDeleteUpload}		deleteUpload={callDeleteUpload}
sendMultimediaMessage={callSendMultimediaMessage}		sendMultimediaMessage={callSendMultimediaMessage}
sendTextMessage={callSendTextMessage}		sendTextMessage={callSendTextMessage}
newThread={callNewThread}		newThread={callNewThread}
dispatch={dispatch}		dispatch={dispatch}
dispatchActionPromise={dispatchActionPromise}		dispatchActionPromise={dispatchActionPromise}
pushModal={modalContext.pushModal}		pushModal={modalContext.pushModal}
sendCallbacks={sendCallbacks}		sendCallbacks={sendCallbacks}
registerSendCallback={registerSendCallback}		registerSendCallback={registerSendCallback}
unregisterSendCallback={unregisterSendCallback}		unregisterSendCallback={unregisterSendCallback}
textMessageCreationSideEffectsFunc={textMessageCreationSideEffectsFunc}		textMessageCreationSideEffectsFunc={textMessageCreationSideEffectsFunc}
/>		/>
);		);
});		});

export default ConnectedInputStateContainer;		export default ConnectedInputStateContainer;

[web] Introduce user list modalClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 11501

web/settings/relationship/user-list-modal.react.js

[web] Introduce user list modal
ClosedPublic
Actions

Revision Contents
Changeset List