From c024271e67c9661c66eaca077e460bb697562d12 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 13 Feb 2023 23:33:13 +0000 Subject: [PATCH] rewire --- beta/src/components/Layout/HomeContent.js | 605 ++++++++++++---------- 1 file changed, 331 insertions(+), 274 deletions(-) diff --git a/beta/src/components/Layout/HomeContent.js b/beta/src/components/Layout/HomeContent.js index bebc55e7e..1e13e9c0a 100644 --- a/beta/src/components/Layout/HomeContent.js +++ b/beta/src/components/Layout/HomeContent.js @@ -2,7 +2,14 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import {createContext, useState, useContext, useId, Suspense} from 'react'; +import { + createContext, + useState, + useContext, + useId, + Fragment, + Suspense, +} from 'react'; import cn from 'classnames'; import ButtonLink from '../ButtonLink'; import {IconRestart} from '../Icon/IconRestart'; @@ -597,7 +604,7 @@ function SearchableVideoList({ videos }) {
- +
@@ -607,190 +614,7 @@ function SearchableVideoList({ videos }) { } function Example4() { - const [confPromise, setConfPromise] = useState(null); - const [playlistPromise, setPlaylistPromise] = useState(null); - const videos = [ - { - id: 0, - title: 'React 18 Keynote', - description: 'Andrew Clark, Lauren Tan, Juan Tejada, and Ricky Hanlon', - url: 'https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=1', - image: { - speakers: [ - 'https://i.imgur.com/D69ZvSY.jpg', - 'https://i.imgur.com/RznoMDK.jpg', - 'https://i.imgur.com/CeGgjK3.jpg', - 'https://i.imgur.com/tK5OEus.jpg', - ], - }, - }, - { - id: 1, - title: 'React 18 for app developers', - description: 'Shruti Kapoor', - url: 'https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2', - image: { - speakers: ['https://i.imgur.com/cyaiwpP.jpg'], - }, - }, - { - id: 2, - title: 'Streaming Server Rendering with Suspense', - description: 'Shaundai Person', - url: 'https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3', - image: { - speakers: ['https://i.imgur.com/RUmFLhB.jpg'], - }, - }, - { - id: 3, - title: 'The first React Working Group', - description: 'Aakansha Doshi', - url: 'https://www.youtube.com/watch?v=qn7gRClrC9U&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=4', - image: { - speakers: ['https://i.imgur.com/xRs64T1.jpg'], - }, - }, - { - id: 4, - title: 'React Developer Tooling', - description: 'Brian Vaughn', - url: 'https://www.youtube.com/watch?v=oxDfrke8rZg&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=5', - image: { - speakers: ['https://i.imgur.com/IasQNDL.jpg'], - }, - }, - { - id: 5, - title: 'React without memo', - description: 'Xuan Huang (黄玄)', - url: 'https://www.youtube.com/watch?v=lGEMwh32soc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=6', - image: { - speakers: ['https://i.imgur.com/Zloqi0V.jpg'], - }, - }, - { - id: 6, - title: 'React Docs Keynote', - description: 'Rachel Nabors', - url: 'https://www.youtube.com/watch?v=mneDaMYOKP8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=7', - image: { - speakers: ['https://i.imgur.com/NkwwAZF.png'], - }, - }, - { - id: 7, - title: 'Things I learnt from the new React docs', - description: "Debbie O'Brien", - url: 'https://www.youtube.com/watch?v=-7odLW_hG7s&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=8', - image: { - speakers: ['https://i.imgur.com/uhF5Hyo.jpg'], - }, - }, - { - id: 8, - title: 'Learning in the Browser', - description: 'Sarah Rainsberger', - url: 'https://www.youtube.com/watch?v=5X-WEQflCL0&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=9', - image: { - speakers: ['https://i.imgur.com/s36xhcT.jpg'], - }, - }, - { - id: 9, - title: 'The ROI of Designing with React', - description: 'Linton Ye', - url: 'https://www.youtube.com/watch?v=7cPWmID5XAk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=10', - image: { - speakers: ['https://i.imgur.com/Frxfjpq.jpg'], - }, - }, - { - id: 10, - title: 'Interactive playgrounds with React', - description: 'Delba de Oliveira', - url: 'https://www.youtube.com/watch?v=zL8cz2W0z34&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=11', - image: { - speakers: ['https://i.imgur.com/N1zNMrC.jpg'], - }, - }, - { - id: 11, - title: 'Re-introducing Relay', - description: 'Robert Balicki', - url: 'https://www.youtube.com/watch?v=lhVGdErZuN4&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=12', - image: { - speakers: ['https://i.imgur.com/vxgsVlt.jpg'], - }, - }, - { - id: 12, - title: 'React Native Desktop', - description: 'Eric Rozell and Steven Moyes', - url: 'https://www.youtube.com/watch?v=9L4FFrvwJwY&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=13', - image: { - speakers: [ - 'https://i.imgur.com/roifbxu.jpg', - 'https://i.imgur.com/Y0k7sBd.jpg', - ], - }, - }, - { - id: 13, - title: 'On-device Machine Learning for React Native', - description: 'Roman Rädle', - url: 'https://www.youtube.com/watch?v=NLj73vrc2I8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=14', - image: { - speakers: ['https://i.imgur.com/pECN2Yi.jpg'], - }, - }, - { - id: 14, - title: 'React 18 for External Store Libraries', - description: 'Daishi Kato', - url: 'https://www.youtube.com/watch?v=oPfSC5bQPR8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=15', - image: { - speakers: ['https://i.imgur.com/NqPgNiJ.jpg'], - }, - }, - { - id: 15, - title: 'Building accessible components with React 18', - description: 'Diego Haz', - url: 'https://www.youtube.com/watch?v=dcm8fjBfro8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=16', - image: { - speakers: ['https://i.imgur.com/47mWLlJ.jpg'], - }, - }, - { - id: 16, - title: 'Accessible Japanese Form Components with React', - description: 'Tafu Nakazaki', - url: 'https://www.youtube.com/watch?v=S4a0QlsH0pU&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=17', - image: { - speakers: ['https://i.imgur.com/yJvnZQy.jpg'], - }, - }, - { - id: 17, - title: 'UI Tools for artists', - description: 'Lyle Troxell', - url: 'https://www.youtube.com/watch?v=b3l4WxipFsE&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=18', - image: { - speakers: ['https://i.imgur.com/cs03udp.jpg'], - }, - }, - { - id: 18, - title: 'Hydrogen + React 18', - description: 'Helen Lin', - url: 'https://www.youtube.com/watch?v=HS6vIYkSNks&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=19', - image: { - speakers: ['https://i.imgur.com/4S4N5n1.jpg'], - }, - }, - ]; - + const [slug, setSlug] = useState('react-conf-2021'); return (
@@ -811,14 +635,11 @@ import { Suspense } from 'react'; async function ConferencePage({ slug }) { const conf = await db.Confs.find({ slug }); return ( -
- -

{conf.name}

- - }> + + }> -
+ ); } @@ -831,24 +652,13 @@ async function Talks({ confId }) {
- +
- +
@@ -874,35 +684,13 @@ function ExamplePanel({children, noPadding, noShadow, height}) { ); } -function BrowserChrome({ - children, - setConfPromise, - setPlaylistPromise, - hasRefresh, - domain, - path, -}) { +function BrowserChrome({children, hasRefresh, domain, path}) { const [restartId, setRestartId] = useState(0); - const confDelay = 100; - const playlistDelay = 1200; - function handleRestart() { - const confPromise = new Promise((resolve) => { - setTimeout(() => { - confPromise._resolved = true; - resolve(); - }, confDelay); - }); - const playlistPromise = new Promise((resolve) => { - setTimeout(() => { - playlistPromise._resolved = true; - resolve(); - }, playlistDelay); - }); - setConfPromise(confPromise); - setPlaylistPromise(playlistPromise); - setRestartId((id) => id + 1); + confCache = new Map(); + talksCache = new Map(); + setRestartId((i) => i + 1); } return ( @@ -933,54 +721,28 @@ function BrowserChrome({ key={restartId} className="z-10 loading h-0.5 bg-link transition-all duration-200 absolute bottom-0 left-0" style={{ - animation: `progressbar ${playlistDelay + 100}ms linear`, + animation: `progressbar ${loadTalksDelay + 100}ms linear`, }} /> )}
-
{children}
+
{children}
); } -function ConfPage({conf, isLoading, confPromise, playlistPromise}) { - if (confPromise && !confPromise._resolved) { - throw confPromise; - } +function ConferencePage({slug}) { + const conf = use(fetchConf(slug)); return ( -
- - - - }> - + + }> + -
+ ); } -function PlaylistLoading() { +function TalksLoading() { return (
@@ -1028,16 +790,14 @@ function PlaylistLoading() { ); } -function Talks({conf, playlistPromise}) { - if (playlistPromise && !playlistPromise._resolved) { - throw playlistPromise; - } - return ; +function Talks({confId}) { + const videos = use(fetchTalks(confId)); + return ; } -function SearchableVideoList({allVideos}) { +function SearchableVideoList({videos}) { const [query, setQuery] = useState(''); - const matchingVideos = findVideos(allVideos, query); + const matchingVideos = findVideos(videos, query); const emptyHeading = `No matches for "${query}"`; return ( <> @@ -1107,6 +867,38 @@ function SearchInput({value, onChange}) { ); } +function ConferenceLayout({conf, children}) { + const isPending = false; // TODO + return ( +
+ + + + {children} +
+ ); +} + function Cover({background, children}) { return (
@@ -1870,3 +1662,268 @@ function WebIcons() {
); } + +// TODO: upgrade React and use the built-in version. +function use(promise) { + if (promise.status === 'fulfilled') { + return promise.value; + } else if (promise.status === 'rejected') { + throw promise.reason; + } else if (promise.status === 'pending') { + throw promise; + } else { + promise.status = 'pending'; + promise.then( + (result) => { + promise.status = 'fulfilled'; + promise.value = result; + }, + (reason) => { + promise.status = 'rejected'; + promise.reason = reason; + } + ); + throw promise; + } +} + +let confCache = new Map(); +let talksCache = new Map(); +const loadTalksDelay = 1500; + +function fetchConf(slug) { + if (confCache.has(slug)) { + return confCache.get(slug); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + if (slug === 'react-conf-2021') { + resolve({ + id: 0, + cover: 'https://i.imgur.com/zBJvLHG.jpg', + name: 'React Conf 2021', + }); + } else if (slug === 'react-conf-2019') { + resolve({ + id: 1, + cover: + 'https://techcrunch.com/wp-content/uploads/2014/06/screenshot-2014-06-18-16-31-30.png', + name: 'React Conf 2019', + }); + } + }, loadTalksDelay - 2000); + }); + confCache.set(slug, promise); + return promise; +} + +function fetchTalks(confId) { + if (talksCache.has(confId)) { + return talksCache.get(confId); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + if (confId === 0) { + resolve([ + { + id: 0, + title: 'React 18 Keynote', + description: + 'Andrew Clark, Lauren Tan, Juan Tejada, and Ricky Hanlon', + url: 'https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=1', + image: { + speakers: [ + 'https://i.imgur.com/D69ZvSY.jpg', + 'https://i.imgur.com/RznoMDK.jpg', + 'https://i.imgur.com/CeGgjK3.jpg', + 'https://i.imgur.com/tK5OEus.jpg', + ], + }, + }, + { + id: 1, + title: 'React 18 for app developers', + description: 'Shruti Kapoor', + url: 'https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2', + image: { + speakers: ['https://i.imgur.com/cyaiwpP.jpg'], + }, + }, + { + id: 2, + title: 'Streaming Server Rendering with Suspense', + description: 'Shaundai Person', + url: 'https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3', + image: { + speakers: ['https://i.imgur.com/RUmFLhB.jpg'], + }, + }, + { + id: 3, + title: 'The first React Working Group', + description: 'Aakansha Doshi', + url: 'https://www.youtube.com/watch?v=qn7gRClrC9U&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=4', + image: { + speakers: ['https://i.imgur.com/xRs64T1.jpg'], + }, + }, + { + id: 4, + title: 'React Developer Tooling', + description: 'Brian Vaughn', + url: 'https://www.youtube.com/watch?v=oxDfrke8rZg&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=5', + image: { + speakers: ['https://i.imgur.com/IasQNDL.jpg'], + }, + }, + { + id: 5, + title: 'React without memo', + description: 'Xuan Huang (黄玄)', + url: 'https://www.youtube.com/watch?v=lGEMwh32soc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=6', + image: { + speakers: ['https://i.imgur.com/Zloqi0V.jpg'], + }, + }, + { + id: 6, + title: 'React Docs Keynote', + description: 'Rachel Nabors', + url: 'https://www.youtube.com/watch?v=mneDaMYOKP8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=7', + image: { + speakers: ['https://i.imgur.com/NkwwAZF.png'], + }, + }, + { + id: 7, + title: 'Things I learnt from the new React docs', + description: "Debbie O'Brien", + url: 'https://www.youtube.com/watch?v=-7odLW_hG7s&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=8', + image: { + speakers: ['https://i.imgur.com/uhF5Hyo.jpg'], + }, + }, + { + id: 8, + title: 'Learning in the Browser', + description: 'Sarah Rainsberger', + url: 'https://www.youtube.com/watch?v=5X-WEQflCL0&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=9', + image: { + speakers: ['https://i.imgur.com/s36xhcT.jpg'], + }, + }, + { + id: 9, + title: 'The ROI of Designing with React', + description: 'Linton Ye', + url: 'https://www.youtube.com/watch?v=7cPWmID5XAk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=10', + image: { + speakers: ['https://i.imgur.com/Frxfjpq.jpg'], + }, + }, + { + id: 10, + title: 'Interactive playgrounds with React', + description: 'Delba de Oliveira', + url: 'https://www.youtube.com/watch?v=zL8cz2W0z34&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=11', + image: { + speakers: ['https://i.imgur.com/N1zNMrC.jpg'], + }, + }, + { + id: 11, + title: 'Re-introducing Relay', + description: 'Robert Balicki', + url: 'https://www.youtube.com/watch?v=lhVGdErZuN4&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=12', + image: { + speakers: ['https://i.imgur.com/vxgsVlt.jpg'], + }, + }, + { + id: 12, + title: 'React Native Desktop', + description: 'Eric Rozell and Steven Moyes', + url: 'https://www.youtube.com/watch?v=9L4FFrvwJwY&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=13', + image: { + speakers: [ + 'https://i.imgur.com/roifbxu.jpg', + 'https://i.imgur.com/Y0k7sBd.jpg', + ], + }, + }, + { + id: 13, + title: 'On-device Machine Learning for React Native', + description: 'Roman Rädle', + url: 'https://www.youtube.com/watch?v=NLj73vrc2I8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=14', + image: { + speakers: ['https://i.imgur.com/pECN2Yi.jpg'], + }, + }, + { + id: 14, + title: 'React 18 for External Store Libraries', + description: 'Daishi Kato', + url: 'https://www.youtube.com/watch?v=oPfSC5bQPR8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=15', + image: { + speakers: ['https://i.imgur.com/NqPgNiJ.jpg'], + }, + }, + { + id: 15, + title: 'Building accessible components with React 18', + description: 'Diego Haz', + url: 'https://www.youtube.com/watch?v=dcm8fjBfro8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=16', + image: { + speakers: ['https://i.imgur.com/47mWLlJ.jpg'], + }, + }, + { + id: 16, + title: 'Accessible Japanese Form Components with React', + description: 'Tafu Nakazaki', + url: 'https://www.youtube.com/watch?v=S4a0QlsH0pU&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=17', + image: { + speakers: ['https://i.imgur.com/yJvnZQy.jpg'], + }, + }, + { + id: 17, + title: 'UI Tools for artists', + description: 'Lyle Troxell', + url: 'https://www.youtube.com/watch?v=b3l4WxipFsE&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=18', + image: { + speakers: ['https://i.imgur.com/cs03udp.jpg'], + }, + }, + { + id: 18, + title: 'Hydrogen + React 18', + description: 'Helen Lin', + url: 'https://www.youtube.com/watch?v=HS6vIYkSNks&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=19', + image: { + speakers: ['https://i.imgur.com/4S4N5n1.jpg'], + }, + }, + ]); + } else if (confId === 1) { + resolve([ + { + id: 19, + title: 'Some stuff', + description: 'Andrew Clark, Lauren Tan', + url: 'https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=1', + image: { + speakers: [ + 'https://i.imgur.com/D69ZvSY.jpg', + 'https://i.imgur.com/RznoMDK.jpg', + ], + }, + }, + ]); + } + }, loadTalksDelay); + }); + talksCache.set(confId, promise); + return promise; +}