{"parents":["fe7163e73dadceda2655736d97cdd745d7abc8ea"],"patch":"diff --git a\/fixtures\/blocks\/db.json b\/fixtures\/blocks\/db.json\nindex 8b2067d51a..1d7ec30679 100644\n--- a\/fixtures\/blocks\/db.json\n+++ b\/fixtures\/blocks\/db.json\n@@ -23,37 +23,55 @@\n {\n \"id\": 1,\n \"body\": \"Hey there\",\n- \"postId\": 1\n+ \"postId\": 1,\n+ \"userId\": 1\n },\n {\n \"id\": 2,\n \"body\": \"Welcome to the chat\",\n- \"postId\": 1\n+ \"postId\": 1,\n+ \"userId\": 2\n },\n {\n \"id\": 3,\n \"body\": \"What editor\/font are you using?\",\n- \"postId\": 2\n+ \"postId\": 2,\n+ \"userId\": 2\n },\n {\n \"id\": 4,\n \"body\": \"It's always been hard\",\n- \"postId\": 3\n+ \"postId\": 3,\n+ \"userId\": 1\n },\n {\n \"id\": 5,\n \"body\": \"It's still easy\",\n- \"postId\": 3\n+ \"postId\": 3,\n+ \"userId\": 2\n }\n ],\n \"users\": [{\n \"id\": 1,\n- \"name\": \"Sebastian\"\n+ \"name\": \"Sebastian\",\n+ \"bioId\": 10\n }, {\n \"id\": 2,\n- \"name\": \"Sophie\"\n+ \"name\": \"Sophie\",\n+ \"bioId\": 20\n }, {\n \"id\": 3,\n- \"name\": \"Dan\"\n+ \"name\": \"Dan\",\n+ \"bioId\": 30\n+ }],\n+ \"bios\": [{\n+ \"id\": 10,\n+ \"text\": \"I like European movies\"\n+ }, {\n+ \"id\": 20,\n+ \"text\": \"I like math puzzles\"\n+ }, {\n+ \"id\": 30,\n+ \"text\": \"I like reading twitter\"\n }]\n }\ndiff --git a\/fixtures\/blocks\/src\/Router.js b\/fixtures\/blocks\/src\/Router.js\nindex 6d3295004c..19fb76bd8e 100644\n--- a\/fixtures\/blocks\/src\/Router.js\n+++ b\/fixtures\/blocks\/src\/Router.js\n@@ -24,17 +24,24 @@ const initialState = {\n \/\/ TODO: use this for invalidation.\n cache: createCache(),\n url: initialUrl,\n+ pendingUrl: initialUrl,\n RootBlock: loadApp(initialUrl),\n };\n \n function reducer(state, action) {\n switch (action.type) {\n- case 'navigate':\n+ case 'startNavigation':\n+ return {\n+ ...state,\n+ pendingUrl: action.url,\n+ };\n+ case 'completeNavigation':\n \/\/ TODO: cancel previous fetch?\n return {\n- cache: state.cache,\n+ ...state,\n url: action.url,\n- RootBlock: loadApp(action.url),\n+ pendingUrl: action.url,\n+ RootBlock: action.RootBlock,\n };\n default:\n throw new Error();\n@@ -44,7 +51,7 @@ function reducer(state, action) {\n function Router() {\n const [state, dispatch] = useReducer(reducer, initialState);\n const [startTransition, isPending] = useTransition({\n- timeoutMs: 3000,\n+ timeoutMs: 1500,\n });\n \n useEffect(() => {\n@@ -56,12 +63,16 @@ function Router() {\n startTransition(() => {\n \/\/ TODO: Here, There, and Everywhere.\n \/\/ TODO: Instant Transitions, somehow.\n- \/\/ TODO: Buttons should update immediately.\n dispatch({\n- type: 'navigate',\n+ type: 'completeNavigation',\n+ RootBlock: loadApp(url),\n url,\n });\n });\n+ dispatch({\n+ type: 'startNavigation',\n+ url,\n+ });\n },\n [startTransition]\n );\n@@ -76,10 +87,11 @@ function Router() {\n \n const routeContext = useMemo(\n () => ({\n+ pendingUrl: state.pendingUrl,\n url: state.url,\n navigate,\n }),\n- [state.url, navigate]\n+ [state.url, state.pendingUrl, navigate]\n );\n \n return (\ndiff --git a\/fixtures\/blocks\/src\/client\/Link.js b\/fixtures\/blocks\/src\/client\/Link.js\nnew file mode 100644\nindex 0000000000..1f1f535da1\n--- \/dev\/null\n+++ b\/fixtures\/blocks\/src\/client\/Link.js\n@@ -0,0 +1,25 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\/\n+\n+import * as React from 'react';\n+import {useRouter} from '.\/RouterContext';\n+\n+export default function Link({to, children, ...rest}) {\n+ const {navigate} = useRouter();\n+ return (\n+ {\n+ e.preventDefault();\n+ window.history.pushState(null, null, to);\n+ navigate(to);\n+ }}\n+ {...rest}>\n+ {children}\n+ <\/a>\n+ );\n+}\ndiff --git a\/fixtures\/blocks\/src\/client\/Shell.js b\/fixtures\/blocks\/src\/client\/Shell.js\nindex e6e1a005f9..07b74ba88a 100644\n--- a\/fixtures\/blocks\/src\/client\/Shell.js\n+++ b\/fixtures\/blocks\/src\/client\/Shell.js\n@@ -6,57 +6,25 @@\n *\/\n \n import * as React from 'react';\n-import {useRouter} from '.\/RouterContext';\n+import {TabBar, TabLink} from '.\/TabNav';\n \n-function TabBar({children}) {\n- return (\n-

\n- {children}\n- <\/div>\n- );\n-}\n+\/\/ TODO: Error Boundaries.\n \n-function TabLink({to, children}) {\n- const {url: activeUrl, navigate} = useRouter();\n- const active = activeUrl === to;\n- if (active) {\n- return (\n- \n- {children}\n- <\/b>\n- );\n- }\n+function MainTabNav() {\n return (\n- {\n- e.preventDefault();\n- window.history.pushState(null, null, to);\n- navigate(to);\n- }}>\n- {children}\n- <\/a>\n+ \n+ Home<\/TabLink>\n+ \n+ Profile\n+ <\/TabLink>\n+ <\/TabBar>\n );\n }\n \n export default function Shell({children}) {\n return (\n <>\n- \n- Home<\/TabLink>\n- Profile<\/TabLink>\n- <\/TabBar>\n-
\n+ \n {children}\n <\/>\n );\ndiff --git a\/fixtures\/blocks\/src\/client\/TabNav.js b\/fixtures\/blocks\/src\/client\/TabNav.js\nnew file mode 100644\nindex 0000000000..142767263f\n--- \/dev\/null\n+++ b\/fixtures\/blocks\/src\/client\/TabNav.js\n@@ -0,0 +1,50 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\/\n+\n+import * as React from 'react';\n+import Link from '.\/Link';\n+import {useRouter} from '.\/RouterContext';\n+\n+export function TabBar({children}) {\n+ return (\n+ \n+ {children}\n+ <\/div>\n+ );\n+}\n+\n+export function TabLink({to, partial, children}) {\n+ const {pendingUrl: activeUrl} = useRouter();\n+ const active = partial ? activeUrl.startsWith(to) : activeUrl === to;\n+ if (active) {\n+ return (\n+ \n+ {children}\n+ <\/b>\n+ );\n+ }\n+ return (\n+ \n+ {children}\n+ <\/Link>\n+ );\n+}\ndiff --git a\/fixtures\/blocks\/src\/server\/App.block.js b\/fixtures\/blocks\/src\/server\/App.block.js\nindex 9347bbe0cf..a02cedd3ce 100644\n--- a\/fixtures\/blocks\/src\/server\/App.block.js\n+++ b\/fixtures\/blocks\/src\/server\/App.block.js\n@@ -16,15 +16,13 @@ import loadProfilePage from '.\/ProfilePage.block';\n \n function load(url) {\n let Page;\n- switch (url) {\n- case '\/':\n- Page = loadFeedPage();\n- break;\n- case '\/profile':\n- Page = loadProfilePage(3);\n- break;\n- default:\n- throw Error('Not found');\n+ const segments = url.split('\/').filter(Boolean);\n+ if (segments.length === 0) {\n+ Page = loadFeedPage();\n+ } else if (segments[0] === 'profile') {\n+ Page = loadProfilePage(Number(segments[1]), segments[2]);\n+ } else {\n+ throw Error('Not found');\n }\n return {Page};\n }\n@@ -33,6 +31,8 @@ function load(url) {\n \n import Shell from '..\/client\/Shell';\n \n+\/\/ TODO: some notion of key.\n+\n function App(props, data) {\n return (\n \ndiff --git a\/fixtures\/blocks\/src\/server\/Comments.block.js b\/fixtures\/blocks\/src\/server\/Comments.block.js\nindex 3e021519fd..fdea53adee 100644\n--- a\/fixtures\/blocks\/src\/server\/Comments.block.js\n+++ b\/fixtures\/blocks\/src\/server\/Comments.block.js\n@@ -15,19 +15,25 @@ import {fetch} from 'react-data\/fetch';\n \n function load(postId) {\n return {\n- comments: fetch(`\/comments?postId=${postId}`).json(),\n+ comments: fetch(`\/comments?postId=${postId}&_expand=user`).json(),\n };\n }\n \n \/\/ Client\n \n+import Link from '..\/client\/Link';\n+\n function Comments(props, data) {\n return (\n <>\n

Comments<\/h5>\n
\n- {data.comments.slice(0, 5).map(item => (\n-
{item.body}<\/li>\n+ {data.comments.slice(0, 5).map(comment => (\n+
\n+ {comment.body}\n+ {' • '}\n+ {comment.user.name}<\/Link>\n+ <\/li>\n ))}\n <\/ul>\n <\/>\ndiff --git a\/fixtures\/blocks\/src\/server\/FeedPage.block.js b\/fixtures\/blocks\/src\/server\/FeedPage.block.js\nindex 56ebcaffe2..9fdbb414fe 100644\n--- a\/fixtures\/blocks\/src\/server\/FeedPage.block.js\n+++ b\/fixtures\/blocks\/src\/server\/FeedPage.block.js\n@@ -15,7 +15,7 @@ import {fetch} from 'react-data\/fetch';\n import PostList from '.\/PostList';\n \n function load(params) {\n- const allPosts = fetch('\/posts').json();\n+ const allPosts = fetch('\/posts?_expand=user').json();\n return {\n posts: ,\n };\ndiff --git a\/fixtures\/blocks\/src\/server\/Post.block.js b\/fixtures\/blocks\/src\/server\/Post.block.js\nindex 23ce58cbd3..ffc3e63b38 100644\n--- a\/fixtures\/blocks\/src\/server\/Post.block.js\n+++ b\/fixtures\/blocks\/src\/server\/Post.block.js\n@@ -21,6 +21,8 @@ function load(postId) {\n \n \/\/ Client\n \n+import Link from '..\/client\/Link';\n+\n function Post(props, data) {\n return (\n \n-
{props.post.title}<\/h4>\n+
\n+ {props.post.title}\n+ {' by '}\n+ \n+ {props.post.user.name}\n+ <\/Link>\n+ <\/h4>\n
{props.post.body}<\/p>\n Loading comments...<\/h5>}\ndiff --git a\/fixtures\/blocks\/src\/server\/PostList.js b\/fixtures\/blocks\/src\/server\/PostList.js\nindex 2baf1da4fc..f479da5eb2 100644\n--- a\/fixtures\/blocks\/src\/server\/PostList.js\n+++ b\/fixtures\/blocks\/src\/server\/PostList.js\n@@ -17,7 +17,7 @@ export default function PostList({posts}) {\n return (\n \n {posts.map(post => {\n- preload(`\/comments?postId=${post.id}`);\n+ preload(`\/comments?postId=${post.id}&_expand=user`);\n const Post = loadPost(post.id);\n return (\n }>\ndiff --git a\/fixtures\/blocks\/src\/server\/ProfileBio.block.js b\/fixtures\/blocks\/src\/server\/ProfileBio.block.js\nnew file mode 100644\nindex 0000000000..1142524de2\n--- \/dev\/null\n+++ b\/fixtures\/blocks\/src\/server\/ProfileBio.block.js\n@@ -0,0 +1,34 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ \n+ This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ \/\n+\/ eslint-disable import\/first \/\n+\n+import as React from 'react';\n+import {block} from 'react';\n+\n+\/\/ Server\n+\n+import {fetch} from 'react-data\/fetch';\n+\n+function load(user) {\n+ return {\n+ user,\n+ bio: fetch(`\/bios\/${user.bioId}`).json(),\n+ };\n+}\n+\n+\/\/ Client\n+\n+function ProfileBio(props, data) {\n+ return (\n+ <>\n+
{data.user.name}'s Bio<\/h3>\n+
{data.bio.text}<\/p>\n+ <\/>\n+ );\n+}\n+\n+export default block(ProfileBio, load);\ndiff --git a\/fixtures\/blocks\/src\/server\/ProfilePage.block.js b\/fixtures\/blocks\/src\/server\/ProfilePage.block.js\nindex 6ee61e56b4..668c44b3d7 100644\n--- a\/fixtures\/blocks\/src\/server\/ProfilePage.block.js\n+++ b\/fixtures\/blocks\/src\/server\/ProfilePage.block.js\n@@ -12,23 +12,47 @@ import {block, Suspense} from 'react';\n \/\/ Server\n \n import {fetch} from 'react-data\/fetch';\n+import loadProfileBio from '.\/ProfileBio.block';\n import loadProfileTimeline from '.\/ProfileTimeline.block';\n \n-function load(userId) {\n+function load(userId, tab) {\n+ const user = fetch(`\/users\/${userId}`).json();\n+ let Tab;\n+ switch (tab) {\n+ case 'bio':\n+ Tab = loadProfileBio(user);\n+ break;\n+ default:\n+ Tab = loadProfileTimeline(userId);\n+ break;\n+ }\n return {\n- user: fetch(`\/users\/${userId}`).json(),\n- ProfileTimeline: loadProfileTimeline(userId),\n+ Tab,\n+ user,\n };\n }\n \n \/\/ Client\n \n+import {TabBar, TabLink} from '..\/client\/TabNav';\n+\n+function ProfileTabNav({userId}) {\n+ \/\/ TODO: Don't hardcode ID.\n+ return (\n+ \n+ Timeline<\/TabLink>\n+ Bio<\/TabLink>\n+ <\/TabBar>\n+ );\n+}\n+\n function ProfilePage(props, data) {\n return (\n <>\n
{data.user.name}<\/h2>\n- Loading Timeline...<\/h3>}>\n- \n+ \n+ Loading...<\/h3>}>\n+ \n <\/Suspense>\n <\/>\n );\ndiff --git a\/fixtures\/blocks\/src\/server\/ProfileTimeline.block.js b\/fixtures\/blocks\/src\/server\/ProfileTimeline.block.js\nindex c1c0978a16..8d42eda7a5 100644\n--- a\/fixtures\/blocks\/src\/server\/ProfileTimeline.block.js\n+++ b\/fixtures\/blocks\/src\/server\/ProfileTimeline.block.js\n@@ -15,7 +15,7 @@ import {fetch} from 'react-data\/fetch';\n import PostList from '.\/PostList';\n \n function load(userId) {\n- const postsByUser = fetch(`\/posts?userId=${userId}`).json();\n+ const postsByUser = fetch(`\/posts?userId=${userId}&_expand=user`).json();\n return {\n posts: ,\n };\n@@ -24,12 +24,7 @@ function load(userId) {\n \/\/ Client\n \n function ProfileTimeline(props, data) {\n- return (\n- <>\n-
Timeline<\/h3>\n- {data.posts}\n- <\/>\n- );\n+ return <>{data.posts}<\/>;\n }\n \n export default block(ProfileTimeline, load);\n","body":"* [Blocks Fixture] Update navigation buttons immediately\r\n\r\n* Add more profile links\r\n\r\n* Minor refactor\r\n\r\n* Add subroutes to Profile","commit":{"shortRevision":"4d124a4f67","authorName":"Dan Abramov","authoredAt":"2020-05-05T11:53:02+01:00","authorEmail":"dan.abramov@gmail.com","revision":"4d124a4f67d9db6c6e97beab0dd8d7ae8a9177dd","subject":"[Blocks Fixture] Misc updates (#18811)"},"files":[{"status":"M","path":"fixtures\/blocks\/db.json"},{"status":"M","path":"fixtures\/blocks\/src\/Router.js"},{"status":"A","path":"fixtures\/blocks\/src\/client\/Link.js"},{"status":"M","path":"fixtures\/blocks\/src\/client\/Shell.js"},{"status":"A","path":"fixtures\/blocks\/src\/client\/TabNav.js"},{"status":"M","path":"fixtures\/blocks\/src\/server\/App.block.js"},{"status":"M","path":"fixtures\/blocks\/src\/server\/Comments.block.js"},{"status":"M","path":"fixtures\/blocks\/src\/server\/FeedPage.block.js"},{"status":"M","path":"fixtures\/blocks\/src\/server\/Post.block.js"},{"status":"M","path":"fixtures\/blocks\/src\/server\/PostList.js"},{"status":"A","path":"fixtures\/blocks\/src\/server\/ProfileBio.block.js"},{"status":"M","path":"fixtures\/blocks\/src\/server\/ProfilePage.block.js"},{"status":"M","path":"fixtures\/blocks\/src\/server\/ProfileTimeline.block.js"}]}

dillon1000/react

Files changed