feat: clear the history

bavix · Jul 27, 2024 · 5c1793b · 5c1793b
1 parent e7c9c16
commit 5c1793b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/src/app.jsx b/src/app.jsx
@@ -74,25 +74,49 @@ 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.
+             */
             <div className="uuid-ui--wrapper">
                 {/* Navigation component */}
+                {/* 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.
+                         */
                         <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.
+                             */}
                             <InputComponent 
                                 items={items} 
                                 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.
+                         */
                         <div className="column is-two-fifths is-narrow" id="history-cp">
                             {/* History component with items prop */}
-                            <HistoryComponent items={items} />
+                            {/*
+                             * 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: []})} />
                         </div>
                     </div>
                 </div>

diff --git a/src/history.jsx b/src/history.jsx
@@ -35,27 +35,38 @@ export default class HistoryComponent extends React.Component {
 
     /**
      * Render method for the HistoryComponent.
-     * It returns a navigation panel (<nav>) with a heading "History" and a list of items.
+     *
+     * Returns a navigation panel (<nav>) with a heading "History" and a list of items.
      * Each item is a panel block (<div>) with a field (<div>) containing two tags (<a>).
-     * 
+     *
      * @returns {JSX.Element} The rendered HistoryComponent.
      */
-    render({ items }, { }) {
+    render({ items, clearItems }, { }) {
         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 onClick={clearItems} className="button is-danger is-outlined is-fullwidth is-small">
+                        Clear the history
+                    </button>
+                </div>
                 {/* List of items */}
                 { [...items].slice(0, 30).map(i =>
+                    // Panel block for each item
                     <div key={i.toString()} className="panel-block">
                         {/* Field containing two tags */}
                         <div className="field">
                             {/* 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>
                             </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>
                             </div>
                         </div>