From b462b3c380258a9a300fce8709530541f2376d92 Mon Sep 17 00:00:00 2001 From: crupest Date: Tue, 12 Jan 2021 21:54:17 +0800 Subject: ... --- FrontEnd/src/app/services/DataHub2.ts | 60 ++++++++++++++++++++--------------- FrontEnd/src/app/services/timeline.ts | 19 +++++------ FrontEnd/src/app/services/user.ts | 14 ++++---- 3 files changed, 51 insertions(+), 42 deletions(-) (limited to 'FrontEnd/src/app/services') diff --git a/FrontEnd/src/app/services/DataHub2.ts b/FrontEnd/src/app/services/DataHub2.ts index 50ae919b..f0fb724b 100644 --- a/FrontEnd/src/app/services/DataHub2.ts +++ b/FrontEnd/src/app/services/DataHub2.ts @@ -32,6 +32,8 @@ export class DataLine2 { private _current: DataAndStatus | null = null; private _observers: Subscriber>[] = []; + private _syncPromise: Promise | null = null; + get currentData(): DataAndStatus | null { return this._current; } @@ -50,7 +52,7 @@ export class DataLine2 { } subscribe(subsriber: Subscriber>): void { - this.sync(); // TODO: Should I sync at this point or let the user sync explicitly. + void this.sync(); // TODO: Should I sync at this point or let the user sync explicitly. this._observers.push(subsriber); const { currentData } = this; if (currentData != null) { @@ -76,36 +78,44 @@ export class DataLine2 { }); } - sync(): void { - const { currentData } = this; - if (currentData != null && currentData.status === "syncing") return; - this.next({ data: currentData?.data ?? null, status: "syncing" }); - void this.config.getSavedData().then((savedData) => { - if (currentData == null && savedData != null) { - this.next({ data: savedData, status: "syncing" }); - } - return this.config.fetchData(savedData).then((data) => { - if (data == null) { - this.next({ - data: savedData, - status: "offline", - }); - } else { - return this.config.saveData(data).then(() => { - this.next({ data: data, status: "synced" }); - }); - } - }); + private syncWithAction(action: () => Promise): Promise { + if (this._syncPromise != null) return this._syncPromise; + this._syncPromise = action().then(() => { + this._syncPromise = null; }); + return this._syncPromise; + } + + sync(): Promise { + return this.syncWithAction(this.doSync.bind(this)); } - save(data: TData): void { + private async doSync(): Promise { const { currentData } = this; - if (currentData != null && currentData.status === "syncing") return; this.next({ data: currentData?.data ?? null, status: "syncing" }); - void this.config.saveData(data).then(() => { + const savedData = await this.config.getSavedData(); + if (currentData == null && savedData != null) { + this.next({ data: savedData, status: "syncing" }); + } + const data = await this.config.fetchData(savedData); + if (data == null) { + this.next({ + data: savedData, + status: "offline", + }); + } else { + await this.config.saveData(data); this.next({ data: data, status: "synced" }); - }); + } + } + + save(data: TData): Promise { + return this.syncWithAction(this.doSave.bind(this, data)); + } + + private async doSave(data: TData): Promise { + await this.config.saveData(data); + this.next({ data: data, status: "synced" }); } getSavedData(): Promise { diff --git a/FrontEnd/src/app/services/timeline.ts b/FrontEnd/src/app/services/timeline.ts index 8bc1d40b..7d239fbf 100644 --- a/FrontEnd/src/app/services/timeline.ts +++ b/FrontEnd/src/app/services/timeline.ts @@ -104,8 +104,9 @@ export class TimelineService { saveData: async (timelineName, data) => { if (data === "notexist") return; - userInfoService.saveUser(data.owner); - userInfoService.saveUsers(data.members); + // TODO: Avoid save same user. + void userInfoService.saveUser(data.owner); + void userInfoService.saveUsers(data.members); await dataStorage.setItem( this.generateTimelineDataStorageKey(timelineName), @@ -157,8 +158,8 @@ export class TimelineService { }, }); - syncTimeline(timelineName: string): void { - this.timelineHub.getLine(timelineName).sync(); + syncTimeline(timelineName: string): Promise { + return this.timelineHub.getLine(timelineName).sync(); } createTimeline(timelineName: string): Observable { @@ -222,7 +223,7 @@ export class TimelineService { }; data.posts.forEach((p) => { - userInfoService.saveUser(p.author); + void userInfoService.saveUser(p.author); }); await dataStorage.setItem( @@ -342,8 +343,8 @@ export class TimelineService { }, }); - syncPosts(timelineName: string): void { - this.postsHub.getLine(timelineName).sync(); + syncPosts(timelineName: string): Promise { + return this.postsHub.getLine(timelineName).sync(); } createPost( @@ -354,7 +355,7 @@ export class TimelineService { getHttpTimelineClient() .postPost(timelineName, request) .then(() => { - this.syncPosts(timelineName); + void this.syncPosts(timelineName); }) ); } @@ -364,7 +365,7 @@ export class TimelineService { getHttpTimelineClient() .deletePost(timelineName, postId) .then(() => { - this.syncPosts(timelineName); + void this.syncPosts(timelineName); }) ); } diff --git a/FrontEnd/src/app/services/user.ts b/FrontEnd/src/app/services/user.ts index 5c4e3ae0..611a86ae 100644 --- a/FrontEnd/src/app/services/user.ts +++ b/FrontEnd/src/app/services/user.ts @@ -248,12 +248,12 @@ export function checkLogin(): AuthUser { export class UserNotExistError extends Error {} export class UserInfoService { - saveUser(user: HttpUser): void { - this.userHub.getLine(user.username).save(user); + saveUser(user: HttpUser): Promise { + return this.userHub.getLine(user.username).save(user); } - saveUsers(users: HttpUser[]): void { - return users.forEach((user) => this.saveUser(user)); + saveUsers(users: HttpUser[]): Promise { + return Promise.all(users.map((user) => this.saveUser(user))).then(); } async getCachedUser(username: string): Promise { @@ -351,15 +351,13 @@ export class UserInfoService { async setAvatar(username: string, blob: Blob): Promise { const etag = await getHttpUserClient().putAvatar(username, blob); - this.avatarHub.getLine(username).save({ data: blob, etag }); + await this.avatarHub.getLine(username).save({ data: blob, etag }); } async setNickname(username: string, nickname: string): Promise { return getHttpUserClient() .patch(username, { nickname }) - .then((user) => { - this.saveUser(user); - }); + .then((user) => this.saveUser(user)); } } -- cgit v1.2.3 From 2bb2377601c44ab406fade8e7bfdc888900abe7f Mon Sep 17 00:00:00 2001 From: crupest Date: Tue, 12 Jan 2021 22:01:51 +0800 Subject: ... --- FrontEnd/src/app/services/timeline.ts | 15 ++++++-------- .../views/timeline-common/TimelinePageTemplate.tsx | 10 ++-------- .../TimelinePropertyChangeDialog.tsx | 23 ++++++++++------------ 3 files changed, 18 insertions(+), 30 deletions(-) (limited to 'FrontEnd/src/app/services') diff --git a/FrontEnd/src/app/services/timeline.ts b/FrontEnd/src/app/services/timeline.ts index 7d239fbf..4e2530cc 100644 --- a/FrontEnd/src/app/services/timeline.ts +++ b/FrontEnd/src/app/services/timeline.ts @@ -175,15 +175,12 @@ export class TimelineService { changeTimelineProperty( timelineName: string, req: TimelineChangePropertyRequest - ): Observable { - return from( - getHttpTimelineClient() - .patchTimeline(timelineName, req) - .then((timeline) => { - void this.syncTimeline(timelineName); - return timeline; - }) - ); + ): Promise { + return getHttpTimelineClient() + .patchTimeline(timelineName, req) + .then(() => { + void this.syncTimeline(timelineName); + }); } deleteTimeline(timelineName: string): Observable { diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx index e4d414b9..8422077a 100644 --- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx +++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx @@ -173,14 +173,8 @@ export default function TimelinePageTemplate( { - return service.changeTimelineProperty(name, req).toPromise().then(); - }} + timeline={timeline} + onProcess={(req) => service.changeTimelineProperty(name, req)} /> ); } else if (dialog === "member") { diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx index aae227e6..ab3285f5 100644 --- a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx +++ b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx @@ -4,20 +4,15 @@ import { TimelineVisibility, kTimelineVisibilities, TimelineChangePropertyRequest, + TimelineInfo, } from "@/services/timeline"; import OperationDialog from "../common/OperationDialog"; -export interface TimelinePropertyInfo { - title: string; - visibility: TimelineVisibility; - description: string; -} - export interface TimelinePropertyChangeDialogProps { open: boolean; close: () => void; - oldInfo: TimelinePropertyInfo; + timeline: TimelineInfo; onProcess: (request: TimelineChangePropertyRequest) => Promise; } @@ -30,6 +25,8 @@ const labelMap: { [key in TimelineVisibility]: string } = { const TimelinePropertyChangeDialog: React.FC = ( props ) => { + const { timeline } = props; + return ( { type: "text", label: "timeline.dialogChangeProperty.titleField", - initValue: props.oldInfo.title, + initValue: timeline.title, }, { type: "select", @@ -46,25 +43,25 @@ const TimelinePropertyChangeDialog: React.FC label: labelMap[v], value: v, })), - initValue: props.oldInfo.visibility, + initValue: timeline.visibility, }, { type: "text", label: "timeline.dialogChangeProperty.description", - initValue: props.oldInfo.description, + initValue: timeline.description, }, ]} open={props.open} close={props.close} onProcess={([newTitle, newVisibility, newDescription]) => { const req: TimelineChangePropertyRequest = {}; - if (newTitle !== props.oldInfo.title) { + if (newTitle !== timeline.title) { req.title = newTitle; } - if (newVisibility !== props.oldInfo.visibility) { + if (newVisibility !== timeline.visibility) { req.visibility = newVisibility as TimelineVisibility; } - if (newDescription !== props.oldInfo.description) { + if (newDescription !== timeline.description) { req.description = newDescription; } return props.onProcess(req); -- cgit v1.2.3 From 36515dde9ddaec074b68492a6e220bc4ed3d70af Mon Sep 17 00:00:00 2001 From: crupest Date: Tue, 12 Jan 2021 22:09:34 +0800 Subject: ... --- FrontEnd/src/app/services/timeline.ts | 50 +++++++++++++------- .../views/timeline-common/TimelinePageTemplate.tsx | 54 +++++++--------------- 2 files changed, 50 insertions(+), 54 deletions(-) (limited to 'FrontEnd/src/app/services') diff --git a/FrontEnd/src/app/services/timeline.ts b/FrontEnd/src/app/services/timeline.ts index 4e2530cc..46671ea1 100644 --- a/FrontEnd/src/app/services/timeline.ts +++ b/FrontEnd/src/app/services/timeline.ts @@ -26,6 +26,8 @@ export type { TimelineVisibility } from "@/http/timeline"; import { dataStorage } from "./common"; import { userInfoService, AuthUser } from "./user"; import { DataAndStatus, DataHub2 } from "./DataHub2"; +import { getHttpBookmarkClient } from "@/http/bookmark"; +import { getHttpHighlightClient } from "@/http/highlight"; export type TimelineInfo = HttpTimelineInfo; export type TimelineChangePropertyRequest = HttpTimelinePatchRequest; @@ -347,24 +349,20 @@ export class TimelineService { createPost( timelineName: string, request: TimelineCreatePostRequest - ): Observable { - return from( - getHttpTimelineClient() - .postPost(timelineName, request) - .then(() => { - void this.syncPosts(timelineName); - }) - ); + ): Promise { + return getHttpTimelineClient() + .postPost(timelineName, request) + .then(() => { + void this.syncPosts(timelineName); + }); } - deletePost(timelineName: string, postId: number): Observable { - return from( - getHttpTimelineClient() - .deletePost(timelineName, postId) - .then(() => { - void this.syncPosts(timelineName); - }) - ); + deletePost(timelineName: string, postId: number): Promise { + return getHttpTimelineClient() + .deletePost(timelineName, postId) + .then(() => { + void this.syncPosts(timelineName); + }); } isMemberOf(username: string, timeline: TimelineInfo): boolean { @@ -433,6 +431,26 @@ export class TimelineService { user.username === post.author.username) ); } + + setHighlight(timelineName: string, highlight: boolean): Promise { + const client = getHttpHighlightClient(); + const promise = highlight + ? client.put(timelineName) + : client.delete(timelineName); + return promise.then(() => { + void timelineService.syncTimeline(timelineName); + }); + } + + setBookmark(timelineName: string, bookmark: boolean): Promise { + const client = getHttpBookmarkClient(); + const promise = bookmark + ? client.put(timelineName) + : client.delete(timelineName); + return promise.then(() => { + void timelineService.syncTimeline(timelineName); + }); + } } export const timelineService = new TimelineService(); diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx index 8422077a..5c87756c 100644 --- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx +++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx @@ -5,8 +5,6 @@ import { UiLogicError } from "@/common"; import { pushAlert } from "@/services/alert"; import { useUser } from "@/services/user"; import { timelineService, usePosts, useTimeline } from "@/services/timeline"; -import { getHttpBookmarkClient } from "@/http/bookmark"; -import { getHttpHighlightClient } from "@/http/highlight"; import { TimelineMemberDialog } from "./TimelineMember"; import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog"; @@ -66,13 +64,11 @@ export default function TimelinePageTemplate( ...post, onDelete: service.hasModifyPostPermission(user, timeline, post) ? () => { - service.deletePost(name, post.id).subscribe({ - error: () => { - pushAlert({ - type: "danger", - message: t("timeline.deletePostFailed"), - }); - }, + service.deletePost(name, post.id).catch(() => { + pushAlert({ + type: "danger", + message: t("timeline.deletePostFailed"), + }); }); } : undefined, @@ -82,9 +78,7 @@ export default function TimelinePageTemplate( const operations: TimelinePageTemplateData["operations"] = { onPost: service.hasPostPermission(user, timeline) - ? (req) => { - return service.createPost(name, req).toPromise().then(); - } + ? (req) => service.createPost(name, req) : undefined, onManage: service.hasManagePermission(user, timeline) ? (item) => { @@ -99,53 +93,37 @@ export default function TimelinePageTemplate( onBookmark: user != null ? () => { - const { isBookmark } = timeline; - const client = getHttpBookmarkClient(); - const promise = isBookmark - ? client.delete(name) - : client.put(name); - promise.then( - () => { - void timelineService.syncTimeline(name); - }, - () => { + service + .setBookmark(timeline.name, !timeline.isBookmark) + .catch(() => { pushAlert({ message: { type: "i18n", - key: isBookmark + key: timeline.isBookmark ? "timeline.removeBookmarkFail" : "timeline.addBookmarkFail", }, type: "danger", }); - } - ); + }); } : undefined, onHighlight: user != null && user.hasHighlightTimelineAdministrationPermission ? () => { - const { isHighlight } = timeline; - const client = getHttpHighlightClient(); - const promise = isHighlight - ? client.delete(name) - : client.put(name); - promise.then( - () => { - void timelineService.syncTimeline(name); - }, - () => { + service + .setHighlight(timeline.name, !timeline.isHighlight) + .catch(() => { pushAlert({ message: { type: "i18n", - key: isHighlight + key: timeline.isHighlight ? "timeline.removeHighlightFail" : "timeline.addHighlightFail", }, type: "danger", }); - } - ); + }); } : undefined, }; -- cgit v1.2.3