add new, RFC 229, nextjs based promise handling approach

package.json

@@ -51,8 +51,8 @@
     "eslint-config-next": "13.2.4",
     "next": "13.2.4",
     "prettier": "2.8.7",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.3.0-next",
+    "react-dom": "^18.3.0-next",
     "typescript": "4.9.5"
   },
   "packageManager": "[email protected]"

pages/next/[userName]/[repoName].tsx

@@ -0,0 +1,67 @@
+'use client';
+import React, { use, Suspense, cache } from 'react';
+
+import { fetchRepoBranchesWithCommitStatusesAndPullRequests, fetchUser, User } from '../../../restinpeace/github';
+import UserRepo from '../../../container/UserRepo';
+import RichErrorBoundary from '../../../components/RichErrorBoundary';
+import InternalLink from '../../../components/InternalLink';
+import { Spinner } from '../../../components/Spinner';
+import { RepoType } from '../../../components/Repo';
+import { UserRepoFromUrlProvider, useUserRepo } from '../../../components/useUserRepoFromRoute';
+
+function delay(timeout) {
+    return new Promise((resolve) => {
+        setTimeout(resolve, timeout);
+    });
+}
+
+export default function RestfulPage() {
+    const { userName, repoName } = useUserRepo();
+
+    if (!userName || !repoName) {
+        // This is not yet supported on the server-side, so we need to skip rendering:
+        return null;
+    }
+
+    const userData: Promise<User> = fetchUserPromise(userName);
+    const repoData: Promise<RepoType> = fetchRepoBranches({ userName, repoName });
+    return (
+        <UserRepoFromUrlProvider>
+            <RichErrorBoundary>
+                <InternalLink href={'/restful'}>back to repos</InternalLink>
+                <Suspense fallback={<Spinner />}>
+                    <ReactNext userData={userData} repoData={repoData} />
+                </Suspense>
+            </RichErrorBoundary>
+        </UserRepoFromUrlProvider>
+    );
+}
+
+const fetchUserPromise: (id) => Promise<User> = cache(async (id) => {
+    await delay(2000);
+    return fetchUser(id);
+});
+const fetchRepoBranches: ({ userName, repoName }) => Promise<RepoType> = cache(async ({ userName, repoName }) => {
+    await delay(2000);
+    return fetchRepoBranchesWithCommitStatusesAndPullRequestsProm({ userName, repoName });
+});
+
+interface Props {
+    userData: Promise<User>;
+    repoData: Promise<RepoType>;
+}
+
+function ReactNext({ userData, repoData }: Props) {
+    const user = use(userData);
+    const repo: RepoType = use(repoData);
+
+    return <UserRepo user={user} repo={repo} />;
+}
+
+const fetchRepoBranchesWithCommitStatusesAndPullRequestsProm = cache(async ({ userName, repoName }) =>
+    fetchRepoBranchesWithCommitStatusesAndPullRequests({ userName, repoName }).then((branchesWithCommit) => ({
+        name: repoName,
+        owner: { login: userName },
+        branches: branchesWithCommit.branches,
+    }))
+);

yarn.lock

@@ -4318,15 +4318,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:18.2.0":
-  version: 18.2.0
-  resolution: "react-dom@npm:18.2.0"
+"react-dom@npm:^18.3.0-next":
+  version: 18.3.0-next-fecc288b7-20221025
+  resolution: "react-dom@npm:18.3.0-next-fecc288b7-20221025"
   dependencies:
     loose-envify: ^1.1.0
-    scheduler: ^0.23.0
+    scheduler: 0.24.0-next-fecc288b7-20221025
   peerDependencies:
-    react: ^18.2.0
-  checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
+    react: 18.3.0-next-fecc288b7-20221025
+  checksum: bee2c161c37498974816abaf191767186473422d7642f7b333c039a046a0c1d724bc7a1482d714a9fff0f95287ee62909f2e903837a966a2fde1bca50fbf0c45
   languageName: node
   linkType: hard
 
@@ -4454,19 +4454,19 @@ __metadata:
     hitchcock: 0.5.0
     next: 13.2.4
     prettier: 2.8.7
-    react: 18.2.0
+    react: ^18.3.0-next
     react-cache: latest
-    react-dom: 18.2.0
+    react-dom: ^18.3.0-next
     typescript: 4.9.5
   languageName: unknown
   linkType: soft
 
-"react@npm:18.2.0":
-  version: 18.2.0
-  resolution: "react@npm:18.2.0"
+"react@npm:^18.3.0-next":
+  version: 18.3.0-next-fecc288b7-20221025
+  resolution: "react@npm:18.3.0-next-fecc288b7-20221025"
   dependencies:
     loose-envify: ^1.1.0
-  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
+  checksum: 860e2a595be0f3c75707ae4850490b367f1e6fb4275c1af9a33f234a9d47d9202ad49c51366a3b9d43d145c6fe106dde1089d93d7227efaadcaa4b8432122cb7
   languageName: node
   linkType: hard
 
@@ -4592,12 +4592,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.23.0":
-  version: 0.23.0
-  resolution: "scheduler@npm:0.23.0"
+"scheduler@npm:0.24.0-next-fecc288b7-20221025":
+  version: 0.24.0-next-fecc288b7-20221025
+  resolution: "scheduler@npm:0.24.0-next-fecc288b7-20221025"
   dependencies:
     loose-envify: ^1.1.0
-  checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a
+  checksum: c51ecea03ce23c2cb27bfd6c0bb350722a6d7d9d692e43d195f0397fe29ce19f87e9f1a58939eab89b2535f1b87f45c52b898f3cfe2b5eeb1c78a6a97d53c117
   languageName: node
   linkType: hard