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

Update comments #166

Merged
merged 3 commits into from
Jul 27, 2024
Merged

Update comments #166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
60fe1b2
fix
rez1dent3 Jul 27, 2024
a210304
Merge branch 'clear-history' of github.com:bavix/uuid-ui into clear-h…
rez1dent3 Jul 27, 2024
205082b
build action
bavixbot Jul 27, 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
2 changes: 1 addition & 1 deletion public/index.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/index.js.map
View file
Open in desktop

Large diffs are not rendered by default.

38 changes: 15 additions & 23 deletions src/app.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,48 +75,40 @@ export default class AppComponent extends React.Component {
return (
// Wrapper div for the AppComponent
/*
* The outermost div for the AppComponent.
* It has the class 'uuid-ui--wrapper' to style it.
* The root div for the AppComponent.
* This div has a flex layout with a minimum height of 100vh (viewport height).
*/
<div className="uuid-ui--wrapper">
{/* Navigation component */}
{/* The navigation component at the top of the AppComponent. */}
{/* The navigation component at the top of the AppComponent */}
<NavComponent />
{/* Container div with a margin-top class */}
<div className="container margin-top">
{/* Columns div with a centered layout */}
{/* The div that contains two columns: input and history. */}
<div className="columns is-centered">
{/* Input column */}
/*
* The column that contains the input component.
* It has the classes 'column is-three-fifths' to style it.
* It has the id 'input-cp' to identify it.
*/
{/* The column for the input component */}
<div className="column is-three-fifths" id="input-cp">
{/* Input component with items and setItems props */}
{/*
* The input component that allows users to enter UUIDs.
* It receives the items from the state and a function to update the state.
*/}
{/* The input component that allows the user to enter UUIDs */}
<InputComponent
/* The items to be displayed in the input component */
items={items}
/* Function to update the items in the component's state */
setItems={(items) => this.setState({items})}
/>
</div>
{/* History column */}
/*
* The column that contains the history component.
* It has the classes 'column is-two-fifths is-narrow' to style it.
* It has the id 'history-cp' to identify it.
*/
{/* The column for the history component */}
<div className="column is-two-fifths is-narrow" id="history-cp">
{/* History component with items prop */}
{/*
* The history component that displays the entered UUIDs.
* It receives the items from the state and a function to clear the state.
*/}
<HistoryComponent items={items} clearItems={() => this.setState({items: []})} />
{/* The history component that displays the past input items */}
<HistoryComponent
/* The items to be displayed in the history component */
items={items}
/* Function to clear the items in the component's state */
clearItems={() => this.setState({items: []})}
/>
</div>
</div>
</div>
Expand Down
16 changes: 13 additions & 3 deletions src/history.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,18 @@ export default class HistoryComponent extends React.Component {
*
* @returns {JSX.Element} The rendered HistoryComponent.
*/
render({ items, clearItems }, { }) {
render() {
// Destructure the props
const { items, clearItems } = this.props;

return (
// Navigation panel
<nav className="panel is-dark">
{/* Panel heading */}
<p className="panel-heading">History</p>
{/* Clear history button */}
<div className={items.length === 0 ? "panel-block is-hidden" : "panel-block"}>
{/* Button to clear the history */}
<button onClick={clearItems} className="button is-danger is-outlined is-fullwidth is-small">
Clear the history
</button>
Expand All @@ -62,12 +66,18 @@ export default class HistoryComponent extends React.Component {
{/* Output tag */}
<div className="tags">
{/* Copy output to clipboard and display a success message */}
<a href="javascript:" onClick={this.copy} className="tag is-link is-light" data-tooltip={i.info}>{ i.output }</a>
<a href="javascript:" onClick={this.copy} className="tag is-link is-light" data-tooltip={i.info}>
{/* Output text */}
{ i.output }
</a>
</div>
{/* Input tag */}
<div className="tags">
{/* Copy input to clipboard and display a success message */}
<a href="javascript:" onClick={this.copy} className="tag is-primary is-light" data-tooltip={i.info}>{ i.input }</a>
<a href="javascript:" onClick={this.copy} className="tag is-primary is-light" data-tooltip={i.info}>
{/* Input text */}
{ i.input }
</a>
</div>
</div>
</div>
Expand Down