Skip to main content

The component

The component is a simple todo list. It is composed of two parts:

  • The input box to add a new task
  • The list of tasks

The list of tasks is composed of two parts:

  • The list of todo tasks
  • The list of done tasks

The component is composed of two parts:

  • The styles
  • The component itself

See it in action​

Todo List

Handle by the service​

import React from 'react';
import { rippleHooks } from "./Lake";
import { todoService } from "./TodoService";

// Extract the hook from the rippleHooks
const {useTasks} = rippleHooks;

// Defines the styles
const styles = {
  mainContainer   : {display: "flex", width: "320px", justifyContent: "space-between"},
  lineContainer   : {display: "flex", width: "320px", justifyContent: "space-between", marginTop: "5px"},
  todoTask        : {fontWeight: "bold", cursor: "pointer"},
  doneTask        : {textDecoration: " line-through", color: "grey", fontStyle: "italic"},
  globalContainer : { border: "1px solid white", padding: "15px",  width: "350px"}
} as {[key: string]: React.CSSProperties};

export default function() {
  const [tasks] = useTasks();
  const [todo, setTodo] = React.useState("");

  return <>
    <div style={styles.globalContainer}>
      <div style={styles.mainContainer}>
        <span>Todo List</span>
        {/** Input box to add a new task */}
        <input type="text" value={todo} onChange={_ => setTodo(_.currentTarget.value)}/>

        {/* Add the todo */}
        <button
          onClick={() => {
          // If the todo is empty, we do not add it
          if (!todo) return;
          // Add the todo
          todoService.addTask(todo);
          // Reset the todo text
          setTodo("");
        }}>Add Todo</button>
      </div>

      {/** Reset the list */}
      <button
        onClick = {() => {todoService.reset()}}
        style   = {{marginTop: "5px", width: "100%"}}
      >Reset the list</button>

      {/** Display the list of todo tasks*/}
      {tasks.todo.map((todo) => {
          return (
            <div style={styles.lineContainer}>
              <div
                key     = {todo.id}
                style   = {styles.todotask}
              >{todo.text}</div>
              <button onClick={() => todoService.finishTask(todo.id)}>Done</button>
            </div>
          )
      })}

      {/** Display the list of done tasks*/}
      {tasks.done.map((done) => {
          return (
            <div style={styles.lineContainer}>
              <div
                  key     = {done.id}
                  style   = {styles.doneTask}
                >{done.text}</div>
                <button onClick={() => todoService.removeTask(done.id)}>Remove</button>
            </div>
          )
      })}
    </div>
  </>
}