From ccae668fcaa0bc991505d24a4781af5abc3e5f25 Mon Sep 17 00:00:00 2001 From: Ryan Florence Date: Mon, 1 Oct 2018 22:44:25 -0400 Subject: [PATCH] Clean up suspense lecture code --- .../{workouts/Refactor.js => App.Refactor.js} | 151 ++++------ .../src/{workouts/AppOld.js => App.js} | 179 ++++++----- 08-suspense/lecture/src/components/App.js | 70 ----- .../src/components/ContributorListPage.js | 74 ----- .../lecture/src/components/Spinner.css | 75 ----- 08-suspense/lecture/src/components/Spinner.js | 51 ---- .../lecture/src/components/UserPage.js | 169 ----------- 08-suspense/lecture/src/favicon.ico | Bin 15086 -> 0 bytes 08-suspense/lecture/src/index.js | 6 +- .../src/{workouts => lib}/Competitions.js | 0 .../src/{components => lib}/ManageScroll.js | 0 08-suspense/lecture/src/{ => lib}/cache.js | 0 08-suspense/lecture/src/{ => lib}/index.css | 0 .../lecture/src/{workouts => lib}/utils.js | 66 +++- 08-suspense/lecture/src/workouts/App.js | 283 ------------------ 08-suspense/lecture/src/workouts/Img.js | 20 -- 08-suspense/lecture/src/workouts/withCache.js | 8 - 17 files changed, 215 insertions(+), 937 deletions(-) rename 08-suspense/lecture/src/{workouts/Refactor.js => App.Refactor.js} (75%) rename 08-suspense/lecture/src/{workouts/AppOld.js => App.js} (51%) delete mode 100644 08-suspense/lecture/src/components/App.js delete mode 100644 08-suspense/lecture/src/components/ContributorListPage.js delete mode 100644 08-suspense/lecture/src/components/Spinner.css delete mode 100644 08-suspense/lecture/src/components/Spinner.js delete mode 100644 08-suspense/lecture/src/components/UserPage.js delete mode 100644 08-suspense/lecture/src/favicon.ico rename 08-suspense/lecture/src/{workouts => lib}/Competitions.js (100%) rename 08-suspense/lecture/src/{components => lib}/ManageScroll.js (100%) rename 08-suspense/lecture/src/{ => lib}/cache.js (100%) rename 08-suspense/lecture/src/{ => lib}/index.css (100%) rename 08-suspense/lecture/src/{workouts => lib}/utils.js (79%) delete mode 100644 08-suspense/lecture/src/workouts/App.js delete mode 100644 08-suspense/lecture/src/workouts/Img.js delete mode 100644 08-suspense/lecture/src/workouts/withCache.js diff --git a/08-suspense/lecture/src/workouts/Refactor.js b/08-suspense/lecture/src/App.Refactor.js similarity index 75% rename from 08-suspense/lecture/src/workouts/Refactor.js rename to 08-suspense/lecture/src/App.Refactor.js index 0c6dbf7..3de4a94 100644 --- a/08-suspense/lecture/src/workouts/Refactor.js +++ b/08-suspense/lecture/src/App.Refactor.js @@ -3,84 +3,23 @@ import { createElement } from "glamor/react"; // eslint-disable-line /* @jsx createElement */ -import Spinner from "react-svg-spinner"; -import ManageScroll from "../components/ManageScroll"; import React, { Placeholder } from "react"; import { Router, Link } from "@reach/router"; -import Component from "@reach/component-component"; +import Spinner from "react-svg-spinner"; +import Competitions from "./lib/Competitions"; +import ManageScroll from "./lib/ManageScroll"; +import { cache } from "./lib/cache"; + import { - fetchWorkouts, fetchWorkout, fetchExercises, fetchNextWorkout, - WorkoutsResource, - WorkoutResource, - ExercisesResource, - NextWorkoutResource, - network -} from "./utils"; -import { cache } from "../cache"; -let patience = 1; - -const link = { - display: "inline-block", - width: "200px", - height: "200px", - lineHeight: "200px", - background: "#f0f0f0", - textAlign: "center", - margin: "20px", - ":hover": { - background: "#ddd" - }, - position: "relative" -}; + WorkoutsResource +} from "./lib/utils"; -const Home = () => ( -
-

Workout App!

-
- - Workouts - - - Competitions - -
-
-); - -const Workouts = () => { - const workouts = WorkoutsResource.read(cache, 10); - return ( -
- Home -

Workouts

- {workouts.map(workout => ( - - {workout.name} - - ))} -
- ); -}; - -const Competitions = () =>
Competitions
; - -const LoadingSpinner = () => ( -
- -
-); +let patience = 1; /////////////////////////////////////////////////// - class Workout extends React.Component { state = { workout: null, @@ -118,19 +57,13 @@ class Workout extends React.Component { } render() { - const { workoutId } = this.props; const { workout, exercises, nextWorkout } = this.state; return workout ? (
- Home /{" "} - Workouts + Home / Workouts

{workout.name}

- {exercises ? ( - - ) : ( - - )} + {exercises ? : } {workout.completed && (nextWorkout ? ( @@ -146,24 +79,65 @@ class Workout extends React.Component { } } -const Exercises = ({ exercises }) => { +//////////////////////////////////////////////////////////// +const link = { + display: "inline-block", + width: "200px", + height: "200px", + lineHeight: "200px", + background: "#f0f0f0", + textAlign: "center", + margin: "20px", + ":hover": { + background: "#ddd" + }, + position: "relative" +}; + +const Home = () => ( +
+

Workout App!

+
+ + Workouts + + + Competitions + +
+
+); + +const Workouts = () => { + const workouts = WorkoutsResource.read(cache, 10); return ( -
    - {exercises.map((exercise, i) => ( -
  • {exercise}
    • +
    + Home +

    Workouts

    + {workouts.map(workout => ( + + {workout.name} + ))} -
+
); }; +const Exercises = ({ exercises }) => { + return ; +}; + const NextWorkout = ({ nextWorkout }) => { return (

- Up Next!{" "} - - {nextWorkout.name} - + Up Next! {nextWorkout.name}

); @@ -171,10 +145,7 @@ const NextWorkout = ({ nextWorkout }) => { const App = () => { return ( - } - > + }> diff --git a/08-suspense/lecture/src/workouts/AppOld.js b/08-suspense/lecture/src/App.js similarity index 51% rename from 08-suspense/lecture/src/workouts/AppOld.js rename to 08-suspense/lecture/src/App.js index 33ba5e3..30c7b06 100644 --- a/08-suspense/lecture/src/workouts/AppOld.js +++ b/08-suspense/lecture/src/App.js @@ -1,27 +1,31 @@ import { createElement } from "glamor/react"; // eslint-disable-line /* @jsx createElement */ -import "./index.css"; -import Spinner from "react-svg-spinner"; -import ManageScroll from "../components/ManageScroll"; -import React, { Placeholder } from "react"; +import React, { Placeholder, lazy } from "react"; import { Router, Link } from "@reach/router"; import Component from "@reach/component-component"; +import Spinner from "react-svg-spinner"; +import ManageScroll from "./lib/ManageScroll"; import { - readWorkouts, - readWorkout, - readExercises, - readNextWorkout, - patience -} from "./utils"; -// import Img, { preload as preloadImg } from "./Img"; -import { cache } from "../cache"; + WorkoutsResource, + WorkoutResource, + ExercisesResource, + NextWorkoutResource, + network +} from "./lib/utils"; +import { cache } from "./lib/cache"; + +const Competitions = lazy(() => import("./lib/Competitions")); + +let qpatience = [5000, 5000, 1, 1, 2000, 2000, 2000]; +let search = window.location.search.substr(1); +let patience = qpatience[search] || 10000; const link = { display: "inline-block", width: "200px", height: "200px", lineHeight: "200px", - background: "#fff", + background: "#eee", textAlign: "center", margin: "20px", ":hover": { @@ -30,26 +34,7 @@ const link = { position: "relative" }; -const Home = () => ( -
-

Workout App!

-
- - Workouts - - - Competitions - -
-
-); - +// use ?1 const LoadingLink = ({ children, ...props }) => ( {({ state, setState }) => ( @@ -79,63 +64,78 @@ const LoadingLink = ({ children, ...props }) => ( ); +const Home = () => ( +
+

Workout App!

+
+ + Workouts + + + Competitions + +
+
+); + const Workouts = () => { - const workouts = readWorkouts.read(cache, 10); + const workouts = WorkoutsResource.read(cache, 10); return (
Home

Workouts

{workouts.map(workout => ( - + {workout.name} - + ))}
); }; const Exercises = ({ workoutId }) => { - const exercises = readExercises.read(cache, workoutId); - return ( -
    - {exercises.map((exercise, i) => ( -
  • {exercise}
    • - ))} -
- ); + const exercises = ExercisesResource.read(cache, workoutId); + return
    {exercises.map((exercise, i) =>
  • {exercise}
    • )}
; }; -const Workout = ({ workoutId }) => { - readNextWorkout.preload(cache, workoutId); - readWorkout.preload(cache, workoutId); - readExercises.preload(cache, workoutId); - const workout = readWorkout.read(cache, workoutId); +class Workout extends React.Component { + render() { + const { workoutId } = this.props; - return ( -
- Home / Workouts -

{workout.name}

- }> - - - {workout.completed && ( - - Up Next! - - } - > - + const workout = WorkoutResource.read(cache, workoutId); + + return ( +
+ Home / Workouts +

{workout.name}

+ }> + - )} -
- ); -}; + {workout.completed && ( + + Up Next! + + } + > + + + )} +
+ ); + } +} const NextWorkout = ({ workoutId }) => { - const nextWorkout = readNextWorkout.read(cache, workoutId); + const nextWorkout = NextWorkoutResource.read(cache, workoutId); return (

@@ -145,25 +145,40 @@ const NextWorkout = ({ workoutId }) => { ); }; -const Competitions = () =>
Competitions
; - const LoadingSpinner = () => (
); +const Network = () => ( +
+ Network: {network} +
+); + const App = () => { return ( - }> - - - - - - - - + + }> + + + + + + + + + + ); }; diff --git a/08-suspense/lecture/src/components/App.js b/08-suspense/lecture/src/components/App.js deleted file mode 100644 index 7854e66..0000000 --- a/08-suspense/lecture/src/components/App.js +++ /dev/null @@ -1,70 +0,0 @@ -import React, { Placeholder, PureComponent, Fragment } from "react"; -import { unstable_deferredUpdates } from "react-dom"; -import { createResource } from "simple-cache-provider"; -import { cache } from "../cache"; -import Spinner from "./Spinner"; -import ContributorListPage from "./ContributorListPage"; -import { Router, Link, Location } from "@reach/router"; -import ManageScroll from "./ManageScroll"; - -const UserPageResource = createResource(() => import("./UserPage")); - -function UserPageLoader(props) { - const UserPage = UserPageResource.read(cache).default; - return ; -} - -class App extends PureComponent { - state = { - loadingId: null - }; - - handleUserClick = id => { - this.setState({ loadingId: id }); - }; - - render() { - const { loadingId } = this.state; - return ( - }> - - - ); - } -} - -class Detail extends PureComponent { - render() { - const { id } = this.props; - return ( -
- - Return to list - - }> - - -
- ); - } -} - -export default () => ( - - - - - - - -); diff --git a/08-suspense/lecture/src/components/ContributorListPage.js b/08-suspense/lecture/src/components/ContributorListPage.js deleted file mode 100644 index 3da8844..0000000 --- a/08-suspense/lecture/src/components/ContributorListPage.js +++ /dev/null @@ -1,74 +0,0 @@ -import React, { Fragment } from "react"; -import { createResource } from "simple-cache-provider"; -import { cache } from "../cache"; -import Spinner from "./Spinner"; -import { fetchCoreContributorListJSON } from "../api"; -import { Link } from "@reach/router"; - -const ContributorListResource = createResource(fetchCoreContributorListJSON); - -const ContributorListPage = ({ loadingId, onUserClick }) => ( - -

React Core Team

-
    - {ContributorListResource.read(cache).map(user => ( - onUserClick(user.id)} - isLoading={loadingId && user.id === loadingId} - user={user} - /> - ))} -
- -); - -const ContributorListItem = ({ isLoading, onClick, user }) => ( -
  • - -
    - {user.name} -
    {user.id}
    -
    - {isLoading ? ( - - ) : ( - - - - - )} - -
    • -); - -export default ContributorListPage; diff --git a/08-suspense/lecture/src/components/Spinner.css b/08-suspense/lecture/src/components/Spinner.css deleted file mode 100644 index 552c85b..0000000 --- a/08-suspense/lecture/src/components/Spinner.css +++ /dev/null @@ -1,75 +0,0 @@ -.Spinner { - animation: rotate 1.3s linear infinite; -} - -.SpinnerContainer-large { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -@keyframes rotate { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(270deg); } -} - -.SmallSpinnerPath { - stroke-dasharray: 100; - stroke-dashoffset: 0; - transform-origin: center; - animation: - SmallDash 1.3s ease-in-out infinite; -} - -@keyframes SmallDash { - 0% { stroke-dashoffset: 100; } - 50% { - stroke-dashoffset: 50; - transform:rotate(135deg); - } - 100% { - stroke-dashoffset: 100; - transform:rotate(450deg); - } -} - -.MediumSpinnerPath { - stroke-dasharray: 150; - stroke-dashoffset: 0; - transform-origin: center; - animation: - MediumDash 1.3s ease-in-out infinite; -} - -@keyframes MediumDash { - 0% { stroke-dashoffset: 150; } - 50% { - stroke-dashoffset: 50; - transform:rotate(135deg); - } - 100% { - stroke-dashoffset: 150; - transform:rotate(450deg); - } -} - -.LargeSpinnerPath { - stroke-dasharray: 200; - stroke-dashoffset: 0; - transform-origin: center; - animation: - LargeDash 1.3s ease-in-out infinite; -} - -@keyframes LargeDash { - 0% { stroke-dashoffset: 200; } - 50% { - stroke-dashoffset: 50; - transform:rotate(135deg); - } - 100% { - stroke-dashoffset: 200; - transform:rotate(450deg); - } -} diff --git a/08-suspense/lecture/src/components/Spinner.js b/08-suspense/lecture/src/components/Spinner.js deleted file mode 100644 index 8ea7251..0000000 --- a/08-suspense/lecture/src/components/Spinner.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import './Spinner.css'; - -const SPINNER_SIZES = { - small: 30, - medium: 50, - large: 70, -}; - -const STROKE_WIDTHS = { - small: 4, - medium: 5, - large: 6, -}; - -const PATH_CLASS_NAMES = { - small: 'SmallSpinnerPath', - medium: 'MediumSpinnerPath', - large: 'LargeSpinnerPath', -}; - -// Heavily inspired by https://codepen.io/mrrocks/pen/EiplA -export default function Spinner({size = 'small'}) { - const baseSize = SPINNER_SIZES[size]; - const pathSize = baseSize / 2; - const strokeWidth = STROKE_WIDTHS[size]; - const pathRadius = `${baseSize / 2 - strokeWidth}px`; - const className = PATH_CLASS_NAMES[size]; - const containerClassName = `SpinnerContainer SpinnerContainer-${size}`; - - return ( -
    - - - -
    - ); -} diff --git a/08-suspense/lecture/src/components/UserPage.js b/08-suspense/lecture/src/components/UserPage.js deleted file mode 100644 index a1b96de..0000000 --- a/08-suspense/lecture/src/components/UserPage.js +++ /dev/null @@ -1,169 +0,0 @@ -import React, {Placeholder} from 'react'; -import {createResource} from 'simple-cache-provider'; -import Spinner from './Spinner'; -import {cache} from '../cache'; -import {fetchUserProfileJSON, fetchUserRepositoriesListJSON} from '../api'; - -export default function UserPage({id}) { - return ( -
    - - }> - - -
    - ); -} - -const UserDetailsResource = createResource(fetchUserProfileJSON); - -function UserDetails({id}) { - const user = UserDetailsResource.read(cache, id); - return ( -
    - -
    - {user.name} -
    -
    {user.id}
    - {user.tagline !== null &&
    {user.tagline}
    } -
    - {user.location && } - {user.email && } -
    - ); -} - -const Location = ({location}) => ( -
    - - - - - {location} -
    -); - -const Email = ({email}) => ( -
    - - - - - {email} -
    -); - -const ImageResource = createResource( - src => - new Promise(resolve => { - const img = new Image(); - img.onload = () => resolve(src); - img.src = src; - }) -); - -function Img({src, alt, ...rest}) { - return {alt}; -} - -function UserPicture({source}) { - return ( - }> - profile picture - - ); -} - -const UserRepositoriesResource = createResource(fetchUserRepositoriesListJSON); - -function Repositories({id}) { - const repos = UserRepositoriesResource.read(cache, id); - return ( -
      - {repos.map(repo => )} -
    - ); -} - -function Repository({description, name, url}) { - return ( -
  • - - {name} - -
    {description}
    -
    • - ); -} diff --git a/08-suspense/lecture/src/favicon.ico b/08-suspense/lecture/src/favicon.ico deleted file mode 100644 index d392c1d17f50067c1d9ad519e14048d211269de3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15086 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 diff --git a/08-suspense/lecture/src/workouts/Competitions.js b/08-suspense/lecture/src/lib/Competitions.js similarity index 100% rename from 08-suspense/lecture/src/workouts/Competitions.js rename to 08-suspense/lecture/src/lib/Competitions.js diff --git a/08-suspense/lecture/src/components/ManageScroll.js b/08-suspense/lecture/src/lib/ManageScroll.js similarity index 100% rename from 08-suspense/lecture/src/components/ManageScroll.js rename to 08-suspense/lecture/src/lib/ManageScroll.js diff --git a/08-suspense/lecture/src/cache.js b/08-suspense/lecture/src/lib/cache.js similarity index 100% rename from 08-suspense/lecture/src/cache.js rename to 08-suspense/lecture/src/lib/cache.js diff --git a/08-suspense/lecture/src/index.css b/08-suspense/lecture/src/lib/index.css similarity index 100% rename from 08-suspense/lecture/src/index.css rename to 08-suspense/lecture/src/lib/index.css diff --git a/08-suspense/lecture/src/workouts/utils.js b/08-suspense/lecture/src/lib/utils.js similarity index 79% rename from 08-suspense/lecture/src/workouts/utils.js rename to 08-suspense/lecture/src/lib/utils.js index b8bf700..ed40711 100644 --- a/08-suspense/lecture/src/workouts/utils.js +++ b/08-suspense/lecture/src/lib/utils.js @@ -1,7 +1,15 @@ import { createResource } from "simple-cache-provider"; //////////////////////////////////////////////////////////// -let qnetworks = ["fast", "slow", "slow", "fast", "slow", "fast", "nextIsSlow"]; +let qnetworks = [ + "fast", + "slow", + "slow", + "fast", + "slow", + "fast", + "nextIsSlow" +]; let search = window.location.search.substr(1); let network = qnetworks[search] || "fast"; @@ -10,7 +18,8 @@ export { network }; //////////////////////////////////////////////////////////// -const sleep = (ms = 1000) => new Promise(res => setTimeout(res, ms)); +const sleep = (ms = 1000) => + new Promise(res => setTimeout(res, ms)); let token = null; @@ -42,9 +51,17 @@ const fakeWorkouts = [ completed: true }, { name: "Cardio", id: "cardio", completed: true }, - { name: "Lower Body", id: "lower", completed: false }, + { + name: "Lower Body", + id: "lower", + completed: false + }, { name: "Core", id: "core", completed: false }, - { name: "Upper Body", id: "upper-body", completed: false } + { + name: "Upper Body", + id: "upper-body", + completed: false + } ]; const fakeExercises = { @@ -63,7 +80,12 @@ const fakeExercises = { "jab punch sprawl", "burpees" ], - lower: ["lunges", "jump squats", "side-kicks", "hip raises"], + lower: [ + "lunges", + "jump squats", + "side-kicks", + "hip raises" + ], core: ["crunches"], "upper-body": ["curls"] }; @@ -99,6 +121,8 @@ export const fetchExercises = id => console.logTakeoff(`fetchExercises ${id}`); await sleep(2000); console.logLanding(`fetchExercises ${id}`); + console.log("-------"); + console.log(fakeExercises[id]); res(fakeExercises[id]); }); @@ -107,7 +131,11 @@ export const fetchNextWorkout = id => console.logTakeoff(`fetchNext ${id}`); await sleep(3000); console.logLanding(`fetchNext ${id}`); - res(fakeWorkouts.find(workout => workout.id === fakeNextWorkouts[id])); + res( + fakeWorkouts.find( + workout => workout.id === fakeNextWorkouts[id] + ) + ); }); //////////////////////////////////////////////////////////// @@ -148,14 +176,22 @@ export const NextWorkoutResource = createResource( console.logTakeoff(`readRelated ${id}`); await sleep(networks[network].next); console.logLanding(`readRelated ${id}`); - res(fakeWorkouts.find(workout => workout.id === fakeNextWorkouts[id])); + res( + fakeWorkouts.find( + workout => + workout.id === fakeNextWorkouts[id] + ) + ); }) ); //////////////////////////////////////////////////////// // Contacts const API = `https://contacts.now.sh`; -const fetchContacts = async (url, opts = { headers: {} }) => { +const fetchContacts = async ( + url, + opts = { headers: {} } +) => { return fetch(`${API}${url}`, { ...opts, headers: { authorization: token, ...opts.headers } @@ -168,7 +204,9 @@ const fetchContacts = async (url, opts = { headers: {} }) => { }); }; -export const readContacts = createResource(() => fetchContacts("/contacts")); +export const readContacts = createResource(() => + fetchContacts("/contacts") +); export const readContact = createResource(id => fetchContacts(`/contacts/${id}`) @@ -186,9 +224,15 @@ export const createContact = contact => //////////////////////////////////////////////////////// // logging stuff console.logTakeoff = str => { - console.log(`%c🛫 ${str}`, "font-size: 20px; color: hsl(10, 50%, 50%)"); + console.log( + `%c🛫 ${str}`, + "font-size: 20px; color: hsl(10, 50%, 50%)" + ); }; console.logLanding = str => { - console.log(`%c🛬 ${str}`, "font-size: 20px; color: hsl(170, 50%, 50%)"); + console.log( + `%c🛬 ${str}`, + "font-size: 20px; color: hsl(170, 50%, 50%)" + ); }; diff --git a/08-suspense/lecture/src/workouts/App.js b/08-suspense/lecture/src/workouts/App.js deleted file mode 100644 index 81a7b54..0000000 --- a/08-suspense/lecture/src/workouts/App.js +++ /dev/null @@ -1,283 +0,0 @@ -import { createElement } from "glamor/react"; // eslint-disable-line -/* @jsx createElement */ -import "./index.css"; -import Spinner from "react-svg-spinner"; -import ManageScroll from "../components/ManageScroll"; -import React, { Placeholder, lazy } from "react"; -import { Router, Link, redirectTo } from "@reach/router"; -import Component from "@reach/component-component"; -import { - fetchWorkouts, - fetchWorkout, - fetchExercises, - fetchNextWorkout, - WorkoutsResource, - WorkoutResource, - ExercisesResource, - NextWorkoutResource, - network -} from "./utils"; -import { cache } from "../cache"; - -const Competitions = React.lazy(() => - import("./Competitions") -); - -// Chantastic said this is okay to do. -console.warn = () => {}; - -let qpatience = [5000, 5000, 1, 1, 2000, 2000, 2000]; -let search = window.location.search.substr(1); -let patience = qpatience[search] || 10000; - -const link = { - display: "inline-block", - width: "200px", - height: "200px", - lineHeight: "200px", - background: "#fff", - textAlign: "center", - margin: "20px", - ":hover": { - background: "#ddd" - }, - position: "relative" -}; - -const LoadingLink = ({ children, ...props }) => ( - - {({ state, setState }) => ( - { - setState({ isLoading: true }); - }} - > - {children} -
    - -
    - - )} -     -); - -const Home = () => ( -
    -

    Workout App!

    -
    - - Workouts - - - Competitions - -
    -
    -); - -const Workouts = () => { - const workouts = WorkoutsResource.read(cache, 10); - return ( -
    - Home -

    Workouts

    - {workouts.map(workout => ( - - {workout.name} - - ))} -
    - ); -}; - -const Exercises = ({ workoutId }) => { - const exercises = ExercisesResource.read( - cache, - workoutId - ); - return ( -
      - {exercises.map((exercise, i) => ( -
    • {exercise}
      • - ))} -
    - ); -}; - -class Workout extends React.Component { - state = { - workout: null, - exercises: null, - nextWorkout: null - }; - - componentDidMount() { - this.fetch(); - } - - fetch() { - const { workoutId } = this.props; - fetchWorkout(workoutId).then(workout => { - this.setState({ workout }); - }); - fetchExercises(workoutId).then(exercises => { - this.setState({ exercises }); - }); - fetchNextWorkout(workoutId).then(nextWorkout => { - console.log(nextWorkout); - this.setState({ nextWorkout }); - }); - } - - componentDidUpdate(prevProps) { - if (prevProps.workoutId !== this.props.workoutId) { - this.setState({ - exercises: null, - workout: null, - nextWorkout: null - }); - this.fetch(); - } - } - - render() { - const { workoutId } = this.props; - const { workout, exercises, nextWorkout } = this.state; - - WorkoutResource.read(cache, workoutId); - - return workout ? ( -
    - Home /{" "} - Workouts -

    {workout.name}

    - {exercises ? ( - - ) : ( - - )} - {workout.completed && - (nextWorkout ? ( - - ) : ( -

    - Up Next! -

    - ))} -
    - ) : ( - - ); - } -} - -// class Workout extends React.Component { -// render() { -// const { workoutId } = this.props; - -// const workout = WorkoutResource.read(cache, workoutId); - -// return ( -//
    -// Home /{" "} -// Workouts -//

    {workout.name}

    -// } -// > -// -// -// {workout.completed && ( -// -// Up Next! -//

    -// } -// > -// -// -// )} -//
    -// ); -// } -// } - -const NextWorkout = ({ workoutId }) => { - const nextWorkout = NextWorkoutResource.read( - cache, - workoutId - ); - return ( -
    -

    - Up Next!{" "} - - {nextWorkout.name} - -

    -
    - ); -}; - -const LoadingSpinner = () => ( -
    - -
    -); - -const Network = () => ( -
    - Network: {network} -
    -); - -const App = () => { - return ( - - } - > - - - - - - - - - - - ); -}; - -export default App; diff --git a/08-suspense/lecture/src/workouts/Img.js b/08-suspense/lecture/src/workouts/Img.js deleted file mode 100644 index 91e53d6..0000000 --- a/08-suspense/lecture/src/workouts/Img.js +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable jsx-a11y/alt-text */ -import React from "react"; -import { createResource } from "simple-cache-provider"; -import withCache from "./withCache"; - -const ImageResource = createResource(src => { - const image = new Image(); - return new Promise(resolve => { - image.onload = () => resolve(src); - image.src = src; - }); -}); - -function Img({ cache, src, ...props }) { - return ; -} - -export const preload = ImageResource.preload; - -export default withCache(Img); diff --git a/08-suspense/lecture/src/workouts/withCache.js b/08-suspense/lecture/src/workouts/withCache.js deleted file mode 100644 index 8edb126..0000000 --- a/08-suspense/lecture/src/workouts/withCache.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from "react"; -import { SimpleCache } from "simple-cache-provider"; - -export default Comp => props => ( - - {cache => } - -);