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

Solution #2707

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

Solution #2707

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fef8b4c
Solution
IlMarauder Dec 20, 2024
a6fa41f
New Solution
IlMarauder Dec 25, 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
82 changes: 77 additions & 5 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,73 @@
/* 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';

type Params = {
query: string;
filter: string;
};

function filterTodos(list: Todo[], params: Params) {
const { query, filter } = params;
let result: Todo[] = [];

if (filter) {
switch (filter) {
case 'all':
Copy link

Choose a reason for hiding this comment

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

The filter value here is 'all', which is consistent with the initialization in the useState hook. Ensure that all filter values are consistently used in lowercase throughout the application.

result = list;
break;

case 'active':
result = list.filter((todo: Todo) => !todo.completed);
break;

case 'completed':
result = list.filter((todo: Todo) => todo.completed);
break;

default:
result = list;
break;
Comment on lines +23 to +39
Copy link

Choose a reason for hiding this comment

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

The filter state is initialized with 'All', but the switch cases use lowercase 'all'. This inconsistency can lead to the default case being executed unintentionally. Ensure the filter values are consistent.

}
}

if (query) {
result = result.filter((todo: Todo) =>
todo.title.toLowerCase().includes(query.toLowerCase()),
);
}

return result;
}

export const App: React.FC = () => {
const [todos, setTodos] = useState<Todo[]>([]);
const [loading, setLoading] = useState(false);

const [select, setSelect] = useState(0);
Copy link

Choose a reason for hiding this comment

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

The select state variable is initialized with 0, but its purpose is not clear. Ensure that this variable is used appropriately and its role is well-defined in the application.


const [filter, setFilter] = useState('All');
Copy link

Choose a reason for hiding this comment

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

The initial value of filter is 'All', which should match the case used in the filterTodos function ('all'). Consider changing it to 'all' to ensure consistency.

const [query, setQuery] = useState('');

useEffect(() => {
setLoading(true);

getTodos()
.then(todosFromServer => setTodos(todosFromServer))
.finally(() => setLoading(false));
}, []);

const visibleTodos = filterTodos(todos, { query, filter });

return (
<>
<div className="section">
Expand All @@ -17,18 +76,31 @@ export const App: React.FC = () => {
<h1 className="title">Todos:</h1>

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

<div className="block">
<Loader />
<TodoList />
{loading ? (
<Loader />
) : (
<TodoList
todos={visibleTodos}
select={select}
setSelect={setSelect}
/>
)}
</div>
</div>
</div>
</div>

<TodoModal />
{select !== 0 && (
<TodoModal todos={todos} select={select} setSelect={setSelect} />
)}
</>
);
};
76 changes: 48 additions & 28 deletions src/components/TodoFilter/TodoFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,50 @@
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>
type Props = {
setFilter: (filter: string) => void;
query: string;
setQuery: (query: string) => void;
};

<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>
export const TodoFilter: React.FC<Props> = ({ setFilter, query, setQuery }) => {
return (
<form className="field has-addons">
<p className="control">
<span className="select">
<select
data-cy="statusSelect"
onChange={event => setFilter(event.target.value)}
>
<option value="all">All</option>
<option value="active">Active</option>
<option value="completed">Completed</option>
</select>
Comment on lines +16 to +18
Copy link

Choose a reason for hiding this comment

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

Ensure that the filter values ('all', 'active', 'completed') are consistent with the values used in the App.tsx file. This will prevent any mismatches in filtering logic.

</span>
</p>

<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>
);
<p className="control is-expanded has-icons-left has-icons-right">
<input
data-cy="searchInput"
type="text"
className="input"
placeholder="Search..."
value={query}
onChange={event => setQuery(event.target.value)}
/>
<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>
);
};
161 changes: 67 additions & 94 deletions src/components/TodoList/TodoList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,100 +1,73 @@
import React from 'react';
import { Todo } from '../../types/Todo';
import cn from 'classnames';

export const TodoList: React.FC = () => (
<table className="table is-narrow is-fullwidth">
<thead>
<tr>
<th>#</th>
<th>
<span className="icon">
<i className="fas fa-check" />
</span>
</th>
<th>Title</th>
<th> </th>
</tr>
</thead>
type Props = {
todos: Todo[];
select: number;
setSelect: (select: number) => void;
};

<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">
export const TodoList: React.FC<Props> = ({ todos, select, setSelect }) => {
return (
<table className="table is-narrow is-fullwidth">
<thead>
<tr>
<th>#</th>
<th>
<span className="icon">
<i className="far fa-eye" />
<i className="fas fa-check" />
</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>
</th>
<th>Title</th>
<th> </th>
</tr>
</thead>

<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>
</tbody>
</table>
);
<tbody>
{todos.map(todo => (
<tr
data-cy="todo"
className={cn(select === todo.id && 'has-background-info-light')}
Copy link

Choose a reason for hiding this comment

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

Ensure that the select state variable is used consistently across the application. This line highlights the selected todo, so make sure the logic for setting and using select is clear and consistent.

key={todo.id}
>
<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={cn(
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={() => setSelect(todo.id)}
>
<span className="icon">
<i
className={cn(
'far',
select === todo.id ? 'fa-eye-slash' : 'fa-eye',
)}
/>
</span>
</button>
</td>
</tr>
))}
</tbody>
</table>
);
};
Loading
Loading