update

og24715 · Mar 6, 2019 · a44c9be · a44c9be
1 parent c985171
commit a44c9be
Show file tree

Hide file tree

Showing 11 changed files with 1,729 additions and 1,420 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,25 @@
+module.exports = {
+  "extends": "airbnb",
+  "plugins": [
+    "babel"
+  ],
+  "parser": "babel-eslint",
+  "rules": {
+    "no-underscore-dangle": [
+      2, {
+        "allowAfterThis": true
+      }
+    ],
+    "arrow-body-style": [1, "as-needed"],
+    "react/prop-types": [0],
+    "react/sort-comp": [0],
+    "react/jsx-tag-spacing": [0],
+    "react/prefer-stateless-function": [1],
+    "react/jsx-filename-extension": [0]
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "jasmine": true
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
-
+.vscode
 yarn-error\.log
 
 chrome/dist/
diff --git a/chrome/src/favorites/App.jsx b/chrome/src/favorites/App.jsx
@@ -1,114 +1,56 @@
-import React from 'react';
-import {
-  Button, Drawer, Checkbox, Layout, Switch, Row, Col,
-} from 'antd';
-
+import React, { useState, useEffect } from 'react';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import FilterListIcon from '@material-ui/icons/FilterList';
+import styled from 'styled-components';
+
+import Navbar from './component/navbar';
 import Card from './component/card';
-import FilterInDrawerContent from './component/drawer/filter';
 
-const {
-  Header, Content,
-} = Layout;
+const ApplicationWrapper = styled.div``;
+
+const Main = styled.main`
+  padding-left: 40px;
+  padding-right: 40px;
+`;
 
-export default class App extends React.Component {
-  state = {
-    following: [],
-    types: [],
-    filter: {
-      age: [18, 20],
-      bust: [90, 110],
-      west: [50, 80],
-      hip: [80, 110],
-    },
-    isBlur: true,
-  };
+const App = () => {
+  const [followingPornstars, setFollowingPornstars] = useState([]);
+  const [openDrawer, setOpenDrawer] = useState(false);
 
-  componentDidMount() {
+  useEffect(() => {
     chrome.storage.local.get('following', ({ following = [] }) => {
-      const types = [...new Set(following.map(item => item.type))];
-      this.setState({ following: following.reverse(), types });
+      // const types = [...new Set(following.map(item => item.type))];
+      setFollowingPornstars(following.reverse());
     });
-  }
-
-  _renderCard = item => (
-    <Card item={item} isBlur={this.state.isBlur} />
+  });
+
+  return (
+    <ApplicationWrapper>
+      <Navbar />
+
+
+      <Main>
+        <Toolbar>
+          <Typography variant="h6" component="h2" style={{ flexGrow: 1 }}>
+            {followingPornstars.length}
+            名のお気に入り女優
+          </Typography>
+
+        </Toolbar>
+
+        <Grid container spacing="8">
+          {followingPornstars.map(pornstar => (
+            <Grid item xs="3" key={pornstar.name}>
+              <Card item={pornstar}/>
+            </Grid>
+          ))}
+        </Grid>
+      </Main>
+    </ApplicationWrapper>
   );
+};
 
-  _handleChange = () => {
-    this.setState({ isBlur: !this.state.isBlur });
-  };
-
-  _handleToggleFilterDrawer = () => {
-    const { visibleDrawer, filter } = this.state;
-
-    if (visibleDrawer) {
-      this.setState({ visibleDrawer: false });
-    } else {
-      this.setState({
-        visibleDrawer: true,
-        drawerContent: <FilterInDrawerContent filter={filter} />,
-      });
-    }
-  }
-
-  render() {
-    const {
-      following, types, isBlur, visibleDrawer, drawerContent,
-    } = this.state;
-
-    return (
-      <Layout>
-        <Header style={{ color: 'white' }}>
-          DMM.pornstars
-        </Header>
-        <Content style={{ padding: '20px 50px' }}>
-          <div
-            style={{
-              height: '60px', paddingBottom: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-            }}
-          >
-            <p style={{ margin: 0 }}>
-              {following.length}
-              件の女優
-            </p>
-            <div style={{
-              display: 'flex', width: 100, justifyContent: 'space-between', alignItems: 'center',
-            }}
-            >
-              {/* <Button sieze="small" shape="circle" icon="filter" onClick={this._handleToggleFilterDrawer}/> */}
-              {/* types.map(type => (
-              <Checkbox>
-                {type}
-              </Checkbox>
-              )) */}
-              <Switch
-                checkedChildren="blur"
-                unCheckedChildren="blur"
-                defaultChecked
-                onChange={this._handleChange}
-                checked={!isBlur}
-              />
-            </div>
-          </div>
-          <Row gutter={15}>
-            {following.map(item => (
-              <Col span={6}>
-                <Card item={item} isBlur={isBlur} />
-              </Col>
-            ))}
-          </Row>
-        </Content>
-        <Drawer
-          title="Filter"
-          placement="right"
-          closable={false}
-          width={500}
-          onClose={this._handleToggleFilterDrawer}
-          visible={visibleDrawer}
-        >
-          {drawerContent}
-        </Drawer>
-      </Layout>
-    );
-  }
-}
+export default App;
diff --git a/chrome/src/favorites/component/card/index.js b/chrome/src/favorites/component/card/index.js
@@ -1,54 +1,49 @@
 import React from 'react';
-import {
-  Avatar, Card, Icon,
-} from 'antd';
+import Card from '@material-ui/core/Card';
+import CardHeader from '@material-ui/core/CardHeader';
+import CardMedia from '@material-ui/core/CardMedia';
+import CardActions from '@material-ui/core/CardActions';
+import Avatar from '@material-ui/core/Avatar';
+import Button from '@material-ui/core/Button';
 
-import style from './style';
+const pornstarBaseUrl = 'http://www.dmm.co.jp/digital/videoa/-/list/=/article=actress/id=';
 
-export default ({ item, isBlur }) => {
-  const handleDelete = () => {
+function createUnfollowingHandler(id) {
+  return () => {
     chrome.storage.local.get('following', ({ following = [] }) => {
-      const index = following.findIndex(i => i.id === item.id);
-
-      following.splice(index, 1);
-
-      chrome.storage.local.set({ following }, () => {
-        console.log('Value is set to', following);
+      const newFollowing = following.filter(i => i.id !== id);
+      chrome.storage.local.set({ following: newFollowing }, () => {
       });
     });
   };
+}
 
-  const Delete = () => (
-    <Icon type="delete" onClick={handleDelete} />
-  );
-
+function FollowingCard({ item }) {
   return (
-    <a
-      rel="noopener noreferrer"
-      target="_blank"
-      href={`http://www.dmm.co.jp/digital/videoa/-/list/=/article=actress/id=${item.id}/`}
-    >
-      <Card
-        style={{ marginBottom: '15px' }}
-        bordered={false}
-        hoverable
-        actions={[<Delete />]}
-        cover={(
-          <div style={style.imageWrapper}>
-            <img
-              style={Object.assign({}, style.image, isBlur && style.imageBlur)}
-              alt={item.name}
-              src={item.coverArtUrl}
-            />
-          </div>
-      )}
-      >
-        <Card.Meta
-          avatar={<Avatar icon="user" / >}
-          title={item.name}
-          description={null}
-        />
-      </Card>
-    </a>
+    <Card>
+      <CardHeader
+        avatar={(
+          <Avatar aria-label={item.name}>
+            {item.name.slice(0, 1)}
+          </Avatar>
+        )}
+        title={item.name}
+      />
+      <CardMedia
+        image={item.coverArtUrl}
+        title={item.name}
+        style={{ height: 200 }}
+      />
+      <CardActions disableActionSpacing>
+        <Button
+          color="primary"
+          href={`${pornstarBaseUrl}${item.id}`}
+        >
+          出演作品を見る
+        </Button>
+      </CardActions>
+    </Card>
   );
-};
+}
+
+export default FollowingCard;
diff --git a/chrome/src/favorites/component/navbar/index.jsx b/chrome/src/favorites/component/navbar/index.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Toolbar from '@material-ui/core/Toolbar';
+import AppBar from '@material-ui/core/AppBar';
+import Typography from '@material-ui/core/Typography';
+
+const Nabbar = () => (
+  <AppBar position="static">
+    <Toolbar>
+      <Typography variant="h6" component="h1" color="inherit">
+        DMM.pornstars
+      </Typography>
+    </Toolbar>
+  </AppBar>
+);
+
+export default Nabbar;
diff --git a/chrome/src/favorites/context/favorites.js b/chrome/src/favorites/context/favorites.js
diff --git a/chrome/src/favorites/index.css b/chrome/src/favorites/index.css
@@ -1 +1,5 @@
-@import '~antd/dist/antd.css';
+html, body {
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
+}
diff --git a/chrome/src/favorites/index.html b/chrome/src/favorites/index.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="utf-8">
     <title>DMM.pornstars</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
   </head>
   <body>
     <div id="root" />