mirror of
https://github.com/vector-im/element-call.git
synced 2024-11-15 00:04:59 +08:00
169ccd9de5
As Element Call grows in complexity, it has become a pain point that our business logic remains so tightly coupled to the UI code. In particular, this has made testing difficult, and the complex semantics of React hooks are not a great match for arbitrary business logic. Here, I show the beginnings of what it would look like for us to adopt the MVVM pattern. I've created a CallViewModel and TileViewModel that expose their state to the UI as rxjs Observables, as well as a couple of helper functions for consuming view models in React code. This should contain no user-visible changes, but we need to watch out for regressions particularly around focus switching and promotion of speakers, because this was the logic I chose to refactor first.
57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
const COPYRIGHT_HEADER = `/*
|
|
Copyright %%CURRENT_YEAR%% New Vector Ltd
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
`;
|
|
|
|
module.exports = {
|
|
plugins: ["matrix-org"],
|
|
extends: [
|
|
"plugin:matrix-org/react",
|
|
"plugin:matrix-org/a11y",
|
|
"plugin:matrix-org/typescript",
|
|
"prettier",
|
|
],
|
|
parserOptions: {
|
|
ecmaVersion: "latest",
|
|
sourceType: "module",
|
|
project: ["./tsconfig.json"],
|
|
},
|
|
env: {
|
|
browser: true,
|
|
node: true,
|
|
},
|
|
rules: {
|
|
"matrix-org/require-copyright-header": ["error", COPYRIGHT_HEADER],
|
|
"jsx-a11y/media-has-caption": "off",
|
|
// We should use the js-sdk logger, never console directly.
|
|
"no-console": ["error"],
|
|
"no-restricted-imports": [
|
|
"error",
|
|
{
|
|
name: "@react-rxjs/core",
|
|
importNames: ["Subscribe", "RemoveSubscribe"],
|
|
message:
|
|
"These components are easy to misuse, please use the 'subscribe' component wrapper instead",
|
|
},
|
|
],
|
|
},
|
|
settings: {
|
|
react: {
|
|
version: "detect",
|
|
},
|
|
},
|
|
};
|