Fix deprecated React patterns ahead of React 17 upgrade

src/components/FilterBar.js

@@ -44,15 +44,15 @@ export default class FilterBar extends Component {
   constructor(props) {
     super(props)
     this.onChange = this.onChange.bind(this)
-    this.typeahead = React.createRef()
+    this.typeahead = null
   }
 
   onChange(values) {
     const { onChange, clearOnChange, onClear } = this.props
     if (values.length) {
       onChange && onChange(values[0].name)
       // timing hack to work around https://github.com/ericgio/react-bootstrap-typeahead/issues/211
-      clearOnChange && setTimeout(() => this.refs.typeahead && this.refs.typeahead.getInstance().clear(), 0)
+      clearOnChange && setTimeout(() => this.typeahead && this.typeahead.getInstance().clear(), 0)
     } else {
       onClear && onClear()
     }

src/components/Navigation/Ui/SavePopUp.js

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react'
-import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
 import { ControlLabel, Modal, FormGroup, FormControl, Button } from 'react-bootstrap'
 import DropFileOrText from './DropFileOrText'
@@ -28,7 +27,6 @@ export default class SavePopUp extends Component {
 
   constructor(props) {
     super(props)
-    this.templateInputRef = React.createRef()
     this.state = { renderer: 'text', template: defaultNoticeTemplate }
   }
 
@@ -58,8 +56,6 @@ export default class SavePopUp extends Component {
   }
 
   onTemplate = template => {
-    const textarea = ReactDOM.findDOMNode(this.templateInputRef.current)
-    if (textarea) textarea.value = template
     this.setState({ ...this.state, template })
   }
 
@@ -85,11 +81,10 @@ export default class SavePopUp extends Component {
               <ControlLabel>Template</ControlLabel>
               <DropFileOrText onLoad={this.onTemplate}>
                 <FormControl
-                  ref={this.templateInputRef}
                   componentClass="textarea"
                   placeholder="Provide a Handlebars template (see https://handlebarsjs.com). Paste the template text or drag and drop a template file here."
                   onChange={e => this.setState({ ...this.state, template: e.target.value })}
-                  defaultValue={this.state.template}
+                  value={this.state.template}
                   rows="6"
                 />
               </DropFileOrText>

src/components/PageCurate.js

@@ -17,6 +17,8 @@ class PageCurate extends Component {
   constructor(props) {
     super(props)
     this.state = {}
+    this.contributeModalRef = React.createRef()
+    this.proposeModalRef = React.createRef()
     this.doContribute = this.doContribute.bind(this)
     this.doPropose = this.doPropose.bind(this)
     this.doPromptContribute = this.doPromptContribute.bind(this)
@@ -84,11 +86,11 @@ class PageCurate extends Component {
     const { entitySpec } = this.state
     if (entitySpec.pr) return this.doMerge(entitySpec)
     this.setState({ ...this.state, proposal })
-    this.refs.contributeModal.open()
+    this.contributeModalRef.current.open()
   }
 
   doPromptPropose(proposal) {
-    this.refs.proposeModal.open()
+    this.proposeModalRef.current.open()
   }
 
   filterChanged(newFilter) {
@@ -157,8 +159,8 @@ class PageCurate extends Component {
     const searchWidth = isCurator ? 7 : 9
     return (
       <Grid className="main-container">
-        <ContributePrompt ref="contributeModal" actionHandler={this.doContribute} />
-        <ProposePrompt ref="proposeModal" actionHandler={this.doPropose} />
+        <ContributePrompt ref={this.contributeModalRef} actionHandler={this.doContribute} />
+        <ProposePrompt ref={this.proposeModalRef} actionHandler={this.doPropose} />
         <Row className="show-grid spacer">
           <Col md={searchWidth} mdOffset={1}>
             <FilterBar