= ({
15 | todo: { id, completed, description },
16 | onComplete,
17 | onRemove,
18 | }) => (
19 |
30 |
38 | {completed && (
39 | {en.todoCompleted}
40 | )}
41 | {description}
42 |
43 |
51 | onRemove(id)} />
52 | {!completed && onComplete(id)} />}
53 |
54 |
55 | );
56 |
--------------------------------------------------------------------------------
/src/components/TodoItem/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./TodoItem";
2 |
--------------------------------------------------------------------------------
/src/components/TodoList/NoTodos.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Meta, Story } from "@storybook/react";
3 | import { NoTodos } from "./NoTodos";
4 |
5 | const meta: Meta = {
6 | title: "NoTodos",
7 | component: NoTodos,
8 | };
9 |
10 | export default meta;
11 |
12 | const Template: Story = (args) => ;
13 |
14 | export const Default = Template.bind({});
15 |
--------------------------------------------------------------------------------
/src/components/TodoList/NoTodos.tsx:
--------------------------------------------------------------------------------
1 | import { en } from "../../locale";
2 | import React from "react";
3 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4 | import { faSmileBeam } from "@fortawesome/free-solid-svg-icons";
5 |
6 | export function NoTodos() {
7 | return (
8 |
15 |
16 |
{en.noTodos}
17 |
22 | {todos.map((todo) => (
23 | onDeleteTodo(todo.id)}
27 | onComplete={() => onCompleteTodo(todo.id)}
28 | />
29 | ))}
30 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/src/components/TodoList/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./TodoList";
2 |
--------------------------------------------------------------------------------
/src/components/shared/Button.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Meta, Story } from "@storybook/react";
3 | import { action } from "@storybook/addon-actions";
4 | import { Button, ButtonColor, Props } from "./Button";
5 |
6 | const meta: Meta = {
7 | title: "Button",
8 | component: Button,
9 | };
10 |
11 | export default meta;
12 |
13 | const Template: Story = (args) => ;
14 |
15 | const actionArgs = {
16 | onClick: action("onClick"),
17 | };
18 |
19 | export const Default = Template.bind({});
20 |
21 | Default.args = {
22 | ...actionArgs,
23 | children: "Click me!",
24 | color: ButtonColor.Success,
25 | };
26 |
--------------------------------------------------------------------------------
/src/components/shared/Button.tsx:
--------------------------------------------------------------------------------
1 | import React, { FunctionComponent, ReactNode } from "react";
2 |
3 | export enum ButtonColor {
4 | Alert = "Alert",
5 | Success = "Success",
6 | }
7 |
8 | export enum ButtonType {
9 | Submit = "submit",
10 | Reset = "reset",
11 | Button = "button",
12 | }
13 |
14 | export interface Props {
15 | children: ReactNode;
16 | color: ButtonColor;
17 | onClick?: () => void;
18 | type?: ButtonType;
19 | }
20 |
21 | export const Button: FunctionComponent = ({
22 | children,
23 | color,
24 | onClick,
25 | type,
26 | }) => {
27 | const colorStyles = {
28 | [ButtonColor.Alert]: {
29 | border: "#b33 solid 1px",
30 | borderRadius: "4px",
31 | boxShadow: "2px 2px 2px rgba(100,0,0,0.8)",
32 | color: "white",
33 | backgroundColor: "#a00",
34 | },
35 | [ButtonColor.Success]: {
36 | border: "#3b3 solid 1px",
37 | borderRadius: "4px",
38 | boxShadow: "2px 2px 2px rgba(0,100,0,0.8)",
39 | color: "white",
40 | backgroundColor: "#0a0",
41 | },
42 | };
43 | return (
44 |
54 | );
55 | };
56 |
--------------------------------------------------------------------------------
/src/components/shared/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Button";
2 | export * from "./screenReaderOnlyStyle";
3 |
--------------------------------------------------------------------------------
/src/components/shared/screenReaderOnlyStyle.ts:
--------------------------------------------------------------------------------
1 | // Based on https://webaim.org/techniques/css/invisiblecontent/
2 | export const screenReaderOnlyStyle = {
3 | position: "absolute",
4 | left: "-10000px",
5 | top: "auto",
6 | width: "1px",
7 | height: "1px",
8 | overflow: "hidden",
9 | } as const;
10 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App/App";
4 |
5 | ReactDOM.render(
6 |
7 |
8 | ,
9 | document.getElementById("root")
10 | );
11 |
--------------------------------------------------------------------------------
/src/locale/index.ts:
--------------------------------------------------------------------------------
1 | export const en = {
2 | markTodoAsCompleted: "Mark as completed",
3 | removeTodo: "Remove",
4 | noTodos: "No todos left",
5 | newTodo: "New todo",
6 | addTodo: "Add todo",
7 | todoCompleted: "Todo completed:",
8 | };
9 |
--------------------------------------------------------------------------------
/src/model/Todo.test.ts:
--------------------------------------------------------------------------------
1 | import { Todo } from "./Todo";
2 |
3 | describe("Todo", () => {
4 | it("has an id", () => {
5 | expect(new Todo("A description").id).toBeDefined();
6 | });
7 |
8 | it("is not complete by default", () => {
9 | expect(new Todo("A description").completed).toBe(false);
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/model/Todo.ts:
--------------------------------------------------------------------------------
1 | import { v4 as uuid } from "uuid";
2 |
3 | export class Todo {
4 | id = uuid();
5 | completed = false;
6 |
7 | constructor(public description: string) {}
8 | }
9 |
--------------------------------------------------------------------------------
/src/model/TodoMock.ts:
--------------------------------------------------------------------------------
1 | import { Todo } from "./Todo";
2 | import { v4 as uuid } from "uuid";
3 |
4 | export class TodoMock implements Todo {
5 | completed = false;
6 | description = "This is a todo";
7 | id = uuid();
8 |
9 | constructor(overrides: Partial = {}) {
10 | Object.assign(this, overrides);
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/model/actions.test.ts:
--------------------------------------------------------------------------------
1 | import {
2 | createAddTodoAction,
3 | createCompleteTodoAction,
4 | createDeleteTodoAction,
5 | } from "./actions";
6 | import { Todo } from "./Todo";
7 |
8 | describe("actions", () => {
9 | describe("createAddTodoAction", () => {
10 | it("creates an action with a todo as payload", () => {
11 | expect(createAddTodoAction("A description").payload).toBeInstanceOf(Todo);
12 | });
13 | });
14 |
15 | describe("createCompleteTodoAction", () => {
16 | it("creates an action with the given id in the payload", () => {
17 | const id = "id";
18 | expect(createCompleteTodoAction(id).payload.id).toEqual(id);
19 | });
20 | });
21 |
22 | describe("createDeleteTodoAction", () => {
23 | it("creates an action with the given id in the payload", () => {
24 | const id = "id";
25 | expect(createDeleteTodoAction(id).payload.id).toEqual(id);
26 | });
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/src/model/actions.ts:
--------------------------------------------------------------------------------
1 | import { Todo } from "./Todo";
2 |
3 | export enum TodoActionType {
4 | AddTodo = "AddTodo",
5 | CompleteTodo = "CompleteTodo",
6 | DeleteTodo = "DeleteTodo",
7 | }
8 |
9 | export function createAddTodoAction(description: string) {
10 | const newTodo = new Todo(description);
11 | return {
12 | type: TodoActionType.AddTodo as const,
13 | payload: newTodo,
14 | };
15 | }
16 |
17 | type AddTodoAction = ReturnType;
18 |
19 | export function createCompleteTodoAction(id: Todo["id"]) {
20 | return {
21 | type: TodoActionType.CompleteTodo as const,
22 | payload: {
23 | id,
24 | },
25 | };
26 | }
27 |
28 | type CompleteTodoAction = ReturnType;
29 |
30 | export function createDeleteTodoAction(id: Todo["id"]) {
31 | return {
32 | type: TodoActionType.DeleteTodo as const,
33 | payload: {
34 | id,
35 | },
36 | };
37 | }
38 |
39 | type DeleteTodoAction = ReturnType;
40 | export type TodoAction = AddTodoAction | CompleteTodoAction | DeleteTodoAction;
41 |
--------------------------------------------------------------------------------
/src/model/reducer.test.ts:
--------------------------------------------------------------------------------
1 | import { todosReducer } from "./reducer";
2 | import { TodoMock } from "./TodoMock";
3 | import {
4 | createAddTodoAction,
5 | createCompleteTodoAction,
6 | createDeleteTodoAction,
7 | } from "./actions";
8 |
9 | describe("todo reducer", () => {
10 | describe("addTodoAction", () => {
11 | it("adds a new todo to the list", () => {
12 | const description = "This is a todo";
13 | expect(todosReducer([], createAddTodoAction(description))).toContainEqual(
14 | expect.objectContaining({ description })
15 | );
16 | });
17 |
18 | it("does not remove an existing todo", () => {
19 | const existingTodo = new TodoMock();
20 | expect(
21 | todosReducer([existingTodo], createAddTodoAction("This is a todo"))
22 | ).toContainEqual(existingTodo);
23 | });
24 | });
25 |
26 | describe("completeTodoAction", () => {
27 | it("marks a todo as completed", () => {
28 | const incompleteTodo = new TodoMock({ completed: false });
29 | expect(
30 | todosReducer(
31 | [incompleteTodo],
32 | createCompleteTodoAction(incompleteTodo.id)
33 | )
34 | ).toContainEqual(
35 | expect.objectContaining({ id: incompleteTodo.id, completed: true })
36 | );
37 | });
38 | });
39 |
40 | describe("deleteTodoAction", () => {
41 | it("removes the given todo", () => {
42 | const existingTodo = new TodoMock();
43 | expect(
44 | todosReducer([existingTodo], createDeleteTodoAction(existingTodo.id))
45 | ).toEqual([]);
46 | });
47 |
48 | it("does not remove a todo with a different id", () => {
49 | const existingTodo = new TodoMock({ id: "existingId" });
50 | expect(
51 | todosReducer([existingTodo], createDeleteTodoAction("differentId"))
52 | ).toEqual([existingTodo]);
53 | });
54 | });
55 | });
56 |
--------------------------------------------------------------------------------
/src/model/reducer.ts:
--------------------------------------------------------------------------------
1 | import { Todo } from "./Todo";
2 | import { TodoAction, TodoActionType } from "./actions";
3 |
4 | export function todosReducer(todos: Todo[], action: TodoAction) {
5 | switch (action.type) {
6 | case TodoActionType.AddTodo:
7 | return [...todos, action.payload];
8 | case TodoActionType.CompleteTodo:
9 | return todos.map((todo) =>
10 | todo.id === action.payload.id ? { ...todo, completed: true } : todo
11 | );
12 | case TodoActionType.DeleteTodo:
13 | return todos.filter((todo) => todo.id !== action.payload.id);
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------