Update README.md+3

azu · Feb 26, 2024 · efd1281 · efd1281
1 parent 5d665d8
commit efd1281
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -20,6 +20,8 @@ Search all your tweets.
 
 ![Overview](docs/architecture.png)
 
+<!-- https://excalidraw.com/#json=H8Y4dxfK_Zq1Y1gjS3Svn,nHlGmcklhRCNN7o3-FNMdQ -->
+
 ## Usage
 
 1. Click [Use this template](https://github.com/azu/mytweets/generate) and forked repository

diff --git a/web/app/client/SearchMore.tsx b/web/app/client/SearchMore.tsx
@@ -27,10 +27,9 @@ export const useSearchMore = (props: { searchResults: LineTweetResponse[] }) =>
         isLoadingMore
     } as const;
 };
-export const SearchMore = (props: { retPromise: Promise<FetchS3SelectResult> }) => {
-    const { results } = use(props.retPromise);
+export const SearchMore = (props: { ret: FetchS3SelectResult }) => {
     const { handlers, isLoadingMore } = useSearchMore({
-        searchResults: results
+        searchResults: props.ret.results
     });
     return (
         <div
@@ -51,3 +50,7 @@ export const SearchMore = (props: { retPromise: Promise<FetchS3SelectResult> })
         </div>
     );
 };
+export const SearchMoreStream = (props: { retPromise: Promise<FetchS3SelectResult> }) => {
+    const ret = use(props.retPromise);
+    return <SearchMore ret={ret} />;
+};
diff --git a/web/app/page.tsx b/web/app/page.tsx
@@ -1,9 +1,9 @@
 import React, { Suspense, use } from "react";
 import { fetchS3Select, FetchS3SelectResult } from "./server/search";
 import { SiTwitter } from "react-icons/si";
-import { SearchResultContent } from "./server/SearchResult";
+import { SearchResultContent, SearchResultContentStream } from "./server/SearchResult";
 import { SearchBox } from "./client/SearchBox";
-import { SearchMore } from "./client/SearchMore";
+import { SearchMore, SearchMoreStream } from "./client/SearchMore";
 import { TransitionContextProvider } from "./client/TransitionContext";
 import { SearchResultContentWrapper } from "./client/SearchResultContentWrapper";
 
@@ -14,9 +14,15 @@ export type HomPageSearchParam = {
     timestamp?: string;
 };
 
-const HitCount = (props: { retPromise: Promise<FetchS3SelectResult> }) => {
+const HitCount = (props: { count: number }) => {
+    if (Number.isNaN(props.count)) {
+        return <span>Hit: ___</span>;
+    }
+    return <span>Hit: {props.count}</span>;
+};
+const HitCountStream = (props: { retPromise: Promise<FetchS3SelectResult> }) => {
     const ret = use(props.retPromise);
-    return <span>Hit: {ret.results.length}</span>;
+    return <HitCount count={ret.results.length} />;
 };
 
 async function HomePage({
@@ -66,18 +72,27 @@ async function HomePage({
                         <SearchBox query={searchParams.q} />
                     </div>
                     <div>
-                        <Suspense fallback={<span>Hit: …</span>}>
-                            <HitCount retPromise={retPromise} />
+                        <Suspense fallback={<HitCount count={NaN} />}>
+                            <HitCountStream retPromise={retPromise} />
                         </Suspense>
                     </div>
                 </div>
                 <SearchResultContentWrapper>
-                    <Suspense fallback={<>Loading…</>}>
-                        <SearchResultContent retPromise={retPromise} screenName={searchParams.screen_name ?? ""} />
+                    <Suspense
+                        fallback={
+                            <>
+                                <div>Loading...</div>
+                            </>
+                        }
+                    >
+                        <SearchResultContentStream
+                            retPromise={retPromise}
+                            screenName={searchParams.screen_name ?? ""}
+                        />
                     </Suspense>
                 </SearchResultContentWrapper>
                 <Suspense>
-                    <SearchMore retPromise={retPromise} />
+                    <SearchMoreStream retPromise={retPromise} />
                 </Suspense>
             </div>
         </TransitionContextProvider>

diff --git a/web/app/server/SearchResult.tsx b/web/app/server/SearchResult.tsx
@@ -26,8 +26,14 @@ const StatusLink = (props: { itemId: string; children: ReactElement }) => {
     );
 };
 
-export function SearchResultContent(props: { retPromise: Promise<FetchS3SelectResult>; screenName: string }) {
-    const { results: searchResults } = use(props.retPromise);
+export const SearchResultContentStream = (props: { retPromise: Promise<FetchS3SelectResult>; screenName: string }) => {
+    const { retPromise, ...other } = props;
+    const ret = use(retPromise);
+    return <SearchResultContent ret={ret} {...other} />;
+};
+
+export function SearchResultContent(props: { ret: FetchS3SelectResult; screenName: string }) {
+    const searchResults = props.ret.results;
     return (
         <div>
             <ul