Convert SimpleTile to typescript

src/domain/session/room/timeline/tiles/BaseMessageTile.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {SimpleTile} from "./SimpleTile.js";
+import {SimpleTile} from "./SimpleTile";
 import {ReactionsViewModel} from "../ReactionsViewModel.js";
 import {getIdentifierColorNumber, avatarInitials, getAvatarHttpUrl} from "../../../../avatar";
 

src/domain/session/room/timeline/tiles/CallTile.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {SimpleTile} from "./SimpleTile.js";
+import {SimpleTile} from "./SimpleTile";
 import {ViewModel} from "../../../../ViewModel";
 import {LocalMedia} from "../../../../../matrix/calls/LocalMedia";
 import {CallType} from "../../../../../matrix/calls/callEventTypes";

src/domain/session/room/timeline/tiles/DateTile.ts

@@ -14,12 +14,12 @@ import type {Options} from "../../../../ViewModel";
  *    a pending event is removed on remote echo.
  * */
 
-export class DateTile extends ViewModel implements ITile<BaseEventEntry> {
+export class DateTile<T extends object = SegmentType> extends ViewModel<T, Options<T>> implements ITile<BaseEventEntry> {
     private _emitUpdate?: EmitUpdateFn;
     private _dateString?: string;
     private _machineReadableString?: string;
     
-    constructor(private _firstTileInDay: ITile<BaseEventEntry>, options: Options) {
+    constructor(private _firstTileInDay: ITile<BaseEventEntry>, options: Options<T>) {
         super(options);
     }
 
@@ -164,15 +164,18 @@ export class DateTile extends ViewModel implements ITile<BaseEventEntry> {
 
 import { EventEntry } from "../../../../../matrix/room/timeline/entries/EventEntry.js";
 import { SimpleTile } from "./SimpleTile";
+import { SegmentType } from "../../../../navigation";
 
 export function tests() {
     return {
         "date tile sorts before reference tile": assert => {
+            //@ts-ignore
             const a = new SimpleTile(new EventEntry({
                 event: {},
                 eventIndex: 2,
                 fragmentId: 1
             }, undefined), {});
+            //@ts-ignore
             const b = new SimpleTile(new EventEntry({
                 event: {},
                 eventIndex: 3,

src/domain/session/room/timeline/tiles/EncryptionEnabledTile.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {SimpleTile} from "./SimpleTile.js";
+import {SimpleTile} from "./SimpleTile";
 
 export class EncryptionEnabledTile extends SimpleTile {
     get shape() {

src/domain/session/room/timeline/tiles/GapTile.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {SimpleTile} from "./SimpleTile.js";
+import {SimpleTile} from "./SimpleTile";
 import {UpdateAction} from "../UpdateAction.js";
 import {ConnectionError} from "../../../../../matrix/error.js";
 import {ConnectionStatus} from "../../../../../matrix/net/Reconnector";

src/domain/session/room/timeline/tiles/RoomMemberTile.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {SimpleTile} from "./SimpleTile.js";
+import {SimpleTile} from "./SimpleTile";
 
 export class RoomMemberTile extends SimpleTile {
 

src/domain/session/room/timeline/tiles/RoomNameTile.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {SimpleTile} from "./SimpleTile.js";
+import {SimpleTile} from "./SimpleTile";
 
 export class RoomNameTile extends SimpleTile {
     

src/domain/session/room/timeline/tiles/SimpleTile.ts

@@ -16,24 +16,38 @@ limitations under the License.
 
 import {UpdateAction} from "../UpdateAction.js";
 import {ErrorReportViewModel} from "../../../../ErrorReportViewModel";
-import {TileShape} from "./ITile";
+import {ITile, TileShape} from "./ITile";
 import {SendStatus} from "../../../../../matrix/room/sending/PendingEvent.js";
 import {DateTile} from "./DateTile";
+import {Options as BaseOptions} from "../../../../ErrorReportViewModel";
+import {EventEntry} from "../../../../../matrix/room/timeline/entries/EventEntry.js";
+import type {RoomViewModel} from "../../RoomViewModel.js";
+import type {Timeline} from "../../../../../matrix/room/timeline/Timeline.js";
+import type {SegmentType} from "../../../../navigation/index.js";
 
-export class SimpleTile extends ErrorReportViewModel {
-    constructor(entry, options) {
+export type Options<T extends object = SegmentType> = {
+    roomVM: RoomViewModel; 
+    timeline: Timeline;
+} & BaseOptions<T>;
+
+type EmitUpdate<T extends object = SegmentType> = (tile: SimpleTile<T>, params: any) => void; 
+
+
+export abstract class SimpleTile<T extends object = SegmentType> extends ErrorReportViewModel<T, Options<T>> implements ITile {
+    private _entry: EventEntry;
+    private _date?: Date;
+    private _needsDateSeparator: boolean = false;
+    private _emitUpdate?: EmitUpdate<T>;
+    
+    constructor(entry: EventEntry, options: Options<T>) {
         super(options);
         this._entry = entry;
         this._date = this._entry.timestamp ? new Date(this._entry.timestamp) : undefined;
-        this._needsDateSeparator = false;
-        this._emitUpdate = undefined;
     }
     // view model props for all subclasses
     // hmmm, could also do instanceof ... ?
-    get shape() {
-        return null;
-        // "gap" | "message" | "image" | ... ?
-    }
+    // "gap" | "message" | "image" | ... ?
+    abstract get shape(): TileShape;
 
     // don't show display name / avatar
     // probably only for BaseMessageTiles of some sort?
@@ -49,7 +63,7 @@ export class SimpleTile extends ErrorReportViewModel {
         return new DateTile(this, this.childOptions({}));
     }
 
-    _updateDateSeparator(prev) {
+    _updateDateSeparator(prev: SimpleTile) {
         if (prev && prev._date && this._date) {
             this._needsDateSeparator = prev._date.getFullYear() !== this._date.getFullYear() ||
                 prev._date.getMonth() !== this._date.getMonth() ||
@@ -80,12 +94,12 @@ export class SimpleTile extends ErrorReportViewModel {
             !this._entry.pendingEvent.hasStartedSending;
     }
 
-    abortSending() {
-        this._entry.pendingEvent?.abort();
+    async abortSending(): Promise<void> {
+        await this._entry.pendingEvent?.abort();
     }
 
     // TilesCollection contract below
-    setUpdateEmit(emitUpdate) {
+    setUpdateEmit(emitUpdate?: EmitUpdate<T>) {
         this._emitUpdate = emitUpdate;
     }
 
@@ -114,7 +128,7 @@ export class SimpleTile extends ErrorReportViewModel {
         return false;
     }
 
-    compare(tile) {
+    compare(tile: SimpleTile<T>) {
         if (tile.comparisonIsNotCommutative) {
             return -tile.compare(this);
         } else {
@@ -122,7 +136,7 @@ export class SimpleTile extends ErrorReportViewModel {
         }
     }
 
-    compareEntry(entry) {
+    compareEntry(entry: EventEntry) {
         return this._entry.compare(entry);
     }
 
@@ -163,7 +177,7 @@ export class SimpleTile extends ErrorReportViewModel {
     notifyVisible() {}
 
     dispose() {
-        this.setUpdateEmit(null);
+        this.setUpdateEmit(undefined);
         super.dispose();
     }
     // TilesCollection contract above
@@ -173,11 +187,11 @@ export class SimpleTile extends ErrorReportViewModel {
     }
 
     get _roomVM() {
-        return this._options.roomVM;
+        return this.options.roomVM;
     }
 
     get _timeline() {
-        return this._options.timeline;
+        return this.options.timeline;
     }
 
     get _powerLevels() {
@@ -185,7 +199,7 @@ export class SimpleTile extends ErrorReportViewModel {
     }
 
     get _ownMember() {
-        return this._options.timeline.me;
+        return this.options.timeline.me;
     }
 
     get displayName() {
@@ -197,7 +211,6 @@ export class SimpleTile extends ErrorReportViewModel {
     }
 }
 
-import { EventEntry } from "../../../../../matrix/room/timeline/entries/EventEntry.js";
 
 export function tests() {
     return {
@@ -216,7 +229,9 @@ export function tests() {
                     content: {}
                 }
             }, undefined);
+            //@ts-ignore
             const fridayTile = new SimpleTile(fridayEntry, {});
+            //@ts-ignore
             const thursdayTile = new SimpleTile(thursdayEntry, {});
             assert.equal(fridayTile.needsDateSeparator, false);
             fridayTile.updatePreviousSibling(thursdayTile);
@@ -237,7 +252,9 @@ export function tests() {
                     content: {}
                 }
             }, undefined);
+            //@ts-ignore
             const fridayTile = new SimpleTile(fridayEntry, {});
+            //@ts-ignore
             const thursdayTile = new SimpleTile(thursdayEntry, {});
             assert.equal(fridayTile.needsDateSeparator, false);
             fridayTile.updatePreviousSibling(thursdayTile);
@@ -251,6 +268,7 @@ export function tests() {
                     content: {}
                 }
             }, undefined);
+            //@ts-ignore
             const fridayTile = new SimpleTile(fridayEntry, {});
             assert.equal(fridayTile.needsDateSeparator, false);
             fridayTile.updatePreviousSibling(undefined);

src/lib.ts

@@ -53,7 +53,7 @@ export {RoomMemberTile} from "./domain/session/room/timeline/tiles/RoomMemberTil
 export {EncryptedEventTile} from "./domain/session/room/timeline/tiles/EncryptedEventTile.js";
 export {EncryptionEnabledTile} from "./domain/session/room/timeline/tiles/EncryptionEnabledTile.js";
 export {MissingAttachmentTile} from "./domain/session/room/timeline/tiles/MissingAttachmentTile.js";
-export {SimpleTile} from "./domain/session/room/timeline/tiles/SimpleTile.js";
+export {SimpleTile} from "./domain/session/room/timeline/tiles/SimpleTile";
 
 export {TimelineView} from "./platform/web/ui/session/room/TimelineView";
 export {viewClassForTile} from "./platform/web/ui/session/room/common";

src/platform/web/ui/session/room/TimelineView.ts

@@ -15,31 +15,28 @@ limitations under the License.
 */
 
 import {ListView} from "../../general/ListView";
-import type {IView} from "../../general/types";
 import {TemplateView, Builder} from "../../general/TemplateView";
 import {IObservableValue} from "../../general/BaseUpdateView";
-import {MissingAttachmentView} from "./timeline/MissingAttachmentView.js";
-import {AnnouncementView} from "./timeline/AnnouncementView.js";
-import {RedactedView} from "./timeline/RedactedView.js";
-import {SimpleTile} from "../../../../../domain/session/room/timeline/tiles/SimpleTile.js";
 import {BaseObservableList as ObservableList} from "../../../../../observable/list/BaseObservableList";
+import type {IView} from "../../general/types";
+import type {ITile} from "../../../../../domain/session/room/timeline/tiles/ITile";
 
 export interface TileView extends IView {
-    readonly value: SimpleTile;
+    readonly value: ITile;
     onClick(event: UIEvent);
 } 
 export type TileViewConstructor = new (
-    tile: SimpleTile,
+    tile: ITile,
     viewClassForTile: ViewClassForEntryFn,
     renderFlags?: { reply?: boolean, interactive?: boolean }
 ) => TileView;
-export type ViewClassForEntryFn = (tile: SimpleTile) => TileViewConstructor;
+export type ViewClassForEntryFn = (tile: ITile) => TileViewConstructor;
 
 //import {TimelineViewModel} from "../../../../../domain/session/room/timeline/TimelineViewModel.js";
 export interface TimelineViewModel extends IObservableValue {
     showJumpDown: boolean;
-    tiles: ObservableList<SimpleTile>;
-    setVisibleTileRange(start?: SimpleTile, end?: SimpleTile);
+    tiles: ObservableList<ITile>;
+    setVisibleTileRange(start?: ITile, end?: ITile);
 }
 
 function bottom(node: HTMLElement): number {
@@ -184,11 +181,11 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
     }
 }
 
-class TilesListView extends ListView<SimpleTile, TileView> {
+class TilesListView extends ListView<ITile, TileView> {
 
     private onChanged: () => void;
 
-    constructor(tiles: ObservableList<SimpleTile>, onChanged: () => void, private readonly viewClassForTile: ViewClassForEntryFn) {
+    constructor(tiles: ObservableList<ITile>, onChanged: () => void, private readonly viewClassForTile: ViewClassForEntryFn) {
         super({
             list: tiles,
             onItemClick: (tileView, evt) => tileView.onClick(evt),
@@ -204,7 +201,7 @@ class TilesListView extends ListView<SimpleTile, TileView> {
         this.onChanged();
     }
 
-    onUpdate(index: number, value: SimpleTile, param: any) {
+    onUpdate(index: number, value: ITile, param: any) {
         if (param === "shape") {
             const ExpectedClass = this.viewClassForTile(value);
             const child = this.getChildInstanceByIndex(index);
@@ -220,17 +217,17 @@ class TilesListView extends ListView<SimpleTile, TileView> {
         this.onChanged();
     }
 
-    onAdd(idx: number, value: SimpleTile) {
+    onAdd(idx: number, value: ITile) {
         super.onAdd(idx, value);
         this.onChanged();
     }
 
-    onRemove(idx: number, value: SimpleTile) {
+    onRemove(idx: number, value: ITile) {
         super.onRemove(idx, value);
         this.onChanged();
     }
 
-    onMove(fromIdx: number, toIdx: number, value: SimpleTile) {
+    onMove(fromIdx: number, toIdx: number, value: ITile) {
         super.onMove(fromIdx, toIdx, value);
         this.onChanged();
     }

src/platform/web/ui/session/room/timeline/DateHeaderView.ts

@@ -15,15 +15,9 @@ limitations under the License.
 */
 
 import {TemplateView} from "../../../general/TemplateView";
-import {spinner} from "../../../common.js";
 import type {DateTile} from "../../../../../../domain/session/room/timeline/tiles/DateTile";
 
 export class DateHeaderView extends TemplateView<DateTile> {
-    // ignore other argument
-    constructor(vm) {
-        super(vm);
-    }
-
     render(t, vm) {
         return t.h2({className: "DateHeader"}, t.time({dateTime: vm.machineReadableDate}, vm.relativeDate));
     }