new subscription helper component

- and rename Posts to PostList for clarity

src/views/Routes.js

@@ -8,7 +8,7 @@ import React from 'react'
 import { Switch, Route } from 'react-router-dom'
 import { CSSTransition, TransitionGroup } from 'react-transition-group'
 
-import Posts from './posts/Posts'
+import PostList from './posts/PostList'
 import Post from './posts/Post'
 import PostEdit from './posts/PostEdit'
 import PostNew from './posts/PostNew'
@@ -24,7 +24,7 @@ const Routes = () => (
     <TransitionGroup key="transition-group" component={PageContainer}>
       <CSSTransition key={location.pathname} classNames="fade" timeout={1000} mountOnEnter={true} unmountOnExit={true}>
         <Switch location={location}>
-          <Route exact path="/" component={Posts} />
+          <Route exact path="/" component={PostList} />
           <Route path="/new" component={PostNew} />
           <Route path="/search" component={Search} />
           <Route path="/account" component={Account} />

src/views/account/Subscription.js

@@ -1,10 +1,10 @@
 import React from 'react'
-import { FirestoreCollection } from 'react-firestore'
 
 import Error from '../misc/Error'
 import createSubscription from '../../actions/createSubscription'
 import updateSubscription from '../../actions/updateSubscription'
 import deleteSubscription from '../../actions/deleteSubscription'
+import FireflySubscription from '../misc/FireflySubscription'
 
 class Subscription extends React.Component {
 
@@ -39,12 +39,9 @@ class Subscription extends React.Component {
   }
 
   render() {
-    return <FirestoreCollection
-      path="subscriptions"
-      filter={['user', '==', this.props.auth.uid]}
-    >
-      { ({error, isLoading, data}) => {
-
+    return <FireflySubscription>
+      { ({error, isLoading, subscription}) => {
+
         if (error) {
           return <Error error={error} />
         }
@@ -53,11 +50,10 @@ class Subscription extends React.Component {
           return <p>loading...</p>
         }
 
-        const subscription = data[0]
-
         if (!subscription) {
           return <div>
-            <p>Subscribe to Firefly to get paid features</p>
+            <p><strong>Subscribe to get paid features</strong></p>
+            <p>Use Stripe test card number <span style={{fontFamily: 'monospace'}}>4242 4242 4242 4242</span>, any pin, and any future expiration date</p>
             <button onClick={this.newSubscription}>Subscribe now</button>
           </div>
         }
@@ -66,6 +62,7 @@ class Subscription extends React.Component {
           return <div style={{color: 'red'}}>
             <p>Whoops&mdash;there was an error updating your subscription.</p>
             <p style={{fontFamily: 'monospace'}}>{subscription.stripeSubscriptionError}</p>
+            <button onClick={() => deleteSubscription(subscription)}>Delete and try again</button>
           </div>
         }
 
@@ -74,6 +71,7 @@ class Subscription extends React.Component {
         }
 
         const cancelConfirmation = `Are you sure you want to cancel your subscription? You won't have access to paid Firefly features.`
+
         return <div>
           <p>You are subscribed!</p>
           <p>Status: {subscription.stripeSubscriptionStatus}</p>
@@ -86,7 +84,7 @@ class Subscription extends React.Component {
         </div>
 
       }}
-    </FirestoreCollection>
+    </FireflySubscription>
   }
 }
 

src/views/misc/FireflySubscription.js

@@ -0,0 +1,37 @@
+// provides a Firefly subscription for the currently logged-in user
+// (if they're a subscriber)
+
+import React from 'react'
+import FirebaseAuth from './FirebaseAuth'
+import { FirestoreCollection } from 'react-firestore'
+
+const FireflySubscription = ({children}) => (
+  <FirebaseAuth>
+    { ({isLoading, error, auth}) => {
+
+      if (error || isLoading || !auth) {
+        return children({
+          error,
+          isLoading,
+          subscription: null,
+        })
+      }
+
+      return <FirestoreCollection
+        path="subscriptions"
+        filter={['user', '==', auth.uid]}
+      >
+        { ({error, isLoading, data}) => {
+          return children({
+            error,
+            isLoading,
+            subscription: data.length > 0 ? data[0] : null
+          })
+        }}
+      </FirestoreCollection>
+
+    }}
+  </FirebaseAuth>
+)
+
+export default FireflySubscription

src/views/posts/Posts.js → src/views/posts/PostList.js

@@ -8,8 +8,9 @@ import {
 import {
   Page,
 } from '../../styles/layout'
+import FireflySubscription from '../misc/FireflySubscription';
 
-const Posts = () => (
+const PostList = () => (
   <Page>
     <InternalLink to="/new">New post</InternalLink>
     <hr/>
@@ -46,7 +47,35 @@ const Posts = () => (
 
       }}
     </FirestoreCollection>
+
+    <hr />
+
+    {/* For paid subscribers only */}
+    <FireflySubscription>
+      { ({isLoading, error, subscription}) => {
+
+        if (error) {
+          return <Error error={error} />
+        }
+
+        if (isLoading) {
+          return <p>loading...</p>
+        }
+
+        if (!subscription) {
+          return <div>
+            <p>Only paid subscribers can see what goes here</p>
+            <InternalLink to={`/account`}>Subscribe now</InternalLink>
+          </div>
+        }
+
+        return <div>
+          <p>Super-fancy subscription-only features go here!</p>
+        </div>
+
+      }}
+    </FireflySubscription>
   </Page>
 )
 
-export default Posts
+export default PostList