Paths

Table of Contentst

-
lib/components/
-
components/
-
modal-overlay.react.js
-
web/chat/
-
chat/
-
edit-message-provider.js

[web] Disabled auto focus on overlay when entering edit mode
AbandonedPublic
Actions

Authored by • kuba on May 16 2023, 5:45 AM.

Details

Reviewers

michal
inka

Summary

We want to focus in the textarea instead of the modal. I disabled auto focusing on modal, when the modal is used for editing message.

Test Plan

Checked if after entering edit mode the focus is set to the textarea.

Diff Detail

Repository

rCOMM Comm

Branch

kuba/message-editing-web

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

• kuba created this revision.May 16 2023, 5:45 AM

Herald added subscribers: atul, tomek, ashoat. · View Herald TranscriptMay 16 2023, 5:45 AM

• kuba added a parent revision: D7837: [web] Added FocusTrap for modals.May 16 2023, 5:45 AM

Harbormaster completed remote builds in B19392: Diff 26530.May 16 2023, 6:03 AM

• kuba requested review of this revision.May 16 2023, 6:03 AM

• kuba added a child revision: D7849: [web] Prevent user from closing the tab with unsaved edits.May 17 2023, 3:23 AM

Rebase

Harbormaster completed remote builds in B19481: Diff 26646.May 18 2023, 8:39 AM

Why do we want to do that?

In D7838#235423, @inka wrote:

Why do we want to do that?

Ok, I don't think it is necessary now after I added FocusTrap. Canceling the diff.

Revision Contents
Changeset List

Path

Size

lib/

components/

modal-overlay.react.js

7 lines

web/

chat/

edit-message-provider.js

6 lines

Diff 26530

View Options

lib/components/modal-overlay.react.js

// @flow		// @flow

		import _keyBy from 'lodash/fp/keyBy.js';

import type { ClientDBMessageStoreOperation } from 'lib/ops/message-store-ops.js';		import type { ClientDBMessageStoreOperation } from 'lib/ops/message-store-ops.js';
		import type { ClientDBThreadStoreOperation } from 'lib/ops/thread-store-ops.js';
import type {		import type {
RawMessageInfo,		RawMessageInfo,
ClientDBMessageInfo,		ClientDBMessageInfo,
ClientDBThreadMessageInfo,		ClientDBThreadMessageInfo,
} from 'lib/types/message-types.js';		} from 'lib/types/message-types.js';
		import type {
		ClientDBThreadInfo,
		RawThreadInfos,
		} from 'lib/types/thread-types.js';
import {		import {
translateClientDBMessageInfoToRawMessageInfo,		translateClientDBMessageInfoToRawMessageInfo,
translateRawMessageInfoToClientDBMessageInfo,		translateRawMessageInfoToClientDBMessageInfo,
translateClientDBThreadMessageInfos,		translateClientDBThreadMessageInfos,
translateThreadMessageInfoToClientDBThreadMessageInfo,		translateThreadMessageInfoToClientDBThreadMessageInfo,
type TranslatedThreadMessageInfos,		type TranslatedThreadMessageInfos,
} from 'lib/utils/message-ops-utils.js';		} from 'lib/utils/message-ops-utils.js';
import { entries } from 'lib/utils/objects.js';		import { entries, values } from 'lib/utils/objects.js';
		import {
		convertClientDBThreadInfoToRawThreadInfo,
		convertRawThreadInfoToClientDBThreadInfo,
		} from 'lib/utils/thread-ops-utils.js';

		function createUpdateDBOpsForThreadStoreThreadInfos(
		clientDBThreadInfos: $ReadOnlyArray<ClientDBThreadInfo>,
		migrationFunc: RawThreadInfos => RawThreadInfos,
		): $ReadOnlyArray<ClientDBThreadStoreOperation> {
		// 1. Translate `ClientDBThreadInfo`s to `RawThreadInfo`s.
		const rawThreadInfos = clientDBThreadInfos.map(
		convertClientDBThreadInfoToRawThreadInfo,
		);

		// 2. Convert `RawThreadInfo`s to a map of `threadID` => `threadInfo`.
		const keyedRawThreadInfos = _keyBy('id')(rawThreadInfos);

		// 3. Apply `migrationFunc` to `ThreadInfo`s.
		const updatedKeyedRawThreadInfos = migrationFunc(keyedRawThreadInfos);

		// 4. Convert the updated `RawThreadInfos` back into an array.
		const updatedKeyedRawThreadInfosArray = values(updatedKeyedRawThreadInfos);

		// 5. Translate `RawThreadInfo`s back to `ClientDBThreadInfo`s.
		const updatedClientDBThreadInfos = updatedKeyedRawThreadInfosArray.map(
		convertRawThreadInfoToClientDBThreadInfo,
		);

		// 6. Construct `replace` `ClientDBThreadStoreOperation`s.
		const replaceThreadOperations = updatedClientDBThreadInfos.map(thread => ({
		type: 'replace',
		payload: thread,
		}));

		// 7. Prepend `replaceThreadOperations` with `remove_all` op and return.
		return [{ type: 'remove_all' }, ...replaceThreadOperations];
		}

function createUpdateDBOpsForMessageStoreMessages(		function createUpdateDBOpsForMessageStoreMessages(
clientDBMessageInfos: $ReadOnlyArray<ClientDBMessageInfo>,		clientDBMessageInfos: $ReadOnlyArray<ClientDBMessageInfo>,
migrationFunc: (		migrationFunc: (
$ReadOnlyArray<RawMessageInfo>,		$ReadOnlyArray<RawMessageInfo>,
) => $ReadOnlyArray<RawMessageInfo>,		) => $ReadOnlyArray<RawMessageInfo>,
): $ReadOnlyArray<ClientDBMessageStoreOperation> {		): $ReadOnlyArray<ClientDBMessageStoreOperation> {
const rawMessageInfos = clientDBMessageInfos.map(		const rawMessageInfos = clientDBMessageInfos.map(
Show All 39 Lines	return [
translateThreadMessageInfoToClientDBThreadMessageInfo(id, thread),		translateThreadMessageInfoToClientDBThreadMessageInfo(id, thread),
),		),
},		},
},		},
];		];
}		}

export {		export {
		createUpdateDBOpsForThreadStoreThreadInfos,
createUpdateDBOpsForMessageStoreMessages,		createUpdateDBOpsForMessageStoreMessages,
createUpdateDBOpsForMessageStoreThreads,		createUpdateDBOpsForMessageStoreThreads,
};		};