forked from Gitlink/forgeplus-react
251 lines
9.3 KiB
JavaScript
251 lines
9.3 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
||
import axios from "axios";
|
||
import { getImageUrl } from "educoder";
|
||
import { Breadcrumb, Spin, Empty } from "antd";
|
||
import { Link } from "react-router-dom";
|
||
import {
|
||
WhiteBack,
|
||
Box,
|
||
Long,
|
||
Short,
|
||
Gap,
|
||
FlexAJ,
|
||
AlignCenter,
|
||
P,
|
||
} from "./css/layout";
|
||
import Title from "./Component/Title";
|
||
import RenderHtml from "../components/render-html";
|
||
import { Type, Tag } from "./Component/ItemType";
|
||
import Drop from "./Component/ItemDropDown";
|
||
import UserInfo from "./Component/UserInfo";
|
||
import Prise from "./Component/Prise";
|
||
import ListItem from "./Component/ListItem";
|
||
import AuthorCard from "./Component/AuthorCard";
|
||
import BestItem from "./Component/BestItem";
|
||
import Original from "./image/original.png";
|
||
import Comments from "./new_comments/comments";
|
||
import Attachments from '../forge/Upload/attachment';
|
||
function memo_show(props) {
|
||
const memo_id = props.match.params.id;
|
||
const current_user = props.current_user;
|
||
|
||
const [memo, getMemo] = useState(null);
|
||
const [memoUser, getMemoUser] = useState(null);
|
||
const [replies, setReplies] = useState([]);
|
||
const [memoImage, setMemoImage] = useState(null);
|
||
const [recent_memos, setRecentmemos] = useState([]);
|
||
const [bannedPermission, setPermission] = useState(undefined);
|
||
const [isBanned, setIsBanned] = useState(false);
|
||
const [page, setListPage] = useState(1);
|
||
const [limit, setLimitType] = useState(5);
|
||
const [isSpin, setSpinType] = useState(false);
|
||
const [dropPermission, setDropPermission] = useState({});
|
||
useEffect(() => {
|
||
init();
|
||
related_memos();
|
||
}, [memo_id]);
|
||
|
||
async function init() {
|
||
setSpinType(true);
|
||
let url = `/memos/${memo_id}.json`;
|
||
axios
|
||
.get(url)
|
||
.then((result) => {
|
||
if (result) {
|
||
let per = {
|
||
admin:result.data && result.data.is_current_admin,
|
||
login: result.data && result.data.current_login,
|
||
banned_permission:result.data.banned_permission,
|
||
is_currentUser: result.data.author_info ? result.data.author_info.is_current_user : undefined,
|
||
is_fine: result.data.memo && result.data.memo.is_fine,
|
||
sticky: result.data.memo && result.data.memo.sticky,
|
||
memo_watched: result.data.memo && result.data.memo.memo_watched,
|
||
is_deleted:result.data.memo && result.data.memo.apply_destroy
|
||
}
|
||
setPermission(per);
|
||
|
||
getMemo(result.data.memo);
|
||
setMemoImage(result.data.memo_image_info); //封面信息
|
||
setRecentmemos(result.data.recent_memos);
|
||
setIsBanned(result.data.is_banned);
|
||
getMemoUser(result.data.author_info);
|
||
}
|
||
setSpinType(false);
|
||
})
|
||
.catch((e) => {
|
||
setSpinType(false);
|
||
console.log(e);
|
||
});
|
||
}
|
||
|
||
function related_memos() {
|
||
let url = `/memos/${memo_id}/related_memos.json`;
|
||
axios
|
||
.get(url)
|
||
.then((result) => {
|
||
if (result) {
|
||
setReplies(result.data.memos);
|
||
}
|
||
setSpinType(false);
|
||
})
|
||
.catch((e) => {
|
||
setSpinType(false);
|
||
console.log(e);
|
||
});
|
||
}
|
||
|
||
return (
|
||
<div className="clearfix educontent pt20 minH400">
|
||
<Spin spinning={isSpin}>
|
||
{memo && memoUser ? (
|
||
<div>
|
||
<Breadcrumb separator=">" style={{ marginBottom: "10px" }}>
|
||
<Breadcrumb.Item>
|
||
<Link to={`/forums`}>论坛</Link>
|
||
</Breadcrumb.Item>
|
||
{memo && memo.forum_tag && memo.forum_tag.id && (
|
||
<Breadcrumb.Item>
|
||
<Link to={`/forums/theme/${memo && memo.forum_tag.id}`}>
|
||
{memo && memo.forum_tag.title}
|
||
</Link>
|
||
</Breadcrumb.Item>
|
||
)}
|
||
<Breadcrumb.Item>
|
||
{memo ? memo.subject : "帖子详情"}
|
||
</Breadcrumb.Item>
|
||
</Breadcrumb>
|
||
<Box>
|
||
<Long>
|
||
<WhiteBack>
|
||
<div style={{ padding: "0px 30px" }}>
|
||
<Title className="headerInfo">
|
||
<div className="headerInfoLeft">
|
||
{memo && Type(`${memo.tag_name}`)}
|
||
<p className="font-18 grey-3" style={{ marginBottom: "0px",maxWidth:"514px"}}>
|
||
{memo && memo.subject}
|
||
</p>
|
||
{memo && memo.is_fine && Tag("精华")}
|
||
{memo && memo.sticky && Tag("置顶")}
|
||
</div>
|
||
<div style={{width:"130px",textAlign:"right"}}>
|
||
{current_user && current_user.login ? (
|
||
<Drop permission={bannedPermission} id={memo_id} calbackFunc={init} confirm={props.confirm}/>
|
||
):""}
|
||
</div>
|
||
{memo && memo.is_original && (
|
||
<img
|
||
src={Original}
|
||
className="originalTag"
|
||
width="80px"
|
||
/>
|
||
)}
|
||
</Title>
|
||
<AlignCenter className="font-12 pt15 pb15">
|
||
<UserInfo
|
||
url={getImageUrl(memoUser.image_url)}
|
||
name={memoUser.username}
|
||
login={memoUser.login}
|
||
/>
|
||
|
||
<span className="icon-wrap ml20">
|
||
<i className="iconfont icon-zhengyan font-18"></i>
|
||
<span className="span-text">
|
||
{memo && memo.viewed_count}
|
||
</span>
|
||
</span>
|
||
<span className="icon-wrap ml20">
|
||
<i className="iconfont icon-pinglun1 font-14"></i>
|
||
<span className="span-text">
|
||
{memo && memo.replies_count}
|
||
</span>
|
||
</span>
|
||
<span className="grey-8 ml20">
|
||
{memo && memo.published_time}
|
||
</span>
|
||
{memo && memo.apply_destroy && (
|
||
<span className="orange ml20">已申请删帖</span>
|
||
)}
|
||
</AlignCenter>
|
||
|
||
<div className="bor-bottom-greyE pb20 mb15">
|
||
{memoImage && (
|
||
<div className="pb20">
|
||
<img src={memoImage.url} style={{width: "100%"}}></img>
|
||
</div>
|
||
)}
|
||
|
||
<RenderHtml
|
||
className="tipsContent"
|
||
value={memo.content}
|
||
/>
|
||
{memo.attachment_url && memo.attachment_url.length > 0 &&
|
||
<Attachments
|
||
attachments={memo.attachment_url}
|
||
canDelete={false}
|
||
/>}
|
||
</div>
|
||
{!memo.is_original && memo.reprint_link && (
|
||
<p className="font-12 grey-8">转载自：{memo.reprint_link}</p>
|
||
)}
|
||
<Prise
|
||
isPrised={memo.user_praise}
|
||
num={memo.praises_count}
|
||
memo_id={memo.id}
|
||
container_type="Memo"
|
||
current_login={memoUser && memoUser.current_login}
|
||
props={props}
|
||
/>
|
||
</div>
|
||
</WhiteBack>
|
||
<WhiteBack className="mt15">
|
||
<Comments
|
||
target_id={memo && memo.id}
|
||
target_type="memos"
|
||
current_user_image={memoUser && memoUser.current_image_url}
|
||
current_login={memoUser && memoUser.current_login}
|
||
props={props}
|
||
/>
|
||
</WhiteBack>
|
||
{
|
||
replies && replies.length > 0 &&
|
||
<WhiteBack className="mt15">
|
||
<Title>
|
||
<span className="greenLiftLine">相关推荐</span>
|
||
</Title>
|
||
<ListItem memos={replies} calbackFunc={related_memos} current_user={current_user} confirm = {props.confirm}/>
|
||
</WhiteBack>
|
||
}
|
||
</Long>
|
||
<Short>
|
||
<Gap>
|
||
<AuthorCard user={memoUser} />
|
||
<WhiteBack className="mt15">
|
||
<Title>
|
||
<span>作者最近文章</span>
|
||
<a
|
||
className="font-12 grey-9"
|
||
href={`/accounts/${memoUser && memoUser.login}/memos`}
|
||
>
|
||
更多
|
||
<i className="font-12 iconfont icon-youjiantou ml5"></i>
|
||
</a>
|
||
</Title>
|
||
<div className="memo-detail-ul">
|
||
<BestItem memos={recent_memos} selectKey={["recommend"]} />
|
||
</div>
|
||
|
||
</WhiteBack>
|
||
</Gap>
|
||
</Short>
|
||
</Box>
|
||
</div>
|
||
) : (
|
||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className="pd200"></Empty>
|
||
)}
|
||
</Spin>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default memo_show;
|