newthuhole/hole_thu_frontend
4
6
Fork 2
Code Issues 8 Pull Requests Projects Releases Wiki Activity

modernize

Browse Source 
- update react
- get rid of componentWillReceiveProps
- add service worker and fix pwa issues
This commit is contained in:
xmcp
2019-08-20 00:44:28 +08:00
parent 3aa1881c55
commit 18b44fbe21
7 changed files with 9169 additions and 7248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17475
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

20
package.json
View File

@@ -6,10 +6,10 @@
"copy-to-clipboard": "^3.0.8", "copy-to-clipboard": "^3.0.8",
"load-script": "^1.0.0", "load-script": "^1.0.0",
"pressure": "^2.1.2", "pressure": "^2.1.2",
"react": "^16.4.2", "react": "^16.9.0",
"react-dom": "^16.4.2", "react-dom": "^16.9.0",
"react-lazyload": "latest", "react-lazyload": "latest",
"react-scripts": "1.1.4", "react-scripts": "^3.1.1",
"react-timeago": "^4.1.9" "react-timeago": "^4.1.9"
}, },
"scripts": { "scripts": {
@@ -18,5 +18,17 @@
"test": "react-scripts test --env=jsdom", "test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject" "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"
]
}
} }

2
public/index.html
View File

@@ -11,6 +11,7 @@
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon/256.png"> <link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon/256.png">
<link rel="manifest" href="%PUBLIC_URL%/static/manifest.json"> <link rel="manifest" href="%PUBLIC_URL%/static/manifest.json">
<meta name="theme-color" content="#333333"/>
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/static/favicon/180.png" /> <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/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/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)"/> <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> <title>P大树洞</title>
</head> </head>
<body> <body>

4
public/static/manifest.json
View File

@@ -15,6 +15,6 @@
], ],
"start_url": "../", "start_url": "../",
"display": "standalone", "display": "standalone",
"theme_color": "#112244", "theme_color": "#333333",
"background_color": "#112244" "background_color": "#333333"
} }

8
src/Flows.js
View File

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

4
src/Sidebar.js
View File

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

4
src/index.js
View File

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