perjo927

body {
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 14px;
  background: #f5f5f5;
  color: #4d4d4d;
  margin: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
  display: flex;

perjo927

export const getAndResetInput = (e) => {
  const [input] = e.target;
  const { value } = input;
  input.value = "";
  return value;
};

export const maybeRender = (template, validator) =>
  validator ? template : null;

perjo927

import { CONSTS } from "../redux/actions/index.js";

const { ALL, DONE, IN_PROGRESS } = CONSTS.visibilityFilters;

export const makeRegrettable = (store, actions) => ({
  undo() {
    return store.dispatch(actions.undo());
  },
  redo() {
    return store.dispatch(actions.redo());

perjo927

export const compose = (...functions) => (argToComposedFunction) =>
  functions.reduceRight(
    (accumulatedValue, func) => func(accumulatedValue),
    argToComposedFunction
  );

perjo927

import { html } from "lit-html";
import { Input } from "./Input";
import { TodoList } from "./TodoList";
import { ListManager } from "./ListManager";
import { Undo } from "./Undo";
import { Redo } from "./Redo";
import { getTodoItem } from "../factories/todo/index";
import {
  getStoreMethods,
  getTodos,

perjo927

import { html } from "lit-html";
import { CONSTS } from "../redux/actions/index";

const { ALL, DONE, IN_PROGRESS } = CONSTS.visibilityFilters;

const filterAll = { filter: ALL, text: "All" };
const filterDone = { filter: DONE, text: "Done" };
const filterInProgress = {
  filter: IN_PROGRESS,
  text: "In Progress",

perjo927

import { html } from "lit-html";

export const Redo = ({ disabled, onClick }) => {
  const className = `${disabled ? "disabled" : ""}`;
  const onRedo = disabled ? () => {} : onClick;

  return html`
    <div class=${className} @click=${onRedo}>
      <svg
        xmlns="http://www.w3.org/2000/svg"

perjo927

import { html } from "lit-html";

export const Undo = ({ disabled, onClick }) => {
  const className = `${disabled ? "disabled" : ""}`;
  const onUndo = disabled ? () => {} : onClick;

  return html`
    <div class=${className} @click=${onUndo}>
      <svg
        xmlns="http://www.w3.org/2000/svg"

perjo927

import { html } from "lit-html";

export const Input = ({ onSubmit }) => html`
  <form
    @submit=${(e) => {
      e.preventDefault();
      onSubmit(e);
    }}
  >
    <input placeholder="What needs to be done?" autofocus="" />

perjo927

import { html } from "lit-html";

const Todo = ({ onToggleClick, onDeleteClick, text, done }) => {
  const toggleClass = "todo toggle";
  const deleteClass = "todo delete";
  const textClass = `todo text ${done ? " done" : ""}`;
  const checkMark = done ? "✔" : "";

  return html`
    <li>