Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(website): implement group topic page #113

Merged
merged 88 commits into from
Dec 1, 2022
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
88 commits
Select commit Hold shift + click to select a range
0e3a8b5
feat: new folder
cokemine Aug 3, 2022
9da3b46
Merge branch 'master' of https://github.com/bangumi/frontend into fea…
cokemine Aug 22, 2022
909002e
wip
cokemine Aug 22, 2022
5c444b1
fix: fix style import
cokemine Aug 22, 2022
f22e6d4
update api
cokemine Aug 31, 2022
657a9cb
refactor: replyinfo
cokemine Aug 31, 2022
540fa34
wip: add comments
cokemine Aug 31, 2022
75c95c9
add comment reply
cokemine Aug 31, 2022
45ce877
revert ci changes
cokemine Aug 31, 2022
15ce6ca
fix some styles
cokemine Aug 31, 2022
1d1d401
fix reply floor
cokemine Aug 31, 2022
cd06def
add reply collapse
cokemine Sep 1, 2022
de31299
update styles
cokemine Sep 1, 2022
1028ff9
add button group
cokemine Sep 3, 2022
ec9b9f6
fix
cokemine Sep 3, 2022
3a0ea4f
add reply editor
cokemine Sep 4, 2022
783b35f
fix bbcode editor style
cokemine Sep 4, 2022
e3c1b62
add reply editor
cokemine Sep 4, 2022
5d44f1f
add deleted state
cokemine Sep 4, 2022
9bf3939
Merge branch 'master' of https://github.com/bangumi/frontend into fea…
cokemine Sep 4, 2022
822b8b1
add special comment state
cokemine Sep 4, 2022
c17ce25
refactor
cokemine Sep 4, 2022
7155beb
wip: right col
cokemine Sep 5, 2022
bb7d72b
group info
cokemine Sep 5, 2022
592a50f
wip
cokemine Sep 5, 2022
1e5b3b4
wip
cokemine Sep 5, 2022
bf2c9d3
add reopen state
cokemine Sep 5, 2022
974e4de
fix button style
cokemine Sep 5, 2022
ade0492
Merge branch 'master' of https://github.com/bangumi/frontend into fea…
cokemine Sep 20, 2022
84a1833
wip
cokemine Sep 22, 2022
88c1ac1
wip
cokemine Sep 22, 2022
9c27ff4
fix build
cokemine Sep 22, 2022
a403251
fix: reply should not show sign
cokemine Sep 22, 2022
77d7599
fix
cokemine Sep 22, 2022
a7af1e1
Merge branch 'master' of https://github.com/bangumi/frontend into fea…
cokemine Sep 27, 2022
05cd4ef
fix: remove layout
cokemine Sep 27, 2022
9d79ed6
Merge branch 'master' of https://github.com/bangumi/frontend into fea…
cokemine Nov 17, 2022
56de47b
update
cokemine Nov 17, 2022
d721963
refactor
cokemine Nov 17, 2022
163254c
Merge branch 'master' of https://github.com/bangumi/frontend into fea…
cokemine Nov 17, 2022
25bd8dc
Update packages/website/src/pages/index/group/topic/[id]/index.tsx
cokemine Nov 17, 2022
61c02a8
Merge branch 'master' into feat/group-topic
cokemine Nov 18, 2022
37def0c
Merge remote-tracking branch 'upstream/master' into feat/group-topic
trim21 Nov 18, 2022
8967f0f
prettier
trim21 Nov 18, 2022
888ac07
prettier
trim21 Nov 18, 2022
693b933
Merge branch 'master' of https://github.com/bangumi/frontend into fea…
cokemine Nov 20, 2022
4f05ce7
Merge branch 'master' into feat/group-topic
cokemine Nov 20, 2022
5bb75f1
Merge branch 'master' into feat/group-topic
cokemine Nov 20, 2022
ef67c33
wip
cokemine Nov 20, 2022
5c90032
fix build
cokemine Nov 20, 2022
ba9b244
Merge branch 'master' of https://github.com/bangumi/frontend into fea…
cokemine Nov 20, 2022
c90decc
Merge branch 'master' of https://github.com/bangumi/frontend into fea…
cokemine Nov 21, 2022
f5f79cf
wip
cokemine Nov 21, 2022
3c1f845
update styles
cokemine Nov 21, 2022
85d8b8d
update story
cokemine Nov 21, 2022
50d963b
refactor: move pages utils to @bangumi/utils
cokemine Nov 21, 2022
b30f76c
update story
cokemine Nov 21, 2022
03d6efa
update
cokemine Nov 21, 2022
06b9981
update
cokemine Nov 21, 2022
233653e
fix and add tests
cokemine Nov 21, 2022
a58c1a4
wip: add tests
cokemine Nov 21, 2022
8affaf1
update tests
cokemine Nov 21, 2022
9916249
add tests
cokemine Nov 21, 2022
1c0cdd1
update
cokemine Nov 21, 2022
fbd95a8
update
cokemine Nov 21, 2022
c227a64
links
cokemine Nov 21, 2022
697a2a9
update snapshots
cokemine Nov 21, 2022
c7a2c39
update
cokemine Nov 21, 2022
d3d522a
add layout component
cokemine Nov 21, 2022
59ce2ce
add error boundary
cokemine Nov 21, 2022
02be365
add layout story
cokemine Nov 21, 2022
b9ee86b
fix styles
cokemine Nov 21, 2022
d77f0a2
Merge branch 'master' of https://github.com/bangumi/frontend into fea…
cokemine Nov 21, 2022
9b1cbff
fix
cokemine Nov 21, 2022
a9b770e
fix: add missing id
cokemine Nov 21, 2022
123d1e6
update
cokemine Nov 21, 2022
b44cc7c
update snapshot
cokemine Nov 21, 2022
4521a25
Merge branch 'master' of https://github.com/bangumi/frontend into fea…
cokemine Nov 22, 2022
e862555
update
cokemine Nov 22, 2022
c2261be
fix test
cokemine Nov 22, 2022
7864ef8
Merge branch 'master' of https://github.com/bangumi/frontend into fea…
cokemine Nov 27, 2022
d9b7d9b
Merge branch 'master' into feat/group-topic
trim21 Nov 28, 2022
ab670f1
update
cokemine Nov 28, 2022
2f3c8b9
Merge branch 'master' of https://github.com/bangumi/frontend into fea…
cokemine Nov 30, 2022
053ab01
update
cokemine Nov 30, 2022
7d4f7e1
update enum
cokemine Dec 1, 2022
b38c505
Merge branch 'master' of https://github.com/bangumi/frontend into fea…
cokemine Dec 1, 2022
4b156b8
update story
cokemine Dec 1, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/preview-build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ jobs:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_PREVIEW_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_PREVIEW_SITE_ID }}

- name: Find Comment
- name: Find TopicComment
uses: peter-evans/find-comment@v1
id: fc
with:
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/preview-storybook.yml
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ jobs:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_PREVIEW_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_PREVIEW_SITE_ID }}

- name: Find Comment
cokemine marked this conversation as resolved.
Show resolved Hide resolved
- name: Find TopicComment
uses: peter-evans/find-comment@v1
id: fc
with:
Expand Down
4 changes: 2 additions & 2 deletions packages/design/components/Avatar/style/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@
}

&--medium img {
height: 48px;
width: 48px;
height: 60px;
width: 60px;
}

&--large img {
Expand Down
4 changes: 2 additions & 2 deletions packages/design/components/RichContent/index.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React from 'react'
import classNames from 'classnames'

export interface RichTextProps {
export interface RichContentProps {
html: string
classname?: string
}

const RichContent: React.FC<RichTextProps> = ({ html, classname }) => {
const RichContent: React.FC<RichContentProps> = ({ html, classname }) => {
return (
<article
className={classNames('bgm-rich-content', classname)}
Expand Down
2 changes: 2 additions & 0 deletions packages/design/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export { default as Avatar } from './components/Avatar'
export { default as Input } from './components/Input'
export { default as Section } from './components/Section'
export { default as EditorForm } from './components/EditorForm'
export { default as RichContent } from './components/RichContent'

export type { ButtonProps } from './components/Button'
export type { LinkProps } from './components/Typography'
Expand All @@ -21,3 +22,4 @@ export type { AvatarProps } from './components/Avatar'
export type { InputProps } from './components/Input'
export type { SectionProps } from './components/Section'
export type { EditorFormProps } from './components/EditorForm'
export type { RichContentProps } from './components/RichContent'
3 changes: 3 additions & 0 deletions packages/icons/assets/friend.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/icons/assets/original-poster.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions packages/icons/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,8 @@ export { ReactComponent as Underscore } from './assets/underscore.svg'
export { ReactComponent as Image } from './assets/image.svg'
export { ReactComponent as Link } from './assets/link.svg'
export { ReactComponent as Size } from './assets/size.svg'

// Topic

export { ReactComponent as OriginalPoster } from './assets/original-poster.svg'
export { ReactComponent as Friend } from './assets/friend.svg'
16 changes: 16 additions & 0 deletions packages/website/src/hooks/use-group-topic.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { GroupTopicDetail } from '../types/common'
import useSWR from 'swr'
import { AxiosResponse } from 'axios'
import { privateRequest } from '../api/request'

interface UseGroupTopic {
topicDetail: GroupTopicDetail | undefined
}

function useGroupTopic (id: string): UseGroupTopic {
// todo
const { data: { data: topicDetail } = {} } = useSWR<AxiosResponse<GroupTopicDetail>>(`/p/groups/-/topics/${id}`, privateRequest.get)
return { topicDetail }
}

export default useGroupTopic
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
@import '@bangumi/design/theme/base';

.groupTopicHeader {
display: flex;
align-items: center;
height: 98px;
max-width: 913px;
}

.headerMain {
margin-left: 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
}

.navBar {
font-size: 16px;
line-height: 22px;
display: flex;
align-items: center;
justify-content: space-between;
color: @gray-60;
width: 100%;

div > a,
span {
padding-right: 10px;
}
}

.title {
font-size: 24px;
line-height: 34px;
color: @gray-100;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React, { FC } from 'react'
import styles from './GroupTopicHeader.module.less'
import { Avatar, Typography } from '@bangumi/design'
import { Creator, GroupTopicGroupInfo } from '../../../../../types/common'
import ReplyInfo from './ReplyInfo'

interface Header {
title: string
createdAt: Date
creator: Creator
group: GroupTopicGroupInfo
}

const Link = Typography.Link

const GroupTopicHeader: FC<Header> = ({
title,
createdAt,
creator,
group
}) => {
return (
<div className={styles.groupTopicHeader}>
<Avatar src={creator.avatar.large} size="medium" />
<div className={styles.headerMain}>
<span className={styles.navBar}>
<div>
<Link to={creator.url} isExternal>{creator.nickname}</Link>
<span>发表于</span>
<Link to={`/group/${group.name}`}>{group.title}</Link>
<span>»</span>
<Link to={`/group/${group.name}/forum`}>组内讨论</Link>
</div>
<ReplyInfo createdAt={createdAt} floor="1" />
</span>
<h1 className={styles.title}>{title}</h1>
</div>
</div>
)
}

export default GroupTopicHeader
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@import '@bangumi/design/theme/base';

.replyInfo {
color: @gray-60;
font-size: 14px;
line-height: 20px;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react'
import styles from './ReplyInfo.module.less'
import dayjs from 'dayjs'

interface ReplyInfoProps {
floor: string | number
createdAt: Date
}

const ReplyInfo: React.FC<ReplyInfoProps> = ({ floor, createdAt }) => {
return (
<span
className={styles.replyInfo}
>#{floor}&nbsp;&nbsp;|&nbsp;&nbsp;{dayjs(createdAt).format('YYYY-M-D HH:MM')}&nbsp;&nbsp;|&nbsp;&nbsp;!</span>
)
}

export default ReplyInfo
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
@import '@bangumi/design/theme/base';

.commentHeader {
display: flex;
align-items: flex-start;
height: 98px;
max-width: 913px;
}

.replyHeader {
margin-left: 60px;
}

.commentMain {
height: 60px;
margin-left: 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
width: 100%;
}

.topicContent {
line-height: 26px;
}

.navBar {
font-size: 16px;
line-height: 22px;
display: flex;
align-items: center;
justify-content: space-between;
color: @gray-60;
width: 100%;

.creatorInfo {
display: flex;
align-items: center;
justify-content: space-between;
}

div > a,
svg {
padding-right: 12px;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import React, { FC } from 'react'
import { Reply, Comment } from '../../../../../types/common'
import { Avatar, RichContent, Typography } from '@bangumi/design'
import { render as renderBBCode } from '@bangumi/utils'
import styles from './TopicComment.module.less'
import ReplyInfo from './ReplyInfo'
import { Friend, OriginalPoster } from '@bangumi/icons'
import classNames from 'classnames'

type TopicCommentProps =
((Reply & { isReply: true }) | (Comment & { isReply: false }))
& {
floor: string | number
originalPosterId: number
}

const Link = Typography.Link

const TopicComment: FC<TopicCommentProps> = ({
text,
creator,
created_at: createAt,
floor,
is_friend: isFriend,
originalPosterId,
...props
}) => {
const isReply = props.isReply
const replies = !isReply ? props.replies : null
const headerClassName = classNames(styles.commentHeader, { [styles.replyHeader]: isReply })
return (
<div>
<div className={headerClassName}>
<Avatar src={creator.avatar.large} size={isReply ? 'small' : 'medium'} />
<div className={styles.commentMain}>
<span className={styles.navBar}>
<div className={styles.creatorInfo}>
<Link to={creator.url} isExternal>{creator.nickname}</Link>
{
originalPosterId === creator.id ? <OriginalPoster /> : null
}
{
isFriend ? <Friend /> : null
}
{
creator.sign ? <span>{`// ${creator.sign}`}</span> : null
}
</div>
<ReplyInfo createdAt={createAt} floor={floor} />
</span>
<RichContent html={renderBBCode(text)} classname={styles.topicContent} />
</div>
</div>
{
replies?.map((reply, idx) => (
<TopicComment
key={reply.id}
isReply
floor={idx}
originalPosterId={originalPosterId}
{...reply}
/>
))
}
</div>
)
}

export default TopicComment
22 changes: 22 additions & 0 deletions packages/website/src/pages/group/topic/[id]/index.module.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
@import '@bangumi/design/theme/base';

/* Todo: col & raw component */
.columnContainer {
display: flex;
}

.leftCol {
width: 913px;
flex: 1;
margin-right: 40px;
}

.rightCol {
width: 427px;
}

.content {
font-size: 16px;
line-height: 24px;
color: @gray-100;
}
42 changes: 41 additions & 1 deletion packages/website/src/pages/group/topic/[id]/index.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,52 @@
import React, { FC } from 'react'
import { useParams } from 'react-router-dom'
import { RichContent } from '@bangumi/design'
import GlobalLayout from '../../../../components/GlobalLayout'
import useGroupTopic from '../../../../hooks/use-group-topic'
import GroupTopicHeader from './components/GroupTopicHeader'
import styles from './index.module.less'
import { render as renderBBCode } from '@bangumi/utils'
import TopicComment from './components/TopicComment'

const Topic: FC = () => {
const { id } = useParams()
const { topicDetail } = useGroupTopic(id!)
cokemine marked this conversation as resolved.
Show resolved Hide resolved
if (!topicDetail) {
return null
}
const originalPosterId = topicDetail.creator.id
const parsedText = renderBBCode(topicDetail.text)
return (
<GlobalLayout>
<div>{id}</div>
<GroupTopicHeader
title={topicDetail.title}
creator={topicDetail.creator}
createdAt={topicDetail.created_at}
group={topicDetail.group}
/>
<div className={styles.columnContainer}>
<div className={styles.leftCol}>
{/* Topic content */}
<RichContent html={parsedText} />
{/* Topic Comments */}
{
topicDetail.comments.map((comment, idx) =>
(
<TopicComment
key={comment.id}
isReply={false}
floor={idx + 2}
originalPosterId={originalPosterId}
{...comment}
/>
)
)
}
</div>
<div className={styles.rightCol}>
RightCol
</div>
</div>
</GlobalLayout>
)
}
Expand Down
Loading