import _ from 'underscore'; import {Contenteditable, RetinaImg} from 'nylas-component-kit'; import {React} from 'nylas-exports'; import TemplateStore from './template-store'; import TemplateEditor from './template-editor'; class PreferencesTemplates extends React.Component { static displayName = 'PreferencesTemplates'; constructor() { super(); this._templateSaveQueue = {}; const {templates, selectedTemplate, selectedTemplateName} = this._getStateFromStores(); this.state = { editAsHTML: false, editState: templates.length === 0 ? "new" : null, templates: templates, selectedTemplate: selectedTemplate, selectedTemplateName: selectedTemplateName, contents: null, }; } componentDidMount() { this.unsub = TemplateStore.listen(this._onChange); } componentWillUnmount() { this.unsub(); if (this.state.selectedTemplate) { this._saveTemplateNow(this.state.selectedTemplate.name, this.state.contents); } } // SAVING AND LOADING TEMPLATES _loadTemplateContents = (template) => { if (template) { TemplateStore.getTemplateContents(template.id, (contents) => { this.setState({contents: contents}); }); } } _saveTemplateNow(name, contents, callback) { TemplateStore.saveTemplate(name, contents, callback); } _saveTemplateSoon(name, contents) { this._templateSaveQueue[name] = contents; this._saveTemplatesFromCache(); } __saveTemplatesFromCache() { for (const name of Object.keys(this._templateSaveQueue)) { this._saveTemplateNow(name, this._templateSaveQueue[name]); } this._templateSaveQueue = {}; } _saveTemplatesFromCache = _.debounce(PreferencesTemplates.prototype.__saveTemplatesFromCache, 500); // OVERALL STATE HANDLING _onChange = () => { this.setState(this._getStateFromStores()); } _getStateFromStores() { const templates = TemplateStore.items(); let selectedTemplate = this.state ? this.state.selectedTemplate : null; if (selectedTemplate && !_.pluck(templates, "id").includes(selectedTemplate.id)) { selectedTemplate = null; } else if (!selectedTemplate) { selectedTemplate = templates.length > 0 ? templates[0] : null; } this._loadTemplateContents(selectedTemplate); let selectedTemplateName = null; if (selectedTemplate) { selectedTemplateName = this.state ? this.state.selectedTemplateName : selectedTemplate.name; } return {templates, selectedTemplate, selectedTemplateName}; } // TEMPLATE CONTENT EDITING _onEditTemplate = (event) => { const html = event.target.value; this.setState({contents: html}); if (this.state.selectedTemplate) { this._saveTemplateSoon(this.state.selectedTemplate.name, html); } } _onSelectTemplate = (event) => { if (this.state.selectedTemplate) { this._saveTemplateNow(this.state.selectedTemplate.name, this.state.contents); } const selectedId = event.target.value; const selectedTemplate = this.state.templates.find((template) => template.id === selectedId ); this.setState({ selectedTemplate: selectedTemplate, selectedTemplateName: selectedTemplate ? selectedTemplate.name : null, contents: null, }); this._loadTemplateContents(selectedTemplate); } _renderTemplatePicker() { const options = this.state.templates.map((template) => { return }); return ( ); } _renderEditableTemplate() { return ( ); } _renderHTMLTemplate() { return (