From 2067cd60d0e791176ee0dcd6394273c45bc92846 Mon Sep 17 00:00:00 2001
From: Johny Ho <johny@thoughtbot.com>
Date: Sun, 17 Sep 2023 11:12:58 -0400
Subject: [PATCH] Add Inline Svg

For comparison [see this commit][commit]

With Superglue, we can use the JS equivalent of the popular `inline_svg` gem to
achieve the same convenience of extracting an svg element for the "close modal"

[commit]: https://github.com/seanpdoyle/select-your-own-seat/commit/c4ec5bc18f4325a891b1b4cb4bee2c5c
---
 app/assets/images/icons/x-circle.svg | 15 +++++++++++++++
 app/components/SeatDialog.js         | 24 ++++--------------------
 package.json                         |  7 ++++---
 yarn.lock                            | 12 ++++++++++++
 4 files changed, 35 insertions(+), 23 deletions(-)
 create mode 100644 app/assets/images/icons/x-circle.svg

diff --git a/app/assets/images/icons/x-circle.svg b/app/assets/images/icons/x-circle.svg
new file mode 100644
index 00000000..aa8969eb
--- /dev/null
+++ b/app/assets/images/icons/x-circle.svg
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10"></circle>
+  <line x1="15" y1="9" x2="9" y2="15"></line>
+  <line x1="9" y1="9" x2="15" y2="15"></line>
+</svg>
diff --git a/app/components/SeatDialog.js b/app/components/SeatDialog.js
index 3f8b1f2e..0fe12a58 100644
--- a/app/components/SeatDialog.js
+++ b/app/components/SeatDialog.js
@@ -1,5 +1,7 @@
 import React from 'react'
 import Dialog from './Dialog'
+import SVG from 'react-inlinesvg';
+import closeSvg from '../assets/images/icons/x-circle.svg'
 
 export default class extends React.Component {
   render () {
@@ -22,26 +24,8 @@ export default class extends React.Component {
           </h2>
 
           <form method="dialog">
-            <button
-              className="syos-button syos-button--transparent"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"
-                className="syos-icon syos-icon--large"
-                title="Close modal"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <circle cx="12" cy="12" r="10"></circle>
-                <line x1="15" y1="9" x2="9" y2="15"></line>
-                <line x1="9" y1="9" x2="15" y2="15"></line>
-              </svg>
+            <button className="syos-button syos-button--transparent">
+              <SVG src={ closeSvg } />
             </button>
           </form>
         </header>
diff --git a/package.json b/package.json
index af7ce99d..0b322f20 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,13 @@
     "history": "^5.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.1.2",
-    "sass": "^1.69.0"
+    "sass": "^1.69.0",
+    "react-inlinesvg": "^4.0.3",
+    "react-redux": "^8.1.2"
   },
   "version": "0.1.0",
   "scripts": {
-    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --loader:.js=jsx --public-path=/assets",
+    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --loader:.js=jsx --loader:.svg=dataurl --public-path=/assets",
     "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 24da2dbf..579293fc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -360,6 +360,18 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-from-dom@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/react-from-dom/-/react-from-dom-0.6.2.tgz#9da903a508c91c013b55afcd59348b8b0a39bdb4"
+  integrity sha512-qvWWTL/4xw4k/Dywd41RBpLQUSq97csuv15qrxN+izNeLYlD9wn5W8LspbfYe5CWbaSdkZ72BsaYBPQf2x4VbQ==
+
+react-inlinesvg@^4.0.3:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/react-inlinesvg/-/react-inlinesvg-4.0.5.tgz#cbabe18e790c47f5cadca9ce974e3e8256c1c84f"
+  integrity sha512-gur6KP4la70Xt9Ku6kIRAiwPOsMxYGTFIJ1roG1igS9oZLvES72VtUfBEdaiZZfkej3jugQsVyq/mJkYr4OObQ==
+  dependencies:
+    react-from-dom "^0.6.2"
+
 react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"