perjo927

import css from "./main.css";
import { createStore } from "./redux/store/index";
import { actions } from "./redux/actions/index";
import { rootReducer } from "./redux/reducers/index";
import { render } from "lit-html";
import { App } from "./templates/App";

const store = createStore(rootReducer, {});

store.subscribe(() => console.log(store.getState()));

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="" />