add license header, descriptive comment and change to class

src/components/views/elements/Spoiler.js

@@ -1,15 +1,28 @@
-'use strict';
+/*
+ Copyright 2019 Sorunome
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
 
 import React from 'react';
 
-module.exports = React.createClass({
+export default class Spoiler extends React.Component {
-    displayName: 'Spoiler',
+    constructor(props) {
-
+        super(props);
-    getInitialState() {
+        this.state = {
-        return {
             visible: false,
         };
-    },
+    }
 
     toggleVisible(e) {
         if (!this.state.visible) {
@@ -18,12 +31,15 @@ module.exports = React.createClass({
             e.stopPropagation();
         }
         this.setState({ visible: !this.state.visible });
-    },
+    }
 
-    render: function() {
+    render() {
         const reason = this.props.reason ? (
             <span className="mx_EventTile_spoiler_reason">{"(" + this.props.reason + ")"}</span>
         ) : null;
+        // react doesn't allow appending a DOM node as child.
+        // as such, we pass the this.props.contentHtml instead and then set the raw
+        // HTML content. This is secure as the contents have already been parsed previously
         return (
             <span className={"mx_EventTile_spoiler" + (this.state.visible ? " visible" : "")} onClick={this.toggleVisible.bind(this)}>
                 { reason }
@@ -32,4 +48,4 @@ module.exports = React.createClass({
             </span>
         );
     }
-})
+}