diff --git a/gatsby-theme-oi-wiki/package.json b/gatsby-theme-oi-wiki/package.json index f6949ee7..5501bbd0 100644 --- a/gatsby-theme-oi-wiki/package.json +++ b/gatsby-theme-oi-wiki/package.json @@ -65,7 +65,8 @@ "simple-git": "^2.41.1", "sitemap-manager": "^2.0.1", "unified": "^10.1.0", - "use-persisted-state": "^0.3.0" + "use-persisted-state": "^0.3.0", + "@giscus/react": "^1.0.0" }, "devDependencies": { "@types/autosuggest-highlight": "^3.1.1", diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx b/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx deleted file mode 100644 index 61771de6..00000000 --- a/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { - Avatar, - Button, - CircularProgress, -} from '@material-ui/core' - -import React, { useState } from 'react' -import AvatarGroup from '@material-ui/lab/AvatarGroup' -import clsx from 'clsx' -import { User } from '@mgtd/vssue-api-github-v4/lib/types' -import { useStyles } from './styles' - -import { SvgIconComponent } from '@material-ui/icons' - -const reactionButtonDefaultProps = { - initialCount: 0, - isClicked: false, -} - -type ReactionButtonProps = { - icon: SvgIconComponent - clickedClass: string - disabled: boolean - currentUser: User - addReaction: () => Promise, - removeReaction: () => Promise, - users: User[], -} & Partial - -const ReactionButton: React.FC = (props) => { - const classes = useStyles() - const propsMerged = { ...reactionButtonDefaultProps, ...props } - const [isClicked, setIsClicked] = useState(propsMerged.isClicked) - const [count, setCount] = useState(propsMerged.initialCount) - const [users, setUsers] = useState(propsMerged.users) - const [loading, setLoading] = useState(false) - const clickFunc = async (): Promise => { - if (isClicked) { - setCount(count - 1) - setLoading(true) - await propsMerged.removeReaction() - setLoading(false) - const tmpUsers = users.filter(({ username }) => username !== propsMerged.currentUser.username) - setUsers(tmpUsers) - } else { - setCount(count + 1) - setLoading(true) - await propsMerged.addReaction() - setLoading(false) - const tmpUsers: User[] = [...users, propsMerged.currentUser] - setUsers(tmpUsers) - } - setIsClicked(!isClicked) - } - const SvgTag = props.icon - return ( - - ) -} - -export default ReactionButton diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx b/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx deleted file mode 100644 index 5ca22d2c..00000000 --- a/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import { - Avatar, - Card, - CardActions, - CardContent, - CardHeader, - CircularProgress, - IconButton, -} from '@material-ui/core' - -import { - Favorite as FavoriteIcon, - ThumbUp as ThumbUpIcon, - ThumbDown as ThumbDownIcon, - Reply as ReplyIcon, - Delete as DeleteIcon, -} from '@material-ui/icons' - -import React, { useState } from 'react' -import { User } from '@mgtd/vssue-api-github-v4/lib/types' -import Time from '../../Time' -import { Reactions } from '../types' -import { useInputContentContext } from '../inputContext' -import { useStyles } from './styles' -import ReactionButton from './ReactionButton' - -interface Props { - disabled: boolean, - currentUser: User, - commentID: string | number, - avatarLink: string, - name: string, - contentHTML: string, - contentRaw: string - time: number | string | Date, - reactions: Reactions, - deleteComment: (commentID: string | number, setLoading: (loading: boolean) => void) => Promise, - addReaction: (commentID: string | number, reaction: 'heart' | 'unlike' | 'like') => Promise, - removeReaction: (commentID: string | number, reaction: 'heart' | 'unlike' | 'like') => Promise -} - -const CommentCard: React.FC = (props) => { - const { name, time, disabled, currentUser, reactions, commentID } = props - const classes = useStyles() - const like = reactions.find(item => item.type === 'like') - const unlike = reactions.find(item => item.type === 'unlike') - const heart = reactions.find(item => item.type === 'heart') - const [deleteLoading, setDeleteLoading] = useState(false) - const { setInputContent } = useInputContentContext() - return ( - - } - title={<> - {props.name} {currentUser.username === props.name && - { props.deleteComment(commentID, setDeleteLoading) } - }> - {deleteLoading - ? - : } - } - { - setInputContent(`> ${props.contentRaw}`) - }}> - - - } - classes={{ root: classes.headerRoot }} - subheader={