<commit_before>import React from 'react';
import Masonry from 'masonry-layout';
import Note from './Note';
import './Layout.scss';
import noteRepository from '../../data/NoteRepository';

export default class Layout extends React.Component {
  constructor() {
    super();
    this.state = {
      notes: [],
      masonry: {},
    };
  }

  componentDidMount() {
    /**
     * TODO: update description
     * https://facebook.github.io/react/docs/refs-and-the-dom.html
     *
     * Masonry is initialized here because it needs the name of the DOM element
     * that will be turned into a Masonry grid.
     * This data comes from the ref callback attribute
     */
    this.setState({
      ...this.state,
      masonry: new Masonry(this.refs.notes, {
        itemSelector: '.note',
        columnWidth: 240,
        gutter: 16,
        fitWidth: true,
      }),
    });

    noteRepository.on('added', note => {
      // update state
      const notes = this.state.notes.slice(0);
      notes.unshift(note);
      this.setState({ ...this.state, notes });
      this.state.masonry.reloadItems();
      this.state.masonry.layout();
    });

    noteRepository.on('changed', ({ key, title, content }) => {
      const notes = this.state.notes.slice(0);
      const outdatedNote = noteRepository.find(notes, key);
      outdatedNote.title = title;
      outdatedNote.content = content;
      this.setState({ ...this.state, notes });
    });

    noteRepository.on('removed', ({ key }) => {
      const newState = this.state.notes;
      const noteToRemove = noteRepository.find(newState, key);
      newState.splice(noteToRemove);
      this.setState({...this.state, newState });
      // this.setState(newState);
    })

    // firebase.initializeApp(config);
    // const notesRef = firebase.database().ref('notes');
    // notesRef.on('child_added', snapshot => {
    //   const { title, content } = snapshot.val();
    //   const id = snapshot.W.path.o.join('');
    //   const note = { title, content, id };
    //
    //   // update state
    //   const newState = this.state.notes;
    //   newState.unshift(note);
    //   this.setState(newState);
    // });
  }

  componentDidUpdate() {
    // lay out items again after changes
    this.state.masonry.reloadItems();
    this.state.masonry.layout();
  }
<commit_msg>Filter out deleted note from Layout state Avoid mutating existing state<commit_after>import React from 'react';
import Masonry from 'masonry-layout';
import Note from './Note';
import './Layout.scss';
import noteRepository from '../../data/NoteRepository';

export default class Layout extends React.Component {
  constructor() {
    super();
    this.state = {
      notes: [],
      masonry: {},
    };
  }

  componentDidMount() {
    /**
     * TODO: update description
     * https://facebook.github.io/react/docs/refs-and-the-dom.html
     *
     * Masonry is initialized here because it needs the name of the DOM element
     * that will be turned into a Masonry grid.
     * This data comes from the ref callback attribute
     */
    this.setState({
      ...this.state,
      masonry: new Masonry(this.refs.notes, {
        itemSelector: '.note',
        columnWidth: 240,
        gutter: 16,
        fitWidth: true,
      }),
    });

    noteRepository.on('added', note => {
      // update state
      const notes = this.state.notes.slice(0);
      notes.unshift(note);
      this.setState({ ...this.state, notes });
      this.state.masonry.reloadItems();
      this.state.masonry.layout();
    });

    noteRepository.on('changed', ({ key, title, content }) => {
      const notes = this.state.notes.slice(0);
      const outdatedNote = noteRepository.find(notes, key);
      outdatedNote.title = title;
      outdatedNote.content = content;
      this.setState({ ...this.state, notes });
    });

    noteRepository.on('removed', ({ key }) => {
      const noteToRemove = noteRepository.find(this.state.notes, key);
      const notes = this.state.notes.filter(note => note !== noteToRemove);
      this.setState({ ...this.state, notes });
    })

    // firebase.initializeApp(config);
    // const notesRef = firebase.database().ref('notes');
    // notesRef.on('child_added', snapshot => {
    //   const { title, content } = snapshot.val();
    //   const id = snapshot.W.path.o.join('');
    //   const note = { title, content, id };
    //
    //   // update state
    //   const newState = this.state.notes;
    //   newState.unshift(note);
    //   this.setState(newState);
    // });
  }

  componentDidUpdate() {
    // lay out items again after changes
    this.state.masonry.reloadItems();
    this.state.masonry.layout();
  }

{'fraction_non_alphanumeric': 0.15256410256410258, 'fraction_numerical': 0.0029914529914529917, 'mean_word_length': 2.3969521044992743, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 12, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2207720', 'n_tokens_mistral': 1401, 'n_tokens_neox': 1387, 'n_words': 319}