Solution #1277
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,156 +1,45 @@ | ||
| /* eslint-disable jsx-a11y/control-has-associated-label */ | ||
| import React from 'react'; | ||
| import { useEffect } from 'react'; | ||
| import { useReducer } from 'react'; | ||
| import { Footer } from './components/footer/Footer'; | ||
| import { TodoList } from './components/TodoList/TodoList'; | ||
| import { Header } from './header/Header'; | ||
| import { SortContext } from './store/SortContext'; | ||
| import { SortReducer } from './store/SortReducer'; | ||
| import { TodoContext } from './store/TodoContext'; | ||
| import { TodoReducer } from './store/TodoReducer'; | ||
|
|
||
| export const App: React.FC = () => { | ||
| const initTodos = () => { | ||
| const saved = localStorage.getItem('todos'); | ||
| return saved ? JSON.parse(saved) : []; | ||
| }; | ||
|
|
||
| const [todos, dispatch] = useReducer( | ||
| TodoReducer, | ||
| [], | ||
| initTodos | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| localStorage.setItem('todos', JSON.stringify(todos)); | ||
| }, [todos]); | ||
|
|
||
| const [sortBy, sortDispatch] = useReducer(SortReducer, 'all'); | ||
|
There was a problem hiding this comment. This uses a raw string Checklist violation (quote): const FILTERS = {
all: 'all',
completed: 'completed',
active: 'active',
};
```","lineStart":30,There was a problem hiding this comment. This violates checklist item #10: "Do not rely on the unknown string, make constants for this." The initial state for the filter reducer is hardcoded as |
||
|
|
||
| return ( | ||
| <div className="todoapp"> | ||
| <h1 className="todoapp__title">todos</h1> | ||
|
|
||
| <div className="todoapp__content"> | ||
| <TodoContext.Provider value={{ todos, dispatch }}> | ||
| <SortContext.Provider value={{ sortBy, sortDispatch }}> | ||
| <Header /> | ||
| <TodoList /> | ||
| {todos.length > 0 && <Footer />} | ||
| </SortContext.Provider> | ||
| </TodoContext.Provider> | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import classNames from 'classnames'; | ||
| import { useRef } from 'react'; | ||
| import { useState } from 'react'; | ||
| import { useEffect } from 'react'; | ||
| import { useContext } from 'react'; | ||
| import { TodoContext } from '../../store/TodoContext'; | ||
| import { | ||
| completeTodoAction, | ||
| deleteTodoAction, | ||
| renameTodoAction, | ||
| } from '../../store/TodoReducer'; | ||
| import { TodoType } from '../../types/TodoType'; | ||
|
|
||
| type Props = { | ||
| todo: TodoType; | ||
| }; | ||
|
|
||
| export const TodoItem = ({ todo }: Props) => { | ||
| const { dispatch } = useContext(TodoContext); | ||
| const [title, setTitle] = useState(todo.title); | ||
|
There was a problem hiding this comment. You access There was a problem hiding this comment.
|
||
| const [isEditing, setIsEditing] = useState(false); | ||
| const inputRef = useRef<HTMLInputElement>(null); | ||
|
|
||
| useEffect(() => { | ||
| setTitle(todo.title); | ||
| }, [todo.title]); | ||
|
|
||
| const cancelEditings = (event: React.KeyboardEvent<HTMLInputElement>) => { | ||
|
There was a problem hiding this comment. Handler name There was a problem hiding this comment. This function name is a bit unconventional. Per checklist item #6, function names should be clear and follow conventions. A name like |
||
| if (event.key === 'Escape') { | ||
| setTitle(todo.title); | ||
| setIsEditing(false); | ||
| } | ||
| }; | ||
|
|
||
| const editTodo = () => { | ||
| const trimmed = title.trim(); | ||
|
|
||
| if (!trimmed) { | ||
| dispatch(deleteTodoAction(todo.id)); | ||
| } else { | ||
| dispatch(renameTodoAction(todo.id, trimmed)); | ||
| } | ||
|
|
||
| setIsEditing(false); | ||
|
Comment on lines
+35
to
+44
There was a problem hiding this comment. The |
||
| }; | ||
|
|
||
| const saveTodoOnEnter = (event: React.SyntheticEvent<HTMLFormElement>) => { | ||
| event.preventDefault(); | ||
| editTodo(); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (isEditing && inputRef.current) { | ||
| inputRef.current.focus(); | ||
| inputRef.current.select(); | ||
| } | ||
| }, [isEditing]); | ||
|
|
||
| return ( | ||
| <div | ||
| data-cy="Todo" | ||
| className={classNames('todo', { completed: todo.completed })} | ||
| key={todo.id} | ||
|
There was a problem hiding this comment. This |
||
| > | ||
| {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} | ||
| <label className="todo__status-label" htmlFor={`todo-status-${todo.id}`}> | ||
| <input | ||
| id={`todo-status-${todo.id}`} | ||
| data-cy="TodoStatus" | ||
| type="checkbox" | ||
| className="todo__status" | ||
| checked={todo.completed ? true : false} | ||
| onChange={() => dispatch(completeTodoAction(todo.id))} | ||
| /> | ||
| </label> | ||
|
|
||
| {isEditing === false ? ( | ||
| <> | ||
| <span | ||
| data-cy="TodoTitle" | ||
| className="todo__title" | ||
| onDoubleClick={() => setIsEditing(true)} | ||
| > | ||
| {todo.title} | ||
| </span> | ||
| <button | ||
| type="button" | ||
| className="todo__remove" | ||
| data-cy="TodoDelete" | ||
| onClick={() => dispatch(deleteTodoAction(todo.id))} | ||
| > | ||
| × | ||
| </button> | ||
| </> | ||
| ) : ( | ||
| <form onSubmit={saveTodoOnEnter}> | ||
| <input | ||
| ref={inputRef} | ||
| data-cy="TodoTitleField" | ||
| type="text" | ||
| className="todo__title-field" | ||
| placeholder="Empty todo will be deleted" | ||
| value={title} | ||
| onChange={event => setTitle(event.target.value)} | ||
| onKeyUp={event => cancelEditings(event)} | ||
| onBlur={() => editTodo()} | ||
| /> | ||
| </form> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { useContext } from 'react'; | ||
| import { SortContext } from '../../store/SortContext'; | ||
| import { TodoContext } from '../../store/TodoContext'; | ||
| import { TodoItem } from '../TodoItem.tsx/TodoItem'; | ||
|
There was a problem hiding this comment. Invalid import path will cause module resolution/build errors. The import reads |
||
|
|
||
| export const TodoList = () => { | ||
| const { todos } = useContext(TodoContext); | ||
| const { sortBy } = useContext(SortContext); | ||
|
|
||
| const filteredTodos = todos.filter(todo => { | ||
| if (sortBy === 'active') { | ||
| return !todo.completed; | ||
| } | ||
|
|
||
| if (sortBy === 'completed') { | ||
| return todo.completed; | ||
|
Comment on lines
+11
to
+16
There was a problem hiding this comment. This uses raw string literals (
Comment on lines
+11
to
+16
There was a problem hiding this comment. This file compares |
||
| } | ||
|
Comment on lines
+11
to
+17
There was a problem hiding this comment. This violates checklist item #10: 'Do not rely on the unknown string, make constants for this.' Instead of hardcoding the strings |
||
|
|
||
| return true; | ||
| }); | ||
|
|
||
| return ( | ||
| <section className="todoapp__main" data-cy="TodoList"> | ||
| {filteredTodos.map(todo => { | ||
| return <TodoItem todo={todo} key={todo.id} />; | ||
| })} | ||
| </section> | ||
| ); | ||
| }; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This file uses a raw string literal for the initial filter state:
useReducer(SortReducer, 'all'). This violates checklist item #10: "Do not rely on an unknown string; make constants for this (e.g.,FILTERS = { all: 'all', completed: 'completed', active: 'active' })." Use a shared FILTERS constant (e.g.FILTERS.all) here so the code is explicit and consistent with the rest of the app.