meriadec
6 years ago
17 changed files with 432 additions and 260 deletions
@ -0,0 +1,51 @@ |
|||
// @flow
|
|||
|
|||
import { createCommand, Command } from 'helpers/ipc' |
|||
import { Observable } from 'rxjs' |
|||
|
|||
import createElectronAppUpdater from 'main/updater/createElectronAppUpdater' |
|||
import type { UpdateStatus } from 'components/Updater/UpdaterContext' |
|||
|
|||
type Input = {} |
|||
type Result = { |
|||
status: UpdateStatus, |
|||
payload?: *, |
|||
} |
|||
|
|||
const cmd: Command<Input, Result> = createCommand('main:autoUpdate', () => |
|||
Observable.create(o => { |
|||
const { autoUpdater } = require('electron-updater') |
|||
|
|||
const sendStatus = (status, payload) => { |
|||
o.next({ status, payload }) |
|||
} |
|||
|
|||
const handleDownload = async info => { |
|||
try { |
|||
const appUpdater = await createElectronAppUpdater({ |
|||
feedURL: process.env.LL_UPDATE_FEED || 'https://insert.feed.here', |
|||
updateVersion: info.version, |
|||
}) |
|||
await appUpdater.verify() |
|||
sendStatus('check-success') |
|||
} catch (err) { |
|||
// todo delete update file
|
|||
o.error(err) |
|||
} |
|||
} |
|||
|
|||
autoUpdater.on('checking-for-update', () => sendStatus('checking-for-update')) |
|||
autoUpdater.on('update-available', info => sendStatus('update-available', info)) |
|||
autoUpdater.on('update-not-available', info => sendStatus('update-not-available', info)) |
|||
autoUpdater.on('download-progress', p => sendStatus('download-progress', p)) |
|||
autoUpdater.on('update-downloaded', handleDownload) |
|||
autoUpdater.on('error', err => o.error(err)) |
|||
|
|||
autoUpdater.autoInstallOnAppQuit = false |
|||
autoUpdater.checkForUpdates() |
|||
|
|||
return () => {} |
|||
}), |
|||
) |
|||
|
|||
export default cmd |
|||
@ -0,0 +1,30 @@ |
|||
// @flow
|
|||
|
|||
import { createCommand, Command } from 'helpers/ipc' |
|||
import { Observable } from 'rxjs' |
|||
|
|||
type Input = void |
|||
type Result = void |
|||
|
|||
const cmd: Command<Input, Result> = createCommand('main:quitAndInstallElectronUpdate', () => |
|||
Observable.create(o => { |
|||
const { app, BrowserWindow } = require('electron') |
|||
const { autoUpdater } = require('electron-updater') |
|||
const browserWindows = BrowserWindow.getAllWindows() |
|||
|
|||
// Fixes quitAndInstall not quitting on macOS, as suggested on
|
|||
// https://github.com/electron-userland/electron-builder/issues/1604#issuecomment-306709572
|
|||
app.removeAllListeners('window-all-closed') |
|||
browserWindows.forEach(browserWindow => { |
|||
browserWindow.removeAllListeners('close') |
|||
}) |
|||
|
|||
// couldn't find a way to catch if fail ¯\_(ツ)_/¯
|
|||
autoUpdater.quitAndInstall(false) |
|||
|
|||
o.complete() |
|||
return () => {} |
|||
}), |
|||
) |
|||
|
|||
export default cmd |
|||
@ -1,103 +0,0 @@ |
|||
// @flow
|
|||
|
|||
import React, { PureComponent } from 'react' |
|||
import { translate } from 'react-i18next' |
|||
import { compose } from 'redux' |
|||
import { connect } from 'react-redux' |
|||
import styled from 'styled-components' |
|||
|
|||
import { getUpdateStatus, getUpdateData } from 'reducers/update' |
|||
import { sendEvent } from 'renderer/events' |
|||
import type { State } from 'reducers' |
|||
import type { UpdateStatus } from 'reducers/update' |
|||
|
|||
import { radii } from 'styles/theme' |
|||
|
|||
import Box from 'components/base/Box' |
|||
import Text from 'components/base/Text' |
|||
|
|||
import UpdateIcon from 'icons/Update' |
|||
|
|||
import type { T } from 'types/common' |
|||
|
|||
type Props = { |
|||
t: T, |
|||
updateStatus: UpdateStatus, |
|||
} |
|||
|
|||
const mapStateToProps = (state: State) => ({ |
|||
updateStatus: getUpdateStatus(state), |
|||
updateData: getUpdateData(state), |
|||
}) |
|||
|
|||
const Container = styled(Box).attrs({ |
|||
py: '8px', |
|||
px: 3, |
|||
bg: 'wallet', |
|||
color: 'white', |
|||
mt: '-50px', |
|||
mb: '35px', |
|||
style: p => ({ |
|||
transform: `translate3d(0, ${p.offset}%, 0)`, |
|||
}), |
|||
})` |
|||
border-radius: ${radii[1]}px; |
|||
` |
|||
|
|||
const NotifText = styled(Text).attrs({ |
|||
ff: 'Open Sans|SemiBold', |
|||
fontSize: 4, |
|||
})`` |
|||
|
|||
class UpdateDownloaded extends PureComponent<Props> { |
|||
renderStatus() { |
|||
const { updateStatus, t } = this.props |
|||
switch (updateStatus) { |
|||
case 'idle': |
|||
case 'checking': |
|||
case 'unavailable': |
|||
case 'error': |
|||
case 'available': |
|||
case 'progress': |
|||
return null |
|||
case 'downloaded': |
|||
return ( |
|||
<Box horizontal flow={3}> |
|||
<UpdateIcon size={16} /> |
|||
<Box grow> |
|||
<NotifText>{t('update.newVersionReady')}</NotifText> |
|||
</Box> |
|||
<Box> |
|||
<NotifText |
|||
style={{ cursor: 'pointer', textDecoration: 'underline' }} |
|||
onClick={() => sendEvent('updater', 'quitAndInstall')} |
|||
> |
|||
{t('update.relaunch')} |
|||
</NotifText> |
|||
</Box> |
|||
</Box> |
|||
) |
|||
default: |
|||
return null |
|||
} |
|||
} |
|||
|
|||
render() { |
|||
const { updateStatus, ...props } = this.props |
|||
|
|||
const isToggled = updateStatus === 'downloaded' |
|||
|
|||
if (!isToggled) { |
|||
return null |
|||
} |
|||
return <Container {...props}>{this.renderStatus()}</Container> |
|||
} |
|||
} |
|||
|
|||
export default compose( |
|||
connect( |
|||
mapStateToProps, |
|||
null, |
|||
), |
|||
translate(), |
|||
)(UpdateDownloaded) |
|||
@ -1,48 +0,0 @@ |
|||
// @flow
|
|||
|
|||
import { PureComponent } from 'react' |
|||
import { connect } from 'react-redux' |
|||
import semver from 'semver' |
|||
|
|||
import { openModal } from 'reducers/modals' |
|||
import { lastUsedVersionSelector } from 'reducers/settings' |
|||
import { saveSettings } from 'actions/settings' |
|||
import { MODAL_RELEASES_NOTES } from 'config/constants' |
|||
|
|||
import type { State } from 'reducers' |
|||
|
|||
type Props = { |
|||
openModal: Function, |
|||
saveSettings: Function, |
|||
lastUsedVersion: string, |
|||
} |
|||
|
|||
const mapStateToProps = (state: State) => ({ |
|||
lastUsedVersion: lastUsedVersionSelector(state), |
|||
}) |
|||
|
|||
const mapDispatchToProps = { |
|||
openModal, |
|||
saveSettings, |
|||
} |
|||
|
|||
class UpdateInstalled extends PureComponent<Props> { |
|||
componentDidMount() { |
|||
const { lastUsedVersion, saveSettings, openModal } = this.props |
|||
const currentVersion = __APP_VERSION__ |
|||
|
|||
if (semver.gt(currentVersion, lastUsedVersion)) { |
|||
openModal(MODAL_RELEASES_NOTES, currentVersion) |
|||
saveSettings({ lastUsedVersion: currentVersion }) |
|||
} |
|||
} |
|||
|
|||
render() { |
|||
return null |
|||
} |
|||
} |
|||
|
|||
export default connect( |
|||
mapStateToProps, |
|||
mapDispatchToProps, |
|||
)(UpdateInstalled) |
|||
@ -1,17 +0,0 @@ |
|||
// @flow
|
|||
|
|||
import React, { PureComponent, Fragment } from 'react' |
|||
|
|||
import UpdateDownloaded from './UpdateDownloaded' |
|||
import UpdateInstalled from './UpdateInstalled' |
|||
|
|||
export default class UpdateNotifier extends PureComponent<{}> { |
|||
render() { |
|||
return ( |
|||
<Fragment> |
|||
<UpdateDownloaded /> |
|||
<UpdateInstalled /> |
|||
</Fragment> |
|||
) |
|||
} |
|||
} |
|||
@ -0,0 +1,75 @@ |
|||
// @flow
|
|||
|
|||
import React, { PureComponent } from 'react' |
|||
import styled from 'styled-components' |
|||
|
|||
import { radii } from 'styles/theme' |
|||
|
|||
import TranslatedError from 'components/TranslatedError' |
|||
import Box from 'components/base/Box' |
|||
|
|||
import { withUpdaterContext } from './UpdaterContext' |
|||
import type { UpdaterContextType } from './UpdaterContext' |
|||
|
|||
type Props = { |
|||
context: UpdaterContextType, |
|||
} |
|||
|
|||
export const VISIBLE_STATUS = ['download-progress', 'checking', 'check-success', 'error'] |
|||
|
|||
class UpdaterTopBanner extends PureComponent<Props> { |
|||
render() { |
|||
const { context } = this.props |
|||
const { status, quitAndInstall, downloadProgress, error } = context |
|||
|
|||
if (!VISIBLE_STATUS.includes(status)) return null |
|||
|
|||
return ( |
|||
<Container status={status}> |
|||
{status === 'download-progress' && `Downloading update... ${Math.round(downloadProgress)}%`} |
|||
{status === 'checking' && `Verifying update...`} |
|||
{status === 'error' && |
|||
error && ( |
|||
<div> |
|||
{'Error during update. Please download again.'} |
|||
<ErrorContainer> |
|||
<TranslatedError error={error} /> |
|||
</ErrorContainer> |
|||
</div> |
|||
)} |
|||
{status === 'check-success' && ( |
|||
<div> |
|||
{'Update ready to install. '} |
|||
<DownloadLink onClick={quitAndInstall}>{'install now'}</DownloadLink> |
|||
</div> |
|||
)} |
|||
</Container> |
|||
) |
|||
} |
|||
} |
|||
|
|||
const Container = styled(Box).attrs({ |
|||
py: '8px', |
|||
px: 3, |
|||
bg: p => (p.status === 'error' ? 'alertRed' : 'wallet'), |
|||
color: 'white', |
|||
mt: -20, |
|||
mb: 20, |
|||
fontSize: 4, |
|||
})` |
|||
border-radius: ${radii[1]}px; |
|||
` |
|||
|
|||
const DownloadLink = styled.span` |
|||
color: white; |
|||
text-decoration: underline; |
|||
cursor: pointer; |
|||
` |
|||
|
|||
const ErrorContainer = styled.div` |
|||
margin-top: 10px; |
|||
font-family: monospace; |
|||
font-size: 10px; |
|||
` |
|||
|
|||
export default withUpdaterContext(UpdaterTopBanner) |
|||
@ -0,0 +1,70 @@ |
|||
// @flow
|
|||
/* eslint-disable react/jsx-no-literals */ |
|||
|
|||
import React, { Component } from 'react' |
|||
|
|||
import { withUpdaterContext } from './UpdaterContext' |
|||
import type { UpdaterContextType } from './UpdaterContext' |
|||
|
|||
const statusToDebug = ['idle', 'download-progress', 'checking', 'check-success', 'error'] |
|||
|
|||
type Props = { |
|||
context: UpdaterContextType, |
|||
} |
|||
|
|||
class DebugUpdater extends Component<Props> { |
|||
render() { |
|||
const { context } = this.props |
|||
const { status, setStatus, quitAndInstall } = context |
|||
return ( |
|||
<div style={styles.root}> |
|||
<h1> |
|||
DEBUG UPDATE<br /> |
|||
------------<br /> |
|||
</h1> |
|||
<b>status:</b> {status} |
|||
<div style={{ marginTop: 20 }}> |
|||
{statusToDebug.map(s => ( |
|||
<button key={s} style={styles.btn} onClick={() => setStatus(s)}> |
|||
{status === s ? `[${s}]` : s} |
|||
</button> |
|||
))} |
|||
</div> |
|||
<div style={{ marginTop: 20 }}> |
|||
<b>simulate update</b> |
|||
</div> |
|||
<div style={{ marginTop: 20 }}> |
|||
<button style={styles.btn} onClick={quitAndInstall}> |
|||
{'quit and install'} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
const styles = { |
|||
root: { |
|||
position: 'fixed', |
|||
bottom: 0, |
|||
right: 0, |
|||
padding: 10, |
|||
fontSize: 10, |
|||
background: 'black', |
|||
color: 'white', |
|||
fontFamily: 'monospace', |
|||
zIndex: 1000, |
|||
maxWidth: 250, |
|||
}, |
|||
btn: { |
|||
cursor: 'pointer', |
|||
background: 'lightgreen', |
|||
color: 'black', |
|||
border: 'none', |
|||
marginRight: 10, |
|||
marginTop: 10, |
|||
padding: '0px 10px', |
|||
}, |
|||
} |
|||
|
|||
export default withUpdaterContext(DebugUpdater) |
|||
@ -0,0 +1,88 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
import styled, { keyframes } from 'styled-components' |
|||
|
|||
import { colors } from 'styles/theme' |
|||
|
|||
import { withUpdaterContext } from './UpdaterContext' |
|||
import { VISIBLE_STATUS } from './Banner' |
|||
import type { UpdaterContextType, UpdateStatus } from './UpdaterContext' |
|||
|
|||
type Props = { |
|||
context: UpdaterContextType, |
|||
} |
|||
|
|||
const rotate = keyframes` |
|||
0% { |
|||
transform: rotate(0deg); |
|||
} |
|||
100% { |
|||
transform: rotate(360deg); |
|||
} |
|||
` |
|||
|
|||
const getColor = ({ status }: { status: UpdateStatus }) => |
|||
status === 'error' ? colors.alertRed : colors.wallet |
|||
|
|||
const getOpacity = ({ status }: { status: UpdateStatus }) => |
|||
status === 'download-progress' || status === 'checking' ? 0.5 : 1 |
|||
|
|||
const Dot = styled.div` |
|||
opacity: ${getOpacity}; |
|||
width: 8px; |
|||
height: 8px; |
|||
background-color: ${getColor}; |
|||
border-radius: 50%; |
|||
` |
|||
|
|||
const Spinner = styled.div` |
|||
opacity: 0.5; |
|||
position: absolute; |
|||
top: -3px; |
|||
left: -3px; |
|||
animation: ${rotate} 1.5s linear infinite; |
|||
width: 14px; |
|||
height: 14px; |
|||
|
|||
&:before { |
|||
content: ''; |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
width: 4px; |
|||
height: 4px; |
|||
background-color: ${colors.wallet}; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
&:after { |
|||
content: ''; |
|||
position: absolute; |
|||
width: 4px; |
|||
height: 4px; |
|||
background-color: ${colors.wallet}; |
|||
border-radius: 50%; |
|||
} |
|||
` |
|||
|
|||
function UpdateDot(props: Props) { |
|||
const { context } = props |
|||
const { status } = context |
|||
if (!VISIBLE_STATUS.includes(status)) return null |
|||
const showSpinner = status === 'download-progress' || status === 'checking' |
|||
return ( |
|||
<div style={styles.container}> |
|||
{showSpinner && <Spinner />} |
|||
<Dot status={status} /> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
const styles = { |
|||
container: { |
|||
position: 'relative', |
|||
}, |
|||
} |
|||
|
|||
export default withUpdaterContext(UpdateDot) |
|||
@ -0,0 +1,95 @@ |
|||
// @flow
|
|||
|
|||
import React, { Component } from 'react' |
|||
|
|||
import autoUpdate from 'commands/autoUpdate' |
|||
import quitAndInstallElectronUpdate from 'commands/quitAndInstallElectronUpdate' |
|||
|
|||
export type UpdateStatus = |
|||
| 'idle' |
|||
| 'checking-for-update' |
|||
| 'update-available' |
|||
| 'update-not-available' |
|||
| 'download-progress' |
|||
| 'update-downloaded' |
|||
| 'checking' |
|||
| 'check-success' |
|||
| 'error' |
|||
|
|||
export type UpdaterContextType = { |
|||
status: UpdateStatus, |
|||
downloadProgress: number, |
|||
quitAndInstall: () => void, |
|||
setStatus: UpdateStatus => void, |
|||
error: ?Error, |
|||
} |
|||
|
|||
type UpdaterProviderProps = { |
|||
children: *, |
|||
} |
|||
|
|||
type UpdaterProviderState = { |
|||
status: UpdateStatus, |
|||
downloadProgress: number, |
|||
error: ?Error, |
|||
} |
|||
|
|||
const UpdaterContext = React.createContext() |
|||
|
|||
class Provider extends Component<UpdaterProviderProps, UpdaterProviderState> { |
|||
constructor() { |
|||
super() |
|||
|
|||
if (__PROD__) { |
|||
this.sub = autoUpdate.send({}).subscribe({ |
|||
next: e => { |
|||
if (e.status === 'download-progress') { |
|||
const downloadProgress = e.payload && e.payload.percent ? e.payload.percent : 0 |
|||
this.setState({ status: e.status, downloadProgress }) |
|||
} else { |
|||
this.setStatus(e.status) |
|||
} |
|||
}, |
|||
error: error => this.setState({ status: 'error', error }), |
|||
}) |
|||
} |
|||
|
|||
this.state = { |
|||
status: 'idle', |
|||
downloadProgress: 0, |
|||
error: null, |
|||
} |
|||
} |
|||
|
|||
componentWillUnmount() { |
|||
if (this.sub) { |
|||
this.sub.unsubscribe() |
|||
} |
|||
} |
|||
|
|||
sub = null |
|||
|
|||
setStatus = (status: UpdateStatus) => this.setState({ status }) |
|||
setDownloadProgress = (downloadProgress: number) => this.setState({ downloadProgress }) |
|||
quitAndInstall = () => quitAndInstallElectronUpdate.send().toPromise() |
|||
|
|||
render() { |
|||
const { status, downloadProgress, error } = this.state |
|||
const value = { |
|||
status, |
|||
downloadProgress, |
|||
error, |
|||
setStatus: this.setStatus, |
|||
quitAndInstall: this.quitAndInstall, |
|||
} |
|||
return <UpdaterContext.Provider value={value}>{this.props.children}</UpdaterContext.Provider> |
|||
} |
|||
} |
|||
|
|||
export const withUpdaterContext = (ComponentToDecorate: React$ComponentType<*>) => (props: *) => ( |
|||
<UpdaterContext.Consumer> |
|||
{context => <ComponentToDecorate {...props} context={context} />} |
|||
</UpdaterContext.Consumer> |
|||
) |
|||
|
|||
export const UpdaterProvider = Provider |
|||
@ -1,48 +0,0 @@ |
|||
// @flow
|
|||
|
|||
import { handleActions, createAction } from 'redux-actions' |
|||
|
|||
export type UpdateStatus = |
|||
| 'idle' |
|||
| 'checking' |
|||
| 'available' |
|||
| 'progress' |
|||
| 'unavailable' |
|||
| 'error' |
|||
| 'downloaded' |
|||
|
|||
export type UpdateState = { |
|||
status: UpdateStatus, |
|||
data?: Object, |
|||
} |
|||
|
|||
const state: UpdateState = { |
|||
status: 'idle', |
|||
data: {}, |
|||
} |
|||
|
|||
const handlers = { |
|||
UPDATE_SET_STATUS: (state: UpdateState, { payload }: { payload: UpdateState }): UpdateState => |
|||
payload, |
|||
} |
|||
|
|||
// Actions
|
|||
|
|||
export const setUpdateStatus = createAction( |
|||
'UPDATE_SET_STATUS', |
|||
(status: UpdateStatus, data?: Object): UpdateState => ({ status, data }), |
|||
) |
|||
|
|||
// Selectors
|
|||
|
|||
export function getUpdateStatus(state: { update: UpdateState }): UpdateStatus { |
|||
return state.update.status |
|||
} |
|||
|
|||
export function getUpdateData(state: { update: UpdateState }): Object { |
|||
return state.update.data || {} |
|||
} |
|||
|
|||
// Default export
|
|||
|
|||
export default handleActions(handlers, state) |
|||
Loading…
Reference in new issue