Formatting & identification of a table regeneration bug

src/components/Body.js

@@ -16,18 +16,23 @@ export default class Body extends React.Component {
 
     /** @listens Table#newTable loads new Table*/
     handleEvents() {
+        const self = this;
         Emitter.on("newTable", (obj, err) => {
             if (err) throw err;
-            this.setState({ table: obj });
+
+            console.log("newTable", obj);
+            debugger;
+            self.setState({ table: obj });
         });
     }
     componentWillMount() {
         this.initialize();
     }
-    shouldComponentUpdate(nextProps, nextState) {
-        return this.state.table !== nextState.table;
+    shouldComponentUpdate(nextProps, state) {
+        return this.state.table.id !== state.table.id;
     }
     render() {
+        console.warn("Render:", this.state.table);
         return (
             <div className="wrapper">
                 <div id="searchBar">
@@ -64,6 +69,7 @@ export default class Body extends React.Component {
         if (!Settings.has("tableJSON")) {
             let tableJSON = await generate("C:\\Users\\Paoda\\Downloads", template);
 
+            console.log("Initialize: ", tableJSON)
             this.setState({ table: tableJSON });
             saveTable(tableJSON);
 

src/components/Body/Table.js

@@ -10,6 +10,8 @@ import Settings from 'electron-settings';
 var active = document.createElement("tr");
 active.classList.toggle("active");
 
+const usedTableIDs = [];
+
 const mp = new MusicPlayer();
 var JSXcache;
 
@@ -234,10 +236,31 @@ export async function generate(path, template) {
                 "s"
         );
 
+        // assign unique ID to Table.
+
+        table.id = createID(25);
+
         return new Promise((res, rej) => {
             res(table);
         });
     }
+
+    function createID(length) {
+        const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+        let id;
+
+        do {
+            id = "";
+            for (let i = 0; i < length; i++) id += chars[randInt(0, chars.length)];
+        } while(usedTableIDs.includes(id));
+
+        usedTableIDs.push(id);
+        return id;
+
+        function randInt(min, max) {
+            return ~~(Math.random() * (max - min) + min);
+        }
+    }
 }
 
 

src/components/Modal/SettingsManager.js

@@ -25,6 +25,7 @@ export default class SettingsManager extends Modal {
                 <h3>Settings</h3>
                 <label htmlFor="table-data">
                     Delete Table Data: <input onClick={this.deleteTable.bind(this)} type="button" value="Delete" name="delete-table" id="delete-table-btn" />
+                    <br />
                     Regnerate Table Data: <input onClick={this.regenTable.bind(this)} type="button" value="Regenerate" name="regen-table" id="regen-table-btn" />
                 </label>
             </form>
@@ -39,22 +40,25 @@ export default class SettingsManager extends Modal {
 
     deleteTable() {
         if (Settings.has("tableJSON")) Settings.delete("tableJSON");
-        else console.warn("There was no Table Saved to Delete!");
+        else console.info("There was no Table Saved to Delete!");
 
-        Emitter.emit("newTable", this.template)
+        const template = this.template;
+
+        template.id = "-1"; //Impossible ID.
+
+        Emitter.emit("newTable", this.template);
 
     }
 
-
     /**
      * Regenerates a Table
      * TODO: Make this a function w/ the one inside of Body.js
      */
     async regenTable() {
         if (Settings.has("tableJSON")) Settings.delete("tableJSON");
-        else console.warn("there was no Table Saved to Delete!")
+        else console.info("There was no Table Saved to Delete!")
 
-        let tableJSON = await generate("C:\\Users\\Paoda\\Downloads", this.template);
+        const tableJSON = await generate("C:\\Users\\Paoda\\Downloads", this.template);
         
         Emitter.emit("newTable", tableJSON);