<commit_before>/**
 * @license
 * Copyright (c) 2018 Google Inc. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * Code distributed by Google as part of this project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */

'use strict';

defineParticle(({DomParticle, html, log}) => {
  const host = `social-edit-post`;

  const template = html`
<style>
[${host}] {
  font-family: 'Google Sans', sans-serif;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 56px 8px 8px 8px;
}
[${host}] img {
  display: block;
  width: 256px;
}
[${host}] textarea {
  flex: 1;
  border: none;
  font-family: 'Google Sans', sans-serif;
  font-size: 16pt;
  outline: none;
  resize: none;
}
[${host}] [post-buttons] {
  position: absolute;
  right: 8px;
  top: 8px;
}
[${host}] [post-buttons] > * {
  border-radius: 100%;
  color: lightgrey;
  display: inline-block;
  padding: 8px;
}
[${host}] [post-buttons] > *:active {
  background-color: #b0e3ff;
}
[${host}] [post-buttons] > [active] {
  color: black;
}
[${host}] [post-buttons] > [active][primary] {
  color: green;
}
</style>
<div ${host}>
  <div post-buttons>
    <icon on-click="onDeletePost">delete</icon>
    <firebase-upload active accept="image/*" on-upload="onAttachPhoto"><icon>attach_file</icon></firebase-upload>
    <icon primary active$="{{saveButtonActive}}" on-click="onSavePost">done</icon>
  </div>
  <img src="{{image}}">
  <textarea value="{{message}}" on-input="onTextInput"></textarea>
</div>`;

  return class extends DomParticle {
    get template() {
      return template;
    }
    render({user, post}, {message, image, savePost}) {
      if (savePost) {
        this.savePost(user, message, image);
      }
      const saveButtonActive = Boolean(message && (message.trim().length > 0));
      const model = {
        saveButtonActive,
        message: message || '',
        image: image || ''
      };
      return model;
    }
    setHandle(name, data) {
      const handle = this._views.get(name);
      handle.set(new (handle.entityClass)(data));
    }
    async _renderRecipe() {
      const renderParticle = await this._views.get('renderParticle').get();
      return [
        JSON.stringify(renderParticle.toLiteral()),
        DomParticle
            .buildManifest`
${renderParticle}
recipe
  use '{{item_id}}' as v1
  slot '{{slot_id}}' as s1
  {{other_views}}
  ${renderParticle.name}
    ${renderParticle.connections[0].name} <- v1
    {{other_connections}}
    consume item as s1
      `.trim()
      ];
    }
    async savePost(user, message, image) {
      const [renderParticleSpec, renderRecipe] = await this._renderRecipe();
      console.log(`Setting item recipe: ${renderRecipe}`);
      this.setHandle('post', {
        message,
        image,
        renderRecipe,
        renderParticleSpec,
        createdTimestamp: Date.now(),
        author: user.id
      });
      this.setState({savePost: false, message: '', image: ''});
    }
    onTextInput(e) {
      this.setIfDirty({message: e.data.value});
    }
    // TODO(wkorman): Add onDeletePost.
    onSavePost(e) {
      this.setIfDirty({savePost: true});
    }
    onAttachPhoto(e) {
      const image = e.data.value;
      this.setIfDirty({image});
    }
  };
});<commit_msg>Move render particle logic to willReceiveProps. (#1115)<commit_after>/**
 * @license
 * Copyright (c) 2018 Google Inc. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * Code distributed by Google as part of this project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */

'use strict';

defineParticle(({DomParticle, html, log}) => {
  const host = `social-edit-post`;

  const template = html`
<style>
[${host}] {
  font-family: 'Google Sans', sans-serif;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 56px 8px 8px 8px;
}
[${host}] img {
  display: block;
  width: 256px;
}
[${host}] textarea {
  flex: 1;
  border: none;
  font-family: 'Google Sans', sans-serif;
  font-size: 16pt;
  outline: none;
  resize: none;
}
[${host}] [post-buttons] {
  position: absolute;
  right: 8px;
  top: 8px;
}
[${host}] [post-buttons] > * {
  border-radius: 100%;
  color: lightgrey;
  display: inline-block;
  padding: 8px;
}
[${host}] [post-buttons] > *:active {
  background-color: #b0e3ff;
}
[${host}] [post-buttons] > [active] {
  color: black;
}
[${host}] [post-buttons] > [active][primary] {
  color: green;
}
</style>
<div ${host}>
  <div post-buttons>
    <icon on-click="onDeletePost">delete</icon>
    <firebase-upload active accept="image/*" on-upload="onAttachPhoto"><icon>attach_file</icon></firebase-upload>
    <icon primary active$="{{saveButtonActive}}" on-click="onSavePost">done</icon>
  </div>
  <img src="{{image}}">
  <textarea value="{{message}}" on-input="onTextInput"></textarea>
</div>`;

  return class extends DomParticle {
    get template() {
      return template;
    }
    render(
        {user, post},
        {message, image, savePost, renderParticleSpec, renderRecipe}) {
      if (savePost) {
        this.savePost(renderParticleSpec, renderRecipe, user, message, image);
      }
      const saveButtonActive = Boolean(message && (message.trim().length > 0));
      const model = {
        saveButtonActive,
        message: message || '',
        image: image || ''
      };
      return model;
    }
    setHandle(name, data) {
      const handle = this._views.get(name);
      handle.set(new (handle.entityClass)(data));
    }
    willReceiveProps({renderParticle}, state) {
      // TODO(wkorman): Consider sharing recipe with analogous Words item logic,
      // for example, we could move more of it into PostMuxer.
      if (renderParticle && !state.renderParticleSpec) {
        const renderParticleSpec = JSON.stringify(renderParticle.toLiteral());
        const renderRecipe = DomParticle
                                 .buildManifest`
${renderParticle}
recipe
  use '{{item_id}}' as v1
  slot '{{slot_id}}' as s1
  {{other_views}}
  ${renderParticle.name}
    ${renderParticle.connections[0].name} <- v1
    {{other_connections}}
    consume item as s1
      `.trim();
        this._setState({renderParticleSpec, renderRecipe});
      }
    }
    savePost(renderParticleSpec, renderRecipe, user, message, image) {
      this.setHandle('post', {
        renderParticleSpec,
        renderRecipe,
        message,
        image,
        createdTimestamp: Date.now(),
        author: user.id
      });
      this.setState({savePost: false, message: '', image: ''});
    }
    onTextInput(e) {
      this.setIfDirty({message: e.data.value});
    }
    // TODO(wkorman): Add onDeletePost.
    onSavePost(e) {
      this.setIfDirty({savePost: true});
    }
    onAttachPhoto(e) {
      const image = e.data.value;
      this.setIfDirty({image});
    }
  };
});
{'fraction_non_alphanumeric': 0.15758699372504278, 'fraction_numerical': 0.00912721049629207, 'mean_word_length': 3.0490762124711317, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2389052', 'n_tokens_mistral': 2371, 'n_tokens_neox': 2278, 'n_words': 544}