chore: move to useState and remove preload component

Author: dubisdev

app/plugins/core/plugins/Preview/index.js

@@ -1,6 +1,6 @@
-import React, { Component } from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { KeyboardNav, KeyboardNavItem, Preload } from '@cerebroapp/cerebro-ui'
+import { KeyboardNav, KeyboardNavItem } from '@cerebroapp/cerebro-ui'
 import { client } from 'lib/plugins'
 import plugins from 'plugins'
 import ReactMarkdown from 'react-markdown'
@@ -11,147 +11,111 @@ import getReadme from '../getReadme'
 import styles from './styles.module.css'
 import * as format from '../format'
 
-const isRelative = (src) => !src.match(/^(https?:|data:)/)
-const urlTransform = (repo, src) => {
-  if (isRelative(src)) {
-    return `http://raw.githubusercontent.com/${repo}/master/${src}`
+function Description({ repoName }) {
+  const isRelative = (src) => !src.match(/^(https?:|data:)/)
+
+  const urlTransform = (src) => {
+    if (isRelative(src)) return `http://raw.githubusercontent.com/${repoName}/master/${src}`
+    return src
   }
-  return src
+
+  const [readme, setReadme] = useState(null)
+
+  useEffect(() => { getReadme(repoName).then(setReadme) }, [])
+
+  if (!readme) return null
+
+  return (
+    <ReactMarkdown className={styles.markdown} transformImageUri={(src) => urlTransform(src)}>
+      {readme}
+    </ReactMarkdown>
+  )
 }
 
-class Preview extends Component {
-  constructor(props) {
-    super(props)
-    this.onComplete = this.onComplete.bind(this)
-    this.state = {
-      showDescription: false,
-      showSettings: false,
-    }
-  }
+Description.propTypes = {
+  repoName: PropTypes.string.isRequired
+}
 
-  onComplete() {
-    this.setState({ runningAction: null })
-    this.props.onComplete()
-  }
+function Preview({ onComplete, plugin }) {
+  const [runningAction, setRunningAction] = useState(null)
+  const [showDescription, setShowDescription] = useState(null)
+  const [showSettings, setShowSettings] = useState(null)
 
-  pluginAction(plugin, runningAction) {
-    return () => [
-      this.setState({ runningAction }),
-      client[runningAction](plugin)
-    ]
+  const onCompleteAction = () => {
+    setRunningAction(null)
+    onComplete()
   }
 
-  renderDescription(repo) {
-    return (
-      <Preload promise={getReadme(repo)}>
-        {
-          (content) => (
-            <ReactMarkdown
-              className={styles.markdown}
-              transformImageUri={(src) => urlTransform(repo, src)}
-            >
-              {content}
-            </ReactMarkdown>
-          )
-        }
-      </Preload>
-    )
-  }
+  const pluginAction = (pluginName, runningActionName) => () => [
+    setRunningAction(runningActionName),
+    client[runningAction](pluginName)
+  ]
 
-  render() {
-    const {
-      name,
-      version,
-      description,
-      repo,
-      isInstalled = false,
-      isDebugging = false,
-      installedVersion,
-      isUpdateAvailable = false
-    } = this.props
-    const githubRepo = repo && repo.match(/^.+github.com\/([^\/]+\/[^\/]+).*?/)
-    const { runningAction, showSettings } = this.state
-    const settings = plugins[name] ? plugins[name].settings : null
-    return (
-      <div className={styles.preview} key={name}>
-        <h2>{`${format.name(name)} (${version})`}</h2>
-
-        <p>{format.description(description)}</p>
-        <KeyboardNav>
-          <div className={styles.header}>
-            {
-              settings
-                && (
-                <KeyboardNavItem
-                  onSelect={() => this.setState({ showSettings: !this.state.showSettings })}
-                >
-                  Settings
-                </KeyboardNavItem>
-                )
-            }
-            {showSettings && <Settings name={name} settings={settings} />}
-            {
-              !isInstalled && !isDebugging
-                && (
-                <ActionButton
-                  action={this.pluginAction(name, 'install')}
-                  text={runningAction === 'install' ? 'Installing...' : 'Install'}
-                  onComplete={this.onComplete}
-                />
-                )
-            }
-            {
-              isInstalled
-                && (
-                <ActionButton
-                  action={this.pluginAction(name, 'uninstall')}
-                  text={runningAction === 'uninstall' ? 'Uninstalling...' : 'Uninstall'}
-                  onComplete={this.onComplete}
-                />
-                )
-            }
-            {
-              isUpdateAvailable
-                && (
-                <ActionButton
-                  action={this.pluginAction(name, 'update')}
-                  text={
-                    runningAction === 'update'
-                      ? 'Updating...'
-                      : `Update (${installedVersion} → ${version})`
-                  }
-                  onComplete={this.onComplete}
-                />
-                )
-            }
-            {
-              githubRepo
-                && (
-                <KeyboardNavItem
-                  onSelect={() => this.setState({ showDescription: !this.state.showDescription })}
-                >
-                  Details
-                </KeyboardNavItem>
-                )
-            }
-          </div>
-        </KeyboardNav>
-        {this.state.showDescription && this.renderDescription(githubRepo[1])}
-      </div>
-    )
-  }
+  const {
+    name, version, description, repo,
+    isInstalled = false,
+    isDebugging = false,
+    installedVersion,
+    isUpdateAvailable = false
+  } = plugin
+
+  const githubRepo = repo && repo.match(/^.+github.com\/([^\/]+\/[^\/]+).*?/)
+  const settings = plugins[name] ? plugins[name].settings : null
+  return (
+    <div className={styles.preview} key={name}>
+      <h2>{`${format.name(name)} (${version})`}</h2>
+
+      <p>{format.description(description)}</p>
+      <KeyboardNav>
+        <div className={styles.header}>
+
+          { settings && (
+          <KeyboardNavItem onSelect={() => setShowSettings((prev) => !prev)}>
+            Settings
+          </KeyboardNavItem>
+          )}
+
+          {showSettings && <Settings name={name} settings={settings} />}
+
+          { !isInstalled && !isDebugging && (
+          <ActionButton
+            action={pluginAction(name, 'install')}
+            text={runningAction === 'install' ? 'Installing...' : 'Install'}
+            onComplete={onCompleteAction}
+          />
+          )}
+
+          { isInstalled && (
+          <ActionButton
+            action={pluginAction(name, 'uninstall')}
+            text={runningAction === 'uninstall' ? 'Uninstalling...' : 'Uninstall'}
+            onComplete={onCompleteAction}
+          />
+          )}
+
+          { isUpdateAvailable && (
+          <ActionButton
+            action={pluginAction(name, 'update')}
+            text={runningAction === 'update' ? 'Updating...' : `Update (${installedVersion} → ${version})`}
+            onComplete={onCompleteAction}
+          />
+          )}
+
+          { githubRepo && (
+          <KeyboardNavItem onSelect={() => setShowDescription((prev) => !prev)}>
+            Details
+          </KeyboardNavItem>
+          )}
+
+        </div>
+      </KeyboardNav>
+      {showDescription && <Description repoName={githubRepo[1]} />}
+    </div>
+  )
 }
 
 Preview.propTypes = {
-  name: PropTypes.string.isRequired,
-  settings: PropTypes.object,
-  version: PropTypes.string.isRequired,
-  description: PropTypes.string,
-  repo: PropTypes.string,
-  installedVersion: PropTypes.string,
-  isInstalled: PropTypes.bool,
-  isDebugging: PropTypes.bool,
-  isUpdateAvailable: PropTypes.bool,
+  plugin: PropTypes.object.isRequired,
   onComplete: PropTypes.func.isRequired,
 }
 

app/plugins/core/plugins/index.js

@@ -28,7 +28,7 @@ const updatePlugin = async (update, name) => {
     title: `${format.name(updatedPlugin.name)} (${format.version(updatedPlugin)})`,
     getPreview: () => (
       <Preview
-        {...updatedPlugin}
+        plugin={updatedPlugin}
         key={name}
         onComplete={() => updatePlugin(update, name)}
       />
@@ -49,7 +49,7 @@ const pluginToResult = (update) => (plugin) => {
     onSelect: () => shell.openExternal(plugin.repo),
     getPreview: () => (
       <Preview
-        {...plugin}
+        plugin={plugin}
         key={plugin.name}
         onComplete={() => updatePlugin(update, plugin.name)}
       />