Newer
Older
/* eslint-disable react/prefer-stateless-function */
import React, { Component } from 'react'
import { isEqual } from 'lodash'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { Icon, Spinner } from '@pubsweet/ui'
import { compose, setDisplayName, withStateHandlers } from 'recompose'
import Text from './Text'
class AutosaveIndicator extends Component {
constructor(props) {
super(props)
this.timer = null
}
componentDidMount() {
this.setTimer()
}
componentWillReceiveProps({ autosave: nextAutosave }) {
const { autosave, toggleVisible } = this.props
if (!isEqual(autosave, nextAutosave)) {
toggleVisible()
this.setTimer()
}
}
componentWillUnmount() {
clearTimeout(this.timer)
}
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
setTimer = () => {
const { toggleVisible, delay = 2000 } = this.props
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(toggleVisible, delay)
}
render() {
const {
isVisible,
successText = 'Changes saved',
errorText = 'Changes not saved',
progressText = 'Saving changes...',
autosave: { isFetching, error, lastUpdate },
} = this.props
return isVisible ? (
<Root className="autosave-indicator">
{isFetching && (
<AutoSaveContainer>
<Spinner icon="loader" size={2} />
<Text>{progressText}</Text>
</AutoSaveContainer>
)}
{!isFetching &&
lastUpdate && (
<AutoSaveContainer>
<IconContainer>
<Icon primary size={2}>
check-circle
</Icon>
</IconContainer>
<Text>{successText}</Text>
</AutoSaveContainer>
)}
{!isFetching &&
error && (
<AutoSaveContainer>
<IconContainer>
<Icon error size={2}>
alert-triangle
</Icon>
</IconContainer>
<Text error title={error}>
{errorText}
</Text>
</AutoSaveContainer>
)}
</Root>
) : (
<span />
)
}
}
export default compose(
withStateHandlers(
{ isVisible: true },
{
toggleVisible: ({ isVisible }, props) => () => ({
isVisible: !isVisible,
}),
},
),
setDisplayName('AutosaveIndicator'),
)(AutosaveIndicator)
// #region styles
const Root = styled.div`
align-items: center;
display: flex;
justify-content: flex-end;
`
const AutoSaveContainer = styled.div`
align-items: center;
display: flex;
padding: ${th('gridUnit')};
`
const IconContainer = styled.div`
align-items: center;
display: flex;
justify-content: center;
`
// #endregion