From 028dfcbe8410ae9c7c1ccf2d3c9c2736d2f68da6 Mon Sep 17 00:00:00 2001
From: naeglinghaff <kate.o.haffenden@gmail.com>
Date: Sun, 14 Jun 2020 11:25:30 +0100
Subject: [PATCH 1/3] Added spinner component to html page

---
 public/base.html  |  5 +++++
 public/spinner.js | 13 +++++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 public/spinner.js

diff --git a/public/base.html b/public/base.html
index ca5eda1..50d1754 100644
--- a/public/base.html
+++ b/public/base.html
@@ -4,6 +4,10 @@
     <meta charset="utf-8">
       <title>Algorithm Timer</title>
       <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
+      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
+      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
+      <script src="spinner.js" type="text/babel"></script>
   </head>
   <body>
     <h1> Time your algorithm </h1>
@@ -19,6 +23,7 @@ <h1> Time your algorithm </h1>
         <option value="customDuplicatesLinear">customDuplicatesLinear</option>
       </select>
     <div id="message"></div>
+    <div id="spinner"></div>
     <canvas id="chart" width="500"></canvas>
   </body>
   <footer>
diff --git a/public/spinner.js b/public/spinner.js
new file mode 100644
index 0000000..e4b195b
--- /dev/null
+++ b/public/spinner.js
@@ -0,0 +1,13 @@
+function Spinner() {
+
+  const message = "message";
+
+  return (
+    <p>{message}</p>
+  );
+}
+
+ReactDOM.render(
+  <Spinner />,
+  document.getElementById('spinner')
+);

From 11bb4bc2a16efed9e4f602e2d8667171a14d8a39 Mon Sep 17 00:00:00 2001
From: naeglinghaff <kate.o.haffenden@gmail.com>
Date: Sun, 14 Jun 2020 11:44:04 +0100
Subject: [PATCH 2/3] Added babel watch to spinner react component,
 preprocessed file now rendered from public directory

---
 package.json          |  2 ++
 public/base.html      |  2 +-
 public/spinner.js     | 13 ++++++-------
 public/src/spinner.js | 13 +++++++++++++
 4 files changed, 22 insertions(+), 8 deletions(-)
 create mode 100644 public/src/spinner.js

diff --git a/package.json b/package.json
index 5633633..51e1b8f 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
   },
   "homepage": "https://github.com/naeglinghaff/algorithm_timer#readme",
   "dependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-preset-react-app": "^3.1.2",
     "express": "^4.17.1",
     "request": "^2.88.2"
   },
diff --git a/public/base.html b/public/base.html
index 50d1754..319ac98 100644
--- a/public/base.html
+++ b/public/base.html
@@ -7,7 +7,6 @@
       <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
       <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
       <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
-      <script src="spinner.js" type="text/babel"></script>
   </head>
   <body>
     <h1> Time your algorithm </h1>
@@ -25,6 +24,7 @@ <h1> Time your algorithm </h1>
     <div id="message"></div>
     <div id="spinner"></div>
     <canvas id="chart" width="500"></canvas>
+    <script src="spinner.js"></script>
   </body>
   <footer>
     <script src="./chart_mapper.js"></script>
diff --git a/public/spinner.js b/public/spinner.js
index e4b195b..2e35bbe 100644
--- a/public/spinner.js
+++ b/public/spinner.js
@@ -1,13 +1,12 @@
 function Spinner() {
 
-  const message = "message";
+  var message = "message";
 
-  return (
-    <p>{message}</p>
+  return React.createElement(
+    "p",
+    null,
+    message
   );
 }
 
-ReactDOM.render(
-  <Spinner />,
-  document.getElementById('spinner')
-);
+ReactDOM.render(React.createElement(Spinner, null), document.getElementById('spinner'));
\ No newline at end of file
diff --git a/public/src/spinner.js b/public/src/spinner.js
new file mode 100644
index 0000000..e4b195b
--- /dev/null
+++ b/public/src/spinner.js
@@ -0,0 +1,13 @@
+function Spinner() {
+
+  const message = "message";
+
+  return (
+    <p>{message}</p>
+  );
+}
+
+ReactDOM.render(
+  <Spinner />,
+  document.getElementById('spinner')
+);

From 62fccc410f7f616c24b28968923fb6ebc8fd070e Mon Sep 17 00:00:00 2001
From: naeglinghaff <kate.o.haffenden@gmail.com>
Date: Fri, 19 Jun 2020 09:43:19 +0100
Subject: [PATCH 3/3] package updates

---
 package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/package.json b/package.json
index 51e1b8f..2710631 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,9 @@
     "babel-cli": "^6.26.0",
     "babel-preset-react-app": "^3.1.2",
     "express": "^4.17.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-loader-spinner": "^3.1.14",
     "request": "^2.88.2"
   },
   "devDependencies": {
