Merge pull request #4846 from matrix-org/t3chguy/notifications0

Fix Room Custom Sounds regression and make ProgressBar relevant again

src/components/views/elements/ProgressBar.js

@@ -1,39 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-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";
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-
-export default createReactClass({
-    displayName: 'ProgressBar',
-    propTypes: {
-        value: PropTypes.number,
-        max: PropTypes.number,
-    },
-
-    render: function() {
-        // Would use an HTML5 progress tag but if that doesn't animate if you
-        // use the HTML attributes rather than styles
-        const progressStyle = {
-            width: ((this.props.value / this.props.max) * 100)+"%",
-        };
-        return (
-            <div className="mx_ProgressBar"><div className="mx_ProgressBar_fill" style={progressStyle}></div></div>
-        );
-    },
-});

src/components/views/elements/ProgressBar.tsx

@@ -0,0 +1,28 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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";
+
+interface IProps {
+    value: number;
+    max: number;
+}
+
+const ProgressBar: React.FC<IProps> = ({value, max}) => {
+    return <progress className="mx_ProgressBar" max={max} value={value} />;
+};
+
+export default ProgressBar;

src/components/views/elements/StyledRadioGroup.tsx

@@ -41,9 +41,8 @@ function StyledRadioGroup<T extends string>({name, definitions, value, className
     };
 
     return <React.Fragment>
-        {definitions.map(d => <React.Fragment>
+        {definitions.map(d => <React.Fragment key={d.value}>
             <StyledRadioButton
-                key={d.value}
                 className={classNames(className, d.className)}
                 onChange={_onChange}
                 checked={d.value === value}

src/components/views/settings/tabs/room/NotificationSettingsTab.js

@@ -28,6 +28,8 @@ export default class NotificationsSettingsTab extends React.Component {
         roomId: PropTypes.string.isRequired,
     };
 
+    _soundUpload = createRef();
+
     constructor() {
         super();
 
@@ -44,8 +46,6 @@ export default class NotificationsSettingsTab extends React.Component {
             return;
         }
         this.setState({currentSound: soundData.name || soundData.url});
-
-        this._soundUpload = createRef();
     }
 
     async _triggerUploader(e) {