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

add solution #2684

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

add solution #2684

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
de4a8fc
add solution
TargoniyAnatoliy Dec 14, 2024
b88fcb2
add solution after reinstall modules
TargoniyAnatoliy Dec 14, 2024
e586c1a
add condition render in query button
TargoniyAnatoliy Dec 14, 2024
9f9390f
change modal header
TargoniyAnatoliy Dec 14, 2024
b91cc60
add solution after tests
TargoniyAnatoliy Dec 14, 2024
706481f
add changes after review
TargoniyAnatoliy Dec 16, 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
57 changes: 52 additions & 5 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,45 @@
/* 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 { Filters } from './types/Filters';

export const App: React.FC = () => {
const [todos, setTodos] = useState<Todo[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [selectedTodoId, setSelectedTodoId] = useState<number | null>(null);
const [query, setQuery] = useState('');
const [filterParameter, setFilterParameter] = useState<Filters>(Filters.All);

const selectedTodo = todos.find(todo => todo.id === selectedTodoId);

const filteredTodos: Todo[] = todos
.filter(todo => todo.title.toLowerCase().includes(query.toLowerCase()))
.filter(todo => {
switch (filterParameter) {
case 'completed':
Copy link

Choose a reason for hiding this comment

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

let's move completed, active, all to the enum

Copy link
Author

Choose a reason for hiding this comment

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

enum Filters already exists in types folder: enum Filters {
All = 'all',
Active = 'active',
Completed = 'completed',
}

return todo.completed;
case 'active':
return !todo.completed;
case 'all':
default:
return true;
}
});

useEffect(() => {
getTodos()
.then(data => setTodos(data))
.finally(() => setIsLoading(false));
}, []);

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

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

<div className="block">
<Loader />
<TodoList />
{isLoading ? (
<Loader />
) : (
<TodoList
todos={filteredTodos}
selectTodoId={setSelectedTodoId}
selectedTodoId={selectedTodoId}
/>
)}
</div>
</div>
</div>
</div>

<TodoModal />
{selectedTodoId && selectedTodo && (
<TodoModal
todo={selectedTodo}
onClose={() => setSelectedTodoId(null)}
/>
)}
</>
);
};
83 changes: 55 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,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 React, { Dispatch, SetStateAction } from 'react';
import { Filters } from '../../types/Filters';

<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: Dispatch<SetStateAction<string>>;
setFilter: Dispatch<SetStateAction<Filters>>;
};

<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> = props => {
const { query, setQuery, setFilter } = props;

return (
<form className="field has-addons">
<p className="control">
<span className="select">
<select
data-cy="statusSelect"
onChange={e => setFilter(e.target.value as Filters)}
>
<option value={Filters.All}>All</option>
<option value={Filters.Active}>Active</option>
<option value={Filters.Completed}>Completed</option>
</select>
Comment on lines +21 to +23
Copy link

Choose a reason for hiding this comment

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

we can show these options using .map()

Copy link
Author

Choose a reason for hiding this comment

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

It's good idea, but I don't know how to use map to the enum object Filters: enum Filters {
All = 'all',
Active = 'active',
Completed = 'completed',
}

Copy link

Choose a reason for hiding this comment

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

It's good idea, but I don't know how to use map to the enum object Filters: enum Filters { All = 'all', Active = 'active', Completed = 'completed', }

You can use Object.values/key/entries to convert enum into an array

</span>
</p>

<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: React.ChangeEvent<HTMLInputElement>) =>
setQuery(event.target.value)
}
/>
<span className="icon is-left">
<i className="fas fa-magnifying-glass" />
</span>

{query && (
<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"
onClick={() => setQuery('')}
/>
</span>
)}
</p>
</form>
);
};
165 changes: 71 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,77 @@
import React from 'react';
import React, { Dispatch, SetStateAction } from 'react';
import cn from 'classnames';
import { Todo } from '../../types/Todo';

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[];
selectTodoId: Dispatch<SetStateAction<number | null>>;
selectedTodoId: number | null;
};

<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>
export const TodoList: React.FC<Props> = props => {
const { todos, selectTodoId, selectedTodoId } = props;

<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">
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>
</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.length === 0 ? (
<tr>
<td colSpan={4}>No data</td>
</tr>
) : (
todos.map(todo => (
<tr data-cy="todo" className="" key={todo.id}>
<td className="is-vcentered">{todo.id}</td>
Copy link

Choose a reason for hiding this comment

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

Suggested change
<tr data-cy="todo" className="" key={todo.id}>
<tr data-cy="todo" key={todo.id}>

let's remove redundant class name

Copy link
Author

Choose a reason for hiding this comment

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

forgot to use 'has-background-info-light' class if todo is selected

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