about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/components
diff options
context:
space:
mode:
authorClaire <claire.github-309c@sitedethib.com>2021-02-28 01:01:34 +0100
committerClaire <claire.github-309c@sitedethib.com>2021-03-02 12:26:12 +0100
commit974ddc28a38a164b43b2edc6deebdf3e0a6a7eed (patch)
tree073c0e29cec47138e0a148ef778cddd64da502fd /app/javascript/flavours/glitch/components
parentd8fdbb054e30f6e8e505bce63e5f150bf117cd8e (diff)
[Glitch] Fix WebUI crashing when SVG support is disabled
Port 0635c8760dfdfeb3d763f1d1ae6cf5a208b29b6c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/components')
-rw-r--r--app/javascript/flavours/glitch/components/hashtag.js49
1 files changed, 38 insertions, 11 deletions
diff --git a/app/javascript/flavours/glitch/components/hashtag.js b/app/javascript/flavours/glitch/components/hashtag.js
index 639d87a1e..24c595ed7 100644
--- 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>
 );