Make the code more readable

Author: lovasoa

config-overrides.js

@@ -2,7 +2,9 @@ const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = function override(config, env) {
     config.plugins.push(new CopyPlugin([
-        { from: 'node_modules/sql.js/dist/sql-wasm.wasm', to: 'static/js/'},
+        // This wasm file will be fetched dynamically when we initialize sql.js
+        // It is important that we do not change its name, and that it is in the same folder as the js
+        { from: 'node_modules/sql.js/dist/sql-wasm.wasm', to: 'static/js/' },
     ]));
     return config;
 }

src/App.js

@@ -4,51 +4,83 @@ import initSqlJs from "sql.js";
 
 
 export default class App extends React.Component {
+
   constructor() {
     super();
-    this.state = { db: null, err: null, result: null }
+    this.state = { db: null, err: null, results: null }
   }
+
   componentDidMount() {
+    // sql.js needs to fetch its wasm file, so we cannot immediately instantiate the database
+    // without any configuration, initSqlJs will fetch the wasm files directly from the same path as the js
+    // see ../config-overrides.js
     initSqlJs()
       .then(SQL => this.setState({ db: new SQL.Database() }))
       .catch(err => this.setState({ err }));
   }
+
   exec(sql) {
-    let result = null, err = null;
+    let results = null, err = null;
     try {
-      result = this.state.db.exec(sql);
+      // The sql is executed synchronously on the UI thread. 
+      // You may want to use a web worker
+      results = this.state.db.exec(sql); // an array of objects is returned
     } catch (e) {
+      // exec throws an error when the SQL statement is invalid
       err = e
     }
-    this.setState({ result, err })
+    this.setState({ results, err })
   }
+
+  /**
+   * Renders a single value of the array returned by db.exec(...) as a table
+   */
   renderResult({ columns, values }) {
+    return (
+      <table>
+        <thead>
+          <tr>
+            {columns.map(columnName =>
+              <td>{columnName}</td>
+            )}
+          </tr>
+        </thead>
 
-    return <table>
-      <thead>
-        <tr>
-          {columns.map(c => <td>{c}</td>)}
-        </tr>
-      </thead>
-      <tbody>
-        {values.map(row =>
-          <tr>{row.map(v => <td>{v}</td>)}</tr>
-        )}
-      </tbody>
-    </table>
+        <tbody>
+          {values.map(row => // values is an array of arrays representing the results of the query
+            <tr>
+              {row.map(value =>
+                <td>{value}</td>
+              )}
+            </tr>
+          )}
+        </tbody>
+      </table>
+    );
   }
+
   render() {
-    let { db, err, result } = this.state;
+    let { db, err, results } = this.state;
     if (!db) return <pre>Loading...</pre>;
     return (
       <div className="App">
+
         <h1>React SQL interpreter</h1>
+
         <textarea
           onChange={e => this.exec(e.target.value)}
-          placeholder="Enter some SQL. No inpiration ? Try “select sqlite_version()”"></textarea>
+          placeholder="Enter some SQL. No inpiration ? Try “select sqlite_version()”"
+        ></textarea>
+
         <pre className="error">{(err || "").toString()}</pre>
-        <pre>{result ? result.map(this.renderResult) : ""}</pre>
+
+        <pre>{results
+          ? results.map(this.renderResult) // results contains one object per select statement in the query
+          : ""
+        }</pre>
+
       </div>
     );
   }
+
 }