Fix content not displaying if npms.io is down

vercel · Apr 24, 2018 · ef2c265 · ef2c265
1 parent 6e05000
commit ef2c265
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 33 deletions.
diff --git a/components/Layout.js b/components/Layout.js
@@ -23,7 +23,6 @@ class Layout extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     const { router } = nextProps
-    console.log(router.asPath)
     if (!/^\/search/.exec(router.asPath)) {
       this.setState({
         searchQuery: null,
@@ -64,11 +63,6 @@ class Layout extends React.Component {
   }
 
   render() {
-    console.log(
-      this.state && this.state.searchQuery,
-      this.props.query,
-      this.props.router
-    )
     return (
       <div className="main">
         <Meta />

diff --git a/components/PluginInfo.js b/components/PluginInfo.js
@@ -4,7 +4,30 @@ import InstallModal from './InstallModal'
 import GithubIcon from '../static/github-icon.svg'
 import * as gtag from '../lib/gtag'
 
-export default class extends React.Component {
+export const PluginInfoBar = ({ children }) => (
+  <div className="plugin-info">
+    {children}
+
+    <style jsx>{`
+      .plugin-info {
+        position: fixed;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        max-width: 980px;
+        width: 100%;
+        background: black;
+        height: 6.4rem;
+        display: flex;
+        align-items: center;
+        font-size: 1.2rem;
+        padding: 0 40px;
+      }
+    `}</style>
+  </div>
+)
+
+export default class PluginInfo extends React.Component {
   constructor() {
     super()
 
@@ -38,6 +61,51 @@ export default class extends React.Component {
   render() {
     const { plugin } = this.props
 
+    if (plugin && !plugin.collected) {
+      return (
+        <React.Fragment>
+          <InstallModal
+            name={plugin.meta.name}
+            isOpen={this.state.isModalOpen}
+            closeModal={this.closeInstallModal}
+          />
+
+          <PluginInfoBar>
+            <span>
+              We can't currently find information for this extension 😰
+            </span>
+            &nbsp;
+            <Link
+              href={`/source?id=${plugin.meta.name}`}
+              as={`/plugins/${plugin.meta.name}/source`}
+            >
+              <a className="plugin-info__link">View source code</a>
+            </Link>
+            <a className="plugin-info__install" onClick={this.openInstallModal}>
+              Install
+            </a>
+          </PluginInfoBar>
+
+          <style jsx>{`
+            .plugin-info__install {
+              cursor: pointer;
+              border-radius: 2px;
+              background: white;
+              color: black;
+              padding: 0 16px;
+              margin-left: auto;
+              opacity: 1;
+              transition: opacity 0.2s ease;
+            }
+
+            .plugin-info__install:hover {
+              opacity: 0.9;
+            }
+          `}</style>
+        </React.Fragment>
+      )
+    }
+
     return (
       <React.Fragment>
         <InstallModal
@@ -46,7 +114,7 @@ export default class extends React.Component {
           closeModal={this.closeInstallModal}
         />
 
-        <div className="plugin-info">
+        <PluginInfoBar>
           <div className="plugin-info__author border-followed">
             <Gravatar
               className="plugin-info__avatar"
@@ -86,21 +154,6 @@ export default class extends React.Component {
           </a>
 
           <style jsx>{`
-            .plugin-info {
-              position: fixed;
-              bottom: 0;
-              left: 50%;
-              transform: translateX(-50%);
-              max-width: 980px;
-              width: 100%;
-              background: black;
-              height: 6.4rem;
-              display: flex;
-              align-items: center;
-              font-size: 1.2rem;
-              padding: 0 40px;
-            }
-
             .plugin-info__author {
               display: flex;
               align-items: center;
@@ -213,7 +266,7 @@ export default class extends React.Component {
               }
             }
           `}</style>
-        </div>
+        </PluginInfoBar>
       </React.Fragment>
     )
   }

diff --git a/lib/get-plugin.js b/lib/get-plugin.js
@@ -1,9 +1,17 @@
 import cachedFetch from './cached-json-fetch'
 import plugins from '../plugins.json'
 
-export default async name => {
-  const result = await cachedFetch(`https://api.npms.io/v2/package/${name}`)
+export default async (name, { meta = false } = { meta }) => {
   const plugin = plugins.find(plugin => plugin.name === name)
+  let result = {}
+
+  if (!meta) {
+    try {
+      result = await cachedFetch(`https://api.npms.io/v2/package/${name}`)
+    } catch (err) {
+      console.error('Failed to recieve package information from npms.io', err)
+    }
+  }
 
   return {
     ...result,

diff --git a/lib/gtag.js b/lib/gtag.js
@@ -7,7 +7,6 @@ export const pageview = url => {
 }
 
 export const event = ({ action, category, label, value }) => {
-  console.log(action, category, label, value)
   window.gtag('event', action, {
     event_category: category,
     event_label: label,

diff --git a/pages/plugin.js b/pages/plugin.js
@@ -62,11 +62,8 @@ export default class extends React.Component {
           {typeof window === 'object' ? (
             <meta property="og:url" content={window.location.href} />
           ) : null}
-          <meta property="og:image" content={this.props.plugin.meta.preview} />
-          <meta
-            property="og:description"
-            content={this.props.plugin.meta.description}
-          />
+          <meta property="og:image" content={pluginInfo.preview} />
+          <meta property="og:description" content={pluginInfo.description} />
           <meta property="og:site_name" content="Hyper Store" />
         </Head>
         <div className="plugin">

diff --git a/pages/source.js b/pages/source.js
@@ -15,7 +15,7 @@ export default class extends React.Component {
     let plugin, pluginContents
 
     try {
-      plugin = await getPackageInfo(id)
+      plugin = await getPackageInfo(id, { meta: true })
       pluginContents = await cachedFetch(
         `https://unpkg.com/${id}@latest/?meta`,
         {},