Skip to content

Commit

Permalink
solution
Browse files Browse the repository at this point in the history
  • Loading branch information
@VitaliiShc
VitaliiShc committed Dec 16, 2024
1 parent 8bf0f2b commit 38218df
Show file tree
Hide file tree
Showing 5 changed files with 255 additions and 138 deletions.
67 changes: 60 additions & 7 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,53 @@
/* 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 { getTodos } from './api';
import { Todo } from './types/Todo';
import { Filters } from './types/Filters';
import { TodoList } from './components/TodoList';
import { TodoFilter } from './components/TodoFilter';
import { TodoModal } from './components/TodoModal';
import { Loader } from './components/Loader';

export const App: React.FC = () => {
const [todos, setTodos] = useState<Todo[]>([]);
const [isLoading, setIsloading] = useState(true);
const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null);
const [query, setQuery] = useState('');
const [status, setStatus] = useState<Filters>(Filters.All);

const closeModal = () => {
setSelectedTodo(null);
};

const filterTodos = () => {
let filteredTodos = todos;

if (status === Filters.Completed) {
filteredTodos = todos.filter(todo => todo.completed);
}

if (status === Filters.Active) {
filteredTodos = todos.filter(todo => !todo.completed);
}

return filteredTodos.filter(todo =>
todo.title.toLowerCase().includes(query.toLowerCase()),
);
};

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

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

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

<div className="block">
<Loader />
<TodoList />
{isLoading ? (
<Loader />
) : todos.length ? (
<TodoList
todos={filterTodos()}
selectedTodo={selectedTodo}
setSelectedTodo={setSelectedTodo}
/>
) : (
<p>No data</p>
)}
</div>
</div>
</div>
</div>

<TodoModal />
{selectedTodo && (
<TodoModal selectedTodo={selectedTodo} closeModal={closeModal} />
)}
</>
);
};
81 changes: 53 additions & 28 deletions src/components/TodoFilter/TodoFilter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,55 @@
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>>;
setStatus: 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, setStatus } = props;

return (
<form className="field has-addons">
<p className="control">
<span className="select">
<select
data-cy="statusSelect"
onChange={evt => setStatus(evt.target.value as Filters)}
>
<option value={Filters.All}>All</option>
<option value={Filters.Active}>Active</option>
<option value={Filters.Completed}>Completed</option>
</select>
</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={evt => setQuery(evt.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>
);
};
168 changes: 74 additions & 94 deletions src/components/TodoList/TodoList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,80 @@
import React from 'react';
import React, { Dispatch, SetStateAction } from 'react';
import classNames 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[];
selectedTodo: Todo | null;
setSelectedTodo: Dispatch<SetStateAction<Todo | 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, selectedTodo, setSelectedTodo } = 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.map(todo => (
<tr
data-cy="todo"
className={classNames(
todo === selectedTodo ? 'has-background-info-light' : '',
)}
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={classNames({
'has-text-success': todo.completed,
'has-text-danger': !todo.completed,
})}
>
{todo.title}
</p>
</td>
<td className="has-text-right is-vcentered">
<button
data-cy="selectButton"
className="button"
type="button"
onClick={() => {
setSelectedTodo(todo);
}}
>
<span className="icon">
<i
className={classNames(
'far',
todo === selectedTodo ? 'fa-eye-slash' : 'fa-eye',
)}
/>
</span>
</button>
</td>
</tr>
))}
</tbody>
</table>
);
};
Loading

0 comments on commit 38218df

Please sign in to comment.