Skip to content

Commit

Permalink
Clean up suspense lecture code
Browse files Browse the repository at this point in the history
  • Loading branch information
ryanflorence committed Oct 2, 2018
1 parent b1798bd commit f498b1d
Show file tree
Hide file tree
Showing 19 changed files with 215 additions and 1,368 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
<div>
<h1 css={{ textAlign: "center" }}>Workout App!</h1>
<div
css={{
display: "flex",
alignItems: "center",
justifyContent: "center"
}}
>
<Link to="/workouts" css={link}>
Workouts
</Link>
<Link to="/competitions" css={link}>
Competitions
</Link>
</div>
</div>
);

const Workouts = () => {
const workouts = WorkoutsResource.read(cache, 10);
return (
<div>
<Link to="..">Home</Link>
<h1>Workouts</h1>
{workouts.map(workout => (
<Link key={workout.id} to={workout.id} css={link}>
{workout.name}
</Link>
))}
</div>
);
};

const Competitions = () => <div>Competitions</div>;

const LoadingSpinner = () => (
<div css={{ textAlign: "center", padding: 20 }}>
<Spinner size="100" />
</div>
);
let patience = 1;

///////////////////////////////////////////////////

class Workout extends React.Component {
state = {
workout: null,
Expand Down Expand Up @@ -118,19 +57,13 @@ class Workout extends React.Component {
}

render() {
const { workoutId } = this.props;
const { workout, exercises, nextWorkout } = this.state;

return workout ? (
<div>
<Link to="../..">Home</Link> /{" "}
<Link to="..">Workouts</Link>
<Link to="../..">Home</Link> / <Link to="..">Workouts</Link>
<h1>{workout.name}</h1>
{exercises ? (
<Exercises exercises={exercises} />
) : (
<Spinner />
)}
{exercises ? <Exercises exercises={exercises} /> : <Spinner />}
{workout.completed &&
(nextWorkout ? (
<NextWorkout nextWorkout={nextWorkout} />
Expand All @@ -146,35 +79,73 @@ 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 = () => (
<div>
<h1 css={{ textAlign: "center" }}>Workout App!</h1>
<div
css={{
display: "flex",
alignItems: "center",
justifyContent: "center"
}}
>
<Link to="/workouts" css={link}>
Workouts
</Link>
<Link to="/competitions" css={link}>
Competitions
</Link>
</div>
</div>
);

const Workouts = () => {
const workouts = WorkoutsResource.read(cache, 10);
return (
<ul>
{exercises.map((exercise, i) => (
<li key={i}>{exercise}</li>
<div>
<Link to="..">Home</Link>
<h1>Workouts</h1>
{workouts.map(workout => (
<Link key={workout.id} to={workout.id} css={link}>
{workout.name}
</Link>
))}
</ul>
</div>
);
};

const Exercises = ({ exercises }) => {
return <ul>{exercises.map((exercise, i) => <li key={i}>{exercise}</li>)}</ul>;
};

const NextWorkout = ({ nextWorkout }) => {
return (
<div>
<h2>
Up Next!{" "}
<Link to={`../${nextWorkout.id}`}>
{nextWorkout.name}
</Link>
Up Next! <Link to={`../${nextWorkout.id}`}>{nextWorkout.name}</Link>
</h2>
</div>
);
};

const App = () => {
return (
<Placeholder
delayMs={patience}
fallback={<Spinner size="100" />}
>
<Placeholder delayMs={patience} fallback={<Spinner size="100" />}>
<ManageScroll />
<Router style={{ padding: 20 }}>
<Home path="/" />
Expand Down
Loading

0 comments on commit f498b1d

Please sign in to comment.