Skip to content

Task solution #1774

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

Open
Dominik-Dudek-code wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Task solution #1774

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
123 changes: 76 additions & 47 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import 'bulma/css/bulma.css';
import './App.scss';
import classNames from 'classnames';

export const goods = [
'Dumplings',
Expand All @@ -15,58 +16,86 @@ export const goods = [
'Garlic',
];

export const App: React.FC = () => (
<main className="section container">
<h1 className="title">No goods selected</h1>
type State = {
selectedGood: string;
};

<h1 className="title is-flex is-align-items-center">
Jam is selected
{/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
<button data-cy="ClearButton" type="button" className="delete ml-3" />
</h1>
export class App extends React.Component<{}, State> {
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jan 22, 2025

Choose a reason for hiding this comment

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

Consider specifying the type of the props in the React.Component generic type. Currently, it's using an empty object {} which is fine if there are no props, but it's good practice to explicitly define it for clarity and future maintenance.

state = {
selectedGood: 'Jam',
};

<table className="table">
<tbody>
<tr data-cy="Good">
<td>
<button data-cy="AddButton" type="button" className="button">
+
</button>
</td>
handleDeleteClick = () => {
this.setState({
selectedGood: '',
});
};

<td data-cy="GoodTitle" className="is-vcentered">
Dumplings
</td>
</tr>
handleGoodsClick = (good: string) => {
this.setState({
selectedGood: good,
});
};

<tr data-cy="Good" className="has-background-success-light">
<td>
render(): React.ReactNode {
const { selectedGood } = this.state;

return (
<main className="section container">
{selectedGood.length !== 0 ? (
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jan 22, 2025

Choose a reason for hiding this comment

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

Using selectedGood.length !== 0 is correct, but you might want to consider using selectedGood directly in the conditional check, as it is a string and will evaluate to false when empty. This is a minor readability improvement.

<h1 className="title is-flex is-align-items-center">
{selectedGood} is selected
{/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
<button
data-cy="RemoveButton"
data-cy="ClearButton"
type="button"
className="button is-info"
>
-
</button>
</td>

<td data-cy="GoodTitle" className="is-vcentered">
Jam
</td>
</tr>
className="delete ml-3"
onClick={this.handleDeleteClick}
/>
</h1>
) : (
<h1 className="title">No goods selected</h1>
)}

<tr data-cy="Good">
<td>
<button data-cy="AddButton" type="button" className="button">
+
</button>
</td>
<table className="table">
<tbody>
{goods.map(good => {
return (
<tr
data-cy="Good"
key={good}
className={classNames({
'has-background-success-light': selectedGood === good,
})}
>
<td>
<button
data-cy={
good === selectedGood ? 'RemoveButton' : 'AddButton'
}
type="button"
className={
good === selectedGood ? 'button is-info' : 'button'
}
onClick={
good === selectedGood
? this.handleDeleteClick
: () => this.handleGoodsClick(good)
}
>
{good === selectedGood ? '-' : '+'}
</button>
</td>

<td data-cy="GoodTitle" className="is-vcentered">
Garlic
</td>
</tr>
</tbody>
</table>
</main>
);
<td data-cy="GoodTitle" className="is-vcentered">
{good}
</td>
</tr>
);
})}
</tbody>
</table>
</main>
);
}
}