diff --git a/src/components/screens/Day/Day.js b/src/components/screens/Day/Day.js
index 670b4ad..871aa34 100644
--- a/src/components/screens/Day/Day.js
+++ b/src/components/screens/Day/Day.js
@@ -15,15 +15,30 @@ import { SIZES } from "../../../styles/constants"
import Seek from "../../Seek"
import Icon from "../../Icon"
+const EntryHeading = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: ${SIZES.medium};
+`
const JournalHeading = styled.h2`
font-weight: 700;
font-size: ${SIZES.tiny};
color: ${props => props.theme.colors.secondary};
- margin-top: ${SIZES.medium};
+ display: block;
+`
+const SavedMessaged = styled.div`
+ display: grid;
+ grid-template-columns: auto auto;
+ grid-gap: 5px;
+ color: ${props => props.theme.colors.secondary};
+ font-size: ${SIZES.tiny};
+ user-select: none;
`
const JournalEntryArea = styled.textarea`
font-family: sans-serif;
- flex-grow: 0.8;
+ flex-grow: 0.85;
color: ${props => props.theme.colors.primary};
caret-color: ${props => props.theme.colors.secondary};
background-color: transparent;
@@ -72,6 +87,9 @@ class Day extends React.Component {
state = {
text: "",
loading: true,
+ saving: false,
+ lastSavedAt: new Date(),
+ lastEditedAt: new Date(),
}
timeout = 0
retrievedFromServer = false
@@ -133,7 +151,7 @@ class Day extends React.Component {
if (this.timeout) clearTimeout(this.timeout)
const text = e.target.value
- this.setState({ text })
+ this.setState({ text, lastEditedAt: new Date() })
this.timeout = setTimeout(() => {
this.saveText(text)
}, AUTOSAVE_DELAY)
@@ -154,6 +172,7 @@ class Day extends React.Component {
}
saveText = text => {
+ this.setState({ saving: true })
const {
match: {
params: { year, month, day },
@@ -176,6 +195,9 @@ class Day extends React.Component {
merge: true,
}
)
+ .then(() => {
+ this.setState({ saving: false, lastSavedAt: new Date() })
+ })
}
render() {
@@ -185,7 +207,7 @@ class Day extends React.Component {
},
theme,
} = this.props
- const { text, loading } = this.state
+ const { text, loading, saving, lastSavedAt, lastEditedAt } = this.state
const currentDay = new Date(year, month - 1, day)
if (!currentDay) return
@@ -197,7 +219,27 @@ class Day extends React.Component {
next={format(addDays(currentDay, 1), "/YYYY/MM/DD")}
disableNext={isAfter(currentDay, startOfYesterday())}
/>
-