From fa4541e85c0ca17ba58a1096967b8775e50e4c78 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Wed, 29 May 2019 08:27:20 -0400
Subject: [PATCH] Adding dynamic removal of dynamically loaded scripts.

---
 src/components/cards/cards.jsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index 41682cc8f..7b84ee732 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -90,11 +90,13 @@ class VideoStep extends React.Component {
         const script = document.createElement('script');
         script.src = `https://fast.wistia.com/embed/medias/${this.props.video}.jsonp`;
         script.async = true;
+        script.setAttribute('id', 'wistia-video-content');
         document.body.appendChild(script);
 
         const script2 = document.createElement('script');
         script2.src = 'https://fast.wistia.com/assets/external/E-v1.js';
         script2.async = true;
+        script2.setAttribute('id', 'wistia-video-api');
         document.body.appendChild(script2);
     }
     componentDidUpdate () {
@@ -103,18 +105,26 @@ class VideoStep extends React.Component {
             video.pause();
         }
     }
+    componentWillUnmount () {
+        const script = document.getElementById('wistia-video-content');
+        script.parentNode.removeChild(script);
+
+        const script2 = document.getElementById('wistia-video-api');
+        script2.parentNode.removeChild(script2);
+    }
     render () {
         return (
             // Video step needs to know if the card is being dragged to cover the video
             // so that the mouseup is not swallowed by the iframe.
             <div className={styles.stepVideo}>
-                {this.props.dragging ? (
-                    <div className={styles.videoCover} />
-                ) : null}
                 <div
                     className={`wistia_embed wistia_async_${this.props.video}`}
                     style={{height: `257px`, width: `466px`}}
                 >
+                    {//this.props.dragging ? (
+                        //<div className={styles.videoCover} />
+                        //) : null
+                    }
                     &nbsp;
                 </div>
             </div>