mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 11:35:04 +01:00
adopt errorViewModel in GapTile to report errors
This commit is contained in:
parent
8cccc1dfaf
commit
7777ef83dd
@ -24,47 +24,40 @@ export class GapTile extends SimpleTile {
|
|||||||
constructor(entry, options) {
|
constructor(entry, options) {
|
||||||
super(entry, options);
|
super(entry, options);
|
||||||
this._loading = false;
|
this._loading = false;
|
||||||
this._error = null;
|
this._waitingForConnection = false;
|
||||||
this._isAtTop = true;
|
this._isAtTop = true;
|
||||||
this._siblingChanged = false;
|
this._siblingChanged = false;
|
||||||
this._showSpinner = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get needsDateSeparator() {
|
get needsDateSeparator() {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
async fill() {
|
async fill(isRetrying = false) {
|
||||||
if (!this._loading && !this._entry.edgeReached) {
|
if (!this._loading && !this._entry.edgeReached) {
|
||||||
this._loading = true;
|
this._loading = true;
|
||||||
this._error = null;
|
|
||||||
this._showSpinner = true;
|
|
||||||
this.emitChange("isLoading");
|
this.emitChange("isLoading");
|
||||||
try {
|
try {
|
||||||
await this._room.fillGap(this._entry, 10);
|
await this._room.fillGap(this._entry, 10);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(`room.fillGap(): ${err.message}:\n${err.stack}`);
|
|
||||||
this._error = err;
|
|
||||||
if (err instanceof ConnectionError) {
|
if (err instanceof ConnectionError) {
|
||||||
this.emitChange("error");
|
|
||||||
/*
|
|
||||||
We need to wait for reconnection here rather than in
|
|
||||||
notifyVisible() because when we return/throw here
|
|
||||||
this._loading is set to false and other queued invocations of
|
|
||||||
this method will succeed and attempt further room.fillGap() calls -
|
|
||||||
resulting in multiple error entries in logs and elsewhere!
|
|
||||||
*/
|
|
||||||
await this._waitForReconnection();
|
await this._waitForReconnection();
|
||||||
|
if (!isRetrying) {
|
||||||
|
// retry after the connection comes back
|
||||||
|
// if this wasn't already a retry after coming back online
|
||||||
|
return await this.fill(true);
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.reportError(err);
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
// rethrow so caller of this method
|
|
||||||
// knows not to keep calling this for now
|
|
||||||
throw err;
|
|
||||||
} finally {
|
} finally {
|
||||||
this._loading = false;
|
this._loading = false;
|
||||||
this._showSpinner = false;
|
|
||||||
this.emitChange("isLoading");
|
this.emitChange("isLoading");
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
@ -76,19 +69,7 @@ export class GapTile extends SimpleTile {
|
|||||||
let canFillMore;
|
let canFillMore;
|
||||||
this._siblingChanged = false;
|
this._siblingChanged = false;
|
||||||
do {
|
do {
|
||||||
try {
|
canFillMore = await this.fill();
|
||||||
canFillMore = await this.fill();
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
if (e instanceof ConnectionError) {
|
|
||||||
canFillMore = true;
|
|
||||||
// Don't increase depth because this gap fill was a noop
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
canFillMore = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
depth = depth + 1;
|
depth = depth + 1;
|
||||||
} while (depth < 10 && !this._siblingChanged && canFillMore && !this.isDisposed);
|
} while (depth < 10 && !this._siblingChanged && canFillMore && !this.isDisposed);
|
||||||
}
|
}
|
||||||
@ -124,7 +105,11 @@ export class GapTile extends SimpleTile {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async _waitForReconnection() {
|
async _waitForReconnection() {
|
||||||
|
this._waitingForConnection = true;
|
||||||
|
this.emitUpdate("status");
|
||||||
await this.options.client.reconnector.connectionStatus.waitFor(status => status === ConnectionStatus.Online).promise;
|
await this.options.client.reconnector.connectionStatus.waitFor(status => status === ConnectionStatus.Online).promise;
|
||||||
|
this._waitingForConnection = false;
|
||||||
|
this.emitUpdate("status");
|
||||||
}
|
}
|
||||||
|
|
||||||
get shape() {
|
get shape() {
|
||||||
@ -136,29 +121,19 @@ export class GapTile extends SimpleTile {
|
|||||||
}
|
}
|
||||||
|
|
||||||
get showSpinner() {
|
get showSpinner() {
|
||||||
return this._showSpinner;
|
return this.isLoading || this._waitingForConnection;
|
||||||
}
|
}
|
||||||
|
|
||||||
get error() {
|
get status() {
|
||||||
if (this._error) {
|
const dir = this._entry.prev_batch ? "previous" : "next";
|
||||||
if (this._error instanceof ConnectionError) {
|
if (this._waitingForConnection) {
|
||||||
return "Waiting for reconnection";
|
return "Waiting for connection…";
|
||||||
}
|
} else if (this.errorViewModel) {
|
||||||
const dir = this._entry.prev_batch ? "previous" : "next";
|
return `Could not load ${dir} messages`;
|
||||||
return `Could not load ${dir} messages: ${this._error.message}`;
|
} else if (this.isLoading) {
|
||||||
}
|
return "Loading more messages…";
|
||||||
return null;
|
} else {
|
||||||
}
|
return "Gave up loading more messages";
|
||||||
|
|
||||||
get currentAction() {
|
|
||||||
if (this.error) {
|
|
||||||
return this.error;
|
|
||||||
}
|
|
||||||
else if (this.isLoading) {
|
|
||||||
return "Loading";
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return "Not Loading";
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -4,9 +4,14 @@
|
|||||||
margin: 16px;
|
margin: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ErrorView_inline {
|
.ErrorView.ErrorView_inline {
|
||||||
color: var(--error-color);
|
color: var(--error-color);
|
||||||
margin: 4px;
|
margin: 4px 0;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ErrorView.ErrorView_inline > p {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ErrorView {
|
.ErrorView {
|
||||||
|
@ -411,7 +411,7 @@ only loads when the top comes into view*/
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.GapView > :not(:first-child) {
|
.GapView_container > :not(:first-child) {
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -52,11 +52,11 @@ limitations under the License.
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.GapView {
|
.GapView_container {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.GapView > :nth-child(2) {
|
.GapView_container > span {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -16,6 +16,7 @@ limitations under the License.
|
|||||||
|
|
||||||
import {TemplateView} from "../../../general/TemplateView";
|
import {TemplateView} from "../../../general/TemplateView";
|
||||||
import {spinner} from "../../../common.js";
|
import {spinner} from "../../../common.js";
|
||||||
|
import {ErrorView} from "../../../general/ErrorView";
|
||||||
|
|
||||||
export class GapView extends TemplateView {
|
export class GapView extends TemplateView {
|
||||||
// ignore other argument
|
// ignore other argument
|
||||||
@ -23,15 +24,20 @@ export class GapView extends TemplateView {
|
|||||||
super(vm);
|
super(vm);
|
||||||
}
|
}
|
||||||
|
|
||||||
render(t) {
|
render(t, vm) {
|
||||||
const className = {
|
const className = {
|
||||||
GapView: true,
|
GapView: true,
|
||||||
isLoading: vm => vm.isLoading,
|
isLoading: vm => vm.isLoading,
|
||||||
isAtTop: vm => vm.isAtTop,
|
isAtTop: vm => vm.isAtTop,
|
||||||
};
|
};
|
||||||
return t.li({ className }, [
|
return t.li({ className }, [
|
||||||
t.if(vm => vm.showSpinner, (t) => spinner(t)),
|
t.div({class: "GapView_container"}, [
|
||||||
t.span(vm => vm.currentAction)
|
t.if(vm => vm.showSpinner, (t) => spinner(t)),
|
||||||
|
t.span(vm => vm.status),
|
||||||
|
]),
|
||||||
|
t.if(vm => !!vm.errorViewModel, t => {
|
||||||
|
return t.view(new ErrorView(vm.errorViewModel, {inline: true}));
|
||||||
|
})
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user