diff --git a/.all-contributorsrc b/.all-contributorsrc
deleted file mode 100644
index f4cbc4c3..00000000
--- a/.all-contributorsrc
+++ /dev/null
@@ -1,28 +0,0 @@
-{
- "files": [
- "README.md"
- ],
- "imageSize": 100,
- "commit": false,
- "contributors": [
- {
- "login": "danilucaci",
- "name": "Dani Lucaci",
- "avatar_url": "https://avatars.githubusercontent.com/u/19062818?v=4",
- "profile": "http://www.danilucaci.com",
- "contributions": [
- "doc",
- "infra",
- "test",
- "mentoring",
- "code"
- ]
- }
- ],
- "contributorsPerLine": 7,
- "projectName": "react-js-intro",
- "projectOwner": "assembler-school",
- "repoType": "github",
- "repoHost": "https://github.com",
- "skipCi": true
-}
diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 31698efb..00000000
--- a/.babelrc
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "presets": [
- [
- "@babel/preset-env",
- {
- "targets": "defaults"
- }
- ],
- "@babel/preset-react"
- ]
-}
diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index d8b83df9..00000000
--- a/.eslintignore
+++ /dev/null
@@ -1 +0,0 @@
-package-lock.json
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index 91f0a228..00000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,84 +0,0 @@
-module.exports = {
- env: {
- browser: true,
- es2021: true,
- jest: true,
- "jest/globals": true,
- },
- extends: [
- "airbnb",
- "eslint:recommended",
- "plugin:react/recommended",
- "plugin:import/errors",
- "plugin:import/warnings",
- "plugin:jsx-a11y/recommended",
- "prettier",
- "plugin:cypress/recommended",
- ],
- parser: "@babel/eslint-parser",
- parserOptions: {
- ecmaVersion: 12,
- sourceType: "module",
- requireConfigFile: "false",
- jsx: true,
- },
- plugins: [
- "html",
- "react",
- "react-hooks",
- "jsx-a11y",
- "markdown",
- "react-hooks",
- "import",
- "prettier",
- ],
- settings: {
- react: {
- version: "detect",
- },
- jest: {
- version: 26,
- },
- },
- overrides: [
- {
- files: ["*.html"],
- parser: "@html-eslint/parser",
- extends: ["plugin:@html-eslint/recommended"],
- },
- {
- files: ["src/**/*.test.js"],
- plugins: ["jest"],
- rules: {
- "jest/expect-expect": "error",
- },
- extends: ["plugin:jest/recommended"],
- },
- ],
- rules: {
- "prettier/prettier": [
- "error",
- {
- endOfLine: "auto",
- },
- ],
- "react/jsx-filename-extension": "off",
- "import/prefer-default-export": "off",
- "prefer-destructuring": "off",
- "object-shorthand": "off",
- "react/jsx-props-no-spreading": "off",
- "arrow-body-style": "off",
- "no-underscore-dangle": "off",
- "react/forbid-prop-types": "off",
- "react/prop-types": "off",
- "no-unused-expressions": "off",
- "jsx-a11y/label-has-for": [
- "error",
- {
- required: {
- some: ["nesting", "id"],
- },
- },
- ],
- },
-};
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
deleted file mode 100644
index 1ce511e3..00000000
--- a/.github/CONTRIBUTING.md
+++ /dev/null
@@ -1,98 +0,0 @@
-# Contributing
-
-When contributing to this repository, please first discuss the change you wish
-to make via issue, email, or any other method with the owners of this repository
-before making a change.
-
-Please note we have a code of conduct, please follow it in all your interactions
-with the project.
-
-## Pull Request Process
-
-1. Ensure any install or build dependencies are removed before the end of the
- layer when doing a build.
-2. Update the README.md with details of changes to the interface, this includes
- new environment variables, exposed ports, useful file locations and container
- parameters.
-3. Increase the version numbers in any examples files and the README.md to the
- new version that this Pull Request would represent. The versioning scheme we
- use is [SemVer](http://semver.org/).
-4. You may merge the Pull Request in once you have the sign-off of two other
- developers, or if you do not have permission to do that, you may request the
- second reviewer to merge it for you.
-
-## Code of Conduct
-
-### Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, gender identity and expression, level of
-experience, nationality, personal appearance, race, religion, or sexual identity
-and orientation.
-
-### Our Standards
-
-Examples of behavior that contributes to creating a positive environment
-include:
-
-- Using welcoming and inclusive language
-- Being respectful of differing viewpoints and experiences
-- Gracefully accepting constructive criticism
-- Focusing on what is best for the community
-- Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-- The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-- Trolling, insulting/derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-- Other conduct which could reasonably be considered inappropriate in a
- professional setting
-
-### Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or reject
-comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, or to ban temporarily or permanently any
-contributor for other behaviors that they deem inappropriate, threatening,
-offensive, or harmful.
-
-### Scope
-
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
-
-### Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at [INSERT EMAIL ADDRESS]. All
-complaints will be reviewed and investigated and will result in a response that
-is deemed necessary and appropriate to the circumstances. The project team is
-obligated to maintain confidentiality with regard to the reporter of an
-incident. Further details of specific enforcement policies may be posted
-separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
-
-### Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
-
-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/
diff --git a/.github/ISSUE_TEMPLATE/FEATURE.md b/.github/ISSUE_TEMPLATE/FEATURE.md
deleted file mode 100644
index 93f32a4d..00000000
--- a/.github/ISSUE_TEMPLATE/FEATURE.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-name: Feature Request
-about: Use this template for requesting new features
-title: "[FEATURE NAME]"
-labels: enhancement
-assignees:
----
-
-## Expected Behavior
-
-Please describe the behavior you are expecting
-
-## Current Behavior
-
-What is the current behavior?
-
-## Sample Code
-
-If applicable, provide a sample code snippet that demonstrates the gist of
-feature you're proposing. This can be either from a usage standpoint, or an
-implementation standpoint.
-
-## Context
-
-Please provide any relevant information about your setup, which will help us
-ensure the requested support will work for you.
-
-- Project Version:
-- Operating System:
-- Toolchain version:
diff --git a/.github/ISSUE_TEMPLATE/ISSUE.md b/.github/ISSUE_TEMPLATE/ISSUE.md
deleted file mode 100644
index 2aeb4688..00000000
--- a/.github/ISSUE_TEMPLATE/ISSUE.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-name: Issue Report
-about: Use this template to report a problem
-title: "[VERSION] [PROBLEM SUMMARY]"
-labels: bug
-assignees:
----
-
-## Expected Behavior
-
-Please describe the behavior you are expecting
-
-## Current Behavior
-
-What is the current behavior?
-
-## Context
-
-Please provide any relevant information about your setup. This is important in
-case the issue is not reproducible except for under certain conditions.
-
-- Project Version:
-- Operating System:
-- Toolchain:
-- Toolchain version:
-
-## Failure Information (for bugs)
-
-Please help provide information about the failure if this is a bug. If it is not
-a bug, please remove the rest of this template.
-
-### Steps to Reproduce
-
-Please provide detailed steps for reproducing the issue.
-
-1. step 1
-2. step 2
-3. you get it...
-
-### Failure Logs
-
-Please include any relevant log snippets or files here.
-
-## Checklist
-
-- [ ] I am running the latest version
-- [ ] I checked the documentation and found no answer
-- [ ] I checked to make sure that this issue has not already been filed
-- [ ] I'm reporting the issue to the correct repository (for multi-repository
- projects)
-- [ ] I have provided sufficient information for the team
diff --git a/.github/ISSUE_TEMPLATE/QUESTION.md b/.github/ISSUE_TEMPLATE/QUESTION.md
deleted file mode 100644
index 2530b0ff..00000000
--- a/.github/ISSUE_TEMPLATE/QUESTION.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-name: Question
-about: Use this template to ask a question about the project
-title: "[QUESTION SUMMARY]"
-labels:
-assignees:
----
-
-## Question
-
-State your question
-
-## Sample Code
-
-Please include relevant code snippets or files that provide context for your
-question.
diff --git a/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md b/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md
deleted file mode 100644
index 7b2e2f8f..00000000
--- a/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# Pull Request Template
-
-## Description
-
-Please include a summary of the change and which issue is fixed. Please also
-include relevant motivation and context. List any dependencies that are required
-for this change.
-
-Fixes # (issue)
-
-## Type of change
-
-Please delete options that are not relevant.
-
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to
- not work as expected)
-- [ ] This change requires a documentation update
-
-## How Has This Been Tested?
-
-Please describe the tests that you ran to verify your changes. Provide
-instructions so we can reproduce. Please also list any relevant details for your
-test configuration
-
-- [ ] Test A
-- [ ] Test B
-
-**Test Configuration(s)**:
-
-- Firmware version:
-- Hardware:
-- Toolchain:
-- SDK:
-
-## Checklist:
-
-- [ ] My code follows the style guidelines of this project
-- [ ] I have performed a self-review of my own code
-- [ ] I have commented my code, particularly in hard-to-understand areas
-- [ ] I have made corresponding changes to the documentation
-- [ ] My changes generate no new warnings
-- [ ] I have added tests that prove my fix is effective or that my feature works
-- [ ] New and existing unit tests pass locally with my changes
-- [ ] Any dependent changes have been merged and published in downstream modules
-- [ ] I have checked my code and corrected any misspellings
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
deleted file mode 100644
index 3374aa27..00000000
--- a/.github/workflows/ci.yml
+++ /dev/null
@@ -1,48 +0,0 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: react-app-ci
-
-on:
- push:
- branches: [main]
- pull_request:
- branches: [main]
-
-jobs:
- lint-test:
- runs-on: ubuntu-latest
-
- strategy:
- matrix:
- node-version: [14.x]
-
- steps:
- - uses: actions/checkout@v2
- - name: Use Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v1
- with:
- node-version: ${{ matrix.node-version }}
- - run: npm ci
- - run: npm run lint:js
- - run: npm run lint:format:check
- - run: npm run test:ci:unit
-
- test-cy:
- runs-on: ubuntu-latest
-
- strategy:
- matrix:
- node-version: [14.x]
-
- steps:
- - uses: actions/checkout@v2
- - name: Use Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v1
- with:
- node-version: ${{ matrix.node-version }}
- - name: Cypress run
- uses: cypress-io/github-action@v2
- with:
- build: npm run build
- start: npm start
diff --git a/.gitignore b/.gitignore
index d3059a71..4d29575d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,126 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-# Created by https://www.toptal.com/developers/gitignore/api/react,node
-# Edit at https://www.toptal.com/developers/gitignore?templates=react,node
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
-### Node ###
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
+# testing
+/coverage
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
+# production
+/build
-# Optional REPL history
-.node_repl_history
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-.env*.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-### react ###
-.DS_*
-**/*.backup.*
-**/*.back.*
-
-node_modules
-cypress/videos
-cypress/screenshots
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 8c4b2fa1..00000000
--- a/.prettierrc
+++ /dev/null
@@ -1,19 +0,0 @@
-{
- "arrowParens": "always",
- "bracketSpacing": true,
- "embeddedLanguageFormatting": "auto",
- "htmlWhitespaceSensitivity": "css",
- "insertPragma": false,
- "jsxBracketSameLine": false,
- "jsxSingleQuote": false,
- "printWidth": 80,
- "proseWrap": "always",
- "quoteProps": "as-needed",
- "requirePragma": false,
- "semi": true,
- "singleQuote": false,
- "tabWidth": 2,
- "trailingComma": "all",
- "useTabs": false,
- "endOfLine": "lf"
-}
diff --git a/LICENSE b/LICENSE
deleted file mode 100644
index 5c3e397e..00000000
--- a/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 Assembler School Of Software Engineering
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
index 486bc788..58beeacc 100644
--- a/README.md
+++ b/README.md
@@ -1,379 +1,70 @@
-`#react.js` `#master-in-software-engineering`
+# Getting Started with Create React App
-
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-[](#contributors-)
+## Available Scripts
-
+In the project directory, you can run:
-# Assembler School: React.js Todo List
+### `npm start`
-In this project you will learn how to create a React.js todo list.
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-## Table of Contents
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
-- [Getting Started](#getting-started)
-- [The Project](#the-project)
-- [Project requirements](#project-requirements)
-- [Project delivery](#project-delivery)
-- [Resources](#resources)
+### `npm test`
-## Getting Started
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-These instructions will get you a copy of the project up and running on your
-local machine for development and testing purposes.
+### `npm run build`
-See deployment for notes on how to deploy the project on a live system.
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
-### The repository
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
-First, you will need to `clone` or `fork` the repository into your Github
-account:
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
+### `npm run eject`
-```
-$ git clone https://github.com/assembler-school/reactjs-todo-list.git
-```
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-## Contents and Branches Naming Strategy
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-The repository is made up of several branches that include the contents of each
-section.
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-The branches follow a naming strategy like the following:
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-- `main`: includes the main contents and the instructions
-- `assembler-solution`: includes the solution
+## Learn More
-### Fetching All the Branches
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-In order to fetch all the remote branches in the repository, you can use the
-following command:
+To learn React, check out the [React documentation](https://reactjs.org/).
-```sh
-$ git fetch --all
-```
+### Code Splitting
-### List Both Remote Tracking Branches and Local Branches
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-```sh
-$ git branch --all
-```
+### Analyzing the Bundle Size
-Then, you can create a local branch based on a remote branch with the following
-command:
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-```sh
-$ git checkout -b
-```
+### Making a Progressive Web App
-### Installing
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-First, you will need to install the dependencies with: `npm install`.
+### Advanced Configuration
-Run the following command in your terminal after cloning the main repo:
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-```sh
-$ npm install
-```
+### Deployment
-### Running the Tests
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-The tests that validate your solution can be executed by runing the following
-commands:
+### `npm run build` fails to minify
-#### 1. Run the development server
-
-```
-$ npm run start
-```
-
-#### 2. Run the Cypress tests with the graphical test runner
-
-```
-$ npm run cy:open
-```
-
-#### 3. Or you can run the Cypress tests from the terminal
-
-```
-$ npm run cy:run
-```
-
-Both need the Create React App development server to be running.
-
-### Git `precommit` and `prepush` Hooks
-
-In the `assembler-solution` branch you can see an implementation of these tools
-if you'd like to use them.
-
-## Deployment
-
-In this pill we won't deploy the app.
-
-## Technologies used
-
-- `React.js`
-- `@testing-library/react`
-- `eslint`
-- `prettier`
-- `lint-staged`
-- `husky`
-
-## The Project
-
-In this project you will build a todo app similar to the following screenshot.
-
-
-
-## Project requirements
-
-This is an overview of the main requirements of this project.
-
-- You must follow all the instructions of the project step-by-step
-- You should always try to solve them by yourself before asking for help
-- You should always help your team members and fellow students of the master so
- that you can all learn together and become better software developers and team
- members
-- You must finish all the steps that are marked as `Required`
-- **You must use semantic HTML5 elements for all the markup of the application**
-- Once you are done, you can move on to the optional ones that are marked as
- `Extra 💯`
-
-### 1. Styles and Layout
-
-For this step you have to think of a layout for the app.
-
-1. You **must** use `SCSS` for all the styles of the app and the
- [classnames](https://github.com/JedWatson/classnames#readme) npm package to
- handle any conditionally set classes
-2. The overall layout must be a pixel perfect copy of the design we provide
-3. The layout must be responsive so that it works in all device sizes
-
-### 2. Show All the Todos
-
-In this step you must implement the logic to render all the todos of the app.
-This means that all the todos are rendered without taking into account if they
-are completed or not.
-
-1. **The todos must be created in the `App` component and passed as props to the
- page components**
-2. **All the methods that modify the `` state must also be passed as
- props**
-3. If there are no todos created you must render a message telling the user that
- they can create their first todo to get started
-4. You can also render an illustration that indicates users that they can create
- a todo to get started
- 1. Feel free to create your own or use one from the internet, this is a great
- resource: [undraw.co](https://undraw.co/illustrations)
- 2. For this step, you will need to add a `data-testid="no-todos"` property on
- the html component that is rendered as the illustration or the
- illustration wrapper.
-
-### 3. Creating Todos
-
-#### Step 1
-
-Users must be able to create a new todo using the form in the app header
-
-1. To test the todo creation requirement you will need to add a
- `data-testid="create-todo-input"` property on the input element
-2. If the user presses enter without entering a value in the todo form, an
- error message should be rendered. The message needs to have a
- `data-testid="create-todo-error-message"` property with the following error
- message: `"Please enter at least one character"`
-3. Users must be able to press the `enter` key on their keyboard to create the
- todo (if you implement it using semantic html5 this comes for free)
-
-#### Step 2
-
-Once the todo is created it must be rendered in the list bellow the form.
-
-1. By default the list should be empty.
-2. The list must be implemented using `ul` and `li` elements.
-3. To test the todo creation requirement you will need to:
- 1. add a `data-testid="todos-list"` property on the `ul` list element.
- 2. add a `data-testid="todo-item"` property on the `li` list element.
- 3. the `li` list element should have a text content of the todo that was
- created and the `checkbox` value set to `checked` or not depending on if
- the todo was marked as completed.
-
-#### Step 3
-
-Render the total number of todos in the app footer.
-
-The footer should have a property of: `data-testid="app-footer"` and be
-implemented using an html5 `footer` element.
-
-1. To test this requirement you will need to render the total number of todos
- that the app has, that is both completed and incomplete todos.
-2. The text rendered should be:
- 1. `0 todos left`: if there are no todos
- 2. `1 todos left`: if there is only 1 todo
- 3. `12 todos left`: if there are 12 todos in the app
- 4. etc
-
-### 4. Editing Todos
-
-Users must be able to edit the todos once they are created.
-
-1. Clicking the todo name should open a form that allows users to edit the todo
- name.
- 1. This can be implemented either in line or by filling out the new todo form
- with the details of the todo that was clicked
- 2. The todo item should have a property of `data-testid="todo-item-input"`
- 3. We recommend that you implement a solution that allows users to edit the
- todo in line. This means that clicking the todo name replaces the todo
- with a form that has a value of the todo's name
- 4. Then, by clicking on the done button or by pressing enter, the todo is
- edited and saved
-2. Users should be able to delete todos by clicking the `X` button that is
- rendered when users hover over the todo name
- 1. the `X` button should have a property of
- `data-testid="todo-item-delete-button"`
-3. Users must be able to mark a todo as completed when they press the `Done`
- button that is rendered when the user hovers over the todo name
- 1. the `X` button should have a property of
- `data-testid="todo-item-checkbox"`
-
-### 5. Filtering Todos
-
-In this step you will create a page for each todo type.
-
-In order to allow users to navigate to a page you will need to complete the
-footer of the app that you can see in the screenshot above.
-
-You will have to render the following in the footer:
-
-1. The total count of all the `active` todos
-2. A link to the home page that renders `all` the todos, **both active and
- completed**
-3. A link to the active todos page that renders the `active` todos
-4. A link to the completed todos page that renders the `completed` todos
-
-#### 5.1 All Todos
-
-- Route: `/`
-- Page Component: `Home`
-
-In this page you will render all the todos, both completed or not.
-
-#### 5.2 Completed Todos
-
-- Route: `/completed`
-- Page Component: `Completed`
-
-In this page you will render all the **completed** todos.
-
-You will need to think of a way to store or filter the todos that are completed.
-
-A possible solution is to use `[].filter` or to store the todos in a different
-`this.state` property.
-
-Feel free to think of a solution for this requirement.
-
-#### 5.3 Active Todos
-
-- Route: `/active`
-- Page Component: `Active`
-
-In this page you will render all the **active** todos, that is, all the todos
-that are not completed.
-
-You will need to think of a way to store or filter the todos that are active.
-
-A possible solution is to use `[].filter` or to store the todos in a different
-`this.state` property.
-
-Feel free to think of a solution for this requirement.
-
-### 💯 Extras
-
-#### 1. Store the todos in `localStorage`
-
-All the todos are stored in `localStorage` so that users can refresh the app and
-their previous todos are not lost.
-
-You must store the todos in a single local storage entry named:
-`"reactjs-todo-list"`.
-
-The todos should be stored using the following shape (you can add other
-properties but these are required):
-
-- `id`: the id of the todo
-- `text`: the text content of the todo
-- `done`: boolean that indicates wether the todo is completed or not
-- `isEditing`: boolean that indicates wether the todo is currently being edited
-
-```js
-[
- {
- id: "9c34e805-7bfc-401a-b386-468c25315e46",
- text: "todo 01",
- done: false,
- isEditing: false,
- },
- {
- id: "d733a37e-cc4e-4cde-916f-935b3e915bb3",
- text: "todo 02",
- done: false,
- isEditing: false,
- },
-];
-```
-
-#### 2. Clear all the Completed Todos
-
-Users must be able to clear all the todos that are completed. You can implement
-a button in the app footer that allows users to clear the completed todos.
-
-The clear completed todos button should have a property of
-`data-testid="clear-completed-todos"`.
-
-#### 3: Light & Dark Mode Switch
-
-You can implement a light & dark mode switch that can be toggled using the moon
-icon in the app header.
-
-The light & dark mode switch button should have a property of
-`data-testid="toggle-theme"`.
-
-## Project delivery
-
-To deliver this project you must follow the steps indicated in the document:
-
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
-
-## Resources
-
-- [react-testing-library](https://testing-library.com/docs/react-testing-library/intro/)
-- [reactjs.org](https://reactjs.org/)
-
-## License
-
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
-for details
-
-## Contributors ✨
-
-Thanks goes to these wonderful people
-([emoji key](https://allcontributors.org/docs/en/emoji-key)):
-
-
-
-
-