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())} /> - RECORD THOUGHTS ABOUT YOUR DAY + + RECORD THOUGHTS ABOUT YOUR DAY + + {saving ? ( + <> + Saving + + + ) : lastSavedAt >= lastEditedAt ? ( + `Last saved at ${format(lastSavedAt, "h:mma")}` + ) : ( + "Unsaved changes" + )} + + {loading ? (