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.

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

done #2712

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

done #2712

Show file tree
Hide file tree
Changes from all commits
Commits
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
49 changes: 43 additions & 6 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,71 @@
/* eslint-disable max-len */
import React from 'react';
import React, { useEffect, useState } from 'react';
import 'bulma/css/bulma.css';
import '@fortawesome/fontawesome-free/css/all.css';

import { TodoList } from './components/TodoList';
import { TodoFilter } from './components/TodoFilter';
import { TodoModal } from './components/TodoModal';
import { Loader } from './components/Loader';
import { getTodos } from './api';
import { Todo } from './types/Todo';
import { filterTodos } from './utils/filterTodos';
import { FilterByState } from './types/FilterByState';

export const App: React.FC = () => {
const [todoList, setTodoList] = useState<Todo[]>([]);
const [isLoading, setLoading] = useState(false);
const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null);
const [filterBy, setFilterBy] = useState<FilterByState>(FilterByState.ALL);
const [query, setQuery] = useState('');
const [hasErrorMessage, setErrorMessage] = useState('');

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The state variable hasErrorMessage is misleadingly named. Since it holds a string message rather than a boolean, consider renaming it to errorMessage to better reflect its purpose.


useEffect(() => {
setLoading(true);
getTodos()
.then(setTodoList)
.catch(error => setErrorMessage(error.message))
.finally(() => setLoading(false));
}, []);

const filteredTodos = filterTodos(todoList, filterBy, query);

return (
<>
<div className="section">
<div className="container">
<div className="box">
<h1 className="title">Todos:</h1>
{hasErrorMessage && <h1 className="title">{hasErrorMessage}</h1>}

<div className="block">
<TodoFilter />
<TodoFilter
query={query}
setQuery={setQuery}
setFilterBy={setFilterBy}
/>
</div>

<div className="block">
<Loader />
<TodoList />
{isLoading && <Loader />}

{!isLoading && !hasErrorMessage && (
<TodoList
todoList={filteredTodos}
setSelectedTodo={setSelectedTodo}
selectedTodo={selectedTodo}
/>
)}
</div>
</div>
</div>
</div>

<TodoModal />
{selectedTodo && (
<TodoModal
selectedTodo={selectedTodo}
setSelectedTodo={setSelectedTodo}
/>
)}
</>
);
};
83 changes: 55 additions & 28 deletions src/components/TodoFilter/TodoFilter.tsx
Original file line number Diff line number Diff line change
@@ -1,30 +1,57 @@
export const TodoFilter = () => (
<form className="field has-addons">
<p className="control">
<span className="select">
<select data-cy="statusSelect">
<option value="all">All</option>
<option value="active">Active</option>
<option value="completed">Completed</option>
</select>
</span>
</p>
import { FilterByState } from '../../types/FilterByState';

<p className="control is-expanded has-icons-left has-icons-right">
<input
data-cy="searchInput"
type="text"
className="input"
placeholder="Search..."
/>
<span className="icon is-left">
<i className="fas fa-magnifying-glass" />
</span>
type Props = {
query: string;
setQuery: (query: string) => void;
setFilterBy: (filterBy: FilterByState) => void;
};

<span className="icon is-right" style={{ pointerEvents: 'all' }}>
{/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
<button data-cy="clearSearchButton" type="button" className="delete" />
</span>
</p>
</form>
);
export const TodoFilter: React.FC<Props> = ({
setFilterBy,
query,
setQuery,
}) => {
return (
<form className="field has-addons">
<p className="control">
<span className="select">
<select
data-cy="statusSelect"
onChange={event => setFilterBy(event.target.value as FilterByState)}
>
<option value={FilterByState.ALL}>All</option>
<option value={FilterByState.ACTIVE}>Active</option>
<option value={FilterByState.COMPLETED}>Completed</option>
</select>
</span>
</p>

<p className="control is-expanded has-icons-left has-icons-right">
<input
onChange={event => setQuery(event.target.value)}
data-cy="searchInput"
type="text"
className="input"
placeholder="Search..."
value={query}
/>
<span className="icon is-left">
<i className="fas fa-magnifying-glass" />
</span>

<span className="icon is-right" style={{ pointerEvents: 'all' }}>
{/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}

{query && (
<button
data-cy="clearSearchButton"
type="button"
className="delete"
onClick={() => setQuery('')}
/>
)}
</span>
</p>
</form>
);
};
44 changes: 44 additions & 0 deletions src/components/TodoItem.tsx/TodoItem.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from 'react';
import { Todo } from '../../types/Todo';

type Props = {
todo: Todo;
onSelect: (todo: Todo) => void;
selectedTodo: Todo | null;
};

export const TodoItem: React.FC<Props> = ({ todo, onSelect, selectedTodo }) => {
return (
<tr data-cy="todo" className="" key={todo.id}>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid using the key attribute directly on the tr element during render. Instead, pass the key prop to the TodoItem component from the parent component, such as TodoList, to ensure consistency and avoid potential issues with React's reconciliation process.

<td className="is-vcentered">{todo.id}</td>
<td className="is-vcentered">
{todo.completed && (
<span className="icon" data-cy="iconCompleted">
<i className="fas fa-check" />
</span>
)}
</td>
<td className="is-vcentered is-expanded">
<p className={todo.completed ? 'has-text-success' : 'has-text-danger'}>
{todo.title}
</p>
</td>
<td className="has-text-right is-vcentered">
<button
data-cy="selectButton"
className="button"
type="button"
onClick={() => onSelect(todo)}
>
<span className="icon">
{selectedTodo && selectedTodo.id === todo.id ? (
<i className="far fa-eye-slash" />
) : (
<i className="far fa-eye" />
)}
</span>
</button>
</td>
</tr>
);
};
1 change: 1 addition & 0 deletions src/components/TodoItem.tsx/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './TodoItem';
101 changes: 21 additions & 80 deletions src/components/TodoList/TodoList.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
import React from 'react';
import { Todo } from '../../types/Todo';
import { TodoItem } from '../TodoItem.tsx';

export const TodoList: React.FC = () => (
type Props = {
todoList: Todo[];
setSelectedTodo: (todo: Todo | null) => void;
selectedTodo: Todo | null;
};

export const TodoList: React.FC<Props> = ({
todoList,
setSelectedTodo,
selectedTodo,
}) => (
<table className="table is-narrow is-fullwidth">
<thead>
<tr>
Expand All @@ -16,85 +28,14 @@ export const TodoList: React.FC = () => (
</thead>

<tbody>
<tr data-cy="todo" className="">
<td className="is-vcentered">1</td>
<td className="is-vcentered" />
<td className="is-vcentered is-expanded">
<p className="has-text-danger">delectus aut autem</p>
</td>
<td className="has-text-right is-vcentered">
<button data-cy="selectButton" className="button" type="button">
<span className="icon">
<i className="far fa-eye" />
</span>
</button>
</td>
</tr>
<tr data-cy="todo" className="has-background-info-light">
<td className="is-vcentered">2</td>
<td className="is-vcentered" />
<td className="is-vcentered is-expanded">
<p className="has-text-danger">quis ut nam facilis et officia qui</p>
</td>
<td className="has-text-right is-vcentered">
<button data-cy="selectButton" className="button" type="button">
<span className="icon">
<i className="far fa-eye-slash" />
</span>
</button>
</td>
</tr>

<tr data-cy="todo" className="">
<td className="is-vcentered">1</td>
<td className="is-vcentered" />
<td className="is-vcentered is-expanded">
<p className="has-text-danger">delectus aut autem</p>
</td>
<td className="has-text-right is-vcentered">
<button data-cy="selectButton" className="button" type="button">
<span className="icon">
<i className="far fa-eye" />
</span>
</button>
</td>
</tr>

<tr data-cy="todo" className="">
<td className="is-vcentered">6</td>
<td className="is-vcentered" />
<td className="is-vcentered is-expanded">
<p className="has-text-danger">
qui ullam ratione quibusdam voluptatem quia omnis
</p>
</td>
<td className="has-text-right is-vcentered">
<button data-cy="selectButton" className="button" type="button">
<span className="icon">
<i className="far fa-eye" />
</span>
</button>
</td>
</tr>

<tr data-cy="todo" className="">
<td className="is-vcentered">8</td>
<td className="is-vcentered">
<span className="icon" data-cy="iconCompleted">
<i className="fas fa-check" />
</span>
</td>
<td className="is-vcentered is-expanded">
<p className="has-text-success">quo adipisci enim quam ut ab</p>
</td>
<td className="has-text-right is-vcentered">
<button data-cy="selectButton" className="button" type="button">
<span className="icon">
<i className="far fa-eye" />
</span>
</button>
</td>
</tr>
{todoList.map(todo => (
<TodoItem
key={todo.id}
todo={todo}
onSelect={setSelectedTodo}
selectedTodo={selectedTodo}
/>
))}
</tbody>
</table>
);
Loading
Loading