未完成Pixiv客户端代码摘抄

不能把我有限的人生浪费在无限的前端上面.

如果将来无聊或者有零碎时间的话可以考虑继续实现
现在遇到的问题是无法合适的把React和Electron结合起来.
想了想已经浪费了一个月了, 不值当的.

Update: 关于React和Electron绑定的问题, 只消build之后设置绝对目录即可.

目前尚未解决的问题:

• 图片大图浏览
• 搜索和Tag跳转

大图浏览不想自己写组件, 而且也很难判定什么时候该下载原图…

package.json

{
  "name": "piclient",
  "version": "0.1.0",
  "private": true,
  "homepage":".",
  "main": "electron-starter.js",
  "dependencies": {
    "@material-ui/icons": "^1.0.0-beta.42",
    "material-ui": "^1.0.0-beta.41",
    "pixiv-app-api": "^0.11.0",
    "pixiv-img": "^0.3.1",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron": "electron ."
  },
  "devDependencies": {
    "electron": "^1.8.4",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.7.0",
    "prettier-eslint": "^8.8.1"
  }
}

piclient.js

//import { basename } from 'path';

//const electron = window.require('electron');
//const fs = electron.remote.require('fs');
//const path = electron.remote.require('path');
//const ipcRenderer = electron.ipcRenderer;
//const PixivAppApi = electron.remote.require('pixiv-app-api');
//const pixivImg = electron.remote.require('./src/pixiv-img');
const fs = require('fs');
const path = require('path');
const PixivAppApi = require('pixiv-app-api');
const pixivImg = require('./pixiv-imgs');
const url = require('url');

const default_config_path = './configuration.json';

class Piclient {
    constructor(props) {
        this.onEvent = this.onEvent.bind(this);
        this.onPictureUpdate = null;
        this.onNavUpdate = null;
        this.onPictureRequest = null;
        this.onNavRequest = null;
    }

    GetFilePath(dpath, type = 'temp') {
        if (type === 'temp') {
            dpath = path.resolve(this.temp_dir, dpath);
        }

        var create_dir = cpath => {
            if (!fs.existsSync(path.dirname(cpath))) {
                create_dir(path.dirname(cpath));
                fs.mkdirSync(cpath);
            } else if (!fs.existsSync(cpath)) {
                fs.mkdirSync(cpath);
            }
            return cpath;
        };
        dpath = create_dir(dpath);
        return dpath;
    }

    Initialize() {
        this.config = this.ReadConfig(default_config_path);
        console.log('Read config: ');
        console.log(this.config);
        if (
            (this.config.username || '') === '' ||
            (this.config.password || '') === ''
        ) {
            console.log('You must login!');
            throw 'no login info';
        }

        this.temp_dir = this.config.tmp_dir || './TempDir';

        this.pixiv = new PixivAppApi(
            this.config.username,
            this.config.password
        );

        //this.pixiv.searchIllust('東方Project').then(json => {
        this.pixiv.illustFollow().then(json => {
            //console.log(json);
            let promises = [];
            let pics = [];
            for (let illust of json.illusts) {
                let fn = path.basename(illust.imageUrls.large);
                var imgurl = this.GetFilePath('tempdir') + '/' + fn;
                promises.push(
                    pixivImg(illust.imageUrls.large, imgurl, {
                        id: illust.id,
                        title: illust.title,
                        author: illust.user.name,
                        url: imgurl,
                        tags: illust.tags.map(v => v.name)
                    })
                );
            }
            var doNext = () => {
                if (!promises.length) {
                    while (this.onPictureUpdate === null);
                    this.onPictureUpdate([['insert', [pics]]]);
                    return;
                }
                promises.shift().then(pic => {
                    pics.push(pic);
                    doNext();
                });
            };
            doNext();
        });
    }

    ReadConfig(path) {
        try {
            return JSON.parse(fs.readFileSync(path));
        } catch (e) {
            console.log('Error: ' + e);
            return null;
        }
    }

    GetNameOfPage(name) {
        return 'nice';
    }

    GetPicturesOfPage(name) {
        return [
            /*
            {
                id: '23333',
                title: 'Title_test',
                author: 'Author_test',
                url: 'imgtest/68452309_master1200.jpg',
                tags: [
                    'test1',
                    'youcan',
                    'nevergi',
                    'veupunti',
                    'ilyoufi',
                    'ndthew',
                    'ayout'
                ]
            }*/
        ];
    }

    onPictureEvent(type, args) {
        console.log('Pictures: ' + type + ' > ' + args);
        switch (type) {
        case 'initialized':
            return [
                ['create_frame', [this.GetNameOfPage('test'), 'test']],
                ['insert', [this.GetPicturesOfPage('test')]]
            ]; // Check state of navbar, initialized by outer.
        case 'bind_update':
            this.onPictureUpdate = args[0];
            return undefined;
        case 'bind_request':
            this.onPictureRequest = args[0];
            this.Initialize();
            return undefined;
        default:
            var [frame, id, act] = type.split('.');
            console.log(frame + '[' + id + ']' + '> ' + act);
            //return [['insert', [this.GetPicturesOfPage('test')]]];
        }
    }

    onNavEvent(type, args) {
        console.log('Navbar: ' + type + ' > ' + args);
        switch (type) {
        case 'initialized':
            return [
                [
                    'append_many',
                    [
                        [
                            {
                                id: 'navbar_test1',
                                PrimaryText: 'PText1',
                                SecondaryText: 'SText1'
                            },
                            {
                                id: 'navbar_test2',
                                PrimaryText: 'PText2',
                                SecondaryText: 'SText2'
                            }
                        ],
                        ''
                    ]
                ]
            ];
        case 'bind_update':
            this.onNavUpdate = args[0];
            return undefined;
        case 'bind_request':
            this.onNavRequest = args[0];
            return undefined;
        }
    }

    onEvent() {
        switch (arguments[0]) {
        case 'Picture':
            return this.onPictureEvent(
                arguments[2],
                Array.from(arguments).slice(3)
            );
        case 'NavSideBar':
            return this.onNavEvent(
                arguments[2],
                Array.from(arguments).slice(3)
            );
        }
    }
}

//export default new Piclient();
module.exports = new Piclient();

App.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import ListSubheader from 'material-ui/List/ListSubheader';
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import Collapse from 'material-ui/transitions/Collapse';
import TextField from 'material-ui/TextField';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import DraftsIcon from '@material-ui/icons/Drafts';
import SendIcon from '@material-ui/icons/Send';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import StarBorder from '@material-ui/icons/StarBorder';
import GridList, { GridListTile, GridListTileBar } from 'material-ui/GridList';
import Subheader from 'material-ui/List/ListSubheader';
import IconButton from 'material-ui/IconButton';
import InfoIcon from '@material-ui/icons/Info';
import ReactDOM from 'react-dom';
import { ButtonBase, Chip } from 'material-ui';

const electron =
    typeof window.require === 'undefined' ? null : window.require('electron');

const styles = theme => ({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: theme.palette.background.paper,
        display: 'flex',
        flexWrap: 'wrap'
    },
    nested: {
        paddingLeft: theme.spacing.unit * 4
    },
    lst: {
        width: 200,
        overflow: 'auto'
    },
    icon: {
        color: 'rgba(255, 255, 255, 0.54)'
    },
    ImgArea: {
        position: 'fixed',
        marginLeft: 200,
        marginTop: 0,
        overflow: 'scroll',
        padding: 15
    }
});

class SearchTextField extends React.Component {
    constructor(props) {
        super(props);
        const width = props.width;
        this.state = {
            style: {
                marginLeft: 15,
                marginTop: 0,
                marginRignt: 15,
                width: width
            },
            label: 'Search',
            value: '',
            acList: []
        };
    }

    render() {
        const { classes } = this.props;
        return (
            <div className={classes.SearchTextFieldDiv}>
                <TextField
                    id="search"
                    label={this.state.label}
                    className={classes.SearchTextField}
                    value={this.state.value}
                    onChange={this.props.onChange}
                    style={this.state.style}
                />
            </div>
        );
    }
}

class NavSideBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            listitems: [],
            NestedList: new Array(),
            selected: ''
        };
        this.onEvent = props.onEvent.bind(this, 'NavSideBar', this.state);
        this.parseRet(this.onEvent('initialized'));
        this.onUpdate = this.onUpdate.bind(this);
        this.onRequest = this.onRequest.bind(this);
        this.onEvent('bind_update', this.onUpdate);
        this.onEvent('bind_request', this.onRequest);
        if (!electron) {
            this.Insert({ id: 'a', PrimaryText: 'PT1' });
            this.Insert({ id: 'b', PrimaryText: 'PT2' });
            this.Select('a');
        }
    }

    onRequest() {
        return this.state;
    }

    onUpdate(ori_data) {
        this.parseRet(ori_data);
    }

    parseRet(ori_data) {
        if (typeof ori_data === 'undefined') return;
        for (var i of ori_data) {
            var opt = i[0];
            var data = i[1];
            switch (opt) {
            case 'append':
                this.Insert(data[0], data[1]);
                break;
            case 'insert':
                this.Insert(data[0], data[1], data[2]);
                break;
            case 'remove':
                this.Remove(data[0], data[1]);
                break;
            case 'append_many':
                for (var item of data[0]) this.Insert(item, data[1]);
                break;
            case 'select':
                this.Select(data[0]);
            }
        }
    }

    Select(id) {
        this.state['selected'] = id;
        this.setState({ selected: id });
        console.log(this.state);
    }

    Search(list, id) {
        let foundItem = null;
        for (var current of list) {
            if (current.id === id) {
                foundItem = current;
                break;
            }
            if (typeof current.sublist !== 'undefined') {
                foundItem = this.Search(current.sublist, id);
                foundItem = foundItem !== null ? foundItem : null;
                if (foundItem != null) break;
            }
        }
        return foundItem;
    }

    Insert(item, id = '', position = -1) {
        if (typeof id === 'undefined' || typeof item.id === 'undefined')
            return false;
        var newList = this.state.listitems;

        try {
            var parent = id === '' ? newList : this.Search(newList, id);
            if (id !== '' && typeof parent.sublist === 'undefined')
                parent.sublist = [];
            if (id !== '') parent = parent.sublist;
            if (parent == null) throw 'cannot find';
            parent.splice(
                position < 0 || position > parent.length
                    ? parent.length
                    : position,
                0,
                item
            );
        } catch (e) {
            return false;
        } finally {
            this.setState({ listitems: newList }); // Update state
            return true;
        }
    }

    Remove(id, parent_id = '') {
        if (typeof id === 'undefined') return false;
        var newList = this.state.listitems;

        try {
            var parent = null;
            if (parent_id === '') parent = newList;
            else parent = this.Search(newList, parent_id).sublist;

            if (parent == null) throw 'cannot find parent';
            var index = -1;
            for (var i = 0; i < parent.length; i++)
                if (parent[i].id === id) {
                    index = i;
                }
            if (index === -1) throw 'cannot find son';
            parent.splice(index, 1);
        } catch (e) {
            console.log(e);
            return false;
        } finally {
            this.setState({ listitems: newList }); // Update state
            return true;
        }
    }

    handleClick(info) {
        if (info[1] === true) {
            var id = info[0];
            var newNestedList = this.state.NestedList;
            if (typeof newNestedList[id] === 'undefined')
                newNestedList[id] = false;
            newNestedList[id] = !newNestedList[id];
            this.setState({
                NestedList: newNestedList
            });
        } else {
            /*
            if (
                typeof this.Search(this.state.listitems, info[0]).event ===
                'undefined'
            )
                return;
            let func;
            if (
                typeof (func = this.Search(this.state.listitems, info[0])
                    .event) === 'function'
            )
                func('click');
                */
            this.onEvent('sidebar_item_click', info[0]);
        }
    }

    generateList(items, level = 0) {
        var element = [];
        for (var item of items) {
            var item_style = {};
            if (level !== 0) item_style['paddingLeft'] = 10 * 4 * level;
            if (
                item.id == this.state.selected &&
                typeof item.sublist === 'undefined'
            )
                item_style['backgroundColor'] = 'rgba(0,0,0,0.25)';

            element.push(
                <ListItem
                    key={item.id}
                    button
                    onClick={this.handleClick.bind(
                        this,
                        typeof item.sublist !== 'undefined'
                            ? [item.id, true]
                            : [item.id, false]
                    )}
                    style={item_style}
                >
                    <ListItemText
                        primary={item.PrimaryText}
                        secondary={item.SecondaryText}
                    />
                    {typeof item.sublist !== 'undefined' ? (
                        this.state.NestedList[item.id] ? (
                            <ExpandLess />
                        ) : (
                            <ExpandMore />
                        )
                    ) : (
                        item.icon || ' '
                    )}
                </ListItem>
            );
            if (typeof item.sublist !== 'undefined') {
                element.push(
                    <Collapse
                        in={this.state.NestedList[item.id]}
                        timeout="auto"
                        unmountOnExit
                    >
                        <List component="div" disablePadding>
                            {this.generateList(item.sublist, level + 1)}
                        </List>
                    </Collapse>
                );
            }
        }
        return element;
    }

    render() {
        const { classes } = this.props;

        return (
            <List
                className={classes.NavSideBar}
                style={this.props.style}
                component="nav"
                selected="a"
                subheader={<SearchTextField classes={classes} />}
            >
                {this.generateList(this.state.listitems)}
            </List>
        );
    }
}

NavSideBar.propTypes = {
    classes: PropTypes.object.isRequired
};

class PicTile extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: 0,
            id: this.props.id || 'id_undefined',
            height: this.props.height,
            image: this.props.image,
            title: this.props.title || '',
            author: this.props.author || '',
            tags: this.props.tags || [],
            open: false
        };
        this.onImageLoad = this.onImageLoad.bind(this);
    }

    onImageLoad({ target: img }) {
        this.setState({
            width: img.offsetWidth / (img.offsetHeight / this.state.height)
        });
    }

    HandleInfoClick(props = {}) {
        this.setState({ open: !this.state.open });
        var { tagID } = props;
        if (typeof tagID !== 'undefined')
            (this.props.onEvent || ((id, type) => {}))(
                this.state.id,
                'tagClick:' + tagID
            );
    }

    render() {
        const { classes } = this.props;
        return (
            <GridListTile
                style={{
                    height: this.state.height,
                    width: this.state.width,
                    margin: 10
                }}
            >
                <img
                    onLoad={this.onImageLoad}
                    src={this.state.image}
                    onClick={(this.props.onEvent || ((id, type) => {})).bind(
                        null,
                        this.state.id,
                        'imgClick'
                    )}
                    alt={this.state.title}
                />
                <Collapse
                    in={this.state.open}
                    timeout="auto"
                    unmountOnExit
                    style={{
                        backgroundColor: 'rgba(0, 0, 0, 0.25)',
                        position: 'absolute',
                        marginTop: -this.state.height - 5,
                        minWidth: this.state.width - 20,
                        maxWidth: this.state.width - 20,
                        maxHeight: this.state.height - 80 - 10,
                        overflow: 'scroll',
                        paddingTop: 5,
                        paddingBottom: 5,
                        paddingLeft: 10,
                        paddingRight: 10
                    }}
                >
                    {this.state.tags.map(v => (
                        <Chip
                            label={v}
                            key={v}
                            style={{
                                margin: 2
                            }}
                            onClick={this.HandleInfoClick.bind(this, {
                                tagID: v
                            })}
                        />
                    ))}
                </Collapse>
                <GridListTileBar
                    title={this.state.title}
                    subtitle={<span>{this.state.author}</span>}
                    actionIcon={
                        <IconButton
                            className={classes.icon}
                            onClick={() => {
                                this.HandleInfoClick();
                                (this.props.onEvent || ((id, type) => {}))(
                                    this.state.id,
                                    'infoClick'
                                );
                            }}
                        >
                            <InfoIcon />
                        </IconButton>
                    }
                />
            </GridListTile>
        );
    }
}

class PicDiv extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: 0,
            picHeight: 270,
            imglist: props.pictures || [],
            testmsg: 'hello',
            open: true
        };
    }

    render() {
        const { classes } = this.props;
        return (
            <div style={this.props.style}>
                <div
                    style={{
                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
                        marginTop: 0,
                        padding: 0,
                        maxWidth: '100%',
                        minWidth: '100%',
                        maxHeight: 'fit-content',
                        textAlign: 'center',
                        marginBottom: 10
                    }}
                >
                    <a
                        href="#"
                        style={{
                            textDecoration: 'none',
                            color: 'white',
                            display: 'block'
                        }}
                        onClick={() => {
                            this.setState({ open: !this.state.open });
                        }}
                    >
                        {this.props.title}
                    </a>
                </div>

                <Collapse
                    in={this.state.open}
                    style={{
                        backgroundColor: 'rgba(0, 0, 0, 0.25)',
                        minWidth: '100%',
                        maxWidth: '100%',
                        height: 'fit-content',
                        overflow: 'scroll'
                    }}
                >
                    <GridList cols={this.props.cols}>
                        {this.state.imglist.map(v => (
                            <PicTile
                                id={v.id}
                                key={v.id}
                                height={this.state.picHeight}
                                image={v.url}
                                title={v.title}
                                author={v.author}
                                classes={classes}
                                onEvent={this.props.onEvent}
                                tags={v.tags}
                            />
                        ))}
                    </GridList>
                </Collapse>
            </div>
        );
    }
}

class Picture extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pictures: props.pictures || [],
            cellHeight: props.cellHeight || 270
        };
        this.onEvent = props.onEvent.bind(this, 'Picture', this.state);
        this.parseRet(this.onEvent('initialized'));
        this.onUpdate = this.onUpdate.bind(this);
        this.onRequest = this.onRequest.bind(this);
        this.onEvent('bind_update', this.onUpdate);
        this.onEvent('bind_request', this.onRequest);
        if (!electron) {
            this.CreateFrame('test', 'test');
            this.Append({
                id: '232323',
                title: 'title',
                author: 'author',
                url: 'test.jpg',
                tags: []
            });
        }
    }

    onRequest() {
        return this.state;
    }

    onUpdate(ori_data) {
        this.parseRet(ori_data);
    }

    CreateFrame(title, id, position = -1) {
        if (title === '' || id === '') return false;
        var newList = this.state.pictures;
        try {
            newList.splice(
                position < 0 || position > newList.length
                    ? newList.length
                    : position,
                0,
                { id: id, title: title, imglist: [] }
            );
        } catch (e) {
            console.log(e);
            return false;
        } finally {
            this.setState(newList);
            return true;
        }
    }

    RemoveFrame(id) {
        if ((id || '') === '') return false;
        var newList = this.state.pictures;
        try {
            for (var i = 0; i < newList.length; i++)
                if (newList[i].id === id) newList.splice(i, 1);
        } catch (e) {
            console.log(e);
            return false;
        } finally {
            this.setState({ pictures: newList });
            return true;
        }
    }

    Append(item, parent_id = this.state.pictures[0].id) {
        if (typeof parent_id === 'undefined' || parent_id === '') return;
        var newList = this.state.pictures;
        try {
            for (var cur of newList) {
                if (cur.id === parent_id) {
                    cur.imglist.push(item);
                    break;
                }
            }
        } catch (e) {
            console.log(e);
            return false;
        } finally {
            this.setState({ pictures: newList });
            return true;
        }
    }

    Insert(items, parent_id = this.state.pictures[0].id) {
        for (var item of items) this.Append(item, parent_id);
    }

    Remove(id) {
        if (typeof id === 'undefined' || id === '') return false;
        var newList = this.state.pictures;

        try {
            for (var lists of newList)
                for (var i = 0; i < lists.imglist.length; i++)
                    if (lists.imglist[i].id === id) lists.imglist.splice(i, 1);
        } catch (e) {
            console.log(e);
            return false;
        } finally {
            this.setState({ pictures: newList }); // Update state
            return true;
        }
    }

    parseRet(ori_data) {
        if (typeof ori_data === 'undefined') return;
        for (var i of ori_data) {
            var opt = i[0];
            var data = i[1];
            switch (opt) {
            case 'append':
                this.Append(data[0], data[1]);
                break;
            case 'insert':
                this.Insert(data[0], data[1]);
                break;
            case 'remove':
                this.Remove(data[0]);
                break;
            case 'create_frame':
                this.CreateFrame(data[0], data[1], data[2]);
                break;
            case 'remove_frame':
                this.RemoveFrame(data[0]);
                break;
            }
        }
    }

    handleEvent(div_id, id, type) {
        this.parseRet(this.onEvent(div_id + '.' + id + '.' + type));
    }

    render() {
        const { classes } = this.props;
        return (
            <div>
                {this.state.pictures.map(v => (
                    <PicDiv
                        key={v.id}
                        classes={classes}
                        cellHeight={this.state.cellHeight}
                        cols={3}
                        title={v.title}
                        pictures={v.imglist}
                        onEvent={this.handleEvent.bind(this, v.id)}
                    />
                ))}
            </div>
        );
    }
}

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            width: props.width || -1,
            height: props.height || -1
        };
    }

    componentDidMount() {
        this.updateSize();
        window.addEventListener('resize', () => this.updateSize());
    }

    componentWillUnmount() {
        window.removeEventListener('resize', () => this.updateSize());
    }

    updateSize() {
        try {
            this.setState({
                width: window.innerWidth,
                height: window.innerHeight
            });
        } catch (ignore) {}
    }

    render() {
        const { classes } = this.props;
        var onEvent =
            electron != null
                ? electron.remote.require('./src/piclient').onEvent
                : () => {
                    console.log(arguments);
                };
        return (
            <div
                className={classes.root}
                style={{ maxHeight: this.state.height }}
            >
                <div>
                    <NavSideBar
                        classes={classes}
                        style={{
                            maxHeight: this.state.height - 0, //18,
                            minHeight: this.state.height - 0, //18,
                            paddingBottom: 0,
                            marginBottom: 0
                        }}
                        onEvent={onEvent}
                    />
                </div>
                <div
                    className={classes.ImgArea}
                    style={{
                        maxHeight: this.state.height - 0,
                        minHeight: this.state.height - 0,
                        minWidth: this.state.width - 200 - 30,
                        maxWidth: this.state.width - 200 - 30
                    }}
                >
                    <Picture
                        classes={classes}
                        cellHeight={270}
                        cols={3}
                        pictures={[]}
                        onEvent={onEvent}
                    />
                </div>
            </div>
        );
    }
}

export default withStyles(styles)(App);

/*
 note:
    any operable component takes a func 'onEvent' and bind it to inner
    comp with its own id and state. return as new state.
    id cannot be:
        initialized
        request
        bind_update

    */

.eslintrc.js

module.exports = {
    env: {
        browser: true,
        commonjs: true,
        es6: true,
        node: true
    },
    extends: 'plugin:react/recommended',
    parserOptions: {
        ecmaFeatures: {
            experimentalObjectRestSpread: true,
            jsx: true
        },
        sourceType: 'module'
    },
    plugins: ['react'],
    rules: {
        indent: ['error', 4],
        'linebreak-style': ['error', 'unix'],
        quotes: ['error', 'single'],
        semi: ['error', 'always']
    }
};

settings.json

{
  // Set the default
  "editor.formatOnSave": false,
  // Enable per-language
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "editor.tabSize": 4,
  "prettier.eslintIntegration": true
}