[v1.3.0] history LocalStorage

.github/workflows/compile-assets.yml

@@ -8,7 +8,7 @@ jobs:
   ui:
     permissions:
       contents: write
-    uses: bavix/.github/.github/workflows/[email protected].0
+    uses: bavix/.github/.github/workflows/[email protected].2
     secrets: inherit
     with:
       nodejs: 21.x

src/app.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import InputComponent from "./input.jsx"
+import InputComponent, {Item} from "./input.jsx"
 import HistoryComponent from "./history.jsx"
 import NavComponent from './nav.jsx'
 import '@creativebulma/bulma-tooltip/dist/bulma-tooltip.css'
@@ -29,6 +29,36 @@ export default class AppComponent extends React.Component {
         super(props);
     }
 
+    /**
+     * ComponentDidMount lifecycle hook.
+     * It gets the items from localStorage and sets the state.
+     */
+    componentDidMount() {
+        const itemsFromLocalStorage = JSON.parse(localStorage.getItem('uuidItems')) || [];
+
+        let newItem
+        const items = {}
+        for (const item of itemsFromLocalStorage) {
+            newItem = new Item(item.input, item.output, item.info)
+            items[newItem.toString()] = newItem
+        }
+
+        this.setState({ items: Object.values(items) });
+    }
+
+    /**
+     * ComponentDidUpdate lifecycle hook.
+     * It saves the items to localStorage when the state changes.
+     * @param {Object} prevProps - The previous props.
+     * @param {Object} prevState - The previous state.
+     */
+    componentDidUpdate(prevProps, prevState) {
+        let newState = [...this.state.items].slice(0, 100) 
+        if (prevState.items !== newState) {
+            localStorage.setItem('uuidItems', JSON.stringify(newState));
+        }
+    }
+
     /**
      * Render method for the AppComponent.
      *

src/history.jsx

@@ -51,7 +51,9 @@ export default class HistoryComponent extends React.Component {
                         {/* Field containing two tags */}
                         <div className="field">
                             {/* Output tag */}
-                            <a href="javascript:" onClick={this.copy} className="tag is-link is-light" data-tooltip={i.info}>{ i.output }</a>
+                            <div className="tags">
+                                <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">
                                 <a href="javascript:" onClick={this.copy} className="tag is-primary is-light" data-tooltip={i.info}>{ i.input }</a>

src/input.jsx

@@ -58,7 +58,7 @@ export function intTypeList() {
  * Represents an item with input, output, and additional information.
  * @class
  */
-class Item {
+export class Item {
     /**
      * Creates a new Item.
      * @constructor