[Glitch] Fix WebUI crashing when SVG support is disabled

Port 0635c8760dfdfeb3d763f1d1ae6cf5a208b29b6c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

diff --git a/app/javascript/flavours/glitch/components/hashtag.js b/app/javascript/flavours/glitch/components/hashtag.js
index 639d87a1e6ec44d9987b61e0d9c9ec354ee4cbe7..24c595ed7fd02cd7df1dd9b7d66af5629d6d36f8 100644 (file)
--- a/app/javascript/flavours/glitch/components/hashtag.js
+++ b/app/javascript/flavours/glitch/components/hashtag.js
@@ -2,10 +2,35 @@
 import React from 'react';
 import { Sparklines, SparklinesCurve } from 'react-sparklines';
 import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Permalink from './permalink';
 import ShortNumber from 'flavours/glitch/components/short_number';
 
+class SilentErrorBoundary extends React.Component {
+
+  static propTypes = {
+    children: PropTypes.node,
+  };
+
+  state = {
+    error: false,
+  };
+
+  componentDidCatch () {
+    this.setState({ error: true });
+  }
+
+  render () {
+    if (this.state.error) {
+      return null;
+    }
+
+    return this.props.children;
+  }
+
+}
+
 /**
  * Used to render counter of how much people are talking about hashtag
  *
@@ -51,17 +76,19 @@ const Hashtag = ({ hashtag }) => (
     </div>
 
     <div className='trends__item__sparkline'>
-      <Sparklines
-        width={50}
-        height={28}
-        data={hashtag
-          .get('history')
-          .reverse()
-          .map((day) => day.get('uses'))
-          .toArray()}
-      >
-        <SparklinesCurve style={{ fill: 'none' }} />
-      </Sparklines>
+      <SilentErrorBoundary>
+        <Sparklines
+          width={50}
+          height={28}
+          data={hashtag
+            .get('history')
+            .reverse()
+            .map((day) => day.get('uses'))
+            .toArray()}
+        >
+          <SparklinesCurve style={{ fill: 'none' }} />
+        </Sparklines>
+      </SilentErrorBoundary>
     </div>
   </div>
 );