From 0024672d75d061167fb9de67629cc796a52861e6 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Mon, 10 Aug 2020 16:56:09 +0800
Subject: Do not block when get post data.

---
 Timeline/ClientApp/src/app/common/BlobImage.tsx |  6 ++++--
 Timeline/ClientApp/src/app/data/common.ts       |  2 ++
 Timeline/ClientApp/src/app/data/timeline.ts     | 12 ++++++------
 3 files changed, 12 insertions(+), 8 deletions(-)

(limited to 'Timeline/ClientApp/src')

diff --git a/Timeline/ClientApp/src/app/common/BlobImage.tsx b/Timeline/ClientApp/src/app/common/BlobImage.tsx
index 91497705..7e5e2447 100644
--- a/Timeline/ClientApp/src/app/common/BlobImage.tsx
+++ b/Timeline/ClientApp/src/app/common/BlobImage.tsx
@@ -3,14 +3,16 @@ import React from 'react';
 import { ExcludeKey } from '../utilities/type';
 
 const BlobImage: React.FC<
-  ExcludeKey<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> & { blob?: Blob }
+  ExcludeKey<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> & {
+    blob?: Blob | unknown;
+  }
 > = (props) => {
   const { blob, ...otherProps } = props;
 
   const [url, setUrl] = React.useState<string | undefined>(undefined);
 
   React.useEffect(() => {
-    if (blob != null) {
+    if (blob instanceof Blob) {
       const url = URL.createObjectURL(blob);
       setUrl(url);
       return () => {
diff --git a/Timeline/ClientApp/src/app/data/common.ts b/Timeline/ClientApp/src/app/data/common.ts
index 35934a29..87984e21 100644
--- a/Timeline/ClientApp/src/app/data/common.ts
+++ b/Timeline/ClientApp/src/app/data/common.ts
@@ -19,3 +19,5 @@ export function throwIfNotNetworkError(e: unknown): void {
     throw e;
   }
 }
+
+export type BlobOrStatus = Blob | 'loading' | 'error';
diff --git a/Timeline/ClientApp/src/app/data/timeline.ts b/Timeline/ClientApp/src/app/data/timeline.ts
index 9867b128..fc554f7b 100644
--- a/Timeline/ClientApp/src/app/data/timeline.ts
+++ b/Timeline/ClientApp/src/app/data/timeline.ts
@@ -1,12 +1,12 @@
 import React from 'react';
 import XRegExp from 'xregexp';
 import { Observable, from, combineLatest, of } from 'rxjs';
-import { map, switchMap, filter } from 'rxjs/operators';
+import { map, switchMap, startWith } from 'rxjs/operators';
 import { uniqBy } from 'lodash';
 
 import { convertError } from '../utilities/rxjs';
 
-import { dataStorage, throwIfNotNetworkError } from './common';
+import { dataStorage, throwIfNotNetworkError, BlobOrStatus } from './common';
 import { DataHub, WithSyncStatus } from './DataHub';
 
 import { UserAuthInfo, checkLogin, userService, userInfoService } from './user';
@@ -43,7 +43,7 @@ export type TimelinePostTextContent = HttpTimelinePostTextContent;
 
 export interface TimelinePostImageContent {
   type: 'image';
-  data: Blob;
+  data: BlobOrStatus;
 }
 
 export type TimelinePostContent =
@@ -481,10 +481,10 @@ export class TimelineService {
     },
   });
 
-  getPostData$(timelineName: string, postId: number): Observable<Blob> {
+  getPostData$(timelineName: string, postId: number): Observable<BlobOrStatus> {
     return this._postDataHub.getObservable({ timelineName, postId }).pipe(
-      map((state) => state.data),
-      filter((blob): blob is Blob => blob != null)
+      map((state): BlobOrStatus => state.data ?? 'error'),
+      startWith('loading')
     );
   }
 
-- 
cgit v1.2.3