diff --git a/src/pages/Compose.styles.tsx b/src/pages/Compose.styles.tsx index 6d354ea..40ea774 100644 --- a/src/pages/Compose.styles.tsx +++ b/src/pages/Compose.styles.tsx @@ -45,5 +45,25 @@ export const styles = (theme: Theme) => }, pollWizardFlexGrow: { flexGrow: 1 + }, + draftDisplayArea: { + display: "flex", + paddingLeft: 8, + paddingRight: 8, + paddingTop: 4, + paddingBottom: 4, + borderColor: theme.palette.action.disabledBackground, + borderWidth: 0.25, + borderStyle: "solid", + borderRadius: 2, + verticalAlign: "middle", + marginLeft: 16, + marginRight: 16 + }, + draftText: { + padding: theme.spacing.unit / 2 + }, + draftFlexGrow: { + flexGrow: 1 } }); diff --git a/src/pages/Compose.tsx b/src/pages/Compose.tsx index fa8915f..1529664 100644 --- a/src/pages/Compose.tsx +++ b/src/pages/Compose.tsx @@ -44,6 +44,7 @@ import { getConfig, getUserDefaultBool } from "../utilities/settings"; +import { draftExists, writeDraft, loadDraft } from "../utilities/compose"; interface IComposerState { account: UAccount; @@ -141,6 +142,31 @@ class Composer extends Component { }); } + /** + * Check if there is unsaved text and store it as a draft. + */ + componentWillUnmount() { + if (this.state.text !== "") { + writeDraft( + this.state.text, + this.state.reply ? Number(this.state.reply) : -999 + ); + this.props.enqueueSnackbar("Draft saved."); + } + } + + /** + * Restore the draft from session storage and pre-load it into the state. + */ + restoreDraft() { + const draft = loadDraft(); + const text = draft.contents; + const reply = + draft.replyId !== -999 ? draft.replyId.toString() : undefined; + this.setState({ text, reply }); + this.props.enqueueSnackbar("Restored draft."); + } + checkComposerParams(location?: string): ParsedQuery { let params = ""; if (location !== undefined && typeof location === "string") { @@ -738,6 +764,21 @@ class Composer extends Component { ) : null} + {draftExists() ? ( + + + You have an unsaved post. + +
+ + + ) : null}