add react todo app loading todos

.eslintrc.cjs

@@ -5,7 +5,7 @@ module.exports = {
   },
   extends: [
     'plugin:react/recommended',
-    "plugin:react-hooks/recommended",
+    'plugin:react-hooks/recommended',
     'airbnb-typescript',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
@@ -14,11 +14,11 @@ module.exports = {
   ],
   overrides: [
     {
-      'files': ['**/*.spec.jsx'],
-      'rules': {
+      files: ['**/*.spec.jsx'],
+      rules: {
         'react/jsx-filename-extension': ['off'],
-      }
-    }
+      },
+    },
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -34,18 +34,21 @@ module.exports = {
     'import',
     'react-hooks',
     '@typescript-eslint',
-    'prettier'
+    'prettier',
   ],
   rules: {
     // JS
-    'semi': 'off',
+    semi: 'off',
     '@typescript-eslint/semi': ['error', 'always'],
     'prefer-const': 2,
     curly: [2, 'all'],
-    'max-len': ['error', {
-      ignoreTemplateLiterals: true,
-      ignoreComments: true,
-    }],
+    'max-len': [
+      'error',
+      {
+        ignoreTemplateLiterals: true,
+        ignoreComments: true,
+      },
+    ],
     'no-redeclare': [2, { builtinGlobals: true }],
     'no-console': 2,
     'operator-linebreak': 0,
@@ -57,7 +60,11 @@ module.exports = {
       2,
       { blankLine: 'always', prev: '*', next: 'return' },
       { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
-      { blankLine: 'any', prev: ['const', 'let', 'var'], next: ['const', 'let', 'var'] },
+      {
+        blankLine: 'any',
+        prev: ['const', 'let', 'var'],
+        next: ['const', 'let', 'var'],
+      },
       { blankLine: 'always', prev: 'directive', next: '*' },
       { blankLine: 'always', prev: 'block-like', next: '*' },
     ],
@@ -73,16 +80,22 @@ module.exports = {
     'react/jsx-props-no-spreading': 0,
     'react/state-in-constructor': [2, 'never'],
     'react-hooks/rules-of-hooks': 2,
-    'jsx-a11y/label-has-associated-control': ["error", {
-      assert: "either",
-    }],
-    'jsx-a11y/label-has-for': [2, {
-      components: ['Label'],
-      required: {
-        some: ['id', 'nesting'],
+    'jsx-a11y/label-has-associated-control': [
+      'error',
+      {
+        assert: 'either',
       },
-      allowChildren: true,
-    }],
+    ],
+    'jsx-a11y/label-has-for': [
+      2,
+      {
+        components: ['Label'],
+        required: {
+          some: ['id', 'nesting'],
+        },
+        allowChildren: true,
+      },
+    ],
     'react/jsx-uses-react': 'off',
     'react/react-in-jsx-scope': 'off',
 
@@ -91,15 +104,23 @@ module.exports = {
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-unused-vars': ['error'],
     '@typescript-eslint/indent': ['error', 2],
-    '@typescript-eslint/ban-types': ['error', {
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
         extendDefaults: true,
         types: {
           '{}': false,
         },
       },
     ],
   },
-  ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.ts', 'src/vite-env.d.ts', 'cypress'],
+  ignorePatterns: [
+    'dist',
+    '.eslintrc.cjs',
+    'vite.config.ts',
+    'src/vite-env.d.ts',
+    'cypress',
+  ],
   settings: {
     react: {
       version: 'detect',

.eslintrc.json

@@ -0,0 +1,38 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "@typescript-eslint",
+    "jsx-a11y"
+  ],
+  "rules": {
+    "padding-line-between-statements": [
+      "error",
+      { "blankLine": "always", "prev": "*", "next": "function" }
+    ],
+    "prettier/prettier": "error"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.github/workflows/lint.yml

@@ -2,11 +2,10 @@ name: Lint
 
 on:
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   run_linter:
-
     runs-on: ubuntu-latest
 
     strategy:

.github/workflows/test.yml

@@ -2,11 +2,10 @@ name: Test
 
 on:
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   run_tests:
-
     runs-on: ubuntu-latest
 
     strategy:

.stylelintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
-  extends: "@mate-academy/stylelint-config",
-  rules: {}
+  extends: '@mate-academy/stylelint-config',
+  rules: {},
 };

README.md

@@ -5,6 +5,7 @@ You goal is to implement a simple Todo App that will save all changes to [the AP
 > Here is [the working example](https://mate-academy.github.io/react_todo-app-with-api/)
 
 The task consists of 3 part:
+
 - (This repo) [Load todos](https://github.com/mate-academy/react_todo-app-loading-todos)
 - [Add and Delete](https://github.com/mate-academy/react_todo-app-add-and-delete)
 - [Toggle and Rename](https://github.com/mate-academy/react_todo-app-with-api)
@@ -23,6 +24,7 @@ In this 1st part you will:
 > Keep your logic as simple as possible!
 
 Improve user experience:
+
 - hide or disable elements that can't be used at the moment
 - focus text fields, so user could start typing without extra clicks
 - prevents users from doing the same action twice accidentally (disable controls when action is in progress)
@@ -67,7 +69,8 @@ Filter todos by status `All` / `Active` / `Completed`:
 - use the `selected` class to highlight a selected link;
 
 ## Common Instructions
+
 - Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_todo-app-loading-todos/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://ValentynaD.github.io/react_todo-app-loading-todos/) and add it to the PR description.

checklist.md

@@ -1,6 +1,7 @@
 # TodoApp Checklist
 
 ## Basic React Checklist.
+
 1. PropTypes should describe objects and arrays, which are passed in the component.
 1. Use destructuring wherever possible. It makes code more readable.
 1. Functions should do one thing. Don't make monsters!)
@@ -12,6 +13,7 @@
 1. Use key attribute correctly (read [here](https://medium.com/blackrock-engineering/5-common-mistakes-with-keys-in-react-b86e82020052) for more details)
 
 ## Task checklist.
+
 1. `App.js` code should be split into several components.
 1. Callbacks that work with the main state should take prepared data instead of the whole child's state.
 1. Code should be split into small, reusable components if it possible (`Filter`, `TodoList`, `Todo`, `NewTodo`)
@@ -22,11 +24,11 @@
 1. `NewTodo` form shouldn’t create empty todos.
 1. `NewTodo` form should trim redundant spaces.
 1. Do not rely on the unknown string, make constants for this.
-    ```
-    const FILTERS = {
-      all: ‘all’,
-      completed: ‘completed’,
-      active: ‘active’,
-    };
-    ```
+   ```
+   const FILTERS = {
+     all: ‘all’,
+     completed: ‘completed’,
+     active: ‘active’,
+   };
+   ```
 1. Show only `NewTodo` form if todos array is empty.