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 task solution #2729

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

add task solution #2729

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
64f62cd
add task solution
kovaden414 Jan 11, 2025
83cc411
fixed mistakes
kovaden414 Jan 11, 2025
e1fe027
fixed mistakes
kovaden414 Jan 11, 2025
a5ff1b4
fixed mistakes
kovaden414 Jan 11, 2025
e074a03
fixed mistakes
kovaden414 Jan 11, 2025
51e29c0
fixed mistakes
kovaden414 Jan 11, 2025
5683302
fixed mistakes
kovaden414 Jan 12, 2025
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
75 changes: 70 additions & 5 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,65 @@
/* 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 { Todo } from './types/Todo';

export const App: React.FC = () => {
const [todos, setTodos] = useState<Todo[]>([]);
const [loading, setLoading] = useState(false);
const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null);
const [selecteValue, setSelecteValue] = useState('all');
Copy link

Choose a reason for hiding this comment

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

Typographical Error: The state variable selecteValue seems to be a typo. It should likely be selectedValue to better reflect its purpose and avoid confusion.

const [inputValue, setInputValue] = useState('');

useEffect(() => {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 1000);
}, []);

useEffect(() => {
fetch(`
https://mate-academy.github.io/react_dynamic-list-of-todos/api/todos.json`)
.then(response => response.json())
.then((todosFromServer: Todo[]) => {
switch (selecteValue) {
Copy link

Choose a reason for hiding this comment

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

Typographical Error: The variable selecteValue is used here, which seems to be a typo. Consider renaming it to selectedValue.

case 'all':
setTodos(
todosFromServer.filter(todo =>
todo.title.toLowerCase().includes(inputValue.toLowerCase()),
),
);
break;
case 'active':
setTodos(
todosFromServer.filter(
todo =>
!todo.completed &&
todo.title.toLowerCase().includes(inputValue.toLowerCase()),
),
);
break;
case 'completed':
setTodos(
todosFromServer.filter(
todo =>
todo.completed &&
todo.title.toLowerCase().includes(inputValue.toLowerCase()),
),
);
break;
default:
return;
}
});
}, [selecteValue, inputValue]);
Copy link

Choose a reason for hiding this comment

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

Data Fetching Logic: The useEffect hook fetches data every time selecteValue or inputValue changes. This could lead to excessive network requests. Consider fetching the data once and then filtering the todos locally based on these values.


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

<div className="block">
<TodoFilter />
<TodoFilter
selecteValue={selecteValue}
Copy link

Choose a reason for hiding this comment

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

Typographical Error: The prop selecteValue is likely a typo and should be selectedValue.

setSelecteValue={setSelecteValue}
inputValue={inputValue}
setInputValue={setInputValue}
/>
</div>

<div className="block">
<Loader />
<TodoList />
{loading && <Loader />}
<TodoList
todos={todos}
setSelectedTodo={setSelectedTodo}
selectedTodo={selectedTodo}
/>
</div>
</div>
</div>
</div>

<TodoModal />
{selectedTodo && (
<TodoModal
selectedTodo={selectedTodo}
onClose={() => setSelectedTodo(null)}
/>
)}
</>
);
};
31 changes: 28 additions & 3 deletions src/components/TodoFilter/TodoFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,24 @@
export const TodoFilter = () => (
type Props = {
selecteValue: string;
setSelecteValue: (selecteValue: string) => void;
Copy link

Choose a reason for hiding this comment

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

Typographical Error: The prop selecteValue seems to be a typo. It should likely be selectedValue to better reflect its purpose and avoid confusion.

inputValue: string;
Copy link

Choose a reason for hiding this comment

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

Typographical Error: The function name setSelecteValue seems to be a typo. It should likely be setSelectedValue.

setInputValue: (selecteValue: string) => void;
};

export const TodoFilter: React.FC<Props> = ({
selecteValue,
setSelecteValue,
Copy link

Choose a reason for hiding this comment

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

Typographical Error: The variable selecteValue is used here, which seems to be a typo. Consider renaming it to selectedValue.

inputValue,
Copy link

Choose a reason for hiding this comment

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

Typographical Error: The function setSelecteValue is used here, which seems to be a typo. Consider renaming it to setSelectedValue.

setInputValue,
}) => (
<form className="field has-addons">
<p className="control">
<span className="select">
<select data-cy="statusSelect">
<select
data-cy="statusSelect"
value={selecteValue}
onChange={event => setSelecteValue(event.target.value)}
Copy link

Choose a reason for hiding this comment

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

Typographical Error: The attribute value={selecteValue} is likely a typo and should be value={selectedValue}.

>
Copy link

Choose a reason for hiding this comment

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

Typographical Error: The function setSelecteValue is likely a typo and should be setSelectedValue.

<option value="all">All</option>
<option value="active">Active</option>
<option value="completed">Completed</option>
Expand All @@ -16,14 +32,23 @@ export const TodoFilter = () => (
type="text"
className="input"
placeholder="Search..."
value={inputValue}
onChange={event => setInputValue(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 */}
<button data-cy="clearSearchButton" type="button" className="delete" />
{inputValue && (
<button
data-cy="clearSearchButton"
type="button"
className="delete"
onClick={() => setInputValue('')}
/>
)}
</span>
</p>
</form>
Expand Down
130 changes: 49 additions & 81 deletions src/components/TodoList/TodoList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
import React from 'react';
import { Todo } from '../../types/Todo';

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

export const TodoList: React.FC<Props> = ({
todos,
setSelectedTodo,
selectedTodo,
}) => (
<table className="table is-narrow is-fullwidth">
<thead>
<tr>
Expand All @@ -16,85 +26,43 @@ 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>
{todos.map(todo => (
<tr data-cy="todo" className="" 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={
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={() => setSelectedTodo(todo)}
>
<span className="icon">
<i
className={
todo === selectedTodo ? 'far fa-eye-slash' : 'far fa-eye'
}
/>
</span>
</button>
</td>
</tr>
))}
</tbody>
</table>
);
44 changes: 36 additions & 8 deletions src/components/TodoModal/TodoModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,33 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { Loader } from '../Loader';
import { Todo } from '../../types/Todo';
import { User } from '../../types/User';

type Props = {
selectedTodo: Todo;
onClose: () => void;
};

export const TodoModal: React.FC<Props> = ({ selectedTodo, onClose }) => {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(false);

useEffect(() => {
setLoading(true);
setTimeout(() => {
fetch(`
https://mate-academy.github.io/react_dynamic-list-of-todos/api/users/${selectedTodo.userId}.json`)
.then(response => response.json())
.then(userFromServer => setUser(userFromServer))
.finally(() => setLoading(false));
}, 1000);
}, [selectedTodo]);
Copy link

Choose a reason for hiding this comment

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

Unnecessary Delay: The setTimeout introduces a 1-second delay before fetching user data. Consider removing this delay unless it's needed for a specific purpose, as it can lead to a poor user experience.


Copy link

Choose a reason for hiding this comment

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

Lack of Error Handling: The fetch request does not handle potential errors. Consider adding error handling to manage network issues or invalid responses.

export const TodoModal: React.FC = () => {
return (
<div className="modal is-active" data-cy="modal">
<div className="modal-background" />

{true ? (
{loading ? (
<Loader />
) : (
<div className="modal-card">
Expand All @@ -15,25 +36,32 @@ export const TodoModal: React.FC = () => {
className="modal-card-title has-text-weight-medium"
data-cy="modal-header"
>
Todo #2
Todo #{selectedTodo.id}
</div>

{/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
<button type="button" className="delete" data-cy="modal-close" />
<button
type="button"
className="delete"
data-cy="modal-close"
onClick={onClose}
/>
</header>

<div className="modal-card-body">
<p className="block" data-cy="modal-title">
quis ut nam facilis et officia qui
{selectedTodo.title}
</p>

<p className="block" data-cy="modal-user">
{/* <strong className="has-text-success">Done</strong> */}
<strong className="has-text-danger">Planned</strong>
<strong className="has-text-danger">
{selectedTodo.completed ? 'Done' : 'Planned'}
</strong>

{' by '}

<a href="mailto:[email protected]">Leanne Graham</a>
<a href={`mailto:${user?.email}`}>{user?.name}</a>
</p>
</div>
</div>
Expand Down
Loading