Update suspense lecture

Author: ryanflorence

09-suspense/exercise/package.json

@@ -4,9 +4,9 @@
   "private": true,
   "dependencies": {
     "@reach/router": "^1.2.1",
-    "react": "../vendor/react",
-    "react-dom": "../vendor/react-dom",
-    "simple-cache-provider": "../vendor/simple-cache-provider"
+    "react": "^16.7.0-alpha.0",
+    "react-cache": "^2.0.0-alpha.0",
+    "react-dom": "^16.7.0-alpha.0"
   },
   "devDependencies": {
     "react-scripts": "1.0.10"

09-suspense/exercise/src/App.solution.js

@@ -1,6 +1,5 @@
-import React, { Placeholder } from "react";
-import { cache } from "./lib/cache";
-import { createResource } from "simple-cache-provider";
+import React, { Suspense } from "react";
+import { unstable_createResource as createResource } from "react-cache";
 import { Router, Link } from "@reach/router";
 
 let ContactsResource = createResource(async path => {
@@ -23,11 +22,11 @@ let ImageResource = createResource(src => {
 
 function Img({ src, ...props }) {
   // eslint-disable-next-line jsx-a11y/alt-text
-  return <img src={ImageResource.read(cache, src)} {...props} />;
+  return <img src={ImageResource.read(src)} {...props} />;
 }
 
 function Home() {
-  let { contacts } = ContactsResource.read(cache, "/contacts");
+  let { contacts } = ContactsResource.read("/contacts");
   return (
     <div>
       <h1>Contacts</h1>
@@ -45,20 +44,20 @@ function Home() {
 }
 
 function Contact({ id }) {
-  let { contact } = ContactsResource.read(cache, `/contacts/${id}`);
+  let { contact } = ContactsResource.read(`/contacts/${id}`);
   return (
     <div>
       <h1>
         {contact.first} {contact.last}
       </h1>
       <p>
-        <Placeholder delayMs={250} fallback={<span>Loading...</span>}>
+        <Suspense maxDuration={1000} fallback={<span>Loading...</span>}>
           <Img
             alt={`${contact.first} smiling, maybe`}
             height="250"
             src={contact.avatar}
           />
-        </Placeholder>
+        </Suspense>
       </p>
       <p>
         <Link to="/">Home</Link>
@@ -68,8 +67,10 @@ function Contact({ id }) {
 }
 
 export default () => (
-  <Router>
-    <Home path="/" />
-    <Contact path=":id" />
-  </Router>
+  <Suspense maxDuration={3000} fallback={<div>Loading...</div>}>
+    <Router>
+      <Home path="/" />
+      <Contact path=":id" />
+    </Router>
+  </Suspense>
 );

09-suspense/exercise/src/App.start.js

@@ -35,9 +35,8 @@ function sleep(ms=1000) {
 
 */
 
-import React from "react";
-import { cache } from "./lib/cache";
-import { createResource } from "simple-cache-provider";
+import React, { Suspense } from "react";
+import { unstable_createResource as createResource } from "react-cache";
 import { Router, Link } from "@reach/router";
 
 let ContactsResource = createResource(async path => {
@@ -47,7 +46,7 @@ let ContactsResource = createResource(async path => {
 });
 
 function Home() {
-  let { contacts } = ContactsResource.read(cache, "/contacts");
+  let { contacts } = ContactsResource.read("/contacts");
   return (
     <div>
       <h1>Contacts</h1>
@@ -95,8 +94,10 @@ function Contact({ id }) {
 }
 
 export default () => (
-  <Router>
-    <Home path="/" />
-    <Contact path=":id" />
-  </Router>
+  <Suspense maxDuration={3000} fallback={<div>Loading...</div>}>
+    <Router>
+      <Home path="/" />
+      <Contact path=":id" />
+    </Router>
+  </Suspense>
 );

09-suspense/exercise/src/index.js

@@ -1,10 +1,6 @@
-import React, { Placeholder } from "react";
+import React from "react";
 import "./lib/index.css";
+import { createRoot } from "react-dom";
 import App from "./App.start";
-import { unstable_createRoot } from "react-dom";
 
-unstable_createRoot(document.getElementById("root")).render(
-  <Placeholder delayMs={1000} fallback={<div>Loading...</div>}>
-    <App />
-  </Placeholder>
-);
+createRoot(document.getElementById("root")).render(<App />);

09-suspense/exercise/yarn.lock

@@ -6538,6 +6538,11 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7, rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-cache@^2.0.0-alpha.0:
+  version "2.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/react-cache/-/react-cache-2.0.0-alpha.0.tgz#d02d16a4565fd9f12478a2a41e980ba4fcbab4d5"
+  integrity sha512-o7nA1dIbi6wOoIoQPQBL58CgIQ4tCA3itIR3WlE2VHMIFkIXbvsMyolg+Q9wDVUlCvU6b2n40RTTv8vOmjXCOQ==
+
 react-dev-utils@^3.0.2, react-dev-utils@^3.1.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-3.1.2.tgz#9c8647abf83545e1dd269a218fda4f2a246c4593"
@@ -6563,12 +6568,15 @@ react-dev-utils@^3.0.2, react-dev-utils@^3.1.0:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-react-dom@../vendor/react-dom:
-  version "16.4.1"
+react-dom@^16.7.0-alpha.0:
+  version "16.7.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0-alpha.0.tgz#8379158d4c76d63c989f325f45dfa5762582584f"
+  integrity sha512-/XUn1ldxmoV2B7ov0rWT5LMZaaHMlF9GGLkUsmPRxmWTJwRDOuAPXidSaSlmR/VOhDSI1s+v3+KzFqhhDFJxYA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
+    scheduler "^0.11.0-alpha.0"
 
 react-error-overlay@^1.0.9:
   version "1.0.10"
@@ -6631,12 +6639,15 @@ [email protected]:
   optionalDependencies:
     fsevents "1.1.2"
 
-react@../vendor/react:
-  version "16.4.1"
+react@^16.7.0-alpha.0:
+  version "16.7.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.7.0-alpha.0.tgz#e2ed4abe6f268c9b092a1d1e572953684d1783a9"
+  integrity sha512-V0za4H01aoAF0SdzahHepvfvzTQ1xxkgMX4z8uKzn+wzZAlVk0IVpleqyxZWluqmdftNedj6fIIZRO/rVYVFvQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
+    scheduler "^0.11.0-alpha.0"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -7082,6 +7093,14 @@ sax@^1.2.1, sax@^1.2.4, sax@~1.2.1:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+scheduler@^0.11.0-alpha.0:
+  version "0.11.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.0-alpha.0.tgz#7b132c726608993471db07866f2d59a52b9e190b"
+  integrity sha512-0tUDHYSyni/EHkMMBysVXVwfanCWWbLsulnDB1tGrQiWWrVuRVoclWCPHCYC/1iR5Rj34EQhxh3/F36V+F+ZpA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
@@ -7254,9 +7273,6 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
   integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
 
-simple-cache-provider@../vendor/simple-cache-provider:
-  version "0.7.0"
-
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"

09-suspense/lecture/package.json

@@ -6,10 +6,10 @@
     "@reach/component-component": "^0.1.1",
     "@reach/router": "^1.2.1",
     "glamor": "^2.20.40",
-    "react": "../vendor/react",
-    "react-dom": "../vendor/react-dom",
-    "react-svg-spinner": "^1.0.1",
-    "simple-cache-provider": "../vendor/simple-cache-provider"
+    "react": "16.6",
+    "react-cache": "^2.0.0-alpha.0",
+    "react-dom": "16.6",
+    "react-svg-spinner": "^1.0.1"
   },
   "devDependencies": {
     "react-scripts": "1.0.10"

09-suspense/lecture/src/App.Refactor.js

@@ -3,12 +3,11 @@
 
 import { createElement } from "glamor/react"; // eslint-disable-line
 /* @jsx createElement */
-import React, { Placeholder } from "react";
+import React, { Suspense } from "react";
 import { Router, Link } from "@reach/router";
 import Spinner from "react-svg-spinner";
 import Competitions from "./lib/Competitions";
 import ManageScroll from "./lib/ManageScroll";
-import { cache } from "./lib/cache";
 
 import {
   fetchWorkout,
@@ -40,7 +39,6 @@ class Workout extends React.Component {
       this.setState({ exercises });
     });
     fetchNextWorkout(workoutId).then(nextWorkout => {
-      console.log(nextWorkout);
       this.setState({ nextWorkout });
     });
   }
@@ -115,7 +113,7 @@ const Home = () => (
 );
 
 const Workouts = () => {
-  const workouts = WorkoutsResource.read(cache, 10);
+  const workouts = WorkoutsResource.read(10);
   return (
     <div>
       <Link to="..">Home</Link>
@@ -145,15 +143,15 @@ const NextWorkout = ({ nextWorkout }) => {
 
 const App = () => {
   return (
-    <Placeholder delayMs={patience} fallback={<Spinner size="100" />}>
+    <Suspense maxDuration={patience} fallback={<Spinner size="100" />}>
       <ManageScroll />
       <Router style={{ padding: 20 }}>
         <Home path="/" />
         <Workouts path="workouts" />
         <Workout path="workouts/:workoutId" />
         <Competitions path="competitions" />
       </Router>
-    </Placeholder>
+    </Suspense>
   );
 };
 

09-suspense/lecture/src/App.js

@@ -1,6 +1,6 @@
 import { createElement } from "glamor/react"; // eslint-disable-line
 /* @jsx createElement */
-import React, { Placeholder, lazy } from "react";
+import React, { Suspense, lazy } from "react";
 import { Router, Link } from "@reach/router";
 import Component from "@reach/component-component";
 import Spinner from "react-svg-spinner";
@@ -12,7 +12,6 @@ import {
   NextWorkoutResource,
   network
 } from "./lib/utils";
-import { cache } from "./lib/cache";
 
 const Competitions = lazy(() => import("./lib/Competitions"));
 
@@ -85,57 +84,57 @@ const Home = () => (
 );
 
 const Workouts = () => {
-  const workouts = WorkoutsResource.read(cache, 10);
+  const workouts = WorkoutsResource.read(10);
   return (
     <div>
       <Link to="..">Home</Link>
       <h1>Workouts</h1>
       {workouts.map(workout => (
-        <LoadingLink key={workout.id} to={workout.id} css={link}>
+        <Link key={workout.id} to={workout.id} css={link}>
           {workout.name}
-        </LoadingLink>
+        </Link>
       ))}
     </div>
   );
 };
 
 const Exercises = ({ workoutId }) => {
-  const exercises = ExercisesResource.read(cache, workoutId);
+  const exercises = ExercisesResource.read(workoutId);
   return <ul>{exercises.map((exercise, i) => <li key={i}>{exercise}</li>)}</ul>;
 };
 
 class Workout extends React.Component {
   render() {
     const { workoutId } = this.props;
 
-    const workout = WorkoutResource.read(cache, workoutId);
+    const workout = WorkoutResource.read(workoutId);
 
     return (
       <div>
         <Link to="../..">Home</Link> / <Link to="..">Workouts</Link>
         <h1>{workout.name}</h1>
-        <Placeholder delayMs={patience} fallback={<Spinner size="150" />}>
+        <Suspense maxDuration={patience} fallback={<Spinner size="150" />}>
           <Exercises workoutId={workoutId} />
-        </Placeholder>
+        </Suspense>
         {workout.completed && (
-          <Placeholder
-            delayMs={patience}
+          <Suspense
+            maxDuration={patience}
             fallback={
               <h2>
                 Up Next! <Spinner size="0.75em" />
               </h2>
             }
           >
             <NextWorkout workoutId={workoutId} />
-          </Placeholder>
+          </Suspense>
         )}
       </div>
     );
   }
 }
 
 const NextWorkout = ({ workoutId }) => {
-  const nextWorkout = NextWorkoutResource.read(cache, workoutId);
+  const nextWorkout = NextWorkoutResource.read(workoutId);
   return (
     <div>
       <h2>
@@ -168,15 +167,15 @@ const Network = () => (
 const App = () => {
   return (
     <React.Fragment>
-      <Placeholder delayMs={patience} fallback={<Spinner size="100" />}>
+      <Suspense maxDuration={patience} fallback={<Spinner size="100" />}>
         <ManageScroll />
         <Router style={{ padding: 20 }}>
           <Home path="/" />
           <Workouts path="workouts" />
           <Workout path="workouts/:workoutId" />
           <Competitions path="competitions" />
         </Router>
-      </Placeholder>
+      </Suspense>
       <Network />
     </React.Fragment>
   );

09-suspense/lecture/src/index.js

@@ -1,6 +1,6 @@
 import "./lib/index.css";
 import React from "react";
 import { unstable_createRoot } from "react-dom";
-import App from "./App";
+import App from "./App.Refactor";
 
 unstable_createRoot(document.getElementById("root")).render(<App />);