modernize

- update react - get rid of componentWillReceiveProps - add service worker and fix pwa issues
6 years ago · 18b44fbe21
7 changed files with 9741 additions and 7820 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -6,10 +6,10 @@
    "copy-to-clipboard": "^3.0.8",
    "load-script": "^1.0.0",
    "pressure": "^2.1.2",
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
    "react-lazyload": "latest",
-    "react-scripts": "1.1.4",
+    "react-scripts": "^3.1.1",
    "react-timeago": "^4.1.9"
  },
  "scripts": {
@ -18,5 +18,17 @@
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
-  "homepage": "."
+  "homepage": ".",
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }
--- a/public/index.html
+++ b/public/index.html
@ -11,6 +11,7 @@
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon/256.png">
    <link rel="manifest" href="%PUBLIC_URL%/static/manifest.json">
+    <meta name="theme-color" content="#333333"/>

    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/static/favicon/180.png" />
@ -21,6 +22,7 @@
    <link rel="apple-touch-startup-image" href="%PUBLIC_URL%/static/splash/1242x2208.png" media="(device-width: 414px) and (-webkit-device-pixel-ratio: 3)"/>
    <link rel="apple-touch-startup-image" href="%PUBLIC_URL%/static/splash/1668x2388.png" media="(device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
    <link rel="apple-touch-startup-image" href="%PUBLIC_URL%/static/splash/2388x1668.png" media="(device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
+
    <title>P大树洞</title>
 </head>
 <body>
--- a/public/static/manifest.json
+++ b/public/static/manifest.json
@ -15,6 +15,6 @@
  ],
  "start_url": "../",
  "display": "standalone",
-  "theme_color": "#112244",
-  "background_color": "#112244"
+  "theme_color": "#333333",
+  "background_color": "#333333"
 }
--- a/src/Flows.js
+++ b/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={[]}
--- a/src/Sidebar.js
+++ b/src/Sidebar.js
@ -7,11 +7,13 @@ export class Sidebar extends PureComponent {
        this.sidebar_ref=React.createRef();
    }

-    componentWillReceiveProps(nextProps) {
+    componentDidUpdate(nextProps) {
+        if(this.props.content!==nextProps.content) {
            //console.log('sidebar top');
            if(this.sidebar_ref.current)
                this.sidebar_ref.current.scrollTop=0;
        }
+    }

    render() {
        return (
--- a/src/index.js
+++ b/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();