<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

import { Page, Row } from '../Grid';
import AddTodoForm from '../AddTodoForm';
import Todo from '../Todo';

const ListOfTodos = styled.ul`
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
`;

const TodoList = (props) => (
  <Page title="Todo">
    <Row>
      <AddTodoForm addTodo={props.addTodo} />
    </Row>

    <Row>
      <h3>Checklist</h3>
      <ListOfTodos className="todo-list">
        {Object.keys(props.todos).map((key) => (
          <Todo
            key={key}
            index={key}
            details={props.todos[key]}
            updateTodo={props.updateTodo}
            removeTodo={props.removeTodo}
          />
        ))}
      </ListOfTodos>
    </Row>

    <Row>
      <h3>Inspiration</h3>
      <ul>
        <li>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="http://sambedingfield.com/"
          >
            <NAME>
          </a>
        </li>
        <li>
          <a target="_blank" rel="noopener noreferrer" href="http://wesbos.com">
            <NAME>
          </a>
        </li>
        <li>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="http://ivesvh.com/"
          >
            <NAME>
          </a>
        </li>
        <li>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://line25.com/inspiration/designer-portfolio-websites"
          >
            Line 25 list of 30 portfolios
          </a>
        </li>
      </ul>
    </Row>
  </Page>
);

TodoList.propTypes = {
  todos: PropTypes.object.isRequired,
  addTodo: PropTypes.func.isRequired,
  updateTodo: PropTypes.func.isRequired,
  removeTodo: PropTypes.func.isRequired,
};

export default TodoList;<commit_msg>Add toggle for rending completed todos<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

import AddTodoForm from '../AddTodoForm';
import Todo from '../Todo';

import { Page, Row } from '../../theme/grid';

const ListOfTodos = styled.ul`
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
`;

const ShowComplete = styled.input`
  display: inline;
  margin: 0.5em;
`;

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.toggleShowComplete = this.toggleShowComplete.bind(this);
    this.renderTodo = this.renderTodo.bind(this);

    this.state = {
      showComplete: false,
    };
  }

  toggleShowComplete() {
    this.setState({ showComplete: !this.state.showComplete });
  }

  renderTodo(showComplete) {
    return Object.keys(this.props.todos).map((key) => {
      if (showComplete) {
        return (
          <Todo
            key={key}
            index={key}
            details={this.props.todos[key]}
            updateTodo={this.props.updateTodo}
            removeTodo={this.props.removeTodo}
          />
        );
      } else if (!this.props.todos[key].complete) {
        return (
          <Todo
            key={key}
            index={key}
            details={this.props.todos[key]}
            updateTodo={this.props.updateTodo}
            removeTodo={this.props.removeTodo}
          />
        );
      }
      return null;
    });
  }

  render() {
    return (
      <Page title="Todo List">
        <Row>
          <AddTodoForm addTodo={this.props.addTodo} />
        </Row>

        <Row>
          <h2>My Todos</h2>
          <form>
            <ShowComplete
              ref={(input) => {
                this.todoForm = input;
              }}
              type="checkbox"
              name="show-complete"
              checked={this.state.showComplete}
              onChange={() => this.toggleShowComplete()}
            />
            <label htmlFor="show-complete">Show completed todos?</label>
          </form>
          <ListOfTodos>{this.renderTodo(this.state.showComplete)}</ListOfTodos>
        </Row>

        <Row>
          <h3>Inspiration</h3>
          <ul>
            <li>
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="http://sambedingfield.com/"
              >
                <NAME>
              </a>
            </li>
            <li>
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="http://wesbos.com"
              >
                <NAME>
              </a>
            </li>
            <li>
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="http://ivesvh.com/"
              >
                <NAME>
              </a>
            </li>
            <li>
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="https://line25.com/inspiration/designer-portfolio-websites"
              >
                Line 25 list of 30 portfolios
              </a>
            </li>
          </ul>
        </Row>
      </Page>
    );
  }
}

TodoList.propTypes = {
  todos: PropTypes.object.isRequired,
  addTodo: PropTypes.func.isRequired,
  updateTodo: PropTypes.func.isRequired,
  removeTodo: PropTypes.func.isRequired,
};

export default TodoList;
{'fraction_non_alphanumeric': 0.1335995643492467, 'fraction_numerical': 0.00471954982755491, 'mean_word_length': 1.5136861313868613, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 88, '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': '3296287', 'n_tokens_mistral': 1739, 'n_tokens_neox': 1702, 'n_words': 304}