From b85dac858bc2ec0fab038541797a42dc745dc034 Mon Sep 17 00:00:00 2001
From: IronKinoko <kinoko_main@outlook.com>
Date: Tue, 16 Jun 2020 18:26:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0about=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                      |  6 ++++
 app/next.config.js             |  3 ++
 app/pages/about.tsx            | 59 ++++++++++++++++++++++++++++++++++
 app/pages/setting/eh.tsx       | 40 ++++++++++++++++-------
 app/pages/setting/ehtags.tsx   | 31 ++++++++++++++++++
 app/pages/setting/index.tsx    | 14 +++++++-
 app/src/setting/UserCookie.tsx |  6 ++--
 7 files changed, 145 insertions(+), 14 deletions(-)
 create mode 100644 app/pages/about.tsx
 create mode 100644 app/pages/setting/ehtags.tsx

diff --git a/README.md b/README.md
index db792a9..8e3a47f 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,12 @@
 
 english | [中文说明](./README_CHS.md)
 
+## Screenshot
+
+![](https://raw.githubusercontent.com/IronKinoko/assert/master/e-hentai-view/home.png)
+
+![](https://raw.githubusercontent.com/IronKinoko/assert/master/e-hentai-view/menu.png)
+
 > **My english is poor, this article is provided by Google translation**
 
 A mobile website for exhentai, build with Next.js, also can in PC
diff --git a/app/next.config.js b/app/next.config.js
index 7062cec..40ab84e 100644
--- a/app/next.config.js
+++ b/app/next.config.js
@@ -17,6 +17,9 @@ const nextConfig = {
   devIndicators: {
     autoPrerender: false,
   },
+  env: {
+    VERSION: '2.0.1',
+  },
 }
 
 module.exports = withBundleAnalyzer(nextConfig)
diff --git a/app/pages/about.tsx b/app/pages/about.tsx
new file mode 100644
index 0000000..fe8da92
--- /dev/null
+++ b/app/pages/about.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import {
+  List,
+  ListItem,
+  ListItemText,
+  useMediaQuery,
+  Link,
+  Paper,
+} from '@material-ui/core'
+
+import { useTheme } from '@material-ui/core/styles'
+import Layout from 'components/Layout'
+
+const About = () => {
+  const theme = useTheme()
+  const matches = useMediaQuery(theme.breakpoints.down('xs'))
+  return (
+    <Layout title="About" noContainer={matches}>
+      <List>
+        <ListItem divider>
+          <ListItemText
+            primary="EhentaiView"
+            secondary="EhentaiView is not affiliated with E-hentai.org in any way"
+          />
+        </ListItem>
+        <ListItem divider>
+          <ListItemText
+            primary="Author"
+            secondary="IronKinoko <kinoko.main@gmail.com>"
+            secondaryTypographyProps={{
+              component: Link,
+              href: 'https://github.com/IronKinoko',
+              target: '_blank',
+            }}
+          />
+        </ListItem>
+        <ListItem divider>
+          <ListItemText
+            primary="Source"
+            secondary="https://github.com/IronKinoko/e-hentai-view"
+            secondaryTypographyProps={{
+              component: Link,
+              href: 'https://github.com/IronKinoko/e-hentai-view.git',
+              target: '_blank',
+            }}
+          />
+        </ListItem>
+        <ListItem divider>
+          <ListItemText primary="License" secondary="MIT" />
+        </ListItem>
+        <ListItem>
+          <ListItemText primary="Version" secondary={process.env.VERSION} />
+        </ListItem>
+      </List>
+    </Layout>
+  )
+}
+
+export default About
diff --git a/app/pages/setting/eh.tsx b/app/pages/setting/eh.tsx
index 44a1488..0ad6e2b 100644
--- a/app/pages/setting/eh.tsx
+++ b/app/pages/setting/eh.tsx
@@ -6,38 +6,56 @@ import {
   ListItemText,
   useMediaQuery,
   Dialog,
+  Typography,
+  ListSubheader,
+  ListItemSecondaryAction,
+  IconButton,
 } from '@material-ui/core'
 import { useTheme } from '@material-ui/core/styles'
 import Layout from 'components/Layout'
-import ExitToAppIcon from '@material-ui/icons/ExitToApp'
-import AccountCircleIcon from '@material-ui/icons/AccountCircle'
+import LabelIcon from '@material-ui/icons/Label'
 import SettingsIcon from '@material-ui/icons/Settings'
 import { useRouter } from 'next/router'
 import { axios } from 'apis'
-import message from 'components/message'
+import ArrowRightIcon from '@material-ui/icons/ArrowRight'
 import Logout from '@/setting/Logout'
 import UserCookie from '@/setting/UserCookie'
+
 const EHSetting = () => {
   const router = useRouter()
   const theme = useTheme()
   const matches = useMediaQuery(theme.breakpoints.down('xs'))
 
-  const logout = async () => {
-    await axios.post('/api/user/logout')
-    message.success('logout success')
-    router.push('/signin')
-  }
-
+  const goEhConfig = () => router.push('/setting/ehconfig')
+  const goEhTags = () => router.push('/setting/ehtags')
   return (
     <Layout title="EH" noContainer={matches}>
       <List>
+        <ListSubheader>User</ListSubheader>
         <Logout />
         <UserCookie />
-        <ListItem button onClick={() => router.push('/setting/ehconfig')}>
+        <ListSubheader>Setting</ListSubheader>
+        <ListItem button onClick={goEhConfig}>
           <ListItemIcon>
             <SettingsIcon />
           </ListItemIcon>
-          <ListItemText primary="Exhentai Setting" />
+          <ListItemText primary="Ehentai Setting" />
+          <ListItemSecondaryAction>
+            <IconButton onClick={goEhConfig}>
+              <ArrowRightIcon />
+            </IconButton>
+          </ListItemSecondaryAction>
+        </ListItem>
+        <ListItem button onClick={goEhTags}>
+          <ListItemIcon>
+            <LabelIcon />
+          </ListItemIcon>
+          <ListItemText primary="Ehentai Tags" />
+          <ListItemSecondaryAction>
+            <IconButton onClick={goEhTags}>
+              <ArrowRightIcon />
+            </IconButton>
+          </ListItemSecondaryAction>
         </ListItem>
       </List>
     </Layout>
diff --git a/app/pages/setting/ehtags.tsx b/app/pages/setting/ehtags.tsx
new file mode 100644
index 0000000..ca866b4
--- /dev/null
+++ b/app/pages/setting/ehtags.tsx
@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react'
+import { setting } from 'apis'
+import { NextPage } from 'next'
+import Layout from 'components/Layout'
+import Loading from 'components/Loading'
+
+const EHTag: NextPage = () => {
+  const [loading, setLoading] = useState(true)
+  useEffect(() => {
+    setting()
+    return () => {
+      setting()
+    }
+  }, [])
+  return (
+    <Layout title="EHentai Tags" noContainer fullScreen>
+      <iframe
+        src="https://exhentai.org/mytags"
+        frameBorder="0"
+        width="100%"
+        height="100%"
+        onLoad={() => {
+          setLoading(false)
+        }}
+      />
+      {loading && <Loading />}
+    </Layout>
+  )
+}
+
+export default EHTag
diff --git a/app/pages/setting/index.tsx b/app/pages/setting/index.tsx
index 1cb324c..495e214 100644
--- a/app/pages/setting/index.tsx
+++ b/app/pages/setting/index.tsx
@@ -5,13 +5,20 @@ import {
   ListItemIcon,
   ListItemText,
   useMediaQuery,
+  ListItemSecondaryAction,
+  IconButton,
 } from '@material-ui/core'
 import { useTheme } from '@material-ui/core/styles'
 import Layout from 'components/Layout'
 import AccountCircleIcon from '@material-ui/icons/AccountCircle'
+import ArrowRightIcon from '@material-ui/icons/ArrowRight'
+import InfoIcon from '@material-ui/icons/Info'
 import { useRouter } from 'next/router'
 
-const menu = [{ icon: <AccountCircleIcon />, name: 'EH', path: '/setting/eh' }]
+const menu = [
+  { icon: <AccountCircleIcon />, name: 'EH', path: '/setting/eh' },
+  { icon: <InfoIcon />, name: 'About', path: '/about' },
+]
 const Setting = () => {
   const router = useRouter()
   const theme = useTheme()
@@ -23,6 +30,11 @@ const Setting = () => {
           <ListItem button key={o.path} onClick={() => router.push(o.path)}>
             <ListItemIcon>{o.icon}</ListItemIcon>
             <ListItemText primary={o.name} />
+            <ListItemSecondaryAction>
+              <IconButton onClick={() => router.push(o.path)}>
+                <ArrowRightIcon />
+              </IconButton>
+            </ListItemSecondaryAction>
           </ListItem>
         ))}
       </List>
diff --git a/app/src/setting/UserCookie.tsx b/app/src/setting/UserCookie.tsx
index aa5f2fb..31cff57 100644
--- a/app/src/setting/UserCookie.tsx
+++ b/app/src/setting/UserCookie.tsx
@@ -27,7 +27,7 @@ const UserCookie = () => {
         <DialogTitle>User Cookie</DialogTitle>
         <DialogContent>
           <DialogContentText color="primary" variant="h6">
-            Pay attention to data security
+            KEEP IT SAFE
           </DialogContentText>
           {typeof window !== 'undefined' &&
             document.cookie.split(';').map((t) => (
@@ -39,7 +39,9 @@ const UserCookie = () => {
             ))}
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => setOpen(false)}>COPY</Button>
+          <Button color="primary" onClick={() => setOpen(false)}>
+            COPY
+          </Button>
         </DialogActions>
       </Dialog>
     </>