;
25 |
26 | default:
27 | return null;
28 | }
29 | }}/>
30 | );
31 | }
32 | return null;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/pages/Setter/Password.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { inject, observer } from "mobx-react";
3 | import PropTypes from "prop-types";
4 |
5 | import PasswordView from "./PasswordView";
6 |
7 | @inject("Appstore", "Setterstore")
8 | @observer
9 | export default class Password extends Component {
10 | static propTypes = {
11 | Setterstore: PropTypes.object,
12 | Appstore: PropTypes.object
13 | };
14 | constructor(props) {
15 | super(props);
16 | this.send = this.send.bind(this);
17 | this.change = this.change.bind(this);
18 | }
19 | send(e) {
20 | e.stopPropagation();
21 | this.props.Setterstore.setPassword();
22 | }
23 |
24 | change(e) {
25 | e.stopPropagation();
26 | const name = e.target.name;
27 | this.props.Setterstore.change(name, e.target.value);
28 | }
29 |
30 | render() {
31 | return (
32 |
33 |
34 |
35 | 保存
36 |
37 |
19 |
20 |
21 |
23 | {
26 | return
29 |
30 |
31 |
16 |
20 | {comment.good.length}
21 |
22 |
23 |
24 | 回复
25 |
26 |
27 | {user_id === author[0]._id ? (
28 |
29 | 删除
30 |
31 | ) : null}
32 |
33 | );
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/Header/User/Avatar.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { observer, inject } from "mobx-react";
3 | import PropTypes from "prop-types";
4 |
5 | import Menu from "./Menu";
6 |
7 | @inject("Appstore")
8 | @observer
9 | export default class User extends Component {
10 | static propTypes = {
11 | Appstore: PropTypes.object
12 | };
13 | constructor(props) {
14 | super(props);
15 | this.close = this.close.bind(this);
16 | this.action = this.action.bind(this);
17 | }
18 | action(e) {
19 | e.stopPropagation();
20 | this.props.Appstore.setter_message("setter", e.target.offsetLeft - 60 + 15); //模型一半宽+被点击元素一半宽
21 | }
22 | close(e) {
23 | e.stopPropagation();
24 | this.props.Appstore.setter_message("close");
25 | }
26 | render() {
27 | const { open, left } = this.props.Appstore.header;
28 | return (
29 |
30 |
31 | {open === "setter" ? (
32 |
33 | ) : null}
34 |
16 |
17 |
关于创建者
18 |
19 |
20 |
21 |
22 |
{user.name}
23 |
24 |
25 |
26 |
收藏夹状态
27 |
{`最近活动于 ${dt.date} ${
28 | dt.time
29 | }`}
30 |
31 |
12 | {
19 | return (
20 |
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/pages/Editor/Center.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { observer, inject } from "mobx-react";
3 | import PropTypes from "prop-types";
4 | import { withRouter } from "react-router-dom";
5 |
6 | @inject("Editorstore")
7 | @withRouter
8 | @observer
9 | export default class Center extends Component {
10 | static propTypes = {
11 | Editorstore: PropTypes.object,
12 | history: PropTypes.object
13 | };
14 | render() {
15 | if (this.props.Editorstore.message === null) return null;
16 | const { message } = this.props.Editorstore;
17 | return (
18 |
19 |
20 | {message.text}
22 |
23 |
14 |
15 |
16 |
35 |
21 |
30 | );
31 | });
32 | return (
33 |
36 | );
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/pages/People/Links.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import PropTypes from "prop-types";
3 | import { Link } from "react-router-dom";
4 |
5 | export default class PeopleSwitchList extends Component {
6 | static propTypes = {
7 | match: PropTypes.object
8 | };
9 | render() {
10 | const arr = [
11 | { path: "dynamic", match: "dynamic", text: "动态" },
12 | { path: "article", match: "article", text: "文章" },
13 | { path: "collect", match: "collect", text: "收藏" },
14 | { path: "following", match: "following|followers", text: "关注" }
15 | ];
16 | const match = this.props.match;
17 | const list = arr.map((route) => {
18 | const key = Math.random()
19 | .toString(36)
20 | .substring(2, 6);
21 | return (
22 |
23 |
33 | );
34 | });
35 | return ;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/pages/Editor/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { observer, inject } from "mobx-react";
3 | import PropTypes from "prop-types";
4 |
5 | import Image from "./Image";
6 | import Title from "./Title";
7 | import Write from "./Write";
8 | import Center from "./Center";
9 |
10 | @inject("Appstore", "Editorstore")
11 | @observer
12 | export default class Editor extends Component {
13 | static propTypes = {
14 | Editorstore: PropTypes.object,
15 | history: PropTypes.object,
16 | location: PropTypes.object,
17 | match: PropTypes.object
18 | };
19 | render() {
20 | if (this.props.Editorstore.loading) return
;
21 | return (
22 |
23 |
24 |
29 |
20 |
21 |
22 |
24 |
{collects.name}
25 |
{`收藏 ${collects.collect_count} 篇文章`}
26 |
33 | );
34 | });
35 | return ;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/pages/Login/Login.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import PropTypes from "prop-types";
3 |
4 | export default class Login extends Component {
5 | static propTypes = {
6 | state: PropTypes.object,
7 | keyup: PropTypes.func,
8 | change: PropTypes.func
9 | };
10 | render() {
11 | return (
12 |
40 | );
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/Comment/Author.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Link } from "react-router-dom";
3 | import PropTypes from "prop-types";
4 | import utils from "@utils";
5 |
6 | export default class CommentAuthor extends Component {
7 | static propTypes = {
8 | author: PropTypes.array,
9 | comment: PropTypes.object
10 | };
11 | render() {
12 | const { author, comment } = this.props;
13 | const { user, date } = comment;
14 | const authors = user.length > 1 && user[0] === user[1] ? author[0] : author[1];
15 | const dt = utils.format(date);
16 | return (
17 |
18 |
19 |
20 |
21 |
22 |
{author[0].name}
23 | {user.length > 1 ? (
24 |
25 | 回复
26 |
32 | ) : null}
33 |
34 |
{`${dt.date} ${dt.time}`}
35 |
28 |
29 |
{this.type[d.dynamic.dynamic_type]}
30 |
{`${dt.date} ${dt.time}`}
31 |
33 |
{d.posts[0].title}
34 | {d.posts[0].image !== null ? (
35 |
36 | ) : null}
37 |
39 | );
40 | });
41 | return ;
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/Comment/Textarea.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import PropTypes from "prop-types";
3 |
4 | export default class CommentTextarea extends Component {
5 | static propTypes = {
6 | create: PropTypes.func,
7 | refx: PropTypes.object
8 | };
9 | constructor(props) {
10 | super(props);
11 | this.state = {
12 | value: ""
13 | };
14 | this.change = this.change.bind(this);
15 | this.submit = this.submit.bind(this);
16 | }
17 | shouldComponentUpdate(nextProps, nextState) {
18 | return nextState.value !== this.state.value;
19 | }
20 | change(e) {
21 | e.stopPropagation();
22 | e.target.style.height = "auto";
23 | e.target.style.height = `${e.target.scrollHeight - 20}px`;
24 | e.target.scrollTop = e.target.scrollHeight;
25 |
26 | this.setState({ value: e.target.value });
27 | }
28 | submit(e) {
29 | e.stopPropagation();
30 | const { value } = this.state;
31 |
32 | this.props.create(value);
33 | this.setState({ value: "" });
34 | }
35 | render() {
36 | return (
37 |
38 |
47 | 评论
48 |
49 | );
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/pages/Subscr/Search.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Link } from "react-router-dom";
3 | import PropTypes from "prop-types";
4 |
5 | export default class Search extends Component {
6 | static propTypes = {
7 | search: PropTypes.func,
8 | path: PropTypes.string
9 | };
10 | constructor(props) {
11 | super(props);
12 | this.state = {
13 | value: ""
14 | };
15 | this.change = this.change.bind(this);
16 | this.keyup = this.keyup.bind(this);
17 | }
18 | change(e) {
19 | e.stopPropagation();
20 | this.setState({ value: e.target.value });
21 | }
22 | keyup(e) {
23 | e.stopPropagation();
24 | if (e.key === "Enter" && this.state.value !== "")
25 | this.props.search(this.state.value);
26 | }
27 | render() {
28 | const { path } = this.props;
29 | return (
30 |
31 |
48 | );
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/Collect/Create.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import PropTypes from "prop-types";
3 |
4 | export default class CollectCreateView extends Component {
5 | static propTypes = {
6 | image: PropTypes.string,
7 | openFile: PropTypes.func,
8 | refx: PropTypes.object,
9 | change: PropTypes.func,
10 | changeFile: PropTypes.func,
11 | name: PropTypes.string
12 | };
13 | render() {
14 | return (
15 |
16 |
17 | 收藏夹头像
18 |
19 |
20 |
22 |
支持jpg、jpeg、png格式
23 |
上传图片
24 |
31 |
33 |
34 | 收藏夹名
35 |
36 |
46 |
47 |
48 | );
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/pages/Subscr/List.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { observer } from "mobx-react";
3 | import PropTypes from "prop-types";
4 |
5 | @observer
6 | export default class List extends Component {
7 | static propTypes = {
8 | label: PropTypes.array,
9 | followtype: PropTypes.node,
10 | follow_type: PropTypes.func
11 | };
12 | render() {
13 | const { label, followtype } = this.props;
14 | const labelList = label.map((labels, index) => {
15 | const isFollow = followtype.includes(labels.type);
16 | return (
17 |
21 |
22 |
23 |
{labels.type}
24 |
25 | {`${labels.followtype_count} 关注`}
26 | {`${labels.article_count} 文章`}
27 |
28 |
32 | {isFollow ? "已关注" : "关注"}
33 |
34 |
36 | );
37 | });
38 | return (
39 |
40 | {label.length === 0 ? (
41 |
没有找到该标签
42 | ) : (
43 |
44 | )}
45 |
40 |
文章搜索
41 |
54 |
55 | );
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/pages/Setter/Account.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { inject, observer } from "mobx-react";
3 | import PropTypes from "prop-types";
4 |
5 | import AccountView from "./AccountView";
6 |
7 | @inject("Appstore", "Setterstore")
8 | @observer
9 | export default class Account extends Component {
10 | static propTypes = {
11 | Appstore: PropTypes.object,
12 | Setterstore: PropTypes.object
13 | };
14 | constructor(props) {
15 | super(props);
16 | this.send = this.send.bind(this);
17 | this.changefile = this.changefile.bind(this);
18 | this.openfile = this.openfile.bind(this);
19 | this.change = this.change.bind(this);
20 | this.refx = React.createRef();
21 | }
22 |
23 | change(e) {
24 | e.stopPropagation();
25 | this.props.Setterstore.change(e.target.name, e.target.value);
26 | }
27 |
28 | openfile(e) {
29 | e.stopPropagation();
30 | this.refx.current.click();
31 | }
32 |
33 | changefile(e) {
34 | e.stopPropagation();
35 | if (e.target.files.length > 0) {
36 | this.props.Setterstore.uploadImage(e.target.files[0]);
37 | }
38 | }
39 | send(e) {
40 | e.stopPropagation();
41 | this.props.Setterstore.setInform();
42 | }
43 | render() {
44 | return (
45 |
46 |
53 |
54 | 保存
55 |
56 |
44 |
45 |
46 | 新浪微博
48 |
49 |
50 | 腾讯微信
52 |
53 |
54 |
24 |
25 |
26 |
27 |
32 |
33 |
38 |
39 |
44 |
45 |
46 |
49 |
50 |
51 |
52 |
28 |
32 | {length}
33 |
34 |
35 | {open_comment ? "收起评论" : `${count} 评论`}
36 |
37 |
38 | 收藏
39 |
40 |
41 | 转发
42 |
43 | {is_my_people ? (
44 |
45 | 删除
46 | 编辑
47 |
48 | ) : null}
49 | {open_article ? (
50 |
51 | 收起∧
52 |
53 | ) : null}
54 |
47 |
48 |
{message.text}
49 |
;
43 | }
44 | const { author } = this.state;
45 | const is_follow = this.props.Appstore.following.includes(this.state.author._id);
46 | return (
47 |
55 | );
56 | }
57 |
58 | componentDidMount() {
59 | ajax.getAuthor(this.props.user_id, false).then(({ author }) =>
60 | this.setState({ author })
61 | );
62 | }
63 | //componentWillUnmount(){}
64 | }
65 |
--------------------------------------------------------------------------------
/src/components/Modal/remove/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import PropTypes from "prop-types";
3 | import Portal from "./Portal";
4 |
5 | export default class Index extends Component {
6 | static propTypes = {
7 | visibility: PropTypes.bool,
8 | description: PropTypes.object,
9 | onRemove: PropTypes.func,
10 | offRemove: PropTypes.func
11 | };
12 | constructor(props) {
13 | super(props);
14 | this.animationiteration = this.animationiteration.bind(this);
15 | this.animationend = this.animationend.bind(this);
16 |
17 | this.no = this.no.bind(this);
18 | this.ok = this.ok.bind(this);
19 | this.refc = React.createRef(); //控制过渡动画
20 | }
21 |
22 | animationiteration(e) {
23 | //初加载
24 | e.stopPropagation();
25 | this.refc.current.style.animationPlayState = "paused";
26 | }
27 |
28 | animationend(e) {
29 | //动画结束
30 | e.stopPropagation();
31 | this.props.offRemove();
32 | }
33 |
34 | no(e) {
35 | //取消
36 | e.stopPropagation();
37 | this.refc.current.parentElement.style.opacity = 0;
38 | this.refc.current.style.animationPlayState = "running";
39 | }
40 | ok(e) {
41 | //确定
42 | e.stopPropagation();
43 | this.props.onRemove();
44 | }
45 | render() {
46 | if (this.props.visibility === false) return null;
47 | return (
48 |
49 |
54 |
{this.props.description.title}
55 |
56 | 取消
57 |
58 | 确定
59 |
60 |
61 |
63 | );
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/pages/Posts/Article.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { inject, observer } from "mobx-react";
3 |
4 | import PropTypes from "prop-types";
5 |
6 | import ArticleType from "./Type";
7 | import ArticleAuthor from "./Author";
8 | import ArticleHtml from "./Html";
9 | import ArticleAction from "./Action";
10 | import Comment from "@components/Comment";
11 |
12 | @inject("Appstore")
13 | @observer
14 | export default class ArticleContainer extends Component {
15 | static propTypes = {
16 | Appstore: PropTypes.object,
17 | article: PropTypes.object.isRequired,
18 | is_my_people: PropTypes.bool.isRequired,
19 | index: PropTypes.number.isRequired
20 | };
21 | render() {
22 | const { article, is_my_people, index } = this.props;
23 | const { read_article, read_comment } = this.props.Appstore.app;
24 | const user_id = this.props.Appstore.id;
25 | return (
26 |
27 |
51 | );
52 | }
53 | //componentDidMount(){console.log("componentDidMount");}
54 | }
55 |
--------------------------------------------------------------------------------
/src/pages/People/Header.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { inject, observer } from "mobx-react";
3 | import PropTypes from "prop-types";
4 |
5 | @inject("Appstore")
6 | @observer
7 | export default class PeopleHeader extends Component {
8 | static propTypes = {
9 | author: PropTypes.object,
10 | Appstore: PropTypes.object,
11 | history: PropTypes.object,
12 | match: PropTypes.object
13 | };
14 | constructor(props) {
15 | super(props);
16 | this.follow = this.follow.bind(this);
17 | this.is_myhome = false;
18 | }
19 | follow(e) {
20 | e.stopPropagation();
21 | if (this.is_myhome === false) {
22 | this.props.Appstore.follow(e.target.dataset.author_id);
23 | } else {
24 | this.props.history.push("/setter/account");
25 | }
26 | }
27 | render() {
28 | this.is_myhome =
29 | this.props.Appstore.id === this.props.match.params.id ? true : false;
30 | const is_follow = this.props.Appstore.following.includes(
31 | this.props.match.params.id
32 | )
33 | ? "已关注"
34 | : "关注他";
35 | const style = is_follow === "已关注" ? "is_follow_button" : "no_follow_button";
36 | const author = this.props.author;
37 | return (
38 |
39 |
40 |
41 |
42 |
43 |
44 |
{author.name}
45 |
{author.information}
46 |
47 |
48 |
52 | {this.is_myhome ? "编辑个人资料" : is_follow}
53 |
54 |
55 |
56 |
38 | {image !== null ? (
39 |
40 |
43 | ) : (
44 |
48 | )}
49 | {image !== null ?
: null}
50 |
58 |
19 |
20 | ${article.text}...
21 | 阅读全文
22 |
25 |
26 |
27 | ${article.text}...
28 | 阅读全文
29 |
40 |
41 |
43 |
47 | {open_article ? (
48 |
{`发布于 ${dt.date} ${dt.time}`}
49 | ) : null}
50 |
53 |
54 | {read_count > 0 ? (
55 |
{read_count < 99 ? read_count : "99+"}
56 | ) : null}
57 | {open === "message" ? (
58 |
59 | ) : null}
60 |
45 |
46 |
47 |
48 |
55 | );
56 | }
57 | componentWillUnmount() {
58 | this.props.Appstore.setState("app", {
59 | posts: [],
60 | read_article: [],
61 | read_comment: []
62 | });
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/src/pages/Article/Header.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Link } from "react-router-dom";
3 | import { inject, observer } from "mobx-react";
4 | import PropTypes from "prop-types";
5 |
6 | @inject("Appstore")
7 | @observer
8 | export default class PropsHeader extends Component {
9 | static propTypes = {
10 | Appstore: PropTypes.object,
11 | title: PropTypes.string,
12 | image: PropTypes.string,
13 | count: PropTypes.number,
14 | author: PropTypes.object
15 | };
16 |
17 | constructor(props) {
18 | super(props);
19 | this.follow = this.follow.bind(this);
20 | }
21 |
22 | follow(e) {
23 | e.stopPropagation(); //禁止冒泡
24 | this.props.Appstore.follow(this.props.author._id);
25 | }
26 | render() {
27 | const { title, image, count, author } = this.props;
28 | const is_follow = this.props.Appstore.following.includes(author._id);
29 | return (
30 |
31 |
32 |
33 |
34 |
{title}
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
47 |
{author.information}
48 |
49 |
50 |
55 | {is_follow ? "已关注" : "关注他"}
56 |
57 |
58 |
59 |
{`${count}人喜欢该文章`}
60 |
33 |
34 |
35 |
45 | {
46 | return
49 |
54 | );
55 | }
56 | }
57 | export default hot(module)(App);
58 |
--------------------------------------------------------------------------------
/src/components/Label/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { inject, observer } from "mobx-react";
3 | import PropTypes from "prop-types";
4 | import { app as ajax } from "@request";
5 |
6 | @inject("Appstore")
7 | @observer
8 | export default class Index extends Component {
9 | static propTypes = {
10 | Appstore: PropTypes.object,
11 | type: PropTypes.string.isRequired
12 | };
13 | constructor(props) {
14 | super(props);
15 | this.state = {
16 | label: null
17 | };
18 | this.follow = this.follow.bind(this);
19 | this.mouseLeave = this.mouseLeave.bind(this);
20 | this.mouseover = this.mouseover.bind(this);
21 | }
22 | follow(e) {
23 | e.stopPropagation();
24 | this.props.Appstore.follow_type(this.state.label.type);
25 | }
26 | mouseover(e) {
27 | e.stopPropagation();
28 | this.props.Appstore.setState("hove", { opacity: 1 });
29 | }
30 | mouseLeave(e) {
31 | e.stopPropagation();
32 | this.props.Appstore.setState("hove", { opacity: 0 });
33 | }
34 | render() {
35 | if (this.state.label === null) {
36 | return
;
37 | }
38 | const { label } = this.state;
39 | const isFollow = this.props.Appstore.followtype.includes(label.type);
40 | return (
41 |
45 |
46 |
47 |
{label.type}
48 |
49 |
{label.describe}
50 |
51 |
52 | {`文章 ${label.article_count}`}
53 | {`关注 ${label.followtype_count}`}
54 |
55 |
56 |
59 | {isFollow ? "已关注" : "关注"}
60 |
61 |
39 |
40 |
41 |
43 |
{collect.name}
44 |
{`${dt.date} 创建 · 收藏 ${
45 | collect.collect_count
46 | } 篇文章`}
47 |
49 |
查看
50 | {this.is_myhome ? (
51 |
52 | 删除
53 |
54 | ) : null}
55 |
57 | );
58 | });
59 | return (
60 |
61 |
62 |
69 | );
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/components/Header/User/MessageList.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { observer } from "mobx-react";
3 | import { Link } from "react-router-dom";
4 | import PropTypes from "prop-types";
5 |
6 | @observer
7 | export default class MessageList extends Component {
8 | static propTypes = {
9 | Appstore: PropTypes.object,
10 | left: PropTypes.number,
11 | message: PropTypes.object,
12 | scroll: PropTypes.func
13 | };
14 | render() {
15 | const { message } = this.props;
16 | const list = [];
17 | for(let i = 0; i < message.length; i++){
18 | if(message[i].posts.length>0){
19 | const key = Math.random().toString(36).substring(2, 6);
20 | const m = message[i];
21 | if (m.message.message_type === "reply_posts") {
22 | list.push(
23 |
24 | 评论了你的文章
28 |
30 | );
31 | } else if (m.message.message_type === "reply_comment") {
32 | list.push(
33 |
34 | 在文章
38 | 回复了你的评论
40 |
41 | );
42 | } else if (m.message.message_type === "follow") {
43 | list.push(
44 |
45 | 关注了你
49 |
50 | );
51 | }
52 | }
53 | }
54 | return (
55 |
56 |
57 | {list.length === 0 ? (
58 |
还没有任何消息推送
59 | ) : (
60 |
61 | )}
62 |
63 |
35 |
36 |
42 |
43 |
44 |
55 |
60 |
61 |
;
36 | return (
37 |
38 |
39 |
40 |
41 |
44 |
51 |
52 |
56 |
47 |
48 |
50 | 创建文章
51 |
52 |
53 | );
54 | }
55 |
56 | componentDidMount() {
57 | this.editor = new E("#write");
58 |
59 | this.editor.customConfig.debug = location.href.indexOf("/file") > 0; //debug
60 | this.editor.customConfig.lang = {
61 | //title
62 | 正文: "p",
63 | 链接文字: "链接文字",
64 | 链接: "链接",
65 | 上传图片: "上传图片",
66 | 创建: "init"
67 | };
68 |
69 | this.editor.customConfig.menus = [
70 | "head", //标题
71 | "bold", //粗体
72 | "italic", //斜体
73 | "quote", // 引用
74 | "code", // 插入代码
75 | "list", // 列表
76 | "link", // 插入链接
77 | "image", // 插入图片
78 | "video", // 插入视频
79 | "undo" // 撤销
80 | ];
81 | this.editor.customConfig.pasteIgnoreImg = true; //只允许上传图片，不允许任何复制过来的图片
82 | this.editor.customConfig.zIndex = 1;
83 | this.editor.customConfig.customUploadImg = this.upload;
84 | this.editor.customConfig.onchangeTimeout = 0;
85 | this.editor.customConfig.onchange = this.getHtml;
86 | this.editor.create();
87 | this.editor.txt.html(toJS(this.props.Editorstore.html));
88 | document
89 | .querySelector("#write")
90 | .addEventListener("DOMNodeRemoved", this.remove, false);
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # mengya
2 | 一个类知乎文章方面的应用项目，主要由react，mobx，react-router，axios，wangeditor，node.js，mongodb等编写
3 |
4 | ## 实现功能
5 | - [x] 登录注册
6 | - [x] 创建文章
7 | - [x] 关注标签
8 | - [x] 文章过滤
9 | - [x] 文章排序
10 | - [x] 用户设置
11 | - [x] 用户消息
12 | - [x] 用户动态
13 | - [x] 关注用户
14 | - [x] 收藏文章
15 | - [x] 评论文章
16 | - [x] 个人主页
17 | - [x] 后台管理系统等
18 |
19 | ## 注意事项
20 | 本项目是在pc端最新版chrome浏览器开发测试，且使用纯CSS3原生开发没有使用任何UI组件库和预编译器，除了后台管理系统是使用蚂蚁金服的antd UI组件开发，在其他pc端浏览器、移动端浏览器和旧版本浏览器运行可能会出现页面布局、样式怪异行为，所以请使用最新版pc端chrome浏览器运行测试
21 |
22 | ## 安装
23 | 在运行前端项目前请先安装后端项目[node-mengya](https://github.com/manyuewuxin/node-mengya)
24 | ，由于build没有配置过复杂的各种环境打包开发测试，需要后端的mongodb支持，不然打开浏览器运行前端项目没有数据响应会报错
25 |
26 | git clone https://github.com/manyuewuxin/mengya.git
27 | cd mengya
28 | npm install
29 | npm run build
30 | npm run dev
31 | 访问: http://localhost:3000
32 |
33 | ## 关联项目
34 | 后端：[node-mengya](https://github.com/manyuewuxin/node-mengya)
35 |
36 | 后台管理系统：[manage](https://github.com/manyuewuxin/manage)
37 |
38 | ## 项目布局
39 | ```
40 | .
41 | ├── build // webpack配置文件
42 | ├── config // 项目打包路径
43 | ├── dist // 打包目录
44 | ├── screenshots // 项目截图
45 | ├── src // 源码目录
46 | │ ├── assets
47 | │ │ ├── css // css样式文件
48 | │ │ ├── font // font字体文件
49 | │ │ └── img // 公共图片文件
50 | │ ├── components // 公共组件
51 | │ │ ├── Author // 作者模态框组件
52 | │ │ ├── Collect // 收藏夹模态框组件
53 | │ │ ├── Header // 页面头部组件
54 | │ │ ├── Label // 标签模态框
55 | │ │ ├── Modal // 模态框接口
56 | │ │ ├── Events // 统一文章列表整个click和mouseover事件的高阶组件
57 | │ │ ├── Forward // 转发
58 | │ │ └── Page // 分页组件
59 | │ ├── pages
60 | │ │ ├── Article // 单独一篇文章
61 | │ │ ├── Collect // 收藏文章列表展示
62 | │ │ ├── Editor // 编写文章
63 | │ │ ├── People // 用户个人主页
64 | │ │ ├── Posts // 文章列表展示
65 | │ │ ├── Setter // 用户设置个人资料
66 | │ │ ├── Login // 登录注册
67 | │ │ ├── Subscr // 所有标签
68 | │ │ ├── App.js
69 | │ │ └── router.js
70 | │ ├── store // mobx状态管理
71 | │ │ ├── index.js // 调出接口
72 | │ │ ├── Appstore.js
73 | │ │ ├── Editorstore.js
74 | │ │ ├── Peoplestore.js
75 | │ │ └── Setterstore.js
76 | │ ├── request // 统一请求处理
77 | │ ├── template // webpack打包HTML模板文件
78 | │ ├── utils // 常用方法
79 | │ └── index.js // 入口
80 | ├── .babelrc // babel配置
81 | ├── .eslintignore // eslint忽略配置
82 | ├── .eslintrc.json // eslint配置
83 | ├── .gitignore // git忽略配置
84 | └── package.json // npm
85 | .
86 |
87 | ```
88 |
89 | ## 部分截图
90 |
91 | 
92 |
93 | 
94 |
--------------------------------------------------------------------------------
/src/pages/Editor/Label.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { observer, inject } from "mobx-react";
3 | import PropTypes from "prop-types";
4 | import { app as ajax } from "@request";
5 |
6 | @inject("Editorstore")
7 | @observer
8 | export default class Label extends Component {
9 | static propTypes = {
10 | Editorstore: PropTypes.object
11 | };
12 | constructor(props) {
13 | super(props);
14 | this.state = {
15 | quertList: [],
16 | value: ""
17 | };
18 | this.change = this.change.bind(this);
19 | this.setLabel = this.setLabel.bind(this);
20 | this.timeID = null;
21 | }
22 |
23 | change(e) {
24 | e.stopPropagation();
25 | const value = e.target.value;
26 | if (e.target.value === "") {
27 | this.quertList = [];
28 | this.setState({ quertList: [], value: "" });
29 | } else if (this.props.Editorstore.type.length < 3) {
30 | if (this.timeID !== null) {
31 | window.clearTimeout(this.timeID);
32 | this.timeID = null;
33 | }
34 | this.timeID = window.setTimeout(() => {
35 | ajax.getLabel(`search=${value}`, 1).then(({ label }) => {
36 | if (this.state.value !== "") this.setState({ quertList: label });
37 | window.clearTimeout(this.timeID);
38 | this.timeID = null;
39 | });
40 | }, 0);
41 | }
42 | this.setState({ value: e.target.value });
43 | }
44 | setLabel(e) {
45 | e.stopPropagation();
46 | if (e.target.dataset.removeindex) {
47 | this.props.Editorstore.removeType(Number(e.target.dataset.removeindex));
48 | } else if (e.target.dataset.querylabel) {
49 | if (this.props.Editorstore.type.length < 4) {
50 | this.props.Editorstore.addType(e.target.dataset.querylabel);
51 | this.quertList = [];
52 | this.setState({
53 | quertList: [],
54 | value: ""
55 | });
56 | }
57 | }
58 | }
59 | render() {
60 | const list = this.props.Editorstore.type.map((type, index) => {
61 | return (
62 |
66 |
67 | {type}
68 |
70 |
71 | );
72 | });
73 | const quertLists = this.state.quertList.map((label) => (
74 |
79 | {label.type}
80 |
81 | ));
82 |
83 | return (
84 |
101 | );
102 | }
103 | }
104 |
--------------------------------------------------------------------------------
/src/pages/People/Content/Follow.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Link } from "react-router-dom";
3 | import { inject, observer } from "mobx-react";
4 | import PropTypes from "prop-types";
5 |
6 | @inject("Appstore", "Peoplestore")
7 | @observer
8 | export default class Followers extends Component {
9 | static propTypes = {
10 | Appstore: PropTypes.object,
11 | Peoplestore: PropTypes.object,
12 | match: PropTypes.object,
13 | location: PropTypes.object
14 | };
15 | constructor(props) {
16 | super(props);
17 | this.follow = this.follow.bind(this);
18 | this.is_myhome = false;
19 | }
20 |
21 | follow(e) {
22 | e.stopPropagation(); //禁止冒泡
23 | this.props.Peoplestore.follow(Number(e.target.dataset.index));
24 | }
25 |
26 | render() {
27 | this.is_myhome =
28 | this.props.Appstore.id === this.props.match.params.id ? true : false;
29 |
30 | const following = this.props.Appstore.following;
31 |
32 | const { people } = this.props.Peoplestore;
33 |
34 | const list = people.map((f, index) => {
35 | const author = f.author[0];
36 | const is_follow = following.includes(author._id);
37 | return (
38 |
43 |
44 |
45 |
46 |
47 |
49 |
50 |
54 |
{author.information}
55 |
{`${
56 | author.create_p_count
57 | } 篇文章 · ${author.followers_count} 关注者`}
58 |
68 | );
69 | });
70 | return (
71 |
72 |
73 |
74 |
82 |
83 |
91 |
94 | );
95 | }
96 | }
97 |
--------------------------------------------------------------------------------
/src/store/Setterstore.js:
--------------------------------------------------------------------------------
1 | import { observable, action } from "mobx";
2 | import appstore from "./Appstore";
3 | import { app, setter } from "../request";
4 | class Setterstore {
5 | @observable
6 | form = {
7 | avatar: "",
8 | name: "",
9 | carrer: "",
10 | company: "",
11 | information: "",
12 | userlike: "",
13 | password: "",
14 | newpassword: "",
15 | newpasswords: ""
16 | };
17 |
18 | @action
19 | setState(obj) {
20 | if (Object.prototype.toString.call(obj) === "[object Object]") {
21 | for (var key in obj) {
22 | if (key in this) {
23 | this[key] = obj[key];
24 | }
25 | }
26 | }
27 | }
28 |
29 | @action
30 | init() {
31 | Promise.all([app.getUser(), app.getMessage(1)]).then(
32 | action(([u, m]) => {
33 | for (let key in this.form) {
34 | this.form[key] = u.user[key];
35 | }
36 | appstore.setState("app", { user: u.user });
37 | appstore.setUserMessage(m, 1);
38 | })
39 | );
40 | }
41 |
42 | @action
43 | change(key, value) {
44 | this.form[key] = value;
45 | }
46 |
47 | async uploadImage(file) {
48 | try {
49 | await app.removeFile({ folder: "avatar", url: this.form.avatar });
50 | } catch (err) {
51 | console.log(err);
52 | }
53 | const { url } = await app.uploadFile("avatar", file);
54 | await this.setAvatar(url);
55 | }
56 |
57 | @action
58 | setAvatar(url) {
59 | this.form.avatar = url;
60 | }
61 |
62 | @action
63 | setInform() {
64 | if (/^[a-zA-Z0-9\u4e00-\u9fa5]{2,8}$/.test(this.form.name)) {
65 | Promise.resolve(this.form)
66 | .then(({ password, newpassword, newpasswords, ...name }) => {
67 | const data = {};
68 | const user = appstore.user;
69 | for (let key in name) {
70 | if (name[key] !== user[key]) {
71 | data[key] = name[key];
72 | }
73 | }
74 | return data;
75 | })
76 | .then((data) => {
77 | return Object.keys(data).length > 0 ? setter.setAccount(data) : true;
78 | })
79 | .then(() => {
80 | appstore.setMessage({ text: "修改资料成功", is: true });
81 | })
82 | .catch(({ err }) => {
83 | appstore.setMessage({ text: err, is: false });
84 | });
85 | } else {
86 | appstore.setMessage({ text: "用户名必须为2-8个中英文字符组合", is: false });
87 | }
88 | }
89 |
90 | @action
91 | setPassword() {
92 | Promise.resolve(this.form)
93 | .then(({ password, newpassword, newpasswords }) => {
94 | const data = { password, newpassword, newpasswords };
95 | for (var key in data) {
96 | if (/^[a-zA-Z0-9\W]{6,15}$/.test(data[key]) === false) {
97 | return Promise.reject({ err: "密码错误" });
98 | }
99 | }
100 | if (newpassword !== newpasswords) {
101 | return Promise.reject({ err: "新旧密码不一致" });
102 | }
103 | return setter.setPassword(data);
104 | })
105 | .then(() => {
106 | return appstore.quit();
107 | })
108 | .then(() => {
109 | appstore.setMessage({ text: "修改密码成功，请重新登录", is: true });
110 | })
111 | .catch(({ err }) => {
112 | appstore.setMessage({ text: err, is: false });
113 | });
114 | }
115 | }
116 |
117 | export default new Setterstore();
118 |
--------------------------------------------------------------------------------
/src/pages/Subscr/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { inject, observer } from "mobx-react";
3 | import PropTypes from "prop-types";
4 | import { app as ajax } from "@request";
5 |
6 | import Search from "./Search";
7 | import List from "./List";
8 |
9 | @inject("Appstore")
10 | @observer
11 | export default class Index extends Component {
12 | static propTypes = {
13 | Appstore: PropTypes.object,
14 | history: PropTypes.object,
15 | location: PropTypes.object,
16 | match: PropTypes.object
17 | };
18 | constructor(props) {
19 | super(props);
20 | this.state = {
21 | label: null,
22 | page: 1,
23 | query: "type=all",
24 | updataPath: false
25 | };
26 | this.search = this.search.bind(this);
27 | this.follow_type = this.follow_type.bind(this);
28 | this.scroll = this.scroll.bind(this);
29 | this.time = null;
30 | }
31 | UNSAFE_componentWillReceiveProps(nextProps) {
32 | if (nextProps.location.pathname !== this.props.location.pathname) {
33 | this.setState({ updataPath: true });
34 | }
35 | }
36 | search(value) {
37 | if (value) {
38 | ajax.getLabel(`search=${value}`, 1).then(({ label }) => {
39 | this.setState({ label: label, query: `search=${value}` });
40 | });
41 | }
42 | }
43 |
44 | follow_type(e) {
45 | e.stopPropagation();
46 | const { index } = e.target.dataset;
47 | this.props.Appstore.follow_type(this.state.label[index].type);
48 | }
49 | scroll(e) {
50 | e.stopPropagation();
51 | if (this.time !== null) {
52 | window.clearTimeout(this.time);
53 | this.time = null;
54 | }
55 | this.time = window.setTimeout(() => {
56 | const scrollTop = Math.round(document.documentElement.scrollTop); //获取滚动高度像素
57 | const scrollHeight = scrollTop + window.innerHeight; //滚动高度像素+浏览器窗口屏幕可见高度
58 | if (scrollHeight >= document.documentElement.scrollHeight - 100) {
59 | const { label, page, query } = this.state;
60 | ajax.getLabel(query, page).then((data) => {
61 | const arr = label.concat(data.label);
62 |
63 | if (data.label.length > 0)
64 | this.setState({ label: arr, page: page + 1 });
65 |
66 | window.clearTimeout(this.time);
67 | this.time = null;
68 | });
69 | }
70 | }, 100);
71 | }
72 | render() {
73 | if (this.state.label === null) return
;
74 | return (
75 |
76 |
82 |
83 | );
84 | }
85 | componentDidMount() {
86 | ajax.getLabel(`type=${this.props.match.params.path}`, 1).then(({ label }) => {
87 | this.setState({
88 | label: label,
89 | page: this.state.page + 1,
90 | query: `type=${this.props.match.params.path}`
91 | });
92 | this.props.Appstore.getUser(1);
93 | });
94 | window.addEventListener("scroll", this.scroll, false);
95 | }
96 | componentDidUpdate() {
97 | if (this.state.updataPath) {
98 | ajax.getLabel(`type=${this.props.match.params.path}`, 1).then(({ label }) => {
99 | this.setState({
100 | label: label,
101 | page: this.state.page + 1,
102 | query: `type=${this.props.match.params.path}`,
103 | updataPath: false
104 | });
105 | });
106 | }
107 | }
108 | componentWillUnmount() {
109 | window.removeEventListener("scroll", this.scroll, false);
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/src/pages/Login/Submit.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import PropTypes from "prop-types";
3 |
4 | export default class Button extends Component {
5 | static propTypes = {
6 | captcha: PropTypes.number,
7 | login: PropTypes.func,
8 | pathname: PropTypes.string
9 | };
10 | constructor(props) {
11 | super(props);
12 | this.state = {
13 | value: "",
14 | captcha: 0,
15 | error: null
16 | };
17 | this.send = this.send.bind(this);
18 | this.change = this.change.bind(this);
19 | this.keyup = this.keyup.bind(this);
20 | this.captcha = null;
21 | }
22 |
23 | send(e) {
24 | e.stopPropagation();
25 | if (this.props.captcha > 0) {
26 | if (this.captcha === this.state.value) {
27 | this.props.login();
28 | } else {
29 | this.setState({ captcha: this.state.captcha + 1, error: "验证码错误" });
30 | }
31 | } else {
32 | this.props.login();
33 | }
34 | }
35 | change(e) {
36 | e.stopPropagation();
37 | this.setState({ value: e.target.value });
38 | if (e.target.value === this.captcha) this.setState({ error: null });
39 | }
40 | createCaptcha() {
41 | const canvas = document.querySelector("#canvas"); //获取画布
42 | this.captcha = Math.random()
43 | .toString(36)
44 | .substring(2, 6); //随机生成四个字符串，或者for随机一个
45 | if (canvas) {
46 | var ctx = canvas.getContext("2d");
47 | ctx.clearRect(0, 0, 70, 32); //擦除画布
48 | ctx.fillStyle = "#FFFFFF";
49 | ctx.fillRect(0, 0, 70, 27);
50 | ctx.font = "23px arial";
51 | ctx.textAlign = "left";
52 | // 创建渐变
53 | var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
54 | gradient.addColorStop("0", "magenta");
55 | gradient.addColorStop("0.5", "blue");
56 | gradient.addColorStop("1.0", "red");
57 | // 用渐变填色
58 | ctx.strokeStyle = gradient;
59 | ctx.strokeText(this.captcha, 10, 23); //画布上添加验证码
60 | }
61 | }
62 | keyup(e) {
63 | e.stopPropagation();
64 | if (e.key === "Enter") this.send(e);
65 | }
66 | render() {
67 | const { value, error } = this.state;
68 | return (
69 |
70 | {this.props.captcha > 0 ? (
71 |
72 | {error}
92 |
93 | ) : null}
94 |
101 | {this.props.pathname === "/signin" ? "登录" : "注册"}
102 |
103 |
124 |
126 | );
127 | }
128 | }
129 | );
130 | }
131 |
--------------------------------------------------------------------------------
/src/pages/Posts/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { observer, inject } from "mobx-react";
3 | import PropTypes from "prop-types";
4 |
5 | import List from "./List";
6 | import Sidebar from "./Sidebar";
7 | import Events from "@components/Events";
8 | import utils from "@utils";
9 |
10 | @inject("Appstore")
11 | @Events
12 | @observer
13 | export default class Content extends Component {
14 | static propTypes = {
15 | Appstore: PropTypes.object,
16 | history: PropTypes.object,
17 | location: PropTypes.object
18 | };
19 | constructor(props) {
20 | super(props);
21 | this.time = null;
22 | this.scroll = this.scroll.bind(this);
23 | }
24 | UNSAFE_componentWillReceiveProps(nextProps) {
25 | if (
26 | nextProps.location.pathname !== this.props.location.pathname ||
27 | nextProps.location.search !== this.props.location.search
28 | ) {
29 | this.props.Appstore.setState("app", { update: true });
30 | }
31 | }
32 | scroll(e) {
33 | e.stopPropagation();
34 | if (this.time !== null) {
35 | window.clearTimeout(this.time);
36 | this.time = null;
37 | }
38 | this.time = window.setTimeout(() => {
39 | const scrollTop = Math.round(document.documentElement.scrollTop); //获取滚动高度像素
40 | const scrollHeight = scrollTop + window.innerHeight; //滚动高度像素+浏览器窗口屏幕可见高度
41 | if (scrollHeight >= document.documentElement.scrollHeight - 50) {
42 | //等于或大于整个文档高度时也就是滚动到底部时执行请求
43 |
44 | const { path, page } = this.props.Appstore.app;
45 | this.props.Appstore.getPosts(path, page);
46 | window.clearTimeout(this.time);
47 | this.time = null;
48 | }
49 | }, 100);
50 | }
51 |
52 | req({ location }) {
53 | if (location.pathname === "/") {
54 | const search = utils.search(location.search.split("?")[1]);
55 | const type = search.type || "all";
56 | this.props.Appstore.getPosts(`type=${type}`, 1);
57 | } else if (location.pathname === "/hot") {
58 | this.props.Appstore.setState("app", { read_article: [], read_comment: [] });
59 | this.props.Appstore.getPosts(`type=hot`, 1);
60 | } else if (location.pathname === "/search") {
61 | const search = utils.search(location.search.split("?")[1]);
62 | this.props.Appstore.setState("app", { read_article: [], read_comment: [] });
63 | this.props.Appstore.getPosts(`search=${search.query}`, 1);
64 | } else if (location.pathname === "/follow") {
65 | this.props.Appstore.getPosts("type=follow", 1);
66 | }
67 | }
68 |
69 | render() {
70 | if (this.props.Appstore.app.posts_loading) return null;
71 | return (
72 |
73 |
74 |
75 |
76 |
77 |
79 |
151 |
152 |
153 |
155 |
156 |
157 |
161 | 登录
162 |
163 | ·
164 |
168 | 注册
169 |
170 |
171 |
{this.state.error}
172 | {pathname === "/signin" ? (
173 |
178 | ) : (
179 |
184 | )}
185 |
191 |
192 |
193 |
173 |
174 |
179 |
199 |
147 | {listpage}
148 |
149 | );
150 | });
151 |
152 | if (page >= 5) {
153 | this.list.unshift(
154 |
158 |
165 | {1}
166 |
167 |
172 | ...
173 |
174 |
175 | );
176 | }
177 |
178 | if (page !== 1) {
179 | //上一页按钮
180 | this.list.unshift(
181 |
186 | 上一页
187 |
188 | );
189 | }
190 |
191 | if (page <= count - 4 && count > 5) {
192 | this.list.push(
193 |
197 |
202 | ...
203 |
204 |
211 | {count}
212 |
213 |
214 | );
215 | }
216 |
217 | if (page !== count) {
218 | //下一页按钮
219 | this.list.push(
220 |
225 | 下一页
226 |
227 | );
228 | }
229 | }
230 | render() {
231 | if (this.props.count > 0) {
232 | const { ulStyle } = this.props;
233 | return ;
234 | }
235 | return null;
236 | }
237 | }
238 |
--------------------------------------------------------------------------------
/src/components/Comment/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { observer, inject } from "mobx-react";
3 | import xss from "xss"; //过滤xss
4 | import PropTypes from "prop-types";
5 | import { app as ajax } from "@request";
6 |
7 | import CommentHeader from "./Header";
8 | import CommentList from "./List";
9 | import CommentTextarea from "./Textarea";
10 | import CommentPage from "../Page";
11 | import CommentRmoeve from "../Modal/remove";
12 | import Loading from "./Loading";
13 |
14 | @inject("Appstore")
15 | @observer
16 | export default class Comment extends Component {
17 | static propTypes = {
18 | Appstore: PropTypes.object,
19 | posts_id: PropTypes.string,
20 | author_id: PropTypes.string,
21 | p_index: PropTypes.number
22 | };
23 | constructor(props) {
24 | super(props);
25 | this.state = {
26 | comments: [],
27 | loading: true,
28 | count: 0,
29 | page: 0, //评论页数
30 | sort: 1, //-1是正序
31 | currentPage: 1,
32 | remove: null,
33 | visibility: false
34 | };
35 | this.setReversed = this.setReversed.bind(this);
36 | this.create = this.create.bind(this);
37 | this.setPage = this.setPage.bind(this);
38 | this.action = this.action.bind(this);
39 | this.onRemove = this.onRemove.bind(this);
40 | this.offRemove = this.offRemove.bind(this);
41 | this.refx = React.createRef();
42 | this.refc = React.createRef();
43 | this.accept_user_id = null;
44 | this.index = null;
45 | }
46 |
47 | getComment(posts_id, currentPage, sort) {
48 | ajax.getComment(posts_id, currentPage, sort).then(({ comment, count, page }) => {
49 | const timeID = window.setTimeout(() => {
50 | this.setState({
51 | comments: comment,
52 | loading: false,
53 | currentPage,
54 | count,
55 | page,
56 | sort
57 | });
58 | window.clearTimeout(timeID);
59 | }, 500);
60 | });
61 | }
62 |
63 | reply(e) {
64 | e.stopPropagation();
65 | const index = Number(e.target.dataset.index);
66 | const { comments } = this.state;
67 | const author = comments[index].author;
68 | this.accept_user_id = author[0]._id;
69 | this.refx.current.placeholder = `回复${author[0].name}:`;
70 | this.refx.current.focus();
71 | //const height = window.innerHeight/2;
72 |
73 | window.scroll(0, this.refx.current.parentElement.offsetTop - 300);
74 | }
75 |
76 | setReversed(e) {
77 | e.stopPropagation();
78 | const sort = this.state.sort === -1 ? 1 : -1;
79 | this.setState({ loading: true });
80 | this.getComment(this.props.posts_id, this.state.currentPage, sort);
81 | }
82 |
83 | setPage(page) {
84 | //跳到某页评论
85 | if (typeof page == "number") {
86 | window.scroll(0, this.refc.current.offsetTop - 50);
87 | this.setState({ loading: true });
88 | this.getComment(this.props.posts_id, page, this.state.sort);
89 | }
90 | }
91 |
92 | good(e) {
93 | //点赞评论
94 | e.stopPropagation();
95 |
96 | const index = Number(e.target.dataset.index);
97 | const { comments } = this.state;
98 |
99 | const comment_id = comments[index].comment.comment_id;
100 | const author = comments[index].author;
101 | const good = comments[index].comment.good;
102 |
103 | const posts_id = this.props.posts_id;
104 |
105 | if (this.props.Appstore.id !== author[0]._id) {
106 | const good_index = good.indexOf(this.props.Appstore.id);
107 | const action = good_index === -1 ? "add" : "remove";
108 |
109 | ajax.good({ comment_id, posts_id, action }).then(() => {
110 | good_index === -1
111 | ? comments[index].comment.good.push(this.props.Appstore.id)
112 | : comments[index].comment.good.splice(good_index, 1);
113 | this.setState({ comments });
114 | });
115 | } else {
116 | this.props.Appstore.setMessage({ text: "你不能点赞自己的评论", is: false });
117 | }
118 | }
119 |
120 | create(value) {
121 | if (/^.{1,300}$/.test(value)) {
122 | const text = xss(value);
123 | const user =
124 | this.accept_user_id !== null
125 | ? [this.props.Appstore.id, this.accept_user_id]
126 | : [this.props.Appstore.id];
127 | const { posts_id, author_id } = this.props;
128 |
129 | ajax.createComment({ posts_id, author_id, user, text }).then(
130 | ({ comment }) => {
131 | const { comments, count } = this.state;
132 | comments.push(comment);
133 | this.setState({ comments: comments, count: count + 1 });
134 | this.props.Appstore.comment_count("add", this.props.p_index);
135 | this.props.Appstore.setMessage({ text: "发表评论成功", is: true });
136 | }
137 | );
138 | } else {
139 | this.props.Appstore.setMessage({
140 | text: "评论内容限制在1-300个字节内",
141 | is: false
142 | });
143 | }
144 | }
145 |
146 | onRemove() {
147 | const { comments, currentPage, sort, count } = this.state;
148 |
149 | const { posts_id, author_id } = this.props;
150 | const comment_id = comments[this.index].comment.comment_id;
151 | const user = comments[this.index].comment.user;
152 |
153 | if (user[0] === this.props.Appstore.id) {
154 | ajax.removeComment({ comment_id, posts_id, author_id, user }).then(() => {
155 | if(comments.length-1 > 0){
156 | comments.splice(this.index, 1);
157 | this.props.Appstore.comment_count("remove", this.props.p_index);
158 | this.setState({
159 | comments: comments,
160 | count: count - 1,
161 | visibility: false,
162 | description: null
163 | });
164 | }
165 | else{
166 | const pages = currentPage - 1 > 0 ? currentPage-1 : 1;
167 | this.props.Appstore.comment_count("remove", this.props.p_index);
168 | this.setState({ visibility: false, description: null });
169 | this.getComment(posts_id, pages, sort);
170 | }
171 | });
172 | }
173 | }
174 |
175 | offRemove() {
176 | this.index = null;
177 | this.setState({ visibility: false, description: null });
178 | }
179 |
180 | remove(e) {
181 | e.stopPropagation();
182 | this.index = Number(e.target.dataset.index);
183 | this.setState({
184 | visibility: true,
185 | description: { title: "你确定要删除这条评论吗？" }
186 | });
187 | }
188 |
189 | action(e) {
190 | e.stopPropagation();
191 | if (e.target.dataset.action) {
192 | switch (e.target.dataset.action) {
193 | case "reply":
194 | this.reply(e);
195 | break;
196 |
197 | case "good":
198 | this.good(e);
199 | break;
200 |
201 | case "remove":
202 | this.remove(e);
203 | break;
204 | }
205 | }
206 | }
207 | render() {
208 | const {
209 | sort,
210 | comments,
211 | loading,
212 | count,
213 | page,
214 | visibility,
215 | description,
216 | currentPage
217 | } = this.state;
218 | return (
219 |
220 |
221 |
222 | {loading ? }
223 |
232 |
239 | );
240 | }
241 | componentDidMount() {
242 | this.getComment(this.props.posts_id, 1, 1);
243 | }
244 | }
245 | //
246 |
--------------------------------------------------------------------------------
18 |
19 |