Skip to content

Commit

Permalink
chore: move to useState and remove preload component
Browse files Browse the repository at this point in the history
  • Loading branch information
dubisdev committed Sep 17, 2022
1 parent d8c485e commit 4f9669a
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 134 deletions.
228 changes: 96 additions & 132 deletions app/plugins/core/plugins/Preview/index.js
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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,
}

Expand Down
4 changes: 2 additions & 2 deletions app/plugins/core/plugins/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
/>
Expand All @@ -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)}
/>
Expand Down

0 comments on commit 4f9669a

Please sign in to comment.