Shows instruction message or enrolled cases only once cases finish loading (#132)

Author: cbothner

app/javascript/catalog/EnrollmentInstructions.jsx

@@ -0,0 +1,50 @@
+/**
+ * @providesModule EnrollmentInstructions
+ * @flow
+ */
+
+import React from 'react'
+import styled from 'styled-components'
+import { FormattedMessage, injectIntl } from 'react-intl'
+
+const EnrollmentInstructions = () => (
+  <Container>
+    <h5>
+      <FormattedMessage
+        id="catalog.chooseForYourself"
+        defaultMessage="Choose for yourself"
+      />
+    </h5>
+    <ul>
+      <li>
+        <FormattedMessage
+          id="catalog.meetStakeholders"
+          defaultMessage="Meet different stakeholders and dive deep with a multimodal narrative."
+        />
+      </li>
+      <li>
+        <FormattedMessage
+          id="catalog.shortcutExperience"
+          defaultMessage="Shortcut experience by putting principles into practice."
+        />
+      </li>
+      <li>
+        <FormattedMessage
+          id="catalog.joinConversation"
+          defaultMessage="Join the conversation by asking questions and paying your learning forward."
+        />
+      </li>
+    </ul>
+    <FormattedMessage
+      id="catalog.enrollmentsInstruction"
+      defaultMessage="Cases you enroll in will be presented here for easy access."
+    />
+  </Container>
+)
+
+export default injectIntl(EnrollmentInstructions)
+
+const Container = styled.div.attrs({ className: 'pt-callout' })`
+  margin-top: 1.5em;
+  line-height: 1.4;
+`

app/javascript/catalog/Enrollments.jsx

@@ -10,11 +10,13 @@ import { FormattedMessage, injectIntl } from 'react-intl'
 import { Button, Intent } from '@blueprintjs/core'
 
 import { SectionTitle, CaseRow, Element } from 'catalog/shared'
+import EnrollmentInstructions from 'catalog/EnrollmentInstructions'
 
 import type { Case } from 'redux/state'
-import type Catalog from 'catalog'
+import type Catalog, { Loading } from 'catalog'
 
 type Props = {
+  loading: Loading,
   enrolledCases: Case[],
   intl: any,
   onDeleteEnrollment: $PropertyType<Catalog, 'handleDeleteEnrollment'>,
@@ -31,8 +33,8 @@ class Enrollments extends Component {
 
   render () {
     const { editing } = this.state
-    const { intl, enrolledCases, onDeleteEnrollment } = this.props
-    return enrolledCases.length > 0 ? (
+    const { intl, enrolledCases, onDeleteEnrollment, loading } = this.props
+    return loading.cases ? null : enrolledCases.length > 0 ? (
       <div>
         <CaseRow baseline>
           <SidebarSectionTitle>
@@ -43,17 +45,15 @@ class Enrollments extends Component {
           </SidebarSectionTitle>
           <SidebarButton
             aria-label={
-              editing ? (
-                intl.formatMessage({
+              editing
+                ? intl.formatMessage({
                   id: 'finishEditing',
                   defaultMessage: 'Finish editing',
                 })
-              ) : (
-                intl.formatMessage({
+                : intl.formatMessage({
                   id: 'catalog.editEnrolled',
                   defaultMessage: 'Edit enrolled cases',
                 })
-              )
             }
             iconName={editing ? 'tick' : 'cog'}
             onClick={this.handleToggleEditing}
@@ -91,38 +91,7 @@ class Enrollments extends Component {
         </UnstyledUL>
       </div>
     ) : (
-      <Callout>
-        <h5>
-          <FormattedMessage
-            id="catalog.chooseForYourself"
-            defaultMessage="Choose for yourself"
-          />
-        </h5>
-        <ul>
-          <li>
-            <FormattedMessage
-              id="catalog.meetStakeholders"
-              defaultMessage="Meet different stakeholders and dive deep with a multimodal narrative."
-            />
-          </li>
-          <li>
-            <FormattedMessage
-              id="catalog.shortcutExperience"
-              defaultMessage="Shortcut experience by putting principles into practice."
-            />
-          </li>
-          <li>
-            <FormattedMessage
-              id="catalog.joinConversation"
-              defaultMessage="Join the conversation by asking questions and paying your learning forward."
-            />
-          </li>
-        </ul>
-        <FormattedMessage
-          id="catalog.enrollmentsInstruction"
-          defaultMessage="Cases you enroll in will be presented here for easy access."
-        />
-      </Callout>
+      <EnrollmentInstructions />
     )
   }
 }
@@ -143,7 +112,3 @@ const UnstyledLI = styled.li`
   margin: 0;
   padding: 0;
 `
-const Callout = styled.div.attrs({ className: 'pt-callout' })`
-  margin-top: 1.5em;
-  line-height: 1.4;
-`

app/javascript/catalog/Sidebar.jsx

@@ -12,18 +12,24 @@ import SignInForm from 'utility/SignInForm'
 import { identiconStyle } from 'shared/Identicon'
 
 import type { Case, Reader } from 'redux/state'
-import type Catalog from 'catalog'
+import type Catalog, { Loading } from 'catalog'
 
 type Props = {
-  reader: ?Reader | { loading: true },
+  loading: Loading,
+  reader: ?Reader,
   enrolledCases: Case[],
   onDeleteEnrollment: $PropertyType<Catalog, 'handleDeleteEnrollment'>,
 }
-const Sidebar = ({ reader, enrolledCases, onDeleteEnrollment }: Props) => (
+const Sidebar = ({
+  loading,
+  reader,
+  enrolledCases,
+  onDeleteEnrollment,
+}: Props) => (
   <Container>
-    {reader == null ? (
+    {loading.reader ? null : reader == null ? (
       <SignInForm />
-    ) : reader.loading ? null : (
+    ) : (
       <div className="pt-dark">
         <IdentigradientElement
           image={reader.imageUrl}
@@ -32,6 +38,7 @@ const Sidebar = ({ reader, enrolledCases, onDeleteEnrollment }: Props) => (
           hashKey={reader.email}
         />
         <Enrollments
+          loading={loading}
           enrolledCases={enrolledCases}
           onDeleteEnrollment={onDeleteEnrollment}
         />

app/javascript/catalog/index.jsx

@@ -20,10 +20,14 @@ import { CatalogSection, SectionTitle } from 'catalog/shared'
 
 import type { Case, Enrollment, Reader } from 'redux/state'
 
+export type Loading = { reader: boolean, cases: boolean }
+
 class Catalog extends Component {
   props: { intl: any }
   state = {
-    reader: ({ loading: true }: ?Reader | {| loading: true |}),
+    loading: { reader: true, cases: true },
+
+    reader: (null: ?Reader),
     cases: ({}: { [string]: Case }),
     enrollments: ([]: Enrollment[]),
     features: ([]: string[]),
@@ -62,7 +66,17 @@ class Catalog extends Component {
     Orchard.harvest('profile')
       .then(reader => this.setState({ reader }))
       .catch(e => e.name === 'OrchardError' && this.setState({ reader: null }))
-    Orchard.harvest('cases').then(cases => this.setState({ cases }))
+      .then(() =>
+        this.setState(({ loading }) => ({
+          loading: { ...loading, reader: false },
+        }))
+      )
+    Orchard.harvest('cases').then(cases =>
+      this.setState(({ loading }) => ({
+        cases,
+        loading: { ...loading, cases: false },
+      }))
+    )
     Orchard.harvest('cases/features').then(({ features }) =>
       this.setState({ features })
     )
@@ -78,6 +92,7 @@ class Catalog extends Component {
         <MaxWidthContainer>
           <Window>
             <Sidebar
+              loading={this.state.loading}
               reader={this.state.reader}
               enrolledCases={this._enrolledCases()}
               onDeleteEnrollment={this.handleDeleteEnrollment}