Merge pull request #163 from bavix/uuid-v4-gen

[v1.3.1] uuid v4 gen
bavix · Jul 27, 2024 · 3645977 · 3645977
2 parents d7c2fd8 + d2ffa7f
commit 3645977
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 3 deletions.
diff --git a/public/index.js b/public/index.js
diff --git a/public/index.js.map b/public/index.js.map
diff --git a/src/nav.jsx b/src/nav.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 import "@theme-toggles/react/css/Expand.css"
 import { Expand } from "@theme-toggles/react"
 import { Helmet, HelmetProvider } from 'react-helmet-async';
+import { v4 } from 'uuid';
+import { Notify } from 'notiflix/build/notiflix-notify-aio';
 
 export default class NavComponent extends React.Component {
     /**
@@ -15,15 +17,44 @@ export default class NavComponent extends React.Component {
         super(props);
     }
 
+    /**
+     * Generates a new UUID and copies it to the clipboard.
+     *
+     * @param {function} setUuid - A function to set the UUID state.
+     * @return {void}
+     */
+    generateV4 = (setUuid) => {
+        // Generate a new UUID
+        const uuid = v4();
+
+        // Copy the UUID to the clipboard
+        navigator.clipboard.writeText(uuid)
+            .then(() => {
+                // Display a success message with the copied UUID
+                Notify.success('Text ' + uuid + ' copied');
+            })
+            .catch((error) => {
+                // Display an error message if the copy operation fails
+                Notify.failure('Error copying text: ' + error);
+            });
+
+        // Set the generated UUID as the new state
+        setUuid(uuid);
+    }
+
     /**
      * Render method for the NavComponent.
+     *
      * This method returns the navigation panel (<nav>) with a brand and a menu.
      * The brand contains a link to the homepage with an image.
-     * The menu contains a single item with a link to the homepage.
+     * The menu contains a link to the homepage, an online UUID generator, and a theme toggle component.
      *
      * @returns {JSX.Element} The rendered NavComponent.
      */
     render() {
+        // Generate a new UUID and store it in the state
+        const [uuid, setUuid] = React.useState('');
+
         // Initialize the state variable for the theme toggle
         const [isToggled, setToggle] = React.useState(
             JSON.parse(localStorage.getItem('theme')) || false
@@ -62,6 +93,26 @@ export default class NavComponent extends React.Component {
                                 <a className="navbar-item" href="./">
                                     UUIDConv UI {/* Menu item */}
                                 </a>
+                                {/* Online UUID Generator */}
+                                <div className='navbar-item'>
+                                    <div className="field is-grouped">
+                                        {/* Input field for the generated UUID */}
+                                        <p className="control is-expanded">
+                                            <input
+                                                readOnly={true}
+                                                size={40}
+                                                className="input is-info is-small"
+                                                type="text"
+                                                value={uuid}
+                                                placeholder="Online UUIDv4 Generator"
+                                            />
+                                        </p>
+                                        {/* Generate button */}
+                                        <p className="control">
+                                            <button className="button is-link is-small" onClick={() => this.generateV4(setUuid)}>Generate</button>
+                                        </p>
+                                    </div>
+                                </div>
                             </div>
 
                             <div className="navbar-end">