perjo927

/*
  Read more at:
  https://redux.js.org/api/combinereducers
*/
export const combineReducers = (reducers) => (
  state = {},
  action = { value: null, type: null }
) =>
  Object.keys(reducers).reduce((nextState, key) => {
    // Call every reducer with the part of the state it manages

perjo927

import { visibilityReducer } from "./visibility";
import { todoReducer, areTodosEqual } from "./todos";
import { getUndoableReducer } from "./undoable";
import { combineReducers } from "./combineReducers";

export const undoableTodoReducer = getUndoableReducer(
  todoReducer,
  areTodosEqual
);

perjo927

import { createStore } from "./redux/store/index";
import { actions } from "./redux/actions/index";
import { rootReducer } from "./redux/reducers/index";

const store = createStore(rootReducer, {});

store.subscribe(() => console.log(store.getState()));
const { id } = store.dispatch(actions.addTodo({id: 1, done: false, text: "My first todo"}));
store.dispatch(actions.toggleTodo(id));
store.dispatch(actions.undo());

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>

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";

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 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";
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";
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

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