Skip to content

Commit

Permalink
refactor: component name
Browse files Browse the repository at this point in the history
  • Loading branch information
@kokororin
kokororin committed Apr 11, 2020
1 parent 96bdbe1 commit ceb7f32
Show file tree
Hide file tree
Showing 7 changed files with 156 additions and 133 deletions.
6 changes: 5 additions & 1 deletion build/webpack.config.dev.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ const config: webpack.Configuration = {
entry: ['@babel/polyfill', 'react-hot-loader/patch', './src/index.tsx'],
cache: true,
devtool: '#eval-source-map',
resolve: {
alias: {
'react-dom': '@hot-loader/react-dom'
}
},
module: {
rules: [
{
Expand All @@ -40,7 +45,6 @@ const config: webpack.Configuration = {
}),
new OpenBrowserPlugin({ url: 'http://localhost:23333' }),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new FriendlyErrorsPlugin()
]
};
Expand Down
5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@
"@types/karma": "^4.4.0",
"@types/mocha": "^7.0.1",
"@types/react": "~16.9.34",
"@types/react-document-title": "^2.0.4",
"@types/react-dom": "~16.9.6",
"@types/react-event-listener": "^0.4.9",
"@types/react-helmet": "^5.0.15",
"@types/react-intl": "^2.0.0",
"@types/react-modal": "^3.10.5",
"@types/react-redux": "^7.1.7",
Expand Down Expand Up @@ -122,6 +122,7 @@
"webpack-merge": "^4.2.2"
},
"dependencies": {
"@hot-loader/react-dom": "~16.9.0",
"@material-ui/core": "^4.9.9",
"@material-ui/icons": "^4.9.1",
"animation-frame": "^0.3.0",
Expand All @@ -142,10 +143,10 @@
"pixiv-app-api": "^1.0.4",
"prop-types": "^15.7.2",
"react": "~16.9.0",
"react-document-title": "^2.0.3",
"react-dom": "~16.9.0",
"react-event-listener": "^0.6.1",
"react-ga": "^2.7.0",
"react-helmet": "^6.0.0",
"react-hot-keys": "^2.5.2",
"react-image": "^2.4.0",
"react-intl": "^2.4.0",
Expand Down
10 changes: 5 additions & 5 deletions src/components/List.tsx → src/components/GalleryList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React from 'react';
import Masonry from 'react-masonry-component';

import Item from '@/components/Item';
import ImageItem from '@/components/ImageItem';

interface IListProps {
interface IGalleryListProps {
items: any[];
}

const List: React.SFC<IListProps> = props => {
const GalleryList: React.SFC<IGalleryListProps> = props => {
const masonryRef = React.useRef<any>(null);
return (
<Masonry
Expand All @@ -20,7 +20,7 @@ const List: React.SFC<IListProps> = props => {
updateOnEachImageLoad={false}>
{props.items.map((elem, index) => {
return (
<Item
<ImageItem
key={index}
index={index}
item={elem}
Expand All @@ -32,4 +32,4 @@ const List: React.SFC<IListProps> = props => {
);
};

export default List;
export default GalleryList;
6 changes: 3 additions & 3 deletions src/components/Item.tsx → src/components/ImageItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,13 +98,13 @@ const useStyles = makeStyles({
}
});

interface IItemProps {
interface IImageItemProps {
item: any;
index: number;
masonry: any;
}

const Item: React.SFC<IItemProps> = props => {
const ImageItem: React.SFC<IImageItemProps> = props => {
const classes = useStyles();
const imgRef = React.useRef<HTMLImageElement>(null);

Expand Down Expand Up @@ -149,4 +149,4 @@ const Item: React.SFC<IItemProps> = props => {
);
};

export default Item;
export default ImageItem;
129 changes: 65 additions & 64 deletions src/containers/GalleryContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@ import {
} from '@material-ui/core';
import { Menu as MenuIcon, Done as DoneIcon } from '@material-ui/icons';
import H from 'history';
import DocumentTitle from 'react-document-title';
import { Helmet } from 'react-helmet';
import { FormattedMessage, injectIntl, InjectedIntl } from 'react-intl';

import config from '@/config';

import * as GalleryActions from '@/actions/gallery';
import { IGalleryAction, TGalleryThunkDispatch } from '@/actions/gallery';
import InfiniteScroll from '@/components/InfiniteScroll';
import GalleryList from '@/components/List';
import GalleryList from '@/components/GalleryList';
import Loading from '@/components/Loading';
import Refresh from '@/components/Refresh';
import Message from '@/components/Message';
Expand Down Expand Up @@ -222,70 +222,71 @@ class GalleryContainer extends React.Component<
const { classes } = this.props;

return (
<DocumentTitle title={config.siteTitle}>
<>
<AppBar position="static" onClick={this.onHeaderClick}>
<Toolbar className={classes.toolbar}>
<IconButton
color="inherit"
onClick={this.onToggleDrawer}
aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography
variant="h6"
color="inherit"
className={classes.toolbarTitle}>
{config.siteTitle}
</Typography>
<div className={classes.toolbarMiddle} />
<SearchInput
onSearch={this.onSearch}
isSearchByPopularity={this.state.isSearchByPopularity}
/>
<LanguageSelector />
<IconButton color="inherit" href={config.projectLink}>
<GithubIcon />
</IconButton>
</Toolbar>
</AppBar>
<Drawer open={this.state.isDrawerOpen} onClose={this.onToggleDrawer}>
<div
tabIndex={0}
role="button"
<>
<Helmet>
<title>{config.siteTitle}</title>
</Helmet>
<AppBar position="static" onClick={this.onHeaderClick}>
<Toolbar className={classes.toolbar}>
<IconButton
color="inherit"
onClick={this.onToggleDrawer}
onKeyDown={this.onToggleDrawer}>
<List
subheader={
<ListSubheader disableSticky>
<FormattedMessage id="Tags" />
</ListSubheader>
}>
{this.renderKeywords()}
</List>
aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography
variant="h6"
color="inherit"
className={classes.toolbarTitle}>
{config.siteTitle}
</Typography>
<div className={classes.toolbarMiddle} />
<SearchInput
onSearch={this.onSearch}
isSearchByPopularity={this.state.isSearchByPopularity}
/>
<LanguageSelector />
<IconButton color="inherit" href={config.projectLink}>
<GithubIcon />
</IconButton>
</Toolbar>
</AppBar>
<Drawer open={this.state.isDrawerOpen} onClose={this.onToggleDrawer}>
<div
tabIndex={0}
role="button"
onClick={this.onToggleDrawer}
onKeyDown={this.onToggleDrawer}>
<List
subheader={
<ListSubheader disableSticky>
<FormattedMessage id="Tags" />
</ListSubheader>
}>
{this.renderKeywords()}
</List>
</div>
</Drawer>
<Content ref={this.contentRef}>
<InfiniteScroll
distance={200}
onLoadMore={this.onLoadMore}
isLoading={this.props.gallery.isFetching}
hasMore>
<div
ref={ref => (this.rootRef = ref as HTMLDivElement)}
className={classes.root}>
<GalleryList items={this.props.gallery.items} />
{this.props.gallery.isFetching && <Loading />}
<Message
text={this.props.intl.formatMessage({ id: 'Failed to Load' })}
isHidden={!this.props.gallery.isError}
/>
<Refresh onClick={this.reRenderContent} />
</div>
</Drawer>
<Content ref={this.contentRef}>
<InfiniteScroll
distance={200}
onLoadMore={this.onLoadMore}
isLoading={this.props.gallery.isFetching}
hasMore>
<div
ref={ref => (this.rootRef = ref as HTMLDivElement)}
className={classes.root}>
<GalleryList items={this.props.gallery.items} />
{this.props.gallery.isFetching && <Loading />}
<Message
text={this.props.intl.formatMessage({ id: 'Failed to Load' })}
isHidden={!this.props.gallery.isError}
/>
<Refresh onClick={this.reRenderContent} />
</div>
</InfiniteScroll>
</Content>
</>
</DocumentTitle>
</InfiniteScroll>
</Content>
</>
);
}
}
Expand Down
72 changes: 37 additions & 35 deletions src/containers/IllustContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
} from '@material-ui/icons';
import shortid from 'shortid';
import Img from 'react-image';
import DocumentTitle from 'react-document-title';
import { Helmet } from 'react-helmet';
import { FormattedMessage, injectIntl, InjectedIntl } from 'react-intl';
// import honoka from 'honoka';

Expand All @@ -40,7 +40,7 @@ import WeiboIcon from '@/icons/Weibo';
import LineIcon from '@/icons/Line';
// import LoginContainer from '@/containers/LoginContainer';
import moment from '@/utils/moment';
import Storage from '@/utils/Storage';
// import Storage from '@/utils/Storage';
import getProxyImage from '@/utils/getProxyImage';
import { ICombinedState } from '@/reducers';
import { IIllustState } from '@/reducers/illust';
Expand Down Expand Up @@ -187,20 +187,20 @@ class IllustContainer extends React.Component<
}

this.props.dispatch(IllustActions.fetchComments(this.illustId));
this.authTimer = window.setInterval(() => {
const authData = Storage.get('auth');
if (authData === null) {
return;
}
if (authData.expires_at < moment().unix()) {
Storage.remove('auth');
}
}, 500);
// this.authTimer = window.setInterval(() => {
// const authData = Storage.get('auth');
// if (authData === null) {
// return;
// }
// if (authData.expires_at < moment().unix()) {
// Storage.remove('auth');
// }
// }, 500);
}

componentWillUnmount() {
this.props.dispatch(IllustActions.clearComments());
clearInterval(this.authTimer);
// clearInterval(this.authTimer);
}

get item() {
Expand Down Expand Up @@ -498,29 +498,31 @@ class IllustContainer extends React.Component<

render() {
return (
<DocumentTitle
title={this.item.title === '' ? config.siteTitle : this.item.title}>
<>
<AppBar position="static">
<Toolbar>
<IconButton href="#" color="inherit" onClick={this.onBackClick}>
<ArrowBackIcon />
</IconButton>
<Typography variant="h6" color="inherit">
{this.item.title}
</Typography>
</Toolbar>
</AppBar>
<Content>{this.renderContent()}</Content>
{this.state.showBox && (
<ImageBox
items={this.urls}
index={this.state.boxIndex}
onClose={this.onImageClose}
/>
)}
</>
</DocumentTitle>
<>
<Helmet>
<title>
{this.item.title === '' ? config.siteTitle : this.item.title}
</title>
</Helmet>
<AppBar position="static">
<Toolbar>
<IconButton href="#" color="inherit" onClick={this.onBackClick}>
<ArrowBackIcon />
</IconButton>
<Typography variant="h6" color="inherit">
{this.item.title}
</Typography>
</Toolbar>
</AppBar>
<Content>{this.renderContent()}</Content>
{this.state.showBox && (
<ImageBox
items={this.urls}
index={this.state.boxIndex}
onClose={this.onImageClose}
/>
)}
</>
);
}
}
Expand Down

0 comments on commit ceb7f32

Please sign in to comment.