From 3e32fc455cb84a5fd6ef87cc15838d9306a07f34 Mon Sep 17 00:00:00 2001 From: lowsky Date: Sat, 1 Apr 2023 19:18:18 +0200 Subject: [PATCH 1/6] fix/improve data typing --- components/Repo.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/Repo.tsx b/components/Repo.tsx index 304620bd..2689f9b4 100644 --- a/components/Repo.tsx +++ b/components/Repo.tsx @@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faGithub } from '@fortawesome/free-brands-svg-icons'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { Box, Heading, Icon, Link } from '@chakra-ui/react'; +import { Maybe } from '../restinpeace/types'; import { Maybe } from '../restinpeace/types'; import { useUserRepo } from './useUserRepoFromRoute'; From d8f7adb77026e94a98ffbf87a8628d3f325473bd Mon Sep 17 00:00:00 2001 From: lowsky Date: Sat, 1 Apr 2023 19:24:34 +0200 Subject: [PATCH 2/6] add new, RFC 229, nextjs based promise handling approach --- package.json | 4 +- pages/next/[userName]/[repoName].tsx | 67 ++++++++++++++++++++++++++++ yarn.lock | 32 ++++++------- 3 files changed, 85 insertions(+), 18 deletions(-) create mode 100644 pages/next/[userName]/[repoName].tsx diff --git a/package.json b/package.json index da89fbe6..cbe3fa19 100644 --- a/package.json +++ b/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": "yarn@3.5.0" diff --git a/pages/next/[userName]/[repoName].tsx b/pages/next/[userName]/[repoName].tsx new file mode 100644 index 00000000..4214a418 --- /dev/null +++ b/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 = fetchUserPromise(userName); + const repoData: Promise = fetchRepoBranches({ userName, repoName }); + return ( + + + back to repos + }> + + + + + ); +} + +const fetchUserPromise: (id) => Promise = cache(async (id) => { + await delay(2000); + return fetchUser(id); +}); +const fetchRepoBranches: ({ userName, repoName }) => Promise = cache(async ({ userName, repoName }) => { + await delay(2000); + return fetchRepoBranchesWithCommitStatusesAndPullRequestsProm({ userName, repoName }); +}); + +interface Props { + userData: Promise; + repoData: Promise; +} + +function ReactNext({ userData, repoData }: Props) { + const user = use(userData); + const repo: RepoType = use(repoData); + + return ; +} + +const fetchRepoBranchesWithCommitStatusesAndPullRequestsProm = cache(async ({ userName, repoName }) => + fetchRepoBranchesWithCommitStatusesAndPullRequests({ userName, repoName }).then((branchesWithCommit) => ({ + name: repoName, + owner: { login: userName }, + branches: branchesWithCommit.branches, + })) +); diff --git a/yarn.lock b/yarn.lock index 109c4136..cdcfa048 100644 --- a/yarn.lock +++ b/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 From 4cb59143c9f692708a2688b77baed7f6aa0ae327 Mon Sep 17 00:00:00 2001 From: lowsky Date: Sun, 2 Apr 2023 21:14:44 +0200 Subject: [PATCH 3/6] add new, RFC 229, nextjs based promise handling approach --- pages/index.tsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 3bb29a78..8dd1d75a 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Heading } from '@chakra-ui/react'; +import { Box, Heading, UnorderedList } from '@chakra-ui/react'; import Head from 'next/head'; import InternalLink from '../components/InternalLink'; @@ -14,7 +14,22 @@ export default function Index() { What is it? -
    + This is a demo of React.Suspense in data fetching scenarios. + + Main use case is typically showing a loading spinner. +
    + Suspense helps to simplify the code structure for handling asynchronously data fetched even when it is + done incrementally. +     + + Choose one of these different scenarios: + + +
  • + 🆕Experimental, RFC-229{' '} + use(await fetch) Fetching all data and use latest support of async data fetching + via `const data = use(await fetch)` +
  • Old way All or nothing: Fetching all data in a top-level `useEffect()` + props-drilling @@ -31,7 +46,7 @@ export default function Index() { Side-by-Side Comparison: Show incrementally loading and wait-for-all
    • -
+ ); } From 031fd1170e104fa5beaced423789f32a29861e9f Mon Sep 17 00:00:00 2001 From: lowsky Date: Sun, 2 Apr 2023 21:28:30 +0200 Subject: [PATCH 4/6] add index page for rfc229 way --- pages/next/index.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 pages/next/index.js diff --git a/pages/next/index.js b/pages/next/index.js new file mode 100644 index 00000000..385a6885 --- /dev/null +++ b/pages/next/index.js @@ -0,0 +1,27 @@ +'use client'; // this directive should be at top of the file, before any imports. + +import React from 'react'; +import { Box, Heading, Link } from '@chakra-ui/react'; + +import InternalLink from '../../components/InternalLink'; +import { LinkList } from '../../components/LinkList'; + +export default function Shortcuts() { + return ( +
+ back to main page + + Experimental, RFC-229 + + use(await fetch) Fetching all data and use latest support of async data fetching via + `const data = use(await fetch)` + + + See GH/reactjs/rfcs/pull/229 for mor + details + + + +
+ ); +} From 4c40b128e78928713a6ecd6b266c35d00bc69a43 Mon Sep 17 00:00:00 2001 From: lowsky Date: Sun, 2 Apr 2023 21:29:37 +0200 Subject: [PATCH 5/6] fix page initialisation for using route-based info --- pages/next/[userName]/[repoName].tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/pages/next/[userName]/[repoName].tsx b/pages/next/[userName]/[repoName].tsx index 4214a418..16e4c80c 100644 --- a/pages/next/[userName]/[repoName].tsx +++ b/pages/next/[userName]/[repoName].tsx @@ -2,12 +2,12 @@ import React, { use, Suspense, cache } from 'react'; import { fetchRepoBranchesWithCommitStatusesAndPullRequests, fetchUser, User } from '../../../restinpeace/github'; +import { UserRepoFromUrlProvider, useUserRepo } from '../../../components/useUserRepoFromRoute'; 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) => { @@ -15,20 +15,22 @@ function delay(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; - } +export default function ReactNextDrivenPage() { + return ( + + + + ); +} +function ReactNextWithUrlContext() { + const { userName, repoName } = useUserRepo(); const userData: Promise = fetchUserPromise(userName); const repoData: Promise = fetchRepoBranches({ userName, repoName }); return ( - back to repos + back to repos }> From 3be4c495ab885400ac7f2dc82341036593cc655f Mon Sep 17 00:00:00 2001 From: lowsky Date: Sun, 2 Apr 2023 21:33:39 +0200 Subject: [PATCH 6/6] tiny fix in Repo component --- components/Repo.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/Repo.tsx b/components/Repo.tsx index 2689f9b4..304620bd 100644 --- a/components/Repo.tsx +++ b/components/Repo.tsx @@ -3,7 +3,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faGithub } from '@fortawesome/free-brands-svg-icons'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { Box, Heading, Icon, Link } from '@chakra-ui/react'; -import { Maybe } from '../restinpeace/types'; import { Maybe } from '../restinpeace/types'; import { useUserRepo } from './useUserRepoFromRoute';