use functional components

Author: lovasoa

src/App.js

@@ -1,90 +1,101 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "./styles.css";
 import initSqlJs from "sql.js";
 
-// Required to let webpack know it needs to copy the wasm file to our assets
-import sqlWasm from "!!file-loader?name=sql-wasm-[contenthash].wasm!sql.js/dist/sql-wasm.wasm"
+// Required to let webpack 4 know it needs to copy the wasm file to our assets
+import sqlWasm from "!!file-loader?name=sql-wasm-[contenthash].wasm!sql.js/dist/sql-wasm.wasm";
 
-export default class App extends React.Component {
+export default function App() {
+  const [db, setDb] = useState(null);
+  const [error, setError] = useState(null);
 
-  constructor() {
-    super();
-    this.state = { db: null, err: null, results: null }
-  }
-
-  componentDidMount() {
+  useEffect(async () => {
     // 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 ../craco.config.js
-    initSqlJs({
-      locateFile: () => sqlWasm // Important
-    })
-      .then(SQL => this.setState({ db: new SQL.Database() }))
-      .catch(err => this.setState({ err }));
-  }
-
-  exec(sql) {
-    let results = null, err = null;
     try {
-      // 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
+      const SQL = await initSqlJs({ locateFile: () => sqlWasm });
+      setDb(new SQL.Database());
+    } catch (err) {
+      setError(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>
+  if (error) return <pre>{error.toString()}</pre>;
+  else if (!db) return <pre>Loading...</pre>;
+  else return <SQLRepl db={db} />;
+}
 
-        <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>
-    );
-  }
+/**
+ * A simple SQL read-eval-print-loop
+ * @param {import("sql.js").Database} db
+ */
+function SQLRepl({ db }) {
+  const [error, setError] = useState(null);
+  const [results, setResults] = useState([]);
 
-  render() {
-    let { db, err, results } = this.state;
-    if (!db) return <pre>Loading...</pre>;
-    return (
-      <div className="App">
+  function exec(sql) {
+    try {
+      // The sql is executed synchronously on the UI thread.
+      // You may want to use a web worker here instead
+      setResults(db.exec(sql)); // an array of objects is returned
+      setError(null);
+    } catch (err) {
+      // exec throws an error when the SQL statement is invalid
+      setError(err);
+      setResults([]);
+    }
+  }
 
-        <h1>React SQL interpreter</h1>
+  return (
+    <div className="App">
+      <h1>React SQL interpreter</h1>
 
-        <textarea
-          onChange={e => this.exec(e.target.value)}
-          placeholder="Enter some SQL. No inspiration ? Try “select sqlite_version()”"
-        ></textarea>
+      <textarea
+        onChange={(e) => exec(e.target.value)}
+        placeholder="Enter some SQL. No inspiration ? Try “select sqlite_version()”"
+      ></textarea>
 
-        <pre className="error">{(err || "").toString()}</pre>
+      <pre className="error">{(error || "").toString()}</pre>
 
-        <pre>{results
-          ? results.map(this.renderResult) // results contains one object per select statement in the query
-          : ""
-        }</pre>
+      <pre>
+        {
+          // results contains one object per select statement in the query
+          results.map(({ columns, values }, i) => (
+            <ResultsTable key={i} columns={columns} values={values} />
+          ))
+        }
+      </pre>
+    </div>
+  );
+}
 
-      </div>
-    );
-  }
+/**
+ * Renders a single value of the array returned by db.exec(...) as a table
+ */
+function ResultsTable({ columns, values }) {
+  return (
+    <table>
+      <thead>
+        <tr>
+          {columns.map((columnName) => (
+            <td>{columnName}</td>
+          ))}
+        </tr>
+      </thead>
 
+      <tbody>
+        {
+          // values is an array of arrays representing the results of the query
+          values.map((row) => (
+            <tr>
+              {row.map((value) => (
+                <td>{value}</td>
+              ))}
+            </tr>
+          ))
+        }
+      </tbody>
+    </table>
+  );
 }

src/styles.css

@@ -3,33 +3,34 @@
   font-size: 1.5em;
 }
 
-textarea{
+textarea {
   font-size: 1.1em;
   width: 70%;
   display: block;
-  margin:auto;
+  margin: auto;
 }
 
-table{
-  border: 1px solid #1C6EA4;
-  background-color: #EEEEEE;
+table {
+  border: 1px solid #1c6ea4;
+  background-color: #eeeeee;
   width: 40%;
   margin: 1.5em auto;
   text-align: left;
   border-collapse: collapse;
   text-align: right;
 }
 
-thead{
+thead {
   font-weight: bold;
   text-align: center;
   border: 2px solid #999;
 }
 
-th, td{
+th,
+td {
   border: 1px solid #aaa;
 }
 
-.error{
-  color:#922;
-}
+.error {
+  color: #922;
+}