Clean up suspense lecture code

08-suspense/lecture/src/workouts/Refactor.js → 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 = () => (
-  <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,
@@ -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} />
@@ -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="/" />