4 files changed, 421 insertions, 57 deletions
diff --git a/Timeline/ClientApp/src/app/data/SubscriptionHub.ts b/Timeline/ClientApp/src/app/data/SubscriptionHub.ts
index 2bc6de56..406d293f 100644
--- a/Timeline/ClientApp/src/app/data/SubscriptionHub.ts
+++ b/Timeline/ClientApp/src/app/data/SubscriptionHub.ts
@@ -3,10 +3,11 @@
 // 2. We need a way to finalize the last object. For example, if it has an object url, we need to revoke it.
 // 3. Make api easier to use and write less boilerplate codes.
 //
+// Currently updator will wait for last update or creation to finish. So the old data passed to it will always be right. We may add feature for just cancel last one but not wait for it.
+//
 // There might be some bugs, especially memory leaks and in asynchronization codes.
 
 import * as rxjs from 'rxjs';
-import { filter } from 'rxjs/operators';
 
 export type Subscriber<TData> = (data: TData) => void;
 
@@ -23,25 +24,26 @@ class SubscriptionToken {
 }
 
 class SubscriptionLine<TData> {
-  private _lastDataPromise: Promise<void>;
-  private _dataSubject = new rxjs.BehaviorSubject<TData | undefined>(undefined);
-  private _data$: rxjs.Observable<TData> = this._dataSubject.pipe(
-    filter((d) => d !== undefined)
-  ) as rxjs.Observable<TData>;
+  private _lastDataPromise: Promise<TData>;
+  private _dataSubject: rxjs.BehaviorSubject<TData>;
   private _refCount = 0;
 
   constructor(
-    _creator: () => Promise<TData>,
-    private _destroyer: (data: TData) => void,
+    defaultValueProvider: () => TData,
+    setup: ((old: TData) => Promise<TData>) | undefined,
+    private _destroyer: ((data: TData) => void) | undefined,
     private _onZeroRef: (self: SubscriptionLine<TData>) => void
   ) {
-    this._lastDataPromise = _creator().then((data) => {
-      this._dataSubject.next(data);
-    });
+    const initValue = defaultValueProvider();
+    this._lastDataPromise = Promise.resolve(initValue);
+    this._dataSubject = new rxjs.BehaviorSubject<TData>(initValue);
+    if (setup != null) {
+      this.next(setup);
+    }
   }
 
   subscribe(subscriber: Subscriber<TData>): SubscriptionToken {
-    const subscription = this._data$.subscribe(subscriber);
+    const subscription = this._dataSubject.subscribe(subscriber);
     this._refCount += 1;
     return new SubscriptionToken(subscription);
   }
@@ -50,25 +52,26 @@ class SubscriptionLine<TData> {
     token._subscription.unsubscribe();
     this._refCount -= 1;
     if (this._refCount === 0) {
-      void this._lastDataPromise.then(() => {
-        const last = this._dataSubject.value;
-        if (last !== undefined) {
-          this._destroyer(last);
-        }
-      });
+      const { _destroyer: destroyer } = this;
+      if (destroyer != null) {
+        void this._lastDataPromise.then((data) => {
+          destroyer(data);
+        });
+      }
       this._onZeroRef(this);
     }
   }
 
-  next(updator: () => Promise<TData>): void {
+  next(updator: (old: TData) => Promise<TData>): void {
     this._lastDataPromise = this._lastDataPromise
-      .then(() => updator())
+      .then((old) => updator(old))
       .then((data) => {
         const last = this._dataSubject.value;
-        if (last !== undefined) {
+        if (this._destroyer != null) {
           this._destroyer(last);
         }
         this._dataSubject.next(data);
+        return data;
       });
   }
 }
@@ -79,10 +82,12 @@ export interface ISubscriptionHub<TKey, TData> {
 
 export class SubscriptionHub<TKey, TData>
   implements ISubscriptionHub<TKey, TData> {
+  // If setup is set, update is called with setup immediately after setting default value.
   constructor(
     public keyToString: (key: TKey) => string,
-    public creator: (key: TKey) => Promise<TData>,
-    public destroyer: (key: TKey, data: TData) => void
+    public defaultValueProvider: (key: TKey) => TData,
+    public setup?: (key: TKey) => Promise<TData>,
+    public destroyer?: (key: TKey, data: TData) => void
   ) {}
 
   private subscriptionLineMap = new Map<string, SubscriptionLine<TData>>();
@@ -92,11 +97,15 @@ export class SubscriptionHub<TKey, TData>
     const line = (() => {
       const savedLine = this.subscriptionLineMap.get(keyString);
       if (savedLine == null) {
+        const { setup, destroyer } = this;
         const newLine = new SubscriptionLine<TData>(
-          () => this.creator(key),
-          (data) => {
-            this.destroyer(key, data);
-          },
+          () => this.defaultValueProvider(key),
+          setup != null ? () => setup(key) : undefined,
+          destroyer != null
+            ? (data) => {
+                destroyer(key, data);
+              }
+            : undefined,
           () => {
             this.subscriptionLineMap.delete(keyString);
           }
@@ -115,11 +124,11 @@ export class SubscriptionHub<TKey, TData>
 
   // Old data is destroyed automatically.
   // updator is called only if there is subscription.
-  update(key: TKey, updator: (key: TKey) => Promise<TData>): void {
+  update(key: TKey, updator: (key: TKey, old: TData) => Promise<TData>): void {
     const keyString = this.keyToString(key);
     const line = this.subscriptionLineMap.get(keyString);
     if (line != null) {
-      line.next(() => updator(key));
+      line.next((old) => updator(key, old));
     }
   }
 }
diff --git a/Timeline/ClientApp/src/app/data/common.ts b/Timeline/ClientApp/src/app/data/common.ts
index 7f3f4e93..9f985ce6 100644
--- a/Timeline/ClientApp/src/app/data/common.ts
+++ b/Timeline/ClientApp/src/app/data/common.ts
@@ -1,4 +1,18 @@
+import localforage from 'localforage';
+
+export const dataStorage = localforage.createInstance({
+  name: 'data',
+  description: 'Database for offline data.',
+  driver: localforage.INDEXEDDB,
+});
+
 export interface BlobWithUrl {
   blob: Blob;
   url: string;
 }
+
+export class ForbiddenError extends Error {
+  constructor(message?: string) {
+    super(message);
+  }
+}
diff --git a/Timeline/ClientApp/src/app/data/timeline.ts b/Timeline/ClientApp/src/app/data/timeline.ts
index dde204be..84eb3764 100644
--- a/Timeline/ClientApp/src/app/data/timeline.ts
+++ b/Timeline/ClientApp/src/app/data/timeline.ts
@@ -2,12 +2,15 @@ import React from 'react';
 import XRegExp from 'xregexp';
 import { Observable, from } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { pull } from 'lodash';
 
-import { UserAuthInfo, checkLogin, userService } from './user';
+import { convertError } from '../utilities/rxjs';
 
-import { BlobWithUrl } from './common';
+import { BlobWithUrl, dataStorage, ForbiddenError } from './common';
 import { SubscriptionHub, ISubscriptionHub } from './SubscriptionHub';
 
+import { UserAuthInfo, checkLogin, userService } from './user';
+
 export { kTimelineVisibilities } from '../http/timeline';
 
 export type { TimelineVisibility } from '../http/timeline';
@@ -27,8 +30,9 @@ import {
   getHttpTimelineClient,
   HttpTimelineNotExistError,
   HttpTimelineNameConflictError,
+  HttpTimelineGenericPostInfo,
 } from '../http/timeline';
-import { convertError } from '../utilities/rxjs';
+import { BlobWithEtag, NotModified } from '../http/common';
 
 export type TimelineInfo = HttpTimelineInfo;
 export type TimelineChangePropertyRequest = HttpTimelinePatchRequest;
@@ -62,9 +66,36 @@ export interface PostKey {
   postId: number;
 }
 
+export interface TimelinePostListState {
+  state:
+    | 'loading' // Loading posts from cache. `posts` is empty array.
+    | 'forbid' // The list is forbidden to see.
+    | 'syncing' // Cache loaded and syncing now.
+    | 'synced' // Sync succeeded.
+    | 'offline'; // Sync failed and use cache.
+  posts: TimelinePostInfo[];
+}
+
+interface PostListInfo {
+  idList: number[];
+  lastUpdated: string;
+}
+
 export class TimelineService {
+  // TODO: Remove this! This is currently only used to avoid multiple fetch of timeline. Because post list need to use the timeline id and call this method. But after timeline is also saved locally, this should be removed.
+  private timelineCache = new Map<string, Promise<TimelineInfo>>();
+
   getTimeline(timelineName: string): Observable<TimelineInfo> {
-    return from(getHttpTimelineClient().getTimeline(timelineName)).pipe(
+    const cache = this.timelineCache.get(timelineName);
+    let promise: Promise<TimelineInfo>;
+    if (cache == null) {
+      promise = getHttpTimelineClient().getTimeline(timelineName);
+      this.timelineCache.set(timelineName, promise);
+    } else {
+      promise = cache;
+    }
+
+    return from(promise).pipe(
       convertError(HttpTimelineNotExistError, TimelineNotExistError)
     );
   }
@@ -126,28 +157,290 @@ export class TimelineService {
     );
   }
 
-  private _postDataSubscriptionHub = new SubscriptionHub<PostKey, BlobWithUrl>(
-    (key) => `${key.timelineName}/${key.postId}`,
-    async (key) => {
-      const blob = (
-        await getHttpTimelineClient().getPostData(
-          key.timelineName,
-          key.postId,
-          userService.currentUser?.token
+  // post list storage structure:
+  // each timeline has a PostListInfo saved with key created by getPostListInfoKey
+  // each post of a timeline has a HttpTimelinePostInfo with key created by getPostKey
+  // each post with data has BlobWithEtag with key created by getPostDataKey
+
+  private getPostListInfoKey(timelineUniqueId: string): string {
+    return `timeline.${timelineUniqueId}.postListInfo`;
+  }
+
+  private getPostKey(timelineUniqueId: string, id: number): string {
+    return `timeline.${timelineUniqueId}.post.${id}`;
+  }
+
+  private getPostDataKey(timelineUniqueId: string, id: number): string {
+    return `timeline.${timelineUniqueId}.post.${id}.data`;
+  }
+
+  private async getCachedPostList(
+    timelineName: string
+  ): Promise<TimelinePostInfo[]> {
+    const timeline = await this.getTimeline(timelineName).toPromise();
+    if (!this.hasReadPermission(userService.currentUser, timeline)) {
+      throw new ForbiddenError(
+        'You are not allowed to get posts of this timeline.'
+      );
+    }
+
+    const postListInfo = await dataStorage.getItem<PostListInfo | null>(
+      this.getPostListInfoKey(timeline.uniqueId)
+    );
+    if (postListInfo == null) {
+      return [];
+    } else {
+      return (
+        await Promise.all(
+          postListInfo.idList.map((postId) =>
+            dataStorage.getItem<HttpTimelinePostInfo>(
+              this.getPostKey(timeline.uniqueId, postId)
+            )
+          )
         )
-      ).data;
-      const url = URL.createObjectURL(blob);
-      return {
-        blob,
-        url,
+      ).map((post) => ({ ...post, timelineName }));
+    }
+  }
+
+  async syncPostList(timelineName: string): Promise<TimelinePostInfo[]> {
+    const timeline = await this.getTimeline(timelineName).toPromise();
+    if (!this.hasReadPermission(userService.currentUser, timeline)) {
+      this._postListSubscriptionHub.update(timelineName, () =>
+        Promise.resolve({
+          state: 'forbid',
+          posts: [],
+        })
+      );
+      throw new ForbiddenError(
+        'You are not allowed to get posts of this timeline.'
+      );
+    }
+
+    const postListInfoKey = this.getPostListInfoKey(timeline.uniqueId);
+    const postListInfo = await dataStorage.getItem<PostListInfo | null>(
+      postListInfoKey
+    );
+
+    const now = new Date();
+    let posts: TimelinePostInfo[];
+    if (postListInfo == null) {
+      let httpPosts: HttpTimelinePostInfo[];
+      try {
+        httpPosts = await getHttpTimelineClient().listPost(
+          timelineName,
+          userService.currentUser?.token
+        );
+      } catch (e) {
+        this._postListSubscriptionHub.update(timelineName, (_, old) =>
+          Promise.resolve({
+            state: 'offline',
+            posts: old.posts,
+          })
+        );
+        throw e;
+      }
+
+      await dataStorage.setItem<PostListInfo>(postListInfoKey, {
+        idList: httpPosts.map((post) => post.id),
+        lastUpdated: now.toISOString(),
+      });
+
+      for (const post of httpPosts) {
+        await dataStorage.setItem<HttpTimelinePostInfo>(
+          this.getPostKey(timeline.uniqueId, post.id),
+          post
+        );
+      }
+
+      posts = httpPosts.map((post) => ({
+        ...post,
+        timelineName,
+      }));
+    } else {
+      let httpPosts: HttpTimelineGenericPostInfo[];
+      try {
+        httpPosts = await getHttpTimelineClient().listPost(
+          timelineName,
+          userService.currentUser?.token,
+          {
+            modifiedSince: new Date(postListInfo.lastUpdated),
+            includeDeleted: true,
+          }
+        );
+      } catch (e) {
+        this._postListSubscriptionHub.update(timelineName, (_, old) =>
+          Promise.resolve({
+            state: 'offline',
+            posts: old.posts,
+          })
+        );
+        throw e;
+      }
+
+      const newPosts: HttpTimelinePostInfo[] = [];
+
+      for (const post of httpPosts) {
+        if (post.deleted) {
+          pull(postListInfo.idList, post.id);
+          await dataStorage.removeItem(
+            this.getPostKey(timeline.uniqueId, post.id)
+          );
+          await dataStorage.removeItem(
+            this.getPostDataKey(timeline.uniqueId, post.id)
+          );
+        } else {
+          await dataStorage.setItem<HttpTimelinePostInfo>(
+            this.getPostKey(timeline.uniqueId, post.id),
+            post
+          );
+          newPosts.push(post);
+        }
+      }
+
+      const oldIdList = postListInfo.idList;
+
+      postListInfo.idList = [...oldIdList, ...newPosts.map((post) => post.id)];
+      postListInfo.lastUpdated = now.toISOString();
+      await dataStorage.setItem<PostListInfo>(postListInfoKey, postListInfo);
+
+      posts = [
+        ...(await Promise.all(
+          oldIdList.map((postId) =>
+            dataStorage.getItem<HttpTimelinePostInfo>(
+              this.getPostKey(timeline.uniqueId, postId)
+            )
+          )
+        )),
+        ...newPosts,
+      ].map((post) => ({ ...post, timelineName }));
+    }
+
+    this._postListSubscriptionHub.update(timelineName, () =>
+      Promise.resolve({
+        state: 'synced',
+        posts,
+      })
+    );
+
+    return posts;
+  }
+
+  private _postListSubscriptionHub = new SubscriptionHub<
+    string,
+    TimelinePostListState
+  >(
+    (key) => key,
+    () => ({
+      state: 'loading',
+      posts: [],
+    }),
+    async (key) => {
+      const state: TimelinePostListState = {
+        state: 'syncing',
+        posts: await this.getCachedPostList(key),
       };
+      void this.syncPostList(key);
+      return state;
+    }
+  );
+
+  get postListHub(): ISubscriptionHub<string, TimelinePostListState> {
+    return this._postListSubscriptionHub;
+  }
+
+  private async getCachePostData(
+    timelineName: string,
+    postId: number
+  ): Promise<Blob | null> {
+    const timeline = await this.getTimeline(timelineName).toPromise();
+    const cache = await dataStorage.getItem<BlobWithEtag | null>(
+      this.getPostDataKey(timeline.uniqueId, postId)
+    );
+    if (cache == null) {
+      return null;
+    } else {
+      return cache.data;
+    }
+  }
+
+  private async syncCachePostData(
+    timelineName: string,
+    postId: number
+  ): Promise<Blob | null> {
+    const timeline = await this.getTimeline(timelineName).toPromise();
+    const dataKey = this.getPostDataKey(timeline.uniqueId, postId);
+    const cache = await dataStorage.getItem<BlobWithEtag | null>(dataKey);
+
+    if (cache == null) {
+      const dataWithEtag = await getHttpTimelineClient().getPostData(
+        timelineName,
+        postId,
+        userService.currentUser?.token
+      );
+      await dataStorage.setItem<BlobWithEtag>(dataKey, dataWithEtag);
+      this._postDataSubscriptionHub.update(
+        {
+          postId,
+          timelineName,
+        },
+        () =>
+          Promise.resolve({
+            blob: dataWithEtag.data,
+            url: URL.createObjectURL(dataWithEtag.data),
+          })
+      );
+      return dataWithEtag.data;
+    } else {
+      const res = await getHttpTimelineClient().getPostData(
+        timelineName,
+        postId,
+        userService.currentUser?.token,
+        cache.etag
+      );
+      if (res instanceof NotModified) {
+        return cache.data;
+      } else {
+        await dataStorage.setItem<BlobWithEtag>(dataKey, res);
+        this._postDataSubscriptionHub.update(
+          {
+            postId,
+            timelineName,
+          },
+          () =>
+            Promise.resolve({
+              blob: res.data,
+              url: URL.createObjectURL(res.data),
+            })
+        );
+        return res.data;
+      }
+    }
+  }
+
+  private _postDataSubscriptionHub = new SubscriptionHub<
+    PostKey,
+    BlobWithUrl | null
+  >(
+    (key) => `${key.timelineName}/${key.postId}`,
+    () => null,
+    async (key) => {
+      const blob = await this.getCachePostData(key.timelineName, key.postId);
+      const result =
+        blob == null
+          ? null
+          : {
+              blob,
+              url: URL.createObjectURL(blob),
+            };
+      void this.syncCachePostData(key.timelineName, key.postId);
+      return result;
     },
     (_key, data) => {
-      URL.revokeObjectURL(data.url);
+      if (data != null) URL.revokeObjectURL(data.url);
     }
   );
 
-  get postDataHub(): ISubscriptionHub<PostKey, BlobWithUrl> {
+  get postDataHub(): ISubscriptionHub<PostKey, BlobWithUrl | null> {
     return this._postDataSubscriptionHub;
   }
 
@@ -157,14 +450,33 @@ export class TimelineService {
   ): Observable<TimelinePostInfo> {
     const user = checkLogin();
     return from(
-      getHttpTimelineClient().postPost(timelineName, request, user.token)
+      getHttpTimelineClient()
+        .postPost(timelineName, request, user.token)
+        .then((res) => {
+          this._postListSubscriptionHub.update(timelineName, (_, old) => {
+            return Promise.resolve({
+              ...old,
+              posts: [...old.posts, { ...res, timelineName }],
+            });
+          });
+          return res;
+        })
     ).pipe(map((post) => ({ ...post, timelineName })));
   }
 
   deletePost(timelineName: string, postId: number): Observable<unknown> {
     const user = checkLogin();
     return from(
-      getHttpTimelineClient().deletePost(timelineName, postId, user.token)
+      getHttpTimelineClient()
+        .deletePost(timelineName, postId, user.token)
+        .then(() => {
+          this._postListSubscriptionHub.update(timelineName, (_, old) => {
+            return Promise.resolve({
+              ...old,
+              posts: old.posts.filter((post) => post.id != postId),
+            });
+          });
+        })
     );
   }
 
@@ -236,6 +548,31 @@ export function validateTimelineName(name: string): boolean {
   return timelineNameReg.test(name);
 }
 
+export function usePostList(
+  timelineName: string | null | undefined
+): TimelinePostListState | undefined {
+  const [state, setState] = React.useState<TimelinePostListState | undefined>(
+    undefined
+  );
+  React.useEffect(() => {
+    if (timelineName == null) {
+      setState(undefined);
+      return;
+    }
+
+    const subscription = timelineService.postListHub.subscribe(
+      timelineName,
+      (data) => {
+        setState(data);
+      }
+    );
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [timelineName]);
+  return state;
+}
+
 export function usePostDataUrl(
   enable: boolean,
   timelineName: string,
@@ -253,8 +590,8 @@ export function usePostDataUrl(
         timelineName,
         postId,
       },
-      ({ url }) => {
-        setUrl(url);
+      (data) => {
+        setUrl(data?.url);
       }
     );
     return () => {
diff --git a/Timeline/ClientApp/src/app/data/user.ts b/Timeline/ClientApp/src/app/data/user.ts
index 1be5cd3e..dec9929f 100644
--- a/Timeline/ClientApp/src/app/data/user.ts
+++ b/Timeline/ClientApp/src/app/data/user.ts
@@ -233,8 +233,12 @@ export class UserNotExistError extends Error {}
 export type AvatarInfo = BlobWithUrl;
 
 export class UserInfoService {
-  private _avatarSubscriptionHub = new SubscriptionHub<string, AvatarInfo>(
+  private _avatarSubscriptionHub = new SubscriptionHub<
+    string,
+    AvatarInfo | null
+  >(
     (key) => key,
+    () => null,
     async (key) => {
       const blob = (await getHttpUserClient().getAvatar(key)).data;
       const url = URL.createObjectURL(blob);
@@ -244,7 +248,7 @@ export class UserInfoService {
       };
     },
     (_key, data) => {
-      URL.revokeObjectURL(data.url);
+      if (data != null) URL.revokeObjectURL(data.url);
     }
   );
 
@@ -265,7 +269,7 @@ export class UserInfoService {
     );
   }
 
-  get avatarHub(): ISubscriptionHub<string, AvatarInfo> {
+  get avatarHub(): ISubscriptionHub<string, AvatarInfo | null> {
     return this._avatarSubscriptionHub;
   }
 }
@@ -284,8 +288,8 @@ export function useAvatarUrl(username?: string): string | undefined {
 
     const subscription = userInfoService.avatarHub.subscribe(
       username,
-      ({ url }) => {
-        setAvatarUrl(url);
+      (info) => {
+        setAvatarUrl(info?.url);
       }
     );
     return () => {