modernize

- update react
- get rid of componentWillReceiveProps
- add service worker and fix pwa issues

src/Flows.js

@@ -44,7 +44,7 @@ function load_single_meta(show_sidebar,token,parents) {
                 let [single,replies]=res;
                 show_sidebar(
                     title_elem,
-                    <FlowSidebar
+                    <FlowSidebar key={single.data.pid}
                         info={single.data} replies={replies.data} attention={replies.attention}
                         token={token} show_sidebar={show_sidebar} color_picker={color_picker}
                         deletion_detect={localStorage['DELETION_DETECT']==='on'} parents={parents}
@@ -195,7 +195,7 @@ class FlowSidebar extends PureComponent {
         this.reply_ref=React.createRef();
     }
 
-    componentWillReceiveProps(nextProps) {
+    /*componentWillReceiveProps(nextProps) {
         this.setState({
             attention: nextProps.attention,
             info: nextProps.info,
@@ -204,7 +204,7 @@ class FlowSidebar extends PureComponent {
         });
         this.color_picker=nextProps.color_picker;
         this.syncState=nextProps.sync_state||(()=>{});
-    }
+    }*/ // refactored to use key instead
 
     set_variant(cid,variant) {
         this.setState((prev)=>{
@@ -459,7 +459,7 @@ class FlowItemRow extends PureComponent {
     show_sidebar() {
         this.props.show_sidebar(
             <FlowSidebarTitle pid={this.state.info.pid} parents={[]} show_sidebar={this.props.show_sidebar} token={this.props.token} />,
-            <FlowSidebar
+            <FlowSidebar key={this.state.info.pid}
                 info={this.state.info} replies={this.state.replies} attention={this.state.attention} sync_state={this.setState.bind(this)}
                 token={this.props.token} show_sidebar={this.props.show_sidebar} color_picker={this.color_picker}
                 deletion_detect={this.props.deletion_detect} parents={[]}

src/Sidebar.js

@@ -7,10 +7,12 @@ export class Sidebar extends PureComponent {
         this.sidebar_ref=React.createRef();
     }
 
-    componentWillReceiveProps(nextProps) {
-        //console.log('sidebar top');
-        if(this.sidebar_ref.current)
-            this.sidebar_ref.current.scrollTop=0;
+    componentDidUpdate(nextProps) {
+        if(this.props.content!==nextProps.content) {
+            //console.log('sidebar top');
+            if(this.sidebar_ref.current)
+                this.sidebar_ref.current.scrollTop=0;
+        }
     }
 
     render() {

src/index.js

@@ -3,9 +3,9 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 //import {elevate} from './infrastructure/elevator';
-//import registerServiceWorker from './registerServiceWorker';
+import registerServiceWorker from './registerServiceWorker';
 
 //elevate();
 
 ReactDOM.render(<App />, document.getElementById('root'));
-//registerServiceWorker();
+registerServiceWorker();