Add donator list to menu

app/renderer/components/common/Fetch.tsx

@@ -0,0 +1,60 @@
+import React, { Component, ReactNode } from 'react'
+
+interface IProps {
+  cacheKey: string
+  href: string
+  children: (data: any) => ReactNode
+}
+
+interface IState {
+  data?: any
+}
+
+export class Fetch extends Component<IProps, IState> {
+  state: IState = {
+    data: this.getCachedData()
+  }
+
+  private getCachedData() {
+    const data = sessionStorage.getItem(this.props.cacheKey)
+    if (!data) return
+    let res
+    try {
+      res = JSON.parse(data)
+    } catch {}
+    return res
+  }
+
+  private async fetchData() {
+    let data = null
+    try {
+      const resp = await fetch(this.props.href)
+      const contentType = resp.headers.get('Content-Type') || ''
+      const content = await (contentType.indexOf('application/json') > -1
+        ? resp.json()
+        : resp.text())
+      if (resp.ok) {
+        data = content
+        sessionStorage.setItem(this.props.cacheKey, JSON.stringify(content))
+      }
+    } catch {}
+    this.setState({ data })
+  }
+
+  componentDidMount() {
+    if (!this.state.data) {
+      this.fetchData()
+    }
+  }
+
+  render() {
+    const { children } = this.props
+    const { data } = this.state
+
+    if (typeof children === 'function') {
+      return children(data)
+    }
+
+    return null
+  }
+}

app/renderer/components/menu/Changelog.tsx

@@ -1,79 +1,40 @@
 import React, { Component } from 'react'
 import { VERSION } from 'constants/app'
-import { Spinner } from '../common/spinner'
 import * as marked from 'marked'
 
 import styles from './Changelog.css'
 import { ExternalLink } from '../common/link'
+import { Fetch } from '../common/Fetch'
 
-interface IProps {}
-
-interface IState {
-  data?: any
-}
-
-export class Changelog extends Component<IProps, IState> {
-  state: IState = {
-    data: this.getCachedReleaseInfo()
-  }
-
-  private getCachedReleaseInfo() {
-    const data = sessionStorage.getItem('releaseInfo')
-    if (!data) return
-    let res
-    try {
-      res = JSON.parse(data)
-    } catch {}
-    return res
-  }
-
-  private async fetchReleaseInfo() {
-    let data = null
-    const url = `https://api.github.com/repos/samuelmaddock/metastream/releases/tags/v${VERSION}`
-    try {
-      const resp = await fetch(url)
-      const json = await resp.json()
-      if (resp.ok) {
-        data = json
-        sessionStorage.setItem('releaseInfo', JSON.stringify(json))
-      } else {
-        data = json.message || null
-      }
-    } catch {}
-    this.setState({ data })
-  }
-
-  componentDidMount() {
-    if (!this.state.data) {
-      this.fetchReleaseInfo()
-    }
-  }
-
+export class Changelog extends Component {
   render() {
-    const { data } = this.state
-
-    if (typeof data === 'undefined') {
-      return <Spinner />
-    } else if (typeof data === 'string') {
-      return data
-    }
-
+    const version = process.env.NODE_ENV === 'production' ? VERSION : '0.1.3'
     return (
-      <div>
-        {data.published_at && <div>{data.published_at}</div>}
-        {data.html_url && (
-          <p>
-            <ExternalLink href={data.html_url}>View on GitHub</ExternalLink>
-          </p>
+      <Fetch
+        cacheKey="releaseInfo"
+        href={`https://api.github.com/repos/samuelmaddock/metastream/releases/tags/v${version}`}
+      >
+        {data => (
+          <>
+            <p>
+              <ExternalLink
+                href={`https://github.com/samuelmaddock/metastream/releases/tag/v${VERSION}`}
+              >
+                View on GitHub
+              </ExternalLink>
+            </p>
+            {data !== null &&
+              typeof data === 'object' &&
+              data.body &&
+              this.renderMarkdown(data.body)}
+          </>
         )}
-        {data.body && this.renderMarkdown(data.body)}
-      </div>
+      </Fetch>
     )
   }
 
   private renderMarkdown(str: string) {
     const html = marked(str, { gfm: true })
-
     return <div className={styles['markdown-body']} dangerouslySetInnerHTML={{ __html: html }} />
   }
 }

app/renderer/components/menu/MenuTabs.tsx

@@ -2,9 +2,11 @@ import React, { ReactNode, Component } from 'react'
 import * as cx from 'classnames'
 import { ExternalLink } from '../common/link'
 import { Changelog } from './Changelog'
+import { APP_WEBSITE } from 'constants/http'
 
 import styles from './MenuTabs.css'
 import { t } from 'locale'
+import { Fetch } from '../common/Fetch'
 
 interface IProps {
   className?: string
@@ -21,10 +23,7 @@ export class MenuTabs extends Component<IProps, IState> {
     const tabs = [
       { label: t('welcome'), render: () => <WelcomeMessage /> },
       { label: t('changelog'), render: () => <Changelog /> },
-      {
-        label: t('donators'),
-        render: () => <p style={{ whiteSpace: 'pre-wrap' }}>{'Foobar'}</p>
-      }
+      { label: t('donators'), render: () => <Donators /> }
     ]
     const selected = tabs[this.state.value]
 
@@ -50,7 +49,7 @@ export class MenuTabs extends Component<IProps, IState> {
   }
 }
 
-const WelcomeMessage: React.SFC<{}> = () => (
+const WelcomeMessage: React.SFC = () => (
   <>
     <p>Hi, thanks for trying out Metastream!</p>
     <p>
@@ -67,3 +66,9 @@ const WelcomeMessage: React.SFC<{}> = () => (
     <p>💖 Sam</p>
   </>
 )
+
+const Donators: React.SFC = () => (
+  <Fetch cacheKey="donators" href={`${APP_WEBSITE}app/donators.txt`}>
+    {data => <p style={{ whiteSpace: 'pre-wrap' }}>{typeof data === 'string' ? data : ''}</p>}
+  </Fetch>
+)