From 0e5892147a00a36c63f86563142209d9df817e56 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Sun, 16 Apr 2023 04:04:00 +0200
Subject: [PATCH] General cosmetics.

---
 package.json     |  1 +
 src/InputForm.js | 16 +++++++---------
 src/Maze.js      |  3 ++-
 src/Row.js       |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index ee0252c..25f0948 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
     "react-dom": "^18.0.0"
   },
   "main": "/index.js",
+  "homepage": ".",
   "devDependencies": {
     "react-scripts": "^5.0.1"
   },
diff --git a/src/InputForm.js b/src/InputForm.js
index 221c60a..800a589 100644
--- a/src/InputForm.js
+++ b/src/InputForm.js
@@ -5,19 +5,17 @@ export default function InputForm({handleResult}) {
     const [width, setWidth] = useState(10);
     const [height, setHeight] = useState(10);
     const [id, setId] = useState(null);
-    const [status, setStatus] = useState("typing"); // "typing", "submitting"
+    const [status, setStatus] = useState("ready"); // "ready", "submitting"
 
     if (status === "submitted") {
         return <span/>;
     }
     const callAPI = () => {
-        let url = "https://manuel.friedli.info/labyrinth/create/json?w=" + width +
-            "&h=" + height;
-        if (!!id) {
-            url += "&id=" + id;
-        }
+        handleResult({});
+        const url = `https://manuel.friedli.info/labyrinth/create/json?w=${width}&h=${height}&id=${id || ''}`;
         fetch(url)
             .then(response => response.json())
+            // .then(result => new Promise(resolve => setTimeout(resolve, 600, result)))
             .then(result => {
                 handleResult(result);
                 setId(_ => result.id);
@@ -25,10 +23,10 @@ export default function InputForm({handleResult}) {
             .catch(reason => {
                 console.error("Failed to fetch maze data.", reason);
                 // FIXME alert is not user friendly
-                alert("Failed to fetch maze data: " + reason);
+                alert(`Failed to fetch maze data: ${reason}`);
             })
             .finally(() => {
-                setStatus("typing");
+                setStatus("ready");
             });
     };
     const handleSubmit = (e) => {
@@ -103,7 +101,7 @@ export default function InputForm({handleResult}) {
                     disabled={status === "submitting"
                         || isNaN(width)
                         || isNaN(height)
-                    }>GO!
+                    }>{status === "ready" ? "Create" : "Loading ..."}
             </button>
         </form>
     );
diff --git a/src/Maze.js b/src/Maze.js
index b67e65f..887db13 100644
--- a/src/Maze.js
+++ b/src/Maze.js
@@ -7,7 +7,8 @@ export default function Maze({labyrinth, showSolution = false}) {
         return <div>No valid maze.</div>
     }
 
-    const maze = labyrinth.grid.map((row, rowIdx) => <Row key={"r" + rowIdx} spec={row}
+    const maze = labyrinth.grid.map((row, rowIdx) => <Row key={rowIdx}
+                                                          spec={row}
                                                           index={rowIdx}
                                                           showSolution={showSolution}/>);
     return (
diff --git a/src/Row.js b/src/Row.js
index e52df33..f890f8c 100644
--- a/src/Row.js
+++ b/src/Row.js
@@ -2,7 +2,7 @@ import React from 'react';
 import Cell from "./Cell";
 
 export default function Row({spec, index, showSolution}) {
-    const cells = spec.map((cell, cellIdx) => <Cell key={"c" + index + "-" + cellIdx}
+    const cells = spec.map((cell, cellIdx) => <Cell key={`${index}-${cellIdx}`}
                                                     spec={cell}
                                                     rowIndex={index}
                                                     cellIndex={cellIdx}