Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Develop #1085

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Develop #1085

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e7a65a7
working solution
Krykunov Dec 4, 2024
01020fd
working solution, tests passed
Krykunov Dec 5, 2024
4a78c3a
add useEffect dependency
Krykunov Dec 5, 2024
5f3a46c
add readme link
Krykunov Dec 5, 2024
56eb9a9
fix
Krykunov Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 38 additions & 23 deletions .eslintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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: {
Expand All @@ -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,
Expand All @@ -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: '*' },
],
Expand All @@ -73,16 +80,16 @@ 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-for': [
2,
{
components: ['Label'],
required: {
some: ['id', 'nesting'],
},
allowChildren: true,
},
allowChildren: true,
}],
],
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',

Expand All @@ -91,15 +98,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',
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,4 +33,4 @@ Implement a simple [TODO app](https://mate-academy.github.io/react_todo-app/) th
- Implement a solution following the [React task guidelines](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).
- Open another terminal and run tests with `npm test` to ensure your solution is correct.
- Replace `<your_account>` with your GitHub username in the [DEMO LINK](https://<your_account>.github.io/react_todo-app/) and add it to the PR description.
- Replace `<your_account>` with your GitHub username in the [DEMO LINK](https://Krykunov.github.io/react_todo-app/) and add it to the PR description.
154 changes: 12 additions & 142 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,156 +1,26 @@
/* eslint-disable jsx-a11y/control-has-associated-label */
import React from 'react';
import React, { useContext } from 'react';
import { StateContext } from './Store';
import TodoItem from './components/TodoItem';
import Footer from './components/Footer';
import Header from './components/Header';

export const App: React.FC = () => {
const { todos, allTodos } = useContext(StateContext);

return (
<div className="todoapp">
<h1 className="todoapp__title">todos</h1>

<div className="todoapp__content">
<header className="todoapp__header">
{/* this button should have `active` class only if all todos are completed */}
<button
type="button"
className="todoapp__toggle-all active"
data-cy="ToggleAllButton"
/>

{/* Add a todo on form submit */}
<form>
<input
data-cy="NewTodoField"
type="text"
className="todoapp__new-todo"
placeholder="What needs to be done?"
/>
</form>
</header>
<Header />

<section className="todoapp__main" data-cy="TodoList">
{/* This is a completed todo */}
<div data-cy="Todo" className="todo completed">
<label className="todo__status-label">
<input
data-cy="TodoStatus"
type="checkbox"
className="todo__status"
checked
/>
</label>

<span data-cy="TodoTitle" className="todo__title">
Completed Todo
</span>

{/* Remove button appears only on hover */}
<button type="button" className="todo__remove" data-cy="TodoDelete">
×
</button>
</div>

{/* This todo is an active todo */}
<div data-cy="Todo" className="todo">
<label className="todo__status-label">
<input
data-cy="TodoStatus"
type="checkbox"
className="todo__status"
/>
</label>

<span data-cy="TodoTitle" className="todo__title">
Not Completed Todo
</span>

<button type="button" className="todo__remove" data-cy="TodoDelete">
×
</button>
</div>

{/* This todo is being edited */}
<div data-cy="Todo" className="todo">
<label className="todo__status-label">
<input
data-cy="TodoStatus"
type="checkbox"
className="todo__status"
/>
</label>

{/* This form is shown instead of the title and remove button */}
<form>
<input
data-cy="TodoTitleField"
type="text"
className="todo__title-field"
placeholder="Empty todo will be deleted"
value="Todo is being edited now"
/>
</form>
</div>

{/* This todo is in loadind state */}
<div data-cy="Todo" className="todo">
<label className="todo__status-label">
<input
data-cy="TodoStatus"
type="checkbox"
className="todo__status"
/>
</label>

<span data-cy="TodoTitle" className="todo__title">
Todo is being saved now
</span>

<button type="button" className="todo__remove" data-cy="TodoDelete">
×
</button>
</div>
{todos.map(todo => (
<TodoItem key={todo.id} todo={todo} />
))}
</section>

{/* Hide the footer if there are no todos */}
<footer className="todoapp__footer" data-cy="Footer">
<span className="todo-count" data-cy="TodosCounter">
3 items left
</span>

{/* Active link should have the 'selected' class */}
<nav className="filter" data-cy="Filter">
<a
href="#/"
className="filter__link selected"
data-cy="FilterLinkAll"
>
All
</a>

<a
href="#/active"
className="filter__link"
data-cy="FilterLinkActive"
>
Active
</a>

<a
href="#/completed"
className="filter__link"
data-cy="FilterLinkCompleted"
>
Completed
</a>
</nav>

{/* this button should be disabled if there are no completed todos */}
<button
type="button"
className="todoapp__clear-completed"
data-cy="ClearCompletedButton"
>
Clear completed
</button>
</footer>
{allTodos.length > 0 && <Footer />}
</div>
</div>
);
Expand Down
Loading
Loading