Remove legacy usage

kokororin · Apr 18, 2020 · fa02121 · fa02121
1 parent 016242c
commit fa02121
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pixiv.moe",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "A pinterest-style layout site, shows illusts on [pixiv.net](http://pixiv.net) order by popularity. Written with React.",
   "scripts": {
     "preinstall": "node -e \"if(process.env.npm_execpath.indexOf('yarn') === -1) throw new Error('You must use Yarn to install, not NPM')\"",

diff --git a/src/components/ScrollContext.tsx b/src/components/ScrollContext.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import H from 'history';
-import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
+import { useLocation } from 'react-router-dom';
+import { makeStyles } from '@material-ui/core/styles';
 import EventListener, { withOptions } from 'react-event-listener';
 import Content from '@/components/Content';
 
-const styles = createStyles({
+const useStyles = makeStyles({
   context: {
     position: 'absolute',
     width: '100%',
@@ -24,59 +24,41 @@ const styles = createStyles({
   }
 });
 
-interface IScrollContentProps extends WithStyles<typeof styles> {
-  location: H.Location;
-}
+const ScrollContext: React.FunctionComponent<{}> = props => {
+  const classes = useStyles();
+  const location = useLocation();
 
-const ScrollContext = withStyles(styles)(
-  class ScrollContext extends React.Component<IScrollContentProps> {
-    static prefix = '@@SCROLL/';
+  const cacheKey = `'@@SCROLL/'${location.pathname}`;
 
-    componentDidUpdate(prevProps: IScrollContentProps) {
-      if (this.props.location === prevProps.location) {
-        return;
-      }
-      const scrollTop = sessionStorage.getItem(this.cacheKey);
-      if (scrollTop && this.scrollingElement) {
-        this.scrollingElement.scrollTop = Number(scrollTop);
-      }
+  const onScroll = (event: React.UIEvent) => {
+    const scrollingElement = Content?.getElement();
+    const target = event.target as HTMLElement;
+    if (target.className === scrollingElement?.className) {
+      const scrollTop = String(target.scrollTop);
+      sessionStorage.setItem(cacheKey, scrollTop);
     }
+  };
 
-    onScroll = (event: React.UIEvent) => {
-      const target = event.target as HTMLElement;
-      if (target.className === this.scrollingElement?.className) {
-        const scrollTop = String(target.scrollTop);
-        sessionStorage.setItem(this.cacheKey, scrollTop);
-      }
-    };
-
-    get cacheKey() {
-      return `${ScrollContext.prefix}${this.props.location.pathname}`;
-    }
-
-    get scrollingElement() {
-      return Content.getElement();
+  React.useEffect(() => {
+    const scrollingElement = Content?.getElement();
+    const scrollTop = sessionStorage.getItem(cacheKey);
+    if (scrollTop && scrollingElement) {
+      scrollingElement.scrollTop = Number(scrollTop);
     }
+  }, [location.pathname]);
 
-    render() {
-      const { classes } = this.props;
-
-      return (
-        <div className={classes.context}>
-          <div className={classes.contextInnerContainer}>
-            {this.props.children}
-          </div>
-          <EventListener
-            target={document}
-            // @ts-ignore
-            onScroll={withOptions(this.onScroll, {
-              capture: true
-            })}
-          />
-        </div>
-      );
-    }
-  }
-);
+  return (
+    <div className={classes.context}>
+      <div className={classes.contextInnerContainer}>{props.children}</div>
+      <EventListener
+        target={document}
+        // @ts-ignore
+        onScroll={withOptions(onScroll, {
+          capture: true
+        })}
+      />
+    </div>
+  );
+};
 
 export default ScrollContext;
diff --git a/src/components/TrackPageView.tsx b/src/components/TrackPageView.tsx
@@ -1,19 +1,14 @@
 import React from 'react';
 import ReactGA from 'react-ga';
-import { Route } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import config from '@/config';
 
-export default class TrackPageView extends React.Component<{}> {
-  UNSAFE_componentWillMount() {
-    ReactGA.initialize(config.trackingID);
-    this.track();
-  }
+ReactGA.initialize(config.trackingID);
 
-  UNSAFE_componentWillUpdate() {
-    this.track();
-  }
+const TrackPageView: React.FunctionComponent<{}> = props => {
+  const location = useLocation();
 
-  track() {
+  const track = () => {
     const pageLink = window.location.pathname;
     if (process.env.NODE_ENV === 'production') {
       ReactGA.set({
@@ -23,9 +18,13 @@ export default class TrackPageView extends React.Component<{}> {
     } else {
       console.log(pageLink); // eslint-disable-line
     }
-  }
+  };
 
-  render() {
-    return <Route>{this.props.children}</Route>;
-  }
-}
+  React.useEffect(() => {
+    track();
+  }, [location.pathname]);
+
+  return <>{props.children}</>;
+};
+
+export default TrackPageView;
diff --git a/src/containers/AppContainer.tsx b/src/containers/AppContainer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Router, Route } from 'react-router-dom';
+import { Router } from 'react-router-dom';
 import { renderRoutes } from 'react-router-config';
 import {
   StylesProvider,
@@ -61,13 +61,9 @@ const AppContainer = () => (
     <MuiThemeProvider theme={theme}>
       <Baseline>
         <Router history={history}>
-          <Route
-            render={({ location }) => (
-              <ScrollContext location={location}>
-                <TrackPageView>{renderRoutes(routes)}</TrackPageView>
-              </ScrollContext>
-            )}
-          />
+          <TrackPageView>
+            <ScrollContext>{renderRoutes(routes)}</ScrollContext>
+          </TrackPageView>
         </Router>
       </Baseline>
     </MuiThemeProvider>

diff --git a/src/containers/GalleryContainer.tsx b/src/containers/GalleryContainer.tsx
@@ -197,14 +197,10 @@ const GalleryContainer: React.FunctionComponent<IGalleryContainerProps> = () =>
 
   const onHeaderClick = (event: React.MouseEvent<HTMLDivElement>) => {
     const target = event.target as HTMLDivElement;
-    const tagName = target.tagName.toLowerCase();
 
     if (
-      tagName !== 'button' &&
-      tagName !== 'span' &&
-      tagName !== 'svg' &&
-      tagName !== 'path' &&
-      tagName !== 'input'
+      typeof target.className === 'string' &&
+      target.className.indexOf(classes.toolbar) > -1
     ) {
       contentRef?.current?.toTop();
     }

diff --git a/src/utils/api.ts b/src/utils/api.ts
@@ -52,21 +52,21 @@ export const illustComments = (
 export const illustBookmarkDetail = (illustId: number | string) =>
   honoka.get(`/illust/bookmark/${illustId}`, {
     headers: {
-      'X-Access-Token': getAuth()?.access_token
+      'X-Access-Token': getAuth()?.access_token || 'no-token'
     }
   });
 
 export const illustBookmarkAdd = (illustId: number | string) =>
   honoka.post(`/illust/bookmark/${illustId}`, {
     headers: {
-      'X-Access-Token': getAuth()?.access_token
+      'X-Access-Token': getAuth()?.access_token || 'no-token'
     }
   });
 
 export const illustBookmarkDelete = (illustId: number | string) =>
   honoka.delete(`/illust/bookmark/${illustId}`, {
     headers: {
-      'X-Access-Token': getAuth()?.access_token
+      'X-Access-Token': getAuth()?.access_token || 'no-token'
     }
   });