Skip to content

Commit

Permalink
Merge pull request #17 from LoveLiveSunshine/1.x-dev
Browse files Browse the repository at this point in the history 
Optimization
  • Loading branch information
@kokororin
kokororin committed Jun 24, 2018
2 parents 76325fc + 91a674f commit 5ff8814
Show file tree
Hide file tree
Showing 12 changed files with 144 additions and 160 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
"autobind-decorator": "^1.4.1",
"classlist-polyfill": "^1.2.0",
"classnames": "^2.2.5",
"inobounce": "^0.1.6",
"jszip": "^3.1.4",
"material-design-icons": "^3.0.1",
"material-design-lite": "^1.2.1",
Expand Down
122 changes: 83 additions & 39 deletions src/components/Item.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,28 @@ export default class Item extends React.Component {

constructor(props) {
super(props);

this.state = {
width: 0,
height: 0,
hasLoaded: false
};
}

componentDidMount() {
this.wait = setInterval(() => {
const width = this.imgRef.naturalWidth;
const height = this.imgRef.naturalHeight;
const offsetWidth = this.wrapper.offsetWidth;
if (width && height) {
this.setState({
width: offsetWidth,
// eslint-disable-next-line prettier/prettier
height: offsetWidth * height / width
});
clearInterval(this.wait);
}
}, 30);
}

onImageMouseMove(event) {
Expand All @@ -27,11 +49,20 @@ export default class Item extends React.Component {
}
}

@autobind
onImageLoad() {
this.setState({
hasLoaded: true
});
this.wait && clearInterval(this.wait);
}

@autobind
onImageError() {
this.imgRef.src = require('@/images/img-fail.jpg');
typeof this.props.masonryRef !== 'undefined' &&
this.props.masonryRef.performLayout();
this.wait && clearInterval(this.wait);
}

renderRankText() {
Expand All @@ -42,12 +73,14 @@ export default class Item extends React.Component {
</span>
);
}
let icon;
if (this.props.item.previous_rank < this.props.item.rank) {
icon = <Icon styleName="trending_down" name="trending_down" />;
} else {
icon = <Icon styleName="trending_up" name="trending_up" />;
}

const icon =
this.props.item.previous_rank < this.props.item.rank ? (
<Icon styleName="trending-down" name="trending_down" />
) : (
<Icon styleName="trending-up" name="trending_up" />
);

return (
<span styleName="rank-text-outer">
{icon}
Expand All @@ -60,50 +93,61 @@ export default class Item extends React.Component {
}

render() {
return this.props.item.hasOwnProperty('work') ? (
const isRank = this.props.item.hasOwnProperty('work');
return (
<div styleName="cell" onMouseMove={this.onImageMouseMove}>
<Link styleName="link" to={`/illust/${this.props.item.work.id}`}>
<div styleName="image-wrapper">
<Link
styleName="link"
to={`/illust/${
isRank ? this.props.item.work.id : this.props.item.id
}`}>
<div ref={ref => (this.wrapper = ref)} styleName="image-wrapper">
<img
ref={ref => (this.imgRef = ref)}
src={this.props.item.work.image_urls.px_480mw}
onError={this.onImageError}
src={require('@/images/img-placeholder.gif')}
width={this.state.width}
height={this.state.height}
style={{
display: this.state.hasLoaded ? 'none' : 'block'
}}
/>
</div>
<div styleName="title">
<span>{this.props.item.work.title}</span>
</div>
<div styleName="meta">
<span styleName="rank-num">
<FormattedMessage
id="x rank"
values={{ rank: this.props.item.rank }}
/>
</span>
<span>{this.renderRankText()}</span>
</div>
</Link>
</div>
) : (
<div styleName="cell" onMouseMove={this.onImageMouseMove}>
<Link styleName="link" to={`/illust/${this.props.item.id}`}>
<div styleName="image-wrapper">
<img
style={{
display: this.state.hasLoaded ? 'block' : 'none'
}}
ref={ref => (this.imgRef = ref)}
src={this.props.item.image_urls.px_480mw}
src={
isRank
? this.props.item.work.image_urls.px_480mw
: this.props.item.image_urls.px_480mw
}
onLoad={this.onImageLoad}
onError={this.onImageError}
/>
</div>
<div styleName="title">
<span>{this.props.item.title}</span>
</div>
<div styleName="meta">
<span styleName="count">
<Icon name="star" />
{this.props.item.stats.favorited_count.public +
this.props.item.stats.favorited_count.private}
<span>
{isRank ? this.props.item.work.title : this.props.item.title}
</span>
</div>
{isRank ? (
<div styleName="meta">
<span styleName="rank-num">
<FormattedMessage
id="x rank"
values={{ rank: this.props.item.rank }}
/>
</span>
<span>{this.renderRankText()}</span>
</div>
) : (
<div styleName="meta">
<span styleName="count">
<Icon name="star" />
{this.props.item.stats.favorited_count.public +
this.props.item.stats.favorited_count.private}
</span>
</div>
)}
</Link>
</div>
);
Expand Down
25 changes: 13 additions & 12 deletions src/components/Login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,22 @@ import Icon from 'react-mdl/lib/Icon';
import { FormattedMessage, injectIntl } from 'react-intl';
import moment from '@/utils/moment';
import Storage from '@/utils/Storage';
import withRef from '@/utils/withRef';

class Login extends React.Component {
@injectIntl
@CSSModules(styles, { allowMultiple: true })
export default class Login extends React.Component {
static propTypes = {
onRef: PropTypes.func,
onLogoutClick: PropTypes.func,
onLogoutClick: PropTypes.func,
isSubmitting: PropTypes.bool,
authData: PropTypes.object
};

static defaultProps = {
onRef() {}
};

constructor(props) {
super(props);

Expand All @@ -36,6 +42,7 @@ class Login extends React.Component {
}

componentDidMount() {
this.props.onRef(this);
const authData = Storage.get('auth');
this.setState({
authData
Expand Down Expand Up @@ -86,7 +93,7 @@ class Login extends React.Component {
this.props.authData.expires_at > moment().unix()
) {
return (
<div>
<React.Fragment>
<div styleName="avatar">
<span styleName="name">
<FormattedMessage id="Nickname" /> 「{
Expand All @@ -99,11 +106,11 @@ class Login extends React.Component {
<FormattedMessage id="Logout" />
</Button>
</div>
</div>
</React.Fragment>
);
}
return (
<div>
<React.Fragment>
<Textfield
onChange={event => this.setUsername(event.target.value)}
value={this.getUsername()}
Expand Down Expand Up @@ -139,7 +146,7 @@ class Login extends React.Component {
/>
</Button>
</div>
</div>
</React.Fragment>
);
}

Expand All @@ -161,9 +168,3 @@ class Login extends React.Component {
);
}
}

export default withRef(
// eslint-disable-next-line babel/new-cap
CSSModules(Login, styles, { allowMultiple: true }),
injectIntl
);
4 changes: 2 additions & 2 deletions src/containers/IllustContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export default class IllustContainer extends React.Component {
onFavouriteClick(event) {
const authData = Storage.get('auth');
if (authData === null || authData.expires_at < moment().unix()) {
return this.loginRef.getRef().open();
return this.loginRef.open();
}
const target = event.target,
body = document.body;
Expand Down Expand Up @@ -307,7 +307,7 @@ export default class IllustContainer extends React.Component {
<Loading isHidden={!this.props.illust.isFetchingComments} />
</div>
</InfiniteScroll>
<LoginContainer ref={ref => (this.loginRef = ref)} />
<LoginContainer onRef={ref => (this.loginRef = ref)} />
<Alert ref={ref => (this.alertRef = ref)} />
</div>
);
Expand Down
41 changes: 23 additions & 18 deletions src/containers/LoginContainer.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,25 @@
import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl } from 'react-intl';

import Alert from '@/components/Alert';
import Login from '@/components/Login';
import cachedFetch from '@/utils/cachedFetch';
import moment from '@/utils/moment';
import Storage from '@/utils/Storage';
import withRef from '@/utils/withRef';

import config from '@/config';

class LoginContainer extends React.Component {
@injectIntl
export default class LoginContainer extends React.Component {
static propTypes = {
onRef: PropTypes.func
};

static defaultProps = {
onRef() {}
};

constructor(props) {
super(props);

Expand All @@ -21,6 +30,7 @@ class LoginContainer extends React.Component {
}

componentDidMount() {
this.props.onRef(this);
const authData = Storage.get('auth');
this.setState({
authData
Expand All @@ -35,25 +45,22 @@ class LoginContainer extends React.Component {
@autobind
onKeydown(event) {
if (event.keyCode === 27) {
this.loginRef.getRef().close();
this.loginRef.close();
}

if (
this.loginRef.getRef().state.isHidden === false &&
event.keyCode === 13
) {
if (this.loginRef.state.isHidden === false && event.keyCode === 13) {
this.onLoginClick();
}
}

@autobind
open() {
this.loginRef.getRef().open();
this.loginRef.open();
}

@autobind
close() {
this.loginRef.getRef().close();
this.loginRef.close();
}

@autobind
Expand All @@ -70,8 +77,8 @@ class LoginContainer extends React.Component {
);
}

const username = this.loginRef.getRef().getUsername();
const password = this.loginRef.getRef().getPassword();
const username = this.loginRef.getUsername();
const password = this.loginRef.getPassword();

if (username === '') {
return this.alertRef.setContent(
Expand Down Expand Up @@ -115,8 +122,8 @@ class LoginContainer extends React.Component {
});
setTimeout(() => {
this.close();
this.loginRef.getRef().setUsername('');
this.loginRef.getRef().setPassword('');
this.loginRef.setUsername('');
this.loginRef.setPassword('');
}, 1500);
} else {
this.alertRef.setContent(data.message);
Expand Down Expand Up @@ -147,18 +154,16 @@ class LoginContainer extends React.Component {

render() {
return (
<div>
<React.Fragment>
<Login
ref={ref => (this.loginRef = ref)}
onRef={ref => (this.loginRef = ref)}
onLoginClick={this.onLoginClick}
onLogoutClick={this.onLogoutClick}
isSubmitting={this.state.isSubmitting}
authData={this.state.authData}
/>
<Alert ref={ref => (this.alertRef = ref)} />
</div>
</React.Fragment>
);
}
}

export default withRef(LoginContainer, injectIntl);
Loading

0 comments on commit 5ff8814

Please sign in to comment.